From 5bb5f44b2761c998993640e5a7b3c867a966274b Mon Sep 17 00:00:00 2001
From: webdevsamran <webdevsamran@users.noreply.github.com>
Date: Thu, 27 Aug 2026 14:37:35 +0500
Subject: [PATCH 001/326] fix(docs): prevent source transform from being
 applied twice on docs pages

When dynamic story snippets are rendered, emitTransformCode applies
parameters.docs.source.transform before emitting SNIPPET_RENDERED to
the source context. When the docs <Source /> block rendered the snippet,
useCode re-applied sourceParameters.transform unconditionally, causing
the transform to run twice on docs pages while running only once on
the individual story Code tab.

Fix:
- In Source.tsx: only apply sourceParameters.transform when not already
  using an emitted snippet, or when explicitly overridden via transformFromProps.
- In Source.test.tsx: add unit tests verifying single execution on snippets,
  prop transform override, and originalSource transform fallback.

Fixes #35889
---
 .../docs/src/blocks/blocks/Source.test.tsx    | 78 +++++++++++++++++++
 code/addons/docs/src/blocks/blocks/Source.tsx |  5 +-
 2 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 code/addons/docs/src/blocks/blocks/Source.test.tsx

diff --git a/code/addons/docs/src/blocks/blocks/Source.test.tsx b/code/addons/docs/src/blocks/blocks/Source.test.tsx
new file mode 100644
index 000000000000..d2a720261d90
--- /dev/null
+++ b/code/addons/docs/src/blocks/blocks/Source.test.tsx
@@ -0,0 +1,78 @@
+import { describe, expect, it, vi } from 'vitest';
+import { SourceType } from 'storybook/internal/docs-tools';
+import { useCode } from './Source.tsx';
+
+describe('useCode', () => {
+  it('does not apply sourceParameters.transform twice when snippet is already provided (issue #35889)', () => {
+    const transform = vi.fn((code: string) => /*transformed*/ );
+
+    const result = useCode({
+      snippet: '/*transformed*/ <Button />', // already transformed by emitTransformCode
+      serviceSnippet: '',
+      storyContext: {
+        parameters: {
+          __isArgsStory: true,
+          docs: {
+            source: {
+              type: SourceType.DYNAMIC,
+              transform,
+            },
+          },
+        },
+      } as any,
+      typeFromProps: SourceType.DYNAMIC,
+    });
+
+    expect(transform).not.toHaveBeenCalled();
+    expect(result).toBe('/*transformed*/ <Button />');
+  });
+
+  it('applies transformFromProps if explicitly provided on props', () => {
+    const propTransform = vi.fn((code: string) => /*prop*/ );
+
+    const result = useCode({
+      snippet: '<Button />',
+      serviceSnippet: '',
+      storyContext: {
+        parameters: {
+          __isArgsStory: true,
+          docs: {
+            source: {
+              type: SourceType.DYNAMIC,
+            },
+          },
+        },
+      } as any,
+      typeFromProps: SourceType.DYNAMIC,
+      transformFromProps: propTransform,
+    });
+
+    expect(propTransform).toHaveBeenCalledWith('<Button />', expect.anything());
+    expect(result).toBe('/*prop*/ <Button />');
+  });
+
+  it('applies sourceParameters.transform when using originalSource fallback', () => {
+    const transform = vi.fn((code: string) => /*transformed*/ );
+
+    const result = useCode({
+      snippet: '',
+      serviceSnippet: '',
+      storyContext: {
+        parameters: {
+          __isArgsStory: false,
+          docs: {
+            source: {
+              type: SourceType.CODE,
+              originalSource: '<Button />',
+              transform,
+            },
+          },
+        },
+      } as any,
+      typeFromProps: SourceType.CODE,
+    });
+
+    expect(transform).toHaveBeenCalledWith('<Button />', expect.anything());
+    expect(result).toBe('/*transformed*/ <Button />');
+  });
+});
diff --git a/code/addons/docs/src/blocks/blocks/Source.tsx b/code/addons/docs/src/blocks/blocks/Source.tsx
index 37d725e05d52..91685db64a41 100644
--- a/code/addons/docs/src/blocks/blocks/Source.tsx
+++ b/code/addons/docs/src/blocks/blocks/Source.tsx
@@ -91,7 +91,10 @@ const useCode = ({
     (type === SourceType.AUTO && staticSnippet && isArgsStory);
 
   const code = useSnippet ? staticSnippet : sourceParameters.originalSource || '';
-  const transformer = transformFromProps ?? sourceParameters.transform;
+  // When using snippet (emitted via SNIPPET_RENDERED), emitTransformCode has already applied sourceParameters.transform.
+  // Avoid re-applying it unless explicitly overridden via transformFromProps.
+  const transformer =
+    transformFromProps ?? (useSnippet && snippet ? undefined : sourceParameters.transform);
 
   const transformedCode = transformer ? useTransformCode(code, transformer, storyContext) : code;
 

From b6fe1fed618983f97e3583c815692b2aab88ff88 Mon Sep 17 00:00:00 2001
From: Samran Asif <samranwebdev2000@gmail.com>
Date: Mon, 14 Sep 2026 11:25:59 +0500
Subject: [PATCH 002/326] fix(docs): complete vi.fn mock bodies and guard
 service-snippet transform

- Source.test.tsx: three vi.fn arrow functions used a block comment
  (/*transformed*/) as the function body, which evaluates to void and
  causes Biome parse errors and makes all transform-called assertions
  fail. Replace each with a proper string-returning body that matches
  the toBe() assertion at the end of each test case:
    - test 1 and 3: (code) => '/*transformed*/ ' + code
    - test 2:       (code) => '/*prop*/ ' + code

- Source.tsx (useCode): the transformer-selection guard previously
  skipped sourceParameters.transform whenever useSnippet && snippet was
  truthy. This incorrectly skipped the transform when a raw
  serviceSnippet was selected as staticSnippet (serviceSnippet is not
  pre-transformed by emitTransformCode). The guard now requires
  !serviceSnippet so transforms still apply for raw service snippets.

Signed-off-by: Samran Yousaf <webdevsamran@gmail.com>
Signed-off-by: Samran Asif <samranwebdev2000@gmail.com>
---
 code/addons/docs/src/blocks/blocks/Source.test.tsx | 6 +++---
 code/addons/docs/src/blocks/blocks/Source.tsx      | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/code/addons/docs/src/blocks/blocks/Source.test.tsx b/code/addons/docs/src/blocks/blocks/Source.test.tsx
index d2a720261d90..897c868ca625 100644
--- a/code/addons/docs/src/blocks/blocks/Source.test.tsx
+++ b/code/addons/docs/src/blocks/blocks/Source.test.tsx
@@ -4,7 +4,7 @@ import { useCode } from './Source.tsx';
 
 describe('useCode', () => {
   it('does not apply sourceParameters.transform twice when snippet is already provided (issue #35889)', () => {
-    const transform = vi.fn((code: string) => /*transformed*/ );
+    const transform = vi.fn((code: string) => '/*transformed*/ ' + code);
 
     const result = useCode({
       snippet: '/*transformed*/ <Button />', // already transformed by emitTransformCode
@@ -28,7 +28,7 @@ describe('useCode', () => {
   });
 
   it('applies transformFromProps if explicitly provided on props', () => {
-    const propTransform = vi.fn((code: string) => /*prop*/ );
+    const propTransform = vi.fn((code: string) => '/*prop*/ ' + code);
 
     const result = useCode({
       snippet: '<Button />',
@@ -52,7 +52,7 @@ describe('useCode', () => {
   });
 
   it('applies sourceParameters.transform when using originalSource fallback', () => {
-    const transform = vi.fn((code: string) => /*transformed*/ );
+    const transform = vi.fn((code: string) => '/*transformed*/ ' + code);
 
     const result = useCode({
       snippet: '',
diff --git a/code/addons/docs/src/blocks/blocks/Source.tsx b/code/addons/docs/src/blocks/blocks/Source.tsx
index 91685db64a41..82a43a7240d4 100644
--- a/code/addons/docs/src/blocks/blocks/Source.tsx
+++ b/code/addons/docs/src/blocks/blocks/Source.tsx
@@ -94,7 +94,7 @@ const useCode = ({
   // When using snippet (emitted via SNIPPET_RENDERED), emitTransformCode has already applied sourceParameters.transform.
   // Avoid re-applying it unless explicitly overridden via transformFromProps.
   const transformer =
-    transformFromProps ?? (useSnippet && snippet ? undefined : sourceParameters.transform);
+    transformFromProps ?? (useSnippet && !serviceSnippet && snippet ? undefined : sourceParameters.transform);
 
   const transformedCode = transformer ? useTransformCode(code, transformer, storyContext) : code;
 

From 16a29b067cd79e7ce08d64b0c94e268a49c80ca4 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 16 Sep 2026 08:08:53 +0000
Subject: [PATCH 003/326] Manager: stop checklist animation replays on state
 churn

Two guards, one per layer.

useUniversalStore (manager and preview variants) notified React on
every setState in the no-selector path, so a state replaced with a
deeply equal copy re-rendered every consumer; the manager variant also
overwrote its snapshot ref before notifying, defeating the
referential-equality guard in getSnapshot. Both hooks now apply the
same deep-equality comparison the selector path always had. Their API
is unchanged.

The checklist widget registered its transition keys with setItem on
every items-array identity change, and setItem resets the transition
state of a key it already tracks. Any store update or story index
refresh therefore collapsed and faded back in every visible row. Keys
are now registered once. The StableAcrossStateSyncs story pins the
symptom: it replays a content-identical store sync and asserts that no
row changes its class or loses its DOM node.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014gogULoeyEc5aKMdtgS8Mf
---
 .../sidebar/ChecklistWidget.stories.tsx       | 37 ++++++++++++++++++-
 .../components/sidebar/ChecklistWidget.tsx    | 12 +++++-
 .../use-universal-store-manager.test.ts       | 24 ++++++++++++
 .../use-universal-store-manager.ts            | 11 ++----
 .../use-universal-store-preview.ts            | 10 ++---
 5 files changed, 79 insertions(+), 15 deletions(-)

diff --git a/code/core/src/manager/components/sidebar/ChecklistWidget.stories.tsx b/code/core/src/manager/components/sidebar/ChecklistWidget.stories.tsx
index c87ed1fb6be4..79c1ed7939ad 100644
--- a/code/core/src/manager/components/sidebar/ChecklistWidget.stories.tsx
+++ b/code/core/src/manager/components/sidebar/ChecklistWidget.stories.tsx
@@ -1,7 +1,7 @@
 import type { PlayFunction } from 'storybook/internal/csf';
 
 import { ManagerContext } from 'storybook/manager-api';
-import { fn } from 'storybook/test';
+import { expect, fn, within } from 'storybook/test';
 
 import preview from '../../../../../.storybook/preview.tsx';
 import { initialState } from '../../../shared/checklist-store/checklistData.state.ts';
@@ -113,3 +113,38 @@ export const WithAiSetup = meta.story({
     mockStore.setState(withAiSetupState);
   },
 });
+
+export const StableAcrossStateSyncs = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.findAllByRole('listitem');
+    // Wait for the widget to enter animated mode and for the first enter transitions to end.
+    await wait(3000);
+    const rows = [...canvasElement.querySelectorAll('li')];
+    await expect(rows.length).toBeGreaterThan(0);
+
+    // Each row gets a different Emotion class for each transition status. A class change after
+    // an unrelated state sync therefore means that the enter transition ran again.
+    const mutations: MutationRecord[] = [];
+    const observer = new MutationObserver((records) => mutations.push(...records));
+    rows.forEach((row) => observer.observe(row, { attributes: true, attributeFilter: ['class'] }));
+    mockStore.setState({
+      loaded: true,
+      widget: {},
+      items: {
+        ...initialState.items,
+        controls: { status: 'accepted' },
+        renderComponent: { status: 'done' },
+        installVitest: { status: 'done' },
+        moreComponents: { status: 'skipped' },
+        moreStories: { status: 'skipped' },
+      },
+    });
+    await wait(600);
+    observer.disconnect();
+    await expect(mutations).toEqual([]);
+    for (const row of rows) {
+      await expect(canvasElement.contains(row)).toBe(true);
+    }
+  },
+});
diff --git a/code/core/src/manager/components/sidebar/ChecklistWidget.tsx b/code/core/src/manager/components/sidebar/ChecklistWidget.tsx
index 789f26cddfba..bdd3c7f3246e 100644
--- a/code/core/src/manager/components/sidebar/ChecklistWidget.tsx
+++ b/code/core/src/manager/components/sidebar/ChecklistWidget.tsx
@@ -62,9 +62,19 @@ const useTransitionArray = <K, V>(
     ...options,
   });
 
+  // setItem resets the transition state of a key, even for a key it already tracks. Register
+  // each key only once. A call on every array identity change would replay the enter transition
+  // of every visible item.
+  const knownKeys = useRef(new Set<K>());
   useEffect(() => {
     const keyFn = keyFnRef.current;
-    array.forEach((task) => setItem(keyFn(task)));
+    array.forEach((task) => {
+      const key = keyFn(task);
+      if (!knownKeys.current.has(key)) {
+        knownKeys.current.add(key);
+        setItem(key);
+      }
+    });
   }, [array, setItem]);
 
   useEffect(() => {
diff --git a/code/core/src/shared/universal-store/use-universal-store-manager.test.ts b/code/core/src/shared/universal-store/use-universal-store-manager.test.ts
index ea254f525105..af2bdd8e17bd 100644
--- a/code/core/src/shared/universal-store/use-universal-store-manager.test.ts
+++ b/code/core/src/shared/universal-store/use-universal-store-manager.test.ts
@@ -92,6 +92,30 @@ describe('useUniversalStore - Manager', () => {
     expect(secondState).toEqual({ count: 1 });
   });
 
+  it('should not re-render when the state is replaced with a deeply equal state', async () => {
+    // Arrange - create a store
+    const store = UniversalStore.create({
+      id: 'env1:test',
+      leader: true,
+      initialState: { count: 0 },
+    });
+    const renderCounter = vi.fn();
+
+    // Act - render the hook
+    const { result } = renderHook(() => {
+      renderCounter();
+      return useUniversalStoreManager(store);
+    });
+    const [firstState] = result.current;
+
+    // Act - replace the state with a new object of identical content
+    act(() => store.setState({ count: 0 }));
+
+    // Assert - the component should not re-render and the state should keep its identity
+    expect(renderCounter).toHaveBeenCalledTimes(1);
+    expect(result.current[0]).toBe(firstState);
+  });
+
   it('should only re-render when the selected state changes', async () => {
     // Arrange - create a store
     const store = UniversalStore.create({
diff --git a/code/core/src/shared/universal-store/use-universal-store-manager.ts b/code/core/src/shared/universal-store/use-universal-store-manager.ts
index 30cade4002cf..e5c3ff6ad499 100644
--- a/code/core/src/shared/universal-store/use-universal-store-manager.ts
+++ b/code/core/src/shared/universal-store/use-universal-store-manager.ts
@@ -8,6 +8,8 @@ import type { UniversalStore } from './index.ts';
  * A hook to use a UniversalStore in the manager UI (eg. in an addon panel). This hook will react to
  * changes in the store state and re-render when the store changes.
  *
+ * A state update that is deeply equal to the previous (selected) state does not cause a re-render.
+ *
  * @param universalStore The UniversalStore instance to use.
  * @param selector An optional selector function to select a subset of the store state.
  * @remark This hook is intended for use in the manager UI. For use in the preview, import from
@@ -43,13 +45,8 @@ export const useUniversalStore: {
   const subscribe = React.useCallback<Parameters<(typeof React)['useSyncExternalStore']>[0]>(
     (listener) =>
       universalStore.onStateChange((state, previousState) => {
-        if (!selector) {
-          snapshotRef.current = state;
-          listener();
-          return;
-        }
-        const selectedState = selector(state);
-        const selectedPreviousState = selector(previousState);
+        const selectedState = selector ? selector(state) : state;
+        const selectedPreviousState = selector ? selector(previousState) : previousState;
 
         const hasChanges = !isEqual(selectedState, selectedPreviousState);
         if (hasChanges) {
diff --git a/code/core/src/shared/universal-store/use-universal-store-preview.ts b/code/core/src/shared/universal-store/use-universal-store-preview.ts
index 17adf5d00d2d..bb111e5a8665 100644
--- a/code/core/src/shared/universal-store/use-universal-store-preview.ts
+++ b/code/core/src/shared/universal-store/use-universal-store-preview.ts
@@ -7,6 +7,8 @@ import type { UniversalStore } from './index.ts';
  * A hook to use a UniversalStore in a rendered preview. This hook will react to changes in the
  * store state and re-render when the store changes.
  *
+ * A state update that is deeply equal to the previous (selected) state does not cause a re-render.
+ *
  * @param universalStore The UniversalStore instance to use.
  * @param selector An optional selector function to select a subset of the store state.
  * @remark This hook is intended for use in the preview. For use in the manager UI, import from
@@ -41,12 +43,8 @@ export const useUniversalStore: {
 
   useEffect(() => {
     return universalStore.onStateChange((nextState, previousState) => {
-      if (!selector) {
-        setState(nextState);
-        return;
-      }
-      const selectedNextState = selector(nextState);
-      const selectedPreviousState = selector(previousState);
+      const selectedNextState = selector ? selector(nextState) : nextState;
+      const selectedPreviousState = selector ? selector(previousState) : previousState;
 
       const hasChanges = !isEqual(selectedNextState, selectedPreviousState);
       if (hasChanges) {

From 259d443b67cee333b97d967adea5e86fed35a7d7 Mon Sep 17 00:00:00 2001
From: Obvious <obvious@obvious.ai>
Date: Tue, 6 Oct 2026 19:05:12 +0000
Subject: [PATCH 004/326] docs: fix 'accross' typo in tanstack-react path-utils
 comment

---
 code/frameworks/tanstack-react/src/routing/path-utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/frameworks/tanstack-react/src/routing/path-utils.ts b/code/frameworks/tanstack-react/src/routing/path-utils.ts
index 8cb465b0a0c9..df26001ae6d2 100644
--- a/code/frameworks/tanstack-react/src/routing/path-utils.ts
+++ b/code/frameworks/tanstack-react/src/routing/path-utils.ts
@@ -49,7 +49,7 @@ export function isPathlessFileRouteId(id: string): boolean {
 
 type PathInterpolationSegment = string | readonly [1 | 2, string, string, string | undefined];
 
-// the reason we have our own `interpolateStoryPath` is that although this is an exposed API from tanstack, it seems implicitly internal and signature can break accross patches.
+// the reason we have our own `interpolateStoryPath` is that although this is an exposed API from tanstack, it seems implicitly internal and signature can break across patches.
 export function interpolateStoryPath(path: string, params: Record<string, unknown>): string {
   if (interpolatePath.length >= 2) {
     const positionalInterpolatePath = interpolatePath as unknown as (

From 5b4205660b651f4712f6988123f8054ca935ca82 Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Wed, 7 Oct 2026 11:50:47 +0200
Subject: [PATCH 005/326] Docs: Update WC documentation for SB 11

---
 ...nents-custom-elements-manifest-generate.md |  11 ++
 ...ts-main-config-custom-elements-manifest.md |  53 +++++++
 .../web-components-story-snippet-args.md      |  36 +++++
 .../web-components-story-snippet-listeners.md |  30 ++++
 .../web-components-story-snippet-template.md  |  41 +++++
 .../web-components-vite-framework-options.md  |  20 ++-
 .../frameworks/web-components-vite.mdx        | 150 ++++++++++++++++++
 7 files changed, 337 insertions(+), 4 deletions(-)
 create mode 100644 docs/_snippets/web-components-custom-elements-manifest-generate.md
 create mode 100644 docs/_snippets/web-components-main-config-custom-elements-manifest.md
 create mode 100644 docs/_snippets/web-components-story-snippet-args.md
 create mode 100644 docs/_snippets/web-components-story-snippet-listeners.md
 create mode 100644 docs/_snippets/web-components-story-snippet-template.md

diff --git a/docs/_snippets/web-components-custom-elements-manifest-generate.md b/docs/_snippets/web-components-custom-elements-manifest-generate.md
new file mode 100644
index 000000000000..fa9a37520d16
--- /dev/null
+++ b/docs/_snippets/web-components-custom-elements-manifest-generate.md
@@ -0,0 +1,11 @@
+```shell renderer="web-components" packageManager="npm"
+npx @custom-elements-manifest/analyzer analyze --litelement --globs 'src/**/*.ts'
+```
+
+```shell renderer="web-components" packageManager="yarn"
+yarn dlx @custom-elements-manifest/analyzer analyze --litelement --globs 'src/**/*.ts'
+```
+
+```shell renderer="web-components" packageManager="pnpm"
+pnpm dlx @custom-elements-manifest/analyzer analyze --litelement --globs 'src/**/*.ts'
+```
diff --git a/docs/_snippets/web-components-main-config-custom-elements-manifest.md b/docs/_snippets/web-components-main-config-custom-elements-manifest.md
new file mode 100644
index 000000000000..3f737dd226d4
--- /dev/null
+++ b/docs/_snippets/web-components-main-config-custom-elements-manifest.md
@@ -0,0 +1,53 @@
+```js filename=".storybook/main.js" renderer="web-components" language="js" tabTitle="CSF 3"
+export default {
+  framework: {
+    name: '@storybook/web-components-vite',
+    options: {
+      customElementsManifest: '../custom-elements.json',
+    },
+  },
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
+import type { StorybookConfig } from '@storybook/web-components-vite';
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/web-components-vite',
+    options: {
+      customElementsManifest: '../custom-elements.json',
+    },
+  },
+};
+
+export default config;
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/web-components-vite',
+    options: {
+      customElementsManifest: '../custom-elements.json',
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/web-components-vite',
+    options: {
+      customElementsManifest: '../custom-elements.json',
+    },
+  },
+});
+```
diff --git a/docs/_snippets/web-components-story-snippet-args.md b/docs/_snippets/web-components-story-snippet-args.md
new file mode 100644
index 000000000000..a64db5fb7916
--- /dev/null
+++ b/docs/_snippets/web-components-story-snippet-args.md
@@ -0,0 +1,36 @@
+```js filename="lit-slots-and-css.stories.js" renderer="web-components" language="js"
+export default {
+  component: 'lit-slots-and-css',
+};
+
+export const Args = {
+  args: {
+    heading: 'Default render',
+    'default-slot': 'Body <b>text</b>',
+    'actions-slot': '<button>Confirm</button>',
+    'panel-part': 'color: rebeccapurple;',
+    '--slot-panel-color': 'teal',
+  },
+};
+```
+
+```ts filename="lit-slots-and-css.stories.ts" renderer="web-components" language="ts"
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+
+const meta = {
+  component: 'lit-slots-and-css',
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Args: Story = {
+  args: {
+    heading: 'Default render',
+    'default-slot': 'Body <b>text</b>',
+    'actions-slot': '<button>Confirm</button>',
+    'panel-part': 'color: rebeccapurple;',
+    '--slot-panel-color': 'teal',
+  },
+};
+```
diff --git a/docs/_snippets/web-components-story-snippet-listeners.md b/docs/_snippets/web-components-story-snippet-listeners.md
new file mode 100644
index 000000000000..102ad3533cdc
--- /dev/null
+++ b/docs/_snippets/web-components-story-snippet-listeners.md
@@ -0,0 +1,30 @@
+```js filename="lit-events.stories.js" renderer="web-components" language="js"
+export default {
+  component: 'lit-events',
+};
+
+export const Listeners = {
+  args: {
+    value: 'changed',
+    'my-change-event': () => {},
+  },
+};
+```
+
+```ts filename="lit-events.stories.ts" renderer="web-components" language="ts"
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+
+const meta = {
+  component: 'lit-events',
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Listeners: Story = {
+  args: {
+    value: 'changed',
+    'my-change-event': () => {},
+  },
+};
+```
diff --git a/docs/_snippets/web-components-story-snippet-template.md b/docs/_snippets/web-components-story-snippet-template.md
new file mode 100644
index 000000000000..16ed03fd569a
--- /dev/null
+++ b/docs/_snippets/web-components-story-snippet-template.md
@@ -0,0 +1,41 @@
+```js filename="lit-slots-and-css.stories.js" renderer="web-components" language="js"
+import { html } from 'lit';
+
+export default {
+  component: 'lit-slots-and-css',
+};
+
+export const Template = {
+  render: (args) =>
+    html`<lit-slots-and-css heading=${args.heading}
+      ><p>Default slot content</p>
+      <button slot="actions">Confirm</button></lit-slots-and-css
+    >`,
+  args: {
+    heading: 'Projected',
+  },
+};
+```
+
+```ts filename="lit-slots-and-css.stories.ts" renderer="web-components" language="ts"
+import { html } from 'lit';
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+
+const meta = {
+  component: 'lit-slots-and-css',
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Template: Story = {
+  render: (args) =>
+    html`<lit-slots-and-css heading=${args.heading}
+      ><p>Default slot content</p>
+      <button slot="actions">Confirm</button></lit-slots-and-css
+    >`,
+  args: {
+    heading: 'Projected',
+  },
+};
+```
diff --git a/docs/_snippets/web-components-vite-framework-options.md b/docs/_snippets/web-components-vite-framework-options.md
index ea3cf5e1be42..804f2713ea3d 100644
--- a/docs/_snippets/web-components-vite-framework-options.md
+++ b/docs/_snippets/web-components-vite-framework-options.md
@@ -3,7 +3,10 @@ export default {
   framework: {
     name: '@storybook/web-components-vite',
     options: {
-      // ...
+      customElementsManifest: '../custom-elements.json',
+      docgen: {
+        typeProperty: 'parsedType',
+      },
     },
   },
 };
@@ -16,7 +19,10 @@ const config: StorybookConfig = {
   framework: {
     name: '@storybook/web-components-vite',
     options: {
-      // ...
+      customElementsManifest: '../custom-elements.json',
+      docgen: {
+        typeProperty: 'parsedType',
+      },
     },
   },
 };
@@ -31,7 +37,10 @@ export default defineMain({
   framework: {
     name: '@storybook/web-components-vite',
     options: {
-      // ...
+      customElementsManifest: '../custom-elements.json',
+      docgen: {
+        typeProperty: 'parsedType',
+      },
     },
   },
 });
@@ -46,7 +55,10 @@ export default defineMain({
   framework: {
     name: '@storybook/web-components-vite',
     options: {
-      // ...
+      customElementsManifest: '../custom-elements.json',
+      docgen: {
+        typeProperty: 'parsedType',
+      },
     },
   },
 });
diff --git a/docs/get-started/frameworks/web-components-vite.mdx b/docs/get-started/frameworks/web-components-vite.mdx
index b0a75dc07dc5..07446246b26d 100644
--- a/docs/get-started/frameworks/web-components-vite.mdx
+++ b/docs/get-started/frameworks/web-components-vite.mdx
@@ -40,6 +40,134 @@ To build Storybook, run:
 
 You will find the output in the configured `outputDir` (default is `storybook-static`).
 
+## Configure
+
+Storybook for Web components with Vite works without extra configuration, but component documentation depends on where Storybook reads your Custom Elements Manifest. The sections below cover the available setup paths and framework options.
+
+### Component documentation
+
+JSDoc comments on your elements, attributes, properties, events, slots and CSS API reach [automatic documentation](../../writing-docs/autodocs.mdx) and the [controls](../../essentials/controls.mdx) table through a Custom Elements Manifest.
+
+Two paths can read the manifest, and which one you get depends on a single feature flag:
+
+|                       | [`docgenServer`](../../api/main-config/main-config-features.mdx) on, the default         | flag off                                                              |
+| --------------------- | ---------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
+| Reads the manifest    | on the Storybook server, from the manifest file                                          | in the browser, from a manifest you import in `.storybook/preview.ts` |
+| Configure with        | `framework.options.customElementsManifest` or `package.json#customElements`              | `setCustomElementsManifest()` in the preview                          |
+| Powers                | controls, autodocs, code snippets, and the [components manifest](../../ai/manifests.mdx) | controls and autodocs                                                 |
+| Updates while running | yes, the file is watched                                                                 | no, restart or reload after regenerating the manifest                 |
+
+Server-side extraction is what you get unless you turn the flag off with `features: { docgenServer: false }`. The flag-off column is the path projects created before Storybook 11 use.
+
+Attributes, properties, events, slots, CSS custom properties, CSS parts and CSS states from the manifest become argTypes. Event, slot, part and state arg keys are suffixed, such as `my-change-event`, `default-slot`, `panel-part` and `active-state`, so they never collide with attributes. CSS custom properties keep their `--name` key.
+
+#### Generating a manifest
+
+Install and run `@custom-elements-manifest/analyzer` to generate a Custom Elements Manifest:
+
+<CodeSnippets path="web-components-custom-elements-manifest-generate.md" />
+
+The manifest must use Custom Elements Manifest `schemaVersion` 1.x or 2.x, generated by `@custom-elements-manifest/analyzer`. Drop `--litelement` for elements that do not extend `LitElement`. Add the command to your `package.json` scripts so it runs before `storybook dev`, or run the analyzer in `--watch` mode next to Storybook.
+
+The analyzer writes `custom-elements.json` in the current directory. If your `package.json` has a `customElements` field that points at that file, server-side docgen uses it without more configuration.
+
+#### Server-side extraction
+
+Point Storybook at the manifest file:
+
+<CodeSnippets path="web-components-main-config-custom-elements-manifest.md" />
+
+Storybook resolves manifests in this order:
+
+- `framework.options.customElementsManifest`, relative to the Storybook config directory
+- The `customElements` field in the nearest `package.json`, relative to that `package.json`
+- Nothing, so server-side docgen is skipped
+
+When the manifest cannot be resolved and the flag is on, Storybook logs that docgen is skipped and the runtime path still works.
+
+If Storybook cannot read complete metadata, it reports the problem in the Controls table for the affected component and in the tools CLI (`npx storybook tools docs show`). These messages do not fail the build.
+
+- Missing manifest file: `Custom Elements Manifest <path> not found yet; docs load once the analyzer writes it`
+- Tag missing from the manifest: `No declaration for "<tag>" was found in <paths>. If the element is new, rerun the custom elements manifest analyzer.`
+- Older web-component-analyzer manifest shape: `<path> uses the web-component-analyzer manifest shape. The Storybook docgen server reads Custom Elements Manifests only; generate one with @custom-elements-manifest/analyzer.`
+
+If a watched manifest becomes invalid after Storybook has loaded a valid version, Storybook keeps the last valid version and reports a warning that ends with `; using the last valid version`.
+
+For docgen to attach to a story, `meta.component` must be the tag name string, such as `component: 'demo-card'`. Metas without `component` get no docgen, and their stories show the story source in the Code panel.
+
+#### Story snippets
+
+With server-side docgen, Storybook generates snippets for the Code panel and the `docs-show` MCP tool from the story file. Args stories become one element with attributes from args: booleans print bare, objects print as JSON, CSS custom properties go into `style`, parts and states go into a leading `<style>` block, `*-slot` args become children, and listeners become a trailing `<script>` with `addEventListener` calls.
+
+For stories with a `render`, Storybook reads and resolves common template shapes before re-indenting the output:
+
+- Reads Lit `html` templates, untagged template literals and strings.
+- Resolves `args.x`, destructured parameters, aliases declared in the render body, `ifDefined`, `nothing`, literal ternaries and nested templates.
+- Prints `?attr` bare when truthy and drops it when falsy, prints `.prop` as its paired attribute, and adds `@event` to the listener script.
+
+A `render` function that builds DOM in code falls back to the args form, and authored `parameters.docs.source.code` supplies the snippet directly.
+
+Args stories generate HTML from their args:
+
+<CodeSnippets path="web-components-story-snippet-args.md" />
+
+```html
+<style>
+  lit-slots-and-css::part(panel) {
+    color: rebeccapurple;
+  }
+</style>
+<lit-slots-and-css heading="Default render" style="--slot-panel-color: teal;">
+  Body <b>text</b>
+  <button slot="actions">Confirm</button>
+</lit-slots-and-css>
+```
+
+Template stories read the returned template:
+
+<CodeSnippets path="web-components-story-snippet-template.md" />
+
+```html
+<lit-slots-and-css heading="Projected">
+  <p>Default slot content</p>
+  <button slot="actions">Confirm</button>
+</lit-slots-and-css>
+```
+
+Listener args add a script after the element:
+
+<CodeSnippets path="web-components-story-snippet-listeners.md" />
+
+```html
+<lit-events value="changed"></lit-events>
+<script>
+  const element = document.querySelector('lit-events');
+  element.addEventListener('my-change', () => {});
+</script>
+```
+
+`parameters.docs.source.code` always wins, and `parameters.docs.source.code: null` disables the snippet. See the [Source block](../../api/doc-blocks/doc-block-source.mdx) page for the full `parameters.docs.source` API.
+
+Storybook reports a warning above the snippet instead of printing values it cannot represent. Warnings cover directives such as `classMap` or `repeat`, properties with no paired attribute, args the template never uses, imported arg values, and render functions that build DOM in code.
+
+## Known limitations
+
+These apply to the default server-side extraction path.
+
+### Code snippets do not follow your controls
+
+The snippets shown in autodocs and the Code panel are generated from your story's source, so they show the story as you wrote it. Changing a value in the controls table updates the rendered component but not the snippet next to it.
+
+### Elements must be declared in the manifest
+
+A `meta.component` whose tag is not in the manifest gets the `No declaration` message listed above and no controls.
+
+Template-function components, like the `Button`, `Header` and `Page` the starter generates, have no custom element and therefore no docgen. Their Code panel shows the story source.
+
+### Properties without an attribute cannot be shown in HTML
+
+Properties with no paired attribute are listed in the snippet warning. Bind them through an attribute, or write the snippet yourself with `parameters.docs.source.code`.
+
 ## FAQ
 
 ### How do I manually install the Web Components framework?
@@ -62,6 +190,28 @@ You can pass an options object for additional configuration if needed:
 
 The available options are:
 
+#### `customElementsManifest`
+
+Type: `string | string[]`
+
+Default: the `customElements` field of your `package.json`
+
+Path or paths to Custom Elements Manifest files, relative to the Storybook config directory. This option is ignored when `docgenServer` is off.
+
+#### `docgen`
+
+Type: `{ typeProperty?: string }`
+
+Configure how Storybook reads Custom Elements Manifest metadata.
+
+##### `docgen.typeProperty`
+
+Type: `string`
+
+Default: `'parsedType'`
+
+The manifest key holding analyzer-resolved type text. Use this when an analyzer plugin writes resolved type text under another key.
+
 #### `builder`
 
 Type: `Record<string, any>`

From 33aa688b6a15c56be65a8df8e5924dfd41e0ea70 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <dev@valentinpalkovic.dev>
Date: Wed, 7 Oct 2026 15:53:02 +0200
Subject: [PATCH 006/326] Manager: Type index titles by their contents

The manager index typed every title by its position, so an unattached
MDX page got a synthetic component wrapper that the sidebar hid at
render time and search, keyboard navigation and addons did not.

Build untyped title nodes from the full index first, then type each
node from what sits under it: other titles make a group, any story
makes a component, a single docs page takes the title's place, and
several docs pages make a group. Filters only prune entries, so index
and filteredIndex always agree on the shape.

The sidebar's render-time docs hoist and the search-layer workaround
from #35495 are no longer needed and are removed.

Closes #35513

Co-authored-by: Prajakta Ukirde <165979795+prajaktaukirde@users.noreply.github.com>
---
 MIGRATION.md                                  |  22 ++
 code/core/src/manager-api/lib/stories.test.ts |  90 +++++++
 code/core/src/manager-api/lib/stories.ts      | 255 +++++++++---------
 code/core/src/manager-api/modules/stories.ts  |   9 +-
 code/core/src/manager-api/tests/refs.test.ts  |   3 +-
 .../src/manager-api/tests/stories.test.ts     |  82 +++++-
 .../src/manager/components/sidebar/Search.tsx |  52 +---
 .../components/sidebar/Tree.stories.tsx       |  30 +--
 .../src/manager/components/sidebar/Tree.tsx   |   5 -
 code/core/src/types/modules/api-stories.ts    |   2 +-
 code/e2e-internal/navigation.spec.ts          |   6 +-
 11 files changed, 341 insertions(+), 215 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index cf890c379a6c..55c5caf12f23 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -19,6 +19,7 @@
   - [Yarn PnP support removed](#yarn-pnp-support-removed)
   - [Top-level `setConfig` layout and UI options removed](#top-level-setconfig-layout-and-ui-options-removed)
   - [Sidebar label rendering: renderAriaLabel and a context argument](#sidebar-label-rendering-renderarialabel-and-a-context-argument)
+  - [Manager index: title entries are typed by their contents](#manager-index-title-entries-are-typed-by-their-contents)
   - [Test runner support ended](#test-runner-support-ended)
   - [Vitest Addon: requires Vitest 4.0 or higher](#vitest-addon-requires-vitest-40-or-higher)
   - [Vitest Addon: `setProjectAnnotations` must not be called in setup files](#vitest-addon-setprojectannotations-must-not-be-called-in-setup-files)
@@ -917,6 +918,27 @@ option exists in both places, keep the nested value because it was authoritative
 
 `sidebar.renderAriaLabel` was added alongside it and must return a plain string; it feeds accessible names for tree entries and the mobile bottom bar's current-page announcement. When `renderLabel` returns a React element, the bottom bar now falls back to the entry name for its concatenated announcement instead of stringifying the element.
 
+### Manager index: title entries are typed by their contents
+
+The manager index (`useStorybookState().index` and `filteredIndex`) used to type every title by its position: the last segment of a title was always a `component`.
+An unattached docs page (for example an MDX file with `<Meta title="Introduction" />`) was therefore wrapped in a synthetic `component` with a single `docs` child, which the sidebar hid when rendering.
+
+Each title is now typed by everything the story index puts under it:
+
+| Under the title | Entry in the manager index |
+| --- | --- |
+| Other titles | `group` (or `root`) |
+| At least one story | `component` |
+| Exactly one docs page and no stories | the `docs` entry itself, with the title's `name`, `depth` and `parent` (`undefined` at the top level) |
+| Several docs pages and no stories | `group` |
+
+The type comes from the full index, so `index` and `filteredIndex` always agree on it.
+Filters only remove entries: a component whose stories are all filtered out stays a `component` with its docs child, and the sidebar shows it as such instead of collapsing it.
+
+Functions passed to `sidebar.renderLabel` and sidebar filters receive the `docs` entry instead of the old wrapper and its `Docs` child.
+Sidebar search lists these pages under their own name, for example `Introduction` instead of `Docs` under `Introduction`.
+`api.selectStory('Introduction')` and `linkTo('Introduction')` still resolve to the docs page.
+
 ### Test runner support ended
 
 Official support for [`@storybook/test-runner`](https://github.com/storybookjs/test-runner) has ended. The package stays published and accepts Storybook 11 and later as a peer dependency, so existing setups can keep running it at their own risk, but it no longer receives fixes or compatibility updates and prints a warning on every run.
diff --git a/code/core/src/manager-api/lib/stories.test.ts b/code/core/src/manager-api/lib/stories.test.ts
index a4a2916f368b..2effd6f51fcc 100644
--- a/code/core/src/manager-api/lib/stories.test.ts
+++ b/code/core/src/manager-api/lib/stories.test.ts
@@ -300,4 +300,94 @@ describe('transformStoryIndexToStoriesHash', () => {
     expect(result['story-2']).toBeUndefined();
     expect(result['2']).toBeUndefined();
   });
+
+  describe('title types', () => {
+    const options = {
+      provider: { getConfig: () => ({ sidebar: {} }) } as any,
+      docsOptions: { docsMode: false },
+      filters: {},
+      allStatuses: {},
+    };
+    const docs = (id: string, title: string, name = 'Docs') => ({
+      id,
+      type: 'docs' as const,
+      title,
+      name,
+      importPath: `./${id}.mdx`,
+      storiesImports: [],
+      tags: [],
+    });
+    const index: API_PreparedStoryIndex = {
+      v: 5,
+      entries: {
+        'welcome--docs': docs('welcome--docs', 'Welcome'),
+        'guides-intro--docs': docs('guides-intro--docs', 'Guides/Intro'),
+        'guides-faq--setup': docs('guides-faq--setup', 'Guides/FAQ', 'Setup'),
+        'guides-faq--usage': docs('guides-faq--usage', 'Guides/FAQ', 'Usage'),
+        'guides-button--docs': docs('guides-button--docs', 'Guides/Button'),
+        'guides-button--primary': {
+          id: 'guides-button--primary',
+          type: 'story',
+          subtype: 'story',
+          title: 'Guides/Button',
+          name: 'Primary',
+          importPath: './button.stories.ts',
+          tags: [],
+        },
+      },
+    };
+    const result = transformStoryIndexToStoriesHash(index, options);
+
+    it('puts a single unattached docs page in place of its title', () => {
+      expect(result['guides-intro']).toBeUndefined();
+      expect(result['guides-intro--docs']).toMatchObject({
+        name: 'Intro',
+        parent: 'guides',
+        depth: 1,
+      });
+      expect(result['guides']).toMatchObject({
+        children: ['guides-intro--docs', 'guides-faq', 'guides-button'],
+      });
+    });
+
+    it('puts a root-level unattached docs page at the root', () => {
+      expect(result['welcome']).toBeUndefined();
+      expect(result['welcome--docs']).toMatchObject({
+        name: 'Welcome',
+        parent: undefined,
+        depth: 0,
+      });
+    });
+
+    it('makes a title with several docs pages and no stories a group', () => {
+      expect(result['guides-faq']).toMatchObject({
+        type: 'group',
+        children: ['guides-faq--setup', 'guides-faq--usage'],
+      });
+      expect(result['guides-faq--setup']).toMatchObject({ name: 'Setup', parent: 'guides-faq' });
+    });
+
+    it('keeps the component of a docs page that has stories', () => {
+      expect(result['guides-button']).toMatchObject({
+        type: 'component',
+        children: ['guides-button--docs', 'guides-button--primary'],
+      });
+      expect(result['guides-button--docs']).toMatchObject({
+        name: 'Docs',
+        parent: 'guides-button',
+      });
+    });
+
+    it('keeps the component when filters hide all of its stories', () => {
+      const filtered = transformStoryIndexToStoriesHash(index, {
+        ...options,
+        filters: { hideStories: (entry) => entry.type !== 'story' },
+      });
+      expect(filtered['guides-button']).toMatchObject({
+        type: 'component',
+        children: ['guides-button--docs'],
+      });
+      expect(filtered['guides-button--primary']).toBeUndefined();
+    });
+  });
 });
diff --git a/code/core/src/manager-api/lib/stories.ts b/code/core/src/manager-api/lib/stories.ts
index 0c3cca7d2406..8d2b7a47752f 100644
--- a/code/core/src/manager-api/lib/stories.ts
+++ b/code/core/src/manager-api/lib/stories.ts
@@ -3,8 +3,8 @@ import type {
   API_ComponentEntry,
   API_DocsEntry,
   API_GroupEntry,
-  API_HashEntry,
   API_IndexHash,
+  API_LeafEntry,
   API_PreparedIndexEntry,
   API_PreparedStoryIndex,
   API_Provider,
@@ -29,7 +29,6 @@ import { dedent } from 'ts-dedent';
 import { Tag } from '../../shared/constants/tags.ts';
 import { type API, type State, combineParameters } from '../root.tsx';
 import intersect from './intersect.ts';
-import merge from './merge.ts';
 
 const TITLE_PATH_SEPARATOR = /\s*\/\s*/;
 
@@ -165,6 +164,17 @@ export const transformStoryIndexV4toV5 = (
   };
 };
 
+type TitleNodeType = 'root' | 'group' | 'component' | 'docs';
+
+type TitleNode = {
+  id: StoryId;
+  name: string;
+  parent: StoryId | undefined;
+  depth: number;
+  isRoot: boolean;
+  children: StoryId[];
+};
+
 type ToStoriesHashOptions = {
   provider: API_Provider<API>;
   docsOptions: DocsOptions;
@@ -226,9 +236,20 @@ export const transformStoryIndexToStoriesHash = (
 
   const setShowRoots = typeof showRoots !== 'undefined';
 
-  const storiesHashOutOfOrder = entryValues.reduce((acc, item) => {
+  const includedIds = new Set(entryValues.map((entry) => entry.id));
+  const entriesById = new Map<StoryId, API_PreparedIndexEntry>();
+  const titleNodes = new Map<StoryId, TitleNode>();
+  const testIdsByStoryId = new Map<StoryId, StoryId[]>();
+
+  indexEntries.forEach((item) => {
     if (docsOptions.docsMode && item.type !== 'docs') {
-      return acc;
+      return;
+    }
+    entriesById.set(item.id, item);
+
+    if ('parent' in item && item.parent) {
+      testIdsByStoryId.set(item.parent, [...(testIdsByStoryId.get(item.parent) ?? []), item.id]);
+      return;
     }
 
     // First, split the title into a set of names, separated by '/' and trimmed.
@@ -259,141 +280,124 @@ export const transformStoryIndexToStoriesHash = (
       return list;
     }, [] as string[]);
 
-    // Now, let's add an entry to the hash for each path/name pair
     paths.forEach((id, idx) => {
-      // The child is the next path, OR the story/docs entry itself
-      const childId = paths[idx + 1] || item.id;
-
-      if (root.length && idx === 0) {
-        acc[id] = merge<API_RootEntry>((acc[id] || {}) as API_RootEntry, {
-          type: 'root',
-          id,
-          name: names[idx],
-          tags: [],
-          depth: idx,
-          renderAriaLabel,
-          renderLabel,
-          startCollapsed: collapsedRoots.includes(id),
-          // Note that this will later get appended to the previous list of children (see below)
-          children: [childId],
-        });
-        // Usually the last path/name pair will be displayed as a component,
-        // *unless* there are other stories that are more deeply nested under it
-        //
-        // For example, if we had stories for both
-        //   - Atoms / Button
-        //   - Atoms / Button / LabelledButton
-        //
-        // In this example the entry for 'atoms-button' would *not* be a component.
-      } else if ((!acc[id] || acc[id].type === 'component') && idx === paths.length - 1) {
-        acc[id] = merge<API_ComponentEntry>((acc[id] || {}) as API_ComponentEntry, {
-          type: 'component',
-          id,
-          name: names[idx],
-          tags: [],
-          parent: paths[idx - 1],
-          depth: idx,
-          renderAriaLabel,
-          renderLabel,
-          ...(childId && {
-            children: [childId],
-          }),
-        });
-      } else {
-        acc[id] = merge<API_GroupEntry>((acc[id] || {}) as API_GroupEntry, {
-          type: 'group',
-          id,
-          name: names[idx],
-          tags: [],
-          parent: paths[idx - 1],
-          depth: idx,
-          renderAriaLabel,
-          renderLabel,
-          ...(childId && {
-            children: [childId],
-          }),
-        });
+      const node = titleNodes.get(id) ?? {
+        id,
+        name: '',
+        parent: paths[idx - 1],
+        depth: idx,
+        isRoot: false,
+        children: [],
+      };
+      titleNodes.set(id, node);
+      node.name = names[idx]!;
+      node.isRoot ||= root.length > 0 && idx === 0;
+
+      const childId = paths[idx + 1] ?? item.id;
+      if (!node.children.includes(childId)) {
+        node.children.push(childId);
       }
     });
+  });
+
+  // A title's type follows from everything indexed under it, never from the active filters
+  const typeOf = (node: TitleNode): TitleNodeType => {
+    if (node.isRoot) {
+      return 'root';
+    }
+    if (node.children.some((id) => titleNodes.has(id))) {
+      return 'group';
+    }
+    if (node.children.some((id) => entriesById.get(id)!.type === 'story')) {
+      return 'component';
+    }
+    return node.children.length === 1 ? 'docs' : 'group';
+  };
+
+  const isIncluded = (id: StoryId): boolean => {
+    const node = titleNodes.get(id);
+    return node ? node.children.some(isIncluded) : includedIds.has(id);
+  };
+
+  const hashIdOf = (id: StoryId) => {
+    const node = titleNodes.get(id);
+    return node && typeOf(node) === 'docs' ? node.children[0] : id;
+  };
 
-    // Finally add an entry for the docs/story/test itself
-    acc[item.id] = {
+  const storiesHash: API_IndexHash = {};
+
+  const addLeaf = (id: StoryId, parent: StoryId | undefined, depth: number) => {
+    const item = entriesById.get(id)!;
+    storiesHash[id] = {
       tags: [],
       ...item,
-      depth: paths.length,
-      parent: 'parent' in item ? item.parent : paths[paths.length - 1],
+      depth,
+      parent,
       renderAriaLabel,
       renderLabel,
       prepared: !!item.parameters,
     } as API_DocsEntry | API_StoryEntry;
 
-    return acc;
-  }, {} as API_IndexHash);
-
-  // This function adds a "root" or "orphan" and all of its descendents to the hash.
-  function addItem(acc: API_IndexHash, item: API_HashEntry) {
-    // If we were already inserted as part of a group, that's great.
-    if (!acc[item.id]) {
-      acc[item.id] = item;
-
-      // Ensure we add the children depth-first *before* inserting any other entries.
-      if ('children' in item && item.children) {
-        item.children.forEach((childId) => addItem(acc, storiesHashOutOfOrder[childId]));
-
-        item.tags =
-          item.children.reduce((currentTags: Tag[] | null, childId): Tag[] => {
-            // On the first child, we have nothing to intersect against so we use it as a source of data.
-            return currentTags === null
-              ? acc[childId].tags
-              : intersect(currentTags, acc[childId].tags);
-          }, null) || [];
-      }
+    const testIds = (testIdsByStoryId.get(id) ?? []).filter((testId) => includedIds.has(testId));
+    if (testIds.length) {
+      (storiesHash[id] as API_StoryEntry).children = testIds;
+      testIds.forEach((testId) => addLeaf(testId, id, depth + 1));
     }
+  };
 
-    if (item.type === 'component') {
-      const firstChild = acc[item.children[0]];
-      if (firstChild && 'importPath' in firstChild) {
-        // attach importPath to the component node which should be the same for all children
-        // this way we can add "open in editor" to the component node
-        item.importPath = firstChild.importPath;
-      }
+  const addNode = (node: TitleNode) => {
+    const type = typeOf(node);
+    if (type === 'docs') {
+      addLeaf(node.children[0], node.parent, node.depth);
+      storiesHash[node.children[0]].name = node.name;
+      return;
     }
-    return acc;
-  }
 
-  // We'll do two passes over the data, adding all the orphans, then all the roots
-  let storiesHash = Object.values(storiesHashOutOfOrder)
-    .filter((i) => i.type !== 'root' && !i.parent)
-    .reduce((acc, item) => addItem(acc, item), {} as API_IndexHash);
-
-  storiesHash = Object.values(storiesHashOutOfOrder)
-    .filter((i) => i.type === 'root')
-    .reduce(addItem, storiesHash);
-
-  // Update stories to include tests as children, and increase depth for those tests
-  storiesHash = Object.values(storiesHash).reduce((acc, item) => {
-    if (item.type === 'story' && item.subtype === 'test') {
-      const story = acc[item.parent] as API_StoryEntry;
-      const component = acc[story.parent] as API_ComponentEntry;
-      acc[component.id] = {
-        ...component,
-        // Remove test from the component node as it will be attached to the story node instead
-        children: component.children && component.children.filter((id) => id !== item.id),
-      };
-      acc[story.id] = {
-        ...story,
-        // Add test to the story node
-        children: (story.children || []).concat(item.id),
-      };
-      acc[item.id] = {
-        ...item,
-        depth: item.depth + 1,
-      };
-    } else {
-      acc[item.id] = item;
+    const includedChildren = node.children.filter(isIncluded);
+    const children = includedChildren.map(hashIdOf);
+    const entry = {
+      type,
+      id: node.id,
+      name: node.name,
+      depth: node.depth,
+      tags: [] as string[],
+      renderAriaLabel,
+      renderLabel,
+      children,
+      ...(type === 'root'
+        ? { startCollapsed: collapsedRoots.includes(node.id) }
+        : { parent: node.parent }),
+    } as API_RootEntry | API_GroupEntry | API_ComponentEntry;
+    storiesHash[node.id] = entry;
+
+    includedChildren.forEach((childId) => {
+      const child = titleNodes.get(childId);
+      if (child) {
+        addNode(child);
+      } else {
+        addLeaf(childId, node.id, node.depth + 1);
+      }
+    });
+
+    entry.tags = children
+      .flatMap((id) => {
+        const child = storiesHash[id];
+        return child.type === 'story' && 'children' in child && child.children
+          ? [id, ...child.children]
+          : [id];
+      })
+      .map((id) => storiesHash[id].tags)
+      .reduce(intersect);
+    if (entry.type === 'component') {
+      entry.importPath = (storiesHash[children[0]] as API_LeafEntry).importPath;
     }
-    return acc;
-  }, {} as API_IndexHash);
+  };
+
+  const topLevelNodes = [...titleNodes.values()].filter(
+    (node) => node.depth === 0 && isIncluded(node.id)
+  );
+  topLevelNodes.filter((node) => !node.isRoot).forEach(addNode);
+  topLevelNodes.filter((node) => node.isRoot).forEach(addNode);
 
   return storiesHash;
 };
@@ -425,6 +429,11 @@ export const getComponentLookupList = memoize(1)((hash: API_IndexHash) => {
     const value = i[1];
     if (value.type === 'component') {
       acc.push([...value.children]);
+    } else if (
+      value.type === 'docs' &&
+      (!value.parent || hash[value.parent].type !== 'component')
+    ) {
+      acc.push([value.id]);
     }
     return acc;
   }, [] as StoryId[][]);
diff --git a/code/core/src/manager-api/modules/stories.ts b/code/core/src/manager-api/modules/stories.ts
index 6de34163519b..cd0724f71220 100644
--- a/code/core/src/manager-api/modules/stories.ts
+++ b/code/core/src/manager-api/modules/stories.ts
@@ -651,7 +651,14 @@ export const init: ModuleFn<SubAPI, SubState> = ({
 
       if (!name) {
         // Find the entry (group, component, story or docs) that is referred to
-        const entry = titleOrId ? hash[titleOrId] || hash[sanitize(titleOrId)] : hash[kindSlug];
+        const entry = titleOrId
+          ? hash[titleOrId] ||
+            hash[sanitize(titleOrId)] ||
+            // Unattached docs pages have no entry keyed by their title
+            Object.values(hash).find(
+              (e) => e.type === 'docs' && sanitize(e.title) === sanitize(titleOrId)
+            )
+          : hash[kindSlug];
 
         if (!entry) {
           throw new Error(`Unknown id or title: '${titleOrId}'`);
diff --git a/code/core/src/manager-api/tests/refs.test.ts b/code/core/src/manager-api/tests/refs.test.ts
index 872b41c7a01b..f85076b60672 100644
--- a/code/core/src/manager-api/tests/refs.test.ts
+++ b/code/core/src/manager-api/tests/refs.test.ts
@@ -1206,7 +1206,6 @@ describe('Refs API', () => {
           'component-a',
           'component-a--page',
           'component-a--story-2',
-          'component-b',
           'component-b--page',
           'component-c',
           'component-c--story-4',
@@ -1258,7 +1257,7 @@ describe('Refs API', () => {
         const hash = refs.fake.index;
 
         // We need exact key ordering, even if in theory JS doesn't guarantee it
-        expect(Object.keys(hash)).toEqual(['component-a', 'component-a--docs']);
+        expect(Object.keys(hash)).toEqual(['component-a--docs']);
         expect(hash['component-a--docs'].type).toBe('docs');
       });
     });
diff --git a/code/core/src/manager-api/tests/stories.test.ts b/code/core/src/manager-api/tests/stories.test.ts
index affa9c57098e..7b656df1a13a 100644
--- a/code/core/src/manager-api/tests/stories.test.ts
+++ b/code/core/src/manager-api/tests/stories.test.ts
@@ -18,7 +18,11 @@ import {
   UPDATE_STORY_ARGS,
 } from 'storybook/internal/core-events';
 import { logger } from 'storybook/internal/client-logger';
-import { type API_StoryEntry, type StoryIndex } from 'storybook/internal/types';
+import {
+  type API_PreparedIndexEntry,
+  type API_StoryEntry,
+  type StoryIndex,
+} from 'storybook/internal/types';
 
 import { global } from '@storybook/global';
 
@@ -371,36 +375,36 @@ describe('stories API', () => {
       api.setIndex({
         v: 5,
         entries: {
-          'a-sampleone': {
+          'a-sampleone--1': {
             type: 'story',
             subtype: 'story',
-            id: 'a-sampleone',
+            id: 'a-sampleone--1',
             title: 'A/SampleOne',
             name: '1',
             tags: ['shared', 'one-specific'],
             importPath: './a.ts',
           },
-          'a-sampletwo': {
+          'a-sampletwo--2': {
             type: 'story',
             subtype: 'story',
-            id: 'a-sampletwo',
+            id: 'a-sampletwo--2',
             title: 'A/SampleTwo',
             name: '2',
             tags: ['shared', 'two-specific'],
             importPath: './a.ts',
           },
-          'a-embedded-othertopic': {
+          'a-embedded-othertopic--docs': {
             type: 'docs',
-            id: 'a-embedded-othertopic',
+            id: 'a-embedded-othertopic--docs',
             title: 'A/Embedded/OtherTopic',
             name: '3',
             tags: ['shared', 'embedded-docs-specific', 'other'],
             storiesImports: [],
             importPath: './embedded/other.mdx',
           },
-          'a-embedded-extras': {
+          'a-embedded-extras--docs': {
             type: 'docs',
-            id: 'a-embedded-extras',
+            id: 'a-embedded-extras--docs',
             title: 'A/Embedded/Extras',
             name: '3',
             tags: ['shared', 'embedded-docs-specific', 'extras'],
@@ -414,10 +418,12 @@ describe('stories API', () => {
       expect(Object.keys(index!)).toEqual([
         'a',
         'a-sampleone',
+        'a-sampleone--1',
         'a-sampletwo',
+        'a-sampletwo--2',
         'a-embedded',
-        'a-embedded-othertopic',
-        'a-embedded-extras',
+        'a-embedded-othertopic--docs',
+        'a-embedded-extras--docs',
       ]);
       // Acts as the root, so that the next level is a group we're testing.
       expect(index!.a).toMatchObject({
@@ -559,7 +565,6 @@ describe('stories API', () => {
           'component-a',
           'component-a--page',
           'component-a--story-2',
-          'component-b',
           'component-b--docs',
           'component-c',
           'component-c--story-4',
@@ -579,7 +584,7 @@ describe('stories API', () => {
           const { store } = moduleArgs;
           api.setIndex({ v: 5, entries: docsEntries });
           const { index } = store.getState();
-          expect(Object.keys(index!)).toEqual(['component-b', 'component-b--docs']);
+          expect(Object.keys(index!)).toEqual(['component-b--docs']);
         });
       });
     });
@@ -1066,6 +1071,29 @@ describe('stories API', () => {
       api.jumpToComponent(1);
       expect(navigate).not.toHaveBeenCalled();
     });
+    it('lands on an unattached docs page', () => {
+      const initialState = { path: '/story/a--1', storyId: 'a--1', viewMode: 'story' };
+      const moduleArgs = createMockModuleArgs({ initialState });
+      const { api } = initStories(moduleArgs as unknown as ModuleArgs);
+      const { navigate } = moduleArgs;
+
+      api.setIndex({
+        v: 5,
+        entries: {
+          ...navigationEntries,
+          'intro--docs': {
+            type: 'docs',
+            id: 'intro--docs',
+            title: 'Intro',
+            name: 'Page',
+            importPath: './intro.mdx',
+            storiesImports: [],
+          },
+        },
+      });
+      api.jumpToComponent(1);
+      expect(navigate).toHaveBeenCalledWith('/docs/intro--docs', undefined);
+    });
     it('does nothing if you are at the first component and go backward', () => {
       const initialState = { path: '/story/a--2', storyId: 'a--2', viewMode: 'story' };
       const moduleArgs = createMockModuleArgs({ initialState });
@@ -1121,6 +1149,34 @@ describe('stories API', () => {
       api.selectStory('a--1');
       expect(store.getState().settings.lastTrackedStoryId).toBe('a--1');
     });
+    it('selects the docs page of a component whose stories are all filtered out', () => {
+      const initialState = {
+        path: '/story/a--1',
+        storyId: 'a--1',
+        viewMode: 'story',
+        filters: { hideStories: (entry: API_PreparedIndexEntry) => entry.type !== 'story' },
+      };
+      const moduleArgs = createMockModuleArgs({ initialState });
+      const { api } = initStories(moduleArgs as unknown as ModuleArgs);
+      const { navigate } = moduleArgs;
+
+      api.setIndex({
+        v: 5,
+        entries: {
+          'a--docs': {
+            type: 'docs',
+            id: 'a--docs',
+            title: 'a',
+            name: 'Docs',
+            importPath: './a.ts',
+            storiesImports: [],
+          },
+          'a--1': navigationEntries['a--1'],
+        },
+      });
+      api.selectStory('a');
+      expect(navigate).toHaveBeenCalledWith('/docs/a--docs', undefined);
+    });
     it('selects first visible child when component is clicked with filtered index', () => {
       const initialState = { path: '/story/a--1', storyId: 'a--1', viewMode: 'story' };
       const moduleArgs = createMockModuleArgs({ initialState });
diff --git a/code/core/src/manager/components/sidebar/Search.tsx b/code/core/src/manager/components/sidebar/Search.tsx
index 17254ca94814..b60b04c4a2e3 100644
--- a/code/core/src/manager/components/sidebar/Search.tsx
+++ b/code/core/src/manager/components/sidebar/Search.tsx
@@ -252,55 +252,15 @@ export const Search = React.memo<SearchProps>(function Search({
       let results: DownshiftItem[] = [];
       const resultIds: Set<string> = new Set();
 
-      const allMatches = (fuse.search(input) as SearchResult[]).filter(({ item }) => {
-        return item.type === 'component' || item.type === 'docs' || item.type === 'story';
-      });
-
-      // When the index is being created, we have a legacy piece of logic that
-      // wraps every docs page inside a component entry. This originates from
-      // Storybook 6 and has never been removed. Because of it, we must dedupe
-      // docs entries that are hidden under a fake component entry.
-      // See https://github.com/storybookjs/storybook/issues/35513 for details.
-      const docsParentIds = new Set<string>();
-      allMatches.forEach(({ item }) => {
-        if (item.type === 'docs' && item.parent) {
-          docsParentIds.add(item.parent);
-        }
-      });
-
-      // Components suppressed in favor of a matching docs child that hasn't been rendered yet.
-      // The suppressed component still occupies its slot in `resultIds` so that sibling stories
-      // ranked between the component and its docs entry are deduplicated, as they were before.
-      const pendingDocsReplacements = new Set<string>();
-
-      const distinctResults = allMatches.filter(({ item }) => {
-        // This always gets called before the corresponding docs item
-        // because of the sorting performed by the search index. So it's
-        // safe to use `pendingDocsReplacements` in a single-pass lookup.
-        if (item.type === 'component' && docsParentIds.has(item.id)) {
-          if (!resultIds.has(item.id)) {
-            resultIds.add(item.id);
-            pendingDocsReplacements.add(item.id);
-          }
-          return false;
-        }
-
-        // When we reach this, we know we found an unattached MDX page with
-        // a synthetic docs wrapper. Like in Tree.tsx, remove the wrapper
-        // and present the docs item to end users.
-        if (item.type === 'docs' && item.parent && pendingDocsReplacements.has(item.parent)) {
-          pendingDocsReplacements.delete(item.parent);
-          resultIds.add(item.id);
-          return true;
-        }
-        // @ts-expect-error (non strict)
-        if (resultIds.has(item.parent)) {
+      const distinctResults = (fuse.search(input) as SearchResult[]).filter(({ item }) => {
+        if (
+          !(item.type === 'component' || item.type === 'docs' || item.type === 'story') ||
+          // @ts-expect-error (non strict)
+          resultIds.has(item.parent)
+        ) {
           return false;
         }
         resultIds.add(item.id);
-        if (item.type === 'docs' && item.parent) {
-          resultIds.add(item.parent);
-        }
         return true;
       });
 
diff --git a/code/core/src/manager/components/sidebar/Tree.stories.tsx b/code/core/src/manager/components/sidebar/Tree.stories.tsx
index 220144221dbd..4d83ce127a24 100644
--- a/code/core/src/manager/components/sidebar/Tree.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Tree.stories.tsx
@@ -202,28 +202,16 @@ export const DocsOnlySingleStoryComponents = {
         isBrowsing
         isMain
         refId={DEFAULT_REF_ID}
-        // @ts-expect-error (non strict)
         data={{
-          ...{
-            single: {
-              type: 'component',
-              name: 'Single',
-              id: 'single',
-              parent: null,
-              depth: 0,
-              children: ['single--docs'],
-            },
-            'single--docs': {
-              type: 'docs',
-              id: 'single--docs',
-              title: 'Single',
-              name: 'Single',
-              tags: [],
-              prepared: true,
-              depth: 1,
-              parent: 'single',
-              importPath: './single.stories.js',
-            },
+          'single--docs': {
+            type: 'docs',
+            id: 'single--docs',
+            title: 'Single',
+            name: 'Single',
+            tags: [],
+            prepared: true,
+            depth: 0,
+            importPath: './single.stories.js',
           },
           ...Object.keys(index).reduce((acc, key) => {
             if (key === 'tooltip-tooltipselect--default') {
diff --git a/code/core/src/manager/components/sidebar/Tree.tsx b/code/core/src/manager/components/sidebar/Tree.tsx
index 7dc7fd540cb3..2dfe0eab7481 100644
--- a/code/core/src/manager/components/sidebar/Tree.tsx
+++ b/code/core/src/manager/components/sidebar/Tree.tsx
@@ -669,7 +669,6 @@ export const Tree = React.memo<{
   // Create a list of component IDs which should be collapsed into their (only) child.
   // That is:
   //  - components with a single story child with the same name
-  //  - components with only a single docs child
   const singleStoryComponentIds = useMemo(() => {
     return Object.keys(data).filter((id) => {
       const entry = data[id];
@@ -686,10 +685,6 @@ export const Tree = React.memo<{
 
       const onlyChild = data[children[0]];
 
-      if (onlyChild.type === 'docs') {
-        return true;
-      }
-
       if (onlyChild.type === 'story' && onlyChild.subtype === 'story') {
         return isStoryHoistable(onlyChild.name, name);
       }
diff --git a/code/core/src/types/modules/api-stories.ts b/code/core/src/types/modules/api-stories.ts
index b06bc817bbc6..70e9fede573a 100644
--- a/code/core/src/types/modules/api-stories.ts
+++ b/code/core/src/types/modules/api-stories.ts
@@ -34,7 +34,7 @@ export interface API_ComponentEntry extends API_BaseEntry {
 
 export interface API_DocsEntry extends API_BaseEntry {
   type: 'docs';
-  parent: StoryId;
+  parent?: StoryId;
   title: ComponentTitle;
   importPath: Path;
   prepared: boolean;
diff --git a/code/e2e-internal/navigation.spec.ts b/code/e2e-internal/navigation.spec.ts
index be71894f5b95..9e2e9bf6945f 100644
--- a/code/e2e-internal/navigation.spec.ts
+++ b/code/e2e-internal/navigation.spec.ts
@@ -40,13 +40,13 @@ test.describe('navigating', () => {
       await page.getByRole('searchbox').fill('Monospace');
 
       const searchItem = page.getByRole('option', {
-        name: 'Docs / Monospace brand / Typography',
+        name: 'Typography / Monospace brand',
         exact: true,
       });
       await expect(searchItem).toBeVisible();
       await expect(
         page.getByRole('option', {
-          name: 'Docs / Sans-serif brand / Typography',
+          name: 'Typography / Sans-serif brand',
           exact: true,
         })
       ).toBeHidden();
@@ -64,7 +64,7 @@ test.describe('navigating', () => {
 
       await page
         .getByRole('option', {
-          name: 'Docs / Monospace brand / Typography',
+          name: 'Typography / Monospace brand',
           exact: true,
         })
         .click();

From 3e44dd3107d5c9c948d31d24961d57da5807d3a8 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <dev@valentinpalkovic.dev>
Date: Wed, 7 Oct 2026 16:53:34 +0200
Subject: [PATCH 007/326] Manager: Redirect title-id deep links of unattached
 docs pages

A URL such as ?path=/docs/brand-typography used to resolve through the
component wrapper. Without the wrapper the id is not in the index, so
the STORY_SPECIFIED handler treated it as a known leaf, pushed it back
to the preview and showed "Couldn't find story matching id".

Only a story or docs entry counts as the current selection now, so the
manager follows the entry the preview resolved from the partial id.
---
 code/core/src/manager-api/modules/stories.ts    |  2 +-
 code/core/src/manager-api/tests/stories.test.ts | 15 +++++++++++++++
 code/e2e-internal/navigation.spec.ts            | 14 ++++++++++++++
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/code/core/src/manager-api/modules/stories.ts b/code/core/src/manager-api/modules/stories.ts
index cd0724f71220..8b360b8cbc04 100644
--- a/code/core/src/manager-api/modules/stories.ts
+++ b/code/core/src/manager-api/modules/stories.ts
@@ -1128,7 +1128,7 @@ export const init: ModuleFn<SubAPI, SubState> = ({
         const stateHasSelection = state.viewMode && state.storyId;
         const stateSelectionDifferent = state.viewMode !== viewMode || state.storyId !== storyId;
         const { type } = state.index?.[state.storyId] || {};
-        const isStory = !(type === 'root' || type === 'component' || type === 'group');
+        const isStory = type === 'story' || type === 'docs';
 
         /**
          * When storybook starts, we want to navigate to the first story. But there are a few
diff --git a/code/core/src/manager-api/tests/stories.test.ts b/code/core/src/manager-api/tests/stories.test.ts
index 7b656df1a13a..dd04aa3d7fe1 100644
--- a/code/core/src/manager-api/tests/stories.test.ts
+++ b/code/core/src/manager-api/tests/stories.test.ts
@@ -741,6 +741,21 @@ describe('stories API', () => {
       provider.channel.emit(STORY_SPECIFIED, { storyId: 'a--1', viewMode: 'story' });
       expect(navigate).not.toHaveBeenCalled();
     });
+    it('navigates to the entry the preview resolved from a partial id', async () => {
+      const moduleArgs = createMockModuleArgs({
+        initialState: {
+          path: '/docs/intro',
+          storyId: 'intro',
+          viewMode: 'docs',
+          index: { 'intro--docs': { type: 'docs', id: 'intro--docs' } as any },
+        },
+      });
+      initStories(moduleArgs as unknown as ModuleArgs);
+      const { navigate, provider } = moduleArgs;
+
+      provider.channel.emit(STORY_SPECIFIED, { storyId: 'intro--docs', viewMode: 'docs' });
+      expect(navigate).toHaveBeenCalledWith('/docs/intro--docs', undefined);
+    });
     it('DOES not navigate if a settings page was selected', async () => {
       const moduleArgs = createMockModuleArgs({
         initialState: { path: '/settings/about', index: {} },
diff --git a/code/e2e-internal/navigation.spec.ts b/code/e2e-internal/navigation.spec.ts
index 9e2e9bf6945f..d4182aad69c4 100644
--- a/code/e2e-internal/navigation.spec.ts
+++ b/code/e2e-internal/navigation.spec.ts
@@ -21,6 +21,20 @@ test.describe('navigating', () => {
     expect(sbPage.page.url()).toContain('/docs/example-button--docs');
   });
 
+  test('a URL with the title id of an unattached docs page redirects to the page', async ({
+    page,
+  }) => {
+    await page.goto(`${storybookUrl}?path=/docs/brand-typography`);
+
+    const sbPage = new SbPage(page, expect);
+    await sbPage.waitUntilLoaded();
+
+    await page.waitForFunction(() =>
+      window.document.location.href.match('/docs/brand-typography--docs')
+    );
+    await expect(sbPage.previewIframe().getByRole('heading', { name: 'Monospace' })).toBeVisible();
+  });
+
   test('searching for "typography" surfaces the brand typography docs entry', async ({ page }) => {
     await page.goto(storybookUrl);
 

From 4bd81fdd274f3437b5ba833b4bfa2611dccd2680 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 7 Oct 2026 22:21:23 +0200
Subject: [PATCH 008/326] feat(svelte): add definePreview for CSF factories

preview.meta() infers args from the props of a Svelte component, like
the React and Vue renderers. definePreview adds the renderer's preview
annotations itself, because CSF factories mode ignores preset
previewAnnotations.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../svelte/src/__test__/Divider.svelte        |   1 +
 .../svelte/src/__test__/Input.svelte          |   9 +
 .../svelte/src/__test__/Layout.svelte         |  14 +
 .../renderers/svelte/src/__test__/List.svelte |  13 +
 .../svelte/src/csf-factories.test.ts          | 572 ++++++++++++++++++
 code/renderers/svelte/src/index.ts            |   2 +
 code/renderers/svelte/src/preview.ts          | 149 +++++
 code/renderers/svelte/src/types.ts            |   2 +
 8 files changed, 762 insertions(+)
 create mode 100644 code/renderers/svelte/src/__test__/Divider.svelte
 create mode 100644 code/renderers/svelte/src/__test__/Input.svelte
 create mode 100644 code/renderers/svelte/src/__test__/Layout.svelte
 create mode 100644 code/renderers/svelte/src/__test__/List.svelte
 create mode 100644 code/renderers/svelte/src/csf-factories.test.ts
 create mode 100644 code/renderers/svelte/src/preview.ts

diff --git a/code/renderers/svelte/src/__test__/Divider.svelte b/code/renderers/svelte/src/__test__/Divider.svelte
new file mode 100644
index 000000000000..09d5649d1328
--- /dev/null
+++ b/code/renderers/svelte/src/__test__/Divider.svelte
@@ -0,0 +1 @@
+<hr />
diff --git a/code/renderers/svelte/src/__test__/Input.svelte b/code/renderers/svelte/src/__test__/Input.svelte
new file mode 100644
index 000000000000..6006de697b94
--- /dev/null
+++ b/code/renderers/svelte/src/__test__/Input.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  interface Props {
+    value: string;
+    oninput?: (value: string) => void;
+  }
+  let { value = $bindable(), oninput }: Props = $props();
+</script>
+
+<input bind:value oninput={() => oninput?.(value)} />
diff --git a/code/renderers/svelte/src/__test__/Layout.svelte b/code/renderers/svelte/src/__test__/Layout.svelte
new file mode 100644
index 000000000000..300db65da909
--- /dev/null
+++ b/code/renderers/svelte/src/__test__/Layout.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    title: string;
+    children: Snippet;
+    footer?: Snippet<[year: number]>;
+  }
+  let { title, children, footer }: Props = $props();
+</script>
+
+<h1>{title}</h1>
+{@render children()}
+{@render footer?.(2026)}
diff --git a/code/renderers/svelte/src/__test__/List.svelte b/code/renderers/svelte/src/__test__/List.svelte
new file mode 100644
index 000000000000..81ebf15cb64f
--- /dev/null
+++ b/code/renderers/svelte/src/__test__/List.svelte
@@ -0,0 +1,13 @@
+<script lang="ts" generics="T">
+  interface Props {
+    items: T[];
+    getLabel: (item: T) => string;
+  }
+  let { items, getLabel }: Props = $props();
+</script>
+
+<ul>
+  {#each items as item}
+    <li>{getLabel(item)}</li>
+  {/each}
+</ul>
diff --git a/code/renderers/svelte/src/csf-factories.test.ts b/code/renderers/svelte/src/csf-factories.test.ts
new file mode 100644
index 000000000000..98a75a384ba7
--- /dev/null
+++ b/code/renderers/svelte/src/csf-factories.test.ts
@@ -0,0 +1,572 @@
+import { describe, expect, expectTypeOf, it, test } from 'vitest';
+
+import type { Canvas } from 'storybook/internal/types';
+
+import type { Component, ComponentProps, Snippet } from 'svelte';
+
+import { fn, mocked } from 'storybook/test';
+
+import Button from './__test__/Button.svelte';
+import Decorator2 from './__test__/Decorator2.svelte';
+import Decorator1 from './__test__/Decorator.svelte';
+import Divider from './__test__/Divider.svelte';
+import Input from './__test__/Input.svelte';
+import Layout from './__test__/Layout.svelte';
+import List from './__test__/List.svelte';
+import { __definePreview } from './preview.ts';
+import type { Decorator, StoryObj } from './public-types.ts';
+
+type ButtonProps = ComponentProps<typeof Button>;
+
+const preview = __definePreview({ addons: [] });
+
+test('csf factories', () => {
+  const config = __definePreview({ addons: [{ decorators: [] }] });
+
+  const meta = config.meta({ component: Button, args: { disabled: false } });
+  const MyStory = meta.story({ args: { label: 'Hello world' } });
+
+  expect(MyStory.input.args?.label).toBe('Hello world');
+});
+
+describe('Meta', () => {
+  it('Generic parameter of Meta can be a component', () => {
+    preview.meta({ component: Button, args: { label: 'good', disabled: false } });
+  });
+
+  it('Callback props are inferred from the component', () => {
+    preview.meta({
+      component: Button,
+      args: {
+        label: 'good',
+        disabled: false,
+        clicked: (event) => expectTypeOf(event).toEqualTypeOf<MouseEvent>(),
+      },
+      render: (args) => {
+        expectTypeOf(args.clicked).toEqualTypeOf<((e: MouseEvent) => void) | undefined>();
+        return { Component: Button, props: args };
+      },
+    });
+  });
+});
+
+describe('StoryObj', () => {
+  it('✅ Required args may be provided partial in meta and the story', () => {
+    const meta = preview.meta({ component: Button, args: { label: 'good' } });
+    const Story = meta.story({ args: { disabled: true } });
+  });
+
+  it('❌ The combined shape of meta args and story args must match the required args.', () => {
+    {
+      const meta = preview.meta({ component: Button, args: { label: 'good' } });
+      // @ts-expect-error disabled not provided ❌
+      const Basic = meta.story();
+    }
+    {
+      const meta = preview.meta({ component: Button });
+      // @ts-expect-error disabled not provided ❌
+      const Basic = meta.story({ args: { label: 'good' } });
+    }
+  });
+
+  it('a story with a render that takes no args needs no args', () => {
+    const meta = preview.meta({ component: Button });
+    const RenderOnly = meta.story(() => ({ Component: Divider }));
+    const RenderInObject = meta.story({ render: () => ({ Component: Divider }) });
+  });
+
+  it('a story with a render that takes args needs the required args', () => {
+    const meta = preview.meta({ component: Button });
+    const WithArgs = meta.story({
+      args: { label: 'good', disabled: true },
+      render: (args) => ({ Component: Button, props: args }),
+    });
+    // @ts-expect-error disabled not provided ❌
+    const Missing = meta.story({
+      args: { label: 'good' },
+      render: (args) => ({ Component: Button, props: args }),
+    });
+  });
+});
+
+type ThemeData = 'light' | 'dark';
+
+describe('Story args can be inferred', () => {
+  it('Correct args are inferred when type is widened for render function', () => {
+    const meta = preview.type<{ args: { theme: ThemeData } }>().meta({
+      component: Button,
+      render: (args) => {
+        expectTypeOf(args.theme).toEqualTypeOf<ThemeData>();
+        return { Component: Button, props: args };
+      },
+      args: { disabled: false },
+    });
+
+    const Basic = meta.story({ args: { theme: 'light', label: 'good' } });
+  });
+
+  it('Args of a typed render can be set in meta', () => {
+    const meta = preview.meta({
+      component: Button,
+      render: (args: ButtonProps & { theme: ThemeData }) => ({ Component: Button, props: args }),
+      args: { theme: 'light', disabled: false },
+    });
+
+    const Basic = meta.story({ args: { label: 'good' } });
+  });
+
+  const withDecorator: Decorator<{ decoratorArg: string }> = (_, { args: { decoratorArg } }) => ({
+    Component: Decorator1,
+    props: { decoratorArg },
+  });
+
+  it('Correct args are inferred when type is widened for decorators', () => {
+    const meta = preview.meta({
+      component: Button,
+      args: { disabled: false },
+      decorators: [withDecorator],
+    });
+
+    const Basic = meta.story({ args: { decoratorArg: 'title', label: 'good' } });
+    // @ts-expect-error decoratorArg not provided ❌
+    const Missing = meta.story({ args: { label: 'good' } });
+  });
+
+  it('Correct args are inferred when type is widened for multiple decorators', () => {
+    const secondDecorator: Decorator<{ decoratorArg2: string }> = (
+      _,
+      { args: { decoratorArg2 } }
+    ) => ({ Component: Decorator2, props: { decoratorArg2 } });
+
+    const meta = preview.meta({
+      component: Button,
+      args: { disabled: false },
+      decorators: [withDecorator, secondDecorator],
+    });
+
+    const Basic = meta.story({ args: { decoratorArg: '', decoratorArg2: '', label: 'good' } });
+  });
+});
+
+describe('Custom args types written by the csf-factories codemod', () => {
+  type Icon = { name: string };
+  type StoryArgs = { pageIcon: Icon };
+
+  it('✅ A custom args type can include the props of the component', () => {
+    const meta = preview
+      .type<{ args: ButtonProps & { footer?: string } }>()
+      .meta({ component: Button });
+
+    const Default = meta.story({ args: { label: 'good', disabled: false, footer: 'footer' } });
+    // @ts-expect-error disabled not provided ❌
+    const Missing = meta.story({ args: { label: 'good' } });
+  });
+
+  it('✅ A custom arg can be used when meta has no component', () => {
+    const PageIcon = {} as Component<StoryArgs>;
+    const meta = preview.type<{ args: StoryArgs }>().meta({
+      render: (args) => {
+        expectTypeOf(args.pageIcon).toEqualTypeOf<Icon>();
+        return { Component: PageIcon, props: args };
+      },
+      args: { pageIcon: { name: 'organization' } },
+    });
+
+    const Default = meta.story();
+    const Overridden = meta.story({ args: { pageIcon: { name: 'user' } } });
+  });
+});
+
+describe('Svelte components', () => {
+  it('snippet props are args', () => {
+    const meta = preview.meta({ component: Layout, args: { title: 'Home' } });
+
+    const Default = meta.story({
+      args: {
+        children: (() => {}) as unknown as Snippet,
+        footer: (() => {}) as unknown as Snippet<[year: number]>,
+      },
+    });
+    // @ts-expect-error children not provided ❌
+    const Missing = meta.story();
+  });
+
+  it('bindable props are args', () => {
+    const meta = preview.meta({
+      component: Input,
+      args: { oninput: (value) => expectTypeOf(value).toEqualTypeOf<string>() },
+    });
+
+    const Default = meta.story({ args: { value: 'Hi' } });
+    // @ts-expect-error value must be a string
+    const Invalid = meta.story({ args: { value: 1 } });
+  });
+
+  it('generic components take their type argument directly', () => {
+    const meta = preview.meta({ component: List<{ id: number; name: string }> });
+
+    const Default = meta.story({
+      args: {
+        items: [{ id: 1, name: 'Ada' }],
+        getLabel: (item) => {
+          expectTypeOf(item).toEqualTypeOf<{ id: number; name: string }>();
+          return item.name;
+        },
+      },
+    });
+  });
+
+  it('a component without props needs no args', () => {
+    const meta = preview.meta({ component: Divider });
+    const Default = meta.story();
+  });
+
+  it('mount accepts a component and its props', () => {
+    const Basic: StoryObj<typeof Button> = {
+      async play({ mount }) {
+        const canvas = await mount(Button, { props: { label: 'label', disabled: true } });
+        expectTypeOf(canvas).toEqualTypeOf<Canvas>();
+      },
+    };
+  });
+});
+
+it('allow types to be inferred from render as well', () => {
+  const meta = preview.meta({
+    render: (args: ButtonProps) => ({ Component: Button, props: args }),
+    args: { label: 'hello' },
+  });
+
+  const Story = meta.story({ args: { disabled: true } });
+});
+
+it('Literal props need no `as const` in meta args, issue #36125', () => {
+  const Badge = {} as Component<{ label: string; variant: 'primary' | 'secondary' }>;
+
+  const meta = preview.meta({ component: Badge, args: { variant: 'primary' } });
+  const Default = meta.story({ args: { label: 'Hi' } });
+  expectTypeOf(meta.input.args.variant).toEqualTypeOf<'primary' | 'secondary'>();
+
+  const typedMeta = preview
+    .type<{ args: { extra?: boolean } }>()
+    .meta({ component: Badge, args: { variant: 'primary', label: 'Hi' } });
+  const NoArgs = typedMeta.story();
+});
+
+describe('Meta args are typed by the keys you provide', () => {
+  enum Size {
+    Small = 'small',
+    Large = 'large',
+  }
+  type UserId = string & { readonly brand: unique symbol };
+  const userId = (id: string) => id as UserId;
+  class Store {
+    #count = 0;
+    increment() {
+      this.#count++;
+    }
+  }
+  type Shape = { kind: 'circle'; radius: number } | { kind: 'square'; side: number };
+  type CardProps = {
+    label: string;
+    variant: 'primary' | 'secondary';
+    size: Size;
+    icon: `icon-${string}`;
+    userId: UserId;
+    range: [min: number, max: number];
+    items: string[];
+    config: { theme: { mode: 'light' | 'dark'; accents: { tone: 'warm' | 'cool' }[] } };
+    shape: Shape;
+    store: Store;
+    onclick: () => void;
+    onchange: (value: number) => void;
+    handlers: { onselect: (item: string) => void; onreset: () => void };
+    getUsers: () => Promise<string[]>;
+  };
+  const Card = {} as Component<CardProps>;
+
+  const meta = preview.meta({
+    component: Card,
+    args: {
+      variant: 'primary',
+      size: Size.Small,
+      icon: 'icon-star',
+      userId: userId('1'),
+      range: [0, 10],
+      items: ['a'],
+      config: { theme: { mode: 'dark', accents: [{ tone: 'warm' }] } },
+      shape: { kind: 'circle', radius: 1 },
+      store: new Store(),
+      onclick: () => {},
+      onchange: (value) => expectTypeOf(value).toEqualTypeOf<number>(),
+      handlers: {
+        onselect: (item) => expectTypeOf(item).toEqualTypeOf<string>(),
+        onreset: function () {},
+      },
+      getUsers: fn(),
+    },
+  });
+
+  it('literal, enum, template literal and branded props need no `as const`', () => {
+    expectTypeOf(meta.input.args.variant).toEqualTypeOf<'primary' | 'secondary'>();
+    expectTypeOf(meta.input.args.size).toEqualTypeOf<Size>();
+    expectTypeOf(meta.input.args.icon).toEqualTypeOf<`icon-${string}`>();
+    expectTypeOf(meta.input.args.userId).toEqualTypeOf<UserId>();
+
+    const Default = meta.story({ args: { label: 'Hi' } });
+    // @ts-expect-error label is required
+    const Missing = meta.story();
+  });
+
+  it('meta.input.args keeps the declared prop types', () => {
+    const items: string[] = meta.input.args.items;
+    expectTypeOf(meta.input.args.range).toEqualTypeOf<[min: number, max: number]>();
+    expectTypeOf(meta.input.args.config.theme.accents[0].tone).toEqualTypeOf<'warm' | 'cool'>();
+    expectTypeOf(meta.input.args.store).toEqualTypeOf<Store>();
+
+    const { shape } = meta.input.args;
+    if (shape.kind === 'circle') {
+      expectTypeOf(shape.radius).toEqualTypeOf<number>();
+    }
+  });
+
+  it('fn() args are typed as declared, mocked() gives the mock API', () => {
+    const Default = meta.story({
+      args: { label: 'Hi' },
+      play: async ({ args }) => {
+        expectTypeOf(args.getUsers).toEqualTypeOf<() => Promise<string[]>>();
+        mocked(args.getUsers).mockResolvedValue(['Ada']);
+      },
+    });
+  });
+
+  it('invalid meta args are rejected', () => {
+    // @ts-expect-error not a variant
+    preview.meta({ component: Card, args: { variant: 'tertiary' } });
+    // @ts-expect-error not a mode
+    preview.meta({ component: Card, args: { config: { theme: { mode: 'dim', accents: [] } } } });
+    // @ts-expect-error max must be a number
+    preview.meta({ component: Card, args: { range: [0, 'ten'] } });
+    // @ts-expect-error not a prop of Card
+    preview.meta({ component: Card, args: { variant: 'primary', unknown: true } });
+  });
+
+  it('stories override meta args and infer callback parameters', () => {
+    const Default = meta.story({
+      args: {
+        label: 'Hi',
+        variant: 'secondary',
+        onclick: () => {},
+        handlers: {
+          onselect: (item) => expectTypeOf(item).toEqualTypeOf<string>(),
+          onreset: () => undefined,
+        },
+      },
+    });
+    const Extended = Default.extend({ args: { variant: 'primary', onclick: function () {} } });
+    // @ts-expect-error not a variant
+    Default.extend({ args: { variant: 'tertiary' } });
+  });
+
+  it('meta.story() needs no args when meta provides all required args', () => {
+    const complete = preview.meta({ component: Button, args: { label: 'Hi', disabled: false } });
+    const Default = complete.story();
+  });
+
+  it('union props accept keys shared by every member', () => {
+    type Props = { label: string } & (
+      | { kind: 'link'; href: string }
+      | { kind: 'button'; onpress: () => void }
+    );
+    const Action = {} as Component<Props>;
+
+    const actionMeta = preview.meta({ component: Action, args: { label: 'Go', kind: 'link' } });
+    const Link = actionMeta.story({ args: { href: '/' } });
+
+    // @ts-expect-error href is not a prop of every member, set it per story
+    preview.meta({ component: Action, args: { kind: 'link', href: '/' } });
+  });
+
+  it('args declared with preview.type<>() and decorators', () => {
+    const withTheme: Decorator<{ theme: 'light' | 'dark' }> = (Story) => Story();
+
+    const typedMeta = preview.type<{ args: { locale: 'en' | 'nl' } }>().meta({
+      component: Button,
+      decorators: [withTheme],
+      args: { locale: 'nl', theme: 'dark', label: 'Hi' },
+    });
+    const Default = typedMeta.story({ args: { disabled: false } });
+    expectTypeOf(typedMeta.input.args.locale).toEqualTypeOf<'en' | 'nl'>();
+  });
+
+  it('render-only meta', () => {
+    type CounterProps = { mode: 'compact' | 'wide'; count: number };
+    const Counter = {} as Component<CounterProps>;
+    const renderMeta = preview.meta({
+      render: (args: CounterProps) => ({ Component: Counter, props: args }),
+      args: { mode: 'wide' },
+    });
+    const Default = renderMeta.story({ args: { count: 1 } });
+    // @ts-expect-error count is required
+    const Missing = renderMeta.story();
+  });
+});
+
+it('a meta like the Button stories of the sandboxes', () => {
+  const ExampleButton = {} as Component<{
+    primary?: boolean;
+    backgroundColor?: string;
+    size?: 'small' | 'medium' | 'large';
+    label: string;
+    onclick?: (event: MouseEvent) => void;
+  }>;
+
+  const meta = preview.meta({
+    title: 'Example/Button',
+    component: ExampleButton,
+    tags: ['autodocs'],
+    argTypes: {
+      backgroundColor: { control: 'color' },
+      size: { control: { type: 'select' }, options: ['small', 'medium', 'large'] },
+    },
+    args: { onclick: fn() },
+  });
+
+  const Primary = meta.story({
+    args: { primary: true, label: 'Button' },
+    play: async ({ args }) => {
+      mocked(args.onclick).mockClear();
+    },
+  });
+  const Large = meta.story({ args: { size: 'large', label: 'Button' } });
+  // @ts-expect-error not a size
+  const Huge = meta.story({ args: { size: 'huge', label: 'Button' } });
+});
+
+it('argTypes of a meta without component do not type its args', () => {
+  const Text = {} as Component<Record<string, unknown>>;
+  const meta = preview.meta({
+    render: (args) => ({ Component: Text, props: args }),
+    argTypes: { size: { control: 'select', options: ['small', 'large'] } },
+  });
+
+  const Default = meta.story({ args: { label: 'Hi' } });
+});
+
+it('components without known props accept any args', () => {
+  const shim = {} as Component;
+  const component: any = Button;
+
+  preview.meta({ component: shim, args: { label: 'Hi' } });
+  preview.meta({ component, args: { label: 'Hi' } });
+});
+
+it('a render typed as any keeps the component args', () => {
+  const meta = preview.meta({
+    component: Button,
+    render: (args: any) => ({ Component: Button, props: args }),
+  });
+  // @ts-expect-error not a boolean
+  const Invalid = meta.story({ args: { disabled: 'yes', label: 'Hi' } });
+
+  preview.meta({
+    component: Button,
+    render: (args: any) => ({ Component: Button, props: args }),
+    // @ts-expect-error bogus is not an arg
+    args: { bogus: 1 },
+  });
+});
+
+describe('meta.type<>() types the stories created from it', () => {
+  const meta = preview.meta({ component: Button, args: { disabled: false } });
+
+  it('adds an arg to the args and the render of that story only', () => {
+    meta.type<{ args: { icon: 'star' | 'heart' } }>().story({
+      args: { label: 'Hi', icon: 'star' },
+      render: (args) => {
+        expectTypeOf(args.icon).toEqualTypeOf<'star' | 'heart'>();
+        expectTypeOf(args.label).toEqualTypeOf<string>();
+        return { Component: Button, props: args };
+      },
+      play: async ({ args }) => {
+        expectTypeOf(args.icon).toEqualTypeOf<'star' | 'heart'>();
+      },
+    });
+
+    meta.story({
+      args: { label: 'Hi' },
+      // @ts-expect-error icon is not an arg of the other stories
+      render: ({ icon, ...args }) => ({ Component: Button, props: args }),
+    });
+    // @ts-expect-error icon must be 'star' | 'heart'
+    meta.type<{ args: { icon: 'star' | 'heart' } }>().story({ args: { label: 'Hi', icon: 'x' } });
+  });
+
+  it('a required key is required in that story only', () => {
+    // @ts-expect-error icon is required
+    meta.type<{ args: { icon: string } }>().story({ args: { label: 'Hi' } });
+    meta.type<{ args: { icon?: string } }>().story({ args: { label: 'Hi' } });
+    meta.story({ args: { label: 'Hi' } });
+  });
+
+  it('args set in meta stay optional and the others stay required', () => {
+    const typed = meta.type<{ args: { icon: string } }>();
+    typed.story({ args: { label: 'Hi', icon: 'star' } });
+    typed.story({ args: { label: 'Hi', icon: 'star', disabled: true } });
+    // @ts-expect-error label is required
+    typed.story({ args: { icon: 'star' } });
+  });
+
+  it('an arg of the meta that is redeclared must be set again', () => {
+    // @ts-expect-error disabled is required, the meta sets it to false
+    meta.type<{ args: { disabled: true } }>().story({ args: { label: 'Hi' } });
+    meta.type<{ args: { disabled: true } }>().story({ args: { label: 'Hi', disabled: true } });
+  });
+
+  it('story() needs no args when no required arg is left or render takes none', () => {
+    const complete = preview.meta({ component: Button, args: { label: 'Hi', disabled: false } });
+    complete.type<{ args: { icon?: string } }>().story();
+    complete.type<{ args: { icon?: string } }>().story({});
+    // @ts-expect-error icon is required
+    complete.type<{ args: { icon: string } }>().story();
+    // @ts-expect-error icon is required
+    complete.type<{ args: { icon: string } }>().story({});
+    complete.type<{ args: { icon: string } }>().story(() => ({ Component: Divider }));
+    complete.type<{ args: { icon: string } }>().story({ render: () => ({ Component: Divider }) });
+  });
+
+  it('composes with preview.type<>(), decorators and itself', () => {
+    const withTheme: Decorator<{ theme: 'light' | 'dark' }> = (Story) => Story();
+    const typedMeta = preview.type<{ args: { locale: 'en' | 'nl' } }>().meta({
+      component: Button,
+      decorators: [withTheme],
+      args: { locale: 'nl', disabled: false },
+    });
+    const typed = typedMeta.type<{ args: { icon: string } }>().type<{ args: { size: number } }>();
+
+    typed.story({
+      args: { label: 'Hi', theme: 'dark', icon: 'star', size: 1 },
+      play: async ({ args }) => {
+        expectTypeOf(args.locale).toEqualTypeOf<'en' | 'nl'>();
+        expectTypeOf(args.theme).toEqualTypeOf<'light' | 'dark'>();
+        expectTypeOf(args.icon).toEqualTypeOf<string>();
+        expectTypeOf(args.size).toEqualTypeOf<number>();
+      },
+    });
+    // @ts-expect-error size is required
+    typed.story({ args: { label: 'Hi', theme: 'dark', icon: 'star' } });
+  });
+
+  it('the story can be extended and composed', () => {
+    const WithIcon = meta.type<{ args: { icon: string } }>().story({
+      args: { label: 'Hi', icon: 'star' },
+    });
+    const WithHeart = WithIcon.extend({ args: { icon: 'heart' } });
+    // @ts-expect-error icon is a string
+    WithIcon.extend({ args: { icon: 1 } });
+
+    expectTypeOf(WithIcon.composed.args.icon).toEqualTypeOf<string>();
+    expect(WithIcon.composed.args).toEqual({ label: 'Hi', icon: 'star', disabled: false });
+    expect(WithHeart.composed.args).toEqual({ label: 'Hi', icon: 'heart', disabled: false });
+  });
+});
diff --git a/code/renderers/svelte/src/index.ts b/code/renderers/svelte/src/index.ts
index 9b9a0c4d4c56..af5589e45e19 100644
--- a/code/renderers/svelte/src/index.ts
+++ b/code/renderers/svelte/src/index.ts
@@ -2,4 +2,6 @@ import './globals.ts';
 
 export * from './public-types.ts';
 export * from './portable-stories.ts';
+export * from './preview.ts';
 export { defineMeta } from './svelte-csf/index.ts';
+export type { SvelteTypes } from './types.ts';
diff --git a/code/renderers/svelte/src/preview.ts b/code/renderers/svelte/src/preview.ts
new file mode 100644
index 000000000000..32a90195d489
--- /dev/null
+++ b/code/renderers/svelte/src/preview.ts
@@ -0,0 +1,149 @@
+import type {
+  AddonTypes,
+  InferTypes,
+  Meta,
+  MetaInput,
+  MetaTypes,
+  Preview,
+  PreviewAddonEntry,
+  Story,
+  StoryArgs,
+  TypedMetaArgKeys,
+  WithRenderArgs,
+} from 'storybook/internal/csf';
+import { definePreview as definePreviewBase } from 'storybook/internal/csf';
+import type {
+  Args,
+  ArgsStoryFn,
+  DecoratorFunction,
+  ProjectAnnotations,
+  StoryAnnotations,
+} from 'storybook/internal/types';
+
+import type { Component, ComponentProps } from 'svelte';
+import type { Simplify } from 'type-fest';
+
+import * as svelteAnnotations from './entry-preview.ts';
+import * as svelteDocsAnnotations from './entry-preview-docs.ts';
+import type { SvelteTypes } from './types.ts';
+
+/**
+ * Define the preview of a Svelte project, with the `preview.meta()` and `meta.story()` factories.
+ *
+ * @example
+ *
+ * ```ts
+ * // .storybook/preview.ts
+ * import { definePreview } from '@storybook/svelte-vite';
+ *
+ * export default definePreview({
+ *   addons: [],
+ *   parameters: { layout: 'centered' },
+ * });
+ * ```
+ */
+export function __definePreview<Addons extends PreviewAddonEntry[]>(
+  input: { addons: Addons } & ProjectAnnotations<SvelteTypes & InferTypes<Addons>>
+): SveltePreview<SvelteTypes & InferTypes<Addons>> {
+  return definePreviewBase({
+    ...input,
+    addons: [svelteAnnotations, svelteDocsAnnotations, ...(input.addons ?? [])],
+  }) as SveltePreview<SvelteTypes & InferTypes<Addons>>;
+}
+
+// A component typed as `any` or by the `*.svelte` shim has no known props, so it takes any args.
+type InferComponentArgs<C> =
+  C extends Component<any, any, any>
+    ? [keyof ComponentProps<C>] extends [never]
+      ? Args
+      : ComponentProps<C>
+    : Args;
+
+/**
+ * The preview returned by `definePreview`. `preview.meta()` infers the args from the props of the
+ * component, the decorators, and the addons.
+ */
+export interface SveltePreview<T extends AddonTypes> extends Preview<SvelteTypes & T> {
+  /**
+   * Add types to the metas created from the returned preview, such as an arg that the component
+   * doesn't declare: `preview.type<{ args: { theme: 'light' | 'dark' } }>().meta({ component })`.
+   */
+  type<R>(): SveltePreview<T & R>;
+
+  meta<
+    C,
+    Decorators extends DecoratorFunction<SvelteTypes & T, any>,
+    TRenderArgs = unknown,
+    TMetaArgKeys extends PropertyKey = never,
+  >(
+    meta: {
+      component: C;
+      render?: ArgsStoryFn<SvelteTypes & T, InferComponentArgs<C> & TRenderArgs & T['args']>;
+    } & MetaInput<
+      SvelteTypes & T,
+      WithRenderArgs<InferComponentArgs<C>, TRenderArgs>,
+      Decorators,
+      TMetaArgKeys
+    >
+  ): SvelteMeta<
+    MetaTypes<
+      SvelteTypes & T,
+      WithRenderArgs<InferComponentArgs<C>, TRenderArgs>,
+      Decorators,
+      TMetaArgKeys
+    >,
+    TMetaArgKeys
+  >;
+
+  meta<
+    TArgs extends Args,
+    Decorators extends DecoratorFunction<SvelteTypes & T, any>,
+    TMetaArgKeys extends PropertyKey = never,
+  >(
+    meta: {
+      render?: ArgsStoryFn<SvelteTypes & T, TArgs & T['args']>;
+    } & MetaInput<SvelteTypes & T, TArgs, Decorators, TMetaArgKeys>
+  ): SvelteMeta<MetaTypes<SvelteTypes & T, TArgs, Decorators, TMetaArgKeys>, TMetaArgKeys>;
+}
+
+/**
+ * The meta returned by `preview.meta()`. Args set in meta are optional in its stories; the other
+ * required args must be set in each story.
+ */
+export interface SvelteMeta<
+  T extends SvelteTypes,
+  TMetaArgKeys extends PropertyKey = never,
+> extends Meta<T, TMetaArgKeys> {
+  /** Create a story with a render that takes no args, so the story needs no args. */
+  story<
+    TInput extends
+      | (() => SvelteTypes['storyResult'])
+      | (StoryAnnotations<T, T['args']> & { render: () => SvelteTypes['storyResult'] }),
+  >(
+    story: TInput
+  ): SvelteStory<T, TInput extends () => SvelteTypes['storyResult'] ? { render: TInput } : TInput>;
+
+  /** Create a story. It must set the required args that meta didn't set. */
+  story<
+    TInput extends Simplify<StoryAnnotations<T, T['args'], StoryArgs<T['args'], TMetaArgKeys>>>,
+  >(
+    story: TInput
+  ): SvelteStory<T, TInput>;
+
+  /** Create a story without annotations. Only allowed when meta sets every required arg. */
+  story(
+    ..._args: Partial<T['args']> extends StoryArgs<T['args'], TMetaArgKeys> ? [] : [never]
+  ): SvelteStory<T, {}>;
+
+  /**
+   * Add types to the stories created from the returned meta, such as an arg that only one story
+   * has: `meta.type<{ args: { icon: string } }>().story({ args: { icon: 'star' } })`.
+   */
+  type<S>(): SvelteMeta<T & S, TypedMetaArgKeys<TMetaArgKeys, S>>;
+}
+
+/** The story returned by `meta.story()`. */
+export interface SvelteStory<
+  T extends SvelteTypes,
+  TInput extends StoryAnnotations<T, T['args']>,
+> extends Story<T, TInput> {}
diff --git a/code/renderers/svelte/src/types.ts b/code/renderers/svelte/src/types.ts
index ddceb7c958a7..03ae5ca5d3f1 100644
--- a/code/renderers/svelte/src/types.ts
+++ b/code/renderers/svelte/src/types.ts
@@ -23,6 +23,8 @@ export interface SvelteRenderer<
   ) => Promise<Canvas>;
 }
 
+export interface SvelteTypes extends SvelteRenderer {}
+
 export interface SvelteStoryResult<
   Props extends Record<string, any> = any,
   Exports extends Record<string, any> = any,

From 76a451e0f5dc60c271a186bd2433f1e80c5471bb Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 7 Oct 2026 22:21:28 +0200
Subject: [PATCH 009/326] test(svelte): run factory stories with portable
 stories

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../composeStories/Button.csf4.stories.ts     |  71 +++++++
 .../InputFilledStoryComponent.svelte          |   2 +-
 .../LoaderStoryComponent.svelte               |   4 +-
 .../portable-stories-factory.test.ts.snap     | 190 ++++++++++++++++++
 .../portable-stories-factory.test.ts          |  30 +++
 5 files changed, 294 insertions(+), 3 deletions(-)
 create mode 100644 code/renderers/svelte/src/__test__/composeStories/Button.csf4.stories.ts
 create mode 100644 code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories-factory.test.ts.snap
 create mode 100644 code/renderers/svelte/src/__test__/composeStories/portable-stories-factory.test.ts

diff --git a/code/renderers/svelte/src/__test__/composeStories/Button.csf4.stories.ts b/code/renderers/svelte/src/__test__/composeStories/Button.csf4.stories.ts
new file mode 100644
index 000000000000..44cc9d79df04
--- /dev/null
+++ b/code/renderers/svelte/src/__test__/composeStories/Button.csf4.stories.ts
@@ -0,0 +1,71 @@
+import type { ComponentProps } from 'svelte';
+
+import { expect, fn, userEvent, within } from 'storybook/test';
+
+import { __definePreview } from '../../preview.ts';
+import AddWrapperDecorator from './AddWrapperDecorator.svelte';
+import Button from './Button.svelte';
+import CustomRenderComponent from './CustomRenderComponent.svelte';
+import InputFilledStoryComponent from './InputFilledStoryComponent.svelte';
+import LoaderStoryComponent from './LoaderStoryComponent.svelte';
+
+const preview = __definePreview({ addons: [] });
+
+const meta = preview.meta({
+  title: 'Example/Button',
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+    size: { control: { type: 'select' }, options: ['small', 'medium', 'large'] },
+  },
+});
+
+export const CSF3Primary = meta.story({
+  args: { label: 'foo', size: 'large', primary: true },
+});
+
+export const CSF3Button = meta.story({ args: { label: 'foo' } });
+
+export const WithDecorator = meta.story({
+  args: { label: 'foo' },
+  decorators: [() => ({ Component: AddWrapperDecorator })],
+});
+
+export const CSF3ButtonWithRender = meta
+  .type<{ args: ComponentProps<typeof CustomRenderComponent> }>()
+  .story({
+    args: { buttonProps: { label: 'foo' } },
+    render: (args) => ({ Component: CustomRenderComponent, props: args }),
+  });
+
+export const CSF3InputFieldFilled = meta.story({
+  render: () => ({ Component: InputFilledStoryComponent }),
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    await step('Step label', async () => {
+      const inputEl = canvas.getByTestId('input');
+      await userEvent.type(inputEl, 'Hello world!');
+      await expect(inputEl).toHaveValue('Hello world!');
+    });
+  },
+});
+
+const mockFn = fn();
+export const LoaderStory = meta.type<{ args: { mockFn: (arg: string) => string } }>().story({
+  args: { mockFn },
+  loaders: [
+    async () => {
+      mockFn.mockReturnValueOnce('mockFn return value');
+      return { value: 'loaded data' };
+    },
+  ],
+  render: (args, { loaded }) => ({
+    Component: LoaderStoryComponent,
+    props: { ...args, loaded: loaded as { value: string } },
+  }),
+  play: async () => {
+    expect(mockFn).toHaveBeenCalledWith('render');
+  },
+});
+
+export const Extended = CSF3Primary.extend({ args: { label: 'extended' } });
diff --git a/code/renderers/svelte/src/__test__/composeStories/InputFilledStoryComponent.svelte b/code/renderers/svelte/src/__test__/composeStories/InputFilledStoryComponent.svelte
index 8ad32f10e39f..59ca0793a7de 100644
--- a/code/renderers/svelte/src/__test__/composeStories/InputFilledStoryComponent.svelte
+++ b/code/renderers/svelte/src/__test__/composeStories/InputFilledStoryComponent.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   // A runes-mode component, so it has the same type as the other test components
-  const _props: Record<string, never> = $props();
+  const _props: Record<string, unknown> = $props();
 </script>
 
 <input data-testid="input" />
\ No newline at end of file
diff --git a/code/renderers/svelte/src/__test__/composeStories/LoaderStoryComponent.svelte b/code/renderers/svelte/src/__test__/composeStories/LoaderStoryComponent.svelte
index 8e30fc3c95d7..ed9e6b4c8db8 100644
--- a/code/renderers/svelte/src/__test__/composeStories/LoaderStoryComponent.svelte
+++ b/code/renderers/svelte/src/__test__/composeStories/LoaderStoryComponent.svelte
@@ -4,13 +4,13 @@
     loaded,
   }: {
     mockFn: (arg: string) => string;
-    loaded: { value: string };
+    loaded?: { value: string };
   } = $props();
 
   let data = $derived(mockFn && loaded && mockFn('render'));
 </script>
 
 <div>
-  <div data-testid="loaded-data">{loaded.value}</div>
+  <div data-testid="loaded-data">{loaded?.value}</div>
   <div data-testid="spy-data">{String(data)}</div>
 </div>
diff --git a/code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories-factory.test.ts.snap b/code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories-factory.test.ts.snap
new file mode 100644
index 000000000000..f32d82f57021
--- /dev/null
+++ b/code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories-factory.test.ts.snap
@@ -0,0 +1,190 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Renders CSF3Button story 1`] = `
+<body>
+  <div>
+    <!---->
+    <!---->
+    <!---->
+    <button
+      class="storybook-button storybook-button--medium storybook-button--secondary"
+      style=""
+      type="button"
+    >
+      foo 
+      <!---->
+    </button>
+    
+    
+    
+    
+    
+    
+  </div>
+</body>
+`;
+
+exports[`Renders CSF3ButtonWithRender story 1`] = `
+<body>
+  <div>
+    <!---->
+    <!---->
+    <!---->
+    <div>
+      <p
+        data-testid="custom-render"
+      >
+        I am a custom render function
+      </p>
+       
+      <button
+        class="storybook-button storybook-button--medium storybook-button--secondary"
+        style=""
+        type="button"
+      >
+        foo 
+        <!---->
+      </button>
+      <!---->
+    </div>
+    
+    
+    
+    
+    
+    
+  </div>
+</body>
+`;
+
+exports[`Renders CSF3InputFieldFilled story 1`] = `
+<body>
+  <div>
+    <!---->
+    <!---->
+    <!---->
+    <input
+      data-testid="input"
+    />
+    
+    
+    
+    
+    
+    
+  </div>
+</body>
+`;
+
+exports[`Renders CSF3Primary story 1`] = `
+<body>
+  <div>
+    <!---->
+    <!---->
+    <!---->
+    <button
+      class="storybook-button storybook-button--large storybook-button--primary"
+      style=""
+      type="button"
+    >
+      foo 
+      <!---->
+    </button>
+    
+    
+    
+    
+    
+    
+  </div>
+</body>
+`;
+
+exports[`Renders Extended story 1`] = `
+<body>
+  <div>
+    <!---->
+    <!---->
+    <!---->
+    <button
+      class="storybook-button storybook-button--large storybook-button--primary"
+      style=""
+      type="button"
+    >
+      extended 
+      <!---->
+    </button>
+    
+    
+    
+    
+    
+    
+  </div>
+</body>
+`;
+
+exports[`Renders LoaderStory story 1`] = `
+<body>
+  <div>
+    <!---->
+    <!---->
+    <!---->
+    <div>
+      <div
+        data-testid="loaded-data"
+      >
+        loaded data
+      </div>
+       
+      <div
+        data-testid="spy-data"
+      >
+        mockFn return value
+      </div>
+    </div>
+    
+    
+    
+    
+    
+    
+  </div>
+</body>
+`;
+
+exports[`Renders WithDecorator story 1`] = `
+<body>
+  <div>
+    <!---->
+    <!---->
+    <!---->
+    <!---->
+    <!---->
+    <div
+      data-testid="local-decorator"
+      style="margin: 3em;"
+    >
+      <!---->
+      <button
+        class="storybook-button storybook-button--medium storybook-button--secondary"
+        style=""
+        type="button"
+      >
+        foo 
+        <!---->
+      </button>
+      
+      <!---->
+    </div>
+    
+    
+    
+    
+    
+    
+    
+    
+  </div>
+</body>
+`;
diff --git a/code/renderers/svelte/src/__test__/composeStories/portable-stories-factory.test.ts b/code/renderers/svelte/src/__test__/composeStories/portable-stories-factory.test.ts
new file mode 100644
index 000000000000..826e69a1d685
--- /dev/null
+++ b/code/renderers/svelte/src/__test__/composeStories/portable-stories-factory.test.ts
@@ -0,0 +1,30 @@
+// @vitest-environment happy-dom
+import { cleanup, screen } from '@testing-library/svelte';
+import { afterEach, expect, it } from 'vitest';
+
+import * as stories from './Button.csf4.stories.ts';
+
+afterEach(() => {
+  cleanup();
+});
+
+it('runs the play function', async () => {
+  await stories.CSF3InputFieldFilled.run();
+  expect((screen.getByTestId('input') as HTMLInputElement).value).toEqual('Hello world!');
+});
+
+it('merges the args of an extended story', () => {
+  expect(stories.Extended.composed.args).toEqual({
+    label: 'extended',
+    size: 'large',
+    primary: true,
+  });
+});
+
+const testCases = Object.entries(stories).map(
+  ([name, Story]) => [name, Story] as [string, typeof Story]
+);
+it.each(testCases)('Renders %s story', async (_storyName, Story) => {
+  await Story.run();
+  expect(document.body).toMatchSnapshot();
+});

From b7944cc90889505d4c6a5413576c0388adeca37c Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 7 Oct 2026 22:21:31 +0200
Subject: [PATCH 010/326] feat(svelte-vite, sveltekit): export definePreview

The SvelteKit definePreview adds the SvelteKit mocks and types
parameters.sveltekit_experimental. The types now accept what the mocks
accept at runtime: each nested mock is optional, callbacks may return
anything, and page.error is SvelteKit's error object.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 code/frameworks/svelte-vite/src/index.test.ts |  4 +
 code/frameworks/svelte-vite/src/index.ts      |  2 +
 .../sveltekit/src/csf-factories.test.ts       | 98 +++++++++++++++++++
 code/frameworks/sveltekit/src/index.ts        | 33 +++++++
 code/frameworks/sveltekit/src/types.ts        | 39 +++++---
 code/frameworks/sveltekit/vitest.config.ts    |  2 +-
 6 files changed, 162 insertions(+), 16 deletions(-)
 create mode 100644 code/frameworks/sveltekit/src/csf-factories.test.ts

diff --git a/code/frameworks/svelte-vite/src/index.test.ts b/code/frameworks/svelte-vite/src/index.test.ts
index 31b0a92a8d13..d0955acb4289 100644
--- a/code/frameworks/svelte-vite/src/index.test.ts
+++ b/code/frameworks/svelte-vite/src/index.test.ts
@@ -9,3 +9,7 @@ it('exports Svelte CSF, so stories files can import it from the framework', () =
   expectTypeOf<framework.Args>().toEqualTypeOf<renderer.Args>();
   expectTypeOf<framework.StoryContext>().toEqualTypeOf<renderer.StoryContext>();
 });
+
+it('exports definePreview, so the preview file can import it from the framework', () => {
+  expectTypeOf<typeof framework.definePreview>().toEqualTypeOf<typeof renderer.__definePreview>();
+});
diff --git a/code/frameworks/svelte-vite/src/index.ts b/code/frameworks/svelte-vite/src/index.ts
index 6bc315a6a6f6..20d0c161d7f8 100644
--- a/code/frameworks/svelte-vite/src/index.ts
+++ b/code/frameworks/svelte-vite/src/index.ts
@@ -1,2 +1,4 @@
 export * from '@storybook/svelte';
 export * from './types.ts';
+
+export { __definePreview as definePreview } from '@storybook/svelte';
diff --git a/code/frameworks/sveltekit/src/csf-factories.test.ts b/code/frameworks/sveltekit/src/csf-factories.test.ts
new file mode 100644
index 000000000000..bb3e0a926bd7
--- /dev/null
+++ b/code/frameworks/sveltekit/src/csf-factories.test.ts
@@ -0,0 +1,98 @@
+// @vitest-environment happy-dom
+import { describe, expect, expectTypeOf, it } from 'vitest';
+
+import type { Component } from 'svelte';
+
+import { fn } from 'storybook/test';
+
+import { definePreview } from './index.ts';
+import * as svelteKitPreview from './preview.ts';
+
+type BadgeProps = { variant: 'primary' | 'secondary'; label: string };
+const Badge = {} as Component<BadgeProps>;
+
+const preview = definePreview({ addons: [] });
+
+it('includes the SvelteKit mocks', () => {
+  expect(preview.composed.decorators).toEqual(expect.arrayContaining(svelteKitPreview.decorators));
+  expect(preview.composed.beforeEach).toContain(svelteKitPreview.beforeEach);
+});
+
+it('infers the args from the component through the wrapper', () => {
+  const meta = preview.meta({ component: Badge, args: { variant: 'primary' } });
+  expectTypeOf(meta.input.args.variant).toEqualTypeOf<'primary' | 'secondary'>();
+
+  // @ts-expect-error label is required
+  const Missing = meta.story();
+});
+
+it('infers the args when the preview has no addons', () => {
+  const noAddons = definePreview({
+    parameters: { sveltekit_experimental: { state: { page: { status: 404 } } } },
+  });
+  const meta = noAddons.meta({ component: Badge, args: { variant: 'primary' } });
+  const Default = meta.story({ args: { label: 'Hi' } });
+  // @ts-expect-error label is required
+  const Missing = meta.story();
+});
+
+describe('parameters.sveltekit_experimental', () => {
+  it('accepts mocks that return nothing, as the docs show', () => {
+    const meta = preview.meta({ component: Badge, args: { variant: 'primary', label: 'Hi' } });
+    const Callbacks = meta.story({
+      parameters: {
+        sveltekit_experimental: {
+          forms: { enhance: () => {} },
+          navigation: { goto: (url: string) => {}, invalidateAll: () => {} },
+        },
+      },
+    });
+    const Mocks = meta.story({
+      parameters: {
+        sveltekit_experimental: { forms: { enhance: fn() }, navigation: { goto: fn() } },
+      },
+    });
+  });
+
+  it('accepts the page error of SvelteKit, an object with a message', () => {
+    const meta = preview.meta({ component: Badge, args: { variant: 'primary', label: 'Hi' } });
+    const NotFound = meta.story({
+      parameters: {
+        sveltekit_experimental: {
+          state: { page: { status: 404, error: { message: 'Not found', code: 'E404' } } },
+        },
+      },
+    });
+    const Thrown = meta.story({
+      parameters: { sveltekit_experimental: { state: { page: { error: new Error('Boom') } } } },
+    });
+  });
+
+  it('is typed in the preview, the meta and the story', () => {
+    definePreview({
+      addons: [],
+      parameters: { sveltekit_experimental: { state: { updated: { current: true } } } },
+    });
+
+    const meta = preview.meta({
+      component: Badge,
+      args: { variant: 'primary', label: 'Hi' },
+      parameters: { sveltekit_experimental: { state: { page: { status: 404 } } } },
+    });
+    const Default = meta.story({
+      parameters: { sveltekit_experimental: { hrefs: { '/home': () => {} } } },
+    });
+  });
+
+  it('rejects invalid mocks', () => {
+    const meta = preview.meta({ component: Badge, args: { variant: 'primary', label: 'Hi' } });
+    meta.story({
+      parameters: {
+        sveltekit_experimental: {
+          // @ts-expect-error status must be a number
+          state: { page: { status: '404' } },
+        },
+      },
+    });
+  });
+});
diff --git a/code/frameworks/sveltekit/src/index.ts b/code/frameworks/sveltekit/src/index.ts
index 96cafd282a3f..034fcc50b950 100644
--- a/code/frameworks/sveltekit/src/index.ts
+++ b/code/frameworks/sveltekit/src/index.ts
@@ -1,4 +1,37 @@
+import type {
+  AddonTypes,
+  InferTypes,
+  PreviewAddon,
+  PreviewAddonEntry,
+} from 'storybook/internal/csf';
+import type { ProjectAnnotations } from 'storybook/internal/types';
+
+import type { SveltePreview, SvelteTypes } from '@storybook/svelte';
+import { __definePreview } from '@storybook/svelte';
+
+import * as svelteKitPreview from './preview.ts';
+import type { SvelteKitTypes } from './types.ts';
+
 export * from '@storybook/svelte';
 export * from './types.ts';
 // @ts-expect-error (double exports)
 export * from './portable-stories.ts';
+
+/**
+ * Define the preview of a SvelteKit project, with the `preview.meta()` and `meta.story()`
+ * factories. It includes the SvelteKit mocks, configured with `parameters.sveltekit_experimental`.
+ */
+export function definePreview<Addons extends PreviewAddonEntry[] = []>(
+  preview: { addons?: Addons } & ProjectAnnotations<
+    SvelteTypes & SvelteKitTypes & InferTypes<Addons>
+  >
+): SvelteKitPreview<InferTypes<Addons>> {
+  return __definePreview({
+    ...preview,
+    addons: [svelteKitPreview, ...(preview.addons ?? [])] as PreviewAddon<
+      SvelteKitTypes & InferTypes<Addons>
+    >[],
+  });
+}
+
+export interface SvelteKitPreview<T extends AddonTypes> extends SveltePreview<SvelteKitTypes & T> {}
diff --git a/code/frameworks/sveltekit/src/types.ts b/code/frameworks/sveltekit/src/types.ts
index e92699b9ca6e..3c3fc797464d 100644
--- a/code/frameworks/sveltekit/src/types.ts
+++ b/code/frameworks/sveltekit/src/types.ts
@@ -5,7 +5,6 @@ import type {
 
 import type { BuilderOptions, StorybookConfigVite } from '@storybook/builder-vite';
 
-import type { enhance } from './mocks/app/forms.ts';
 import type {
   goto,
   invalidate,
@@ -75,7 +74,7 @@ interface Page<
     id: RouteId;
   };
   status: number;
-  error: Error | null;
+  error: ({ message: string } & Record<string, any>) | null;
   data: Record<string, any>;
   state: Record<string, any>;
   form: any;
@@ -112,23 +111,33 @@ interface Navigation {
   complete: Promise<void>;
 }
 
+// The mocks ignore what a callback returns.
+type MockOf<F extends (...args: any[]) => unknown> = (...args: Parameters<F>) => void;
+
 export type SvelteKitParameters = Partial<{
   hrefs: Record<string, HrefConfig>;
-  state: {
+  state: Partial<{
     page: Partial<Page>;
     navigating: Partial<Navigation>;
     updated: { current: boolean };
-  };
-  navigation: {
-    goto: typeof goto;
-    invalidate: typeof invalidate;
-    invalidateAll: typeof invalidateAll;
-    refreshAll: typeof refreshAll;
-    pushState: typeof pushState;
-    replaceState: typeof replaceState;
+  }>;
+  navigation: Partial<{
+    goto: MockOf<typeof goto>;
+    invalidate: MockOf<typeof invalidate>;
+    invalidateAll: MockOf<typeof invalidateAll>;
+    refreshAll: MockOf<typeof refreshAll>;
+    pushState: MockOf<typeof pushState>;
+    replaceState: MockOf<typeof replaceState>;
     afterNavigate: Record<string, any>;
-  };
-  forms: {
-    enhance: typeof enhance;
-  };
+  }>;
+  forms: Partial<{
+    enhance: (event: SubmitEvent) => void;
+  }>;
 }>;
+
+export interface SvelteKitTypes {
+  parameters: {
+    /** Mocks for the SvelteKit modules, such as `$app/state` and `$app/navigation`. */
+    sveltekit_experimental?: SvelteKitParameters;
+  };
+}
diff --git a/code/frameworks/sveltekit/vitest.config.ts b/code/frameworks/sveltekit/vitest.config.ts
index 25fae90d1f77..e79dbf04e28e 100644
--- a/code/frameworks/sveltekit/vitest.config.ts
+++ b/code/frameworks/sveltekit/vitest.config.ts
@@ -5,6 +5,6 @@ import { vitestCommonConfig } from '../../vitest.shared.ts';
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    // Add custom config here
+    plugins: [import('@sveltejs/vite-plugin-svelte').then(({ svelte }) => svelte())],
   })
 );

From c68ff4914969ffed3d2b0b29f61edf2e47be5199 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Fri, 9 Oct 2026 09:39:11 +0200
Subject: [PATCH 011/326] test(svelte): show placeholders for the version and
 paths in error snapshots

The error snapshots interpolated the package version and the file URLs with
template literals. Updating them with `-u` replaced those with the current
version and the absolute paths of the machine, which break on the next release
or on another machine. A snapshot serializer now prints `v<version>` and
`<cwd>` in their place.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../remove-export-default.test.ts             |  3 +--
 .../parser/analyse/story/attributes.test.ts   |  7 +++---
 .../story/attributes/identifiers.test.ts      | 19 +++++++--------
 .../parser/extract/compiled/nodes.test.ts     |  4 +---
 .../extract/svelte/module-nodes.test.ts       | 11 ++++-----
 code/renderers/svelte/vitest-setup.ts         | 23 +++++++++++++++++++
 code/renderers/svelte/vitest.config.ts        |  1 +
 7 files changed, 42 insertions(+), 26 deletions(-)
 create mode 100644 code/renderers/svelte/vitest-setup.ts

diff --git a/code/renderers/svelte/src/svelte-csf/compiler/post-transform/remove-export-default.test.ts b/code/renderers/svelte/src/svelte-csf/compiler/post-transform/remove-export-default.test.ts
index 2ba78ef0c3b3..5b77fb949762 100644
--- a/code/renderers/svelte/src/svelte-csf/compiler/post-transform/remove-export-default.test.ts
+++ b/code/renderers/svelte/src/svelte-csf/compiler/post-transform/remove-export-default.test.ts
@@ -9,7 +9,6 @@ import { describe, it } from 'vitest';
 import { removeExportDefault } from './remove-export-default.ts';
 
 import { extractCompiledASTNodes } from '../../parser/extract/compiled/nodes.ts';
-import { StorybookSvelteCSFError } from '../../utils/error.ts';
 
 const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
 
@@ -35,7 +34,7 @@ describe(removeExportDefault.name, () => {
       `
       [SB_SVELTE_CSF_PARSER_EXTRACT_COMPILED_0003 (NoExportDefaultError): Could not find 'export default' in the compiled output of the stories file: <path not specified>
 
-      More info: https://github.com/storybookjs/storybook/blob/v${StorybookSvelteCSFError.packageVersion}/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_EXTRACT_COMPILED_0003
+      More info: https://github.com/storybookjs/storybook/blob/v<version>/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_EXTRACT_COMPILED_0003
       ]
     `
     );
diff --git a/code/renderers/svelte/src/svelte-csf/parser/analyse/story/attributes.test.ts b/code/renderers/svelte/src/svelte-csf/parser/analyse/story/attributes.test.ts
index 659eff996300..795bfa34d24d 100644
--- a/code/renderers/svelte/src/svelte-csf/parser/analyse/story/attributes.test.ts
+++ b/code/renderers/svelte/src/svelte-csf/parser/analyse/story/attributes.test.ts
@@ -5,7 +5,6 @@ import { getArrayOfStringsValueFromAttribute, getStringValueFromAttribute } from
 import { getSvelteAST } from '../../ast.ts';
 import { extractSvelteASTNodes } from '../../extract/svelte/nodes.ts';
 import { extractStoryAttributesNodes } from '../../extract/svelte/story/attributes.ts';
-import { StorybookSvelteCSFError } from '../../../utils/error.ts';
 
 describe(getStringValueFromAttribute.name, () => {
   it("throws error when a `<Story />` 'name' attribute value is not a string", async ({
@@ -39,7 +38,7 @@ describe(getStringValueFromAttribute.name, () => {
 
         A '<Story name="undefined" />' has a prop 'name' whose value must be a static literal string.
 
-        More info: https://github.com/storybookjs/storybook/blob/v${StorybookSvelteCSFError.packageVersion}/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0001
+        More info: https://github.com/storybookjs/storybook/blob/v<version>/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0001
         ]
       `);
   });
@@ -110,7 +109,7 @@ describe(getArrayOfStringsValueFromAttribute.name, () => {
       A '<Story name="Default" />' has a prop'tags' whose value was expected to be a static array.
       Instead the value type is '0'.
 
-      More info: https://github.com/storybookjs/storybook/blob/v${StorybookSvelteCSFError.packageVersion}/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0002
+      More info: https://github.com/storybookjs/storybook/blob/v<version>/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0002
       ]
     `
     );
@@ -150,7 +149,7 @@ describe(getArrayOfStringsValueFromAttribute.name, () => {
       A '<Story name="Default" />' has attribute 'tags' whose value was expected to be an array expression.
       All elements in the array must be static literal strings only, but one of the elements is of type 'undefined'.
 
-      More info: https://github.com/storybookjs/storybook/blob/v${StorybookSvelteCSFError.packageVersion}/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0003
+      More info: https://github.com/storybookjs/storybook/blob/v<version>/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0003
       ]
     `
     );
diff --git a/code/renderers/svelte/src/svelte-csf/parser/analyse/story/attributes/identifiers.test.ts b/code/renderers/svelte/src/svelte-csf/parser/analyse/story/attributes/identifiers.test.ts
index afc3bad3bd36..4705059345f3 100644
--- a/code/renderers/svelte/src/svelte-csf/parser/analyse/story/attributes/identifiers.test.ts
+++ b/code/renderers/svelte/src/svelte-csf/parser/analyse/story/attributes/identifiers.test.ts
@@ -1,5 +1,3 @@
-import url from 'node:url';
-
 import { describe, expect, it } from 'vitest';
 
 import { getStoryIdentifiers, getStoriesIdentifiers } from './identifiers.ts';
@@ -7,7 +5,6 @@ import { getStoryIdentifiers, getStoriesIdentifiers } from './identifiers.ts';
 import { getSvelteAST } from '../../../ast.ts';
 import { extractSvelteASTNodes } from '../../../extract/svelte/nodes.ts';
 import { extractStoryAttributesNodes } from '../../../extract/svelte/story/attributes.ts';
-import { StorybookSvelteCSFError } from '../../../../utils/error.ts';
 
 describe(getStoryIdentifiers.name, () => {
   it("extracts 'exportName' attribute when is a Text string", async () => {
@@ -94,10 +91,10 @@ describe(getStoryIdentifiers.name, () => {
       })
     ).toThrowErrorMatchingInlineSnapshot(
       `
-      [SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0004 (NoStoryIdentifierError): Missing 'name' or 'exportName' attribute (prop) in a '<Story />' definition in the stories file:  '${url.pathToFileURL('invalid.stories.svelte')}'.
+      [SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0004 (NoStoryIdentifierError): Missing 'name' or 'exportName' attribute (prop) in a '<Story />' definition in the stories file:  '<cwd>/invalid.stories.svelte'.
       All stories must either have a 'name' or an 'exportName' prop, or both.
 
-      More info: https://github.com/storybookjs/storybook/blob/v${StorybookSvelteCSFError.packageVersion}/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0004
+      More info: https://github.com/storybookjs/storybook/blob/v<version>/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0004
       ]
     `
     );
@@ -218,13 +215,13 @@ describe(getStoryIdentifiers.name, () => {
       })
     ).toThrowErrorMatchingInlineSnapshot(
       `
-      [SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0005 (InvalidStoryExportNameError): Invalid attribute 'exportName' value 'default' found in '<Story />' component inside stories file: ${url.pathToFileURL('invalid.stories.svelte')}
+      [SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0005 (InvalidStoryExportNameError): Invalid attribute 'exportName' value 'default' found in '<Story />' component inside stories file: <cwd>/invalid.stories.svelte
 
         'exportName' value must be a valid JavaScript variable name.
         It must start with a letter, $ or _, followed by letters, numbers, $ or _.
         Reserved words like 'default' are also not allowed (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#reserved_words)
 
-      More info: https://github.com/storybookjs/storybook/blob/v${StorybookSvelteCSFError.packageVersion}/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0005
+      More info: https://github.com/storybookjs/storybook/blob/v<version>/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0005
       ]
     `
     );
@@ -290,7 +287,7 @@ describe(getStoriesIdentifiers.name, () => {
       })
     ).toThrowErrorMatchingInlineSnapshot(
       `
-      [SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0006 (DuplicateStoryIdentifiersError): Duplicate exportNames found between two '<Story />' definitions in stories file: ${url.pathToFileURL('duplicate-identifiers.stories.svelte')}
+      [SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0006 (DuplicateStoryIdentifiersError): Duplicate exportNames found between two '<Story />' definitions in stories file: <cwd>/duplicate-identifiers.stories.svelte
 
       First instance: <Story name={undefined} exportName="SomeExportName" ... />
       Second instance: <Story name={undefined} exportName="SomeExportName" ... />
@@ -300,7 +297,7 @@ describe(getStoriesIdentifiers.name, () => {
       eg. 'Some story name!!' will be converted to 'SomeStoryName'.
       You can fix this collision by providing a unique 'exportName' prop with <Story exportName="SomeUniqueExportName" ... />.
 
-      More info: https://github.com/storybookjs/storybook/blob/v${StorybookSvelteCSFError.packageVersion}/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0006
+      More info: https://github.com/storybookjs/storybook/blob/v<version>/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0006
       ]
     `
     );
@@ -326,7 +323,7 @@ describe(getStoriesIdentifiers.name, () => {
       })
     ).toThrowErrorMatchingInlineSnapshot(
       `
-      [SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0006 (DuplicateStoryIdentifiersError): Duplicate exportNames found between two '<Story />' definitions in stories file: ${url.pathToFileURL('duplicate-identifiers.stories.svelte')}
+      [SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0006 (DuplicateStoryIdentifiersError): Duplicate exportNames found between two '<Story />' definitions in stories file: <cwd>/duplicate-identifiers.stories.svelte
 
       First instance: <Story name={undefined} exportName="SomeStoryName" ... />
       Second instance: <Story name="some story name!!!" exportName="SomeStoryName" ... />
@@ -336,7 +333,7 @@ describe(getStoriesIdentifiers.name, () => {
       eg. 'Some story name!!' will be converted to 'SomeStoryName'.
       You can fix this collision by providing a unique 'exportName' prop with <Story exportName="SomeUniqueExportName" ... />.
 
-      More info: https://github.com/storybookjs/storybook/blob/v${StorybookSvelteCSFError.packageVersion}/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0006
+      More info: https://github.com/storybookjs/storybook/blob/v<version>/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0006
       ]
     `
     );
diff --git a/code/renderers/svelte/src/svelte-csf/parser/extract/compiled/nodes.test.ts b/code/renderers/svelte/src/svelte-csf/parser/extract/compiled/nodes.test.ts
index 28c551c1cb84..a1f77ba362a1 100644
--- a/code/renderers/svelte/src/svelte-csf/parser/extract/compiled/nodes.test.ts
+++ b/code/renderers/svelte/src/svelte-csf/parser/extract/compiled/nodes.test.ts
@@ -6,8 +6,6 @@ import { extractCompiledASTNodes } from './nodes.ts';
 
 import { SVELTE_CSF_IMPORT_SOURCES } from '../../../constants.ts';
 
-import { StorybookSvelteCSFError } from '../../../utils/error.ts';
-
 function getCompiledAST(moduleScript: string) {
   const { js } = compile(
     `<script module>
@@ -65,7 +63,7 @@ describe(extractCompiledASTNodes.name, () => {
 
       In a SvelteKit project, import defineMeta from "@storybook/sveltekit".
 
-      More info: https://github.com/storybookjs/storybook/blob/v${StorybookSvelteCSFError.packageVersion}/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0002
+      More info: https://github.com/storybookjs/storybook/blob/v<version>/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0002
       ]
     `);
   });
diff --git a/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/module-nodes.test.ts b/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/module-nodes.test.ts
index 6b0b6d30c466..98b5c0d17bb4 100644
--- a/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/module-nodes.test.ts
+++ b/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/module-nodes.test.ts
@@ -5,7 +5,6 @@ import { extractModuleNodes } from './module-nodes.ts';
 import { SVELTE_CSF_IMPORT_SOURCES } from '../../../constants.ts';
 
 import { getSvelteAST } from '../../ast.ts';
-import { StorybookSvelteCSFError } from '../../../utils/error.ts';
 
 describe(extractModuleNodes.name, () => {
   it('fails when module tag not found', async ({ expect }) => {
@@ -27,7 +26,7 @@ describe(extractModuleNodes.name, () => {
 
       In a SvelteKit project, import defineMeta from "@storybook/sveltekit".
 
-      More info: https://github.com/storybookjs/storybook/blob/v${StorybookSvelteCSFError.packageVersion}/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0001
+      More info: https://github.com/storybookjs/storybook/blob/v<version>/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0001
       ]
     `);
   });
@@ -51,7 +50,7 @@ describe(extractModuleNodes.name, () => {
 
       In a SvelteKit project, import defineMeta from "@storybook/sveltekit".
 
-      More info: https://github.com/storybookjs/storybook/blob/v${StorybookSvelteCSFError.packageVersion}/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0003
+      More info: https://github.com/storybookjs/storybook/blob/v<version>/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0003
       ]
     `);
   });
@@ -78,7 +77,7 @@ describe(extractModuleNodes.name, () => {
 
       In a SvelteKit project, import defineMeta from "@storybook/sveltekit".
 
-      More info: https://github.com/storybookjs/storybook/blob/v${StorybookSvelteCSFError.packageVersion}/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0004
+      More info: https://github.com/storybookjs/storybook/blob/v<version>/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0004
       ]
     `);
   });
@@ -105,7 +104,7 @@ describe(extractModuleNodes.name, () => {
 
       In a SvelteKit project, import defineMeta from "@storybook/sveltekit".
 
-      More info: https://github.com/storybookjs/storybook/blob/v${StorybookSvelteCSFError.packageVersion}/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0004
+      More info: https://github.com/storybookjs/storybook/blob/v<version>/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0004
       ]
     `);
   });
@@ -257,7 +256,7 @@ describe(extractModuleNodes.name, () => {
 
         In a SvelteKit project, import defineMeta from "@storybook/sveltekit".
 
-        More info: https://github.com/storybookjs/storybook/blob/v${StorybookSvelteCSFError.packageVersion}/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0002
+        More info: https://github.com/storybookjs/storybook/blob/v<version>/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0002
         ]
       `);
     });
diff --git a/code/renderers/svelte/vitest-setup.ts b/code/renderers/svelte/vitest-setup.ts
new file mode 100644
index 000000000000..38b166c691bb
--- /dev/null
+++ b/code/renderers/svelte/vitest-setup.ts
@@ -0,0 +1,23 @@
+import { pathToFileURL } from 'node:url';
+
+import { expect } from 'vitest';
+
+import { StorybookSvelteCSFError } from './src/svelte-csf/utils/error.ts';
+
+// Error messages contain the installed version and the absolute paths of the stories files.
+// Snapshots show placeholders, so that updating them with `-u` writes no value that changes with
+// each release or machine.
+const replacements = [
+  [`/blob/v${StorybookSvelteCSFError.packageVersion}/`, '/blob/v<version>/'],
+  [pathToFileURL(process.cwd()).href, '<cwd>'],
+] as const;
+
+expect.addSnapshotSerializer({
+  test: (value) =>
+    value instanceof Error && replacements.some(([actual]) => value.message.includes(actual)),
+  serialize: (value: Error) =>
+    `[${value.name}: ${replacements.reduce(
+      (message, [actual, placeholder]) => message.replaceAll(actual, placeholder),
+      value.message
+    )}]`,
+});
diff --git a/code/renderers/svelte/vitest.config.ts b/code/renderers/svelte/vitest.config.ts
index 72a176531b63..83f86b87b458 100644
--- a/code/renderers/svelte/vitest.config.ts
+++ b/code/renderers/svelte/vitest.config.ts
@@ -11,6 +11,7 @@ export default defineConfig(
     ],
     test: {
       environment: 'happy-dom',
+      setupFiles: ['./vitest-setup.ts'],
     },
   })
 );

From 9cbc959f6605f54cc654751bc11015e1456c4f6a Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Fri, 9 Oct 2026 09:39:15 +0200
Subject: [PATCH 012/326] fix(csf-tools): read factory stories exported with
 export specifiers

Svelte CSF exports its stories as `export { $__Primary as Primary }`. In a
factories file, `CsfFile` now reads the annotations inside `meta.story()`
behind such a specifier, also when it's wrapped in `satisfies` or `as`, and
marks the story as a factory story. A local specifier export that isn't a
factory story is skipped. A story re-exported from another file is kept.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 code/core/src/csf-tools/CsfFile.ts | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index e3229dc13bbf..a8fc8c580bd4 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -777,7 +777,17 @@ export class CsfFile {
                   }
                 } else {
                   const annotations = {} as Record<string, t.Node>;
-                  const storyNode = decl;
+                  let storyNode: t.Node | undefined = decl;
+                  let storyIsFactory = false;
+                  const unwrappedDecl = decl && unwrapExpression(decl);
+                  if (unwrappedDecl && isCsfFactoryCall(unwrappedDecl)) {
+                    storyIsFactory = true;
+                    storyNode = unwrappedDecl.arguments[0];
+                  }
+                  // A story imported from another file has no initializer here
+                  if (self._metaIsFactory && decl && !storyIsFactory) {
+                    return;
+                  }
                   if (t.isObjectExpression(storyNode)) {
                     (storyNode.properties as t.ObjectProperty[]).forEach((p) => {
                       if (t.isIdentifier(p.key)) {
@@ -793,7 +803,7 @@ export class CsfFile {
                     name: exportName,
                     localName,
                     parameters: {},
-                    __stats: {},
+                    __stats: storyIsFactory ? { factory: true } : {},
                   };
                 }
               }

From 2887bbdc7ec5de034ef9e2c1a7447377bd3031db Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Fri, 9 Oct 2026 09:39:19 +0200
Subject: [PATCH 013/326] feat(svelte): accept preview.meta() in Svelte CSF
 files

A `.stories.svelte` file can call `preview.meta()` in place of `defineMeta()`,
with `preview` imported from the preview file. The parser, the compiler and the
indexer find the meta with the same code in `utils/import-source.ts`. The
compiler outputs a CSF factories module: the stories are `meta.story()` calls,
and the module has no default export.

`preview.meta()` returns the `Story` component. Its props require the args that
meta didn't set, and `Args<typeof Story>` gives the args of a story.

Three new errors: a file mixes `defineMeta()` and `preview.meta()` (0010),
`preview` isn't imported from a preview file (0011), and a file calls
`preview.meta()` twice (0012).

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 code/renderers/svelte/src/preview.ts          |  85 +++++++++-
 code/renderers/svelte/src/public-types.ts     |   9 +-
 .../renderers/svelte/src/svelte-csf/ERRORS.md |  44 ++++-
 ...eate-runtime-story-variable-declaration.ts |  42 +++--
 ...eate-variable-from-runtime-stories-call.ts |  14 +-
 .../post-transform/create-appendix.ts         |   8 +-
 .../post-transform/define-meta/index.ts       |  24 ++-
 .../define-meta/replace-argument.ts           |   7 +-
 .../svelte/src/svelte-csf/indexer/parser.ts   |  87 ++++------
 .../parser/extract/compiled/nodes.ts          |  73 +++------
 .../parser/extract/svelte/define-meta.ts      |   6 +-
 .../parser/extract/svelte/module-nodes.ts     |  77 +++------
 .../utils/error/parser/extract/compiled.ts    |   4 +-
 .../utils/error/parser/extract/svelte.ts      |  81 ++++++++-
 .../src/svelte-csf/utils/import-source.ts     | 154 +++++++++++++++++-
 15 files changed, 499 insertions(+), 216 deletions(-)

diff --git a/code/renderers/svelte/src/preview.ts b/code/renderers/svelte/src/preview.ts
index 32a90195d489..b2f90ddb237f 100644
--- a/code/renderers/svelte/src/preview.ts
+++ b/code/renderers/svelte/src/preview.ts
@@ -18,9 +18,11 @@ import type {
   DecoratorFunction,
   ProjectAnnotations,
   StoryAnnotations,
+  StoryContext,
 } from 'storybook/internal/types';
 
-import type { Component, ComponentProps } from 'svelte';
+import StoryComponent from '@storybook/svelte/internal/svelte-csf/Story.svelte';
+import type { Component, ComponentProps, Snippet } from 'svelte';
 import type { Simplify } from 'type-fest';
 
 import * as svelteAnnotations from './entry-preview.ts';
@@ -45,10 +47,15 @@ import type { SvelteTypes } from './types.ts';
 export function __definePreview<Addons extends PreviewAddonEntry[]>(
   input: { addons: Addons } & ProjectAnnotations<SvelteTypes & InferTypes<Addons>>
 ): SveltePreview<SvelteTypes & InferTypes<Addons>> {
-  return definePreviewBase({
+  const preview = definePreviewBase({
     ...input,
     addons: [svelteAnnotations, svelteDocsAnnotations, ...(input.addons ?? [])],
-  }) as SveltePreview<SvelteTypes & InferTypes<Addons>>;
+  });
+  const meta = preview.meta.bind(preview);
+  // Svelte CSF files render their stories with the `Story` component of the meta.
+  preview.meta = ((metaInput: Parameters<typeof meta>[0]) =>
+    Object.assign(meta(metaInput as never), { Story: StoryComponent })) as typeof meta;
+  return preview as SveltePreview<SvelteTypes & InferTypes<Addons>>;
 }
 
 // A component typed as `any` or by the `*.svelte` shim has no known props, so it takes any args.
@@ -59,6 +66,12 @@ type InferComponentArgs<C> =
       : ComponentProps<C>
     : Args;
 
+// Svelte CSF files set the default template of their stories with a snippet. The snippet member has
+// the same parameters as `ArgsStoryFn`, so that a `render` function still gets its args typed.
+type MetaRender<T extends SvelteTypes, TArgs> =
+  | ArgsStoryFn<T, TArgs>
+  | ((...args: Parameters<ArgsStoryFn<T, TArgs>>) => ReturnType<Snippet>);
+
 /**
  * The preview returned by `definePreview`. `preview.meta()` infers the args from the props of the
  * component, the decorators, and the addons.
@@ -78,7 +91,7 @@ export interface SveltePreview<T extends AddonTypes> extends Preview<SvelteTypes
   >(
     meta: {
       component: C;
-      render?: ArgsStoryFn<SvelteTypes & T, InferComponentArgs<C> & TRenderArgs & T['args']>;
+      render?: MetaRender<SvelteTypes & T, InferComponentArgs<C> & TRenderArgs & T['args']>;
     } & MetaInput<
       SvelteTypes & T,
       WithRenderArgs<InferComponentArgs<C>, TRenderArgs>,
@@ -101,7 +114,7 @@ export interface SveltePreview<T extends AddonTypes> extends Preview<SvelteTypes
     TMetaArgKeys extends PropertyKey = never,
   >(
     meta: {
-      render?: ArgsStoryFn<SvelteTypes & T, TArgs & T['args']>;
+      render?: MetaRender<SvelteTypes & T, TArgs & T['args']>;
     } & MetaInput<SvelteTypes & T, TArgs, Decorators, TMetaArgKeys>
   ): SvelteMeta<MetaTypes<SvelteTypes & T, TArgs, Decorators, TMetaArgKeys>, TMetaArgKeys>;
 }
@@ -114,6 +127,9 @@ export interface SvelteMeta<
   T extends SvelteTypes,
   TMetaArgKeys extends PropertyKey = never,
 > extends Meta<T, TMetaArgKeys> {
+  /** The component that creates the stories of a Svelte CSF file. */
+  Story: Component<SvelteCsfStoryProps<T, TMetaArgKeys>>;
+
   /** Create a story with a render that takes no args, so the story needs no args. */
   story<
     TInput extends
@@ -147,3 +163,62 @@ export interface SvelteStory<
   T extends SvelteTypes,
   TInput extends StoryAnnotations<T, T['args']>,
 > extends Story<T, TInput> {}
+
+type ArgsProp<TArgs> = {} extends TArgs ? { args?: TArgs } : { args: TArgs };
+
+/**
+ * The props of the `Story` component of a Svelte CSF file. Args that meta didn't set are required,
+ * unless the story renders static content: `asChild`, or a `template` snippet without parameters.
+ */
+export type SvelteCsfStoryProps<
+  T extends SvelteTypes,
+  TMetaArgKeys extends PropertyKey = never,
+> = Omit<StoryAnnotations<T, T['args']>, 'args' | 'name' | 'render'> &
+  (
+    | {
+        /** The name of the story. Can be omitted when `exportName` is set. */
+        name?: string;
+        /**
+         * The name of the story export. Defaults to the `name` in PascalCase, for example `'My
+         * story!'` becomes `'MyStory'`. Set it when two names give the same export name, or to
+         * import the story in MDX docs.
+         */
+        exportName: string;
+      }
+    | { name: string; exportName?: undefined }
+  ) &
+  // TypeScript reports a type error against the last member that doesn't match, so a story with
+  // only args is last: its error names the missing args.
+  (
+    | {
+        template: Snippet<[]>;
+        children?: never;
+        asChild?: never;
+        args?: Partial<T['args']>;
+      }
+    | {
+        template?: never;
+        children: Snippet;
+        /** Render the children as the static content of the story, without the component. */
+        asChild: true;
+        args?: Partial<T['args']>;
+      }
+    | ({
+        template?: never;
+        /** The children of the component. With `asChild`, the static content of the story. */
+        children: Snippet;
+        asChild?: false;
+        // The children of the story are the `children` arg of the component.
+      } & ArgsProp<StoryArgs<T['args'], TMetaArgKeys | 'children'>>)
+    | ({
+        /** Render the story with this snippet, which takes the args and the story context. */
+        template: Snippet<[T['args'], StoryContext<T, T['args']>]>;
+        children?: never;
+        asChild?: never;
+      } & ArgsProp<StoryArgs<T['args'], TMetaArgKeys>>)
+    | ({
+        template?: never;
+        children?: never;
+        asChild?: false;
+      } & ArgsProp<StoryArgs<T['args'], TMetaArgKeys>>)
+  );
diff --git a/code/renderers/svelte/src/public-types.ts b/code/renderers/svelte/src/public-types.ts
index f6221da8e6c1..9d2a6ac2eb57 100644
--- a/code/renderers/svelte/src/public-types.ts
+++ b/code/renderers/svelte/src/public-types.ts
@@ -15,15 +15,16 @@ import type {
 import type { Component, ComponentProps } from 'svelte';
 import type { SetOptional, Simplify } from 'type-fest';
 
-import type { SvelteRenderer } from './types.ts';
+import type { SvelteRenderer, SvelteTypes } from './types.ts';
 import type { StoryComponent } from './svelte-csf/types.ts';
+import type { SvelteCsfStoryProps } from './preview.ts';
 
 export type { ArgTypes, Parameters, StrictArgs } from 'storybook/internal/types';
 
 /**
  * Without a type argument, the args of a story: a record of arg names to values.
  *
- * With the `Story` component from `defineMeta`, the args of that story.
+ * With the `Story` component from `defineMeta` or `preview.meta`, the args of that story.
  *
  * @example
  * ```svelte
@@ -37,7 +38,9 @@ export type Args<TStoryCmp = never> = [TStoryCmp] extends [never]
   : // The component type is `any`: `Component` props are contravariant, so matching on `Cmp` infers nothing
     TStoryCmp extends StoryComponent<infer TArgs extends Record<string, any>, any>
     ? TArgs
-    : never;
+    : TStoryCmp extends Component<SvelteCsfStoryProps<infer T extends SvelteTypes, any>>
+      ? T['args']
+      : never;
 
 /**
  * Metadata to configure the stories for a component.
diff --git a/code/renderers/svelte/src/svelte-csf/ERRORS.md b/code/renderers/svelte/src/svelte-csf/ERRORS.md
index 662863c15c76..dc1d01809520 100644
--- a/code/renderers/svelte/src/svelte-csf/ERRORS.md
+++ b/code/renderers/svelte/src/svelte-csf/ERRORS.md
@@ -2,7 +2,7 @@
 
 This document is a list of known errors that Svelte CSF throws.
 
-The examples import `defineMeta` from `@storybook/svelte-vite`. In a SvelteKit project, import it from `@storybook/sveltekit`.
+The examples import `defineMeta` from `@storybook/svelte-vite`. In a SvelteKit project, import it from `@storybook/sveltekit`. With CSF factories, a stories file calls `preview.meta()` in place of `defineMeta()`, and the same errors apply.
 
 ## `PARSER_EXTRACT_SVELTE`
 
@@ -128,6 +128,48 @@ The indexer doesn't run Svelte preprocessors. It ignores the content of `<style>
 
 Read the original error first. It often points to a problem in the stories file. If it doesn't, [please report it on the issue tracker on GitHub](https://github.com/storybookjs/storybook/issues/new?template=bug_report.yml), and include the full message.
 
+### `SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0010`
+
+The stories file calls both `defineMeta()` and `preview.meta()`. A stories file has one meta. Use `preview.meta()` with CSF factories, and `defineMeta()` otherwise:
+
+```diff
+<script module>
+- import { defineMeta } from '@storybook/svelte-vite';
+  import preview from '#.storybook/preview';
+
+- const { Story } = defineMeta({});
+  const { Story } = preview.meta({});
+</script>
+```
+
+### `SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0011`
+
+The stories file calls `preview.meta()`, but `preview` isn't imported from the preview file of Storybook. Storybook finds a CSF factories meta through this import. The import path must end with `/preview`, with or without a file extension:
+
+```diff
+<script module>
+- import preview from '../storybook-config';
++ import preview from '#.storybook/preview';
+
+  const { Story } = preview.meta({});
+</script>
+```
+
+### `SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0012`
+
+The stories file calls `preview.meta()` more than once. A stories file has one meta. Move the stories of each meta to their own stories file:
+
+```diff
+<script module>
+  import preview from '#.storybook/preview';
+  import Button from './Button.svelte';
+- import Layout from './Layout.svelte';
+
+  const { Story } = preview.meta({ component: Button });
+- const { Story: LayoutStory } = preview.meta({ component: Layout });
+</script>
+```
+
 ## `PARSER_EXTRACT_COMPILED`
 
 > [!NOTE]
diff --git a/code/renderers/svelte/src/svelte-csf/compiler/post-transform/appendix/create-runtime-story-variable-declaration.ts b/code/renderers/svelte/src/svelte-csf/compiler/post-transform/appendix/create-runtime-story-variable-declaration.ts
index 996f9a69ea87..2e7c91e91390 100644
--- a/code/renderers/svelte/src/svelte-csf/compiler/post-transform/appendix/create-runtime-story-variable-declaration.ts
+++ b/code/renderers/svelte/src/svelte-csf/compiler/post-transform/appendix/create-runtime-story-variable-declaration.ts
@@ -15,6 +15,8 @@ interface RuntimeStoryVariableDeclarationParams {
   nodes: {
     variable: ReturnType<typeof createVariableFromRuntimeStoriesCall>;
     tags?: ESTreeAST.ArrayExpression;
+    // The meta of a CSF factories file, which creates the story with `meta.story()`
+    factoryMeta?: ESTreeAST.Identifier;
   };
 }
 
@@ -26,6 +28,21 @@ export function createRuntimeStoryVariableDeclaration(
     { type: 'Literal', value: SVELTE_CSF_V5_TAG },
   ]);
 
+  const annotations = createASTObjectExpression([
+    {
+      type: 'SpreadElement',
+      argument: {
+        type: 'MemberExpression',
+        computed: true,
+        optional: false,
+        object: params.nodes.variable.declarations[0].id as ESTreeAST.Identifier,
+        property: { type: 'Literal', value: params.exportName },
+      },
+    },
+    createASTProperty('tags', tags),
+  ]);
+  const { factoryMeta } = params.nodes;
+
   return {
     type: 'VariableDeclaration',
     kind: 'const',
@@ -33,19 +50,20 @@ export function createRuntimeStoryVariableDeclaration(
       {
         type: 'VariableDeclarator',
         id: createASTIdentifier(`${STORYBOOK_INTERNAL_PREFIX}${params.exportName}`),
-        init: createASTObjectExpression([
-          {
-            type: 'SpreadElement',
-            argument: {
-              type: 'MemberExpression',
-              computed: true,
+        init: factoryMeta
+          ? {
+              type: 'CallExpression',
               optional: false,
-              object: params.nodes.variable.declarations[0].id as ESTreeAST.Identifier,
-              property: { type: 'Literal', value: params.exportName },
-            },
-          },
-          createASTProperty('tags', tags),
-        ]),
+              callee: {
+                type: 'MemberExpression',
+                computed: false,
+                optional: false,
+                object: factoryMeta,
+                property: createASTIdentifier('story'),
+              },
+              arguments: [annotations],
+            }
+          : annotations,
       },
     ],
   };
diff --git a/code/renderers/svelte/src/svelte-csf/compiler/post-transform/appendix/create-variable-from-runtime-stories-call.ts b/code/renderers/svelte/src/svelte-csf/compiler/post-transform/appendix/create-variable-from-runtime-stories-call.ts
index b0ebfcf404f1..a0da100daff1 100644
--- a/code/renderers/svelte/src/svelte-csf/compiler/post-transform/appendix/create-variable-from-runtime-stories-call.ts
+++ b/code/renderers/svelte/src/svelte-csf/compiler/post-transform/appendix/create-variable-from-runtime-stories-call.ts
@@ -3,13 +3,15 @@ import { createASTIdentifier, type ESTreeAST } from '../../../parser/ast.ts';
 
 interface Params {
   storiesFunctionDeclaration: ESTreeAST.FunctionDeclaration;
+  // The meta of a CSF factories file. Its annotations are in `meta.input`.
+  factoryMeta?: ESTreeAST.Identifier;
   filename?: string;
 }
 
 export function createVariableFromRuntimeStoriesCall(
   params: Params
 ): ESTreeAST.VariableDeclaration {
-  const { storiesFunctionDeclaration } = params;
+  const { storiesFunctionDeclaration, factoryMeta } = params;
 
   return {
     type: 'VariableDeclaration',
@@ -26,7 +28,15 @@ export function createVariableFromRuntimeStoriesCall(
           callee: createASTIdentifier('createRuntimeStories'),
           arguments: [
             createASTIdentifier(storiesFunctionDeclaration.id.name),
-            createASTIdentifier(STORYBOOK_META_IDENTIFIER),
+            factoryMeta
+              ? {
+                  type: 'MemberExpression',
+                  computed: false,
+                  optional: false,
+                  object: factoryMeta,
+                  property: createASTIdentifier('input'),
+                }
+              : createASTIdentifier(STORYBOOK_META_IDENTIFIER),
           ],
         },
       },
diff --git a/code/renderers/svelte/src/svelte-csf/compiler/post-transform/create-appendix.ts b/code/renderers/svelte/src/svelte-csf/compiler/post-transform/create-appendix.ts
index 7775dee56a8d..c1bf615b3c6d 100644
--- a/code/renderers/svelte/src/svelte-csf/compiler/post-transform/create-appendix.ts
+++ b/code/renderers/svelte/src/svelte-csf/compiler/post-transform/create-appendix.ts
@@ -26,6 +26,9 @@ export async function createAppendix(params: Params) {
   const { code, nodes, filename } = params;
   const { compiled, svelte } = nodes;
   const { storiesFunctionDeclaration } = compiled;
+  const factoryMeta = compiled.isFactory
+    ? (compiled.metaIdentifier ?? createASTIdentifier(STORYBOOK_META_IDENTIFIER))
+    : undefined;
 
   const storiesIdentifiers = getStoriesIdentifiers({
     nodes: svelte,
@@ -33,6 +36,7 @@ export async function createAppendix(params: Params) {
   });
   const variableFromRuntimeStoriesCall = createVariableFromRuntimeStoriesCall({
     storiesFunctionDeclaration,
+    factoryMeta,
     filename,
   });
   const storiesVariableDeclarations = storiesIdentifiers.map(({ exportName }, idx) =>
@@ -45,6 +49,7 @@ export async function createAppendix(params: Params) {
           storyComponents: params.nodes.svelte.storyComponents,
           idx,
         }),
+        factoryMeta,
       },
     })
   );
@@ -55,7 +60,8 @@ export async function createAppendix(params: Params) {
     body: [
       createRuntimeStoriesImport(),
       variableFromRuntimeStoriesCall,
-      createExportDefaultMeta(),
+      // A CSF factories file has no default export: core finds the meta through the stories
+      ...(factoryMeta ? [] : [createExportDefaultMeta()]),
       createExportOrderVariableDeclaration({ storiesIdentifiers, filename }),
       ...storiesVariableDeclarations,
       createNamedExportStories({ storiesIdentifiers }),
diff --git a/code/renderers/svelte/src/svelte-csf/compiler/post-transform/define-meta/index.ts b/code/renderers/svelte/src/svelte-csf/compiler/post-transform/define-meta/index.ts
index 2ec62a028b2f..e35988f7e614 100644
--- a/code/renderers/svelte/src/svelte-csf/compiler/post-transform/define-meta/index.ts
+++ b/code/renderers/svelte/src/svelte-csf/compiler/post-transform/define-meta/index.ts
@@ -26,6 +26,12 @@ export function transformDefineMeta(params: Params): void {
   const { code, nodes, filename } = params;
 
   insertDefineMetaParameters({ nodes, filename });
+
+  if (nodes.compiled.isFactory) {
+    transformFactoryMeta(params);
+    return;
+  }
+
   const metaObjectExpression = replaceDefineMetaArgument({ nodes, filename });
   const metaVariableDeclaration = createMetaVariableDeclaration({ init: metaObjectExpression });
 
@@ -37,10 +43,26 @@ export function transformDefineMeta(params: Params): void {
   code.appendLeft(start as number, print(metaVariableDeclaration).code + '\n');
 }
 
+// Names the meta `$__meta`, unless the file already does, so that the stories can call `meta.story()`
+function transformFactoryMeta(params: Params): void {
+  const { code, nodes } = params;
+  const { defineMetaVariableDeclaration, metaIdentifier } = nodes.compiled;
+  const { start, end } = defineMetaVariableDeclaration;
+  const [declarator] = defineMetaVariableDeclaration.declarations;
+  let printed = '';
+
+  if (!metaIdentifier && declarator.init) {
+    printed += print(createMetaVariableDeclaration({ init: declarator.init })).code + '\n';
+    declarator.init = createASTIdentifier(STORYBOOK_META_IDENTIFIER);
+  }
+
+  code.update(start as number, end as number, printed + print(defineMetaVariableDeclaration).code);
+}
+
 export function createMetaVariableDeclaration({
   init,
 }: {
-  init: ESTreeAST.ObjectExpression;
+  init: ESTreeAST.Expression;
 }): ESTreeAST.VariableDeclaration {
   return {
     type: 'VariableDeclaration',
diff --git a/code/renderers/svelte/src/svelte-csf/compiler/post-transform/define-meta/replace-argument.ts b/code/renderers/svelte/src/svelte-csf/compiler/post-transform/define-meta/replace-argument.ts
index c21b4ba88bcd..ec4a47d20164 100644
--- a/code/renderers/svelte/src/svelte-csf/compiler/post-transform/define-meta/replace-argument.ts
+++ b/code/renderers/svelte/src/svelte-csf/compiler/post-transform/define-meta/replace-argument.ts
@@ -26,12 +26,7 @@ export function replaceDefineMetaArgument(params: Params): ESTreeAST.ObjectExpre
 
   const declaration = params.nodes.compiled.defineMetaVariableDeclaration.declarations[0];
 
-  if (
-    !declaration ||
-    declaration.init?.type !== 'CallExpression' ||
-    declaration?.init?.callee.type !== 'Identifier' ||
-    declaration?.init?.callee.name !== params.nodes.compiled.defineMetaImport.local.name
-  ) {
+  if (declaration?.init?.type !== 'CallExpression') {
     throw new NoDestructuredDefineMetaCallError({
       defineMetaVariableDeclarator: declaration,
       filename: params.filename,
diff --git a/code/renderers/svelte/src/svelte-csf/indexer/parser.ts b/code/renderers/svelte/src/svelte-csf/indexer/parser.ts
index c550dc1d3d41..f465397d3a73 100644
--- a/code/renderers/svelte/src/svelte-csf/indexer/parser.ts
+++ b/code/renderers/svelte/src/svelte-csf/indexer/parser.ts
@@ -1,6 +1,6 @@
 import fs from 'node:fs/promises';
 
-import { findDefineMetaImport } from '../utils/import-source.ts';
+import { findMeta, findMetaImports, hasMetaImport } from '../utils/import-source.ts';
 import type { IndexInput } from 'storybook/internal/types';
 
 import { getSvelteAST, type ESTreeAST, type SvelteAST } from '../parser/ast.ts';
@@ -56,7 +56,7 @@ export async function parseForIndexer(filename: string): Promise<Results> {
 
   const svelteAST = getIndexableAST(code, filename);
   const results: Results & {
-    defineMetaImport?: ESTreeAST.ImportSpecifier;
+    hasMetaImport?: boolean;
     defineMetaStory?: ESTreeAST.Identifier;
   } = {
     meta: {},
@@ -93,64 +93,45 @@ export async function parseForIndexer(filename: string): Promise<Results> {
     Program(node, context) {
       const { body } = node;
       const { state, visit } = context;
-      const imports = findDefineMetaImport(body);
+      const imports = findMetaImports(body);
+      const meta = findMeta(body, imports, filename);
 
-      state.defineMetaImport = imports.defineMetaImport;
+      state.hasMetaImport = hasMetaImport(imports);
       hasDefaultOrNamespaceImport = imports.hasDefaultOrNamespaceImport;
 
-      for (const statement of body) {
-        if (statement.type === 'VariableDeclaration') {
-          visit(statement, state);
-        }
+      if (!meta) {
+        return;
       }
-    },
 
-    VariableDeclaration(node, context) {
-      const { declarations } = node;
-      const { state, visit } = context;
-      const { id, init } = declarations[0];
-
-      if (init?.type === 'CallExpression') {
-        const { arguments: arguments_, callee } = init;
-
-        if (callee.type === 'Identifier' && callee.name === state.defineMetaImport?.local.name) {
-          if (id?.type !== 'ObjectPattern') {
-            throw new NoDestructuredDefineMetaCallError({
-              defineMetaVariableDeclarator: declarations[0],
-              filename,
-            });
-          }
-
-          const { properties } = id;
-          const destructuredStoryIdentifier = properties.find(
-            (property) =>
-              property.type === 'Property' &&
-              property.key.type === 'Identifier' &&
-              property.key.name === 'Story'
-          ) as ESTreeAST.Property | undefined;
-
-          if (!destructuredStoryIdentifier) {
-            throw new NoStoryComponentDestructuredError({
-              filename,
-              defineMetaImport: state.defineMetaImport,
-            });
-          }
-
-          state.defineMetaStory = destructuredStoryIdentifier.value as ESTreeAST.Identifier;
-
-          if (arguments_[0].type !== 'ObjectExpression') {
-            throw new GetDefineMetaFirstArgumentError({
-              filename,
-              defineMetaVariableDeclaration: node,
-            });
-          }
-
-          visit(arguments_[0], state);
-        }
+      const [declarator] = meta.declaration.declarations;
+
+      if (!meta.isFactory && declarator.id.type !== 'ObjectPattern') {
+        throw new NoDestructuredDefineMetaCallError({
+          defineMetaVariableDeclarator: declarator,
+          filename,
+        });
       }
+
+      if (!meta.storyIdentifier) {
+        throw new NoStoryComponentDestructuredError({
+          filename,
+          metaFunctionName: meta.functionName,
+        });
+      }
+
+      state.defineMetaStory = meta.storyIdentifier;
+
+      if (meta.call.arguments[0]?.type !== 'ObjectExpression') {
+        throw new GetDefineMetaFirstArgumentError({
+          filename,
+          defineMetaVariableDeclaration: meta.declaration,
+        });
+      }
+
+      visit(meta.call.arguments[0], state);
     },
 
-    // NOTE: We assume this one is value of first argument passed to `defineMeta({ ... })` call
+    // NOTE: We assume this one is value of first argument passed to `defineMeta({ ... })` or `preview.meta({ ... })` call
     ObjectExpression(node, context) {
       const { properties } = node;
       const { state, visit } = context;
@@ -249,7 +230,7 @@ export async function parseForIndexer(filename: string): Promise<Results> {
     },
   });
 
-  if (!results.defineMetaImport) {
+  if (!results.hasMetaImport) {
     if (hasDefaultOrNamespaceImport) {
       throw new DefaultOrNamespaceImportUsedError(filename);
     }
diff --git a/code/renderers/svelte/src/svelte-csf/parser/extract/compiled/nodes.ts b/code/renderers/svelte/src/svelte-csf/parser/extract/compiled/nodes.ts
index 351c4b6f4d1f..8af92d12f8ea 100644
--- a/code/renderers/svelte/src/svelte-csf/parser/extract/compiled/nodes.ts
+++ b/code/renderers/svelte/src/svelte-csf/parser/extract/compiled/nodes.ts
@@ -1,4 +1,4 @@
-import { findDefineMetaImport } from '../../../utils/import-source.ts';
+import { findMeta, findMetaImports, hasMetaImport } from '../../../utils/import-source.ts';
 import type { ParseAst } from 'rollup';
 import type { Visitors } from 'zimmerframe';
 
@@ -18,16 +18,16 @@ import { DefaultOrNamespaceImportUsedError } from '../../../utils/error/parser/e
  * Powered by `rollup`'s internal [`this.parse()`](https://rollupjs.org/plugin-development/#this-parse)
  */
 export interface CompiledASTNodes {
+  /** `true` when the meta comes from `preview.meta()`, which creates a CSF factories meta. */
+  isFactory: boolean;
   /**
-   * Import specifier for `defineMeta`, imported from one of `SVELTE_CSF_IMPORT_SOURCES`.
-   * Could be renamed - e.g. `import { defineMeta } from "@storybook/svelte"`
-   */
-  defineMetaImport: ESTreeAST.ImportSpecifier;
-  /**
-   * Variable declaration: `const { Story } = defineMeta({ })`
-   * Could be destructured with rename - e.g. `const { Story: S } = defineMeta({ ... })`
+   * Variable declaration with the meta call: `const { Story } = defineMeta({ })`, or
+   * `preview.meta({ })` in place of `defineMeta({ })`. It can also be `const meta =
+   * preview.meta({ })`, followed by `const { Story } = meta`.
    */
   defineMetaVariableDeclaration: ESTreeAST.VariableDeclaration;
+  /** `meta` in `const meta = preview.meta({ })`. */
+  metaIdentifier?: ESTreeAST.Identifier;
   /**
    * Store the `export default declaration`, we will need to remove it later.
    * Why? Storybook expects `export default meta`, instead of what `@sveltejs/vite-plugin-svelte` will produce.
@@ -44,10 +44,6 @@ export interface CompiledASTNodes {
   storiesFunctionDeclaration: ESTreeAST.FunctionDeclaration;
 }
 
-const AST_NODES_NAMES = {
-  Story: 'Story',
-} as const;
-
 interface Params {
   // Rollup's AST has its own copy of the ESTree types
   ast: ESTreeAST.Program | ReturnType<ParseAst>;
@@ -66,35 +62,11 @@ export async function extractCompiledASTNodes(params: Params): Promise<CompiledA
   const state: Partial<CompiledASTNodes> & {
     potentialStoriesFunctionDeclaration: ESTreeAST.FunctionDeclaration[];
   } = { potentialStoriesFunctionDeclaration: [] };
-  const imports = findDefineMetaImport((ast as ESTreeAST.Program).body);
-  state.defineMetaImport = imports.defineMetaImport;
-  const visitors: Visitors<ESTreeAST.Node | ESTreeAST.Comment, typeof state> = {
-    VariableDeclaration(node, { state }) {
-      const { declarations } = node;
-      const declaration = declarations[0];
-      const { id, init } = declaration;
-
-      if (
-        id.type === 'ObjectPattern' &&
-        init?.type === 'CallExpression' &&
-        init.callee.type === 'Identifier' &&
-        init.callee.name === state.defineMetaImport?.local.name
-      ) {
-        state.defineMetaVariableDeclaration = node;
-
-        for (const property of id.properties) {
-          if (
-            property.type === 'Property' &&
-            property.key.type === 'Identifier' &&
-            property.key.name === AST_NODES_NAMES.Story &&
-            property.value.type === 'Identifier'
-          ) {
-            state.storyIdentifier = property.value;
-          }
-        }
-      }
-    },
+  const { body } = ast as ESTreeAST.Program;
+  const imports = findMetaImports(body);
+  const meta = findMeta(body, imports, filename);
 
+  const visitors: Visitors<ESTreeAST.Node | ESTreeAST.Comment, typeof state> = {
     FunctionDeclaration(node, { state }) {
       state.potentialStoriesFunctionDeclaration.push(node);
     },
@@ -123,15 +95,9 @@ export async function extractCompiledASTNodes(params: Params): Promise<CompiledA
 
   walk(ast as ESTreeAST.Program, state, visitors);
 
-  const {
-    defineMetaImport,
-    defineMetaVariableDeclaration,
-    exportDefault,
-    storyIdentifier,
-    storiesFunctionDeclaration,
-  } = state;
+  const { exportDefault, storiesFunctionDeclaration } = state;
 
-  if (!defineMetaImport) {
+  if (!hasMetaImport(imports)) {
     if (imports.hasDefaultOrNamespaceImport) {
       throw new DefaultOrNamespaceImportUsedError(filename);
     }
@@ -139,7 +105,7 @@ export async function extractCompiledASTNodes(params: Params): Promise<CompiledA
     throw new MissingImportedDefineMetaError(filename);
   }
 
-  if (!defineMetaVariableDeclaration) {
+  if (!meta) {
     throw new MissingDefineMetaVariableDeclarationError(filename);
   }
 
@@ -147,7 +113,7 @@ export async function extractCompiledASTNodes(params: Params): Promise<CompiledA
     throw new NoExportDefaultError(filename);
   }
 
-  if (!storyIdentifier) {
+  if (!meta.storyIdentifier) {
     throw new NoStoryIdentifierFoundError(filename);
   }
 
@@ -156,10 +122,11 @@ export async function extractCompiledASTNodes(params: Params): Promise<CompiledA
   }
 
   return {
-    defineMetaImport,
-    defineMetaVariableDeclaration,
+    isFactory: meta.isFactory,
+    defineMetaVariableDeclaration: meta.declaration,
+    metaIdentifier: meta.metaIdentifier,
     exportDefault,
-    storyIdentifier,
+    storyIdentifier: meta.storyIdentifier,
     storiesFunctionDeclaration,
   };
 }
diff --git a/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/define-meta.ts b/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/define-meta.ts
index afc814d99c43..ce70a8297a9a 100644
--- a/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/define-meta.ts
+++ b/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/define-meta.ts
@@ -42,22 +42,20 @@ export function extractDefineMetaPropertiesNodes<
 }
 
 /**
- * `defineMeta` accepts only one argument - an {@link ObjectExpression},
+ * `defineMeta` and `preview.meta` accept only one argument - an {@link ObjectExpression},
  * which should satisfy `@storybook/svelte`'s interface {@link Meta}.
  */
 export function getDefineMetaFirstArgumentObjectExpression(
   options: Pick<Options<Array<keyof ComponentAnnotations<Cmp>>>, 'filename' | 'nodes'>
 ): ESTreeAST.ObjectExpression {
   const { nodes, filename } = options;
-  const { defineMetaVariableDeclaration, defineMetaImport } = nodes;
+  const { defineMetaVariableDeclaration } = nodes;
   const { declarations } = defineMetaVariableDeclaration;
   const declaration = declarations[0];
   const { init } = declaration;
 
   if (
     init?.type === 'CallExpression' &&
-    init.callee.type === 'Identifier' &&
-    init.callee.name === defineMetaImport.local.name && // NOTE: the callee.name could be renamed by user
     init.arguments.length === 1 &&
     init.arguments[0].type === 'ObjectExpression'
   ) {
diff --git a/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/module-nodes.ts b/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/module-nodes.ts
index e135e1d2e3cb..997f0afb8ee9 100644
--- a/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/module-nodes.ts
+++ b/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/module-nodes.ts
@@ -1,5 +1,4 @@
-import { findDefineMetaImport } from '../../../utils/import-source.ts';
-import type { Visitors } from 'zimmerframe';
+import { findMeta, findMetaImports, hasMetaImport } from '../../../utils/import-source.ts';
 
 import type { ESTreeAST, SvelteAST } from '../../ast.ts';
 import {
@@ -9,23 +8,18 @@ import {
   MissingModuleTagError,
   NoStoryComponentDestructuredError,
 } from '../../../utils/error/parser/extract/svelte.ts';
-import type { Identifier } from 'estree';
-
-const AST_NODES_NAMES = {
-  Story: 'Story',
-} as const;
 
 interface Result {
+  /** `true` when the meta comes from `preview.meta()`, which creates a CSF factories meta. */
+  isFactory: boolean;
   /**
-   * Import specifier for `defineMeta`, imported from one of `SVELTE_CSF_IMPORT_SOURCES`.
-   * Could be renamed - e.g. `import { defineMeta as df } from "@storybook/svelte"`
-   */
-  defineMetaImport: ESTreeAST.ImportSpecifier;
-  /**
-   * Variable declaration: `const { Story } = defineMeta({ })`
-   * Could be destructured with rename - e.g. `const { Story: S } = defineMeta({ ... })`
+   * Variable declaration with the meta call: `const { Story } = defineMeta({ })`, or
+   * `preview.meta({ })` in place of `defineMeta({ })`. It can also be `const meta =
+   * preview.meta({ })`, followed by `const { Story } = meta`.
    */
   defineMetaVariableDeclaration: ESTreeAST.VariableDeclaration;
+  /** `meta` in `const meta = preview.meta({ })`. */
+  metaIdentifier?: ESTreeAST.Identifier;
   /**
    * An identifier for the `<Story />` component.
    * It could be destructured with rename - e.g. `const { Story: S } = defineMeta({ ... })`
@@ -50,43 +44,10 @@ export async function extractModuleNodes(options: Params): Promise<Result> {
     throw new MissingModuleTagError(filename);
   }
 
-  const { walk } = await import('zimmerframe');
-
-  const imports = findDefineMetaImport(module.content.body);
-  const state: Partial<Result> = { defineMetaImport: imports.defineMetaImport };
-  const visitors: Visitors<SvelteAST.SvelteNode, typeof state> = {
-    VariableDeclaration(node, { state }) {
-      const { declarations } = node;
-      const declaration = declarations[0];
-      const { id, init } = declaration;
-
-      if (
-        id.type === 'ObjectPattern' &&
-        init?.type === 'CallExpression' &&
-        init.callee.type === 'Identifier' &&
-        init.callee.name === state.defineMetaImport?.local.name
-      ) {
-        state.defineMetaVariableDeclaration = node;
-
-        for (const property of id.properties) {
-          if (
-            property.type === 'Property' &&
-            property.key.type === 'Identifier' &&
-            property.key.name === AST_NODES_NAMES.Story &&
-            property.value.type === 'Identifier'
-          ) {
-            state.storyIdentifier = property.value;
-          }
-        }
-      }
-    },
-  };
-
-  walk(module.content, state, visitors);
-
-  const { defineMetaImport, defineMetaVariableDeclaration, storyIdentifier } = state;
+  const imports = findMetaImports(module.content.body);
+  const meta = findMeta(module.content.body, imports, filename);
 
-  if (!defineMetaImport) {
+  if (!hasMetaImport(imports)) {
     if (imports.hasDefaultOrNamespaceImport) {
       throw new DefaultOrNamespaceImportUsedError(filename);
     }
@@ -94,17 +55,21 @@ export async function extractModuleNodes(options: Params): Promise<Result> {
     throw new MissingDefineMetaImportError(filename);
   }
 
-  if (!defineMetaVariableDeclaration) {
+  if (!meta) {
     throw new MissingDefineMetaVariableDeclarationError(filename);
   }
 
-  if (!storyIdentifier) {
-    throw new NoStoryComponentDestructuredError({ filename, defineMetaImport });
+  if (!meta.storyIdentifier) {
+    throw new NoStoryComponentDestructuredError({
+      filename,
+      metaFunctionName: meta.functionName,
+    });
   }
 
   return {
-    defineMetaImport,
-    defineMetaVariableDeclaration,
-    storyIdentifier,
+    isFactory: meta.isFactory,
+    defineMetaVariableDeclaration: meta.declaration,
+    metaIdentifier: meta.metaIdentifier,
+    storyIdentifier: meta.storyIdentifier,
   };
 }
diff --git a/code/renderers/svelte/src/svelte-csf/utils/error/parser/extract/compiled.ts b/code/renderers/svelte/src/svelte-csf/utils/error/parser/extract/compiled.ts
index f4962e6c9aed..ee7577584f6e 100644
--- a/code/renderers/svelte/src/svelte-csf/utils/error/parser/extract/compiled.ts
+++ b/code/renderers/svelte/src/svelte-csf/utils/error/parser/extract/compiled.ts
@@ -14,7 +14,7 @@ export class MissingImportedDefineMetaError extends StorybookSvelteCSFError {
 
   template() {
     return dedent`
-      Could not find the import statement of 'defineMeta' from ${StorybookSvelteCSFError.importSourcesText} in the compiled output of: ${this.filepathURL}
+      Could not find the import statement of 'defineMeta' from ${StorybookSvelteCSFError.importSourcesText}, or of the preview from .storybook/preview, in the compiled output of: ${this.filepathURL}
     `;
   }
 }
@@ -30,7 +30,7 @@ export class MissingDefineMetaVariableDeclarationError extends StorybookSvelteCS
 
   template() {
     return dedent`
-			Could not find variable declaration from 'defineMeta' call in the compiled output of the stories file: ${this.filepathURL}
+			Could not find variable declaration from 'defineMeta' or 'preview.meta' call in the compiled output of the stories file: ${this.filepathURL}
     `;
   }
 }
diff --git a/code/renderers/svelte/src/svelte-csf/utils/error/parser/extract/svelte.ts b/code/renderers/svelte/src/svelte-csf/utils/error/parser/extract/svelte.ts
index db99d8817aaf..0c66bc250257 100644
--- a/code/renderers/svelte/src/svelte-csf/utils/error/parser/extract/svelte.ts
+++ b/code/renderers/svelte/src/svelte-csf/utils/error/parser/extract/svelte.ts
@@ -16,6 +16,7 @@ const BASE_INITIAL_SNIPPET = dedent`
 </script>
 
 In a SvelteKit project, import defineMeta from "${StorybookSvelteCSFError.sveltekitImportSource}".
+With CSF factories, call preview.meta() in place of defineMeta(), with preview imported from '#.storybook/preview'.
 `;
 
 export class MissingModuleTagError extends StorybookSvelteCSFError {
@@ -32,7 +33,7 @@ export class MissingModuleTagError extends StorybookSvelteCSFError {
       The file '${this.filepathURL}'
       does not have a module context (<script module> ... </script>).
 
-      defineMeta(...) should be called inside a module script tag, like so:
+      defineMeta(...) or preview.meta(...) should be called inside a module script tag, like so:
 
       ${BASE_INITIAL_SNIPPET}
     `;
@@ -73,7 +74,7 @@ export class MissingDefineMetaImportError extends StorybookSvelteCSFError {
   template() {
     return dedent`
       The file '${this.filepathURL}'
-      does not import defineMeta from ${StorybookSvelteCSFError.importSourcesText} inside the module context.
+      does not import defineMeta from ${StorybookSvelteCSFError.importSourcesText}, or the preview from .storybook/preview, inside the module context.
 
       Make sure to import defineMeta from the package and use it inside the module context like so:
 
@@ -94,7 +95,7 @@ export class MissingDefineMetaVariableDeclarationError extends StorybookSvelteCS
   template() {
     return dedent`
     The file '${this.filepathURL}'
-    does not store the result of calling defineMeta(). While defineMeta() might have been called,
+    does not store the result of calling defineMeta() or preview.meta(). While it might have been called,
     it's return value needs to be stored and destructured for the parsing to succeed, eg.:
 
     ${BASE_INITIAL_SNIPPET}
@@ -107,23 +108,24 @@ export class NoStoryComponentDestructuredError extends StorybookSvelteCSFError {
   readonly code = 5;
   public documentation = true;
 
-  public defineMetaImport: SvelteASTNodes['defineMetaImport'];
+  // The meta function, such as `defineMeta` or `preview.meta`
+  public metaFunctionName: string;
 
   constructor({
     filename,
-    defineMetaImport,
+    metaFunctionName,
   }: {
     filename?: StorybookSvelteCSFError['filename'];
-    defineMetaImport: NoStoryComponentDestructuredError['defineMetaImport'];
+    metaFunctionName: NoStoryComponentDestructuredError['metaFunctionName'];
   }) {
     super({ filename });
-    this.defineMetaImport = defineMetaImport;
+    this.metaFunctionName = metaFunctionName;
   }
 
   template() {
     return dedent`
       The file '${this.filepathURL}'
-      does not destructure the Story component from the '${this.defineMetaImport.local.name}({ ... })' function call.
+      does not destructure the Story component from the '${this.metaFunctionName}({ ... })' function call.
       eg.:
 
       ${BASE_INITIAL_SNIPPET}
@@ -152,7 +154,7 @@ export class GetDefineMetaFirstArgumentError extends StorybookSvelteCSFError {
   template() {
     return dedent`
       The file '${this.filepathURL}'
-      passes an invalid first argument to the 'defineMeta' call.
+      passes an invalid first argument to the 'defineMeta' or 'preview.meta' call.
 
       The first argument must be an object expression with the meta properties set.
     `;
@@ -235,3 +237,64 @@ export class IndexerParseError extends StorybookSvelteCSFError {
     `;
   }
 }
+
+export class MixedMetaError extends StorybookSvelteCSFError {
+  readonly category = StorybookSvelteCSFError.CATEGORY.parserExtractSvelte;
+  readonly code = 10;
+  public documentation = true;
+
+  constructor(filename?: StorybookSvelteCSFError['filename']) {
+    super({ filename });
+  }
+
+  template() {
+    return dedent`
+      The file '${this.filepathURL}'
+      calls both defineMeta() and preview.meta(). A stories file can only have one meta.
+      Use preview.meta() for CSF factories, or defineMeta() otherwise.
+    `;
+  }
+}
+
+export class MultipleMetaError extends StorybookSvelteCSFError {
+  readonly category = StorybookSvelteCSFError.CATEGORY.parserExtractSvelte;
+  readonly code = 12;
+  public documentation = true;
+
+  constructor(filename?: StorybookSvelteCSFError['filename']) {
+    super({ filename });
+  }
+
+  template() {
+    return dedent`
+      The file '${this.filepathURL}'
+      calls preview.meta() more than once. A stories file can only have one meta.
+      Move the stories of each meta to their own stories file.
+    `;
+  }
+}
+
+export class PreviewNotImportedError extends StorybookSvelteCSFError {
+  readonly category = StorybookSvelteCSFError.CATEGORY.parserExtractSvelte;
+  readonly code = 11;
+  public documentation = true;
+
+  constructor(filename?: StorybookSvelteCSFError['filename']) {
+    super({ filename });
+  }
+
+  template() {
+    return dedent`
+      The file '${this.filepathURL}'
+      calls preview.meta(), but it doesn't import preview from the preview file of Storybook. Import it like so:
+
+      <script module>
+        import preview from '#.storybook/preview';
+
+        const { Story } = preview.meta({});
+      </script>
+
+      The import path must end with '/preview', with or without a file extension.
+    `;
+  }
+}
diff --git a/code/renderers/svelte/src/svelte-csf/utils/import-source.ts b/code/renderers/svelte/src/svelte-csf/utils/import-source.ts
index 2e0673d1847c..d9819b3db315 100644
--- a/code/renderers/svelte/src/svelte-csf/utils/import-source.ts
+++ b/code/renderers/svelte/src/svelte-csf/utils/import-source.ts
@@ -1,30 +1,47 @@
+import { isValidPreviewPath } from 'storybook/internal/csf-tools';
+
 import type * as ESTreeAST from 'estree';
 
 import { SVELTE_CSF_IMPORT_SOURCES } from '../constants.ts';
 import { isOneOf } from './is-one-of.ts';
+import {
+  MixedMetaError,
+  MultipleMetaError,
+  PreviewNotImportedError,
+} from './error/parser/extract/svelte.ts';
 
 export function isSvelteCsfImportSource(source: unknown): boolean {
   return typeof source === 'string' && isOneOf(SVELTE_CSF_IMPORT_SOURCES, source);
 }
 
-interface DefineMetaImport {
+export interface MetaImports {
   defineMetaImport?: ESTreeAST.ImportSpecifier;
   hasDefaultOrNamespaceImport: boolean;
+  // The local names of the imports from a preview file, such as `preview`
+  previewNames: string[];
 }
 
 // Imports are only allowed at the top level, so there's no need to walk the whole AST
-export function findDefineMetaImport(body: ESTreeAST.Program['body']): DefineMetaImport {
-  const result: DefineMetaImport = { hasDefaultOrNamespaceImport: false };
+export function findMetaImports(body: ESTreeAST.Program['body']): MetaImports {
+  const result: MetaImports = { hasDefaultOrNamespaceImport: false, previewNames: [] };
 
   for (const statement of body) {
-    if (
-      statement.type !== 'ImportDeclaration' ||
-      !isSvelteCsfImportSource(statement.source.value)
-    ) {
+    if (statement.type !== 'ImportDeclaration') {
+      continue;
+    }
+
+    const { source, specifiers } = statement;
+
+    if (typeof source.value === 'string' && isValidPreviewPath(source.value)) {
+      result.previewNames.push(...specifiers.map((specifier) => specifier.local.name));
       continue;
     }
 
-    for (const specifier of statement.specifiers) {
+    if (!isSvelteCsfImportSource(source.value)) {
+      continue;
+    }
+
+    for (const specifier of specifiers) {
       if (specifier.type !== 'ImportSpecifier') {
         result.hasDefaultOrNamespaceImport = true;
       } else if ('name' in specifier.imported && specifier.imported.name === 'defineMeta') {
@@ -35,3 +52,124 @@ export function findDefineMetaImport(body: ESTreeAST.Program['body']): DefineMet
 
   return result;
 }
+
+export function hasMetaImport(imports: MetaImports): boolean {
+  return !!imports.defineMetaImport || imports.previewNames.length > 0;
+}
+
+// `const { Story } = defineMeta({ … })`, `const { Story } = preview.meta({ … })`, or
+// `const meta = preview.meta({ … })` followed by `const { Story } = meta`
+export interface MetaNodes {
+  // `preview.meta()` creates a CSF factories meta
+  isFactory: boolean;
+  declaration: ESTreeAST.VariableDeclaration;
+  call: ESTreeAST.CallExpression;
+  // For error messages, such as `defineMeta` or `preview.meta`
+  functionName: string;
+  // `meta` in `const meta = preview.meta({ … })`
+  metaIdentifier?: ESTreeAST.Identifier;
+  // It can be renamed: `const { Story: S } = …`
+  storyIdentifier?: ESTreeAST.Identifier;
+}
+
+export function findMeta(
+  body: ESTreeAST.Program['body'],
+  imports: MetaImports,
+  filename?: string
+): MetaNodes | undefined {
+  let meta: MetaNodes | undefined;
+
+  for (const statement of body) {
+    if (statement.type !== 'VariableDeclaration') {
+      continue;
+    }
+
+    const { id, init } = statement.declarations[0];
+    const functionName =
+      init?.type === 'CallExpression' ? getMetaFunctionName(init, imports, filename) : undefined;
+
+    if (init?.type === 'CallExpression' && functionName) {
+      const isFactory = init.callee.type === 'MemberExpression';
+
+      if (meta && meta.isFactory !== isFactory) {
+        throw new MixedMetaError(filename);
+      }
+
+      // Two defineMeta() calls are allowed: the last one wins
+      if (meta?.isFactory) {
+        throw new MultipleMetaError(filename);
+      }
+
+      meta = {
+        isFactory,
+        declaration: statement,
+        call: init,
+        functionName,
+        metaIdentifier: isFactory && id.type === 'Identifier' ? id : undefined,
+        storyIdentifier: findStoryIdentifier(id),
+      };
+    } else if (
+      meta?.metaIdentifier &&
+      init?.type === 'Identifier' &&
+      init.name === meta.metaIdentifier.name
+    ) {
+      meta.storyIdentifier ??= findStoryIdentifier(id);
+    }
+  }
+
+  return meta;
+}
+
+// The name of the function when the call is `defineMeta()` or `preview.meta()`
+function getMetaFunctionName(
+  call: ESTreeAST.CallExpression,
+  imports: MetaImports,
+  filename?: string
+): string | undefined {
+  const { callee } = call;
+
+  if (callee.type === 'Identifier') {
+    return callee.name === imports.defineMetaImport?.local.name ? callee.name : undefined;
+  }
+
+  if (
+    callee.type !== 'MemberExpression' ||
+    callee.computed ||
+    callee.object.type !== 'Identifier' ||
+    callee.property.type !== 'Identifier' ||
+    callee.property.name !== 'meta'
+  ) {
+    return undefined;
+  }
+
+  if (imports.previewNames.includes(callee.object.name)) {
+    return `${callee.object.name}.meta`;
+  }
+
+  // Like `CsfFile`, only a variable named `preview` shows that the file tries to use CSF factories.
+  // Other `.meta()` calls, such as Zod's, are not a meta.
+  if (callee.object.name === 'preview') {
+    throw new PreviewNotImportedError(filename);
+  }
+
+  return undefined;
+}
+
+function findStoryIdentifier(id: ESTreeAST.Pattern): ESTreeAST.Identifier | undefined {
+  if (id.type !== 'ObjectPattern') {
+    return undefined;
+  }
+
+  for (const property of id.properties) {
+    if (
+      property.type === 'Property' &&
+      property.key.type === 'Identifier' &&
+      property.key.name === 'Story' &&
+      property.value.type === 'Identifier'
+    ) {
+      return property.value;
+    }
+  }
+
+  return undefined;
+}

From 6dec302477e745c151fa537b3b5e99ab8f15da36 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Fri, 9 Oct 2026 09:39:30 +0200
Subject: [PATCH 014/326] test: the test cases for preview.meta() in Svelte CSF
 files

The cases that show what the previous commits do, from source in to output
out:

- Compiler: the full compiled module for both meta shapes
  (`compiler/post-transform/index.test.ts`).
- Vitest transform: core's `vitestTransform` on the compiled module, as in
  addon-vitest (`compiler/vitest-transform.test.ts`).
- Indexer and parsers: index entries for each import shape, and the new errors.
- Runtime: factory `.stories.svelte` files rendered with `Story.run()` and
  `composeStories` (`__test__/svelte-csf-factories/`). The renderer's Vitest
  config loads the `svelteCsf()` plugin for this.
- Types: `type-checks.svelte`, which `svelte-check` checks, and
  `Args<typeof Story>`.
- Core: `CsfFile` reads factory stories behind export specifiers.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 code/core/src/csf-tools/CsfFile.test.ts       |  27 +++
 .../button.stories.svelte                     |  34 +++
 .../interactions.stories.svelte               |  49 ++++
 .../__test__/svelte-csf-factories/preview.ts  |   3 +
 .../svelte-csf-factories.test.ts              |  35 +++
 .../templating.stories.svelte                 |  67 ++++++
 .../svelte-csf-factories/type-checks.svelte   | 101 +++++++++
 .../renderers/svelte/src/public-types.test.ts |  15 ++
 .../compiler/post-transform/index.test.ts     | 209 ++++++++++++++++++
 .../compiler/vitest-transform.test.ts         |  96 ++++++++
 .../src/svelte-csf/indexer/parser.test.ts     | 100 +++++++++
 .../parser/extract/compiled/nodes.test.ts     |  34 ++-
 .../extract/svelte/module-nodes.test.ts       | 186 +++++++++++++++-
 code/renderers/svelte/vitest.config.ts        |   2 +
 14 files changed, 944 insertions(+), 14 deletions(-)
 create mode 100644 code/renderers/svelte/src/__test__/svelte-csf-factories/button.stories.svelte
 create mode 100644 code/renderers/svelte/src/__test__/svelte-csf-factories/interactions.stories.svelte
 create mode 100644 code/renderers/svelte/src/__test__/svelte-csf-factories/preview.ts
 create mode 100644 code/renderers/svelte/src/__test__/svelte-csf-factories/svelte-csf-factories.test.ts
 create mode 100644 code/renderers/svelte/src/__test__/svelte-csf-factories/templating.stories.svelte
 create mode 100644 code/renderers/svelte/src/__test__/svelte-csf-factories/type-checks.svelte
 create mode 100644 code/renderers/svelte/src/svelte-csf/compiler/vitest-transform.test.ts

diff --git a/code/core/src/csf-tools/CsfFile.test.ts b/code/core/src/csf-tools/CsfFile.test.ts
index 00bb0fd35d4f..144af124b5a9 100644
--- a/code/core/src/csf-tools/CsfFile.test.ts
+++ b/code/core/src/csf-tools/CsfFile.test.ts
@@ -3093,6 +3093,33 @@ describe('CsfFile', () => {
         expect(Object.keys(parsed._stories)).toEqual(['A']);
       });
 
+      it('reads factory stories exported with export specifiers', () => {
+        const parsed = loadCsf(
+          dedent`
+            import { config } from '#.storybook/preview'
+            const meta = config.meta({ component: 'foo' });
+            const $__Button = meta.story({ tags: ['a'] });
+            const $__Typed = meta.story({ tags: ['b'] }) satisfies ReturnType<typeof meta.story>;
+            const someHelper = () => {};
+            export { $__Button as Button, $__Typed as Typed, someHelper };
+            export { Other } from './Other.stories';
+          `,
+          { makeTitle }
+        ).parse();
+
+        expect(
+          parsed.stories.map(({ name, tags, __stats }) => ({
+            name,
+            tags,
+            factory: __stats.factory,
+          }))
+        ).toEqual([
+          { name: 'Button', tags: ['a'], factory: true },
+          { name: 'Typed', tags: ['b'], factory: true },
+          { name: 'Other', tags: undefined, factory: undefined },
+        ]);
+      });
+
       it('excludeStories still works with factories', () => {
         const parsed = loadCsf(
           dedent`
diff --git a/code/renderers/svelte/src/__test__/svelte-csf-factories/button.stories.svelte b/code/renderers/svelte/src/__test__/svelte-csf-factories/button.stories.svelte
new file mode 100644
index 000000000000..a4339f7f7be6
--- /dev/null
+++ b/code/renderers/svelte/src/__test__/svelte-csf-factories/button.stories.svelte
@@ -0,0 +1,34 @@
+<script module lang="ts">
+  import { expect } from 'storybook/test';
+
+  import preview from './preview.ts';
+  import Button from '../../../template/stories/svelte-csf/button.svelte';
+
+  const meta = preview.meta({ component: Button, args: { size: 'large' } });
+  const { Story } = meta;
+</script>
+
+<script lang="ts">
+  // A local `meta` must not clash with the meta of the stories file.
+  let local = $state({ meta: 'local' });
+</script>
+
+<Story
+  name="Primary"
+  args={{ primary: true }}
+  play={async ({ canvas }) => {
+    await expect(canvas.getByRole('button')).toHaveClass('primary', 'large');
+  }}
+>
+  Primary
+</Story>
+
+<!-- The export name is the same as the name of the imported component. -->
+<Story
+  name="Button"
+  play={async ({ canvas }) => {
+    await expect(canvas.getByRole('button')).toHaveTextContent('local');
+  }}
+>
+  {local.meta}
+</Story>
diff --git a/code/renderers/svelte/src/__test__/svelte-csf-factories/interactions.stories.svelte b/code/renderers/svelte/src/__test__/svelte-csf-factories/interactions.stories.svelte
new file mode 100644
index 000000000000..8cb0af3659b5
--- /dev/null
+++ b/code/renderers/svelte/src/__test__/svelte-csf-factories/interactions.stories.svelte
@@ -0,0 +1,49 @@
+<script module lang="ts">
+  import { expect, userEvent } from 'storybook/test';
+  import { tick } from 'svelte';
+
+  import preview from './preview.ts';
+  import Interactions from '../../../template/stories/svelte-csf/interactions.svelte';
+
+  const { Story } = preview.meta({ component: Interactions });
+</script>
+
+<script lang="ts">
+  let i = $state(0);
+</script>
+
+<Story
+  name="Default"
+  play={async ({ canvas }) => {
+    const count = await canvas.findByTestId('count');
+
+    await userEvent.click(await canvas.findByText('Increment'));
+    await expect(count).toHaveTextContent('You clicked 1 times');
+  }}
+/>
+
+<Story
+  name="Capturing scope"
+  asChild
+  play={async ({ canvas }) => {
+    const p = canvas.getByTestId('count');
+    await expect(p).toHaveTextContent('0');
+
+    i++;
+    await tick();
+    await expect(p).toHaveTextContent('1');
+  }}
+>
+  <p data-testid="count">{i}</p>
+</Story>
+
+<Story
+  name="Story context"
+  play={async ({ canvas, name }) => {
+    await expect(canvas.getByTestId('name')).toHaveTextContent(name);
+  }}
+>
+  {#snippet template(_args, context)}
+    <p data-testid="name">{context.name}</p>
+  {/snippet}
+</Story>
diff --git a/code/renderers/svelte/src/__test__/svelte-csf-factories/preview.ts b/code/renderers/svelte/src/__test__/svelte-csf-factories/preview.ts
new file mode 100644
index 000000000000..70c66dacd275
--- /dev/null
+++ b/code/renderers/svelte/src/__test__/svelte-csf-factories/preview.ts
@@ -0,0 +1,3 @@
+import { __definePreview } from '../../preview.ts';
+
+export default __definePreview({ addons: [] });
diff --git a/code/renderers/svelte/src/__test__/svelte-csf-factories/svelte-csf-factories.test.ts b/code/renderers/svelte/src/__test__/svelte-csf-factories/svelte-csf-factories.test.ts
new file mode 100644
index 000000000000..299c48aaccb2
--- /dev/null
+++ b/code/renderers/svelte/src/__test__/svelte-csf-factories/svelte-csf-factories.test.ts
@@ -0,0 +1,35 @@
+import { cleanup } from '@testing-library/svelte';
+import { afterEach, describe, expect, it } from 'vitest';
+
+import { isStory } from 'storybook/internal/csf';
+
+import { composeStories } from '../../portable-stories.ts';
+import * as ButtonStories from './button.stories.svelte';
+import * as InteractionsStories from './interactions.stories.svelte';
+import * as TemplatingStories from './templating.stories.svelte';
+
+afterEach(() => {
+  cleanup();
+});
+
+const files = { ButtonStories, InteractionsStories, TemplatingStories };
+
+describe.each(Object.entries(files))('%s', (_name, file) => {
+  const stories = Object.entries(file).filter(([, story]) => isStory(story));
+
+  it('has no default export', () => {
+    expect(file).not.toHaveProperty('default');
+  });
+
+  it.each(stories)('renders %s and passes its play function', async (_exportName, Story) => {
+    await Story.run();
+  });
+});
+
+it('composes the stories with composeStories', async () => {
+  // The types of composeStories need a default export, which a CSF factories file doesn't have.
+  const { Primary } = composeStories(ButtonStories as never) as Record<string, any>;
+
+  expect(Primary.args).toEqual({ size: 'large', primary: true });
+  await Primary.run();
+});
diff --git a/code/renderers/svelte/src/__test__/svelte-csf-factories/templating.stories.svelte b/code/renderers/svelte/src/__test__/svelte-csf-factories/templating.stories.svelte
new file mode 100644
index 000000000000..8a19bc21019f
--- /dev/null
+++ b/code/renderers/svelte/src/__test__/svelte-csf-factories/templating.stories.svelte
@@ -0,0 +1,67 @@
+<script module lang="ts">
+  import { expect } from 'storybook/test';
+
+  import preview from './preview.ts';
+
+  /** Each story sets its template in a different way. */
+  const { Story } = preview.meta({
+    tags: ['autodocs'],
+    argTypes: {
+      text: { control: 'text' },
+    },
+    render: defaultTemplate,
+  });
+</script>
+
+{#snippet defaultTemplate(args: { text: string })}
+  <h2 data-testid="heading">Default template</h2>
+  <p>{args?.text}</p>
+{/snippet}
+
+<Story
+  name="Static template"
+  asChild
+  play={async ({ canvas }) => {
+    await expect(await canvas.findByTestId('heading')).toHaveTextContent('Static template');
+  }}
+>
+  <h2 data-testid="heading">Static template</h2>
+</Story>
+
+<Story
+  name="Template snippet"
+  args={{ text: 'This story uses a template snippet' }}
+  play={async ({ args, canvas }) => {
+    await expect(await canvas.findByTestId('heading')).toHaveTextContent('Template snippet');
+    await expect(await canvas.findByText(args.text)).toBeInTheDocument();
+  }}
+>
+  {#snippet template(args)}
+    <h2 data-testid="heading">Template snippet</h2>
+    <p>{args?.text}</p>
+  {/snippet}
+</Story>
+
+{#snippet sharedTemplate(args: { text: string })}
+  <h2 data-testid="heading">Shared template</h2>
+  <p>{args?.text}</p>
+{/snippet}
+
+<Story
+  name="Shared template"
+  template={sharedTemplate}
+  args={{ text: 'This story uses a shared snippet' }}
+  play={async ({ args, canvas }) => {
+    await expect(await canvas.findByTestId('heading')).toHaveTextContent('Shared template');
+    await expect(await canvas.findByText(args.text)).toBeInTheDocument();
+  }}
+/>
+
+<Story
+  name="Default template"
+  args={{ text: 'This story uses the render snippet of the meta' }}
+  play={async ({ args, canvas }) => {
+    await expect(await canvas.findByTestId('heading')).toHaveTextContent('Default template');
+    await expect(await canvas.findByText(args.text)).toBeInTheDocument();
+  }}
+/>
diff --git a/code/renderers/svelte/src/__test__/svelte-csf-factories/type-checks.svelte b/code/renderers/svelte/src/__test__/svelte-csf-factories/type-checks.svelte
new file mode 100644
index 000000000000..d71528e37960
--- /dev/null
+++ b/code/renderers/svelte/src/__test__/svelte-csf-factories/type-checks.svelte
@@ -0,0 +1,101 @@
+<script module lang="ts">
+  import { expectTypeOf } from 'vitest';
+
+  import type { Args } from '../../public-types.ts';
+
+  import preview from './preview.ts';
+  import Button from '../Button.svelte';
+  import Layout from '../Layout.svelte';
+
+  // svelte-check fails on each `@ts-expect-error` without an error. This isn't a stories file,
+  // because it has more than one meta.
+  const { Story } = preview.meta({ component: Button, args: { disabled: false } });
+  const { Story: LayoutStory } = preview.meta({ component: Layout });
+  const { Story: RenderStory } = preview.meta({ render: textTemplate });
+</script>
+
+{#snippet textTemplate(args: { text: string })}
+  <p>{args.text}</p>
+{/snippet}
+
+<Story name="Required args" args={{ label: 'Label' }} />
+
+{/* @ts-expect-error label is missing */ null}
+<Story name="Missing arg" />
+
+<Story
+  name="Wrong arg type"
+  args={{
+    // @ts-expect-error label must be a string
+    label: 1,
+  }}
+/>
+
+<Story name="As child" asChild>
+  <p>Static content</p>
+</Story>
+
+<Story name="Template without parameters">
+  {#snippet template()}
+    <p>Static content</p>
+  {/snippet}
+</Story>
+
+<Story name="Template args" args={{ label: 'Label' }}>
+  {#snippet template(args, context)}
+    {expectTypeOf(args.label).toEqualTypeOf<string>()}
+    {expectTypeOf(context.args.disabled).toEqualTypeOf<boolean>()}
+    <Button {...args} />
+  {/snippet}
+</Story>
+
+{/* @ts-expect-error label is missing */ null}
+<Story name="Template args missing">
+  {#snippet template(args)}
+    <Button {...args} />
+  {/snippet}
+</Story>
+
+{#snippet sharedTemplate(args: Args<typeof Story>)}
+  <Button {...args} />
+{/snippet}
+
+<Story name="Shared template" template={sharedTemplate} args={{ label: 'Label' }} />
+
+<Story
+  name="Play args"
+  args={{ label: 'Label' }}
+  play={async ({ args }) => {
+    expectTypeOf(args.label).toEqualTypeOf<string>();
+  }}
+/>
+
+<LayoutStory name="Children" args={{ title: 'Title' }}>
+  <p>Content</p>
+</LayoutStory>
+
+{/* @ts-expect-error children is missing */ null}
+<LayoutStory name="No children" args={{ title: 'Title' }} />
+
+<RenderStory name="Render args" args={{ text: 'Text' }} />
+
+{/* @ts-expect-error text is missing */ null}
+<RenderStory name="Render args missing" />
+
+<Story
+  name="Parameters"
+  args={{ label: 'Label' }}
+  parameters={{
+    // @ts-expect-error layout must be a known value
+    layout: 'nope',
+    backgrounds: {
+      // @ts-expect-error disable must be a boolean
+      disable: 'yes',
+    },
+  }}
+/>
+
+<Story exportName="ExportName" args={{ label: 'Label' }} />
+
+{/* @ts-expect-error name is missing */ null}
+<Story args={{ label: 'Label' }} />
diff --git a/code/renderers/svelte/src/public-types.test.ts b/code/renderers/svelte/src/public-types.test.ts
index a691015af91d..413c85638a70 100644
--- a/code/renderers/svelte/src/public-types.test.ts
+++ b/code/renderers/svelte/src/public-types.test.ts
@@ -22,6 +22,7 @@ import type {
   StoryContext,
   StoryObj,
 } from './public-types.ts';
+import { __definePreview } from './preview.ts';
 import { defineMeta } from './svelte-csf/index.ts';
 import type { SvelteRenderer } from './types.ts';
 
@@ -244,6 +245,20 @@ describe('Args', () => {
     expectTypeOf<SvelteArgs<typeof Story>>().toEqualTypeOf<ComponentProps<typeof Button>>();
   });
 
+  it('is the template args of a Svelte CSF factories story with its Story component', () => {
+    const { Story } = __definePreview({ addons: [] }).meta({
+      component: Button,
+      args: { disabled: false },
+    });
+    type TArgs = SvelteArgs<typeof Story>;
+
+    expectTypeOf<TArgs['label']>().toEqualTypeOf<string>();
+    expectTypeOf<TArgs['disabled']>().toEqualTypeOf<boolean>();
+    expectTypeOf<Snippet<[TArgs]>>().toExtend<
+      NonNullable<ComponentProps<typeof Story>['template']>
+    >();
+  });
+
   it('is never for a type argument that is not a Story component', () => {
     expectTypeOf<SvelteArgs<typeof Button>>().toBeNever();
     expectTypeOf<SvelteArgs<{ label: string }>>().toBeNever();
diff --git a/code/renderers/svelte/src/svelte-csf/compiler/post-transform/index.test.ts b/code/renderers/svelte/src/svelte-csf/compiler/post-transform/index.test.ts
index 5e8c053feb24..72e911de1605 100644
--- a/code/renderers/svelte/src/svelte-csf/compiler/post-transform/index.test.ts
+++ b/code/renderers/svelte/src/svelte-csf/compiler/post-transform/index.test.ts
@@ -331,3 +331,212 @@ describe(transformStoriesCode.name, () => {
     expect(output).toContain('__svelteCsf');
   });
 });
+
+describe('CSF factories', () => {
+  async function transform(originalCode: string) {
+    const filename = 'Button.stories.svelte';
+    const compiledCode = compile(originalCode, { filename, dev: true }).js.code;
+    const code = new MagicString(compiledCode);
+
+    await transformStoriesCode({
+      code,
+      nodes: {
+        svelte: await extractSvelteASTNodes({
+          ast: getSvelteAST({ code: originalCode, filename }),
+          filename,
+        }),
+        compiled: await extractCompiledASTNodes({ ast: parseAst(compiledCode), filename }),
+      },
+      filename,
+      originalCode,
+    });
+
+    return code.toString();
+  }
+
+  it('names the meta and creates the stories with meta.story()', async ({ expect }) => {
+    const output = await transform(dedent`
+      <script module>
+        import preview from '#.storybook/preview';
+        import Button from './Button.svelte';
+
+        /** Description of the component */
+        const { Story } = preview.meta({ component: Button, args: { primary: true } });
+      </script>
+
+      <!-- Description of the story -->
+      <Story name="Primary" args={{ label: 'Primary' }} tags={['autodocs']} />
+
+      <Story name="Button">
+        {#snippet template(args)}
+          <Button {...args} />
+        {/snippet}
+      </Story>
+    `);
+
+    expect(output).toMatchInlineSnapshot(`
+      "import 'svelte/internal/disclose-version';
+      import 'svelte/internal/flags/legacy';
+
+      Button_stories[$.FILENAME] = 'Button.stories.svelte';
+
+      import preview from '#.storybook/preview';
+      import Button from './Button.svelte';
+      import * as $ from 'svelte/internal/client';
+
+      const $__meta = preview.meta({
+      	component: Button,
+      	args: { primary: true },
+      	parameters: {
+      		docs: {
+      			description: { component: "Description of the component" }
+      		}
+      	}
+      });
+      const { Story } = $__meta;
+      var root = $.add_locations($.from_html(\`<!> <!>\`, 1), Button_stories[$.FILENAME], []);
+
+      function Button_stories($$anchor, $$props) {
+      	$.check_target(new.target);
+      	$.push($$props, false, Button_stories);
+
+      	var $$exports = { ...$.legacy_api() };
+
+      	$.init();
+
+      	var fragment = root();
+      	var node = $.first_child(fragment);
+
+      	$.add_svelte_meta(
+      		() => Story(node, {
+      			name: 'Primary',
+      			args: { label: 'Primary' },
+      			tags: ['autodocs'],
+      			parameters: {
+      				docs: {
+      					description: { story: "Description of the story" }
+      				},
+      				__svelteCsf: { rawCode: "<Button {...args} />" }
+      			}
+      		}),
+      		'component',
+      		Button_stories,
+      		10,
+      		0,
+      		{ componentTag: 'Story' }
+      	);
+
+      	var node_1 = $.sibling(node, 2);
+
+      	{
+      		const template = $.wrap_snippet(Button_stories, function ($$anchor, args = $.noop) {
+      			$.validate_snippet_args(...arguments);
+      			$.add_svelte_meta(() => Button($$anchor, $.spread_props(args)), 'component', Button_stories, 14, 4, { componentTag: 'Button' });
+      		});
+
+      		$.add_svelte_meta(
+      			() => Story(node_1, {
+      				name: 'Button',
+      				template,
+      				$$slots: { template: true },
+      				parameters: {
+      					__svelteCsf: { rawCode: "<Button {...args} />" }
+      				}
+      			}),
+      			'component',
+      			Button_stories,
+      			12,
+      			0,
+      			{ componentTag: 'Story' }
+      		);
+      	}
+
+      	$.append($$anchor, fragment);
+      	return $.pop($$exports);
+      }
+      import { createRuntimeStories } from "@storybook/svelte/internal/svelte-csf/create-runtime-stories";
+
+      const $__stories = createRuntimeStories(Button_stories, $__meta.input);
+
+      export const __namedExportsOrder = ["Primary", "Button"];
+
+      const $__Primary = $__meta.story({
+      	...$__stories["Primary"],
+      	tags: ['autodocs', "svelte-csf-v5"]
+      });
+
+      const $__Button = $__meta.story({
+      	...$__stories["Button"],
+      	tags: ["svelte-csf-v5"]
+      });
+
+      export { $__Primary as Primary, $__Button as Button };"
+    `);
+  });
+
+  it('uses the meta variable of the file', async ({ expect }) => {
+    const output = await transform(dedent`
+      <script module>
+        import preview from '#.storybook/preview';
+        import Button from './Button.svelte';
+
+        const meta = preview.meta({ component: Button });
+        const { Story } = meta;
+      </script>
+
+      <Story name="Primary" args={{ label: 'Primary' }} />
+    `);
+
+    expect(output).toMatchInlineSnapshot(`
+      "import 'svelte/internal/disclose-version';
+      import 'svelte/internal/flags/legacy';
+
+      Button_stories[$.FILENAME] = 'Button.stories.svelte';
+
+      import preview from '#.storybook/preview';
+      import Button from './Button.svelte';
+      import * as $ from 'svelte/internal/client';
+
+      const meta = preview.meta({ component: Button });
+      const { Story } = meta;
+
+      function Button_stories($$anchor, $$props) {
+      	$.check_target(new.target);
+      	$.push($$props, false, Button_stories);
+
+      	var $$exports = { ...$.legacy_api() };
+
+      	$.init();
+
+      	$.add_svelte_meta(
+      		() => Story($$anchor, {
+      			name: 'Primary',
+      			args: { label: 'Primary' },
+      			parameters: {
+      				__svelteCsf: { rawCode: "<Button {...args} />" }
+      			}
+      		}),
+      		'component',
+      		Button_stories,
+      		9,
+      		0,
+      		{ componentTag: 'Story' }
+      	);
+
+      	return $.pop($$exports);
+      }
+      import { createRuntimeStories } from "@storybook/svelte/internal/svelte-csf/create-runtime-stories";
+
+      const $__stories = createRuntimeStories(Button_stories, meta.input);
+
+      export const __namedExportsOrder = ["Primary"];
+
+      const $__Primary = meta.story({
+      	...$__stories["Primary"],
+      	tags: ["svelte-csf-v5"]
+      });
+
+      export { $__Primary as Primary };"
+    `);
+  });
+});
diff --git a/code/renderers/svelte/src/svelte-csf/compiler/vitest-transform.test.ts b/code/renderers/svelte/src/svelte-csf/compiler/vitest-transform.test.ts
new file mode 100644
index 000000000000..01bf77ebd5a9
--- /dev/null
+++ b/code/renderers/svelte/src/svelte-csf/compiler/vitest-transform.test.ts
@@ -0,0 +1,96 @@
+import { getStoryTitle } from 'storybook/internal/common';
+import { vitestTransform } from 'storybook/internal/csf-tools';
+
+import MagicString from 'magic-string';
+import { parseAst } from 'rollup/parseAst';
+import { compile } from 'svelte/compiler';
+import { dedent } from 'ts-dedent';
+import { beforeEach, describe, it, vi } from 'vitest';
+
+import { transformStoriesCode } from './post-transform/index.ts';
+import { getSvelteAST } from '../parser/ast.ts';
+import { extractCompiledASTNodes } from '../parser/extract/compiled/nodes.ts';
+import { extractSvelteASTNodes } from '../parser/extract/svelte/nodes.ts';
+
+vi.mock('storybook/internal/common', { spy: true });
+
+beforeEach(() => {
+  vi.mocked(getStoryTitle).mockReturnValue('Button');
+});
+
+const filename = 'src/Button.stories.svelte';
+
+// The path of a `.stories.svelte` file in addon-vitest: the Svelte compiler, then Svelte CSF, then
+// the Vitest transform of core.
+async function transform(originalCode: string) {
+  const compiledCode = compile(originalCode, { filename, dev: true }).js.code;
+  const code = new MagicString(compiledCode);
+
+  await transformStoriesCode({
+    code,
+    nodes: {
+      svelte: await extractSvelteASTNodes({
+        ast: getSvelteAST({ code: originalCode, filename }),
+        filename,
+      }),
+      compiled: await extractCompiledASTNodes({ ast: parseAst(compiledCode), filename }),
+    },
+    filename,
+    originalCode,
+  });
+
+  const transformed = await vitestTransform({
+    code: code.toString(),
+    fileName: filename,
+    configDir: '.storybook',
+    stories: [],
+    tagsFilter: { include: ['test'], exclude: [], skip: [] },
+    previewLevelTags: [],
+  });
+
+  return typeof transformed === 'string' ? transformed : transformed.code;
+}
+
+describe('vitestTransform of a CSF factories stories file', () => {
+  it('tests the stories with the meta of the file', async ({ expect }) => {
+    const output = await transform(dedent`
+      <script module>
+        import preview from '#.storybook/preview';
+        import Button from './Button.svelte';
+
+        const { Story } = preview.meta({ component: Button });
+      </script>
+
+      <Story name="Primary" args={{ label: 'Primary' }} />
+
+      <Story name="Button" args={{ label: 'Button' }} />
+
+      <Story name="Not tested" args={{ label: 'Not tested' }} tags={['!test']} />
+    `);
+
+    expect(output).toContain('title: "Button"');
+    expect(output.slice(output.indexOf('const _isRunningFromThisFile'))).toMatchInlineSnapshot(`
+      "const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
+      if (_isRunningFromThisFile) {
+        _test("Primary", _testStory({
+          exportName: "Primary",
+          story: $__Primary,
+          meta: $__meta,
+          skipTags: [],
+          storyId: "button--primary",
+          componentPath: "./Button.svelte",
+          componentName: "Button"
+        }));
+        _test("Button", _testStory({
+          exportName: "Button",
+          story: $__Button,
+          meta: $__meta,
+          skipTags: [],
+          storyId: "button--button",
+          componentPath: "./Button.svelte",
+          componentName: "Button"
+        }));
+      }"
+    `);
+  });
+});
diff --git a/code/renderers/svelte/src/svelte-csf/indexer/parser.test.ts b/code/renderers/svelte/src/svelte-csf/indexer/parser.test.ts
index ba9b10a42b85..1f05e94e96e5 100644
--- a/code/renderers/svelte/src/svelte-csf/indexer/parser.test.ts
+++ b/code/renderers/svelte/src/svelte-csf/indexer/parser.test.ts
@@ -175,4 +175,104 @@ describe('parseForIndexer', () => {
       );
     });
   });
+  describe('CSF factories', () => {
+    const writeFactoryStoriesFile = (moduleScript: string) =>
+      writeStoriesFile(`<script module lang="ts">
+          ${moduleScript}
+        </script>
+
+        <Story name="Primary" tags={['autodocs']} />
+
+        <Story exportName="Secondary" play={async () => {}} />
+        `);
+
+    it.for([
+      [
+        'preview.meta() from #.storybook/preview',
+        `import preview from '#.storybook/preview';
+        const { Story } = preview.meta({ title: 'Example', tags: ['meta-tag'] });`,
+      ],
+      [
+        'preview.meta() from a relative path',
+        `import preview from '../.storybook/preview';
+        const { Story } = preview.meta({ title: 'Example', tags: ['meta-tag'] });`,
+      ],
+      [
+        'a renamed preview import',
+        `import config from '../.storybook/preview.ts';
+        const { Story } = config.meta({ title: 'Example', tags: ['meta-tag'] });`,
+      ],
+      [
+        'a meta variable',
+        `import preview from '#.storybook/preview';
+        const meta = preview.meta({ title: 'Example', tags: ['meta-tag'] });
+        const { Story } = meta;`,
+      ],
+    ])('indexes %s', async ([, moduleScript], { expect }) => {
+      const file = await writeFactoryStoriesFile(moduleScript);
+
+      expect(await parseForIndexer(file)).toMatchInlineSnapshot(`
+        {
+          "meta": {
+            "tags": [
+              "meta-tag",
+            ],
+            "title": "Example",
+          },
+          "stories": [
+            {
+              "exportName": "Primary",
+              "name": "Primary",
+              "tags": [
+                "autodocs",
+              ],
+            },
+            {
+              "exportName": "Secondary",
+              "name": undefined,
+              "tags": [
+                "play-fn",
+              ],
+            },
+          ],
+        }
+      `);
+    });
+
+    it('fails when a file calls defineMeta() and preview.meta()', async ({ expect }) => {
+      const file = await writeFactoryStoriesFile(`
+        import { defineMeta } from '@storybook/svelte';
+        import preview from '#.storybook/preview';
+        const { Story } = defineMeta({});
+        const { Story: FactoryStory } = preview.meta({});
+      `);
+
+      await expect(parseForIndexer(file)).rejects.toThrow(
+        'SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0010'
+      );
+    });
+
+    it('fails when a file calls preview.meta() twice', async ({ expect }) => {
+      const file = await writeFactoryStoriesFile(`
+        import preview from '#.storybook/preview';
+        const { Story: OtherStory } = preview.meta({});
+        const { Story } = preview.meta({});
+      `);
+
+      await expect(parseForIndexer(file)).rejects.toThrow(
+        'SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0012'
+      );
+    });
+
+    it('fails when preview is not imported from a preview file', async ({ expect }) => {
+      const file = await writeFactoryStoriesFile(`
+        import preview from '../storybook-config';
+        const { Story } = preview.meta({});
+      `);
+
+      await expect(parseForIndexer(file)).rejects.toThrow(
+        'SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0011'
+      );
+    });
+  });
 });
diff --git a/code/renderers/svelte/src/svelte-csf/parser/extract/compiled/nodes.test.ts b/code/renderers/svelte/src/svelte-csf/parser/extract/compiled/nodes.test.ts
index a1f77ba362a1..b6a8652c2b2a 100644
--- a/code/renderers/svelte/src/svelte-csf/parser/extract/compiled/nodes.test.ts
+++ b/code/renderers/svelte/src/svelte-csf/parser/extract/compiled/nodes.test.ts
@@ -30,7 +30,9 @@ describe(extractCompiledASTNodes.name, () => {
 
       const nodes = await extractCompiledASTNodes({ ast });
 
-      expect(nodes.defineMetaImport.local.name).toBe('defineMeta');
+      expect(nodes.defineMetaVariableDeclaration.declarations[0].init).toMatchObject({
+        callee: { name: 'defineMeta' },
+      });
     }
   );
 
@@ -45,7 +47,9 @@ describe(extractCompiledASTNodes.name, () => {
 
     const nodes = await extractCompiledASTNodes({ ast });
 
-    expect(nodes.defineMetaImport.local.name).toBe('defineMeta');
+    expect(nodes.defineMetaVariableDeclaration.declarations[0].init).toMatchObject({
+      callee: { name: 'defineMeta' },
+    });
   });
 
   it('fails with only a namespace import of @storybook/svelte', async ({ expect }) => {
@@ -67,4 +71,30 @@ describe(extractCompiledASTNodes.name, () => {
       ]
     `);
   });
+  it('finds preview.meta()', async ({ expect }) => {
+    const ast = getCompiledAST(`
+      import preview from '#.storybook/preview';
+      const { Story } = preview.meta({});
+    `);
+
+    const nodes = await extractCompiledASTNodes({ ast });
+
+    expect(nodes.isFactory).toBe(true);
+    expect(nodes.metaIdentifier).toBeUndefined();
+    expect(nodes.storyIdentifier.name).toBe('Story');
+  });
+
+  it('finds the meta variable of preview.meta()', async ({ expect }) => {
+    const ast = getCompiledAST(`
+      import config from '../.storybook/preview.ts';
+      const meta = config.meta({});
+      const { Story: S } = meta;
+    `);
+
+    const nodes = await extractCompiledASTNodes({ ast });
+
+    expect(nodes.isFactory).toBe(true);
+    expect(nodes.metaIdentifier?.name).toBe('meta');
+    expect(nodes.storyIdentifier.name).toBe('S');
+  });
 });
diff --git a/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/module-nodes.test.ts b/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/module-nodes.test.ts
index 98b5c0d17bb4..35264d6bd408 100644
--- a/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/module-nodes.test.ts
+++ b/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/module-nodes.test.ts
@@ -16,7 +16,7 @@ describe(extractModuleNodes.name, () => {
       [SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0001 (MissingModuleTagError): The file '<path not specified>'
       does not have a module context (<script module> ... </script>).
 
-      defineMeta(...) should be called inside a module script tag, like so:
+      defineMeta(...) or preview.meta(...) should be called inside a module script tag, like so:
 
       <script module>
         import { defineMeta } from "@storybook/svelte-vite";
@@ -25,6 +25,7 @@ describe(extractModuleNodes.name, () => {
       </script>
 
       In a SvelteKit project, import defineMeta from "@storybook/sveltekit".
+      With CSF factories, call preview.meta() in place of defineMeta(), with preview imported from '#.storybook/preview'.
 
       More info: https://github.com/storybookjs/storybook/blob/v<version>/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0001
       ]
@@ -38,7 +39,7 @@ describe(extractModuleNodes.name, () => {
 
     await expect(extractModuleNodes({ module })).rejects.toThrowErrorMatchingInlineSnapshot(`
       [SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0003 (MissingDefineMetaImportError): The file '<path not specified>'
-      does not import defineMeta from "@storybook/svelte-vite" or "@storybook/sveltekit" inside the module context.
+      does not import defineMeta from "@storybook/svelte-vite" or "@storybook/sveltekit", or the preview from .storybook/preview, inside the module context.
 
       Make sure to import defineMeta from the package and use it inside the module context like so:
 
@@ -49,6 +50,7 @@ describe(extractModuleNodes.name, () => {
       </script>
 
       In a SvelteKit project, import defineMeta from "@storybook/sveltekit".
+      With CSF factories, call preview.meta() in place of defineMeta(), with preview imported from '#.storybook/preview'.
 
       More info: https://github.com/storybookjs/storybook/blob/v<version>/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0003
       ]
@@ -66,7 +68,7 @@ describe(extractModuleNodes.name, () => {
 
     await expect(extractModuleNodes({ module })).rejects.toThrowErrorMatchingInlineSnapshot(`
       [SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0004 (MissingDefineMetaVariableDeclarationError): The file '<path not specified>'
-      does not store the result of calling defineMeta(). While defineMeta() might have been called,
+      does not store the result of calling defineMeta() or preview.meta(). While it might have been called,
       it's return value needs to be stored and destructured for the parsing to succeed, eg.:
 
       <script module>
@@ -76,6 +78,7 @@ describe(extractModuleNodes.name, () => {
       </script>
 
       In a SvelteKit project, import defineMeta from "@storybook/sveltekit".
+      With CSF factories, call preview.meta() in place of defineMeta(), with preview imported from '#.storybook/preview'.
 
       More info: https://github.com/storybookjs/storybook/blob/v<version>/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0004
       ]
@@ -93,7 +96,7 @@ describe(extractModuleNodes.name, () => {
 
     await expect(extractModuleNodes({ module })).rejects.toThrowErrorMatchingInlineSnapshot(`
       [SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0004 (MissingDefineMetaVariableDeclarationError): The file '<path not specified>'
-      does not store the result of calling defineMeta(). While defineMeta() might have been called,
+      does not store the result of calling defineMeta() or preview.meta(). While it might have been called,
       it's return value needs to be stored and destructured for the parsing to succeed, eg.:
 
       <script module>
@@ -103,6 +106,7 @@ describe(extractModuleNodes.name, () => {
       </script>
 
       In a SvelteKit project, import defineMeta from "@storybook/sveltekit".
+      With CSF factories, call preview.meta() in place of defineMeta(), with preview imported from '#.storybook/preview'.
 
       More info: https://github.com/storybookjs/storybook/blob/v<version>/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0004
       ]
@@ -146,9 +150,9 @@ describe(extractModuleNodes.name, () => {
 
     const nodes = await extractModuleNodes({ module });
 
-    expect(nodes.defineMetaImport).toBeDefined();
-    expect(nodes.defineMetaImport.imported.name).toBe('defineMeta');
-    expect(nodes.defineMetaVariableDeclaration).toBeDefined();
+    expect(nodes.defineMetaVariableDeclaration.declarations[0].init).toMatchObject({
+      callee: { name: 'defineMeta' },
+    });
     expect(nodes.storyIdentifier).toBeDefined();
     expect(nodes.storyIdentifier.name).toBe('Story');
   });
@@ -165,7 +169,9 @@ describe(extractModuleNodes.name, () => {
 
     const nodes = await extractModuleNodes({ module });
 
-    expect(nodes.defineMetaImport.local.name).toBe('dm');
+    expect(nodes.defineMetaVariableDeclaration.declarations[0].init).toMatchObject({
+      callee: { name: 'dm' },
+    });
     expect(nodes.defineMetaVariableDeclaration).toBeDefined();
     expect(nodes.storyIdentifier.name).toBe('S');
   });
@@ -184,7 +190,9 @@ describe(extractModuleNodes.name, () => {
 
       const nodes = await extractModuleNodes({ module });
 
-      expect(nodes.defineMetaImport.local.name).toBe('defineMeta');
+      expect(nodes.defineMetaVariableDeclaration.declarations[0].init).toMatchObject({
+        callee: { name: 'defineMeta' },
+      });
     }
   );
 
@@ -202,7 +210,9 @@ describe(extractModuleNodes.name, () => {
 
       const nodes = await extractModuleNodes({ module });
 
-      expect(nodes.defineMetaImport.local.name).toBe('defineMeta');
+      expect(nodes.defineMetaVariableDeclaration.declarations[0].init).toMatchObject({
+        callee: { name: 'defineMeta' },
+      });
     });
 
     it('ignores other named imports', async ({ expect }) => {
@@ -218,7 +228,9 @@ describe(extractModuleNodes.name, () => {
 
       const nodes = await extractModuleNodes({ module });
 
-      expect(nodes.defineMetaImport.local.name).toBe('defineMeta');
+      expect(nodes.defineMetaVariableDeclaration.declarations[0].init).toMatchObject({
+        callee: { name: 'defineMeta' },
+      });
     });
 
     it('allows a namespace import next to a named defineMeta import', async ({ expect }) => {
@@ -234,7 +246,9 @@ describe(extractModuleNodes.name, () => {
 
       const nodes = await extractModuleNodes({ module });
 
-      expect(nodes.defineMetaImport.local.name).toBe('defineMeta');
+      expect(nodes.defineMetaVariableDeclaration.declarations[0].init).toMatchObject({
+        callee: { name: 'defineMeta' },
+      });
     });
 
     it('fails with only a namespace import', async ({ expect }) => {
@@ -261,4 +275,152 @@ describe(extractModuleNodes.name, () => {
       `);
     });
   });
+  describe('CSF factories', () => {
+    it('extracts the nodes of preview.meta()', async ({ expect }) => {
+      const { module } = getSvelteAST({
+        code: `
+          <script module>
+            import preview from '#.storybook/preview';
+            const { Story } = preview.meta({});
+          </script>
+        `,
+      });
+
+      const nodes = await extractModuleNodes({ module });
+
+      expect(nodes.isFactory).toBe(true);
+      expect(nodes.metaIdentifier).toBeUndefined();
+      expect(nodes.storyIdentifier.name).toBe('Story');
+    });
+
+    it('extracts the nodes of a meta variable', async ({ expect }) => {
+      const { module } = getSvelteAST({
+        code: `
+          <script module>
+            import preview from '#.storybook/preview';
+            const meta = preview.meta({});
+            const { Story: S } = meta;
+          </script>
+        `,
+      });
+
+      const nodes = await extractModuleNodes({ module });
+
+      expect(nodes.isFactory).toBe(true);
+      expect(nodes.metaIdentifier?.name).toBe('meta');
+      expect(nodes.storyIdentifier.name).toBe('S');
+    });
+
+    it('fails when Story is not destructured from the meta', async ({ expect }) => {
+      const { module } = getSvelteAST({
+        code: `
+          <script module>
+            import preview from '#.storybook/preview';
+            const meta = preview.meta({});
+          </script>
+        `,
+      });
+
+      await expect(extractModuleNodes({ module })).rejects.toThrowErrorMatchingInlineSnapshot(`
+        [SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0005 (NoStoryComponentDestructuredError): The file '<path not specified>'
+        does not destructure the Story component from the 'preview.meta({ ... })' function call.
+        eg.:
+
+        <script module>
+          import { defineMeta } from "@storybook/svelte-vite";
+          
+          const { Story } = defineMeta({});
+        </script>
+
+        In a SvelteKit project, import defineMeta from "@storybook/sveltekit".
+        With CSF factories, call preview.meta() in place of defineMeta(), with preview imported from '#.storybook/preview'.
+
+        More info: https://github.com/storybookjs/storybook/blob/v<version>/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0005
+        ]
+      `);
+    });
+
+    it('fails when a file calls defineMeta() and preview.meta()', async ({ expect }) => {
+      const { module } = getSvelteAST({
+        code: `
+          <script module>
+            import { defineMeta } from '@storybook/svelte';
+            import preview from '#.storybook/preview';
+            const { Story } = defineMeta({});
+            const { Story: FactoryStory } = preview.meta({});
+          </script>
+        `,
+      });
+
+      await expect(extractModuleNodes({ module })).rejects.toThrowErrorMatchingInlineSnapshot(`
+        [SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0010 (MixedMetaError): The file '<path not specified>'
+        calls both defineMeta() and preview.meta(). A stories file can only have one meta.
+        Use preview.meta() for CSF factories, or defineMeta() otherwise.
+
+        More info: https://github.com/storybookjs/storybook/blob/v<version>/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0010
+        ]
+      `);
+    });
+
+    it('fails when a file calls preview.meta() twice', async ({ expect }) => {
+      const { module } = getSvelteAST({
+        code: `
+          <script module>
+            import preview from '#.storybook/preview';
+            const { Story } = preview.meta({});
+            const meta = preview.meta({});
+            const { Story: OtherStory } = meta;
+          </script>
+        `,
+      });
+
+      await expect(extractModuleNodes({ module })).rejects.toThrow(
+        'SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0012'
+      );
+    });
+
+    it('fails when preview is not imported from a preview file', async ({ expect }) => {
+      const { module } = getSvelteAST({
+        code: `
+          <script module>
+            import preview from '../storybook-config';
+            const { Story } = preview.meta({});
+          </script>
+        `,
+      });
+
+      await expect(extractModuleNodes({ module })).rejects.toThrowErrorMatchingInlineSnapshot(`
+        [SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0011 (PreviewNotImportedError): The file '<path not specified>'
+        calls preview.meta(), but it doesn't import preview from the preview file of Storybook. Import it like so:
+
+        <script module>
+          import preview from '#.storybook/preview';
+
+          const { Story } = preview.meta({});
+        </script>
+
+        The import path must end with '/preview', with or without a file extension.
+
+        More info: https://github.com/storybookjs/storybook/blob/v<version>/code/renderers/svelte/src/svelte-csf/ERRORS.md#SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0011
+        ]
+      `);
+    });
+
+    it('ignores a .meta() call on another object', async ({ expect }) => {
+      const { module } = getSvelteAST({
+        code: `
+          <script module>
+            import { z } from 'zod';
+            import preview from '#.storybook/preview';
+            const schema = z.string().meta({});
+            const { Story } = preview.meta({});
+          </script>
+        `,
+      });
+
+      const nodes = await extractModuleNodes({ module });
+
+      expect(nodes.storyIdentifier.name).toBe('Story');
+    });
+  });
 });
diff --git a/code/renderers/svelte/vitest.config.ts b/code/renderers/svelte/vitest.config.ts
index 83f86b87b458..5a1c98f762d2 100644
--- a/code/renderers/svelte/vitest.config.ts
+++ b/code/renderers/svelte/vitest.config.ts
@@ -1,11 +1,13 @@
 import { defineConfig, mergeConfig } from 'vitest/config';
 
+import { svelteCsf } from '../../frameworks/svelte-vite/src/plugins/svelte-csf.ts';
 import { vitestCommonConfig } from '../../vitest.shared.ts';
 
 export default defineConfig(
   mergeConfig(vitestCommonConfig, {
     plugins: [
       import('@sveltejs/vite-plugin-svelte').then(({ svelte }) => svelte()),
+      svelteCsf(),
       // @ts-expect-error -- types don't match our TS module resolution setting
       import('@testing-library/svelte/vite').then(({ svelteTesting }) => svelteTesting()),
     ],

From 56333145d94c8799f13b3a1592d2dce97d7edba9 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Fri, 9 Oct 2026 09:50:49 +0200
Subject: [PATCH 015/326] fix(csf-tools): skip local helpers behind export
 specifiers in factory files

In a factories file, a local function or class exported with
`export { helper }` was indexed as a story, because its declaration has no
initializer. Only stories imported from another file are now kept. A
`.story()` call behind a specifier is read as a factory story only in a
factories file, so a non-factory file reads it as a plain story, as before.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 code/core/src/csf-tools/CsfFile.test.ts | 26 ++++++++++++++++++++++++-
 code/core/src/csf-tools/CsfFile.ts      |  8 +++++---
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/code/core/src/csf-tools/CsfFile.test.ts b/code/core/src/csf-tools/CsfFile.test.ts
index 144af124b5a9..274dee85d6f0 100644
--- a/code/core/src/csf-tools/CsfFile.test.ts
+++ b/code/core/src/csf-tools/CsfFile.test.ts
@@ -3101,8 +3101,12 @@ describe('CsfFile', () => {
             const $__Button = meta.story({ tags: ['a'] });
             const $__Typed = meta.story({ tags: ['b'] }) satisfies ReturnType<typeof meta.story>;
             const someHelper = () => {};
-            export { $__Button as Button, $__Typed as Typed, someHelper };
+            function helperFunction() {}
+            class HelperClass {}
+            export { $__Button as Button, $__Typed as Typed, someHelper, helperFunction, HelperClass };
             export { Other } from './Other.stories';
+            import { Imported } from './Imported.stories';
+            export { Imported };
           `,
           { makeTitle }
         ).parse();
@@ -3117,9 +3121,29 @@ describe('CsfFile', () => {
           { name: 'Button', tags: ['a'], factory: true },
           { name: 'Typed', tags: ['b'], factory: true },
           { name: 'Other', tags: undefined, factory: undefined },
+          { name: 'Imported', tags: undefined, factory: undefined },
         ]);
       });
 
+      it('reads a .story() call behind an export specifier as a plain story in a non-factory file', () => {
+        const parsed = loadCsf(
+          dedent`
+            export default { title: 'foo' };
+            const Local = api.story({ tags: ['a'] });
+            export { Local as Story };
+          `,
+          { makeTitle }
+        ).parse();
+
+        expect(
+          parsed.stories.map(({ name, tags, __stats }) => ({
+            name,
+            tags,
+            factory: __stats.factory,
+          }))
+        ).toEqual([{ name: 'Story', tags: undefined, factory: undefined }]);
+      });
+
       it('excludeStories still works with factories', () => {
         const parsed = loadCsf(
           dedent`
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index a8fc8c580bd4..8e64d9298b54 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -780,12 +780,14 @@ export class CsfFile {
                   let storyNode: t.Node | undefined = decl;
                   let storyIsFactory = false;
                   const unwrappedDecl = decl && unwrapExpression(decl);
-                  if (unwrappedDecl && isCsfFactoryCall(unwrappedDecl)) {
+                  if (self._metaIsFactory && unwrappedDecl && isCsfFactoryCall(unwrappedDecl)) {
                     storyIsFactory = true;
                     storyNode = unwrappedDecl.arguments[0];
                   }
-                  // A story imported from another file has no initializer here
-                  if (self._metaIsFactory && decl && !storyIsFactory) {
+                  // A story from another file is kept: its declaration isn't in this file
+                  const isImported =
+                    !!node.source || path.scope.getBinding(localName)?.kind === 'module';
+                  if (self._metaIsFactory && !storyIsFactory && !isImported) {
                     return;
                   }
                   if (t.isObjectExpression(storyNode)) {

From d04917543aa21a31d36fe62f7861ec4f23361d7b Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Fri, 9 Oct 2026 09:50:53 +0200
Subject: [PATCH 016/326] fix(svelte): accept preview.type<>().meta() in Svelte
 CSF files
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`preview.type<…>()` returns the preview with more types. The meta detection
read only an identifier before `.meta`, so the parser and the indexer didn't
find a meta from `preview.type<…>().meta()`.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../compiler/post-transform/index.test.ts     | 19 ++++++++++++++
 .../src/svelte-csf/indexer/parser.test.ts     |  7 ++++++
 .../src/svelte-csf/utils/import-source.ts     | 25 ++++++++++++++++---
 3 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/code/renderers/svelte/src/svelte-csf/compiler/post-transform/index.test.ts b/code/renderers/svelte/src/svelte-csf/compiler/post-transform/index.test.ts
index 72e911de1605..fe3c0325ec94 100644
--- a/code/renderers/svelte/src/svelte-csf/compiler/post-transform/index.test.ts
+++ b/code/renderers/svelte/src/svelte-csf/compiler/post-transform/index.test.ts
@@ -474,6 +474,25 @@ describe('CSF factories', () => {
     `);
   });
 
+  it('names the meta from preview.type<>().meta()', async ({ expect }) => {
+    const output = await transform(dedent`
+      <script module lang="ts">
+        import preview from '#.storybook/preview';
+        import Button from './Button.svelte';
+
+        const { Story } = preview.type<{ args: { theme: string } }>().meta({ component: Button });
+      </script>
+
+      <Story name="Primary" args={{ label: 'Primary', theme: 'dark' }} />
+    `);
+
+    expect(output).toContain(dedent`
+      const $__meta = preview.type().meta({ component: Button });
+      const { Story } = $__meta;
+    `);
+    expect(output).toContain('const $__Primary = $__meta.story({');
+  });
+
   it('uses the meta variable of the file', async ({ expect }) => {
     const output = await transform(dedent`
       <script module>
diff --git a/code/renderers/svelte/src/svelte-csf/indexer/parser.test.ts b/code/renderers/svelte/src/svelte-csf/indexer/parser.test.ts
index 1f05e94e96e5..7d85280db790 100644
--- a/code/renderers/svelte/src/svelte-csf/indexer/parser.test.ts
+++ b/code/renderers/svelte/src/svelte-csf/indexer/parser.test.ts
@@ -208,6 +208,13 @@ describe('parseForIndexer', () => {
         const meta = preview.meta({ title: 'Example', tags: ['meta-tag'] });
         const { Story } = meta;`,
       ],
+      [
+        'preview.type<>().meta()',
+        `import preview from '#.storybook/preview';
+        const { Story } = preview
+          .type<{ args: { theme: string } }>()
+          .meta({ title: 'Example', tags: ['meta-tag'] });`,
+      ],
     ])('indexes %s', async ([, moduleScript], { expect }) => {
       const file = await writeFactoryStoriesFile(moduleScript);
 
diff --git a/code/renderers/svelte/src/svelte-csf/utils/import-source.ts b/code/renderers/svelte/src/svelte-csf/utils/import-source.ts
index d9819b3db315..796777353031 100644
--- a/code/renderers/svelte/src/svelte-csf/utils/import-source.ts
+++ b/code/renderers/svelte/src/svelte-csf/utils/import-source.ts
@@ -135,20 +135,37 @@ function getMetaFunctionName(
   if (
     callee.type !== 'MemberExpression' ||
     callee.computed ||
-    callee.object.type !== 'Identifier' ||
     callee.property.type !== 'Identifier' ||
     callee.property.name !== 'meta'
   ) {
     return undefined;
   }
 
-  if (imports.previewNames.includes(callee.object.name)) {
-    return `${callee.object.name}.meta`;
+  let { object } = callee;
+
+  // `preview.type<…>()` returns the preview with more types, so its `.meta()` is a meta of `preview`
+  if (
+    object.type === 'CallExpression' &&
+    object.arguments.length === 0 &&
+    object.callee.type === 'MemberExpression' &&
+    !object.callee.computed &&
+    object.callee.property.type === 'Identifier' &&
+    object.callee.property.name === 'type'
+  ) {
+    object = object.callee.object;
+  }
+
+  if (object.type !== 'Identifier') {
+    return undefined;
+  }
+
+  if (imports.previewNames.includes(object.name)) {
+    return `${object.name}.meta`;
   }
 
   // Like `CsfFile`, only a variable named `preview` shows that the file tries to use CSF factories.
   // Other `.meta()` calls, such as Zod's, are not a meta.
-  if (callee.object.name === 'preview') {
+  if (object.name === 'preview') {
     throw new PreviewNotImportedError(filename);
   }
 

From 4007d68fb0b7d810790fc2baa22de771891199a9 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Fri, 9 Oct 2026 10:16:34 +0200
Subject: [PATCH 017/326] feat(svelte): find the Story components of
 meta.type<>() in Svelte CSF files
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A Svelte CSF file can destructure more `Story` components from
`meta.type<…>()`, to add args that the component doesn't declare:

  const { Story: IconStory } = meta.type<{ args: { icon: string } }>();

The parser, the compiler and the indexer now track the names of all `Story`
components, also through chains of `.type()` calls, so a file can mix `Story`
and `IconStory`. `meta.type()` returns the same meta at runtime, so the
compiled stories still call `meta.story()`. The types already supported it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../svelte/src/svelte-csf/indexer/parser.ts   |  9 ++-
 .../parser/extract/compiled/nodes.ts          |  8 +-
 .../parser/extract/compiled/stories.ts        |  4 +-
 .../parser/extract/svelte/fragment-nodes.ts   |  4 +-
 .../parser/extract/svelte/module-nodes.ts     |  8 +-
 .../src/svelte-csf/utils/import-source.ts     | 81 ++++++++++---------
 6 files changed, 62 insertions(+), 52 deletions(-)

diff --git a/code/renderers/svelte/src/svelte-csf/indexer/parser.ts b/code/renderers/svelte/src/svelte-csf/indexer/parser.ts
index f465397d3a73..f80f8bc05f8e 100644
--- a/code/renderers/svelte/src/svelte-csf/indexer/parser.ts
+++ b/code/renderers/svelte/src/svelte-csf/indexer/parser.ts
@@ -57,10 +57,11 @@ export async function parseForIndexer(filename: string): Promise<Results> {
   const svelteAST = getIndexableAST(code, filename);
   const results: Results & {
     hasMetaImport?: boolean;
-    defineMetaStory?: ESTreeAST.Identifier;
+    storyNames: string[];
   } = {
     meta: {},
     stories: [],
+    storyNames: [],
   };
 
   let hasDefaultOrNamespaceImport = false;
@@ -112,14 +113,14 @@ export async function parseForIndexer(filename: string): Promise<Results> {
         });
       }
 
-      if (!meta.storyIdentifier) {
+      if (meta.storyNames.length === 0) {
         throw new NoStoryComponentDestructuredError({
           filename,
           metaFunctionName: meta.functionName,
         });
       }
 
-      state.defineMetaStory = meta.storyIdentifier;
+      state.storyNames = meta.storyNames;
 
       if (meta.call.arguments[0]?.type !== 'ObjectExpression') {
         throw new GetDefineMetaFirstArgumentError({
@@ -181,7 +182,7 @@ export async function parseForIndexer(filename: string): Promise<Results> {
       const { name } = node;
       const { state } = context;
 
-      if (state.defineMetaStory?.name === name) {
+      if (state.storyNames.includes(name)) {
         const storyAttributes = extractStoryAttributesNodes({
           component: node,
           attributes: ['exportName', 'name', 'tags', 'template', 'asChild', 'children', 'play'],
diff --git a/code/renderers/svelte/src/svelte-csf/parser/extract/compiled/nodes.ts b/code/renderers/svelte/src/svelte-csf/parser/extract/compiled/nodes.ts
index 8af92d12f8ea..d697a7b013af 100644
--- a/code/renderers/svelte/src/svelte-csf/parser/extract/compiled/nodes.ts
+++ b/code/renderers/svelte/src/svelte-csf/parser/extract/compiled/nodes.ts
@@ -34,10 +34,10 @@ export interface CompiledASTNodes {
    */
   exportDefault: ESTreeAST.ExportDefaultDeclaration;
   /**
-   * An identifier for the `<Story />` component.
+   * The names of the `<Story />` components.
    * It could be destructured with rename - e.g. `const { Story: S } = defineMeta({ ... })`
    */
-  storyIdentifier: ESTreeAST.Identifier;
+  storyNames: string[];
   /**
    * A function declaration for the main Svelte component which is the `*.stories.svelte` file.
    */
@@ -113,7 +113,7 @@ export async function extractCompiledASTNodes(params: Params): Promise<CompiledA
     throw new NoExportDefaultError(filename);
   }
 
-  if (!meta.storyIdentifier) {
+  if (meta.storyNames.length === 0) {
     throw new NoStoryIdentifierFoundError(filename);
   }
 
@@ -126,7 +126,7 @@ export async function extractCompiledASTNodes(params: Params): Promise<CompiledA
     defineMetaVariableDeclaration: meta.declaration,
     metaIdentifier: meta.metaIdentifier,
     exportDefault,
-    storyIdentifier: meta.storyIdentifier,
+    storyNames: meta.storyNames,
     storiesFunctionDeclaration,
   };
 }
diff --git a/code/renderers/svelte/src/svelte-csf/parser/extract/compiled/stories.ts b/code/renderers/svelte/src/svelte-csf/parser/extract/compiled/stories.ts
index acac0b7eb2b0..41cd152f0e12 100644
--- a/code/renderers/svelte/src/svelte-csf/parser/extract/compiled/stories.ts
+++ b/code/renderers/svelte/src/svelte-csf/parser/extract/compiled/stories.ts
@@ -15,13 +15,13 @@ export async function extractStoriesNodesFromExportDefaultFn(params: Params) {
   const { walk } = await import('zimmerframe');
 
   const { nodes } = params;
-  const { storiesFunctionDeclaration, storyIdentifier } = nodes;
+  const { storiesFunctionDeclaration, storyNames } = nodes;
   const state: Result = [];
   const visitors: Visitors<ESTreeAST.Node, typeof state> = {
     CallExpression(node, context) {
       const { state } = context;
 
-      if (node.callee.type === 'Identifier' && node.callee.name === storyIdentifier.name) {
+      if (node.callee.type === 'Identifier' && storyNames.includes(node.callee.name)) {
         state.push(node);
       } else {
         context.next();
diff --git a/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/fragment-nodes.ts b/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/fragment-nodes.ts
index 2de374b56fbb..241f26f0c3be 100644
--- a/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/fragment-nodes.ts
+++ b/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/fragment-nodes.ts
@@ -36,7 +36,7 @@ export async function extractFragmentNodes(params: Params): Promise<Result> {
   const { walk } = await import('zimmerframe');
 
   const { fragment, moduleNodes } = params;
-  const { storyIdentifier } = moduleNodes;
+  const { storyNames } = moduleNodes;
 
   let latestComment: SvelteAST.Comment | undefined;
 
@@ -52,7 +52,7 @@ export async function extractFragmentNodes(params: Params): Promise<Result> {
     },
 
     Component(node, { state }) {
-      if (node.name === storyIdentifier.name) {
+      if (storyNames.includes(node.name)) {
         state.storyComponents.push({
           comment: latestComment,
           component: node,
diff --git a/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/module-nodes.ts b/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/module-nodes.ts
index 997f0afb8ee9..2b8f2e702a0e 100644
--- a/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/module-nodes.ts
+++ b/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/module-nodes.ts
@@ -21,10 +21,10 @@ interface Result {
   /** `meta` in `const meta = preview.meta({ })`. */
   metaIdentifier?: ESTreeAST.Identifier;
   /**
-   * An identifier for the `<Story />` component.
+   * The names of the `<Story />` components.
    * It could be destructured with rename - e.g. `const { Story: S } = defineMeta({ ... })`
    */
-  storyIdentifier: ESTreeAST.Identifier;
+  storyNames: string[];
 }
 
 interface Params {
@@ -59,7 +59,7 @@ export async function extractModuleNodes(options: Params): Promise<Result> {
     throw new MissingDefineMetaVariableDeclarationError(filename);
   }
 
-  if (!meta.storyIdentifier) {
+  if (meta.storyNames.length === 0) {
     throw new NoStoryComponentDestructuredError({
       filename,
       metaFunctionName: meta.functionName,
@@ -70,6 +70,6 @@ export async function extractModuleNodes(options: Params): Promise<Result> {
     isFactory: meta.isFactory,
     defineMetaVariableDeclaration: meta.declaration,
     metaIdentifier: meta.metaIdentifier,
-    storyIdentifier: meta.storyIdentifier,
+    storyNames: meta.storyNames,
   };
 }
diff --git a/code/renderers/svelte/src/svelte-csf/utils/import-source.ts b/code/renderers/svelte/src/svelte-csf/utils/import-source.ts
index 796777353031..18bb577144c2 100644
--- a/code/renderers/svelte/src/svelte-csf/utils/import-source.ts
+++ b/code/renderers/svelte/src/svelte-csf/utils/import-source.ts
@@ -58,7 +58,8 @@ export function hasMetaImport(imports: MetaImports): boolean {
 }
 
 // `const { Story } = defineMeta({ … })`, `const { Story } = preview.meta({ … })`, or
-// `const meta = preview.meta({ … })` followed by `const { Story } = meta`
+// `const meta = preview.meta({ … })` followed by `const { Story } = meta` and
+// `const { Story: IconStory } = meta.type<…>()`
 export interface MetaNodes {
   // `preview.meta()` creates a CSF factories meta
   isFactory: boolean;
@@ -68,8 +69,8 @@ export interface MetaNodes {
   functionName: string;
   // `meta` in `const meta = preview.meta({ … })`
   metaIdentifier?: ESTreeAST.Identifier;
-  // It can be renamed: `const { Story: S } = …`
-  storyIdentifier?: ESTreeAST.Identifier;
+  // The names of the `Story` components. They can be renamed: `const { Story: S } = …`
+  storyNames: string[];
 }
 
 export function findMeta(
@@ -106,14 +107,19 @@ export function findMeta(
         call: init,
         functionName,
         metaIdentifier: isFactory && id.type === 'Identifier' ? id : undefined,
-        storyIdentifier: findStoryIdentifier(id),
+        storyNames: findStoryNames(id),
       };
-    } else if (
-      meta?.metaIdentifier &&
-      init?.type === 'Identifier' &&
-      init.name === meta.metaIdentifier.name
-    ) {
-      meta.storyIdentifier ??= findStoryIdentifier(id);
+    } else if (meta?.metaIdentifier) {
+      for (const declarator of statement.declarations) {
+        const metaReference = declarator.init && skipTypeCalls(declarator.init);
+
+        if (
+          metaReference?.type === 'Identifier' &&
+          metaReference.name === meta.metaIdentifier.name
+        ) {
+          meta.storyNames.push(...findStoryNames(declarator.id));
+        }
+      }
     }
   }
 
@@ -141,19 +147,7 @@ function getMetaFunctionName(
     return undefined;
   }
 
-  let { object } = callee;
-
-  // `preview.type<…>()` returns the preview with more types, so its `.meta()` is a meta of `preview`
-  if (
-    object.type === 'CallExpression' &&
-    object.arguments.length === 0 &&
-    object.callee.type === 'MemberExpression' &&
-    !object.callee.computed &&
-    object.callee.property.type === 'Identifier' &&
-    object.callee.property.name === 'type'
-  ) {
-    object = object.callee.object;
-  }
+  const object = skipTypeCalls(callee.object);
 
   if (object.type !== 'Identifier') {
     return undefined;
@@ -172,21 +166,36 @@ function getMetaFunctionName(
   return undefined;
 }
 
-function findStoryIdentifier(id: ESTreeAST.Pattern): ESTreeAST.Identifier | undefined {
-  if (id.type !== 'ObjectPattern') {
-    return undefined;
+// `preview.type<…>()` and `meta.type<…>()` return the same preview or meta with more types, so
+// `preview.type<…>().meta()` is a meta of `preview`, and `meta.type<…>()` is `meta`
+function skipTypeCalls(expression: ESTreeAST.Expression | ESTreeAST.Super) {
+  let current = expression;
+
+  while (
+    current.type === 'CallExpression' &&
+    current.arguments.length === 0 &&
+    current.callee.type === 'MemberExpression' &&
+    !current.callee.computed &&
+    current.callee.property.type === 'Identifier' &&
+    current.callee.property.name === 'type'
+  ) {
+    current = current.callee.object;
   }
 
-  for (const property of id.properties) {
-    if (
-      property.type === 'Property' &&
-      property.key.type === 'Identifier' &&
-      property.key.name === 'Story' &&
-      property.value.type === 'Identifier'
-    ) {
-      return property.value;
-    }
+  return current;
+}
+
+function findStoryNames(id: ESTreeAST.Pattern): string[] {
+  if (id.type !== 'ObjectPattern') {
+    return [];
   }
 
-  return undefined;
+  return id.properties.flatMap((property) =>
+    property.type === 'Property' &&
+    property.key.type === 'Identifier' &&
+    property.key.name === 'Story' &&
+    property.value.type === 'Identifier'
+      ? [property.value.name]
+      : []
+  );
 }

From b707ad855bcbac4ae711cdaa28837a0c1f9f5666 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Fri, 9 Oct 2026 10:16:38 +0200
Subject: [PATCH 018/326] test: the test cases for meta.type<>() in Svelte CSF
 files

The cases that show what the previous commit does:

- Compiler: the full compiled module for `preview.type<>().meta()`, and for a
  file that mixes `Story` and `IconStory` (`compiler/post-transform/index.test.ts`).
- Vitest transform: a test for each story of `Story` and `IconStory`
  (`compiler/vitest-transform.test.ts`).
- Indexer and parsers: the index entries and the `Story` names of a mixed file.
- Runtime: `meta-type.stories.svelte` renders and runs both kinds of stories.
- Types: `type-checks-meta-type.svelte` has the `meta.type<>()` cases of the
  CSF4 tests as `Story` components, checked by `svelte-check`.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../meta-type.stories.svelte                  |  32 ++++
 .../svelte-csf-factories.test.ts              |  10 +-
 .../type-checks-meta-type.svelte              | 126 ++++++++++++
 .../compiler/post-transform/index.test.ts     | 180 +++++++++++++++++-
 .../compiler/vitest-transform.test.ts         |  63 ++++++
 .../src/svelte-csf/indexer/parser.test.ts     |  59 ++++++
 .../parser/extract/compiled/nodes.test.ts     |  18 +-
 .../extract/svelte/module-nodes.test.ts       |  64 ++++++-
 8 files changed, 541 insertions(+), 11 deletions(-)
 create mode 100644 code/renderers/svelte/src/__test__/svelte-csf-factories/meta-type.stories.svelte
 create mode 100644 code/renderers/svelte/src/__test__/svelte-csf-factories/type-checks-meta-type.svelte

diff --git a/code/renderers/svelte/src/__test__/svelte-csf-factories/meta-type.stories.svelte b/code/renderers/svelte/src/__test__/svelte-csf-factories/meta-type.stories.svelte
new file mode 100644
index 000000000000..a987d558d0e4
--- /dev/null
+++ b/code/renderers/svelte/src/__test__/svelte-csf-factories/meta-type.stories.svelte
@@ -0,0 +1,32 @@
+<script module lang="ts">
+  import { expect } from 'storybook/test';
+
+  import preview from './preview.ts';
+  import Button from '../Button.svelte';
+
+  const meta = preview.meta({ component: Button, args: { disabled: false } });
+  const { Story } = meta;
+  // `icon` isn't a prop of the button: the template renders it as the label.
+  const { Story: IconStory } = meta.type<{ args: { icon: string } }>();
+</script>
+
+<Story
+  name="Primary"
+  args={{ label: 'Primary' }}
+  play={async ({ canvas }) => {
+    await expect(canvas.getByRole('button')).toHaveTextContent('Primary');
+  }}
+/>
+
+<IconStory
+  name="Icon"
+  args={{ label: 'Icon', icon: '★' }}
+  play={async ({ args, canvas }) => {
+    await expect(args.icon).toBe('★');
+    await expect(canvas.getByRole('button')).toHaveTextContent('★');
+  }}
+>
+  {#snippet template({ icon, ...args })}
+    <Button {...args} label={icon} />
+  {/snippet}
+</IconStory>
diff --git a/code/renderers/svelte/src/__test__/svelte-csf-factories/svelte-csf-factories.test.ts b/code/renderers/svelte/src/__test__/svelte-csf-factories/svelte-csf-factories.test.ts
index 299c48aaccb2..c727198f57d4 100644
--- a/code/renderers/svelte/src/__test__/svelte-csf-factories/svelte-csf-factories.test.ts
+++ b/code/renderers/svelte/src/__test__/svelte-csf-factories/svelte-csf-factories.test.ts
@@ -6,13 +6,14 @@ import { isStory } from 'storybook/internal/csf';
 import { composeStories } from '../../portable-stories.ts';
 import * as ButtonStories from './button.stories.svelte';
 import * as InteractionsStories from './interactions.stories.svelte';
+import * as MetaTypeStories from './meta-type.stories.svelte';
 import * as TemplatingStories from './templating.stories.svelte';
 
 afterEach(() => {
   cleanup();
 });
 
-const files = { ButtonStories, InteractionsStories, TemplatingStories };
+const files = { ButtonStories, InteractionsStories, MetaTypeStories, TemplatingStories };
 
 describe.each(Object.entries(files))('%s', (_name, file) => {
   const stories = Object.entries(file).filter(([, story]) => isStory(story));
@@ -26,6 +27,13 @@ describe.each(Object.entries(files))('%s', (_name, file) => {
   });
 });
 
+it('exports the stories of the Story components from meta.type<>()', () => {
+  expect(Object.keys(MetaTypeStories).filter((key) => key !== '__namedExportsOrder')).toEqual([
+    'Primary',
+    'Icon',
+  ]);
+});
+
 it('composes the stories with composeStories', async () => {
   // The types of composeStories need a default export, which a CSF factories file doesn't have.
   const { Primary } = composeStories(ButtonStories as never) as Record<string, any>;
diff --git a/code/renderers/svelte/src/__test__/svelte-csf-factories/type-checks-meta-type.svelte b/code/renderers/svelte/src/__test__/svelte-csf-factories/type-checks-meta-type.svelte
new file mode 100644
index 000000000000..ecb8bc641d92
--- /dev/null
+++ b/code/renderers/svelte/src/__test__/svelte-csf-factories/type-checks-meta-type.svelte
@@ -0,0 +1,126 @@
+<script module lang="ts">
+  import { expectTypeOf } from 'vitest';
+
+  import type { Args, Decorator } from '../../public-types.ts';
+
+  import preview from './preview.ts';
+  import Button from '../Button.svelte';
+
+  const meta = preview.meta({ component: Button, args: { disabled: false } });
+  const { Story } = meta;
+  const { Story: IconStory } = meta.type<{ args: { icon: 'star' | 'heart' } }>();
+  const { Story: RequiredIconStory } = meta.type<{ args: { icon: string } }>();
+  const { Story: OptionalIconStory } = meta.type<{ args: { icon?: string } }>();
+  const { Story: DisabledStory } = meta.type<{ args: { disabled: true } }>();
+
+  const complete = preview.meta({ component: Button, args: { label: 'Hi', disabled: false } });
+  const { Story: CompleteOptionalStory } = complete.type<{ args: { icon?: string } }>();
+  const { Story: CompleteRequiredStory } = complete.type<{ args: { icon: string } }>();
+
+  const withTheme: Decorator<{ theme: 'light' | 'dark' }> = (Story) => Story();
+  const typedMeta = preview.type<{ args: { locale: 'en' | 'nl' } }>().meta({
+    component: Button,
+    decorators: [withTheme],
+    args: { locale: 'nl', disabled: false },
+  });
+  const { Story: ComposedStory } = typedMeta
+    .type<{ args: { icon: string } }>()
+    .type<{ args: { size: number } }>();
+</script>
+
+<!-- adds an arg to the args and the template of that story only -->
+
+<IconStory
+  name="Icon"
+  args={{ label: 'Hi', icon: 'star' }}
+  play={async ({ args }) => {
+    expectTypeOf(args.icon).toEqualTypeOf<'star' | 'heart'>();
+  }}
+>
+  {#snippet template(args)}
+    {expectTypeOf(args.icon).toEqualTypeOf<'star' | 'heart'>()}
+    {expectTypeOf(args.label).toEqualTypeOf<string>()}
+    <Button {...args} />
+  {/snippet}
+</IconStory>
+
+<Story name="No icon" args={{ label: 'Hi' }}>
+  {#snippet template(args)}
+    {expectTypeOf(args).not.toHaveProperty('icon')}
+    <Button {...args} />
+  {/snippet}
+</Story>
+
+<IconStory
+  name="Wrong icon"
+  args={{
+    label: 'Hi',
+    // @ts-expect-error icon must be 'star' | 'heart'
+    icon: 'x',
+  }}
+/>
+
+{#snippet iconTemplate(args: Args<typeof IconStory>)}
+  {expectTypeOf(args.icon).toEqualTypeOf<'star' | 'heart'>()}
+  <Button {...args} />
+{/snippet}
+
+<IconStory name="Shared icon template" template={iconTemplate} args={{ label: 'Hi', icon: 'heart' }} />
+
+<!-- a required key is required on that component only -->
+
+{/* @ts-expect-error icon is required */ null}
+<RequiredIconStory name="Icon missing" args={{ label: 'Hi' }} />
+
+<OptionalIconStory name="Optional icon" args={{ label: 'Hi' }} />
+
+<Story name="Other story" args={{ label: 'Hi' }} />
+
+<!-- args set in meta stay optional and the others stay required -->
+
+<RequiredIconStory name="Meta arg not set" args={{ label: 'Hi', icon: 'star' }} />
+
+<RequiredIconStory name="Meta arg set" args={{ label: 'Hi', icon: 'star', disabled: true }} />
+
+{/* @ts-expect-error label is required */ null}
+<RequiredIconStory name="Label missing" args={{ icon: 'star' }} />
+
+<!-- an arg of the meta that type<>() declares again must be set again -->
+
+{/* @ts-expect-error disabled is required, the meta sets it to false */ null}
+<DisabledStory name="Redeclared arg missing" args={{ label: 'Hi' }} />
+
+<DisabledStory name="Redeclared arg set" args={{ label: 'Hi', disabled: true }} />
+
+<!-- no args are needed when no required arg is left or the content takes no args -->
+
+<CompleteOptionalStory name="Complete" />
+
+{/* @ts-expect-error icon is required */ null}
+<CompleteRequiredStory name="Complete icon missing" />
+
+<CompleteRequiredStory name="Complete as child" asChild>
+  <p>Static content</p>
+</CompleteRequiredStory>
+
+<CompleteRequiredStory name="Complete template without parameters">
+  {#snippet template()}
+    <p>Static content</p>
+  {/snippet}
+</CompleteRequiredStory>
+
+<!-- composes with preview.type<>(), decorators and itself -->
+
+<ComposedStory
+  name="Composed"
+  args={{ label: 'Hi', theme: 'dark', icon: 'star', size: 1 }}
+  play={async ({ args }) => {
+    expectTypeOf(args.locale).toEqualTypeOf<'en' | 'nl'>();
+    expectTypeOf(args.theme).toEqualTypeOf<'light' | 'dark'>();
+    expectTypeOf(args.icon).toEqualTypeOf<string>();
+    expectTypeOf(args.size).toEqualTypeOf<number>();
+  }}
+/>
+
+{/* @ts-expect-error size is required */ null}
+<ComposedStory name="Composed size missing" args={{ label: 'Hi', theme: 'dark', icon: 'star' }} />
diff --git a/code/renderers/svelte/src/svelte-csf/compiler/post-transform/index.test.ts b/code/renderers/svelte/src/svelte-csf/compiler/post-transform/index.test.ts
index fe3c0325ec94..55ca23424704 100644
--- a/code/renderers/svelte/src/svelte-csf/compiler/post-transform/index.test.ts
+++ b/code/renderers/svelte/src/svelte-csf/compiler/post-transform/index.test.ts
@@ -486,11 +486,187 @@ describe('CSF factories', () => {
       <Story name="Primary" args={{ label: 'Primary', theme: 'dark' }} />
     `);
 
-    expect(output).toContain(dedent`
+    expect(output).toMatchInlineSnapshot(`
+      "import 'svelte/internal/disclose-version';
+      import 'svelte/internal/flags/legacy';
+
+      Button_stories[$.FILENAME] = 'Button.stories.svelte';
+
+      import preview from '#.storybook/preview';
+      import Button from './Button.svelte';
+      import * as $ from 'svelte/internal/client';
+
       const $__meta = preview.type().meta({ component: Button });
       const { Story } = $__meta;
+
+      function Button_stories($$anchor, $$props) {
+      	$.check_target(new.target);
+      	$.push($$props, false, Button_stories);
+
+      	var $$exports = { ...$.legacy_api() };
+
+      	$.init();
+
+      	$.add_svelte_meta(
+      		() => Story($$anchor, {
+      			name: 'Primary',
+      			args: { label: 'Primary', theme: 'dark' },
+      			parameters: {
+      				__svelteCsf: { rawCode: "<Button {...args} />" }
+      			}
+      		}),
+      		'component',
+      		Button_stories,
+      		8,
+      		0,
+      		{ componentTag: 'Story' }
+      	);
+
+      	return $.pop($$exports);
+      }
+      import { createRuntimeStories } from "@storybook/svelte/internal/svelte-csf/create-runtime-stories";
+
+      const $__stories = createRuntimeStories(Button_stories, $__meta.input);
+
+      export const __namedExportsOrder = ["Primary"];
+
+      const $__Primary = $__meta.story({
+      	...$__stories["Primary"],
+      	tags: ["svelte-csf-v5"]
+      });
+
+      export { $__Primary as Primary };"
+    `);
+  });
+
+  it('creates the stories of the Story components from meta.type<>()', async ({ expect }) => {
+    const output = await transform(dedent`
+      <script module lang="ts">
+        import preview from '#.storybook/preview';
+        import Button from './Button.svelte';
+
+        const meta = preview.meta({ component: Button });
+        const { Story } = meta;
+        const { Story: IconStory } = meta.type<{ args: { icon: string } }>();
+      </script>
+
+      <Story name="Primary" args={{ label: 'Primary' }} />
+
+      <IconStory name="Icon" args={{ label: 'Icon', icon: 'star' }}>
+        {#snippet template({ icon, ...args })}
+          <Button {...args} label={icon} />
+        {/snippet}
+      </IconStory>
+    `);
+
+    expect(output).toMatchInlineSnapshot(`
+      "import 'svelte/internal/disclose-version';
+      import 'svelte/internal/flags/legacy';
+
+      Button_stories[$.FILENAME] = 'Button.stories.svelte';
+
+      import preview from '#.storybook/preview';
+      import Button from './Button.svelte';
+      import * as $ from 'svelte/internal/client';
+
+      const meta = preview.meta({ component: Button });
+      const { Story } = meta;
+      const { Story: IconStory } = meta.type();
+      var root = $.add_locations($.from_html(\`<!> <!>\`, 1), Button_stories[$.FILENAME], []);
+
+      function Button_stories($$anchor, $$props) {
+      	$.check_target(new.target);
+      	$.push($$props, false, Button_stories);
+
+      	var $$exports = { ...$.legacy_api() };
+
+      	$.init();
+
+      	var fragment = root();
+      	var node = $.first_child(fragment);
+
+      	$.add_svelte_meta(
+      		() => Story(node, {
+      			name: 'Primary',
+      			args: { label: 'Primary' },
+      			parameters: {
+      				__svelteCsf: { rawCode: "<Button {...args} />" }
+      			}
+      		}),
+      		'component',
+      		Button_stories,
+      		10,
+      		0,
+      		{ componentTag: 'Story' }
+      	);
+
+      	var node_1 = $.sibling(node, 2);
+
+      	{
+      		const template = $.wrap_snippet(Button_stories, function ($$anchor, $$arg0) {
+      			$.validate_snippet_args(...arguments);
+
+      			let icon = () => $$arg0?.().icon;
+
+      			icon();
+
+      			let args = () => $.exclude_from_object($$arg0?.(), ['icon']);
+
+      			args();
+
+      			$.add_svelte_meta(
+      				() => Button($$anchor, $.spread_props(args, {
+      					get label() {
+      						return icon();
+      					}
+      				})),
+      				'component',
+      				Button_stories,
+      				14,
+      				4,
+      				{ componentTag: 'Button' }
+      			);
+      		});
+
+      		$.add_svelte_meta(
+      			() => IconStory(node_1, {
+      				name: 'Icon',
+      				args: { label: 'Icon', icon: 'star' },
+      				template,
+      				$$slots: { template: true },
+      				parameters: {
+      					__svelteCsf: { rawCode: "<Button {...args} label={icon} />" }
+      				}
+      			}),
+      			'component',
+      			Button_stories,
+      			12,
+      			0,
+      			{ componentTag: 'IconStory' }
+      		);
+      	}
+
+      	$.append($$anchor, fragment);
+      	return $.pop($$exports);
+      }
+      import { createRuntimeStories } from "@storybook/svelte/internal/svelte-csf/create-runtime-stories";
+
+      const $__stories = createRuntimeStories(Button_stories, meta.input);
+
+      export const __namedExportsOrder = ["Primary", "Icon"];
+
+      const $__Primary = meta.story({
+      	...$__stories["Primary"],
+      	tags: ["svelte-csf-v5"]
+      });
+
+      const $__Icon = meta.story({
+      	...$__stories["Icon"],
+      	tags: ["svelte-csf-v5"]
+      });
+
+      export { $__Primary as Primary, $__Icon as Icon };"
     `);
-    expect(output).toContain('const $__Primary = $__meta.story({');
   });
 
   it('uses the meta variable of the file', async ({ expect }) => {
diff --git a/code/renderers/svelte/src/svelte-csf/compiler/vitest-transform.test.ts b/code/renderers/svelte/src/svelte-csf/compiler/vitest-transform.test.ts
index 01bf77ebd5a9..2712fc9a6b72 100644
--- a/code/renderers/svelte/src/svelte-csf/compiler/vitest-transform.test.ts
+++ b/code/renderers/svelte/src/svelte-csf/compiler/vitest-transform.test.ts
@@ -93,4 +93,67 @@ describe('vitestTransform of a CSF factories stories file', () => {
       }"
     `);
   });
+
+  it('tests the stories of the Story components from meta.type<>()', async ({ expect }) => {
+    const output = await transform(dedent`
+      <script module lang="ts">
+        import preview from '#.storybook/preview';
+        import Button from './Button.svelte';
+
+        const meta = preview.meta({ component: Button });
+        const { Story } = meta;
+        const { Story: IconStory } = meta.type<{ args: { icon: string } }>();
+      </script>
+
+      <Story name="Primary" args={{ label: 'Primary' }} />
+
+      <IconStory name="Icon" args={{ label: 'Icon', icon: 'star' }} />
+    `);
+
+    expect(output.slice(output.indexOf('const _isRunningFromThisFile'))).toMatchInlineSnapshot(`
+      "const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
+      if (_isRunningFromThisFile) {
+        _test("Primary", _testStory({
+          exportName: "Primary",
+          story: $__Primary,
+          meta: meta,
+          skipTags: [],
+          storyId: "button--primary",
+          componentPath: "./Button.svelte",
+          componentName: "Button"
+        }));
+        _test("Icon", _testStory({
+          exportName: "Icon",
+          story: $__Icon,
+          meta: meta,
+          skipTags: [],
+          storyId: "button--icon",
+          componentPath: "./Button.svelte",
+          componentName: "Button"
+        }));
+      }"
+    `);
+  });
+
+  it('tests the Story components declared together with Story', async ({ expect }) => {
+    const output = await transform(dedent`
+      <script module lang="ts">
+        import preview from '#.storybook/preview';
+        import Button from './Button.svelte';
+
+        const meta = preview.meta({ component: Button });
+        const { Story } = meta,
+          { Story: IconStory } = meta.type<{ args: { icon: string } }>();
+      </script>
+
+      <Story name="Primary" />
+
+      <IconStory name="Icon" args={{ icon: 'star' }} />
+    `);
+
+    expect([...output.matchAll(/_test\("(\w+)"/g)].map(([, name]) => name)).toEqual([
+      'Primary',
+      'Icon',
+    ]);
+  });
 });
diff --git a/code/renderers/svelte/src/svelte-csf/indexer/parser.test.ts b/code/renderers/svelte/src/svelte-csf/indexer/parser.test.ts
index 7d85280db790..3d589f2027b4 100644
--- a/code/renderers/svelte/src/svelte-csf/indexer/parser.test.ts
+++ b/code/renderers/svelte/src/svelte-csf/indexer/parser.test.ts
@@ -246,6 +246,65 @@ describe('parseForIndexer', () => {
       `);
     });
 
+    it('indexes the stories of the Story components from meta.type<>()', async ({ expect }) => {
+      const file = await writeStoriesFile(`<script module lang="ts">
+          import preview from '#.storybook/preview';
+          const meta = preview.meta({ title: 'Example', tags: ['meta-tag'] });
+          const { Story } = meta;
+          const { Story: IconStory } = meta.type<{ args: { icon: string } }>();
+        </script>
+
+        <Story name="Primary" tags={['autodocs']} />
+
+        <IconStory name="Icon" args={{ icon: 'star' }} tags={['icon-tag']} />
+      `);
+
+      expect(await parseForIndexer(file)).toMatchInlineSnapshot(`
+        {
+          "meta": {
+            "tags": [
+              "meta-tag",
+            ],
+            "title": "Example",
+          },
+          "stories": [
+            {
+              "exportName": "Primary",
+              "name": "Primary",
+              "tags": [
+                "autodocs",
+              ],
+            },
+            {
+              "exportName": "Icon",
+              "name": "Icon",
+              "tags": [
+                "icon-tag",
+              ],
+            },
+          ],
+        }
+      `);
+    });
+
+    it('indexes the Story components declared together with Story', async ({ expect }) => {
+      const file = await writeStoriesFile(`<script module lang="ts">
+          import preview from '#.storybook/preview';
+          const meta = preview.meta({ title: 'Example' });
+          const { Story } = meta,
+            { Story: IconStory } = meta.type<{ args: { icon: string } }>();
+        </script>
+
+        <Story name="Primary" />
+
+        <IconStory name="Icon" args={{ icon: 'star' }} />
+      `);
+
+      const { stories } = await parseForIndexer(file);
+
+      expect(stories.map((story) => story.exportName)).toEqual(['Primary', 'Icon']);
+    });
+
     it('fails when a file calls defineMeta() and preview.meta()', async ({ expect }) => {
       const file = await writeFactoryStoriesFile(`
         import { defineMeta } from '@storybook/svelte';
diff --git a/code/renderers/svelte/src/svelte-csf/parser/extract/compiled/nodes.test.ts b/code/renderers/svelte/src/svelte-csf/parser/extract/compiled/nodes.test.ts
index b6a8652c2b2a..322ed5892873 100644
--- a/code/renderers/svelte/src/svelte-csf/parser/extract/compiled/nodes.test.ts
+++ b/code/renderers/svelte/src/svelte-csf/parser/extract/compiled/nodes.test.ts
@@ -81,7 +81,7 @@ describe(extractCompiledASTNodes.name, () => {
 
     expect(nodes.isFactory).toBe(true);
     expect(nodes.metaIdentifier).toBeUndefined();
-    expect(nodes.storyIdentifier.name).toBe('Story');
+    expect(nodes.storyNames).toEqual(['Story']);
   });
 
   it('finds the meta variable of preview.meta()', async ({ expect }) => {
@@ -95,6 +95,20 @@ describe(extractCompiledASTNodes.name, () => {
 
     expect(nodes.isFactory).toBe(true);
     expect(nodes.metaIdentifier?.name).toBe('meta');
-    expect(nodes.storyIdentifier.name).toBe('S');
+    expect(nodes.storyNames).toEqual(['S']);
+  });
+
+  it('finds the Story components of meta.type()', async ({ expect }) => {
+    const ast = getCompiledAST(`
+      import preview from '#.storybook/preview';
+      const meta = preview.type().meta({});
+      const { Story } = meta;
+      const { Story: IconStory } = meta.type();
+      const { Story: SizeStory } = meta.type().type();
+    `);
+
+    const nodes = await extractCompiledASTNodes({ ast });
+
+    expect(nodes.storyNames).toEqual(['Story', 'IconStory', 'SizeStory']);
   });
 });
diff --git a/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/module-nodes.test.ts b/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/module-nodes.test.ts
index 35264d6bd408..4a090ca4c7d0 100644
--- a/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/module-nodes.test.ts
+++ b/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/module-nodes.test.ts
@@ -153,8 +153,7 @@ describe(extractModuleNodes.name, () => {
     expect(nodes.defineMetaVariableDeclaration.declarations[0].init).toMatchObject({
       callee: { name: 'defineMeta' },
     });
-    expect(nodes.storyIdentifier).toBeDefined();
-    expect(nodes.storyIdentifier.name).toBe('Story');
+    expect(nodes.storyNames).toEqual(['Story']);
   });
 
   it('extracts module nodes with renamed identifiers', async ({ expect }) => {
@@ -173,7 +172,7 @@ describe(extractModuleNodes.name, () => {
       callee: { name: 'dm' },
     });
     expect(nodes.defineMetaVariableDeclaration).toBeDefined();
-    expect(nodes.storyIdentifier.name).toBe('S');
+    expect(nodes.storyNames).toEqual(['S']);
   });
 
   it.for(SVELTE_CSF_IMPORT_SOURCES)(
@@ -290,7 +289,7 @@ describe(extractModuleNodes.name, () => {
 
       expect(nodes.isFactory).toBe(true);
       expect(nodes.metaIdentifier).toBeUndefined();
-      expect(nodes.storyIdentifier.name).toBe('Story');
+      expect(nodes.storyNames).toEqual(['Story']);
     });
 
     it('extracts the nodes of a meta variable', async ({ expect }) => {
@@ -308,7 +307,60 @@ describe(extractModuleNodes.name, () => {
 
       expect(nodes.isFactory).toBe(true);
       expect(nodes.metaIdentifier?.name).toBe('meta');
-      expect(nodes.storyIdentifier.name).toBe('S');
+      expect(nodes.storyNames).toEqual(['S']);
+    });
+
+    it('extracts the Story components of meta.type<>()', async ({ expect }) => {
+      const { module } = getSvelteAST({
+        code: `
+          <script module lang="ts">
+            import preview from '#.storybook/preview';
+            const meta = preview.meta({});
+            const { Story } = meta;
+            const { Story: IconStory } = meta.type<{ args: { icon: string } }>();
+            const { Story: SizeStory } = meta
+              .type<{ args: { icon: string } }>()
+              .type<{ args: { size: number } }>();
+            const { Story: OtherStory } = other.type<{ args: { icon: string } }>();
+          </script>
+        `,
+      });
+
+      const nodes = await extractModuleNodes({ module });
+
+      expect(nodes.storyNames).toEqual(['Story', 'IconStory', 'SizeStory']);
+    });
+
+    it('extracts the nodes of preview.type<>().meta()', async ({ expect }) => {
+      const { module } = getSvelteAST({
+        code: `
+          <script module lang="ts">
+            import preview from '#.storybook/preview';
+            const { Story } = preview.type<{ args: { theme: string } }>().meta({});
+          </script>
+        `,
+      });
+
+      const nodes = await extractModuleNodes({ module });
+
+      expect(nodes.isFactory).toBe(true);
+      expect(nodes.storyNames).toEqual(['Story']);
+    });
+
+    it('extracts a Story component of meta.type<>() alone', async ({ expect }) => {
+      const { module } = getSvelteAST({
+        code: `
+          <script module lang="ts">
+            import preview from '#.storybook/preview';
+            const meta = preview.meta({});
+            const { Story: IconStory } = meta.type<{ args: { icon: string } }>();
+          </script>
+        `,
+      });
+
+      const nodes = await extractModuleNodes({ module });
+
+      expect(nodes.storyNames).toEqual(['IconStory']);
     });
 
     it('fails when Story is not destructured from the meta', async ({ expect }) => {
@@ -420,7 +472,7 @@ describe(extractModuleNodes.name, () => {
 
       const nodes = await extractModuleNodes({ module });
 
-      expect(nodes.storyIdentifier.name).toBe('Story');
+      expect(nodes.storyNames).toEqual(['Story']);
     });
   });
 });

From 125d55c7dc2e0d98bdabc74c6fd3a8ed93c2cfff Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Fri, 9 Oct 2026 14:08:11 +0200
Subject: [PATCH 019/326] refactor(cli): share the preview import path of the
 csf-factories codemods

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../codemod/helpers/csf-factories-utils.ts    | 22 ++++++++++++
 .../codemod/helpers/story-to-csf-factory.ts   | 35 ++++---------------
 2 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.ts b/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.ts
index 46864f464091..01dc834c1fa2 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.ts
@@ -1,5 +1,7 @@
 import { types as t, traverse } from 'storybook/internal/babel';
 
+import path from 'path';
+
 const projectAnnotationNames = [
   'decorators',
   'parameters',
@@ -145,3 +147,23 @@ export function addImportToTop(programNode: t.Program, importDecl: t.ImportDecla
 
   programNode.body.unshift(importDecl);
 }
+
+export type PreviewImportOptions =
+  | { useSubPathImports: true; previewConfigPath?: string }
+  | { useSubPathImports: false; previewConfigPath: string };
+
+export function getPreviewImportPath(
+  storiesFilePath: string,
+  { useSubPathImports, previewConfigPath }: PreviewImportOptions
+) {
+  if (useSubPathImports) {
+    return '#.storybook/preview';
+  }
+
+  const relativePath = path.relative(path.dirname(storiesFilePath), previewConfigPath);
+  const { dir, name } = path.parse(relativePath);
+  const previewPath = (dir ? `${dir}/${name}` : name).replace(/\\/g, '/');
+
+  // account for stories in the same path as preview file
+  return previewPath.startsWith('.') ? previewPath : `./${previewPath}`;
+}
diff --git a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
index 2930849d70a6..97a9a6e55fef 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
@@ -2,10 +2,12 @@ import { types as t, traverse } from 'storybook/internal/babel';
 import { isValidPreviewPath, loadCsf, printCsf } from 'storybook/internal/csf-tools';
 import { logger } from 'storybook/internal/node-logger';
 
-import path from 'path';
-
 import type { FileInfo } from '../../automigrate/codemod.ts';
-import { addImportToTop } from './csf-factories-utils.ts';
+import {
+  type PreviewImportOptions,
+  addImportToTop,
+  getPreviewImportPath,
+} from './csf-factories-utils.ts';
 import { customArgsTypes } from './custom-args-type.ts';
 import { removeUnusedTypes } from './remove-unused-types.ts';
 import { wrapArgsMocks } from './wrap-args-mocks.ts';
@@ -13,14 +15,7 @@ import { wrapArgsMocks } from './wrap-args-mocks.ts';
 // Name of properties that should not be renamed to `Story.input.xyz`
 const reuseDisallowList = ['play', 'run', 'extends', 'story'];
 
-type Options =
-  | { useSubPathImports: true; previewConfigPath?: string }
-  | { useSubPathImports: false; previewConfigPath: string };
-
-export async function storyToCsfFactory(
-  info: FileInfo,
-  { previewConfigPath, useSubPathImports }: Options
-) {
+export async function storyToCsfFactory(info: FileInfo, options: PreviewImportOptions) {
   let csf;
   try {
     csf = loadCsf(info.source, { makeTitle: () => 'FIXME' });
@@ -57,23 +52,7 @@ export async function storyToCsfFactory(
       n.declarations.some((declaration) => t.isIdentifier(declaration.id, { name: 'preview' }))
   );
 
-  let previewPath = '#.storybook/preview';
-  if (!useSubPathImports) {
-    // calculate relative path from story file to preview file
-    const relativePath = path.relative(path.dirname(info.path), previewConfigPath);
-    const { dir, name } = path.parse(relativePath);
-
-    // Construct the path manually and replace Windows backslashes
-    previewPath = `${dir ? `${dir}/` : ''}${name}`;
-
-    // account for stories in the same path as preview file
-    if (!previewPath.startsWith('.')) {
-      previewPath = `./${previewPath}`;
-    }
-
-    // Convert Windows backslashes to forward slashes
-    previewPath = previewPath.replace(/\\/g, '/');
-  }
+  const previewPath = getPreviewImportPath(info.path, options);
 
   let sbConfigImportName = hasRootLevelConfig ? 'storybookPreview' : 'preview';
 

From 235d8604b48f52d67f06773e53d0acc9b014220a Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Fri, 9 Oct 2026 14:08:15 +0200
Subject: [PATCH 020/326] feat(cli): migrate Svelte CSF files in the
 csf-factories codemod

The codemod changes defineMeta() to preview.meta() in .stories.svelte files
and imports the preview. Its default glob now includes .svelte files.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/codemod/csf-factories.ts              |  14 +-
 .../codemod/helpers/csf-factories-utils.ts    |   3 +
 .../codemod/helpers/story-to-csf-factory.ts   |  30 ++-
 .../helpers/svelte-csf-to-csf-factory.ts      | 215 ++++++++++++++++++
 4 files changed, 251 insertions(+), 11 deletions(-)
 create mode 100644 code/lib/cli-storybook/src/codemod/helpers/svelte-csf-to-csf-factory.ts

diff --git a/code/lib/cli-storybook/src/codemod/csf-factories.ts b/code/lib/cli-storybook/src/codemod/csf-factories.ts
index ffb1302d912b..9061edd3db2d 100644
--- a/code/lib/cli-storybook/src/codemod/csf-factories.ts
+++ b/code/lib/cli-storybook/src/codemod/csf-factories.ts
@@ -13,6 +13,7 @@ import { getFrameworkPackageName } from '../automigrate/helpers/mainConfigFile.t
 import type { CommandFix } from '../automigrate/types.ts';
 import { configToCsfFactory } from './helpers/config-to-csf-factory.ts';
 import { storyToCsfFactory } from './helpers/story-to-csf-factory.ts';
+import { svelteCsfToCsfFactory } from './helpers/svelte-csf-to-csf-factory.ts';
 
 async function runStoriesCodemod(options: {
   dryRun: boolean | undefined;
@@ -25,7 +26,7 @@ async function runStoriesCodemod(options: {
   const { dryRun, packageManager, yes, glob, ...codemodOptions } = options;
   try {
     const inSandbox = optionalEnvToBoolean(process.env.IN_STORYBOOK_SANDBOX) ?? false;
-    let globString = glob ?? '**/*.{stories,story}.{js,jsx,ts,tsx,mjs,mjsx,mts,mtsx}';
+    let globString = glob ?? '**/*.{stories,story}.{js,jsx,ts,tsx,mjs,mjsx,mts,mtsx,svelte}';
 
     if (!glob && inSandbox) {
       // Sandbox uses limited glob for faster testing (unless glob explicitly provided)
@@ -44,9 +45,14 @@ async function runStoriesCodemod(options: {
       args: ['storybook', 'migrate', 'csf-2-to-3', `--glob="${globString}"`],
     });
 
-    await runCodemod(globString, (info) => storyToCsfFactory(info, codemodOptions), {
-      dryRun,
-    });
+    await runCodemod(
+      globString,
+      async (info) =>
+        info.path.endsWith('.svelte')
+          ? svelteCsfToCsfFactory(info, codemodOptions)
+          : storyToCsfFactory(info, codemodOptions),
+      { dryRun }
+    );
   } catch (err: any) {
     if (err.message === 'No files matched') {
       await runStoriesCodemod(options);
diff --git a/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.ts b/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.ts
index 01dc834c1fa2..19b2fa80bc61 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.ts
@@ -148,6 +148,9 @@ export function addImportToTop(programNode: t.Program, importDecl: t.ImportDecla
   programNode.body.unshift(importDecl);
 }
 
+// Story properties that a story file reads directly, not from `Story.input`
+export const reuseDisallowList = ['play', 'run', 'extends', 'story'];
+
 export type PreviewImportOptions =
   | { useSubPathImports: true; previewConfigPath?: string }
   | { useSubPathImports: false; previewConfigPath: string };
diff --git a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
index 97a9a6e55fef..af77f3802a96 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
@@ -7,14 +7,13 @@ import {
   type PreviewImportOptions,
   addImportToTop,
   getPreviewImportPath,
+  reuseDisallowList,
 } from './csf-factories-utils.ts';
+import { findSvelteCsfNonStoryExports } from './svelte-csf-to-csf-factory.ts';
 import { customArgsTypes } from './custom-args-type.ts';
 import { removeUnusedTypes } from './remove-unused-types.ts';
 import { wrapArgsMocks } from './wrap-args-mocks.ts';
 
-// Name of properties that should not be renamed to `Story.input.xyz`
-const reuseDisallowList = ['play', 'run', 'extends', 'story'];
-
 export async function storyToCsfFactory(info: FileInfo, options: PreviewImportOptions) {
   let csf;
   try {
@@ -77,6 +76,8 @@ export async function storyToCsfFactory(info: FileInfo, options: PreviewImportOp
    */
   const namespaceStoryImports = new Set<string>(); // import * as X
   const namedStoryImports = new Set<string>(); // import { X } or import X
+  // The exports of an imported Svelte CSF file that are not stories, by namespace import
+  const nonStoryExports = new Map<string, string[]>();
 
   programNode.body.forEach((node) => {
     if (t.isImportDeclaration(node)) {
@@ -84,16 +85,27 @@ export async function storyToCsfFactory(info: FileInfo, options: PreviewImportOp
 
       // Check if this import is from a .stories file
       // Matches: ./Button.stories, ../components/Card.stories.tsx, etc.
-      const isStoryFileImport = /\.stories(\.(ts|tsx|js|jsx|mjs|mts))?$/.test(importPath);
+      const isStoryFileImport = /\.stories(\.(ts|tsx|js|jsx|mjs|mts|svelte))?$/.test(importPath);
 
       if (isStoryFileImport) {
+        const nonStories = findSvelteCsfNonStoryExports(info.path, importPath);
         // Collect all imported names from this story file
         node.specifiers.forEach((specifier) => {
+          if (!t.isImportSpecifier(specifier)) {
+            nonStoryExports.set(specifier.local.name, nonStories);
+          }
           if (t.isImportNamespaceSpecifier(specifier)) {
             // import * as BaseStories from './Button.stories'
             // BaseStories.Primary is a story, so we need: BaseStories.Primary.input
             namespaceStoryImports.add(specifier.local.name);
-          } else if (t.isImportSpecifier(specifier)) {
+          } else if (
+            t.isImportSpecifier(specifier) &&
+            !nonStories.includes(
+              t.isIdentifier(specifier.imported)
+                ? specifier.imported.name
+                : specifier.imported.value
+            )
+          ) {
             // import { Primary } from './Button.stories'
             // Primary itself is a story, so we need: Primary.input
             namedStoryImports.add(specifier.local.name);
@@ -308,7 +320,8 @@ export async function storyToCsfFactory(info: FileInfo, options: PreviewImportOp
         if (
           t.isIdentifier(importName) &&
           storyFileImports.has(importName.name) &&
-          t.isIdentifier(storyName)
+          t.isIdentifier(storyName) &&
+          !nonStoryExports.get(importName.name)?.includes(storyName.name)
         ) {
           // Skip if already transformed: BaseStories.Primary.input.args
           // This check prevents infinite loops when the traverser revisits modified nodes
@@ -383,6 +396,9 @@ export async function storyToCsfFactory(info: FileInfo, options: PreviewImportOp
       // Pattern: SpreadElement containing MemberExpression { object: Identifier("BaseStories"), property: Identifier("Secondary") }
       if (t.isIdentifier(innerObject) && namespaceStoryImports.has(innerObject.name)) {
         const storyName = node.property;
+        const isNonStoryExport =
+          t.isIdentifier(storyName) &&
+          !!nonStoryExports.get(innerObject.name)?.includes(storyName.name);
 
         // Skip if this is already .input
         if (t.isIdentifier(storyName, { name: 'input' })) {
@@ -391,7 +407,7 @@ export async function storyToCsfFactory(info: FileInfo, options: PreviewImportOp
 
         // Check if parent is a SpreadElement (...BaseStories.Secondary)
         const parent = nodePath.parent;
-        if (t.isSpreadElement(parent)) {
+        if (t.isSpreadElement(parent) && !isNonStoryExport) {
           // Transform: ...BaseStories.Secondary → ...BaseStories.Secondary.input
           nodePath.replaceWith(t.memberExpression(node, t.identifier('input')));
           nodePath.skip();
diff --git a/code/lib/cli-storybook/src/codemod/helpers/svelte-csf-to-csf-factory.ts b/code/lib/cli-storybook/src/codemod/helpers/svelte-csf-to-csf-factory.ts
new file mode 100644
index 000000000000..80f5db1c5f95
--- /dev/null
+++ b/code/lib/cli-storybook/src/codemod/helpers/svelte-csf-to-csf-factory.ts
@@ -0,0 +1,215 @@
+import { readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+
+import { parser, traverse, types as t } from 'storybook/internal/babel';
+
+import type { FileInfo } from '../../automigrate/codemod.ts';
+import {
+  type PreviewImportOptions,
+  getPreviewImportPath,
+  reuseDisallowList,
+} from './csf-factories-utils.ts';
+
+const SVELTE_CSF_IMPORT_SOURCES = [
+  '@storybook/svelte',
+  '@storybook/svelte-vite',
+  '@storybook/sveltekit',
+];
+// Attribute values such as `generics="T extends Record<string, unknown>"` can contain `>`.
+const SCRIPT_BLOCK = /(<script\b(?:[^>"']|"[^"]*"|'[^']*')*>)([\s\S]*?)(<\/script>)/g;
+// `<script module>`, or `<script context="module">` from Svelte 4
+const MODULE_SCRIPT_TAG = /\smodule[\s>=]|\scontext=["']module["']/;
+const STORIES_FILE = /\.stories(\.(svelte|ts|tsx|js|jsx|mjs|mts))?$/;
+
+interface Edit {
+  start: number;
+  end: number;
+  text: string;
+}
+
+interface StoryImports {
+  // `X` in `import * as X from './Button.stories.svelte'`, for `X.Primary.args`. `X.data` is not a
+  // story when the imported file exports `data`.
+  namespaces: { name: string; nonStories: string[] }[];
+  // `Primary` in `import { Primary } from './Button.stories.svelte'`, for `Primary.args`
+  stories: string[];
+}
+
+// Only the meta changes: the `Story` components of `preview.meta()` take the same props
+export function svelteCsfToCsfFactory(info: FileInfo, options: PreviewImportOptions): string {
+  const storyImports: StoryImports = { namespaces: [], stories: [] };
+  let migrated = false;
+  const source = info.source.replace(
+    SCRIPT_BLOCK,
+    (block, open: string, content: string, close: string) => {
+      const result = MODULE_SCRIPT_TAG.test(open)
+        ? transformModuleScript(content, info.path, getPreviewImportPath(info.path, options))
+        : undefined;
+      if (!result) {
+        return block;
+      }
+      migrated = true;
+      storyImports.namespaces.push(...result.storyImports.namespaces);
+      storyImports.stories.push(...result.storyImports.stories);
+      return open + result.code + close;
+    }
+  );
+  return migrated ? readStoryInputs(source, storyImports) : source;
+}
+
+/**
+ * The named exports of the module script of a Svelte CSF file, such as `export const data = {…}`.
+ * They are never stories: Svelte CSF declares its stories with `<Story>` components.
+ */
+export function findSvelteCsfNonStoryExports(importer: string, source: string): string[] {
+  if (!source.endsWith('.svelte')) {
+    return [];
+  }
+  let code;
+  try {
+    code = readFileSync(resolve(dirname(importer), source), 'utf-8');
+  } catch {
+    return [];
+  }
+  return [...code.matchAll(SCRIPT_BLOCK)].flatMap(([, open, content]) => {
+    if (!MODULE_SCRIPT_TAG.test(open)) {
+      return [];
+    }
+    try {
+      const { body } = parser.parse(content, {
+        sourceType: 'module',
+        plugins: ['typescript'],
+      }).program;
+      return body.flatMap((node) => {
+        if (!t.isExportNamedDeclaration(node)) {
+          return [];
+        }
+        const names = node.specifiers.map((specifier) =>
+          t.isIdentifier(specifier.exported) ? specifier.exported.name : specifier.exported.value
+        );
+        const declared = node.declaration ? t.getBindingIdentifiers(node.declaration) : {};
+        return [...names, ...Object.keys(declared)];
+      });
+    } catch {
+      return [];
+    }
+  });
+}
+
+// The codemod also migrates the imported stories files, which then keep the annotations of a story
+// in `input`: `Primary.args` becomes `Primary.input.args`, in the scripts and in the markup.
+function readStoryInputs(source: string, { namespaces, stories }: StoryImports) {
+  const notOneOf = (names: string[]) => (names.length ? `(?!(?:${names.join('|')})\\b)` : '');
+  const property = `${notOneOf([...reuseDisallowList, 'input', 'composed'])}[\\w$]+`;
+  // Not `other.Primary`, but a spread such as `...Primary` is fine
+  const story = (name: string) => `(?<![\\w$])(?<![^.]\\.)${name.replaceAll('$', '\\$')}`;
+  return [
+    ...namespaces.map(
+      ({ name, nonStories }) =>
+        new RegExp(`(${story(name)}\\.${notOneOf(nonStories)}[\\w$]+)\\.(${property})`, 'g')
+    ),
+    ...stories.map((name) => new RegExp(`(${story(name)})\\.(${property})`, 'g')),
+  ].reduce((result, pattern) => result.replace(pattern, '$1.input.$2'), source);
+}
+
+const importedName = (specifier: t.ImportSpecifier) =>
+  t.isIdentifier(specifier.imported) ? specifier.imported.name : specifier.imported.value;
+
+const isDefineMetaSpecifier = (
+  specifier: t.ImportDeclaration['specifiers'][number]
+): specifier is t.ImportSpecifier =>
+  t.isImportSpecifier(specifier) &&
+  specifier.importKind !== 'type' &&
+  t.isIdentifier(specifier.imported, { name: 'defineMeta' });
+
+function transformModuleScript(
+  code: string,
+  filePath: string,
+  previewPath: string
+): { code: string; storyImports: StoryImports } | undefined {
+  let ast;
+  try {
+    ast = parser.parse(code, { sourceType: 'module', plugins: ['typescript'] });
+  } catch {
+    return undefined;
+  }
+
+  const svelteCsfImport = ast.program.body.find(
+    (node): node is t.ImportDeclaration =>
+      t.isImportDeclaration(node) &&
+      SVELTE_CSF_IMPORT_SOURCES.includes(node.source.value) &&
+      node.specifiers.some(isDefineMetaSpecifier)
+  );
+  const defineMetaSpecifier = svelteCsfImport?.specifiers.find(isDefineMetaSpecifier);
+  if (!svelteCsfImport || !defineMetaSpecifier) {
+    return undefined;
+  }
+
+  let previewName = 'preview';
+  const edits: Edit[] = [];
+  traverse(ast, {
+    Program(path) {
+      if (path.scope.hasBinding(previewName)) {
+        previewName = 'storybookPreview';
+      }
+    },
+    CallExpression({ node }) {
+      if (t.isIdentifier(node.callee, { name: defineMetaSpecifier.local.name })) {
+        edits.push({
+          start: node.callee.start!,
+          end: node.callee.end!,
+          text: `${previewName}.meta`,
+        });
+      }
+    },
+  });
+  if (edits.length === 0) {
+    return undefined;
+  }
+
+  const { start, end, source, specifiers } = svelteCsfImport;
+  const quote = code[source.start!];
+  const semicolon = code[end! - 1] === ';' ? ';' : '';
+  const previewImport = `import ${previewName} from ${quote}${previewPath}${quote}${semicolon}`;
+  const otherSpecifiers = specifiers.filter((specifier) => specifier !== defineMetaSpecifier);
+
+  if (otherSpecifiers.length === 0) {
+    edits.push({ start: start!, end: end!, text: previewImport });
+  } else {
+    const indentation = code.slice(code.lastIndexOf('\n', start! - 1) + 1, start!);
+    edits.push(
+      {
+        start: specifiers[0].start!,
+        end: specifiers.at(-1)!.end!,
+        text: otherSpecifiers
+          .map((specifier) => code.slice(specifier.start!, specifier.end!))
+          .join(', '),
+      },
+      { start: end!, end: end!, text: `\n${indentation}${previewImport}` }
+    );
+  }
+
+  const storyImports: StoryImports = { namespaces: [], stories: [] };
+  for (const node of ast.program.body) {
+    if (t.isImportDeclaration(node) && STORIES_FILE.test(node.source.value)) {
+      const nonStories = findSvelteCsfNonStoryExports(filePath, node.source.value);
+      for (const specifier of node.specifiers) {
+        if (!t.isImportSpecifier(specifier)) {
+          storyImports.namespaces.push({ name: specifier.local.name, nonStories });
+        } else if (!nonStories.includes(importedName(specifier))) {
+          storyImports.stories.push(specifier.local.name);
+        }
+      }
+    }
+  }
+
+  return {
+    code: edits
+      .sort((a, b) => b.start - a.start)
+      .reduce(
+        (result, edit) => result.slice(0, edit.start) + edit.text + result.slice(edit.end),
+        code
+      ),
+    storyImports,
+  };
+}

From 7bc0c90778d3636bcc4523e4d331ed4af486ab77 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Fri, 9 Oct 2026 14:08:18 +0200
Subject: [PATCH 021/326] feat(svelte): run the Svelte sandboxes with CSF
 factories

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 code/lib/cli-storybook/src/sandbox-templates.ts | 9 +++++++++
 code/renderers/svelte/tsconfig.json             | 4 +++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts
index 32b8e604d437..5f00b4dd7647 100644
--- a/code/lib/cli-storybook/src/sandbox-templates.ts
+++ b/code/lib/cli-storybook/src/sandbox-templates.ts
@@ -606,6 +606,9 @@ export const baseTemplates = {
       renderer: '@storybook/svelte',
       builder: '@storybook/builder-vite',
     },
+    modifications: {
+      useCsfFactory: true,
+    },
     skipTasks: ['e2e-tests', 'bench'],
   },
   'svelte-vite/default-ts': {
@@ -616,6 +619,9 @@ export const baseTemplates = {
       renderer: '@storybook/svelte',
       builder: '@storybook/builder-vite',
     },
+    modifications: {
+      useCsfFactory: true,
+    },
     // Remove smoke-test from the list once https://github.com/storybookjs/storybook/issues/19351 is fixed.
     skipTasks: ['smoke-test', 'bench'],
   },
@@ -633,6 +639,9 @@ export const baseTemplates = {
       renderer: '@storybook/svelte',
       builder: '@storybook/builder-vite',
     },
+    modifications: {
+      useCsfFactory: true,
+    },
     skipTasks: ['e2e-tests', 'bench'],
   },
   'angular-cli/default-ts': {
diff --git a/code/renderers/svelte/tsconfig.json b/code/renderers/svelte/tsconfig.json
index d0fce4202173..072b4c3b40b2 100644
--- a/code/renderers/svelte/tsconfig.json
+++ b/code/renderers/svelte/tsconfig.json
@@ -3,7 +3,9 @@
   "compilerOptions": {
     "allowJs": true,
     "module": "ESNext",
-    "verbatimModuleSyntax": true
+    "verbatimModuleSyntax": true,
+    // The template stories import the preview of the sandbox they are linked into
+    "paths": { "#.storybook/preview": ["./src/__test__/svelte-csf-factories/preview.ts"] }
   },
   "include": [
     "src/**/*",

From ef5271a977045e6949fafc885e5f30b15361dbbe Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Fri, 9 Oct 2026 14:08:22 +0200
Subject: [PATCH 022/326] docs: show Svelte in the CSF Next docs

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 docs/api/csf/csf-next.mdx           | 111 +++++++++++++++++++++++++++-
 docs/writing-stories/typescript.mdx |  30 +++++++-
 2 files changed, 136 insertions(+), 5 deletions(-)

diff --git a/docs/api/csf/csf-next.mdx b/docs/api/csf/csf-next.mdx
index e3024b7a2125..dad2ec5d3c72 100644
--- a/docs/api/csf/csf-next.mdx
+++ b/docs/api/csf/csf-next.mdx
@@ -6,17 +6,17 @@ tab:
   title: CSF Next (Preview)
 ---
 
-<If notRenderer={['react', 'vue', 'angular', 'web-components']}>
+<If notRenderer={['react', 'vue', 'angular', 'web-components', 'svelte']}>
 
 <Callout variant="info" icon="🧪">
 
-CSF Next is currently in [preview](../../releases/features.mdx#preview) and only supported in [React](?renderer=react), [Vue](?renderer=vue), [Angular](?renderer=angular), and [Web Components](?renderer=web-components) projects.
+CSF Next is currently in [preview](../../releases/features.mdx#preview) and only supported in [React](?renderer=react), [Vue](?renderer=vue), [Angular](?renderer=angular), [Web Components](?renderer=web-components), and [Svelte](?renderer=svelte) projects.
 
 </Callout>
 
 </If>
 
-<If renderer={['react', 'vue', 'angular', 'web-components']}>
+<If renderer={['react', 'vue', 'angular', 'web-components', 'svelte']}>
 
 <Callout variant="warning" icon="🧪">
 
@@ -47,6 +47,12 @@ export default defineMain({
 });
 ```
 
+<If renderer="svelte">
+
+To index Svelte CSF files, add `svelte` to the file extensions in `stories`, such as `'../src/**/*.stories.@(js|ts|svelte)'`.
+
+</If>
+
 ### `definePreview`
 
 Similarly, the `definePreview` function specifies your project's story configuration. This function is also type-safe and will infer types throughout your project.
@@ -96,6 +102,32 @@ const meta = preview.meta({
 });
 ```
 
+<If renderer="svelte">
+
+In a Svelte CSF file, `preview.meta` replaces `defineMeta`. It returns the meta, which has the `Story` component:
+
+```svelte title="Button.stories.svelte"
+<script module lang="ts">
+  import preview from '../.storybook/preview';
+
+  import Button from './Button.svelte';
+
+  const { Story } = preview.meta({
+    component: Button,
+    parameters: {
+      // type-safe!
+      layout: 'centered',
+    },
+  });
+</script>
+
+<Story name="Primary" args={{ primary: true, label: 'Button' }} />
+```
+
+A Svelte CSF file compiles to CSF Next stories, so a project can use `.stories.svelte` and `.stories.ts` files together.
+
+</If>
+
 <Callout variant="info" icon="💡">
 
 <a name="subpath-imports" />
@@ -220,12 +252,47 @@ export const WithIcon = meta.type<{ args: { icon: string } }>().story({
 
 `meta.type` accepts the same type argument as [`preview.type`](#previewtypemeta), and the two can be combined.
 
+<If renderer="svelte">
+
+In a Svelte CSF file, `meta.type` returns a meta with its own `Story` component. Rename it when you destructure it, and use it for the stories that need the extra args:
+
+```svelte title="Button.stories.svelte"
+<script module lang="ts">
+  import preview from '../.storybook/preview';
+
+  import Button from './Button.svelte';
+  import Icon from './Icon.svelte';
+
+  const meta = preview.meta({ component: Button });
+  const { Story } = meta;
+  const { Story: IconStory } = meta.type<{ args: { icon: string } }>();
+</script>
+
+<Story name="Primary" args={{ label: 'Button' }} />
+
+<!-- 👇 `icon` is typed, and required, in the stories of IconStory only -->
+<IconStory name="With icon" args={{ label: 'Button', icon: 'star' }}>
+  {#snippet template({ icon, ...args })}
+    <Icon name={icon} />
+    <Button {...args} />
+  {/snippet}
+</IconStory>
+```
+
+</If>
+
 An arg you add must be set in that story, unless you declare it as optional (`meta.type<{ args: { icon?: string } }>()`). Args that the meta already sets stay optional, except the ones you redeclare in `meta.type`: the story must set those again, because the meta's value was not checked against the new type.
 
 #### `<Story>.extend`
 
 You can use the `.extend` method to create a new story based on an existing one, with the option to override or add new properties.
 
+<If renderer="svelte">
+
+The stories of a Svelte CSF file have no `.extend` method. Use it in `.stories.ts` files.
+
+</If>
+
 <details>
 <summary>Property merging details</summary>
 
@@ -310,6 +377,12 @@ export const PrimaryDisabled = Primary.extend({
 
 (⚠️ **Experimental**)
 
+<If renderer="svelte">
+
+The stories of a Svelte CSF file have no `.test` method. Use it in `.stories.ts` files.
+
+</If>
+
 A more ergonomic way to define [tests for your stories](../../writing-tests/index.mdx). While this API is still experimental, it is [documented in the RFC to gather feedback](https://github.com/storybookjs/storybook/discussions/30119) and must be enabled via the [`experimentalTestSyntax` feature flag](../main-config/main-config-features.mdx#experimentaltestsyntax).
 
 ```ts title="Button.stories.js|ts"
@@ -349,6 +422,12 @@ If your project has multiple Storybook configurations, run the command with the
 
 It will run through each of the manual upgrade steps below on all of your story files.
 
+<If renderer="svelte">
+
+In Svelte CSF files (`.stories.svelte`), the command changes `defineMeta` to `preview.meta` and imports the preview. The `Story` components stay the same. When a file reuses a story of another stories file, such as `HeaderStories.LoggedIn.args`, the command changes it to `HeaderStories.LoggedIn.input.args`.
+
+</If>
+
 <details>
 <summary>Upgrading from CSF 2 to 3</summary>
 
@@ -455,6 +534,30 @@ import { Button } from './Button';
 
 Note that importing or manually applying the component props type to the meta or stories is no longer necessary. Thanks to the factory function pattern, the types are now inferred automatically.
 
+<If renderer="svelte">
+
+In a Svelte CSF file, import the preview and call `preview.meta` instead of `defineMeta`:
+
+```diff title="Button.stories.svelte"
+<script module lang="ts">
++ import preview from '../.storybook/preview';
+- import { defineMeta } from '@storybook/your-framework';
+
+  import Button from './Button.svelte';
+
++ const { Story } = preview.meta({
+- const { Story } = defineMeta({
+    // ...meta object is unchanged
+  });
+</script>
+
+<!-- ...stories are unchanged -->
+```
+
+With `preview.meta`, a story must set every required arg that the meta doesn't set. This includes the arg that a story template uses, such as `children`.
+
+</If>
+
 <details>
 <summary>Handling complex types</summary>
 
@@ -484,7 +587,7 @@ type CustomProps = React.ComponentProps<typeof Button> & { customProp: string };
 - };
 ```
 
-A type that also holds the props of the component, like the one above, keeps working in React and Vue.
+A type that also holds the props of the component, like the one above, keeps working in React, Vue, and Svelte.
 
 In Angular and Web Components, leave the component class out of the type and only pass your custom args, such as `preview.type<{ args: { customProp: string } }>()`. The args of the component are already inferred, all of them optional. A type that you pass to `preview.type` is used as it is, so a component class would make every one of its members a required arg.
 
diff --git a/docs/writing-stories/typescript.mdx b/docs/writing-stories/typescript.mdx
index e5168827ac33..ba8fa79d574d 100644
--- a/docs/writing-stories/typescript.mdx
+++ b/docs/writing-stories/typescript.mdx
@@ -6,7 +6,7 @@ Writing your stories in [TypeScript](https://www.typescriptlang.org/) makes you
 
 Storybook has built-in TypeScript support, so you can get started with zero configuration required.
 
-<If renderer={['react', 'vue', 'angular', 'web-components']}>
+<If renderer={['react', 'vue', 'angular', 'web-components', 'svelte']}>
 
 <Callout variant="info" icon="💡">
 
@@ -150,6 +150,34 @@ Svelte offers excellent TypeScript support for .svelte files. For example, consi
 
 The same setup works with Svelte stories files too, providing both type safety and autocompletion.
 
+In [CSF Next](../api/csf/csf-next.mdx), `preview.meta` infers the args from the props of the component, in `.stories.svelte` and `.stories.ts` files. A story must set every required prop that the meta doesn't set.
+
+For a [generic component](https://svelte.dev/docs/svelte/typescript#Generic-$props) (using `<script lang="ts" generics="T">`), pass the type argument directly to the component:
+
+```svelte title="GenericList.stories.svelte"
+<script module lang="ts">
+  import preview from '../.storybook/preview';
+
+  import GenericList from './GenericList.svelte';
+
+  const { Story } = preview.meta({
+    // 👇 Pass the type argument directly
+    component: GenericList<{ id: number; name: string }>,
+  });
+</script>
+
+<Story
+  name="Example"
+  args={{
+    items: [{ id: 1, name: 'John Doe' }],
+    // 👇 item is typed as { id: number; name: string }
+    getLabel: (item) => item.name,
+  }}
+/>
+```
+
+To add args that only some stories use, such as an arg that a story template reads, use [`meta.type`](../api/csf/csf-next.mdx#metatypestory). In a Svelte CSF file, it returns another `Story` component with those args.
+
 </If>
 
 <If renderer="angular">

From 93f98df9889b98350349ac8eed4c62714137a6a5 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Fri, 9 Oct 2026 16:28:59 +0200
Subject: [PATCH 023/326] fix(cli): stop retrying a stories glob that matches
 no files without a prompt

With --yes or --glob, the csf-factories automigration asked for the same
glob again and again.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 code/lib/cli-storybook/src/codemod/csf-factories.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/code/lib/cli-storybook/src/codemod/csf-factories.ts b/code/lib/cli-storybook/src/codemod/csf-factories.ts
index 9061edd3db2d..7f327f10434c 100644
--- a/code/lib/cli-storybook/src/codemod/csf-factories.ts
+++ b/code/lib/cli-storybook/src/codemod/csf-factories.ts
@@ -24,14 +24,15 @@ async function runStoriesCodemod(options: {
   glob: string | undefined;
 }) {
   const { dryRun, packageManager, yes, glob, ...codemodOptions } = options;
+  const inSandbox = optionalEnvToBoolean(process.env.IN_STORYBOOK_SANDBOX) ?? false;
+  const promptsForGlob = !glob && !inSandbox && !yes;
   try {
-    const inSandbox = optionalEnvToBoolean(process.env.IN_STORYBOOK_SANDBOX) ?? false;
     let globString = glob ?? '**/*.{stories,story}.{js,jsx,ts,tsx,mjs,mjsx,mts,mtsx,svelte}';
 
     if (!glob && inSandbox) {
       // Sandbox uses limited glob for faster testing (unless glob explicitly provided)
       globString = '{stories,src}/**/{Button,Header,Page,button,header,page}.stories.*';
-    } else if (!glob && !yes) {
+    } else if (promptsForGlob) {
       logger.log('Please enter the glob for your stories to migrate');
       globString = await prompt.text({
         message: 'glob',
@@ -54,7 +55,8 @@ async function runStoriesCodemod(options: {
       { dryRun }
     );
   } catch (err: any) {
-    if (err.message === 'No files matched') {
+    // Ask for another glob. Without a prompt, the same glob would match nothing again.
+    if (err.message === 'No files matched' && promptsForGlob) {
       await runStoriesCodemod(options);
     } else {
       throw err;

From 5c8a1953e1bde7515135bc0396542bef63dad588 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Fri, 9 Oct 2026 16:28:59 +0200
Subject: [PATCH 024/326] fix(svelte-vite): keep the styles of Svelte CSF
 factory files in production builds

vite-plugin-svelte scopes the CSS of a component to its default export, and
a stories file with preview.meta() compiles to a module without one, so the
production build dropped the styles of its <style> block.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 code/frameworks/svelte-vite/src/plugins/svelte-csf.ts | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/code/frameworks/svelte-vite/src/plugins/svelte-csf.ts b/code/frameworks/svelte-vite/src/plugins/svelte-csf.ts
index 9501db88f33b..70cd5aa5dd5d 100644
--- a/code/frameworks/svelte-vite/src/plugins/svelte-csf.ts
+++ b/code/frameworks/svelte-vite/src/plugins/svelte-csf.ts
@@ -30,8 +30,16 @@ export function svelteCsf(): Plugin {
       },
     },
     transform: {
-      filter: { id: /\.stories\.svelte$/ },
+      filter: { id: /\.stories\.svelte(\?svelte&type=style\b.*)?$/ },
       handler(compiledCode, id) {
+        const query = id.indexOf('?');
+        if (query !== -1) {
+          // vite-plugin-svelte keeps the CSS of a component only while its default export is used. A
+          // stories file with `preview.meta()` compiles to stories without a default export, so the
+          // production build would drop its CSS. Keep the CSS while the stories file is used.
+          const cssScopeTo = [id.slice(0, query), undefined] as const;
+          return { code: compiledCode, meta: { vite: { cssScopeTo } } };
+        }
         return transformSvelteCsf({
           filename: id,
           compiledCode,

From e84bda98b7dff29b43b6e6ea0b57e503e96d9750 Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Tue, 13 Oct 2026 11:16:42 +0200
Subject: [PATCH 025/326] docs: include auto docgen generation feature

---
 ...nents-custom-elements-manifest-generate.md |  6 +-
 .../frameworks/web-components-vite.mdx        | 63 ++++++++++++-------
 2 files changed, 43 insertions(+), 26 deletions(-)

diff --git a/docs/_snippets/web-components-custom-elements-manifest-generate.md b/docs/_snippets/web-components-custom-elements-manifest-generate.md
index fa9a37520d16..6d875aa466cb 100644
--- a/docs/_snippets/web-components-custom-elements-manifest-generate.md
+++ b/docs/_snippets/web-components-custom-elements-manifest-generate.md
@@ -1,11 +1,11 @@
 ```shell renderer="web-components" packageManager="npm"
-npx @custom-elements-manifest/analyzer analyze --litelement --globs 'src/**/*.ts'
+npx @custom-elements-manifest/analyzer analyze --globs 'src/**/*.ts'
 ```
 
 ```shell renderer="web-components" packageManager="yarn"
-yarn dlx @custom-elements-manifest/analyzer analyze --litelement --globs 'src/**/*.ts'
+yarn dlx @custom-elements-manifest/analyzer analyze --globs 'src/**/*.ts'
 ```
 
 ```shell renderer="web-components" packageManager="pnpm"
-pnpm dlx @custom-elements-manifest/analyzer analyze --litelement --globs 'src/**/*.ts'
+pnpm dlx @custom-elements-manifest/analyzer analyze --globs 'src/**/*.ts'
 ```
diff --git a/docs/get-started/frameworks/web-components-vite.mdx b/docs/get-started/frameworks/web-components-vite.mdx
index 07446246b26d..700727d005f1 100644
--- a/docs/get-started/frameworks/web-components-vite.mdx
+++ b/docs/get-started/frameworks/web-components-vite.mdx
@@ -42,55 +42,68 @@ You will find the output in the configured `outputDir` (default is `storybook-st
 
 ## Configure
 
-Storybook for Web components with Vite works without extra configuration, but component documentation depends on where Storybook reads your Custom Elements Manifest. The sections below cover the available setup paths and framework options.
+Storybook for Web components with Vite works without extra configuration. It reads your elements from your sources or a Custom Elements Manifest you provide. The sections below cover the available setup paths and framework options.
 
 ### Component documentation
 
-JSDoc comments on your elements, attributes, properties, events, slots and CSS API reach [automatic documentation](../../writing-docs/autodocs.mdx) and the [controls](../../essentials/controls.mdx) table through a Custom Elements Manifest.
+Docgen reads your elements from your sources, or from a Custom Elements Manifest you provide. You choose the generator: Storybook's built-in one reads your sources with no setup, or you provide a manifest produced by the tool you prefer, such as `@custom-elements-manifest/analyzer` or the `@wc-toolkit/cem-generator` CLI. Your JSDoc comments on elements, attributes, properties, events, slots and CSS API reach [automatic documentation](../../writing-docs/autodocs.mdx) and the [controls](../../essentials/controls.mdx) table.
 
-Two paths can read the manifest, and which one you get depends on a single feature flag:
+Two paths provide component documentation, and which one you get depends on a single feature flag:
 
-|                       | [`docgenServer`](../../api/main-config/main-config-features.mdx) on, the default         | flag off                                                              |
-| --------------------- | ---------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
-| Reads the manifest    | on the Storybook server, from the manifest file                                          | in the browser, from a manifest you import in `.storybook/preview.ts` |
-| Configure with        | `framework.options.customElementsManifest` or `package.json#customElements`              | `setCustomElementsManifest()` in the preview                          |
-| Powers                | controls, autodocs, code snippets, and the [components manifest](../../ai/manifests.mdx) | controls and autodocs                                                 |
-| Updates while running | yes, the file is watched                                                                 | no, restart or reload after regenerating the manifest                 |
+|                       | [`docgenServer`](../../api/main-config/main-config-features.mdx) on, the default                             | flag off                                                              |
+| --------------------- | ------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------- |
+| Reads your elements   | on the Storybook server, from your sources or from a manifest file                                           | in the browser, from a manifest you import in `.storybook/preview.ts` |
+| Configure with        | nothing, or `framework.options.customElementsManifest` / `package.json#customElements` to provide a manifest | `setCustomElementsManifest()` in the preview                          |
+| Powers                | controls, autodocs, code snippets, and the [components manifest](../../ai/manifests.mdx)                     | controls and autodocs                                                 |
+| Updates while running | yes, your sources and the manifest file are watched                                                          | no, restart or reload after regenerating the manifest                 |
 
 Server-side extraction is what you get unless you turn the flag off with `features: { docgenServer: false }`. The flag-off column is the path projects created before Storybook 11 use.
 
 Attributes, properties, events, slots, CSS custom properties, CSS parts and CSS states from the manifest become argTypes. Event, slot, part and state arg keys are suffixed, such as `my-change-event`, `default-slot`, `panel-part` and `active-state`, so they never collide with attributes. CSS custom properties keep their `--name` key.
 
-#### Generating a manifest
+#### Choosing a manifest generator
 
-Install and run `@custom-elements-manifest/analyzer` to generate a Custom Elements Manifest:
+Any tool that writes a Custom Elements Manifest (`schemaVersion` 1.x or 2.x) works. Reasons to provide your own manifest instead of using the built-in generator: you already ship one with your package, you want your library's own analyzer plugins (FAST, Stencil, Catalyst), or you want the same manifest in Storybook and in your build.
+
+For example, with `@custom-elements-manifest/analyzer`:
 
 <CodeSnippets path="web-components-custom-elements-manifest-generate.md" />
 
-The manifest must use Custom Elements Manifest `schemaVersion` 1.x or 2.x, generated by `@custom-elements-manifest/analyzer`. Drop `--litelement` for elements that do not extend `LitElement`. Add the command to your `package.json` scripts so it runs before `storybook dev`, or run the analyzer in `--watch` mode next to Storybook.
+The analyzer writes the same manifest format for every library. Pass the plugin flag that matches how your elements declare their attributes: `--litelement` for Lit, `--fast` for FAST, `--stencil` for Stencil, `--catalyst` for Catalyst, and no flag for elements built on `HTMLElement` directly. Without the matching flag, decorator-declared attributes such as Lit's `@property()` are missing from the manifest, and Storybook cannot pair those args with attributes. Add the command to your `package.json` scripts so it runs before `storybook dev`, or run the analyzer in `--watch` mode next to Storybook.
 
 The analyzer writes `custom-elements.json` in the current directory. If your `package.json` has a `customElements` field that points at that file, server-side docgen uses it without more configuration.
 
 #### Server-side extraction
 
-Point Storybook at the manifest file:
+Nothing to set up. Storybook's built-in generator reads the elements your stories import from your TypeScript or JavaScript sources. It understands Lit and plain `HTMLElement` elements and ships with `@storybook/web-components`.
+
+To use a manifest from another generator instead, point Storybook at the file:
 
 <CodeSnippets path="web-components-main-config-custom-elements-manifest.md" />
 
-Storybook resolves manifests in this order:
+Storybook looks up your elements in this order:
+
+1. Manifests you provide:
+   1. `framework.options.customElementsManifest`, relative to the Storybook config directory.
+   2. The `customElements` field in the nearest `package.json`, relative to that `package.json`.
+2. Sources, through the built-in generator, for tags your manifests do not declare:
+   1. The file that defined the tag last time.
+   2. The story file and the files reachable through its imports.
+   3. The preview file and the files reachable through its imports.
+   4. The tsconfig files whose sources contain the tag as a string literal.
 
-- `framework.options.customElementsManifest`, relative to the Storybook config directory
-- The `customElements` field in the nearest `package.json`, relative to that `package.json`
-- Nothing, so server-side docgen is skipped
+Storybook selects the tsconfig for each story file, so monorepos and project references work. For a JavaScript project without a tsconfig, it scans only the story's folder.
 
-When the manifest cannot be resolved and the flag is on, Storybook logs that docgen is skipped and the runtime path still works.
+Editing an element updates its controls and descriptions while Storybook runs. If the generator or TypeScript fails to load, Storybook warns once and manifest docgen keeps working.
 
 If Storybook cannot read complete metadata, it reports the problem in the Controls table for the affected component and in the tools CLI (`npx storybook tools docs show`). These messages do not fail the build.
 
 - Missing manifest file: `Custom Elements Manifest <path> not found yet; docs load once the analyzer writes it`
-- Tag missing from the manifest: `No declaration for "<tag>" was found in <paths>. If the element is new, rerun the custom elements manifest analyzer.`
+- Tag not found in manifests or sources: `No declaration for "<tag>" was found from story file <story> and preview file <preview>. Searched the tsconfig files covering those files: <tsconfigs>. Import the element module in the story or configure customElementsManifest.`
 - Older web-component-analyzer manifest shape: `<path> uses the web-component-analyzer manifest shape. The Storybook docgen server reads Custom Elements Manifests only; generate one with @custom-elements-manifest/analyzer.`
 
+The tag-not-found message includes `and preview file <preview>` only when a preview file exists. `<tsconfigs>` is `none` when no tsconfig covers the files.
+
 If a watched manifest becomes invalid after Storybook has loaded a valid version, Storybook keeps the last valid version and reports a warning that ends with `; using the last valid version`.
 
 For docgen to attach to a story, `meta.component` must be the tag name string, such as `component: 'demo-card'`. Metas without `component` get no docgen, and their stories show the story source in the Code panel.
@@ -158,12 +171,16 @@ These apply to the default server-side extraction path.
 
 The snippets shown in autodocs and the Code panel are generated from your story's source, so they show the story as you wrote it. Changing a value in the controls table updates the rendered component but not the snippet next to it.
 
-### Elements must be declared in the manifest
+### Elements must be reachable from the story
 
-A `meta.component` whose tag is not in the manifest gets the `No declaration` message listed above and no controls.
+The generator follows imports from your story file and preview file. An element registered in a module neither file imports is not found. Import the element module, or provide a manifest.
 
 Template-function components, like the `Button`, `Header` and `Page` the starter generates, have no custom element and therefore no docgen. Their Code panel shows the story source.
 
+### The built-in generator reads Lit and plain elements
+
+Elements built with FAST, Stencil or Catalyst are not read from sources. Provide a manifest from the analyzer with the matching plugin, see [Choosing a manifest generator](#choosing-a-manifest-generator).
+
 ### Properties without an attribute cannot be shown in HTML
 
 Properties with no paired attribute are listed in the snippet warning. Bind them through an attribute, or write the snippet yourself with `parameters.docs.source.code`.
@@ -194,9 +211,9 @@ The available options are:
 
 Type: `string | string[]`
 
-Default: the `customElements` field of your `package.json`
+Default: the `customElements` field of your `package.json`, else none; elements are generated from sources
 
-Path or paths to Custom Elements Manifest files, relative to the Storybook config directory. This option is ignored when `docgenServer` is off.
+Path or paths to Custom Elements Manifest files, relative to the Storybook config directory. Use it to bring a manifest from the generator of your choice; elements it does not declare are still read from your sources. This option is ignored when `docgenServer` is off.
 
 #### `docgen`
 

From b4a231283c3a9171c23cb2373fb4031dfee50442 Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Tue, 13 Oct 2026 11:25:42 +0200
Subject: [PATCH 026/326] doc: remove docgen.typeproperty

---
 .../frameworks/web-components-vite.mdx         | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/docs/get-started/frameworks/web-components-vite.mdx b/docs/get-started/frameworks/web-components-vite.mdx
index 700727d005f1..0c2c027c788d 100644
--- a/docs/get-started/frameworks/web-components-vite.mdx
+++ b/docs/get-started/frameworks/web-components-vite.mdx
@@ -177,10 +177,6 @@ The generator follows imports from your story file and preview file. An element
 
 Template-function components, like the `Button`, `Header` and `Page` the starter generates, have no custom element and therefore no docgen. Their Code panel shows the story source.
 
-### The built-in generator reads Lit and plain elements
-
-Elements built with FAST, Stencil or Catalyst are not read from sources. Provide a manifest from the analyzer with the matching plugin, see [Choosing a manifest generator](#choosing-a-manifest-generator).
-
 ### Properties without an attribute cannot be shown in HTML
 
 Properties with no paired attribute are listed in the snippet warning. Bind them through an attribute, or write the snippet yourself with `parameters.docs.source.code`.
@@ -215,20 +211,6 @@ Default: the `customElements` field of your `package.json`, else none; elements
 
 Path or paths to Custom Elements Manifest files, relative to the Storybook config directory. Use it to bring a manifest from the generator of your choice; elements it does not declare are still read from your sources. This option is ignored when `docgenServer` is off.
 
-#### `docgen`
-
-Type: `{ typeProperty?: string }`
-
-Configure how Storybook reads Custom Elements Manifest metadata.
-
-##### `docgen.typeProperty`
-
-Type: `string`
-
-Default: `'parsedType'`
-
-The manifest key holding analyzer-resolved type text. Use this when an analyzer plugin writes resolved type text under another key.
-
 #### `builder`
 
 Type: `Record<string, any>`

From 029d0b6a1ca4621aa6a55263bbf01ede70c21478 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <dev@valentinpalkovic.dev>
Date: Tue, 13 Oct 2026 15:25:12 +0200
Subject: [PATCH 027/326] Manager: Rename jumpToComponent to jumpToSubtree

The jump also stops on docs pages without a component, so the name and
the menu and shortcut labels now say so. The shortcut keys keep their
names so customized bindings carry over.
---
 MIGRATION.md                                         |  4 ++++
 code/core/src/manager-api/modules/shortcuts.ts       |  4 ++--
 code/core/src/manager-api/modules/stories.ts         | 11 ++++++-----
 code/core/src/manager-api/tests/stories.test.ts      | 12 ++++++------
 .../src/manager/components/sidebar/Menu.stories.tsx  |  2 +-
 code/core/src/manager/container/Menu.tsx             |  8 ++++----
 code/core/src/manager/settings/shortcuts.tsx         |  4 ++--
 7 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 55c5caf12f23..8a0e46c305e9 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -939,6 +939,10 @@ Functions passed to `sidebar.renderLabel` and sidebar filters receive the `docs`
 Sidebar search lists these pages under their own name, for example `Introduction` instead of `Docs` under `Introduction`.
 `api.selectStory('Introduction')` and `linkTo('Introduction')` still resolve to the docs page.
 
+`api.jumpToComponent` is renamed to `api.jumpToSubtree`, because it now also stops on docs pages that are not attached to a component.
+Its menu entries and shortcut labels read `Previous component or page` and `Next component or page`.
+The shortcut keys `prevComponent` and `nextComponent` keep their names, so customized shortcuts carry over.
+
 ### Test runner support ended
 
 Official support for [`@storybook/test-runner`](https://github.com/storybookjs/test-runner) has ended. The package stays published and accepts Storybook 11 and later as a peer dependency, so existing setups can keep running it at their own risk, but it no longer receives fixes or compatibility updates and prints a warning on every run.
diff --git a/code/core/src/manager-api/modules/shortcuts.ts b/code/core/src/manager-api/modules/shortcuts.ts
index 26aab9162d61..4a1f4d04f4e8 100644
--- a/code/core/src/manager-api/modules/shortcuts.ts
+++ b/code/core/src/manager-api/modules/shortcuts.ts
@@ -355,12 +355,12 @@ export const init: ModuleFn = ({ store, fullAPI, provider }) => {
         }
 
         case 'nextComponent': {
-          fullAPI.jumpToComponent(1);
+          fullAPI.jumpToSubtree(1);
           break;
         }
 
         case 'prevComponent': {
-          fullAPI.jumpToComponent(-1);
+          fullAPI.jumpToSubtree(-1);
           break;
         }
 
diff --git a/code/core/src/manager-api/modules/stories.ts b/code/core/src/manager-api/modules/stories.ts
index 8b360b8cbc04..2d9ff2cc9119 100644
--- a/code/core/src/manager-api/modules/stories.ts
+++ b/code/core/src/manager-api/modules/stories.ts
@@ -169,13 +169,14 @@ export interface SubAPI {
   setIndex: (index: API_PreparedStoryIndex) => Promise<void>;
 
   /**
-   * Jumps to the next or previous component in the index.
+   * Jumps to the first entry of the next or previous component, or to the next or previous docs
+   * page that is not attached to a component.
    *
-   * @param {Direction} direction - The direction to jump. Use -1 to jump to the previous component,
-   *   and 1 to jump to the next component.
+   * @param {Direction} direction - The direction to jump. Use -1 to jump backwards and 1 to jump
+   *   forwards.
    * @returns {void}
    */
-  jumpToComponent: (direction: Direction) => void;
+  jumpToSubtree: (direction: Direction) => void;
   /**
    * Jumps to the next or previous story in the story index.
    *
@@ -557,7 +558,7 @@ export const init: ModuleFn<SubAPI, SubState> = ({
       // so this strange logic needs to be here until various client code is updated.
       return parameters || undefined;
     },
-    jumpToComponent: (direction) => {
+    jumpToSubtree: (direction) => {
       const { filteredIndex, storyId, refs, refId } = store.getState();
       const story = api.getData(storyId, refId);
 
diff --git a/code/core/src/manager-api/tests/stories.test.ts b/code/core/src/manager-api/tests/stories.test.ts
index dd04aa3d7fe1..04589b463450 100644
--- a/code/core/src/manager-api/tests/stories.test.ts
+++ b/code/core/src/manager-api/tests/stories.test.ts
@@ -1047,7 +1047,7 @@ describe('stories API', () => {
       expect(result).toEqual(['component-a--story-1', 'component-a--story-2']);
     });
   });
-  describe('jumpToComponent', () => {
+  describe('jumpToSubtree', () => {
     it('works forward', () => {
       const initialState = { path: '/story/a--1', storyId: 'a--1', viewMode: 'story' };
       const moduleArgs = createMockModuleArgs({ initialState });
@@ -1055,7 +1055,7 @@ describe('stories API', () => {
       const { navigate } = moduleArgs;
 
       api.setIndex({ v: 5, entries: navigationEntries });
-      api.jumpToComponent(1);
+      api.jumpToSubtree(1);
       expect(navigate).toHaveBeenCalledWith('/story/b-c--1', undefined);
     });
     it('works backwards', () => {
@@ -1069,7 +1069,7 @@ describe('stories API', () => {
       const { navigate } = moduleArgs;
 
       api.setIndex({ v: 5, entries: navigationEntries });
-      api.jumpToComponent(-1);
+      api.jumpToSubtree(-1);
       expect(navigate).toHaveBeenCalledWith('/story/a--1', undefined);
     });
     it('does nothing if you are in the last component and go forward', () => {
@@ -1083,7 +1083,7 @@ describe('stories API', () => {
       const { navigate } = moduleArgs;
 
       api.setIndex({ v: 5, entries: navigationEntries });
-      api.jumpToComponent(1);
+      api.jumpToSubtree(1);
       expect(navigate).not.toHaveBeenCalled();
     });
     it('lands on an unattached docs page', () => {
@@ -1106,7 +1106,7 @@ describe('stories API', () => {
           },
         },
       });
-      api.jumpToComponent(1);
+      api.jumpToSubtree(1);
       expect(navigate).toHaveBeenCalledWith('/docs/intro--docs', undefined);
     });
     it('does nothing if you are at the first component and go backward', () => {
@@ -1116,7 +1116,7 @@ describe('stories API', () => {
       const { navigate } = moduleArgs;
 
       api.setIndex({ v: 5, entries: navigationEntries });
-      api.jumpToComponent(-1);
+      api.jumpToSubtree(-1);
       expect(navigate).not.toHaveBeenCalled();
     });
   });
diff --git a/code/core/src/manager/components/sidebar/Menu.stories.tsx b/code/core/src/manager/components/sidebar/Menu.stories.tsx
index 802db4dacadc..774cf8f61e9a 100644
--- a/code/core/src/manager/components/sidebar/Menu.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Menu.stories.tsx
@@ -35,7 +35,7 @@ const getAPIMocks = () => ({
   toggleNav: fn().mockName('api::toggleNav'),
   toggleToolbar: fn().mockName('api::toggleToolbar'),
   togglePanel: fn().mockName('api::togglePanel'),
-  jumpToComponent: fn().mockName('api::jumpToComponent'),
+  jumpToSubtree: fn().mockName('api::jumpToSubtree'),
   jumpToStory: fn().mockName('api::jumpToStory'),
   emit: fn().mockName('api::emit'),
 });
diff --git a/code/core/src/manager/container/Menu.tsx b/code/core/src/manager/container/Menu.tsx
index ed647eb8920a..fca6b41b36c9 100644
--- a/code/core/src/manager/container/Menu.tsx
+++ b/code/core/src/manager/container/Menu.tsx
@@ -131,8 +131,8 @@ export const useMenu = ({
   const up = useMemo(
     () => ({
       id: 'up',
-      title: 'Previous component',
-      onClick: () => api.jumpToComponent(-1),
+      title: 'Previous component or page',
+      onClick: () => api.jumpToSubtree(-1),
       right: enableShortcuts ? <Shortcut keys={shortcutKeys.prevComponent} /> : null,
       icon: <></>,
     }),
@@ -142,8 +142,8 @@ export const useMenu = ({
   const down = useMemo(
     () => ({
       id: 'down',
-      title: 'Next component',
-      onClick: () => api.jumpToComponent(1),
+      title: 'Next component or page',
+      onClick: () => api.jumpToSubtree(1),
       right: enableShortcuts ? <Shortcut keys={shortcutKeys.nextComponent} /> : null,
       icon: <></>,
     }),
diff --git a/code/core/src/manager/settings/shortcuts.tsx b/code/core/src/manager/settings/shortcuts.tsx
index 150339d30e2c..e024010c5a6c 100644
--- a/code/core/src/manager/settings/shortcuts.tsx
+++ b/code/core/src/manager/settings/shortcuts.tsx
@@ -124,8 +124,8 @@ const shortcutLabels = {
   focusNav: 'Focus sidebar',
   focusIframe: 'Focus canvas',
   focusPanel: 'Focus addons',
-  prevComponent: 'Previous component',
-  nextComponent: 'Next component',
+  prevComponent: 'Previous component or page',
+  nextComponent: 'Next component or page',
   prevStory: 'Previous story',
   nextStory: 'Next story',
   shortcutsPage: 'Go to shortcuts page',

From 9a7c85c1bf6dcd7c758e4e33bf593cfa1249f5d8 Mon Sep 17 00:00:00 2001
From: Mohamed Saad <mohamed.tarif999@gmail.com>
Date: Wed, 14 Oct 2026 16:21:44 +0300
Subject: [PATCH 028/326] feat(angular-cm): read selector and standalone from
 compiled component declarations

---
 .../manager/declarations/button-theme.d.ts    |   3 +
 .../declarations/button.component.d.ts        |  27 +++
 .../manager/declarations/index.d.ts           |   2 +
 .../manager/declarations/tsconfig.json        |  14 ++
 .../src/analyzer/analyze-file.test.ts         |  28 +++
 .../angular-cm/src/analyzer/analyze-file.ts   |  35 +--
 .../analyzer/component-declaration.test.ts    | 218 ++++++++++++++++++
 .../src/analyzer/component-declaration.ts     |  95 ++++++++
 .../lib/angular-cm/src/analyzer/decorators.ts |  16 +-
 code/lib/angular-cm/src/manager.test.ts       |  24 ++
 code/lib/angular-cm/src/project.ts            |  11 +-
 11 files changed, 449 insertions(+), 24 deletions(-)
 create mode 100644 code/lib/angular-cm/src/__testfixtures__/manager/declarations/button-theme.d.ts
 create mode 100644 code/lib/angular-cm/src/__testfixtures__/manager/declarations/button.component.d.ts
 create mode 100644 code/lib/angular-cm/src/__testfixtures__/manager/declarations/index.d.ts
 create mode 100644 code/lib/angular-cm/src/__testfixtures__/manager/declarations/tsconfig.json
 create mode 100644 code/lib/angular-cm/src/analyzer/component-declaration.test.ts
 create mode 100644 code/lib/angular-cm/src/analyzer/component-declaration.ts

diff --git a/code/lib/angular-cm/src/__testfixtures__/manager/declarations/button-theme.d.ts b/code/lib/angular-cm/src/__testfixtures__/manager/declarations/button-theme.d.ts
new file mode 100644
index 000000000000..cbca00ef0dd7
--- /dev/null
+++ b/code/lib/angular-cm/src/__testfixtures__/manager/declarations/button-theme.d.ts
@@ -0,0 +1,3 @@
+export declare class ButtonTheme {
+  accent: string;
+}
diff --git a/code/lib/angular-cm/src/__testfixtures__/manager/declarations/button.component.d.ts b/code/lib/angular-cm/src/__testfixtures__/manager/declarations/button.component.d.ts
new file mode 100644
index 000000000000..6bc2b1946344
--- /dev/null
+++ b/code/lib/angular-cm/src/__testfixtures__/manager/declarations/button.component.d.ts
@@ -0,0 +1,27 @@
+// Generated by Angular 21's ngc in partial-compilation mode, as ng-packagr publishes it, then formatted.
+import { ElementRef } from '@angular/core';
+import * as i0 from '@angular/core';
+export declare class ButtonComponent {
+  private elementRef;
+  private innerLabel;
+  get label(): string;
+  /** Text shown inside the button. */
+  set label(value: string);
+  disabled: boolean;
+  constructor(elementRef: ElementRef<HTMLElement>);
+  static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<
+    ButtonComponent,
+    'my-button, [my-button]',
+    never,
+    {
+      label: { alias: 'label'; required: false };
+      disabled: { alias: 'disabled'; required: false };
+    },
+    {},
+    never,
+    ['my-icon', '*'],
+    false,
+    never
+  >;
+}
diff --git a/code/lib/angular-cm/src/__testfixtures__/manager/declarations/index.d.ts b/code/lib/angular-cm/src/__testfixtures__/manager/declarations/index.d.ts
new file mode 100644
index 000000000000..965e937db246
--- /dev/null
+++ b/code/lib/angular-cm/src/__testfixtures__/manager/declarations/index.d.ts
@@ -0,0 +1,2 @@
+export { ButtonComponent } from './button.component';
+export { ButtonTheme } from './button-theme';
diff --git a/code/lib/angular-cm/src/__testfixtures__/manager/declarations/tsconfig.json b/code/lib/angular-cm/src/__testfixtures__/manager/declarations/tsconfig.json
new file mode 100644
index 000000000000..12756f0676cb
--- /dev/null
+++ b/code/lib/angular-cm/src/__testfixtures__/manager/declarations/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "target": "ES2022",
+    "strict": true,
+    "noEmit": true,
+    "allowImportingTsExtensions": true,
+    "skipLibCheck": true,
+    "types": []
+  },
+  "include": ["./*.ts"]
+}
diff --git a/code/lib/angular-cm/src/analyzer/analyze-file.test.ts b/code/lib/angular-cm/src/analyzer/analyze-file.test.ts
index da8b217859d5..dac427e916b0 100644
--- a/code/lib/angular-cm/src/analyzer/analyze-file.test.ts
+++ b/code/lib/angular-cm/src/analyzer/analyze-file.test.ts
@@ -6,6 +6,7 @@
  *     @Component / @Directive  -> components / directives, members split into
  *                                 inputsClass, outputsClass, propertiesClass, methodsClass
  *     @Pipe / @Injectable      -> pipes / injectables, members split into properties, methods
+ *     .d.ts with compiled ɵcmp -> components, as above
  *     no Angular decorator     -> classes
  *     @NgModule or @ignore     -> dropped
  *
@@ -83,6 +84,33 @@ describe('which classes a file yields', () => {
     expect(meta.pipes[0].ngname).toBe('sbFormat');
   });
 
+  it('files a .d.ts class Angular compiled as a component under `components`', () => {
+    const meta = analyzeFiles('button.component.d.ts', {
+      'button.component.d.ts': `
+        import * as i0 from '@angular/core';
+
+        export declare class ButtonComponent {
+          label: string;
+          static ɵcmp: i0.ɵɵComponentDeclaration<
+            ButtonComponent, 'my-button', never, {}, {}, never, never, false
+          >;
+        }
+
+        export declare class ButtonTheme {
+          accent: string;
+        }
+      `,
+    });
+
+    expect(names(meta.components)).toEqual(['ButtonComponent']);
+    expect(names(meta.classes)).toEqual(['ButtonTheme']);
+    expect(meta.components[0]).toMatchObject({
+      type: 'component',
+      selector: 'my-button',
+      standalone: false,
+    });
+  });
+
   it('drops an @NgModule, which declares no bindable surface of its own', () => {
     const meta = analyze(`
       import { NgModule } from '@angular/core';
diff --git a/code/lib/angular-cm/src/analyzer/analyze-file.ts b/code/lib/angular-cm/src/analyzer/analyze-file.ts
index 9c1684754f18..72c18e1127c9 100644
--- a/code/lib/angular-cm/src/analyzer/analyze-file.ts
+++ b/code/lib/angular-cm/src/analyzer/analyze-file.ts
@@ -7,6 +7,7 @@ import type { AngularFileMeta } from '../types.ts';
 import { resolvedSymbol, type AnalyzerContext } from './context.ts';
 import type { DocumentedClassKind } from './members.ts';
 import { collectClassMembers } from './class-members.ts';
+import { type ComponentMetadata, readComponentDeclaration } from './component-declaration.ts';
 import { decoratorObjectArg, getDecorators, objectProperty, stringOption } from './decorators.ts';
 import { getJsDocDescription, getJsDocTagsField, hasJsDocTag } from './jsdoc.ts';
 import { TypeIndex } from './type-index.ts';
@@ -53,26 +54,22 @@ export function analyzeSourceFile(
       logger.debug(`[angular-cm] ${statement.name.text} left out of docgen: an @NgModule`);
       continue;
     }
+    const declared = kind === 'class' ? readComponentDeclaration(ctx, statement) : undefined;
+    const recordKind = declared ? 'component' : kind;
     const name = statement.name.text;
     const file = sourceFile.fileName;
-    const members = collectClassMembers(ctx, statement, kind);
+    const members = collectClassMembers(ctx, statement, recordKind);
     const common = {
       file,
       ...getJsDocDescription(ts, statement),
       ...getJsDocTagsField(ts, statement),
     };
 
-    if (kind === 'component' || kind === 'directive') {
-      const metadata = decoratorObjectArg(
-        ctx,
-        statement,
-        kind === 'component' ? 'Component' : 'Directive'
-      );
-      const selector = metadata && decoratorSelector(ctx, metadata);
-      const standalone = metadata && decoratorStandalone(ctx, metadata);
+    if (recordKind === 'component' || recordKind === 'directive') {
+      const { selector, standalone } = declared ?? decoratorMetadata(ctx, statement, recordKind);
       const record: Directive & typeof common & { selector?: string; standalone?: boolean } = {
         name,
-        type: kind,
+        type: recordKind,
         ...(selector === undefined ? {} : { selector }),
         ...(standalone === undefined ? {} : { standalone }),
         inputsClass: members.inputs,
@@ -81,8 +78,8 @@ export function analyzeSourceFile(
         methodsClass: members.methods,
         ...common,
       };
-      (kind === 'component' ? meta.components : meta.directives).push(record);
-    } else if (kind === 'pipe') {
+      (recordKind === 'component' ? meta.components : meta.directives).push(record);
+    } else if (recordKind === 'pipe') {
       const record: Pipe & typeof common = {
         name,
         ngname: pipeName(ctx, statement) ?? name,
@@ -92,7 +89,7 @@ export function analyzeSourceFile(
         ...common,
       };
       meta.pipes.push(record);
-    } else if (kind === 'injectable') {
+    } else if (recordKind === 'injectable') {
       const record: Injectable & typeof common = {
         name,
         type: 'injectable',
@@ -141,6 +138,18 @@ const classify = (ctx: AnalyzerContext, node: tsModule.ClassDeclaration): ClassK
   return 'class';
 };
 
+const decoratorMetadata = (
+  ctx: AnalyzerContext,
+  node: tsModule.ClassDeclaration,
+  kind: 'component' | 'directive'
+): ComponentMetadata => {
+  const metadata = decoratorObjectArg(ctx, node, kind === 'component' ? 'Component' : 'Directive');
+  return {
+    selector: metadata && decoratorSelector(ctx, metadata),
+    standalone: metadata && decoratorStandalone(ctx, metadata),
+  };
+};
+
 const decoratorSelector = (
   ctx: AnalyzerContext,
   metadata: tsModule.ObjectLiteralExpression
diff --git a/code/lib/angular-cm/src/analyzer/component-declaration.test.ts b/code/lib/angular-cm/src/analyzer/component-declaration.test.ts
new file mode 100644
index 000000000000..6d8c1a90bffe
--- /dev/null
+++ b/code/lib/angular-cm/src/analyzer/component-declaration.test.ts
@@ -0,0 +1,218 @@
+import { describe, expect, it } from 'vitest';
+
+import { analyzeFiles, analyzeInline, names } from './__testutils__/inline-source.ts';
+
+const analyzeDeclaration = (source: string, extraFiles: Record<string, string> = {}) =>
+  analyzeFiles('button.component.d.ts', { 'button.component.d.ts': source, ...extraFiles });
+
+const declaring = (typeArguments: string) => `
+  import * as i0 from '@angular/core';
+
+  export declare class ButtonComponent {
+    static ɵcmp: i0.ɵɵComponentDeclaration<${typeArguments}>;
+  }
+`;
+
+const declaringMember = (member: string) => `
+  import * as i0 from '@angular/core';
+
+  export declare class OtherComponent {}
+
+  export declare class ButtonComponent {
+    ${member}
+  }
+`;
+
+const MODERN_ARGUMENTS = `ButtonComponent, 'my-button', never, {}, {}, never, never, true`;
+
+describe('a component compiled into a .d.ts declaration', () => {
+  it.each([true, false])('reads the selector and `standalone: %s` from `ɵcmp`', (standalone) => {
+    const meta = analyzeDeclaration(`
+      import * as i0 from '@angular/core';
+
+      export declare class ButtonComponent {
+        static ɵcmp: i0.ɵɵComponentDeclaration<
+          ButtonComponent,
+          'my-button',
+          never,
+          {},
+          {},
+          never,
+          never,
+          ${standalone}
+        >;
+      }
+    `);
+
+    expect(meta.classes).toEqual([]);
+    expect(meta.components).toEqual([
+      expect.objectContaining({
+        name: 'ButtonComponent',
+        type: 'component',
+        selector: 'my-button',
+        standalone,
+      }),
+    ]);
+  });
+
+  it('reads a seven-argument declaration, the shape from before standalone existed, as non-standalone', () => {
+    const [component] = analyzeDeclaration(
+      declaring(`ButtonComponent, 'my-button', never, {}, {}, never, never`)
+    ).components;
+
+    expect(component).toMatchObject({ selector: 'my-button', standalone: false });
+  });
+
+  it('ignores the host-directive and signal arguments newer Angular versions append', () => {
+    const [component] = analyzeDeclaration(
+      declaring(`ButtonComponent, 'my-button', never, {}, {}, never, never, false, never, true`)
+    ).components;
+
+    expect(component).toMatchObject({ selector: 'my-button', standalone: false });
+  });
+
+  it.each(['boolean', 'Standalone'])(
+    'leaves standalone unknown when its argument is `%s` rather than a boolean literal',
+    (argument) => {
+      const [component] = analyzeDeclaration(`
+        type Standalone = true;
+        ${declaring(`ButtonComponent, 'my-button', never, {}, {}, never, never, ${argument}`)}
+      `).components;
+
+      expect(component).toMatchObject({ type: 'component', selector: 'my-button' });
+      expect(component).not.toHaveProperty('standalone');
+    }
+  );
+
+  it('keeps `ng-component`, which Angular also binds when it stands in for an omitted selector', () => {
+    const [component] = analyzeDeclaration(
+      declaring(`ButtonComponent, 'ng-component', never, {}, {}, never, never, false`)
+    ).components;
+
+    expect(component).toMatchObject({ selector: 'ng-component', standalone: false });
+  });
+
+  it('reports no selector when it is not a string literal', () => {
+    const [component] = analyzeDeclaration(
+      declaring(`ButtonComponent, string, never, {}, {}, never, never, true`)
+    ).components;
+
+    expect(component).toMatchObject({ type: 'component', standalone: true });
+    expect(component).not.toHaveProperty('selector');
+  });
+
+  it('reads a generic component, which Angular names with `any` type arguments', () => {
+    const [component] = analyzeDeclaration(`
+      import * as i0 from '@angular/core';
+
+      export declare class TableComponent<T> {
+        static ɵcmp: i0.ɵɵComponentDeclaration<
+          TableComponent<any>, 'my-table', never, {}, {}, never, never, true
+        >;
+      }
+    `).components;
+
+    expect(component).toMatchObject({ name: 'TableComponent', selector: 'my-table' });
+  });
+
+  it.each([
+    [
+      'a named import',
+      `import { ɵɵComponentDeclaration } from '@angular/core';`,
+      'ɵɵComponentDeclaration',
+    ],
+    [
+      'a renamed type import',
+      `import type { ɵɵComponentDeclaration as Declaration } from '@angular/core';`,
+      'Declaration',
+    ],
+  ])('follows %s of the declaration type', (_, importStatement, typeName) => {
+    const [component] = analyzeDeclaration(`
+      ${importStatement}
+
+      export declare class ButtonComponent {
+        static ɵcmp: ${typeName}<${MODERN_ARGUMENTS}>;
+      }
+    `).components;
+
+    expect(component).toMatchObject({ selector: 'my-button', standalone: true });
+  });
+
+  it('documents its instance members as the properties of a component', () => {
+    const [component] = analyzeDeclaration(`
+      import * as i0 from '@angular/core';
+
+      export declare class ButtonComponent {
+        label: string;
+        static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
+        static ɵcmp: i0.ɵɵComponentDeclaration<${MODERN_ARGUMENTS}>;
+      }
+    `).components;
+
+    expect(names(component.propertiesClass)).toEqual(['label']);
+  });
+});
+
+describe('a .d.ts class whose `ɵcmp` is not an Angular component declaration', () => {
+  const expectPlainClass = (meta: ReturnType<typeof analyzeDeclaration>) => {
+    expect(meta.components).toEqual([]);
+    expect(names(meta.classes)).toContain('ButtonComponent');
+  };
+
+  it.each([
+    ['a type that is not a declaration', 'static ɵcmp: unknown;'],
+    ['no type arguments', 'static ɵcmp: i0.ɵɵComponentDeclaration;'],
+    [
+      'fewer type arguments than any Angular version emits',
+      `static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, 'my-button'>;`,
+    ],
+    [
+      'a declaration of another class',
+      `static ɵcmp: i0.ɵɵComponentDeclaration<OtherComponent, 'my-button', never, {}, {}, never, never, true>;`,
+    ],
+    [
+      'a directive declaration',
+      `static ɵcmp: i0.ɵɵDirectiveDeclaration<ButtonComponent, 'my-button', never, {}, {}, never, never, true>;`,
+    ],
+    ['an instance member', `ɵcmp: i0.ɵɵComponentDeclaration<${MODERN_ARGUMENTS}>;`],
+  ])('stays a plain class when `ɵcmp` has %s', (_, member) => {
+    expectPlainClass(analyzeDeclaration(declaringMember(member)));
+  });
+
+  it('does not mistake a locally declared `ɵɵComponentDeclaration` for Angular', () => {
+    expectPlainClass(
+      analyzeDeclaration(`
+        type ɵɵComponentDeclaration<T, S, E, I, O, Q, N, IsStandalone> = unknown;
+
+        export declare class ButtonComponent {
+          static ɵcmp: ɵɵComponentDeclaration<${MODERN_ARGUMENTS}>;
+        }
+      `)
+    );
+  });
+
+  it('does not mistake a same-named export of another module for Angular', () => {
+    expectPlainClass(
+      analyzeDeclaration(declaring(MODERN_ARGUMENTS).replace(`'@angular/core'`, `'./fake-core'`), {
+        'fake-core.d.ts': `
+          export type ɵɵComponentDeclaration<T, S, E, I, O, Q, N, IsStandalone> = unknown;
+        `,
+      })
+    );
+  });
+
+  it('does not read a declaration type whose module does not resolve', () => {
+    expectPlainClass(
+      analyzeDeclaration(
+        declaring(MODERN_ARGUMENTS).replace(`'@angular/core'`, `'@angular/not-installed'`)
+      )
+    );
+  });
+
+  it('reads `ɵcmp` from declaration files only, never from source', () => {
+    const meta = analyzeInline(declaring(MODERN_ARGUMENTS).replace('export declare', 'export'));
+
+    expect(meta.components).toEqual([]);
+    expect(names(meta.classes)).toEqual(['ButtonComponent']);
+  });
+});
diff --git a/code/lib/angular-cm/src/analyzer/component-declaration.ts b/code/lib/angular-cm/src/analyzer/component-declaration.ts
new file mode 100644
index 000000000000..0a158112c3cb
--- /dev/null
+++ b/code/lib/angular-cm/src/analyzer/component-declaration.ts
@@ -0,0 +1,95 @@
+import type * as ts from 'typescript';
+
+import { resolvedSymbol, type AnalyzerContext } from './context.ts';
+import { isDeclaredInAngularCore } from './decorators.ts';
+
+export interface ComponentMetadata {
+  selector: string | undefined;
+  standalone: boolean | undefined;
+}
+
+// Angular 12-13 emit seven type arguments; Angular 14 introduced standalone as the eighth.
+const PRE_STANDALONE_ARGUMENT_COUNT = 7;
+
+// A published library's `.d.ts` keeps a class's `@Component` only as this compiled `ɵcmp` type.
+export const readComponentDeclaration = (
+  ctx: AnalyzerContext,
+  classNode: ts.ClassDeclaration
+): ComponentMetadata | undefined => {
+  if (!classNode.getSourceFile().isDeclarationFile) {
+    return undefined;
+  }
+  const type = staticCmpType(ctx, classNode);
+  const typeArguments = type?.typeArguments;
+  if (
+    !type ||
+    !typeArguments ||
+    typeArguments.length < PRE_STANDALONE_ARGUMENT_COUNT ||
+    !isAngularComponentDeclaration(ctx, type.typeName) ||
+    !referencesClass(ctx, typeArguments[0], classNode)
+  ) {
+    return undefined;
+  }
+  const standaloneArgument = typeArguments[PRE_STANDALONE_ARGUMENT_COUNT];
+  return {
+    selector: selectorArgument(ctx, typeArguments[1]),
+    standalone: standaloneArgument ? booleanArgument(ctx, standaloneArgument) : false,
+  };
+};
+
+const staticCmpType = (
+  { ts }: AnalyzerContext,
+  classNode: ts.ClassDeclaration
+): ts.TypeReferenceNode | undefined => {
+  for (const member of classNode.members) {
+    if (
+      ts.isPropertyDeclaration(member) &&
+      ts.isIdentifier(member.name) &&
+      member.name.text === 'ɵcmp' &&
+      ts.getModifiers(member)?.some((modifier) => modifier.kind === ts.SyntaxKind.StaticKeyword) &&
+      member.type &&
+      ts.isTypeReferenceNode(member.type)
+    ) {
+      return member.type;
+    }
+  }
+  return undefined;
+};
+
+const entityIdentifier = ({ ts }: AnalyzerContext, name: ts.EntityName): ts.Identifier =>
+  ts.isQualifiedName(name) ? name.right : name;
+
+const isAngularComponentDeclaration = (ctx: AnalyzerContext, typeName: ts.EntityName): boolean => {
+  const symbol = resolvedSymbol(ctx, entityIdentifier(ctx, typeName));
+  return symbol?.name === 'ɵɵComponentDeclaration' && isDeclaredInAngularCore(symbol);
+};
+
+const referencesClass = (
+  ctx: AnalyzerContext,
+  argument: ts.TypeNode,
+  classNode: ts.ClassDeclaration
+): boolean => {
+  if (!ctx.ts.isTypeReferenceNode(argument) || !classNode.name) {
+    return false;
+  }
+  const classSymbol = ctx.checker.getSymbolAtLocation(classNode.name);
+  return (
+    classSymbol !== undefined &&
+    resolvedSymbol(ctx, entityIdentifier(ctx, argument.typeName)) === classSymbol
+  );
+};
+
+const selectorArgument = ({ ts }: AnalyzerContext, argument: ts.TypeNode): string | undefined =>
+  ts.isLiteralTypeNode(argument) && ts.isStringLiteral(argument.literal)
+    ? argument.literal.text
+    : undefined;
+
+const booleanArgument = ({ ts }: AnalyzerContext, argument: ts.TypeNode): boolean | undefined => {
+  if (!ts.isLiteralTypeNode(argument)) {
+    return undefined;
+  }
+  if (argument.literal.kind === ts.SyntaxKind.TrueKeyword) {
+    return true;
+  }
+  return argument.literal.kind === ts.SyntaxKind.FalseKeyword ? false : undefined;
+};
diff --git a/code/lib/angular-cm/src/analyzer/decorators.ts b/code/lib/angular-cm/src/analyzer/decorators.ts
index 21ad6c34a9f9..22976fafcd54 100644
--- a/code/lib/angular-cm/src/analyzer/decorators.ts
+++ b/code/lib/angular-cm/src/analyzer/decorators.ts
@@ -15,18 +15,14 @@ export interface DecoratorInfo {
  */
 export const isAngularCoreOrUnresolved = (ctx: AnalyzerContext, node: ts.Node): boolean => {
   const symbol = resolvedSymbol(ctx, node);
-  if (!symbol) {
-    return true;
-  }
-  const declarations = symbol.declarations;
-  if (!declarations?.length) {
-    return true;
-  }
-  return declarations.some((declaration) =>
-    declaration.getSourceFile().fileName.includes('@angular/core')
-  );
+  return !symbol?.declarations?.length || isDeclaredInAngularCore(symbol);
 };
 
+export const isDeclaredInAngularCore = (symbol: ts.Symbol): boolean =>
+  symbol.declarations?.some((declaration) =>
+    declaration.getSourceFile().fileName.includes('@angular/core')
+  ) ?? false;
+
 // Angular matches decorators by imported symbol, including aliases re-exported through barrels.
 const importedName = (
   ctx: AnalyzerContext,
diff --git a/code/lib/angular-cm/src/manager.test.ts b/code/lib/angular-cm/src/manager.test.ts
index 2e51c310741f..6e05ce92bb13 100644
--- a/code/lib/angular-cm/src/manager.test.ts
+++ b/code/lib/angular-cm/src/manager.test.ts
@@ -164,6 +164,30 @@ describe('AngularComponentMetaManager', () => {
     expect(result?.entry.file).toBe(togglePath);
   });
 
+  it.each(['button.component.d.ts', 'index.d.ts'])(
+    'reads a component compiled into a .d.ts, extracting from %s',
+    (entryFile) => {
+      const result = manager.extractComponentMeta(
+        normalize(join(fixturesDir, 'declarations', entryFile)),
+        { exportName: 'ButtonComponent' }
+      );
+
+      expect(result?.entry).toMatchObject({
+        name: 'ButtonComponent',
+        type: 'component',
+        file: normalize(join(fixturesDir, 'declarations', 'button.component.d.ts')),
+        selector: 'my-button, [my-button]',
+        standalone: false,
+      });
+    }
+  );
+
+  it('still extracts nothing for a plain .d.ts class re-exported by a declaration barrel', () => {
+    const barrelPath = normalize(join(fixturesDir, 'declarations', 'index.d.ts'));
+
+    expect(manager.extractComponentMeta(barrelPath, { exportName: 'ButtonTheme' })).toBeUndefined();
+  });
+
   it('falls back to localName when the export name matches no class', () => {
     const renamed = manager.extractComponentMeta(togglePath, {
       exportName: 'PublicToggle',
diff --git a/code/lib/angular-cm/src/project.ts b/code/lib/angular-cm/src/project.ts
index 6d58962f1eeb..de397770d759 100644
--- a/code/lib/angular-cm/src/project.ts
+++ b/code/lib/angular-cm/src/project.ts
@@ -13,6 +13,7 @@ import * as path from 'node:path';
 import type * as ts from 'typescript';
 
 import { analyzeSourceFile, analyzerContext } from './analyzer/analyze-file.ts';
+import { readComponentDeclaration } from './analyzer/component-declaration.ts';
 import type { AnalyzerContext } from './analyzer/context.ts';
 import type { AngularClassMeta, AngularComponentMetaResult, AngularFileMeta } from './types.ts';
 
@@ -187,7 +188,7 @@ export class AngularComponentMetaProject extends ProgramBackedProject<
       const declaration = target.declarations?.find((candidate): candidate is ts.ClassDeclaration =>
         isClassDeclaration(candidate)
       );
-      if (!declaration?.name || declaration.getSourceFile().isDeclarationFile) {
+      if (!declaration?.name) {
         continue;
       }
       const declarationFile = declaration.getSourceFile();
@@ -197,6 +198,14 @@ export class AngularComponentMetaProject extends ProgramBackedProject<
         declarationFile === sourceFile
           ? context
           : analyzerContext(this.typescript, declarationFile, checker);
+      // A .d.ts class is only worth documenting as a compiled component, and checking before
+      // analysis spares analyzing every other class a bundled library declares.
+      if (
+        declarationFile.isDeclarationFile &&
+        !readComponentDeclaration(targetContext, declaration)
+      ) {
+        continue;
+      }
       const targetMeta =
         declarationFile === sourceFile
           ? fileMeta

From ff50a9b59171c1d474432a16989cd57f6d9ebe66 Mon Sep 17 00:00:00 2001
From: Mohamed Saad <mohamed.tarif999@gmail.com>
Date: Wed, 14 Oct 2026 16:54:03 +0300
Subject: [PATCH 029/326] fix(angular-cm): update module paths and enhance
 directory resolution logic

---
 .../manager/declarations/index.d.ts              |  4 ++--
 .../src/analyzer/__testutils__/inline-source.ts  |  5 +++--
 .../src/analyzer/component-declaration.test.ts   | 16 ++++++++++++++++
 code/lib/angular-cm/src/analyzer/decorators.ts   |  2 +-
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/code/lib/angular-cm/src/__testfixtures__/manager/declarations/index.d.ts b/code/lib/angular-cm/src/__testfixtures__/manager/declarations/index.d.ts
index 965e937db246..eb6a6da550e2 100644
--- a/code/lib/angular-cm/src/__testfixtures__/manager/declarations/index.d.ts
+++ b/code/lib/angular-cm/src/__testfixtures__/manager/declarations/index.d.ts
@@ -1,2 +1,2 @@
-export { ButtonComponent } from './button.component';
-export { ButtonTheme } from './button-theme';
+export { ButtonComponent } from './button.component.js';
+export { ButtonTheme } from './button-theme.js';
diff --git a/code/lib/angular-cm/src/analyzer/__testutils__/inline-source.ts b/code/lib/angular-cm/src/analyzer/__testutils__/inline-source.ts
index 49ea2fc65696..0cb07eb9e37c 100644
--- a/code/lib/angular-cm/src/analyzer/__testutils__/inline-source.ts
+++ b/code/lib/angular-cm/src/analyzer/__testutils__/inline-source.ts
@@ -60,9 +60,10 @@ const programFor = (files: Record<string, string>, options: ts.CompilerOptions):
 
   host.readFile = (fileName) => virtual.get(normalize(fileName)) ?? readRealFile(fileName);
   host.fileExists = (fileName) => virtual.has(normalize(fileName)) || realFileExists(fileName);
-  // Module resolution probes the containing directory before the file, and this one is not on disk.
+  // Module resolution probes the containing directory before the file, and these are not on disk.
   host.directoryExists = (directoryName) =>
-    normalize(directoryName) === VIRTUAL_DIR || (realDirectoryExists?.(directoryName) ?? true);
+    [...virtual.keys()].some((name) => name.startsWith(`${normalize(directoryName)}/`)) ||
+    (realDirectoryExists?.(directoryName) ?? true);
   host.realpath = (fileName) =>
     virtual.has(normalize(fileName)) ? fileName : (realpath?.(fileName) ?? fileName);
   host.getSourceFile = (fileName, languageVersion, onError, shouldCreate) => {
diff --git a/code/lib/angular-cm/src/analyzer/component-declaration.test.ts b/code/lib/angular-cm/src/analyzer/component-declaration.test.ts
index 6d8c1a90bffe..dfb92de54ce1 100644
--- a/code/lib/angular-cm/src/analyzer/component-declaration.test.ts
+++ b/code/lib/angular-cm/src/analyzer/component-declaration.test.ts
@@ -201,6 +201,22 @@ describe('a .d.ts class whose `ɵcmp` is not an Angular component declaration',
     );
   });
 
+  it('does not mistake a package whose name merely starts with `@angular/core` for Angular', () => {
+    expectPlainClass(
+      analyzeDeclaration(
+        declaring(MODERN_ARGUMENTS).replace(
+          `'@angular/core'`,
+          `'./node_modules/@angular/core-extra/index'`
+        ),
+        {
+          'node_modules/@angular/core-extra/index.d.ts': `
+            export type ɵɵComponentDeclaration<T, S, E, I, O, Q, N, IsStandalone> = unknown;
+          `,
+        }
+      )
+    );
+  });
+
   it('does not read a declaration type whose module does not resolve', () => {
     expectPlainClass(
       analyzeDeclaration(
diff --git a/code/lib/angular-cm/src/analyzer/decorators.ts b/code/lib/angular-cm/src/analyzer/decorators.ts
index 22976fafcd54..21d3e5c138d7 100644
--- a/code/lib/angular-cm/src/analyzer/decorators.ts
+++ b/code/lib/angular-cm/src/analyzer/decorators.ts
@@ -20,7 +20,7 @@ export const isAngularCoreOrUnresolved = (ctx: AnalyzerContext, node: ts.Node):
 
 export const isDeclaredInAngularCore = (symbol: ts.Symbol): boolean =>
   symbol.declarations?.some((declaration) =>
-    declaration.getSourceFile().fileName.includes('@angular/core')
+    declaration.getSourceFile().fileName.includes('/@angular/core/')
   ) ?? false;
 
 // Angular matches decorators by imported symbol, including aliases re-exported through barrels.

From e45eb6f5c68e86f3c989b65f4317851b44e45c07 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 14 Oct 2026 14:34:12 +0000
Subject: [PATCH 030/326] Manager: keep checklist height stable while swapping
 tasks

When a task completes, its row exits while the next task's row enters.
The exiting row never actually collapsed: ActionList items carry a
32px min-height that overrides block-size: 0, so for the length of
the exit transition the list held four full-height rows and the
widget grew by one row before snapping back.

Collapsed items now drop their min-height as well, and min-height is
part of the transitioned properties so both rows resize over the same
duration. The entering row starts collapsed through @starting-style
instead of react-transition-state's preEnter step, which lands the
enter and the exit in the same commit and keeps the two heights
complementary from the first frame. The StableHeightOnTaskCompletion
story records the widget height on every DOM mutation and asserts it
never grows across a completion.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014kbAkZeM9HcHMvLjPzK6oG
---
 .../components/ActionList/ActionList.tsx      | 21 ++++----
 .../sidebar/ChecklistWidget.stories.tsx       | 48 +++++++++++++++++++
 .../components/sidebar/ChecklistWidget.tsx    |  1 -
 3 files changed, 58 insertions(+), 12 deletions(-)

diff --git a/code/core/src/components/components/ActionList/ActionList.tsx b/code/core/src/components/components/ActionList/ActionList.tsx
index c7f53613036e..2849cebb5834 100644
--- a/code/core/src/components/components/ActionList/ActionList.tsx
+++ b/code/core/src/components/components/ActionList/ActionList.tsx
@@ -16,6 +16,11 @@ const StyledButton = styled(Button)(({ size }) => ({
   },
 }));
 
+// A collapsing item must drop its min-height too, otherwise block-size: 0 never shrinks it. An
+// entering item starts collapsed so that its growth mirrors the exit of the item it replaces.
+const collapsedItem = { opacity: 0, blockSize: 0, minHeight: 0 } as const;
+const expandedItem = { opacity: 1, blockSize: 'auto', contentVisibility: 'visible' } as const;
+
 const ActionListItem = styled.li<{
   active?: boolean;
   transitionStatus?: TransitionStatus;
@@ -72,7 +77,7 @@ const ActionListItem = styled.li<{
       interpolateSize: 'allow-keywords',
       transitionBehavior: 'allow-discrete',
       transitionDuration: 'var(--transition-duration, 0.2s)',
-      transitionProperty: 'opacity, block-size, content-visibility',
+      transitionProperty: 'opacity, block-size, min-height, content-visibility',
     },
 
     '@media (prefers-reduced-motion: reduce)': {
@@ -84,17 +89,11 @@ const ActionListItem = styled.li<{
       case 'preEnter':
       case 'exiting':
       case 'exited':
-        return {
-          opacity: 0,
-          blockSize: 0,
-          contentVisibility: 'hidden',
-        };
+        return { ...collapsedItem, contentVisibility: 'hidden' };
+      case 'entering':
+        return { ...expandedItem, '@starting-style': collapsedItem };
       default:
-        return {
-          opacity: 1,
-          blockSize: 'auto',
-          contentVisibility: 'visible',
-        };
+        return expandedItem;
     }
   }
 );
diff --git a/code/core/src/manager/components/sidebar/ChecklistWidget.stories.tsx b/code/core/src/manager/components/sidebar/ChecklistWidget.stories.tsx
index 808b85c226e8..68fb651c4f93 100644
--- a/code/core/src/manager/components/sidebar/ChecklistWidget.stories.tsx
+++ b/code/core/src/manager/components/sidebar/ChecklistWidget.stories.tsx
@@ -1,3 +1,5 @@
+import React, { useEffect, useRef } from 'react';
+
 import type { PlayFunction } from 'storybook/internal/csf';
 
 import { ManagerContext } from 'storybook/manager-api';
@@ -168,3 +170,49 @@ export const StableAcrossStateSyncs = meta.story({
     }
   },
 });
+
+const cardHeights: number[] = [];
+
+const RecordCardHeights = ({ children }: { children: React.ReactNode }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const card = ref.current!.querySelector('#storybook-checklist-widget')!;
+    const observer = new MutationObserver(() =>
+      cardHeights.push(card.getBoundingClientRect().height)
+    );
+    observer.observe(card, { subtree: true, childList: true, attributes: true });
+    return () => observer.disconnect();
+  }, []);
+  return <div ref={ref}>{children}</div>;
+};
+
+export const StableHeightOnTaskCompletion = meta.story({
+  decorators: [(Story) => <RecordCardHeights>{Story()}</RecordCardHeights>],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText('Check responsiveness with Viewports');
+    await wait(3000);
+    const card = canvasElement.querySelector('#storybook-checklist-widget')!;
+    cardHeights.length = 0;
+    cardHeights.push(card.getBoundingClientRect().height);
+    mockStore.setState({
+      loaded: true,
+      widget: {},
+      items: {
+        ...initialState.items,
+        controls: { status: 'accepted' },
+        renderComponent: { status: 'done' },
+        installVitest: { status: 'done' },
+        viewports: { status: 'done' },
+        moreComponents: { status: 'skipped' },
+        moreStories: { status: 'skipped' },
+      },
+    });
+    await wait(3000);
+
+    await expect(canvas.queryByText('Check responsiveness with Viewports')).not.toBeInTheDocument();
+    await expect(canvas.getByText('Group your components')).toBeInTheDocument();
+    const increases = cardHeights.filter((height, i) => i > 0 && height > cardHeights[i - 1]);
+    await expect(increases).toEqual([]);
+  },
+});
diff --git a/code/core/src/manager/components/sidebar/ChecklistWidget.tsx b/code/core/src/manager/components/sidebar/ChecklistWidget.tsx
index f1a763ed97bb..00150a763527 100644
--- a/code/core/src/manager/components/sidebar/ChecklistWidget.tsx
+++ b/code/core/src/manager/components/sidebar/ChecklistWidget.tsx
@@ -58,7 +58,6 @@ const useTransitionArray = <K, V>(
     allowMultiple: true,
     mountOnEnter: true,
     unmountOnExit: true,
-    preEnter: true,
     ...options,
   });
 

From c710c7d41de3eaa1102c9a6abf1ca4b75940753a Mon Sep 17 00:00:00 2001
From: Obvious <obvious@obvious.ai>
Date: Wed, 14 Oct 2026 14:36:15 +0000
Subject: [PATCH 031/326] fix(builder-vite): report vite config discovery
 misses instead of failing silently

Vite's loadConfigFromFile resolves null without any log when no config file
exists in the discovery root (the parent of the Storybook config dir). With a
custom config-dir layout (e.g. configuration/storybook) that parent is not the
project root, so a vite.config at the project root is silently ignored and dev
boots with the user's Vite settings unapplied.

When discovery finds nothing and no explicit viteConfigPath is set, walk the
ancestors up to the repository root for a config discovery could not see; if
one exists, log a warning naming it and the core.builder.options.viteConfigPath
override. A project with no Vite config at all stays quiet.
---
 .../builder-vite/src/vite-config.test.ts      | 109 +++++++++++++++---
 code/builders/builder-vite/src/vite-config.ts |  64 ++++++++++
 2 files changed, 157 insertions(+), 16 deletions(-)

diff --git a/code/builders/builder-vite/src/vite-config.test.ts b/code/builders/builder-vite/src/vite-config.test.ts
index 9dd0b59ef2b5..4f54b250ad2a 100644
--- a/code/builders/builder-vite/src/vite-config.test.ts
+++ b/code/builders/builder-vite/src/vite-config.test.ts
@@ -20,6 +20,14 @@ vi.mock('vite', async (importOriginal) => ({
 }));
 const loadConfigFromFileMock = vi.mocked(loadConfigFromFile);
 
+const { loggerWarnMock } = vi.hoisted(() => ({ loggerWarnMock: vi.fn() }));
+vi.mock('storybook/internal/node-logger', () => ({
+  // `once` passes straight through to the warn mock: deduping is node-logger's own tested
+  // behavior, these tests only assert that the builder reports (or stays quiet).
+  once: () => (message: string) => loggerWarnMock(message),
+  logger: { warn: loggerWarnMock, error: vi.fn(), log: vi.fn(), debug: vi.fn() },
+}));
+
 const dummyOptions: Options = {
   configType: 'DEVELOPMENT',
   configDir: '',
@@ -41,6 +49,24 @@ const dummyOptions: Options = {
   presetsList: [],
 };
 
+const mockExistsSync = async (pathToMock: string, exists: boolean) => {
+  const actual = await vi.importActual<typeof import('node:fs')>('node:fs');
+
+  vi.mocked(existsSync).mockImplementation((path) => {
+    if (path === resolve(pathToMock)) {
+      return exists;
+    }
+
+    return actual.existsSync(path);
+  });
+};
+
+afterEach(() => {
+  vi.mocked(existsSync).mockReset();
+  loadConfigFromFileMock.mockReset();
+  loggerWarnMock.mockClear();
+});
+
 describe('commonConfig', () => {
   it('should set configFile to false and include plugins', async () => {
     loadConfigFromFileMock.mockReturnValueOnce(
@@ -143,22 +169,6 @@ describe('resolveVitePublicDir', () => {
   const mockUserConfig = (config: Record<string, unknown>) =>
     loadConfigFromFileMock.mockResolvedValueOnce({ config, path: '', dependencies: [] });
 
-  const mockExistsSync = async (pathToMock: string, exists: boolean) => {
-    const actual = await vi.importActual<typeof import('node:fs')>('node:fs');
-
-    vi.mocked(existsSync).mockImplementation((path) => {
-      if (path === resolve(pathToMock)) {
-        return exists;
-      }
-
-      return actual.existsSync(path);
-    });
-  };
-
-  afterEach(() => {
-    vi.mocked(existsSync).mockReset();
-  });
-
   it('defaults to the public directory next to the Storybook config dir', async () => {
     await mockExistsSync('/project/public', true);
     mockUserConfig({});
@@ -187,3 +197,70 @@ describe('resolveVitePublicDir', () => {
     expect(await resolveVitePublicDir(options, 'build')).toBeUndefined();
   });
 });
+
+describe('discovery miss reporting', () => {
+  it('warns when a Vite config exists outside of the discovery root', async () => {
+    // Custom config-dir layout: the parent of the config dir is `configuration/`, not the
+    // project root, so discovery cannot see the config at the project root.
+    await mockExistsSync('/project/vite.config.mjs', true);
+    loadConfigFromFileMock.mockResolvedValueOnce(null);
+
+    await commonConfig(
+      { ...dummyOptions, configDir: '/project/configuration/storybook' },
+      'development'
+    );
+
+    expect(loggerWarnMock).toHaveBeenCalledTimes(1);
+    expect(loggerWarnMock.mock.calls[0][0]).toContain('/project/vite.config.mjs');
+    expect(loggerWarnMock.mock.calls[0][0]).toContain(
+      "core: { builder: { options: { viteConfigPath: '/project/vite.config.mjs' } } }"
+    );
+  });
+
+  it('stays quiet when no Vite config exists in the project at all', async () => {
+    await mockExistsSync('/project/vite.config.ts', false);
+    loadConfigFromFileMock.mockResolvedValueOnce(null);
+
+    await commonConfig({ ...dummyOptions, configDir: '/project/.storybook' }, 'development');
+
+    expect(loggerWarnMock).not.toHaveBeenCalled();
+  });
+
+  it('stays quiet when discovery loads a config in the standard layout', async () => {
+    loadConfigFromFileMock.mockResolvedValueOnce({ config: {}, path: '', dependencies: [] });
+
+    await commonConfig({ ...dummyOptions, configDir: '/project/.storybook' }, 'development');
+
+    expect(loggerWarnMock).not.toHaveBeenCalled();
+  });
+
+  it('stays quiet when an explicit viteConfigPath resolves to nothing', async () => {
+    // An explicit `viteConfigPath` hands config resolution to the user; Vite errors on missing
+    // explicit paths itself, so a null result must not produce a discovery warning.
+    loadConfigFromFileMock.mockResolvedValueOnce(null);
+
+    await commonConfig(
+      {
+        ...dummyOptions,
+        configDir: '/project/.storybook',
+        presets: {
+          apply: async (key: string) =>
+            ({
+              framework: { name: '' },
+              addons: [],
+              core: {
+                builder: {
+                  name: '@storybook/builder-vite',
+                  options: { viteConfigPath: '/custom/vite.config.ts' },
+                },
+              },
+              options: {},
+            })[key],
+        } as Presets,
+      },
+      'development'
+    );
+
+    expect(loggerWarnMock).not.toHaveBeenCalled();
+  });
+});
diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts
index b2c25780b033..fb333c4c1823 100644
--- a/code/builders/builder-vite/src/vite-config.ts
+++ b/code/builders/builder-vite/src/vite-config.ts
@@ -2,8 +2,10 @@ import { existsSync } from 'node:fs';
 import { resolve } from 'node:path';
 
 import { getBuilderOptions, resolvePathInStorybookCache } from 'storybook/internal/common';
+import { once } from 'storybook/internal/node-logger';
 import type { Options } from 'storybook/internal/types';
 
+import { dedent } from 'ts-dedent';
 import type {
   ConfigEnv,
   InlineConfig,
@@ -34,6 +36,62 @@ const configEnvBuild: ConfigEnv = {
   isSsrBuild: false,
 };
 
+// Mirrors Vite's own config-file search list (see Vite's `DEFAULT_CONFIG_FILES`).
+const DEFAULT_VITE_CONFIG_FILES = [
+  'vite.config.js',
+  'vite.config.mjs',
+  'vite.config.ts',
+  'vite.config.cjs',
+  'vite.config.mts',
+  'vite.config.cts',
+];
+
+const warnOnce = once('warn');
+
+/**
+ * Vite's `loadConfigFromFile` resolves `null` — silently, without logging anything — when it
+ * cannot find a Vite config file. Discovery only searches the parent directory of the Storybook
+ * config dir, so a config that lives elsewhere in the project (e.g. the repository root above a
+ * nested config dir) is silently ignored and Storybook boots with the user's Vite settings
+ * unapplied. Make that case loud, while a project with no Vite config at all stays quiet.
+ */
+function reportUnloadedUserViteConfig(configDir: string, projectRoot: string): void {
+  // Walk upwards within the project (bounded by the repository root) for a Vite config that
+  // discovery could not see. Nothing found means the project has no Vite config at all, which
+  // is common and stays quiet.
+  let dir = projectRoot;
+  let unloadedConfig: string | undefined;
+
+  while (dir) {
+    unloadedConfig = DEFAULT_VITE_CONFIG_FILES.map((filename) => resolve(dir, filename)).find(
+      (candidate) => existsSync(candidate)
+    );
+
+    if (unloadedConfig || existsSync(resolve(dir, '.git'))) {
+      break;
+    }
+
+    const parent = resolve(dir, '..');
+    if (parent === dir) {
+      break; // Reached the filesystem root
+    }
+    dir = parent;
+  }
+
+  if (!unloadedConfig) {
+    return;
+  }
+
+  warnOnce(
+    dedent`
+      No user Vite config was loaded: Storybook auto-discovers a Vite config file in "${projectRoot}" (the directory above your Storybook config dir "${configDir}"), and none was found there.
+      A Vite config was found at "${unloadedConfig}", but it is outside of that directory and was not loaded.
+      To load it, point the "viteConfigPath" builder option at it, e.g. core: { builder: { options: { viteConfigPath: '${unloadedConfig}' } } }.
+      See: https://storybook.js.org/docs/builders/vite#override-the-default-configuration
+    `
+  );
+}
+
 async function loadUserViteConfig(options: Options, type: PluginConfigType): Promise<ViteConfig> {
   const configEnv = type === 'development' ? configEnvServe : configEnvBuild;
   const { loadConfigFromFile } = await import('vite');
@@ -49,6 +107,12 @@ async function loadUserViteConfig(options: Options, type: PluginConfigType): Pro
     configLoader
   );
 
+  // An explicit `viteConfigPath` means the user owns config resolution: Vite either loads it or
+  // errors on it. Only the automatic discovery path can miss silently.
+  if (!loaded && !viteConfigPath) {
+    reportUnloadedUserViteConfig(options.configDir, projectRoot);
+  }
+
   return loaded?.config ?? {};
 }
 

From 3cb80ecca6f1bfb2b83816f449f80d1a59bf6d40 Mon Sep 17 00:00:00 2001
From: Obvious <obvious@obvious.ai>
Date: Wed, 14 Oct 2026 15:04:03 +0000
Subject: [PATCH 032/326] fix(core): skip TypeScript loader hook registration
 under Jest

Jest sandboxes module loading and throws 'module.register() is not
supported in Jest' when Storybook's importModule registers its
TypeScript loader hooks, killing every Jest test suite at setup
(e.g. via @storybook/test-runner's jest-setup loading the user's
.storybook/test-runner.ts). Jest compiles TypeScript itself, so the
hooks are never needed there - skip registration when a Jest worker
is detected.
---
 code/core/src/shared/utils/module.test.ts | 54 +++++++++++++++++++++++
 code/core/src/shared/utils/module.ts      |  4 ++
 2 files changed, 58 insertions(+)
 create mode 100644 code/core/src/shared/utils/module.test.ts

diff --git a/code/core/src/shared/utils/module.test.ts b/code/core/src/shared/utils/module.test.ts
new file mode 100644
index 000000000000..b9e59657eb71
--- /dev/null
+++ b/code/core/src/shared/utils/module.test.ts
@@ -0,0 +1,54 @@
+import nodeModule from 'node:module';
+
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+// vitest-setup.ts globally mocks shared/utils/module.ts; these tests need the real implementation.
+vi.unmock('./module.ts');
+
+const realRegister = nodeModule.register;
+const realRegisterHooks = nodeModule.registerHooks;
+
+const importFreshModule = async () => {
+  vi.resetModules();
+  return import('./module.ts');
+};
+
+describe('importModule', () => {
+  afterEach(() => {
+    (nodeModule as any).register = realRegister;
+    (nodeModule as any).registerHooks = realRegisterHooks;
+    vi.unstubAllEnvs();
+  });
+
+  it('does not register module hooks when running under Jest', async () => {
+    const register = vi.fn(() => {
+      throw new Error('module.register() is not supported in Jest');
+    });
+    const registerHooks = vi.fn(() => {
+      throw new Error('module.registerHooks() is not supported in Jest');
+    });
+    (nodeModule as any).register = register;
+    (nodeModule as any).registerHooks = registerHooks;
+    vi.stubEnv('JEST_WORKER_ID', '1');
+    const { importModule } = await importFreshModule();
+
+    const mod = await importModule(new URL('./module.ts', import.meta.url).href);
+
+    expect(register).not.toHaveBeenCalled();
+    expect(registerHooks).not.toHaveBeenCalled();
+    expect(mod).toBeDefined();
+  });
+
+  it('still registers the TypeScript loader hooks when not running under Jest', async () => {
+    const register = vi.fn();
+    const registerHooks = vi.fn();
+    (nodeModule as any).register = register;
+    (nodeModule as any).registerHooks = registerHooks;
+    const { importModule } = await importFreshModule();
+
+    const mod = await importModule(new URL('./module.ts', import.meta.url).href);
+
+    expect(register.mock.calls.length + registerHooks.mock.calls.length).toBe(1);
+    expect(mod).toBeDefined();
+  });
+});
diff --git a/code/core/src/shared/utils/module.ts b/code/core/src/shared/utils/module.ts
index a49d4d3e2fd2..0b7b0a719c3a 100644
--- a/code/core/src/shared/utils/module.ts
+++ b/code/core/src/shared/utils/module.ts
@@ -49,6 +49,10 @@ export const resolvePackageDir = (
 let typescriptLoaderRegistration: Promise<void> | null = null;
 
 function registerTypescriptLoader() {
+  // Jest forbids module hook registration inside its sandbox (it compiles TS itself).
+  if (process.env.JEST_WORKER_ID) {
+    return Promise.resolve();
+  }
   if (!typescriptLoaderRegistration) {
     typescriptLoaderRegistration = (async () => {
       if (semver.gte(process.versions.node, '26.0.0')) {

From fa5a0276de475fd6a6d913942d9760c3b9461da0 Mon Sep 17 00:00:00 2001
From: Mohamed Saad <mohamed.tarif999@gmail.com>
Date: Thu, 15 Oct 2026 10:47:08 +0300
Subject: [PATCH 033/326] feat(angular-cm): read inputs and outputs from
 compiled component declarations

---
 code/lib/angular-cm/README.md                 |   3 +-
 .../src/analyzer/analyze-file.test.ts         |   8 +-
 .../angular-cm/src/analyzer/analyze-file.ts   |   6 +
 .../analyzer/component-declaration.test.ts    | 120 ++++++++++++++++--
 .../src/analyzer/component-declaration.ts     |  88 +++++++++++--
 .../lib/angular-cm/src/analyzer/decorators.ts |   2 +-
 code/lib/angular-cm/src/analyzer/members.ts   |  78 +++++++++++-
 code/lib/angular-cm/src/manager.test.ts       |   1 +
 code/lib/angular-cm/src/project.ts            |   9 --
 9 files changed, 279 insertions(+), 36 deletions(-)

diff --git a/code/lib/angular-cm/README.md b/code/lib/angular-cm/README.md
index de60a90401b4..f4a351883fcb 100644
--- a/code/lib/angular-cm/README.md
+++ b/code/lib/angular-cm/README.md
@@ -16,7 +16,8 @@ That copy stays frozen on the legacy behaviour its committed baselines pin; this
 These are inherited from the Compodoc behaviour this replaces, and are not fixed yet:
 
 - **Numeric enums produce no control.** `enum Size { Small, Medium }` and `enum Size { Small = 1, Medium }` both surface as `empty-enum` rather than a select, because auto-incremented members carry no initializer to read. String enums and union type aliases resolve correctly. The type checker could answer this via `getConstantValue`, so this is fixable here in a way it was not in Compodoc.
-- **Inputs and outputs inherited from compiled libraries are skipped.** A base class from a `.d.ts` contributes its plain properties and methods but not its IO, because the decorators are erased; Angular records them in `ɵɵDirectiveDeclaration` type arguments, which this analyzer does not read.
+- **Compiled libraries are only partly read.** A `.d.ts` keeps no decorators, so a component there is read from the `ɵɵComponentDeclaration` type Angular compiles into its `static ɵcmp`: selector, standalone, and the input and output maps. Other `.d.ts` classes are dropped, and so is a directive, whose `ɵɵDirectiveDeclaration` is not read. A base class from a `.d.ts` contributes its plain properties and methods but not its IO.
+- **Package imports resolve to compiled JavaScript.** Docgen follows a package's runtime entry rather than its `types`, so a component imported straight from a package is not read from its `.d.ts`; one reached through a local re-export is.
 - **`hostDirectives` bindings are absent.** Inputs and outputs a component exposes through directive composition are not class members, so they never reach the props table.
 
 Learn more about Storybook at [storybook.js.org](https://storybook.js.org/?ref=readme).
diff --git a/code/lib/angular-cm/src/analyzer/analyze-file.test.ts b/code/lib/angular-cm/src/analyzer/analyze-file.test.ts
index dac427e916b0..86ed25e56678 100644
--- a/code/lib/angular-cm/src/analyzer/analyze-file.test.ts
+++ b/code/lib/angular-cm/src/analyzer/analyze-file.test.ts
@@ -6,8 +6,8 @@
  *     @Component / @Directive  -> components / directives, members split into
  *                                 inputsClass, outputsClass, propertiesClass, methodsClass
  *     @Pipe / @Injectable      -> pipes / injectables, members split into properties, methods
- *     .d.ts with compiled ɵcmp -> components, as above
- *     no Angular decorator     -> classes
+ *     .d.ts with compiled ɵcmp -> components, as above, IO read from the compiled maps
+ *     no Angular decorator     -> classes, except in a .d.ts, where it is dropped
  *     @NgModule or @ignore     -> dropped
  *
  * plus a `miscellaneous` index of the enums and type aliases the file declares, which is what lets a
@@ -84,7 +84,7 @@ describe('which classes a file yields', () => {
     expect(meta.pipes[0].ngname).toBe('sbFormat');
   });
 
-  it('files a .d.ts class Angular compiled as a component under `components`', () => {
+  it('files a .d.ts class Angular compiled as a component, and drops any other .d.ts class', () => {
     const meta = analyzeFiles('button.component.d.ts', {
       'button.component.d.ts': `
         import * as i0 from '@angular/core';
@@ -103,7 +103,7 @@ describe('which classes a file yields', () => {
     });
 
     expect(names(meta.components)).toEqual(['ButtonComponent']);
-    expect(names(meta.classes)).toEqual(['ButtonTheme']);
+    expect(meta.classes).toEqual([]);
     expect(meta.components[0]).toMatchObject({
       type: 'component',
       selector: 'my-button',
diff --git a/code/lib/angular-cm/src/analyzer/analyze-file.ts b/code/lib/angular-cm/src/analyzer/analyze-file.ts
index 72c18e1127c9..5dac7dda736d 100644
--- a/code/lib/angular-cm/src/analyzer/analyze-file.ts
+++ b/code/lib/angular-cm/src/analyzer/analyze-file.ts
@@ -55,6 +55,12 @@ export function analyzeSourceFile(
       continue;
     }
     const declared = kind === 'class' ? readComponentDeclaration(ctx, statement) : undefined;
+    if (!declared && sourceFile.isDeclarationFile) {
+      logger.debug(
+        `[angular-cm] ${statement.name.text} left out of docgen: a declaration-file class with no compiled ɵcmp`
+      );
+      continue;
+    }
     const recordKind = declared ? 'component' : kind;
     const name = statement.name.text;
     const file = sourceFile.fileName;
diff --git a/code/lib/angular-cm/src/analyzer/component-declaration.test.ts b/code/lib/angular-cm/src/analyzer/component-declaration.test.ts
index dfb92de54ce1..54b5008954e6 100644
--- a/code/lib/angular-cm/src/analyzer/component-declaration.test.ts
+++ b/code/lib/angular-cm/src/analyzer/component-declaration.test.ts
@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest';
 
-import { analyzeFiles, analyzeInline, names } from './__testutils__/inline-source.ts';
+import type { Property } from '../types.ts';
+import { analyzeFiles, analyzeInline, byName, names } from './__testutils__/inline-source.ts';
 
 const analyzeDeclaration = (source: string, extraFiles: Record<string, string> = {}) =>
   analyzeFiles('button.component.d.ts', { 'button.component.d.ts': source, ...extraFiles });
@@ -153,10 +154,111 @@ describe('a component compiled into a .d.ts declaration', () => {
   });
 });
 
+const IO_SOURCE = `
+  import { Component, EventEmitter, Input, Output, booleanAttribute, input, model, output } from '@angular/core';
+
+  @Component({ selector: 'my-io', template: '', inputs: ['viaMeta: metaAlias'], outputs: ['metaOut'] })
+  export class IoComponent {
+    @Input() plain = '';
+    @Input('publicName') aliased = '';
+    @Input({ required: true }) needed!: number;
+    @Input({ transform: booleanAttribute }) flag = false;
+    viaMeta = '';
+    metaOut = new EventEmitter<void>();
+    size = input<'sm' | 'md'>('sm');
+    count = input.required<number>({ alias: 'total' });
+    checked = model(false);
+    @Output() clicked = new EventEmitter<string>();
+    @Output('renamed') internal = new EventEmitter<void>();
+    toggled = output<boolean>();
+  }
+`;
+
+// What ngc emits for IO_SOURCE in partial-compilation mode.
+const IO_DECLARATION = `
+  import { EventEmitter } from '@angular/core';
+  import * as i0 from "@angular/core";
+  export declare class IoComponent {
+      plain: string;
+      aliased: string;
+      needed: number;
+      flag: boolean;
+      viaMeta: string;
+      metaOut: EventEmitter<void>;
+      size: import("@angular/core").InputSignal<"sm" | "md">;
+      count: import("@angular/core").InputSignal<number>;
+      checked: import("@angular/core").ModelSignal<boolean>;
+      clicked: EventEmitter<string>;
+      internal: EventEmitter<void>;
+      toggled: import("@angular/core").OutputEmitterRef<boolean>;
+      static ɵfac: i0.ɵɵFactoryDeclaration<IoComponent, never>;
+      static ɵcmp: i0.ɵɵComponentDeclaration<IoComponent, "my-io", never, { "viaMeta": { "alias": "metaAlias"; "required": false; }; "plain": { "alias": "plain"; "required": false; }; "aliased": { "alias": "publicName"; "required": false; }; "needed": { "alias": "needed"; "required": true; }; "flag": { "alias": "flag"; "required": false; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "count": { "alias": "total"; "required": true; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "metaOut": "metaOut"; "checked": "checkedChange"; "clicked": "clicked"; "internal": "renamed"; "toggled": "toggled"; }, never, never, true, never>;
+      static ngAcceptInputType_flag: unknown;
+  }
+`;
+
+describe('inputs and outputs read from the compiled maps', () => {
+  const binding = (property: Property) => ({
+    name: property.name,
+    type: property.type,
+    required: property.required,
+    optional: property.optional,
+    hasLine: property.line !== undefined,
+  });
+  const fromSource = analyzeFiles('io.component.ts', { 'io.component.ts': IO_SOURCE })
+    .components[0];
+  const fromDeclaration = analyzeDeclaration(IO_DECLARATION).components[0];
+
+  it('reports every input as analyzing the source would', () => {
+    expect(fromDeclaration.inputsClass.map(binding)).toEqual(fromSource.inputsClass.map(binding));
+    expect(names(fromDeclaration.inputsClass)).toEqual([
+      'checked',
+      'flag',
+      'metaAlias',
+      'needed',
+      'plain',
+      'publicName',
+      'size',
+      'total',
+    ]);
+  });
+
+  it('reports every output under its public name, a model() under its input name', () => {
+    expect(names(fromDeclaration.outputsClass)).toEqual(names(fromSource.outputsClass));
+    expect(names(fromDeclaration.outputsClass)).toEqual([
+      'checked',
+      'clicked',
+      'metaOut',
+      'renamed',
+      'toggled',
+    ]);
+    expect(byName(fromDeclaration.outputsClass, 'toggled').type).toBe('boolean');
+  });
+
+  it('leaves no input or output among the plain properties', () => {
+    expect(fromDeclaration.propertiesClass).toEqual([]);
+  });
+
+  it('reads the string-valued input map Angular emitted before version 16', () => {
+    const [component] = analyzeDeclaration(`
+      import * as i0 from '@angular/core';
+
+      export declare class ButtonComponent {
+        label: string;
+        static ɵcmp: i0.ɵɵComponentDeclaration<
+          ButtonComponent, 'my-button', never, { "label": "text"; }, {}, never, never, true
+        >;
+      }
+    `).components;
+
+    expect(names(component.inputsClass)).toEqual(['text']);
+  });
+});
+
 describe('a .d.ts class whose `ɵcmp` is not an Angular component declaration', () => {
-  const expectPlainClass = (meta: ReturnType<typeof analyzeDeclaration>) => {
+  const expectLeftOut = (meta: ReturnType<typeof analyzeDeclaration>) => {
     expect(meta.components).toEqual([]);
-    expect(names(meta.classes)).toContain('ButtonComponent');
+    expect(meta.classes).toEqual([]);
   };
 
   it.each([
@@ -175,12 +277,12 @@ describe('a .d.ts class whose `ɵcmp` is not an Angular component declaration',
       `static ɵcmp: i0.ɵɵDirectiveDeclaration<ButtonComponent, 'my-button', never, {}, {}, never, never, true>;`,
     ],
     ['an instance member', `ɵcmp: i0.ɵɵComponentDeclaration<${MODERN_ARGUMENTS}>;`],
-  ])('stays a plain class when `ɵcmp` has %s', (_, member) => {
-    expectPlainClass(analyzeDeclaration(declaringMember(member)));
+  ])('is left out when `ɵcmp` has %s', (_, member) => {
+    expectLeftOut(analyzeDeclaration(declaringMember(member)));
   });
 
   it('does not mistake a locally declared `ɵɵComponentDeclaration` for Angular', () => {
-    expectPlainClass(
+    expectLeftOut(
       analyzeDeclaration(`
         type ɵɵComponentDeclaration<T, S, E, I, O, Q, N, IsStandalone> = unknown;
 
@@ -192,7 +294,7 @@ describe('a .d.ts class whose `ɵcmp` is not an Angular component declaration',
   });
 
   it('does not mistake a same-named export of another module for Angular', () => {
-    expectPlainClass(
+    expectLeftOut(
       analyzeDeclaration(declaring(MODERN_ARGUMENTS).replace(`'@angular/core'`, `'./fake-core'`), {
         'fake-core.d.ts': `
           export type ɵɵComponentDeclaration<T, S, E, I, O, Q, N, IsStandalone> = unknown;
@@ -202,7 +304,7 @@ describe('a .d.ts class whose `ɵcmp` is not an Angular component declaration',
   });
 
   it('does not mistake a package whose name merely starts with `@angular/core` for Angular', () => {
-    expectPlainClass(
+    expectLeftOut(
       analyzeDeclaration(
         declaring(MODERN_ARGUMENTS).replace(
           `'@angular/core'`,
@@ -218,7 +320,7 @@ describe('a .d.ts class whose `ɵcmp` is not an Angular component declaration',
   });
 
   it('does not read a declaration type whose module does not resolve', () => {
-    expectPlainClass(
+    expectLeftOut(
       analyzeDeclaration(
         declaring(MODERN_ARGUMENTS).replace(`'@angular/core'`, `'@angular/not-installed'`)
       )
diff --git a/code/lib/angular-cm/src/analyzer/component-declaration.ts b/code/lib/angular-cm/src/analyzer/component-declaration.ts
index 0a158112c3cb..7833c4aed541 100644
--- a/code/lib/angular-cm/src/analyzer/component-declaration.ts
+++ b/code/lib/angular-cm/src/analyzer/component-declaration.ts
@@ -1,21 +1,29 @@
 import type * as ts from 'typescript';
 
 import { resolvedSymbol, type AnalyzerContext } from './context.ts';
-import { isDeclaredInAngularCore } from './decorators.ts';
+import { isDeclaredInAngularCore, type MetadataIOEntry } from './decorators.ts';
 
 export interface ComponentMetadata {
   selector: string | undefined;
   standalone: boolean | undefined;
 }
 
+export interface DeclaredIOEntry extends MetadataIOEntry {
+  signal?: boolean;
+}
+
+export interface ComponentDeclaration extends ComponentMetadata {
+  inputsOutputs: DeclaredIOEntry[];
+}
+
 // Angular 12-13 emit seven type arguments; Angular 14 introduced standalone as the eighth.
 const PRE_STANDALONE_ARGUMENT_COUNT = 7;
 
 // A published library's `.d.ts` keeps a class's `@Component` only as this compiled `ɵcmp` type.
 export const readComponentDeclaration = (
   ctx: AnalyzerContext,
-  classNode: ts.ClassDeclaration
-): ComponentMetadata | undefined => {
+  classNode: ts.ClassLikeDeclaration
+): ComponentDeclaration | undefined => {
   if (!classNode.getSourceFile().isDeclarationFile) {
     return undefined;
   }
@@ -32,14 +40,18 @@ export const readComponentDeclaration = (
   }
   const standaloneArgument = typeArguments[PRE_STANDALONE_ARGUMENT_COUNT];
   return {
-    selector: selectorArgument(ctx, typeArguments[1]),
+    selector: stringLiteral(ctx, typeArguments[1]),
     standalone: standaloneArgument ? booleanArgument(ctx, standaloneArgument) : false,
+    inputsOutputs: [
+      ...ioMapEntries(ctx, typeArguments[3], 'inputs'),
+      ...ioMapEntries(ctx, typeArguments[4], 'outputs'),
+    ],
   };
 };
 
 const staticCmpType = (
   { ts }: AnalyzerContext,
-  classNode: ts.ClassDeclaration
+  classNode: ts.ClassLikeDeclaration
 ): ts.TypeReferenceNode | undefined => {
   for (const member of classNode.members) {
     if (
@@ -67,7 +79,7 @@ const isAngularComponentDeclaration = (ctx: AnalyzerContext, typeName: ts.Entity
 const referencesClass = (
   ctx: AnalyzerContext,
   argument: ts.TypeNode,
-  classNode: ts.ClassDeclaration
+  classNode: ts.ClassLikeDeclaration
 ): boolean => {
   if (!ctx.ts.isTypeReferenceNode(argument) || !classNode.name) {
     return false;
@@ -79,11 +91,6 @@ const referencesClass = (
   );
 };
 
-const selectorArgument = ({ ts }: AnalyzerContext, argument: ts.TypeNode): string | undefined =>
-  ts.isLiteralTypeNode(argument) && ts.isStringLiteral(argument.literal)
-    ? argument.literal.text
-    : undefined;
-
 const booleanArgument = ({ ts }: AnalyzerContext, argument: ts.TypeNode): boolean | undefined => {
   if (!ts.isLiteralTypeNode(argument)) {
     return undefined;
@@ -93,3 +100,62 @@ const booleanArgument = ({ ts }: AnalyzerContext, argument: ts.TypeNode): boolea
   }
   return argument.literal.kind === ts.SyntaxKind.FalseKeyword ? false : undefined;
 };
+
+// Keyed by class field. An entry is the public name, or since Angular 16 an object type such as
+// `{ alias: 'label'; required: false; isSignal?: true }`.
+const ioMapEntries = (
+  ctx: AnalyzerContext,
+  map: ts.TypeNode,
+  bucket: MetadataIOEntry['bucket']
+): DeclaredIOEntry[] => {
+  const { ts } = ctx;
+  if (!ts.isTypeLiteralNode(map)) {
+    return [];
+  }
+  const entries: DeclaredIOEntry[] = [];
+  for (const member of map.members) {
+    const name = member.name && propertyNameText(ctx, member.name);
+    const value = ts.isPropertySignature(member) ? member.type : undefined;
+    if (!name || !value) {
+      continue;
+    }
+    const alias = ts.isTypeLiteralNode(value)
+      ? stringLiteral(ctx, objectTypeMember(ctx, value, 'alias'))
+      : stringLiteral(ctx, value);
+    const required = ts.isTypeLiteralNode(value)
+      ? booleanLiteral(ctx, objectTypeMember(ctx, value, 'required'))
+      : undefined;
+    const signal = ts.isTypeLiteralNode(value)
+      ? booleanLiteral(ctx, objectTypeMember(ctx, value, 'isSignal'))
+      : undefined;
+    entries.push({
+      bucket,
+      name,
+      ...(alias === undefined || alias === name ? {} : { alias }),
+      ...(required === undefined ? {} : { required }),
+      ...(signal ? { signal } : {}),
+    });
+  }
+  return entries;
+};
+
+const propertyNameText = ({ ts }: AnalyzerContext, name: ts.PropertyName): string | undefined =>
+  ts.isIdentifier(name) || ts.isStringLiteral(name) ? name.text : undefined;
+
+const objectTypeMember = (
+  ctx: AnalyzerContext,
+  object: ts.TypeLiteralNode,
+  key: string
+): ts.TypeNode | undefined =>
+  object.members.find(
+    (member): member is ts.PropertySignature =>
+      ctx.ts.isPropertySignature(member) && propertyNameText(ctx, member.name) === key
+  )?.type;
+
+const stringLiteral = ({ ts }: AnalyzerContext, node: ts.TypeNode | undefined) =>
+  node && ts.isLiteralTypeNode(node) && ts.isStringLiteral(node.literal)
+    ? node.literal.text
+    : undefined;
+
+const booleanLiteral = (ctx: AnalyzerContext, node: ts.TypeNode | undefined) =>
+  node ? booleanArgument(ctx, node) : undefined;
diff --git a/code/lib/angular-cm/src/analyzer/decorators.ts b/code/lib/angular-cm/src/analyzer/decorators.ts
index 21d3e5c138d7..226447bae222 100644
--- a/code/lib/angular-cm/src/analyzer/decorators.ts
+++ b/code/lib/angular-cm/src/analyzer/decorators.ts
@@ -159,7 +159,7 @@ export const parseInputDecoratorConfig = (
   };
 };
 
-interface MetadataIOEntry {
+export interface MetadataIOEntry {
   bucket: 'inputs' | 'outputs';
   name: string;
   alias?: string;
diff --git a/code/lib/angular-cm/src/analyzer/members.ts b/code/lib/angular-cm/src/analyzer/members.ts
index 86ad8c292dd9..f92fc9509854 100644
--- a/code/lib/angular-cm/src/analyzer/members.ts
+++ b/code/lib/angular-cm/src/analyzer/members.ts
@@ -3,6 +3,7 @@ import { logger } from 'storybook/internal/node-logger';
 import type * as ts from 'typescript';
 
 import type { Argument, Method, Property } from '../types.ts';
+import { type DeclaredIOEntry, readComponentDeclaration } from './component-declaration.ts';
 import type { AnalyzerContext } from './context.ts';
 import type { DecoratorInfo } from './decorators.ts';
 import {
@@ -15,7 +16,7 @@ import { defaultInitializer } from './default-initializer.ts';
 import { analyzeInputTransform, type InputTransformSource } from './input-transform.ts';
 import { getJsDocDescription, getJsDocTagsField, hasJsDocTag } from './jsdoc.ts';
 import { memberName } from './node-text.ts';
-import { buildSignalEntry, parseSignalCall } from './signals.ts';
+import { buildSignalEntry, parseSignalCall, signalValueTypeFromType } from './signals.ts';
 
 /**
  * A collected member, paired with the identity Angular itself merges on.
@@ -149,8 +150,83 @@ export function applyMetadataInputsOutputs(
       }
     }
   }
+  for (const entry of readComponentDeclaration(ctx, classNode)?.inputsOutputs ?? []) {
+    applyDeclaredIO(ctx, members, entry);
+  }
 }
 
+// Mirrors what the source path records for the same member, so a component reads the same from
+// its compiled `.d.ts` as from its source.
+const applyDeclaredIO = (ctx: AnalyzerContext, members: ClassMembers, entry: DeclaredIOEntry) => {
+  const index = members.properties.findIndex(
+    (property) => property.declName === entry.name && !property.isStatic
+  );
+  if (index < 0) {
+    if (entry.bucket === 'outputs') {
+      addModelOutput(members, entry.name);
+    }
+    return;
+  }
+  const [property] = members.properties.splice(index, 1);
+  const signal = signalFields(ctx, property, entry.bucket);
+  const isInput = entry.bucket === 'inputs';
+  const moved: MemberEntry<Property> = {
+    ...property,
+    ...(signal ? { typeSource: signal.typeSource } : {}),
+    value: {
+      ...property.value,
+      name: entry.alias ?? entry.name,
+      ...signal?.value,
+      ...(isInput && signal ? { required: !!entry.required, optional: false } : {}),
+      ...(isInput && !signal && entry.required ? { required: true, optional: false } : {}),
+    },
+  };
+  (isInput ? members.inputs : members.outputs).push(moved);
+};
+
+// A `model()` is in both maps, and its input entry has already taken the field.
+const addModelOutput = (members: ClassMembers, field: string) => {
+  const index = members.inputs.findIndex(
+    (input) => input.declName === field && input.typeSource?.kind === 'signal'
+  );
+  if (index < 0) {
+    return;
+  }
+  const model = {
+    ...members.inputs[index],
+    typeSource: { kind: 'signal', signalKind: 'model' } as const,
+  };
+  members.inputs[index] = model;
+  members.outputs.push(model);
+};
+
+// A declaration types a signal member as its `InputSignal<T>`-style wrapper rather than the call.
+const signalFields = (
+  ctx: AnalyzerContext,
+  { declaration }: MemberEntry<Property>,
+  bucket: DeclaredIOEntry['bucket']
+) => {
+  const type = signalValueTypeFromType(
+    ctx,
+    ctx.checker.getTypeAtLocation(declaration),
+    declaration
+  );
+  if (type === undefined) {
+    return undefined;
+  }
+  const { line } = ctx.ts.getLineAndCharacterOfPosition(
+    declaration.getSourceFile(),
+    declaration.getStart()
+  );
+  return {
+    value: { type, line: line + 1 },
+    typeSource: {
+      kind: 'signal',
+      signalKind: bucket === 'inputs' ? 'input' : 'output',
+    } as const,
+  };
+};
+
 const entryFor = <T>(
   ctx: AnalyzerContext,
   member: ts.ClassElement & { name: ts.PropertyName },
diff --git a/code/lib/angular-cm/src/manager.test.ts b/code/lib/angular-cm/src/manager.test.ts
index 6e05ce92bb13..6e0ea119a693 100644
--- a/code/lib/angular-cm/src/manager.test.ts
+++ b/code/lib/angular-cm/src/manager.test.ts
@@ -179,6 +179,7 @@ describe('AngularComponentMetaManager', () => {
         selector: 'my-button, [my-button]',
         standalone: false,
       });
+      expect(inputsOf(result).map((input) => input.name)).toEqual(['disabled', 'label']);
     }
   );
 
diff --git a/code/lib/angular-cm/src/project.ts b/code/lib/angular-cm/src/project.ts
index de397770d759..709f6d0c5acc 100644
--- a/code/lib/angular-cm/src/project.ts
+++ b/code/lib/angular-cm/src/project.ts
@@ -13,7 +13,6 @@ import * as path from 'node:path';
 import type * as ts from 'typescript';
 
 import { analyzeSourceFile, analyzerContext } from './analyzer/analyze-file.ts';
-import { readComponentDeclaration } from './analyzer/component-declaration.ts';
 import type { AnalyzerContext } from './analyzer/context.ts';
 import type { AngularClassMeta, AngularComponentMetaResult, AngularFileMeta } from './types.ts';
 
@@ -198,14 +197,6 @@ export class AngularComponentMetaProject extends ProgramBackedProject<
         declarationFile === sourceFile
           ? context
           : analyzerContext(this.typescript, declarationFile, checker);
-      // A .d.ts class is only worth documenting as a compiled component, and checking before
-      // analysis spares analyzing every other class a bundled library declares.
-      if (
-        declarationFile.isDeclarationFile &&
-        !readComponentDeclaration(targetContext, declaration)
-      ) {
-        continue;
-      }
       const targetMeta =
         declarationFile === sourceFile
           ? fileMeta

From 085a0d88e29854e4ccd01e150b623c7a3a169b0e Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Thu, 15 Oct 2026 11:46:01 +0200
Subject: [PATCH 034/326] WC: Normalize multiline type text in WC arg type
 parsing

---
 .../arg-types/parse-type-text.test.ts         | 28 +++++++++++++++++++
 .../arg-types/parse-type-text.ts              | 10 +++++--
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/code/renderers/web-components/src/docgen/component-docgen/arg-types/parse-type-text.test.ts b/code/renderers/web-components/src/docgen/component-docgen/arg-types/parse-type-text.test.ts
index 2a8575cb56fc..f12f91cf5777 100644
--- a/code/renderers/web-components/src/docgen/component-docgen/arg-types/parse-type-text.test.ts
+++ b/code/renderers/web-components/src/docgen/component-docgen/arg-types/parse-type-text.test.ts
@@ -254,6 +254,34 @@ describe('parseTypeText', () => {
       input: 'HTMLElement | null',
       output: { type: { name: 'other', value: 'HTMLElement' }, control: false },
     },
+    {
+      input: 'string | undefined',
+      output: { type: { name: 'string' } },
+    },
+    {
+      input: 'number | null',
+      output: { type: { name: 'number' } },
+    },
+    {
+      input: '(() => Promise<void>) | undefined',
+      output: { type: { name: 'function' } },
+    },
+    {
+      input: '(\n    delegate: HTMLElement\n  ) => Promise<void> | void',
+      output: { type: { name: 'function' } },
+    },
+    {
+      input: '{\n    mainAxis?: number;\n    crossAxis?: number;\n    alignmentAxis?: number;\n  }',
+      output: { type: { name: 'object', value: {} } },
+    },
+    {
+      input: "\n  | 'small'\n  | 'medium'\n  | undefined",
+      output: { type: { name: 'enum', value: ['small', 'medium'] } },
+    },
+    {
+      input: "'a  b' | 'c'",
+      output: { type: { name: 'enum', value: ['a  b', 'c'] } },
+    },
     {
       input: '',
       output: undefined,
diff --git a/code/renderers/web-components/src/docgen/component-docgen/arg-types/parse-type-text.ts b/code/renderers/web-components/src/docgen/component-docgen/arg-types/parse-type-text.ts
index 1c93e8ffa708..efcd4abbcb2f 100644
--- a/code/renderers/web-components/src/docgen/component-docgen/arg-types/parse-type-text.ts
+++ b/code/renderers/web-components/src/docgen/component-docgen/arg-types/parse-type-text.ts
@@ -22,13 +22,14 @@ const DROPPED_MEMBERS = new Set([
   '(string & {})',
 ]);
 const FUNCTION_RE = /^(new\s+)?(<.*>\s*)?\(.*\)\s*=>/;
+/** Matches a quoted literal (kept verbatim) or a whitespace run (collapsed). */
+const QUOTED_OR_WHITESPACE_RE = /(['"])(?:\\.|(?!\1)[^\\])*\1|\s+/g;
 const UNKNOWN_ARRAY_ELEMENT_TYPE = { name: 'other', value: '' } as const;
 /** Real types nest a handful of levels; the cap only stops pathological input. */
 const MAX_ARRAY_DEPTH = 8;
 
 export function parseTypeText(text: string | undefined, depth = 0): ParsedTypeText | undefined {
-  const trimmed = text?.trim() ?? '';
-  const members = normalizeMembers(trimmed);
+  const members = normalizeMembers(collapseWhitespace(text ?? ''));
 
   if (members.length === 0) {
     return undefined;
@@ -102,6 +103,11 @@ function normalizeMembers(text: string): string[] {
   return flattenMembers(text).filter((member) => member && !DROPPED_MEMBERS.has(member));
 }
 
+/** Analyzers such as Stencil's emit multiline `type.text`; matchers below assume one line. */
+function collapseWhitespace(text: string): string {
+  return text.replace(QUOTED_OR_WHITESPACE_RE, (match) => (/^\s/.test(match) ? ' ' : match)).trim();
+}
+
 function flattenMembers(text: string): string[] {
   return splitTopLevel(text).flatMap((part) => {
     const member = stripWrappingParens(part);

From 6c6a6db1d8fc0e1f2a2777e4a2da3d2948ba262c Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Thu, 15 Oct 2026 11:52:45 +0200
Subject: [PATCH 035/326] WC: Skip undefined and null args in the web
 components default render

---
 MIGRATION.md                                  |  2 +-
 .../web-components/src/bind-args.test.ts      | 45 ++++++++++++++++---
 .../renderers/web-components/src/bind-args.ts |  6 ++-
 3 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 54de1b05fa13..6406679d9bbd 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1551,7 +1551,7 @@ It never reads argTypes or waits for docgen, so a story renders the same with or
 | `<name>-part`, `<name>-state`                               | `::part(<name>)` / `:state(<name>)` rule scoped to the story |
 | anything else                                               | property                                                     |
 
-Except for properties, `undefined`, `null` and `''` leave an arg unbound.
+`undefined` and `null` leave an arg unbound. `''` reaches a property but never sets an attribute.
 
 An element registered after the story renders, for example by an autoloader or a lazy import, cannot be inspected, so its plain keys fall back to properties; suffixed keys still bind.
 
diff --git a/code/renderers/web-components/src/bind-args.test.ts b/code/renderers/web-components/src/bind-args.test.ts
index f9bf6fbb4da7..3332ba6e9a0d 100644
--- a/code/renderers/web-components/src/bind-args.test.ts
+++ b/code/renderers/web-components/src/bind-args.test.ts
@@ -8,10 +8,19 @@ import { bindArgs } from './bind-args.ts';
 const X_DEMO_TAG = 'x-demo';
 
 class XDemo extends HTMLElement {
-  static observedAttributes = ['label', 'count', 'is-open', 'disabled', 'has-slot', 'open'];
+  static observedAttributes = ['label', 'count', 'is-open', 'disabled', 'has-slot', 'open', 'name'];
 
   items: string[] = [];
 
+  /** Reflects like a Lit `@property({ reflect: true })` that stringifies its value. */
+  get name(): string | null {
+    return this.getAttribute('name');
+  }
+
+  set name(value: unknown) {
+    this.setAttribute('name', String(value));
+  }
+
   open = true;
 
   text = 'initial';
@@ -65,10 +74,31 @@ describe('bindArgs', () => {
       expectedProperties: { open: false },
     },
     {
-      name: 'assigns an empty string to a string property',
-      args: { text: '' },
+      name: 'leaves undefined and null declared properties unset and assigns empty strings',
+      args: { name: undefined, items: null, text: '' },
+      expected: '<x-demo></x-demo>',
+      expectedProperties: { name: null, items: [], text: '' },
+    },
+    {
+      name: 'omits an empty observed attribute',
+      args: { label: '' },
+      expected: '<x-demo></x-demo>',
+    },
+    {
+      name: 'leaves a null reflecting property unset',
+      args: { name: null },
+      expected: '<x-demo></x-demo>',
+    },
+    {
+      name: 'assigns a set reflecting property',
+      args: { name: 'demo' },
+      expected: '<x-demo name="demo"></x-demo>',
+    },
+    {
+      name: 'leaves unset unknown keys unassigned',
+      args: { customValue: null },
       expected: '<x-demo></x-demo>',
-      expectedProperties: { text: '' },
+      expectedProperties: { customValue: undefined },
     },
     {
       name: 'assigns unknown arg keys as properties',
@@ -100,15 +130,20 @@ describe('bindArgs', () => {
       expectedRules: ['x-demo::part(panel) { color: red; }', 'x-demo:state(active) { border: 0; }'],
     },
     {
-      name: 'skips null and empty slot, CSS custom property, part and state args',
+      name: 'skips unset slot, CSS custom property, part, state and event args',
       args: {
         'default-slot': null,
         'actions-slot': '',
+        'footer-slot': undefined,
         '--panel-color': null,
+        '--panel-gap': '',
+        '--panel-width': undefined,
         'panel-part': null,
         'active-state': '',
+        'my-change-event': undefined,
       },
       expected: '<x-demo></x-demo>',
+      expectedProperties: { 'my-change-event': undefined },
     },
     {
       name: 'does not assign method args',
diff --git a/code/renderers/web-components/src/bind-args.ts b/code/renderers/web-components/src/bind-args.ts
index 450bb3a1abb7..55fd460f8b22 100644
--- a/code/renderers/web-components/src/bind-args.ts
+++ b/code/renderers/web-components/src/bind-args.ts
@@ -16,12 +16,16 @@ const BINDERS: Record<Exclude<ArgKeyCategory, 'cssProperties'>, Binder> = {
   cssStates: (element, name, value) => styleRule(`${element.localName}:state(${name})`, value),
 };
 
-// Element properties win over attributes so booleans that default to `true` and empty strings reach the element; runtime checks run before suffixes so a declared attribute such as `has-slot` wins, as in the mapper.
+// `undefined` and `null` args are skipped so the element keeps its defaults; element properties win over attributes so booleans that default to `true` and empty strings reach the element; runtime checks run before suffixes so a declared attribute such as `has-slot` wins, as in the mapper.
 export function bindArgs(element: HTMLElement, args: Args): string[] {
   const observedAttributes = observedAttributesOf(element);
   const styleRules: string[] = [];
 
   for (const [key, value] of Object.entries(args)) {
+    if (value === undefined || value === null) {
+      continue;
+    }
+
     const parsedKey = parseArgKey(key);
 
     if (parsedKey?.category === 'cssProperties') {

From 0353c7ff1a9bce9f02a956d4e6c1096ced4b6510 Mon Sep 17 00:00:00 2001
From: Obvious <obvious@obvious.ai>
Date: Thu, 15 Oct 2026 10:48:58 +0000
Subject: [PATCH 036/326] fix(core): make TypeScript loader hook registration
 best effort

Replace the JEST_WORKER_ID environment guard with a best-effort catch.
If the runtime forbids module hooks (e.g. Jest's sandbox), log at debug
level and let import() decide instead of keying off an inherited
environment variable. Cache the failed result: a runtime that refuses
registration once refuses it every time.
---
 code/core/src/shared/utils/module.test.ts | 57 ++++++++++++++---------
 code/core/src/shared/utils/module.ts      | 38 +++++++--------
 2 files changed, 53 insertions(+), 42 deletions(-)

diff --git a/code/core/src/shared/utils/module.test.ts b/code/core/src/shared/utils/module.test.ts
index b9e59657eb71..a4093a66ad91 100644
--- a/code/core/src/shared/utils/module.test.ts
+++ b/code/core/src/shared/utils/module.test.ts
@@ -5,50 +5,65 @@ import { afterEach, describe, expect, it, vi } from 'vitest';
 // vitest-setup.ts globally mocks shared/utils/module.ts; these tests need the real implementation.
 vi.unmock('./module.ts');
 
-const realRegister = nodeModule.register;
-const realRegisterHooks = nodeModule.registerHooks;
-
 const importFreshModule = async () => {
   vi.resetModules();
   return import('./module.ts');
 };
 
+const hookRegistrations = (
+  register: ReturnType<typeof vi.spyOn>,
+  registerHooks: ReturnType<typeof vi.spyOn> | undefined
+) => register.mock.calls.length + (registerHooks?.mock.calls.length ?? 0);
+
 describe('importModule', () => {
   afterEach(() => {
-    (nodeModule as any).register = realRegister;
-    (nodeModule as any).registerHooks = realRegisterHooks;
+    vi.restoreAllMocks();
     vi.unstubAllEnvs();
   });
 
-  it('does not register module hooks when running under Jest', async () => {
-    const register = vi.fn(() => {
+  it('still imports the module when the runtime forbids module hook registration', async () => {
+    // The throwing spies simulate a refusing runtime and keep real hooks out of this process.
+    vi.spyOn(nodeModule, 'register').mockImplementation(() => {
       throw new Error('module.register() is not supported in Jest');
     });
-    const registerHooks = vi.fn(() => {
-      throw new Error('module.registerHooks() is not supported in Jest');
-    });
-    (nodeModule as any).register = register;
-    (nodeModule as any).registerHooks = registerHooks;
-    vi.stubEnv('JEST_WORKER_ID', '1');
+    if ('registerHooks' in nodeModule) {
+      vi.spyOn(nodeModule, 'registerHooks').mockImplementation(() => {
+        throw new Error('module.registerHooks() is not supported in Jest');
+      });
+    }
+    const { importModule } = await importFreshModule();
+
+    const mod = await importModule(new URL('./module.ts', import.meta.url).href);
+
+    expect(mod).toBeDefined();
+  });
+
+  it('registers the TypeScript loader hooks exactly once when the runtime allows them', async () => {
+    const register = vi.spyOn(nodeModule, 'register').mockImplementation(() => {});
+    const registerHooks =
+      'registerHooks' in nodeModule
+        ? vi.spyOn(nodeModule, 'registerHooks').mockImplementation(() => ({ deregister: () => {} }))
+        : undefined;
     const { importModule } = await importFreshModule();
 
     const mod = await importModule(new URL('./module.ts', import.meta.url).href);
 
-    expect(register).not.toHaveBeenCalled();
-    expect(registerHooks).not.toHaveBeenCalled();
+    expect(hookRegistrations(register, registerHooks)).toBe(1);
     expect(mod).toBeDefined();
   });
 
-  it('still registers the TypeScript loader hooks when not running under Jest', async () => {
-    const register = vi.fn();
-    const registerHooks = vi.fn();
-    (nodeModule as any).register = register;
-    (nodeModule as any).registerHooks = registerHooks;
+  it('still registers the hooks when JEST_WORKER_ID is inherited from the parent environment', async () => {
+    const register = vi.spyOn(nodeModule, 'register').mockImplementation(() => {});
+    const registerHooks =
+      'registerHooks' in nodeModule
+        ? vi.spyOn(nodeModule, 'registerHooks').mockImplementation(() => ({ deregister: () => {} }))
+        : undefined;
+    vi.stubEnv('JEST_WORKER_ID', '1');
     const { importModule } = await importFreshModule();
 
     const mod = await importModule(new URL('./module.ts', import.meta.url).href);
 
-    expect(register.mock.calls.length + registerHooks.mock.calls.length).toBe(1);
+    expect(hookRegistrations(register, registerHooks)).toBe(1);
     expect(mod).toBeDefined();
   });
 });
diff --git a/code/core/src/shared/utils/module.ts b/code/core/src/shared/utils/module.ts
index 0b7b0a719c3a..16e75a37d026 100644
--- a/code/core/src/shared/utils/module.ts
+++ b/code/core/src/shared/utils/module.ts
@@ -7,6 +7,8 @@ import { resolveModulePath } from 'exsolve';
 import semver from 'semver';
 import { dirname, join } from 'pathe';
 
+import { logger } from 'storybook/internal/node-logger';
+
 import { jsModuleExtensions } from '../constants/extensions.ts';
 
 /**
@@ -49,30 +51,24 @@ export const resolvePackageDir = (
 let typescriptLoaderRegistration: Promise<void> | null = null;
 
 function registerTypescriptLoader() {
-  // Jest forbids module hook registration inside its sandbox (it compiles TS itself).
-  if (process.env.JEST_WORKER_ID) {
-    return Promise.resolve();
-  }
-  if (!typescriptLoaderRegistration) {
-    typescriptLoaderRegistration = (async () => {
-      if (semver.gte(process.versions.node, '26.0.0')) {
-        try {
-          const { load } = await import('storybook/internal/bin/loader');
-          nodeModule.registerHooks({ load });
-        } catch {
-          // Fallback in case nodejs/node#62786 caused an exception
-          const typescriptLoaderUrl = importMetaResolve('storybook/internal/bin/loader');
-          nodeModule.register(typescriptLoaderUrl, import.meta.url);
-        }
-      } else {
+  typescriptLoaderRegistration ??= (async () => {
+    if (semver.gte(process.versions.node, '26.0.0')) {
+      try {
+        const { load } = await import('storybook/internal/bin/loader');
+        nodeModule.registerHooks({ load });
+      } catch {
+        // Fallback in case nodejs/node#62786 caused an exception
         const typescriptLoaderUrl = importMetaResolve('storybook/internal/bin/loader');
         nodeModule.register(typescriptLoaderUrl, import.meta.url);
       }
-    })().catch((e) => {
-      typescriptLoaderRegistration = null;
-      throw e;
-    });
-  }
+    } else {
+      const typescriptLoaderUrl = importMetaResolve('storybook/internal/bin/loader');
+      nodeModule.register(typescriptLoaderUrl, import.meta.url);
+    }
+  })().catch((error) => {
+    // Some runtimes (e.g. Jest's sandbox) forbid module hooks; importing may still succeed without them.
+    logger.debug(`Storybook's TypeScript loader hooks could not be registered: ${error}`);
+  });
   return typescriptLoaderRegistration;
 }
 

From 4e52c092c2da9c829a7bec43917abbe408695c40 Mon Sep 17 00:00:00 2001
From: Obvious <obvious@obvious.ai>
Date: Thu, 15 Oct 2026 10:53:18 +0000
Subject: [PATCH 037/326] fix(builder-vite): bound vite config discovery search
 with getProjectRoot

Replace the hand-rolled upward walk in reportUnloadedUserViteConfig with
empathic's find.any, bounded by getProjectRoot(). The old loop stopped
only at a directory containing .git or at the filesystem root, so on a
checkout without .git (tarball, sandbox, Docker context) it could find
an unrelated vite.config in a parent directory and suggest it as the
viteConfigPath override. getProjectRoot() also respects the
STORYBOOK_PROJECT_ROOT override and recognizes .svn/.hg with a lockfile
fallback.

In the tests, mock empathic/find and getProjectRoot so the "no Vite
config exists" case no longer walks the real filesystem up to /.

Also trim comments to follow the comments-and-jsdoc guideline and share
one presets fixture factory between the builder-option tests instead of
pasting the presets object per test.
---
 .../builder-vite/src/vite-config.test.ts      | 77 +++++++++----------
 code/builders/builder-vite/src/vite-config.ts | 43 +++--------
 2 files changed, 50 insertions(+), 70 deletions(-)

diff --git a/code/builders/builder-vite/src/vite-config.test.ts b/code/builders/builder-vite/src/vite-config.test.ts
index 4f54b250ad2a..9b54b33b2d73 100644
--- a/code/builders/builder-vite/src/vite-config.test.ts
+++ b/code/builders/builder-vite/src/vite-config.test.ts
@@ -5,11 +5,14 @@ import { afterEach, describe, expect, it, vi } from 'vitest';
 import { resolve } from 'node:path';
 
 import { Channel } from 'storybook/internal/channels';
+import { getProjectRoot } from 'storybook/internal/common';
 import type { Options, Presets } from 'storybook/internal/types';
 
+import * as find from 'empathic/find';
 import { loadConfigFromFile } from 'vite';
 
 import { storybookConfigPlugin } from './plugins/storybook-config-plugin.ts';
+import type { BuilderOptions } from './types.ts';
 import { commonConfig, resolveVitePublicDir } from './vite-config.ts';
 
 vi.mock('node:fs', { spy: true });
@@ -20,10 +23,12 @@ vi.mock('vite', async (importOriginal) => ({
 }));
 const loadConfigFromFileMock = vi.mocked(loadConfigFromFile);
 
+vi.mock('empathic/find', { spy: true });
+vi.mock('storybook/internal/common', { spy: true });
+
 const { loggerWarnMock } = vi.hoisted(() => ({ loggerWarnMock: vi.fn() }));
 vi.mock('storybook/internal/node-logger', () => ({
-  // `once` passes straight through to the warn mock: deduping is node-logger's own tested
-  // behavior, these tests only assert that the builder reports (or stays quiet).
+  // `once` passes straight through to the warn mock; deduping is node-logger's own tested behavior.
   once: () => (message: string) => loggerWarnMock(message),
   logger: { warn: loggerWarnMock, error: vi.fn(), log: vi.fn(), debug: vi.fn() },
 }));
@@ -49,6 +54,22 @@ const dummyOptions: Options = {
   presetsList: [],
 };
 
+const presetsWith = (builderOptions: BuilderOptions): Presets =>
+  ({
+    apply: async (key: string) =>
+      ({
+        framework: { name: '' },
+        addons: [],
+        core: {
+          builder: {
+            name: '@storybook/builder-vite',
+            options: builderOptions,
+          },
+        },
+        options: {},
+      })[key],
+  }) as Presets;
+
 const mockExistsSync = async (pathToMock: string, exists: boolean) => {
   const actual = await vi.importActual<typeof import('node:fs')>('node:fs');
 
@@ -65,6 +86,8 @@ afterEach(() => {
   vi.mocked(existsSync).mockReset();
   loadConfigFromFileMock.mockReset();
   loggerWarnMock.mockClear();
+  vi.mocked(find.any).mockReset();
+  vi.mocked(getProjectRoot).mockReset();
 });
 
 describe('commonConfig', () => {
@@ -84,22 +107,7 @@ describe('commonConfig', () => {
   it('should pass configLoader option to loadConfigFromFile', async () => {
     const optionsWithConfigLoader: Options = {
       ...dummyOptions,
-      presets: {
-        apply: async (key: string) =>
-          ({
-            framework: { name: '' },
-            addons: [],
-            core: {
-              builder: {
-                name: '@storybook/builder-vite',
-                options: {
-                  configLoader: 'native',
-                },
-              },
-            },
-            options: {},
-          })[key],
-      } as Presets,
+      presets: presetsWith({ configLoader: 'native' }),
     };
 
     // Inline mock: this test asserts a specific call signature, so it needs its
@@ -199,10 +207,9 @@ describe('resolveVitePublicDir', () => {
 });
 
 describe('discovery miss reporting', () => {
-  it('warns when a Vite config exists outside of the discovery root', async () => {
-    // Custom config-dir layout: the parent of the config dir is `configuration/`, not the
-    // project root, so discovery cannot see the config at the project root.
-    await mockExistsSync('/project/vite.config.mjs', true);
+  it('warns when configDir is nested and the Vite config sits at the project root', async () => {
+    vi.mocked(getProjectRoot).mockReturnValue('/project');
+    vi.mocked(find.any).mockReturnValueOnce(resolve('/project/vite.config.mjs'));
     loadConfigFromFileMock.mockResolvedValueOnce(null);
 
     await commonConfig(
@@ -210,6 +217,10 @@ describe('discovery miss reporting', () => {
       'development'
     );
 
+    expect(vi.mocked(find.any)).toHaveBeenCalledWith(expect.anything(), {
+      cwd: resolve('/project/configuration'),
+      last: '/project',
+    });
     expect(loggerWarnMock).toHaveBeenCalledTimes(1);
     expect(loggerWarnMock.mock.calls[0][0]).toContain('/project/vite.config.mjs');
     expect(loggerWarnMock.mock.calls[0][0]).toContain(
@@ -218,7 +229,8 @@ describe('discovery miss reporting', () => {
   });
 
   it('stays quiet when no Vite config exists in the project at all', async () => {
-    await mockExistsSync('/project/vite.config.ts', false);
+    vi.mocked(getProjectRoot).mockReturnValue('/project');
+    vi.mocked(find.any).mockReturnValueOnce(undefined);
     loadConfigFromFileMock.mockResolvedValueOnce(null);
 
     await commonConfig({ ...dummyOptions, configDir: '/project/.storybook' }, 'development');
@@ -231,36 +243,23 @@ describe('discovery miss reporting', () => {
 
     await commonConfig({ ...dummyOptions, configDir: '/project/.storybook' }, 'development');
 
+    expect(vi.mocked(find.any)).not.toHaveBeenCalled();
     expect(loggerWarnMock).not.toHaveBeenCalled();
   });
 
   it('stays quiet when an explicit viteConfigPath resolves to nothing', async () => {
-    // An explicit `viteConfigPath` hands config resolution to the user; Vite errors on missing
-    // explicit paths itself, so a null result must not produce a discovery warning.
     loadConfigFromFileMock.mockResolvedValueOnce(null);
 
     await commonConfig(
       {
         ...dummyOptions,
         configDir: '/project/.storybook',
-        presets: {
-          apply: async (key: string) =>
-            ({
-              framework: { name: '' },
-              addons: [],
-              core: {
-                builder: {
-                  name: '@storybook/builder-vite',
-                  options: { viteConfigPath: '/custom/vite.config.ts' },
-                },
-              },
-              options: {},
-            })[key],
-        } as Presets,
+        presets: presetsWith({ viteConfigPath: '/custom/vite.config.ts' }),
       },
       'development'
     );
 
+    expect(vi.mocked(find.any)).not.toHaveBeenCalled();
     expect(loggerWarnMock).not.toHaveBeenCalled();
   });
 });
diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts
index fb333c4c1823..f59178025e8d 100644
--- a/code/builders/builder-vite/src/vite-config.ts
+++ b/code/builders/builder-vite/src/vite-config.ts
@@ -1,10 +1,15 @@
 import { existsSync } from 'node:fs';
 import { resolve } from 'node:path';
 
-import { getBuilderOptions, resolvePathInStorybookCache } from 'storybook/internal/common';
+import {
+  getBuilderOptions,
+  getProjectRoot,
+  resolvePathInStorybookCache,
+} from 'storybook/internal/common';
 import { once } from 'storybook/internal/node-logger';
 import type { Options } from 'storybook/internal/types';
 
+import * as find from 'empathic/find';
 import { dedent } from 'ts-dedent';
 import type {
   ConfigEnv,
@@ -48,35 +53,12 @@ const DEFAULT_VITE_CONFIG_FILES = [
 
 const warnOnce = once('warn');
 
-/**
- * Vite's `loadConfigFromFile` resolves `null` — silently, without logging anything — when it
- * cannot find a Vite config file. Discovery only searches the parent directory of the Storybook
- * config dir, so a config that lives elsewhere in the project (e.g. the repository root above a
- * nested config dir) is silently ignored and Storybook boots with the user's Vite settings
- * unapplied. Make that case loud, while a project with no Vite config at all stays quiet.
- */
+// loadConfigFromFile returns null without logging when discovery misses.
 function reportUnloadedUserViteConfig(configDir: string, projectRoot: string): void {
-  // Walk upwards within the project (bounded by the repository root) for a Vite config that
-  // discovery could not see. Nothing found means the project has no Vite config at all, which
-  // is common and stays quiet.
-  let dir = projectRoot;
-  let unloadedConfig: string | undefined;
-
-  while (dir) {
-    unloadedConfig = DEFAULT_VITE_CONFIG_FILES.map((filename) => resolve(dir, filename)).find(
-      (candidate) => existsSync(candidate)
-    );
-
-    if (unloadedConfig || existsSync(resolve(dir, '.git'))) {
-      break;
-    }
-
-    const parent = resolve(dir, '..');
-    if (parent === dir) {
-      break; // Reached the filesystem root
-    }
-    dir = parent;
-  }
+  const unloadedConfig = find.any(DEFAULT_VITE_CONFIG_FILES, {
+    cwd: projectRoot,
+    last: getProjectRoot(),
+  });
 
   if (!unloadedConfig) {
     return;
@@ -107,8 +89,7 @@ async function loadUserViteConfig(options: Options, type: PluginConfigType): Pro
     configLoader
   );
 
-  // An explicit `viteConfigPath` means the user owns config resolution: Vite either loads it or
-  // errors on it. Only the automatic discovery path can miss silently.
+  // An explicit `viteConfigPath` is the user's responsibility; Vite errors on it itself.
   if (!loaded && !viteConfigPath) {
     reportUnloadedUserViteConfig(options.configDir, projectRoot);
   }

From 92b8038b6ee4d3c2ae94eba12e2b64751fb27077 Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Thu, 15 Oct 2026 13:35:03 +0200
Subject: [PATCH 038/326] WC: Read WC meta.component through a spread of a
 local meta object

---
 .../component-docgen/build-docgen.test.ts     | 22 ++++++
 .../docgen/component-docgen/build-docgen.ts   |  8 +++
 .../resolve-component.test.ts                 | 67 +++++++++++++++++--
 .../resolve-component/resolve-component.ts    | 30 +++++++--
 4 files changed, 117 insertions(+), 10 deletions(-)

diff --git a/code/renderers/web-components/src/docgen/component-docgen/build-docgen.test.ts b/code/renderers/web-components/src/docgen/component-docgen/build-docgen.test.ts
index ccdeb17af7c2..8c1995cee24f 100644
--- a/code/renderers/web-components/src/docgen/component-docgen/build-docgen.test.ts
+++ b/code/renderers/web-components/src/docgen/component-docgen/build-docgen.test.ts
@@ -209,6 +209,28 @@ describe('buildDocgenPayload', () => {
         },
       },
     ],
+    [
+      'unresolvable-meta-spread',
+      () => {
+        vol.fromNestedJSON({
+          [STORY_PATH]: `import { meta } from './meta.ts'; export default { ...meta, title: 'Fixture' };`,
+        });
+        return context({
+          tags: [tag({ name: 'XCard', customElement: true, kind: 'class', tagName: 'x-card' })],
+        });
+      },
+      {
+        id: 'fixture',
+        name: 'Fixture',
+        path: './input.stories.ts',
+        jsDocTags: {},
+        error: {
+          name: 'unresolvable-meta-spread',
+          message:
+            "`meta.component` could not be read because `...meta` is not a local object literal. Set `component: '<tag-name>'` on the default export.",
+        },
+      },
+    ],
     [
       'manifest-invalid',
       () => {
diff --git a/code/renderers/web-components/src/docgen/component-docgen/build-docgen.ts b/code/renderers/web-components/src/docgen/component-docgen/build-docgen.ts
index 07cb8f45b433..fa1604eb25e8 100644
--- a/code/renderers/web-components/src/docgen/component-docgen/build-docgen.ts
+++ b/code/renderers/web-components/src/docgen/component-docgen/build-docgen.ts
@@ -59,6 +59,14 @@ export function buildDocgenPayload(
     }
 
     const componentName = input.entry.title.slice(input.entry.title.lastIndexOf('/') + 1);
+    if (resolved.reason === 'unresolvable-meta-spread') {
+      return fail(componentName, {
+        name: 'unresolvable-meta-spread',
+        message:
+          `\`meta.component\` could not be read because \`${resolved.spread}\` is not a local object literal. ` +
+          "Set `component: '<tag-name>'` on the default export.",
+      });
+    }
     return fail(componentName, {
       name: 'component-not-a-tag',
       message: `\`meta.component\` must be the element's tag name as a string, got \`${resolved.expression}\``,
diff --git a/code/renderers/web-components/src/docgen/component-docgen/resolve-component/resolve-component.test.ts b/code/renderers/web-components/src/docgen/component-docgen/resolve-component/resolve-component.test.ts
index 77fce92b6a0e..b1b9c69a4a2d 100644
--- a/code/renderers/web-components/src/docgen/component-docgen/resolve-component/resolve-component.test.ts
+++ b/code/renderers/web-components/src/docgen/component-docgen/resolve-component/resolve-component.test.ts
@@ -43,6 +43,41 @@ describe('resolveStoryComponent', () => {
       `,
       { tag: 'x-csf4' },
     ],
+    [
+      'reads a component spread from a local meta object',
+      `const meta = { title: 'Fixture', component: 'x-tabs' }; export default { ...meta };`,
+      { tag: 'x-tabs' },
+    ],
+    [
+      'reads a spread component alongside other literal properties',
+      `const meta = { component: 'x-tabs' }; export default { ...meta, tags: ['autodocs'] };`,
+      { tag: 'x-tabs' },
+    ],
+    [
+      'reads a spread meta object with a satisfies assertion',
+      `const meta = { component: 'x-tabs' } satisfies Meta; export default { ...meta };`,
+      { tag: 'x-tabs' },
+    ],
+    [
+      'reads a spread meta object with an as assertion',
+      `const meta = { component: 'x-tabs' } as Meta; export default { ...meta };`,
+      { tag: 'x-tabs' },
+    ],
+    [
+      'lets a literal component written after the spread win',
+      `const meta = { component: 'x-old' }; export default { ...meta, component: 'x-new' };`,
+      { tag: 'x-new' },
+    ],
+    [
+      'lets a spread written after the literal component win',
+      `const meta = { component: 'x-new' }; export default { component: 'x-old', ...meta };`,
+      { tag: 'x-new' },
+    ],
+    [
+      'reads a literal component next to an unreadable spread',
+      `import { shared } from './shared.ts'; export default { component: 'x-tabs', ...shared };`,
+      { tag: 'x-tabs' },
+    ],
   ])('%s', (_name, source, expected) => {
     expect(resolveStoryComponent(csf(source))).toEqual(expected);
   });
@@ -68,13 +103,37 @@ describe('resolveStoryComponent', () => {
       `const Button = 'x-button'; export default { title: 'Fixture', component: Button as any };`,
       { reason: 'component-not-a-tag', expression: 'Button as any' },
     ],
+    [
+      'reports a non-tag component reached through a spread',
+      `const Button = 'x-button'; const meta = { component: Button }; export default { ...meta };`,
+      { reason: 'component-not-a-tag', expression: 'Button' },
+    ],
+    [
+      'reports a spread of an imported meta',
+      `import { meta } from './meta.ts'; export default { ...meta, tags: ['autodocs'] };`,
+      { reason: 'unresolvable-meta-spread', spread: '...meta' },
+    ],
+    [
+      'reports a spread of a call',
+      `export default { ...makeMeta('x-tabs') };`,
+      { reason: 'unresolvable-meta-spread', spread: "...makeMeta('x-tabs')" },
+    ],
+    [
+      'reports a spread of a local binding that is not an object literal',
+      `const meta = makeMeta(); export default { ...meta };`,
+      { reason: 'unresolvable-meta-spread', spread: '...meta' },
+    ],
   ])('%s', (_name, source, expected) => {
     expect(resolveStoryComponent(csf(source))).toEqual(expected);
   });
 
-  it('reports no component for missing meta.component', () => {
-    expect(resolveStoryComponent(csf(`export default { title: 'Fixture' };`))).toEqual({
-      reason: 'no-meta-component',
-    });
+  it.each([
+    ['a meta without component', `export default { title: 'Fixture' };`],
+    [
+      'a local spread without component',
+      `const meta = { title: 'Fixture' }; export default { ...meta };`,
+    ],
+  ])('reports no component for %s', (_name, source) => {
+    expect(resolveStoryComponent(csf(source))).toEqual({ reason: 'no-meta-component' });
   });
 });
diff --git a/code/renderers/web-components/src/docgen/component-docgen/resolve-component/resolve-component.ts b/code/renderers/web-components/src/docgen/component-docgen/resolve-component/resolve-component.ts
index 48f596c3d1d4..58c3f4464837 100644
--- a/code/renderers/web-components/src/docgen/component-docgen/resolve-component/resolve-component.ts
+++ b/code/renderers/web-components/src/docgen/component-docgen/resolve-component/resolve-component.ts
@@ -1,5 +1,5 @@
 import type { CsfFile } from 'storybook/internal/csf-tools';
-import { loadCsf, unwrapExpression } from 'storybook/internal/csf-tools';
+import { loadCsf, resolveObjectMembers, unwrapExpression } from 'storybook/internal/csf-tools';
 import { recast, types as t } from 'storybook/internal/babel';
 
 import { readFileSync } from 'node:fs';
@@ -7,7 +7,8 @@ import { readFileSync } from 'node:fs';
 export type WebComponentsComponentResolution =
   | { tag: string }
   | { reason: 'no-meta-component' }
-  | { reason: 'component-not-a-tag'; expression: string };
+  | { reason: 'component-not-a-tag'; expression: string }
+  | { reason: 'unresolvable-meta-spread'; spread: string };
 
 export function parseStoryFile(storyFilePath: string, title: string): CsfFile | undefined {
   try {
@@ -35,11 +36,28 @@ function tagFromNode(node: t.Node): WebComponentsComponentResolution {
   return { reason: 'component-not-a-tag', expression };
 }
 
+/**
+ * Reads `component` from the meta object, following spreads of objects declared in the story file.
+ *
+ * @example
+ *
+ * ```ts
+ * const meta = { component: 'x-tabs' } satisfies Meta;
+ * export default { ...meta, tags: ['autodocs'] }; // { tag: 'x-tabs' }
+ * ```
+ */
 export function resolveStoryComponent(csf: CsfFile): WebComponentsComponentResolution {
-  const component = csf._metaAnnotations.component;
-  if (!component) {
-    return { reason: 'no-meta-component' };
+  const members = csf._metaNode
+    ? resolveObjectMembers(csf._metaNode, {
+        program: csf._file.path,
+        filePath: csf._options.fileName ?? '',
+      })
+    : undefined;
+  const component = members?.properties.component;
+  if (component) {
+    return tagFromNode(component);
   }
 
-  return tagFromNode(component);
+  const spread = members?.unresolved.find((source) => source.startsWith('...'));
+  return spread ? { reason: 'unresolvable-meta-spread', spread } : { reason: 'no-meta-component' };
 }

From d5e22c7360be54299f1e5e5621af1e2c7db62e8b Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Thu, 15 Oct 2026 13:52:08 +0200
Subject: [PATCH 039/326] Keep a later literal component over an unreadable
 spread

A literal component written after a spread the story file cannot read is certain at runtime, so the resolver now reads it even when it sits inside a local meta object that the default export spreads, including through nested local spreads.
A literal component written before an unreadable spread is no longer accepted, because that spread may override it, and the resolver reports the spread as unresolvable-meta-spread instead.
---
 .../resolve-component.test.ts                 | 29 ++++++-
 .../resolve-component/resolve-component.ts    | 84 ++++++++++++++++---
 2 files changed, 99 insertions(+), 14 deletions(-)

diff --git a/code/renderers/web-components/src/docgen/component-docgen/resolve-component/resolve-component.test.ts b/code/renderers/web-components/src/docgen/component-docgen/resolve-component/resolve-component.test.ts
index b1b9c69a4a2d..d32b196e087e 100644
--- a/code/renderers/web-components/src/docgen/component-docgen/resolve-component/resolve-component.test.ts
+++ b/code/renderers/web-components/src/docgen/component-docgen/resolve-component/resolve-component.test.ts
@@ -74,10 +74,25 @@ describe('resolveStoryComponent', () => {
       { tag: 'x-new' },
     ],
     [
-      'reads a literal component next to an unreadable spread',
-      `import { shared } from './shared.ts'; export default { component: 'x-tabs', ...shared };`,
+      'reads a literal component written after an unreadable spread',
+      `import { shared } from './shared.ts'; export default { ...shared, component: 'x-tabs' };`,
+      { tag: 'x-tabs' },
+    ],
+    [
+      'reads a literal component written after an unreadable spread inside a local meta',
+      `import { shared } from './shared.ts'; const meta = { ...shared, component: 'x-tabs' }; export default { ...meta };`,
       { tag: 'x-tabs' },
     ],
+    [
+      'reads a literal component written after an unreadable spread through nested local spreads',
+      `import { shared } from './shared.ts'; const base = { ...shared, component: 'x-tabs' }; const meta = { ...base, tags: ['autodocs'] }; export default { ...meta };`,
+      { tag: 'x-tabs' },
+    ],
+    [
+      'lets a later partly unreadable spread that ends in a literal component win',
+      `import { shared } from './shared.ts'; const meta = { ...shared, component: 'x-new' }; export default { component: 'x-old', ...meta };`,
+      { tag: 'x-new' },
+    ],
   ])('%s', (_name, source, expected) => {
     expect(resolveStoryComponent(csf(source))).toEqual(expected);
   });
@@ -113,6 +128,16 @@ describe('resolveStoryComponent', () => {
       `import { meta } from './meta.ts'; export default { ...meta, tags: ['autodocs'] };`,
       { reason: 'unresolvable-meta-spread', spread: '...meta' },
     ],
+    [
+      'reports an imported spread written after a literal component',
+      `import { shared } from './shared.ts'; export default { component: 'x-tabs', ...shared };`,
+      { reason: 'unresolvable-meta-spread', spread: '...shared' },
+    ],
+    [
+      'reports an imported spread written after a literal component inside a local meta',
+      `import { shared } from './shared.ts'; const meta = { component: 'x-tabs', ...shared }; export default { ...meta };`,
+      { reason: 'unresolvable-meta-spread', spread: '...shared' },
+    ],
     [
       'reports a spread of a call',
       `export default { ...makeMeta('x-tabs') };`,
diff --git a/code/renderers/web-components/src/docgen/component-docgen/resolve-component/resolve-component.ts b/code/renderers/web-components/src/docgen/component-docgen/resolve-component/resolve-component.ts
index 58c3f4464837..46e6fdd68b5a 100644
--- a/code/renderers/web-components/src/docgen/component-docgen/resolve-component/resolve-component.ts
+++ b/code/renderers/web-components/src/docgen/component-docgen/resolve-component/resolve-component.ts
@@ -1,5 +1,11 @@
-import type { CsfFile } from 'storybook/internal/csf-tools';
-import { loadCsf, resolveObjectMembers, unwrapExpression } from 'storybook/internal/csf-tools';
+import type { CsfFile, ReferenceContext, ResolvedMembers } from 'storybook/internal/csf-tools';
+import {
+  loadCsf,
+  resolveBindingMembers,
+  resolveObjectMembers,
+  sourceOf,
+  unwrapExpression,
+} from 'storybook/internal/csf-tools';
 import { recast, types as t } from 'storybook/internal/babel';
 
 import { readFileSync } from 'node:fs';
@@ -47,17 +53,71 @@ function tagFromNode(node: t.Node): WebComponentsComponentResolution {
  * ```
  */
 export function resolveStoryComponent(csf: CsfFile): WebComponentsComponentResolution {
-  const members = csf._metaNode
-    ? resolveObjectMembers(csf._metaNode, {
-        program: csf._file.path,
-        filePath: csf._options.fileName ?? '',
-      })
-    : undefined;
-  const component = members?.properties.component;
-  if (component) {
+  if (!csf._metaNode) {
+    return { reason: 'no-meta-component' };
+  }
+  const ctx: ReferenceContext = { program: csf._file.path, filePath: csf._options.fileName ?? '' };
+  const members = resolveObjectMembers(csf._metaNode, ctx);
+  return componentIn(members, csf._metaNode, ctx, new Set()) ?? { reason: 'no-meta-component' };
+}
+
+/** The last write of `component`, or `undefined` when nothing knowably writes it. */
+function componentIn(
+  members: ResolvedMembers,
+  object: t.ObjectExpression,
+  ctx: ReferenceContext,
+  visited: Set<t.ObjectExpression>
+): WebComponentsComponentResolution | undefined {
+  const component = members.properties.component;
+  if (component && !members.shadowed.includes('component')) {
     return tagFromNode(component);
   }
 
-  const spread = members?.unresolved.find((source) => source.startsWith('...'));
-  return spread ? { reason: 'unresolvable-meta-spread', spread } : { reason: 'no-meta-component' };
+  // The helper drops a spread it cannot read whole, yet a literal written after the unreadable part
+  // still wins at runtime, so each unreadable spread is read again from the last one back.
+  const unreadable = object.properties
+    .filter((property): property is t.SpreadElement => t.isSpreadElement(property))
+    .filter((spread) => members.unresolved.includes(sourceOf(spread)))
+    .reverse();
+  for (const spread of unreadable) {
+    const found = spreadComponent(spread, ctx, visited);
+    if (found || component) {
+      return found ?? { reason: 'unresolvable-meta-spread', spread: sourceOf(spread) };
+    }
+  }
+  return component && tagFromNode(component);
+}
+
+function spreadComponent(
+  spread: t.SpreadElement,
+  ctx: ReferenceContext,
+  visited: Set<t.ObjectExpression>
+): WebComponentsComponentResolution | undefined {
+  const argument = unwrapExpression(spread.argument);
+  const local = localObject(argument, ctx);
+  if (!local || visited.has(local.object)) {
+    return { reason: 'unresolvable-meta-spread', spread: sourceOf(spread) };
+  }
+  return componentIn(local.members, local.object, ctx, new Set(visited).add(local.object));
+}
+
+/** The object literal a spread argument writes out or names, with the members it resolves to. */
+function localObject(
+  argument: t.Node,
+  ctx: ReferenceContext
+): { object: t.ObjectExpression; members: ResolvedMembers } | undefined {
+  if (t.isObjectExpression(argument)) {
+    return { object: argument, members: resolveObjectMembers(argument, ctx) };
+  }
+  if (!t.isIdentifier(argument)) {
+    return undefined;
+  }
+  const declarator = ctx.program.scope.getBinding(argument.name)?.path.node;
+  const init =
+    t.isVariableDeclarator(declarator) && declarator.init
+      ? unwrapExpression(declarator.init)
+      : undefined;
+  // The binding read keeps the constancy check and any `meta.component = …` assignment.
+  const members = resolveBindingMembers(ctx, argument.name);
+  return t.isObjectExpression(init) && members ? { object: init, members } : undefined;
 }

From 6ad52915e5c350b9f864f18b714bcdadbce77a86 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Thu, 15 Oct 2026 14:58:39 +0200
Subject: [PATCH 040/326] Svelte: Remove deprecated parameters.component path

Storybook 11 drops the leftover deprecation warning in the Svelte source
decorator. Wrapper stories already generate source from context.component.
---
 MIGRATION.md                                    | 17 +++++++++++++++++
 .../svelte/src/docs/sourceDecorator.ts          |  7 +------
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 54de1b05fa13..147baec7ebf9 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -66,6 +66,7 @@
     - [`<Template>` component](#template-component)
     - [`id`, `autodocs` and `source` props on `<Story>`](#id-autodocs-and-source-props-on-story)
   - [Svelte CSF: stories files are indexed without preprocessors](#svelte-csf-stories-files-are-indexed-without-preprocessors)
+  - [Svelte: `parameters.component` removed from the source decorator](#svelte-parameterscomponent-removed-from-the-source-decorator)
   - [Highlight: menu items emit a fixed `HIGHLIGHT_MENU_CLICK` event with a mandatory `id`](#highlight-menu-items-emit-a-fixed-highlight_menu_click-event-with-a-mandatory-id)
   - [`core/module-graph` query aliases removed](#coremodule-graph-query-aliases-removed)
   - [ExternalDocs and ExternalDocsContainer are removed](#externaldocs-and-externaldocscontainer-are-removed)
@@ -1846,6 +1847,22 @@ Storybook used to run the preprocessors from `svelte.config.js` on a stories fil
 
 If a stories file needs a preprocessor outside of `<style>`, for example for TypeScript enums, indexing fails with [`SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0009`](https://github.com/storybookjs/storybook/blob/next/code/renderers/svelte/src/svelte-csf/ERRORS.md#sb_svelte_csf_parser_extract_svelte_0009). Move that code to a separate module, and import it into the stories file.
 
+### Svelte: `parameters.component` removed from the source decorator
+
+The Svelte docs source decorator no longer reads or warns about `parameters.component`. That path has been deprecated since Storybook 7: for stories whose render result is a `@wrapper` component, generated source already used the story's `component` from meta (`context.component`).
+
+If you still set `parameters.component`, delete it and keep the component on the default export / `meta` instead:
+
+```diff
+ export default {
+   component: Button,
+   parameters: {
+-    component: Button,
+     docs: { description: { component: '...' } },
+   },
+ };
+```
+
 ### Highlight: menu items emit a fixed `HIGHLIGHT_MENU_CLICK` event with a mandatory `id`
 
 Highlight menu items no longer accept a `clickEvent` property naming an arbitrary channel event to emit when clicked. This allowed malicious websites to inject menu items into a preview that could send security-sensitive events to the dev server.
diff --git a/code/renderers/svelte/src/docs/sourceDecorator.ts b/code/renderers/svelte/src/docs/sourceDecorator.ts
index fba0cf505bfb..f8e16c3134f1 100644
--- a/code/renderers/svelte/src/docs/sourceDecorator.ts
+++ b/code/renderers/svelte/src/docs/sourceDecorator.ts
@@ -1,4 +1,3 @@
-import { deprecate } from 'storybook/internal/client-logger';
 import { SourceType } from 'storybook/internal/docs-tools';
 import type {
   ArgTypes,
@@ -173,7 +172,7 @@ export const sourceDecorator: DecoratorFunction<SvelteRenderer> = (storyFn, cont
       return;
     }
 
-    const { parameters = {}, args = {}, component: ctxComponent } = context || {};
+    const { args = {}, component: ctxComponent } = context || {};
 
     // excludeDecorators from source generation as they'll generate the wrong code
     // instead get the component directly from the original story function instead
@@ -183,10 +182,6 @@ export const sourceDecorator: DecoratorFunction<SvelteRenderer> = (storyFn, cont
     );
     const { wrapper, slotProperty } = getWrapperProperties(component);
     if (wrapper) {
-      if (parameters.component) {
-        deprecate('parameters.component is deprecated. Using context.component instead.');
-      }
-
       component = ctxComponent;
     }
 

From 225ab690d5e0ece95ea92040b925b29b630c2702 Mon Sep 17 00:00:00 2001
From: Obvious <obvious@obvious.ai>
Date: Thu, 15 Oct 2026 18:51:04 +0000
Subject: [PATCH 041/326] fix(addon-vitest): prebundle react for the
 project-annotations setup file

The project-annotations setup file loads the renderer's entry previews
through a virtual module, and those chunks import React by the bare
specifier. Vitest browser mode pre-bundles only the explicit
optimizeDeps.include entries, so plain `react` was never registered and
the browser loaded react's CJS index.js raw:

  SyntaxError: The requested module '/node_modules/react/index.js'
  does not provide an export named 'default'

Pin `react` in the framework-conditional include next to
react-dom/test-utils for react and nextjs frameworks. Verified against
a fixture on react 19.3.1 / vite 7.3.7 / vitest 5.0.5 / chromium
browser mode: without the pin `vitest run --project=storybook` crashes
importing setup-file-with-project-annotations.js; with it all projects
pass. The include entries' graphs never import React by the bare
specifier, which is why the pin was missing until the annotations
setup file started loading renderer chunks through a virtual module.
---
 code/addons/vitest/src/vitest-plugin/index.ts | 10 ++++++-
 .../src/vitest-plugin/vitest-root.test.ts     | 30 ++++++++++++++++++-
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/code/addons/vitest/src/vitest-plugin/index.ts b/code/addons/vitest/src/vitest-plugin/index.ts
index 212e5389de85..f113aa90dffc 100644
--- a/code/addons/vitest/src/vitest-plugin/index.ts
+++ b/code/addons/vitest/src/vitest-plugin/index.ts
@@ -465,7 +465,15 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin[]> =>
             // @testing-library/dom) reach the browser raw on hoisted node_modules layouts
             'storybook/test',
             ...(frameworkName?.includes('react') || frameworkName?.includes('nextjs')
-              ? ['react-dom/test-utils']
+              ? [
+                  'react-dom/test-utils',
+                  // The project-annotations setup file loads the renderer's entry previews through
+                  // a virtual module, and those chunks contain a bare `import React from 'react'`.
+                  // Browser mode pre-bundles only the explicit `include` entries, so without this
+                  // pin the browser loads react's CJS index.js raw and module linking fails with
+                  // "The requested module 'react/index.js' does not provide an export named 'default'".
+                  'react',
+                ]
               : []),
           ],
         },
diff --git a/code/addons/vitest/src/vitest-plugin/vitest-root.test.ts b/code/addons/vitest/src/vitest-plugin/vitest-root.test.ts
index cd989fa75c03..8dc598f8f502 100644
--- a/code/addons/vitest/src/vitest-plugin/vitest-root.test.ts
+++ b/code/addons/vitest/src/vitest-plugin/vitest-root.test.ts
@@ -76,7 +76,7 @@ async function getPluginConfig(invokingRoot: string, inputTestConfig?: InlineCon
     throw new Error('The plugin config hook returned no test config');
   }
 
-  return { root: config.root, test: config.test, plugin };
+  return { root: config.root, test: config.test, optimizeDeps: config.optimizeDeps, plugin };
 }
 
 describe('story test patterns', () => {
@@ -145,6 +145,34 @@ describe('internal setup files', () => {
   });
 });
 
+describe('dependency prebundling', () => {
+  // The project-annotations setup file loads the framework renderer's entry previews through a
+  // virtual module, and the renderer chunks contain a bare `import React from 'react'`. Browser
+  // mode pre-bundles only the explicit `include` entries — there is no HTML-entry discovery — so
+  // when `react` itself is missing from that list the browser loads react's CJS index.js raw and
+  // module linking fails with "The requested module 'react/index.js' does not provide an export
+  // named 'default'".
+  it('prebundles react when the framework renders react components', async () => {
+    const { optimizeDeps } = await getPluginConfig(REPO_ROOT);
+
+    expect(optimizeDeps?.include).toContain('react');
+  });
+
+  it('does not prebundle react for non-react frameworks', async () => {
+    const applyPreset = presetApply.getMockImplementation()!;
+    presetApply.mockImplementation(async (key: string, fallback?: unknown) => {
+      if (key === 'framework') {
+        return { name: '@storybook/vue3-vite' };
+      }
+      return applyPreset(key, fallback);
+    });
+
+    const { optimizeDeps } = await getPluginConfig(REPO_ROOT);
+
+    expect(optimizeDeps?.include).not.toContain('react');
+  });
+});
+
 describe('browser API permissions', () => {
   interface ApiPermissions {
     allowWrite?: boolean;

From 8057a9b682eefc1609b47b25e0d0c806bed48a61 Mon Sep 17 00:00:00 2001
From: Obvious <obvious@obvious.ai>
Date: Thu, 15 Oct 2026 18:55:17 +0000
Subject: [PATCH 042/326] test(addon-vitest): move framework mock override into
 a nested describe beforeEach

Follows the repo's spy-mocking rule (.cursor/rules/spy-mocking.mdc):
mock implementations belong in beforeEach blocks, not inline in test
cases. Flagged by the Greptile review on this PR.
---
 .../src/vitest-plugin/vitest-root.test.ts     | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/code/addons/vitest/src/vitest-plugin/vitest-root.test.ts b/code/addons/vitest/src/vitest-plugin/vitest-root.test.ts
index 8dc598f8f502..7d3d80af55ab 100644
--- a/code/addons/vitest/src/vitest-plugin/vitest-root.test.ts
+++ b/code/addons/vitest/src/vitest-plugin/vitest-root.test.ts
@@ -158,18 +158,22 @@ describe('dependency prebundling', () => {
     expect(optimizeDeps?.include).toContain('react');
   });
 
-  it('does not prebundle react for non-react frameworks', async () => {
-    const applyPreset = presetApply.getMockImplementation()!;
-    presetApply.mockImplementation(async (key: string, fallback?: unknown) => {
-      if (key === 'framework') {
-        return { name: '@storybook/vue3-vite' };
-      }
-      return applyPreset(key, fallback);
+  describe('non-react frameworks', () => {
+    beforeEach(() => {
+      const applyPreset = presetApply.getMockImplementation()!;
+      presetApply.mockImplementation(async (key: string, fallback?: unknown) => {
+        if (key === 'framework') {
+          return { name: '@storybook/vue3-vite' };
+        }
+        return applyPreset(key, fallback);
+      });
     });
 
-    const { optimizeDeps } = await getPluginConfig(REPO_ROOT);
+    it('does not prebundle react', async () => {
+      const { optimizeDeps } = await getPluginConfig(REPO_ROOT);
 
-    expect(optimizeDeps?.include).not.toContain('react');
+      expect(optimizeDeps?.include).not.toContain('react');
+    });
   });
 });
 

From d9f0928050a5fd507b4446817e446eeba7da5260 Mon Sep 17 00:00:00 2001
From: Easton <easton.shin@marqvision.com>
Date: Tue, 13 Oct 2026 11:52:16 +0900
Subject: [PATCH 043/326] feat(csf-tools): add an OXC-based ESTree layer with
 Babel-compatible scope analysis

Parses with oxc-parser, edits source text through MagicString, and analyzes
scopes with the same binding and reference semantics as @babel/traverse.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 code/core/package.json                       |   2 +
 code/core/src/csf-tools/estree/ast.ts        | 284 ++++++++
 code/core/src/csf-tools/estree/editor.ts     | 541 ++++++++++++++
 code/core/src/csf-tools/estree/scope.test.ts |  96 +++
 code/core/src/csf-tools/estree/scope.ts      | 717 +++++++++++++++++++
 yarn.lock                                    |   2 +
 6 files changed, 1642 insertions(+)
 create mode 100644 code/core/src/csf-tools/estree/ast.ts
 create mode 100644 code/core/src/csf-tools/estree/editor.ts
 create mode 100644 code/core/src/csf-tools/estree/scope.test.ts
 create mode 100644 code/core/src/csf-tools/estree/scope.ts

diff --git a/code/core/package.json b/code/core/package.json
index 092eed2d4b88..5de700eb624b 100644
--- a/code/core/package.json
+++ b/code/core/package.json
@@ -309,6 +309,7 @@
     "@emotion/styled": "^11.14.0",
     "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
     "@happy-dom/global-registrator": "^20.0.11",
+    "@jridgewell/sourcemap-codec": "^1.5.5",
     "@ngard/tiny-isequal": "^1.1.0",
     "@polka/compression": "^1.0.0-next.28",
     "@preact/signals-core": "^1.14.2",
@@ -380,6 +381,7 @@
     "launch-editor": "^2.13.2",
     "lazy-universal-dotenv": "^4.0.0",
     "leven": "^4.0.0",
+    "magic-string": "^1.1.0",
     "mdast-util-from-markdown": "^2.0.0",
     "mdast-util-mdx": "^3.0.0",
     "mdast-util-mdx-jsx": "^3.2.0",
diff --git a/code/core/src/csf-tools/estree/ast.ts b/code/core/src/csf-tools/estree/ast.ts
new file mode 100644
index 000000000000..3039ba732a61
--- /dev/null
+++ b/code/core/src/csf-tools/estree/ast.ts
@@ -0,0 +1,284 @@
+import type * as E from 'oxc-parser';
+import { parseSync, visitorKeys } from 'oxc-parser';
+
+export type { E };
+
+export type Node = E.Node;
+
+export interface SourceLocation {
+  start: { line: number; column: number; index: number };
+  end: { line: number; column: number; index: number };
+}
+
+export interface ParsedModule {
+  code: string;
+  program: E.Program;
+  comments: E.Comment[];
+}
+
+export class EstreeParseError extends SyntaxError {
+  readonly fileName: string | undefined;
+
+  readonly loc: SourceLocation | undefined;
+
+  constructor(message: string, fileName: string | undefined, loc: SourceLocation | undefined) {
+    super(
+      loc
+        ? `${message} (${loc.start.line}:${loc.start.column})${fileName ? ` in ${fileName}` : ''}`
+        : message
+    );
+    this.name = 'EstreeParseError';
+    this.fileName = fileName;
+    this.loc = loc;
+  }
+}
+
+const langFor = (fileName = ''): 'js' | 'jsx' | 'ts' | 'tsx' => {
+  if (/\.(c|m)?tsx?$/.test(fileName)) {
+    return /x$/.test(fileName) ? 'tsx' : 'ts';
+  }
+  // Files without a TS extension may still contain JSX or type syntax, and TSX accepts both.
+  return 'tsx';
+};
+
+export const parseModule = (code: string, fileName?: string): ParsedModule => {
+  const result = parseSync(fileName ?? 'file.tsx', code, {
+    lang: langFor(fileName),
+    sourceType: 'module',
+    preserveParens: false,
+  });
+  const error = result.errors.find((diagnostic) => diagnostic.severity === 'Error');
+  if (error) {
+    const offset = error.labels?.[0]?.start;
+    throw new EstreeParseError(
+      error.message,
+      fileName,
+      offset === undefined ? undefined : locationOf(code, offset, offset)
+    );
+  }
+  return { code, program: result.program, comments: result.comments };
+};
+
+const lineStartsCache = new Map<string, number[]>();
+
+const lineStarts = (code: string) => {
+  let starts = lineStartsCache.get(code);
+  if (!starts) {
+    starts = [0];
+    for (let index = 0; index < code.length; index++) {
+      if (code.charCodeAt(index) === 10) {
+        starts.push(index + 1);
+      }
+    }
+    // One entry: lookups repeat against the file being edited.
+    lineStartsCache.clear();
+    lineStartsCache.set(code, starts);
+  }
+  return starts;
+};
+
+const position = (code: string, index: number) => {
+  const starts = lineStarts(code);
+  let low = 0;
+  let high = starts.length - 1;
+  while (low < high) {
+    const middle = (low + high + 1) >> 1;
+    if (starts[middle] <= index) {
+      low = middle;
+    } else {
+      high = middle - 1;
+    }
+  }
+  return { line: low + 1, column: index - starts[low], index };
+};
+
+export const locationOf = (code: string, start: number, end: number): SourceLocation => ({
+  start: position(code, start),
+  end: position(code, end),
+});
+
+export const isNode = (value: unknown): value is Node =>
+  !!value && typeof value === 'object' && typeof (value as Node).type === 'string';
+
+export const children = (node: Node): Node[] => {
+  const keys = (visitorKeys as Record<string, readonly string[]>)[node.type] ?? [];
+  const result: Node[] = [];
+  for (const key of keys) {
+    const value = (node as unknown as Record<string, unknown>)[key];
+    if (Array.isArray(value)) {
+      for (const item of value) {
+        if (isNode(item)) {
+          result.push(item);
+        }
+      }
+    } else if (isNode(value)) {
+      result.push(value);
+    }
+  }
+  return result;
+};
+
+/** Walk depth-first. Return `false` from `enter` to skip a node's children. */
+export const walk = (
+  node: Node,
+  enter: (node: Node, parent: Node | null) => boolean | void,
+  parent: Node | null = null
+) => {
+  if (enter(node, parent) === false) {
+    return;
+  }
+  for (const child of children(node)) {
+    walk(child, enter, node);
+  }
+};
+
+export const isStringLiteral = (node: unknown): node is E.StringLiteral =>
+  isNode(node) && node.type === 'Literal' && typeof (node as E.StringLiteral).value === 'string';
+
+export const isNumericLiteral = (node: unknown): node is E.NumericLiteral =>
+  isNode(node) && node.type === 'Literal' && typeof (node as E.NumericLiteral).value === 'number';
+
+export const isBooleanLiteral = (node: unknown): node is E.BooleanLiteral =>
+  isNode(node) && node.type === 'Literal' && typeof (node as E.BooleanLiteral).value === 'boolean';
+
+export const isNullLiteral = (node: unknown): node is E.NullLiteral =>
+  isNode(node) &&
+  node.type === 'Literal' &&
+  (node as E.NullLiteral).value === null &&
+  !('regex' in node) &&
+  !('bigint' in node);
+
+export const isRegExpLiteral = (node: unknown): node is E.RegExpLiteral =>
+  isNode(node) && node.type === 'Literal' && 'regex' in node && !!(node as E.RegExpLiteral).regex;
+
+export const isIdentifier = (node: unknown, name?: string): node is E.IdentifierReference =>
+  isNode(node) &&
+  node.type === 'Identifier' &&
+  (name === undefined || (node as E.IdentifierReference).name === name);
+
+export const isFunction = (node: unknown): node is E.Function | E.ArrowFunctionExpression =>
+  isNode(node) &&
+  (node.type === 'FunctionDeclaration' ||
+    node.type === 'FunctionExpression' ||
+    node.type === 'ArrowFunctionExpression');
+
+const WRAPPERS = new Set([
+  'TSAsExpression',
+  'TSSatisfiesExpression',
+  'TSNonNullExpression',
+  'TSTypeAssertion',
+  'ParenthesizedExpression',
+]);
+
+/** Peel TS assertion/satisfies wrappers and parentheses off an expression node. */
+export const unwrapExpression = <T extends Node | null | undefined>(node: T): T => {
+  let current: Node | null | undefined = node;
+  while (current && WRAPPERS.has(current.type)) {
+    current = (current as { expression: Node }).expression;
+  }
+  return current as T;
+};
+
+// Object literal properties written as `key: value`, methods or accessors (not spreads).
+export type Property = E.ObjectProperty;
+
+// Static key of an object member, or `undefined` when only running the code would produce it.
+export const staticKey = (member: Property): string | undefined => {
+  const key = member.key as Node;
+  if (isStringLiteral(key)) {
+    return key.value;
+  }
+  if (isNumericLiteral(key)) {
+    return String(key.value);
+  }
+  if (key.type === 'Identifier' && !member.computed) {
+    return key.name;
+  }
+  if (key.type === 'TemplateLiteral' && key.expressions.length === 0) {
+    return key.quasis[0]?.value.cooked ?? key.quasis[0]?.value.raw;
+  }
+  return undefined;
+};
+
+// Ignores `computed` on purpose, matching the Babel `t.isIdentifier(p.key)` checks.
+export const identifierKey = (member: Node): string | undefined =>
+  member.type === 'Property' && member.key.type === 'Identifier' ? member.key.name : undefined;
+
+export const objectProperty = (object: E.ObjectExpression, name: string): Property | undefined =>
+  object.properties.find(
+    (member): member is Property => member.type === 'Property' && staticKey(member) === name
+  );
+
+export const sourceOf = (code: string, node: { start: number; end: number }) =>
+  code.slice(node.start, node.end);
+
+// The code each registered node was parsed from, so a node can be printed without its module.
+const nodeSources = new WeakMap<object, string>();
+
+// Lets `textOf` print every node under `root`.
+export const registerSource = (root: Node, code: string) => {
+  walk(root, (node) => {
+    nodeSources.set(node, code);
+  });
+};
+
+const textOverrides = new WeakMap<object, string>();
+
+// Pin the text a node prints as, e.g. an expression whose parentheses the parser dropped.
+export const setTextOf = (node: Node, text: string) => {
+  textOverrides.set(node, text);
+};
+
+/** Original source text of a registered node, or `undefined` for a node of unknown origin. */
+export const textOf = (node: Node): string | undefined => {
+  const override = textOverrides.get(node);
+  if (override !== undefined) {
+    return override;
+  }
+  const code = nodeSources.get(node);
+  const span = node as Node & { start: number; end: number };
+  return code === undefined ? undefined : code.slice(span.start, span.end);
+};
+
+/** Parse an expression from source; it and every node inside it print as the text they came from. */
+// A fragment has no file name to pick its grammar. TSX accepts the most, but rejects generic
+// arrows and `<T>value` assertions that a `.ts` file allows.
+export const parseFragment = (code: string): ParsedModule => {
+  try {
+    return parseModule(code);
+  } catch (error) {
+    try {
+      return parseModule(code, 'fragment.ts');
+    } catch {
+      throw error;
+    }
+  }
+};
+
+export const expressionFromSource = (code: string): E.Expression => {
+  const wrapped = `(${code}\n)`;
+  const statement = parseFragment(wrapped).program.body[0];
+  if (statement?.type !== 'ExpressionStatement') {
+    throw new SyntaxError(`Expected an expression: ${code}`);
+  }
+  registerSource(statement.expression, wrapped);
+  setTextOf(statement.expression, code);
+  return statement.expression;
+};
+
+const KEYWORDS = new Set(
+  'break case catch continue debugger default do else finally for function if return switch throw try var const while with new this super class extends export import null true false in instanceof typeof void delete'.split(
+    ' '
+  )
+);
+const STRICT_RESERVED_WORDS = new Set(
+  'implements interface let package private protected public static yield await enum'.split(' ')
+);
+
+/**
+ * Whether `name` can be written as an identifier. Keywords and module reserved words are rejected
+ * unless `reserved` is false, as for an object key.
+ */
+export const isValidIdentifier = (name: string, reserved = true): boolean =>
+  /^[\p{ID_Start}$_][\p{ID_Continue}$‌‍]*$/u.test(name) &&
+  !(reserved && (KEYWORDS.has(name) || STRICT_RESERVED_WORDS.has(name)));
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
new file mode 100644
index 000000000000..ade6a2daa022
--- /dev/null
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -0,0 +1,541 @@
+import MagicString from 'magic-string';
+
+import {
+  type E,
+  type Node,
+  type ParsedModule,
+  type Property,
+  isNode,
+  parseModule,
+  registerSource,
+  sourceOf,
+  walk,
+} from './ast.ts';
+import { type ScopeInfo, analyzeScopes } from './scope.ts';
+
+type Span = { start: number; end: number };
+
+/**
+ * Source text plus its OXC AST. Edits accumulate in `edits`, so untouched code stays
+ * byte-identical; `commit()` applies them and parses the result again.
+ */
+export class SourceEditor {
+  _module: ParsedModule;
+
+  _scopes: ScopeInfo | undefined;
+
+  _parents: Map<Node, Node | null> | undefined;
+
+  _edits: MagicString;
+
+  readonly fileName: string | undefined;
+
+  constructor(code: string, fileName?: string) {
+    this.fileName = fileName;
+    this._module = parseModule(code, fileName);
+    this._edits = new MagicString(code, { filename: fileName });
+  }
+
+  get code() {
+    return this._module.code;
+  }
+
+  get program() {
+    return this._module.program;
+  }
+
+  get comments() {
+    return this._module.comments;
+  }
+
+  get scopes() {
+    this._scopes ??= analyzeScopes(this._module.program);
+    return this._scopes;
+  }
+
+  /** Parent of a node in this source; building the map also registers every node's source text. */
+  parentOf(node: Node): Node | null {
+    if (!this._parents) {
+      const parents = new Map<Node, Node | null>();
+      walk(this._module.program, (child, parent) => {
+        parents.set(child, parent);
+      });
+      registerSource(this._module.program, this._module.code);
+      this._parents = parents;
+    }
+    return this._parents.get(node) ?? null;
+  }
+
+  /** Innermost statement or declaration containing a node. */
+  statementOf(node: Node): Node | undefined {
+    for (let current: Node | null = node; current; current = this.parentOf(current)) {
+      if (/(Statement|Declaration)$/.test(current.type) && current.type !== 'Program') {
+        return current;
+      }
+    }
+    return undefined;
+  }
+
+  get edits() {
+    return this._edits;
+  }
+
+  get pending() {
+    return this._edits.hasChanged();
+  }
+
+  source(node: Span) {
+    return sourceOf(this.code, node);
+  }
+
+  /** Apply pending edits and parse the result again. Returns whether anything changed. */
+  commit() {
+    if (!this.pending) {
+      return false;
+    }
+    this.replaceSource(this._edits.toString());
+    return true;
+  }
+
+  replaceSource(code: string) {
+    this._module = parseModule(code, this.fileName);
+    this._scopes = undefined;
+    this._parents = undefined;
+    this._edits = new MagicString(code, { filename: this.fileName });
+  }
+
+  toString() {
+    return this._edits.toString();
+  }
+
+  /** Quote for generated strings, overriding the inferred one. */
+  preferredQuote: "'" | '"' | undefined;
+
+  /** Quote for generated strings; defaults to the style of the first string literal. */
+  get quote(): "'" | '"' {
+    if (this.preferredQuote) {
+      return this.preferredQuote;
+    }
+    const match = /(?:^|[\s,:([{=])(['"])/.exec(this.code);
+    return match?.[1] === '"' ? '"' : "'";
+  }
+}
+
+const isIdentifierName = (name: string) => /^[A-Za-z_$][\w$]*$/.test(name);
+
+export const printKey = (name: string, quote: string) =>
+  isIdentifierName(name) ? name : printString(name, quote);
+
+export const printString = (value: string, quote: string) => {
+  const json = JSON.stringify(value);
+  return quote === '"'
+    ? json
+    : `'${json.slice(1, -1).replaceAll('\\"', '"').replaceAll("'", "\\'")}'`;
+};
+
+export const printValue = (value: unknown, quote: string): string => {
+  if (value === undefined) {
+    return 'undefined';
+  }
+  if (value === null) {
+    return 'null';
+  }
+  if (typeof value === 'string') {
+    return printString(value, quote);
+  }
+  if (typeof value === 'number') {
+    if (Object.is(value, -0)) {
+      return '-0';
+    }
+    return Number.isFinite(value)
+      ? String(value)
+      : value > 0
+        ? 'Infinity'
+        : value < 0
+          ? '-Infinity'
+          : 'NaN';
+  }
+  if (typeof value === 'boolean') {
+    return String(value);
+  }
+  if (value instanceof RegExp) {
+    return value.toString();
+  }
+  if (Array.isArray(value)) {
+    return `[${Array.from(value, (item) => printValue(item, quote)).join(', ')}]`;
+  }
+  if (typeof value === 'object') {
+    const entries = Object.entries(value as Record<string, unknown>);
+    return entries.length === 0
+      ? '{}'
+      : `{ ${entries.map(([key, item]) => `${printKey(key, quote)}: ${printValue(item, quote)}`).join(', ')} }`;
+  }
+  throw new Error(`Cannot print value of type ${typeof value}`);
+};
+
+// Index just past the next `token` at or after `from`, skipping whitespace and comments.
+const scanFor = (code: string, from: number, until: number, token: string): number | undefined => {
+  let index = from;
+  while (index < until) {
+    const char = code[index];
+    if (char === token) {
+      return index + 1;
+    }
+    if (code.startsWith('//', index)) {
+      const end = code.indexOf('\n', index);
+      index = end === -1 ? until : end + 1;
+    } else if (code.startsWith('/*', index)) {
+      const end = code.indexOf('*/', index + 2);
+      index = end === -1 ? until : end + 2;
+    } else if (/\s/.test(char)) {
+      index++;
+    } else {
+      return undefined;
+    }
+  }
+  return undefined;
+};
+
+/**
+ * A comma-separated list in the source: object members, array elements, import specifiers. `open`
+ * is the index right after the opening token, `close` the index of the closing token.
+ */
+export interface List {
+  open: number;
+  close: number;
+  items: readonly Span[];
+}
+
+export const objectList = (object: E.ObjectExpression | E.ObjectPattern): List => ({
+  open: object.start + 1,
+  close: object.end - 1,
+  items: object.properties,
+});
+
+export const arrayList = (array: E.ArrayExpression): List => ({
+  open: array.start + 1,
+  close: array.end - 1,
+  items: array.elements.filter((element): element is NonNullable<typeof element> => !!element),
+});
+
+// Position right after the token that precedes an item: the comma or the opening token.
+export const separatorBefore = (code: string, list: List | E.ObjectExpression, index: number) => {
+  const { open, items } = 'open' in list ? list : objectList(list);
+  if (index === 0) {
+    return open;
+  }
+  const previous = items[index - 1];
+  return scanFor(code, previous.end, items[index].start, ',') ?? previous.end;
+};
+
+// Position right after the comma that follows an item, if it has one.
+const separatorAfter = (code: string, list: List, index: number) => {
+  const item = list.items[index];
+  const until = list.items[index + 1]?.start ?? list.close;
+  return scanFor(code, item.end, until, ',');
+};
+
+export const lineIndent = (code: string, index: number) => {
+  const lineStart = code.lastIndexOf('\n', index - 1) + 1;
+  return /^[ \t]*/.exec(code.slice(lineStart))![0];
+};
+
+const isMultiline = (code: string, list: List) => code.slice(list.open, list.close).includes('\n');
+
+export const reindent = (text: string, from: string, to: string) =>
+  from === to
+    ? text
+    : text
+        .split('\n')
+        .map((line, index) =>
+          index === 0 ? line : line.startsWith(from) ? to + line.slice(from.length) : line
+        )
+        .join('\n');
+
+/** Text of an item including the comments that lead it, with continuation lines dedented. */
+export const itemText = (editor: SourceEditor, list: List, item: Span) => {
+  const start = separatorBefore(editor.code, list, list.items.indexOf(item));
+  const raw = editor.code.slice(start, item.end).replace(/^\s+/, '');
+  return reindent(raw, lineIndent(editor.code, item.start), '');
+};
+
+export const memberText = (
+  editor: SourceEditor,
+  object: E.ObjectExpression,
+  member: E.ObjectPropertyKind
+) => itemText(editor, objectList(object), member);
+
+export const appendToList = (
+  editor: SourceEditor,
+  list: List,
+  texts: string[],
+  // Padding inside an empty single-line list: `{ a }` for objects, `[a]` for arrays.
+  padding = ' '
+) => {
+  const { code, edits } = editor;
+  const { items } = list;
+  if (items.length === 0) {
+    const inner = code.slice(list.open, list.close);
+    if ((inner.includes('\n') && inner.trim()) || texts.some((text) => text.includes('\n'))) {
+      // Multi-line items, or only comments inside: lay the items out one per line.
+      const outer = lineIndent(code, list.open - 1);
+      const indent = `${outer}  `;
+      const lead = inner.trim() ? '' : '\n';
+      if (!inner.trim() && list.close > list.open) {
+        edits.remove(list.open, list.close);
+      }
+      edits.appendLeft(
+        list.close,
+        `${lead}${texts.map((text) => `${indent}${reindent(text, '', indent)},`).join('\n')}\n${outer}`
+      );
+      return;
+    }
+    const content = `${padding}${texts.join(', ')}${padding}`;
+    if (list.close > list.open) {
+      edits.overwrite(list.open, list.close, content);
+    } else {
+      edits.appendLeft(list.open, content);
+    }
+    return;
+  }
+  const last = items.at(-1)!;
+  const trailingComma = separatorAfter(code, list, items.length - 1);
+  if (isMultiline(code, list)) {
+    const indent = lineIndent(code, last.start);
+    const block = texts.map((text) => `${indent}${reindent(text, '', indent)}`).join(',\n');
+    if (trailingComma !== undefined) {
+      edits.appendLeft(trailingComma, `\n${block},`);
+    } else {
+      edits.appendLeft(last.end, `,\n${block}`);
+    }
+    return;
+  }
+  if (trailingComma !== undefined) {
+    edits.appendLeft(trailingComma, ` ${texts.join(', ')},`);
+  } else {
+    edits.appendLeft(last.end, `, ${texts.join(', ')}`);
+  }
+};
+
+export const prependToList = (editor: SourceEditor, list: List, texts: string[], padding = ' ') => {
+  const { code, edits } = editor;
+  const [first] = list.items;
+  if (!first) {
+    appendToList(editor, list, texts, padding);
+    return;
+  }
+  if (isMultiline(code, list)) {
+    const indent = lineIndent(code, first.start);
+    edits.appendRight(
+      list.open,
+      `\n${texts.map((text) => `${indent}${reindent(text, '', indent)},`).join('\n')}`
+    );
+    return;
+  }
+  edits.appendRight(first.start, `${texts.join(', ')}, `);
+};
+
+/** Remove items with their leading comments and separators from a list. */
+export const removeFromList = (editor: SourceEditor, list: List, removedItems: readonly Span[]) => {
+  const { code, edits } = editor;
+  const { items } = list;
+  const removed = new Set(removedItems);
+  if (items.every((item) => removed.has(item))) {
+    if (list.close > list.open) {
+      edits.remove(list.open, list.close);
+    }
+    return;
+  }
+  const keptIndexes = items.flatMap((item, index) => (removed.has(item) ? [] : [index]));
+  const lastKept = keptIndexes.at(-1)!;
+  items.forEach((item, index) => {
+    if (!removed.has(item)) {
+      return;
+    }
+    const after = separatorAfter(code, list, index);
+    if (index > lastKept && after === undefined) {
+      // Trailing item without a comma: drop the comma of the last kept item instead.
+      const previous = items[lastKept];
+      const comma = separatorAfter(code, list, lastKept)!;
+      edits.remove(previous.end, comma);
+      edits.remove(comma, item.end);
+      return;
+    }
+    edits.remove(separatorBefore(code, list, index), after ?? item.end);
+  });
+};
+
+export const appendMembers = (editor: SourceEditor, object: E.ObjectExpression, texts: string[]) =>
+  appendToList(editor, objectList(object), texts);
+
+export const prependMembers = (editor: SourceEditor, object: E.ObjectExpression, texts: string[]) =>
+  prependToList(editor, objectList(object), texts);
+
+export const removeMembers = (
+  editor: SourceEditor,
+  object: E.ObjectExpression,
+  members: readonly E.ObjectPropertyKind[]
+) => removeFromList(editor, objectList(object), members);
+
+const NEXT_LINE_DIRECTIVE =
+  /^\s*(@ts-(expect-error|ignore)|[a-z]+-disable-next-line|prettier-ignore|biome-ignore)\b/;
+
+const leadingDirectives = (editor: SourceEditor) =>
+  editor.program.body.filter((statement) => 'directive' in statement && statement.directive);
+
+/**
+ * Comments leading the file's first statement that form the file header, such as a license. A
+ * directive that applies only to that statement, such as `@ts-expect-error`, ends the header.
+ */
+export const headerComments = (editor: SourceEditor): E.Comment[] => {
+  const directives = leadingDirectives(editor);
+  const first = editor.program.body[directives.length];
+  const from = directives.at(-1)?.end ?? 0;
+  const leading = editor.comments.filter(
+    (comment) => comment.start >= from && first && comment.end <= first.start
+  );
+  const directive = leading.findIndex(({ value }) => NEXT_LINE_DIRECTIVE.test(value));
+  return directive === -1 ? leading : leading.slice(0, directive);
+};
+
+/**
+ * Insert a statement before the first non-directive statement, above its leading comments. A file
+ * header stays first: the statement goes below the leading imports, or below the header itself.
+ */
+export const prependStatement = (editor: SourceEditor, text: string) => {
+  const { body } = editor.program;
+  const directives = leadingDirectives(editor);
+  const after =
+    directives.at(-1)?.end ?? (editor.code.startsWith('#!') ? editor.code.indexOf('\n') + 1 : 0);
+  const first = body[directives.length];
+  if (!first) {
+    editor.edits.appendLeft(after, `${after > 0 ? '\n' : ''}${text}\n`);
+    return;
+  }
+  const header = headerComments(editor);
+  if (header.length > 0) {
+    const statements = body.slice(directives.length);
+    const imports = statements.findIndex((statement) => statement.type !== 'ImportDeclaration');
+    const lastImport = imports === -1 ? statements.at(-1) : statements[imports - 1];
+    if (lastImport) {
+      editor.edits.appendLeft(lastImport.end, `\n${text}`);
+      return;
+    }
+    const headerEnd = header.at(-1)!.end;
+    const next = headerEnd + /^\s*/.exec(editor.code.slice(headerEnd))![0].length;
+    editor.edits.appendRight(next, `${text}\n\n`);
+    return;
+  }
+  const start = after + /^\s*/.exec(editor.code.slice(after))![0].length;
+  editor.edits.appendRight(start, `${text}\n`);
+};
+
+export const appendStatement = (editor: SourceEditor, text: string) => {
+  const last = editor.program.body.at(-1);
+  if (!last) {
+    editor.edits.append(
+      `${editor.code.length > 0 && !editor.code.endsWith('\n') ? '\n' : ''}${text}\n`
+    );
+    return;
+  }
+  editor.edits.appendLeft(last.end, `\n${text}`);
+};
+
+/** Remove a statement together with its line when nothing else shares the line. */
+export const removeStatement = (editor: SourceEditor, statement: Span) => {
+  const { code } = editor;
+  const lineStart = code.lastIndexOf('\n', statement.start - 1) + 1;
+  const lineEnd = code.indexOf('\n', statement.end);
+  const before = code.slice(lineStart, statement.start);
+  const after = code.slice(statement.end, lineEnd === -1 ? code.length : lineEnd);
+  if (!before.trim() && !after.trim()) {
+    editor.edits.remove(lineStart, lineEnd === -1 ? code.length : lineEnd + 1);
+  } else {
+    editor.edits.remove(statement.start, statement.end);
+  }
+};
+
+export const replaceValue = (editor: SourceEditor, member: Property, text: string) => {
+  if (member.shorthand) {
+    editor.edits.overwrite(member.start, member.end, `${editor.source(member.key)}: ${text}`);
+    return;
+  }
+  if (member.method || member.kind !== 'init') {
+    const method = methodFromFunction(text, keySource(editor, member));
+    editor.edits.overwrite(
+      member.start,
+      member.end,
+      method ?? `${keySource(editor, member)}: ${text}`
+    );
+    return;
+  }
+  editor.edits.overwrite(member.value.start, member.value.end, text);
+};
+
+export const keySource = (editor: SourceEditor, member: Property) => {
+  if (!member.computed) {
+    return editor.source(member.key);
+  }
+  const open = editor.code.lastIndexOf('[', member.key.start);
+  const close = editor.code.indexOf(']', member.key.end);
+  return editor.code.slice(open, close + 1);
+};
+
+const keyRange = (editor: SourceEditor, member: Property): Span => {
+  if (!member.computed) {
+    return member.key;
+  }
+  return {
+    start: editor.code.lastIndexOf('[', member.key.start),
+    end: editor.code.indexOf(']', member.key.end) + 1,
+  };
+};
+
+// Renames a member's key in place, keeping methods methods and expanding shorthands.
+export const renameKey = (editor: SourceEditor, member: Property, key: string) => {
+  if (member.shorthand) {
+    editor.edits.overwrite(member.start, member.end, `${key}: ${editor.source(member.value)}`);
+    return;
+  }
+  const range = keyRange(editor, member);
+  editor.edits.overwrite(range.start, range.end, key);
+};
+
+export const renamedMemberText = (
+  editor: SourceEditor,
+  object: E.ObjectExpression,
+  member: Property,
+  key: string
+) => {
+  const text = memberText(editor, object, member);
+  if (member.shorthand) {
+    return (
+      text.slice(0, text.length - (member.end - member.start)) +
+      `${key}: ${editor.source(member.value)}`
+    );
+  }
+  const range = keyRange(editor, member);
+  const offset = text.length - (member.end - range.start);
+  return text.slice(0, offset) + key + text.slice(offset + (range.end - range.start));
+};
+
+// Function expression source for a method, so reads and transforms of `play() {}` see a value.
+// `async *play(a) {}` becomes `async function* (a) {}`.
+export const functionFromMethod = (editor: SourceEditor, member: Property) => {
+  const fn = member.value as E.Function;
+  const range = keyRange(editor, member);
+  const rest = editor.code.slice(range.end, member.end);
+  return `${fn.async ? 'async ' : ''}function${fn.generator ? '*' : ''} ${rest.replace(/^\s*/, '')}`;
+};
+
+const methodFromFunction = (text: string, key: string) => {
+  const match = /^(async\s+)?function\s*(\*)?\s*(?=[(<])/.exec(text);
+  return match
+    ? `${match[1] ? 'async ' : ''}${match[2] ? '*' : ''}${key}${text.slice(match[0].length)}`
+    : undefined;
+};
+
+export const isSpan = (value: unknown): value is Span =>
+  isNode(value) && typeof (value as unknown as Span).start === 'number';
+
+export type { Node };
diff --git a/code/core/src/csf-tools/estree/scope.test.ts b/code/core/src/csf-tools/estree/scope.test.ts
new file mode 100644
index 000000000000..e3a17b495fc9
--- /dev/null
+++ b/code/core/src/csf-tools/estree/scope.test.ts
@@ -0,0 +1,96 @@
+import { describe, expect, it } from 'vitest';
+
+import { type E, parseModule } from './ast.ts';
+import { analyzeScopes, generateUid } from './scope.ts';
+
+const programBindings = (code: string) => {
+  const { program } = parseModule(code, 'file.tsx');
+  return Object.fromEntries(
+    [...analyzeScopes(program).program.bindings].map(([name, binding]) => [
+      name,
+      { constant: binding.constant, references: binding.references.length },
+    ])
+  );
+};
+
+describe('analyzeScopes', () => {
+  it.each([
+    ['a const read once', 'const a = 1; a;', { a: { constant: true, references: 1 } }],
+    ['a reassigned let', 'let a = 1; a = 2;', { a: { constant: false, references: 0 } }],
+    [
+      'an update, which reads and writes',
+      'let a = 1; a++;',
+      { a: { constant: false, references: 1 } },
+    ],
+    ['an exported const', 'export const a = 1;', { a: { constant: true, references: 1 } }],
+    [
+      'a value exported next to a same-named type',
+      'export const Tag = {}; export type Tag = string;',
+      { Tag: { constant: true, references: 2 } },
+    ],
+    ['a redeclared var', 'var a = 1; var a = 2;', { a: { constant: false, references: 0 } }],
+    [
+      'a component used in JSX',
+      'import { B } from "b"; <B />;',
+      { B: { constant: true, references: 1 } },
+    ],
+    ['an intrinsic JSX tag', 'const div = 1; <div />;', { div: { constant: true, references: 0 } }],
+    [
+      'a JSX member object',
+      'const w = {}; <w.render />;',
+      { w: { constant: true, references: 1 } },
+    ],
+    [
+      '`import.meta`',
+      'const meta = {}; import.meta.env;',
+      { meta: { constant: true, references: 0 } },
+    ],
+    [
+      'a shadowing parameter',
+      'const tags = []; const f = (tags) => tags;',
+      { tags: { constant: true, references: 0 }, f: { constant: true, references: 0 } },
+    ],
+  ])('counts %s', (_, code, expected) => {
+    expect(programBindings(code)).toEqual(expected);
+  });
+
+  it.each([
+    ['`typeof` in a type alias', 'const meta = {}; type S = StoryObj<typeof meta>;', 1],
+    ['`satisfies`', 'import { Meta } from "x"; const m = {} satisfies Meta;', 1],
+    ['`as`', 'import { Meta } from "x"; const m = {} as Meta<{}>;', 1],
+    ['call type arguments', 'import { T } from "x"; f<T>();', 1],
+    ['`implements`', 'import { I } from "x"; class C implements I {}', 1],
+    ['a `: Type` annotation', 'import { T } from "x"; let a: T;', 0],
+    ['a parameter annotation', 'import { T } from "x"; function f(a: T) {}', 0],
+    ['a method signature name', 'const get = 1; interface I { get(): void }', 1],
+    ['a computed type key', 'const K = Symbol(); type X = { [K]: true };', 1],
+  ])('counts type references like Babel: %s', (_, code, references) => {
+    const [first] = Object.values(programBindings(code));
+    expect(first.references).toBe(references);
+  });
+
+  it('counts overload signatures as references to the implementation', () => {
+    expect(programBindings('function f(): void; function f(a?: unknown) {} f();')).toEqual({
+      f: { constant: true, references: 2 },
+    });
+  });
+
+  it('treats a function declared in a loop body as non-constant', () => {
+    const { program } = parseModule('for (const x of y) { function f() {} f(); }', 'file.ts');
+    const info = analyzeScopes(program);
+    const loop = program.body[0] as E.ForOfStatement;
+    const statement = (loop.body as E.BlockStatement).body[1] as E.ExpressionStatement;
+    const call = (statement.expression as E.CallExpression).callee;
+    expect(info.bindingOf(call)).toMatchObject({ name: 'f', constant: false });
+  });
+
+  it('does not bind TS enums or `declare global` vars at the top level', () => {
+    expect(programBindings('enum E { A } declare global { var X: number }')).toEqual({});
+  });
+
+  it('generates Babel-style unique names', () => {
+    const info = analyzeScopes(parseModule('const _meta = 1; const _meta2 = 2;').program);
+    expect(generateUid(info, 'meta')).toBe('_meta3');
+    expect(generateUid(info, 'meta')).toBe('_meta4');
+  });
+});
diff --git a/code/core/src/csf-tools/estree/scope.ts b/code/core/src/csf-tools/estree/scope.ts
new file mode 100644
index 000000000000..78719fa8f55f
--- /dev/null
+++ b/code/core/src/csf-tools/estree/scope.ts
@@ -0,0 +1,717 @@
+import { type E, type Node, children, isNode } from './ast.ts';
+
+export type BindingKind =
+  | 'var'
+  | 'let'
+  | 'const'
+  | 'function'
+  | 'class'
+  | 'import'
+  | 'param'
+  | 'other';
+
+export interface Binding {
+  name: string;
+  kind: BindingKind;
+  /** VariableDeclarator, FunctionDeclaration, ClassDeclaration, import specifier, or the pattern. */
+  node: Node;
+  /** VariableDeclaration or ImportDeclaration that owns `node`, when there is one. */
+  declaration?: Node;
+  identifier: E.BindingIdentifier;
+  scope: Scope;
+  /** False when the binding is declared twice or written after its declaration. */
+  constant: boolean;
+  references: Node[];
+}
+
+export class Scope {
+  readonly bindings = new Map<string, Binding>();
+
+  readonly node: Node;
+
+  readonly parent: Scope | null;
+
+  readonly isFunctionScope: boolean;
+
+  constructor(node: Node, parent: Scope | null, isFunctionScope: boolean) {
+    this.node = node;
+    this.parent = parent;
+    this.isFunctionScope = isFunctionScope;
+  }
+
+  lookup(name: string): Binding | undefined {
+    return this.bindings.get(name) ?? this.parent?.lookup(name);
+  }
+
+  get functionScope(): Scope {
+    return this.isFunctionScope || !this.parent ? this : this.parent.functionScope;
+  }
+}
+
+export interface ScopeInfo {
+  program: Scope;
+  bindingOf(identifier: Node): Binding | undefined;
+  scopeOf(node: Node): Scope;
+  /** Every identifier name in the file, used to generate collision-free names. */
+  names: Set<string>;
+  /** Names the file reads without declaring them: globals and anything another scope provides. */
+  unbound: Set<string>;
+}
+
+const FUNCTION_TYPES = new Set([
+  'FunctionDeclaration',
+  'FunctionExpression',
+  'ArrowFunctionExpression',
+]);
+
+const LOOP_TYPES = new Set([
+  'ForStatement',
+  'ForInStatement',
+  'ForOfStatement',
+  'WhileStatement',
+  'DoWhileStatement',
+]);
+
+const BLOCK_SCOPE_TYPES = new Set([
+  'TSModuleBlock',
+  'BlockStatement',
+  'StaticBlock',
+  'SwitchStatement',
+  'ForStatement',
+  'ForInStatement',
+  'ForOfStatement',
+  'CatchClause',
+  'ClassExpression',
+  'ClassDeclaration',
+]);
+
+// TS wrappers that hold a runtime expression; every other `TS*` node is type-only.
+const TS_EXPRESSIONS = new Set([
+  'TSModuleDeclaration',
+  'TSModuleBlock',
+  'TSAsExpression',
+  'TSSatisfiesExpression',
+  'TSNonNullExpression',
+  'TSTypeAssertion',
+  'TSInstantiationExpression',
+  'TSExportAssignment',
+  'TSParameterProperty',
+  'TSEnumDeclaration',
+  'TSEnumBody',
+  'TSEnumMember',
+]);
+
+const TYPE_KEYS = new Set([
+  'typeAnnotation',
+  'returnType',
+  'typeParameters',
+  'typeArguments',
+  'superTypeArguments',
+  'implements',
+]);
+
+const isCompatTag = (name: string) => /^[a-z]/.test(name) || name.includes('-');
+
+// Identifiers a binding pattern declares, plus the expressions nested in it (defaults, keys).
+const patternParts = (pattern: Node, ids: E.BindingIdentifier[], expressions: Node[]) => {
+  const annotation = (pattern as { typeAnnotation?: Node | null }).typeAnnotation;
+  if (annotation) {
+    expressions.push(annotation);
+  }
+  switch (pattern.type) {
+    case 'Identifier':
+      ids.push(pattern as E.BindingIdentifier);
+      return;
+    case 'ObjectPattern':
+      for (const property of pattern.properties) {
+        if (property.type === 'RestElement') {
+          patternParts(property.argument, ids, expressions);
+        } else {
+          if (property.computed) {
+            expressions.push(property.key);
+          }
+          patternParts(property.value, ids, expressions);
+        }
+      }
+      return;
+    case 'ArrayPattern':
+      for (const element of pattern.elements) {
+        if (element) {
+          patternParts(element, ids, expressions);
+        }
+      }
+      return;
+    case 'RestElement':
+      patternParts(pattern.argument, ids, expressions);
+      return;
+    case 'AssignmentPattern':
+      patternParts(pattern.left, ids, expressions);
+      expressions.push(pattern.right);
+      return;
+    case 'TSParameterProperty':
+      patternParts(pattern.parameter, ids, expressions);
+      return;
+    default:
+      // Member expressions in assignment patterns (`[a.b] = c`) are expressions, not declarations.
+      expressions.push(pattern);
+  }
+};
+
+const declarationStatements = (node: Node): Node[] => {
+  switch (node.type) {
+    case 'Program':
+    case 'BlockStatement':
+    case 'StaticBlock':
+    case 'TSModuleBlock':
+      return node.body as Node[];
+    case 'SwitchStatement':
+      return node.cases.flatMap((switchCase) => switchCase.consequent);
+    default:
+      return [];
+  }
+};
+
+export const analyzeScopes = (program: E.Program): ScopeInfo => {
+  const identifierBindings = new Map<Node, Binding>();
+  const nodeScopes = new Map<Node, Scope>();
+  const names = new Set<string>();
+  const violations: { scope: Scope; identifier: E.IdentifierReference }[] = [];
+  const references: { scope: Scope; identifier: Node; name: string }[] = [];
+
+  const declare = (
+    scope: Scope,
+    identifier: E.BindingIdentifier,
+    kind: BindingKind,
+    node: Node,
+    declaration?: Node
+  ) => {
+    names.add(identifier.name);
+    const existing = scope.bindings.get(identifier.name);
+    if (existing) {
+      existing.constant = false;
+      identifierBindings.set(identifier, existing);
+      return;
+    }
+    const binding: Binding = {
+      name: identifier.name,
+      kind,
+      node,
+      declaration,
+      identifier,
+      scope,
+      constant: true,
+      references: [],
+    };
+    scope.bindings.set(identifier.name, binding);
+    identifierBindings.set(identifier, binding);
+  };
+
+  const declareVariable = (scope: Scope, declaration: E.VariableDeclaration) => {
+    const kind: BindingKind =
+      declaration.kind === 'var' ? 'var' : declaration.kind === 'const' ? 'const' : 'let';
+    for (const declarator of declaration.declarations) {
+      const ids: E.BindingIdentifier[] = [];
+      patternParts(declarator.id, ids, []);
+      for (const id of ids) {
+        declare(scope, id, kind, declarator, declaration);
+      }
+    }
+  };
+
+  // Hoists `var` declarations to the enclosing function scope without crossing functions.
+  const hoistVars = (scope: Scope, node: Node) => {
+    for (const child of children(node)) {
+      if (
+        FUNCTION_TYPES.has(child.type) ||
+        child.type.startsWith('TS') ||
+        child.type.startsWith('Class') ||
+        child.type.endsWith('Expression')
+      ) {
+        continue;
+      }
+      if (child.type === 'VariableDeclaration' && child.kind === 'var') {
+        declareVariable(scope, child);
+      }
+      hoistVars(scope, child);
+    }
+  };
+
+  const declareLexical = (scope: Scope, node: Node) => {
+    for (const statement of declarationStatements(node)) {
+      const declaration =
+        (statement.type === 'ExportNamedDeclaration' ||
+          statement.type === 'ExportDefaultDeclaration') &&
+        statement.declaration
+          ? (statement.declaration as Node)
+          : statement;
+      if (declaration.type === 'VariableDeclaration' && declaration.kind !== 'var') {
+        declareVariable(scope, declaration);
+      } else if (
+        (declaration.type === 'FunctionDeclaration' || declaration.type === 'ClassDeclaration') &&
+        declaration.id
+      ) {
+        declare(
+          scope,
+          declaration.id,
+          declaration.type === 'FunctionDeclaration' ? 'function' : 'class',
+          declaration
+        );
+      } else if (declaration.type === 'ImportDeclaration') {
+        for (const specifier of declaration.specifiers) {
+          declare(scope, specifier.local, 'import', specifier, declaration);
+        }
+      } else if (declaration.type === 'TSImportEqualsDeclaration') {
+        declare(scope, declaration.id, 'import', declaration);
+      }
+    }
+  };
+
+  const enterScope = (node: Node, parent: Scope | null): Scope => {
+    const isFunction = FUNCTION_TYPES.has(node.type);
+    const scope = new Scope(node, parent, isFunction);
+    nodeScopes.set(node, scope);
+    if (isFunction) {
+      const fn = node as E.Function | E.ArrowFunctionExpression;
+      if (fn.type === 'FunctionExpression' && fn.id) {
+        declare(scope, fn.id, 'function', fn);
+      }
+      for (const param of fn.params) {
+        const ids: E.BindingIdentifier[] = [];
+        patternParts(param, ids, []);
+        for (const id of ids) {
+          declare(scope, id, 'param', param);
+        }
+      }
+      if (fn.body?.type === 'BlockStatement') {
+        hoistVars(scope, fn.body);
+        declareLexical(scope, fn.body);
+      }
+    } else if (node.type === 'ClassExpression' && node.id) {
+      declare(scope, node.id, 'class', node);
+    } else if (node.type === 'CatchClause' && node.param) {
+      const ids: E.BindingIdentifier[] = [];
+      patternParts(node.param, ids, []);
+      for (const id of ids) {
+        declare(scope, id, 'param', node.param);
+      }
+    } else if (
+      (node.type === 'ForStatement' && node.init?.type === 'VariableDeclaration') ||
+      ((node.type === 'ForInStatement' || node.type === 'ForOfStatement') &&
+        node.left.type === 'VariableDeclaration')
+    ) {
+      const declaration = (
+        node.type === 'ForStatement' ? node.init : node.left
+      ) as E.VariableDeclaration;
+      if (declaration.kind !== 'var') {
+        declareVariable(scope, declaration);
+      }
+    } else {
+      if (node.type === 'TSModuleBlock') {
+        hoistVars(scope, node);
+      }
+      declareLexical(scope, node);
+      if (loopDepth > 0) {
+        // A function declared in a loop body is declared again on every iteration.
+        for (const binding of scope.bindings.values()) {
+          if (binding.kind === 'function') {
+            binding.constant = false;
+          }
+        }
+      }
+    }
+    return scope;
+  };
+
+  const markWrites = (target: Node, scope: Scope) => {
+    const ids: E.BindingIdentifier[] = [];
+    const expressions: Node[] = [];
+    patternParts(target, ids, expressions);
+    for (const id of ids) {
+      names.add(id.name);
+      violations.push({ scope, identifier: id as unknown as E.IdentifierReference });
+    }
+    for (const expression of expressions) {
+      visit(expression, scope);
+    }
+  };
+
+  const visitPattern = (pattern: Node, scope: Scope) => {
+    const expressions: Node[] = [];
+    patternParts(pattern, [], expressions);
+    for (const expression of expressions) {
+      visit(expression, scope);
+    }
+  };
+
+  const visitChildren = (node: Node, scope: Scope, skip?: Set<string>) => {
+    for (const child of childEntries(node)) {
+      if (skip?.has(child.key)) {
+        continue;
+      }
+      visit(child.node, scope);
+    }
+  };
+
+  const reference = (node: Node | null | undefined, scope: Scope) => {
+    let target = node;
+    while (target?.type === 'TSQualifiedName' || target?.type === 'MemberExpression') {
+      target = target.type === 'TSQualifiedName' ? target.left : target.object;
+    }
+    if (target?.type === 'Identifier') {
+      names.add(target.name);
+      references.push({ scope, identifier: target, name: target.name });
+    }
+  };
+
+  // Babel counts the names a type refers to (`satisfies Meta<typeof Button>`) as references,
+  // except inside `: Type` annotations.
+  const visitType = (node: Node, scope: Scope): void => {
+    switch (node.type) {
+      case 'TSTypeAnnotation':
+        return;
+      case 'TSTypeReference':
+        reference(node.typeName, scope);
+        break;
+      case 'TSTypeQuery':
+        reference(node.exprName, scope);
+        break;
+      case 'TSClassImplements':
+      case 'TSInterfaceHeritage':
+        reference(node.expression, scope);
+        break;
+      case 'TSImportType':
+        reference(node.qualifier, scope);
+        break;
+      case 'TSPropertySignature':
+        if (node.computed) {
+          reference(node.key, scope);
+        }
+        break;
+      case 'TSMethodSignature':
+        // Babel also counts a method signature's name and its parameter names.
+        reference(node.key, scope);
+        node.params.forEach((param) => reference(param, scope));
+        break;
+      case 'TSFunctionType':
+      case 'TSConstructorType':
+      case 'TSCallSignatureDeclaration':
+      case 'TSConstructSignatureDeclaration':
+        node.params.forEach((param) => reference(param, scope));
+        break;
+    }
+    for (const child of childEntries(node)) {
+      if (child.node.type.startsWith('TS') || TYPE_KEYS.has(child.key)) {
+        visitType(child.node, scope);
+      } else if (child.node.type !== 'Identifier') {
+        visitType(child.node, scope);
+      }
+    }
+  };
+
+  let loopDepth = 0;
+
+  const visit = (node: Node, scope: Scope): void => {
+    const savedLoopDepth = loopDepth;
+    loopDepth = FUNCTION_TYPES.has(node.type) ? 0 : loopDepth + (LOOP_TYPES.has(node.type) ? 1 : 0);
+    try {
+      visitNode(node, scope);
+    } finally {
+      loopDepth = savedLoopDepth;
+    }
+  };
+
+  const visitNode = (node: Node, scope: Scope): void => {
+    if (node.type.startsWith('TS') && !TS_EXPRESSIONS.has(node.type)) {
+      visitType(node, scope);
+      return;
+    }
+    for (const key of TYPE_KEYS) {
+      const value = (node as unknown as Record<string, unknown>)[key];
+      for (const item of Array.isArray(value) ? value : [value]) {
+        if (isNode(item)) {
+          visitType(item, scope);
+        }
+      }
+    }
+    let current = scope;
+    if (node !== program && (FUNCTION_TYPES.has(node.type) || BLOCK_SCOPE_TYPES.has(node.type))) {
+      // A function body block shares the function's scope.
+      if (!(node.type === 'BlockStatement' && nodeScopes.get(node))) {
+        current = enterScope(node, scope);
+      }
+    }
+
+    switch (node.type) {
+      case 'Identifier':
+        names.add(node.name);
+        references.push({ scope: current, identifier: node, name: node.name });
+        return;
+      case 'JSXIdentifier':
+        if (!isCompatTag(node.name)) {
+          names.add(node.name);
+          references.push({ scope: current, identifier: node, name: node.name });
+        }
+        return;
+      case 'JSXMemberExpression':
+        if (node.object.type === 'JSXIdentifier') {
+          names.add(node.object.name);
+          references.push({ scope: current, identifier: node.object, name: node.object.name });
+        } else {
+          visit(node.object, current);
+        }
+        return;
+      case 'MetaProperty':
+        return;
+      case 'JSXAttribute':
+        if (node.value) {
+          visit(node.value, current);
+        }
+        return;
+      case 'MemberExpression':
+        visit(node.object, current);
+        if (node.computed) {
+          visit(node.property, current);
+        } else if (node.property.type === 'Identifier') {
+          names.add(node.property.name);
+        }
+        return;
+      case 'Property':
+        if (node.computed) {
+          visit(node.key, current);
+        } else if (node.key.type === 'Identifier') {
+          names.add(node.key.name);
+        }
+        visit(node.value, current);
+        return;
+      case 'MethodDefinition':
+      case 'PropertyDefinition':
+      case 'AccessorProperty':
+        for (const decorator of node.decorators ?? []) {
+          visit(decorator, current);
+        }
+        if (node.computed) {
+          visit(node.key, current);
+        }
+        if (node.value) {
+          visit(node.value, current);
+        }
+        return;
+      case 'LabeledStatement':
+        visit(node.body, current);
+        return;
+      case 'BreakStatement':
+      case 'ContinueStatement':
+        return;
+      case 'ImportDeclaration':
+        for (const specifier of node.specifiers) {
+          names.add(specifier.local.name);
+        }
+        return;
+      case 'ExportNamedDeclaration':
+        if (node.declaration) {
+          visit(node.declaration, current);
+        } else if (!node.source) {
+          for (const specifier of node.specifiers) {
+            if (specifier.local.type === 'Identifier') {
+              visit(specifier.local, current);
+            }
+          }
+        }
+        return;
+      case 'ExportAllDeclaration':
+        return;
+      case 'VariableDeclarator':
+        visitPattern(node.id, current);
+        if (node.init) {
+          visit(node.init, current);
+        }
+        return;
+      case 'FunctionDeclaration':
+      case 'FunctionExpression':
+      case 'ArrowFunctionExpression':
+        for (const param of node.params) {
+          visitPattern(param, current);
+        }
+        if (node.body) {
+          if (node.body.type === 'BlockStatement') {
+            nodeScopes.set(node.body, current);
+            for (const statement of node.body.body) {
+              visit(statement, current);
+            }
+          } else {
+            visit(node.body, current);
+          }
+        }
+        return;
+      case 'ClassDeclaration':
+      case 'ClassExpression':
+        for (const decorator of node.decorators ?? []) {
+          visit(decorator, current);
+        }
+        if (node.superClass) {
+          visit(node.superClass, current);
+        }
+        visit(node.body, current);
+        return;
+      case 'CatchClause':
+        if (node.param) {
+          visitPattern(node.param, current);
+        }
+        visit(node.body, current);
+        return;
+      case 'AssignmentExpression':
+        if (node.left.type === 'Identifier' || node.left.type.endsWith('Pattern')) {
+          markWrites(node.left, current);
+        } else {
+          visit(node.left, current);
+        }
+        visit(node.right, current);
+        return;
+      case 'UpdateExpression':
+        if (node.argument.type === 'Identifier') {
+          // `x++` both reads and writes `x`.
+          references.push({ scope: current, identifier: node.argument, name: node.argument.name });
+          markWrites(node.argument, current);
+        } else {
+          visit(node.argument, current);
+        }
+        return;
+      case 'ForInStatement':
+      case 'ForOfStatement':
+        if (node.left.type === 'VariableDeclaration') {
+          visit(node.left, current);
+        } else {
+          markWrites(node.left, current);
+        }
+        visit(node.right, current);
+        visit(node.body, current);
+        return;
+      case 'TSParameterProperty':
+        visitPattern(node.parameter, current);
+        return;
+      case 'TSEnumDeclaration':
+        visit(node.body, current);
+        return;
+      case 'TSModuleDeclaration':
+        if (node.body) {
+          visit(node.body, current);
+        }
+        return;
+      case 'TSEnumMember':
+        if (node.initializer) {
+          visit(node.initializer, current);
+        }
+        return;
+      default:
+        visitChildren(node, current, TYPE_KEYS);
+    }
+  };
+
+  const declaredProgramScope = enterScope(program, null);
+  hoistVars(declaredProgramScope, program);
+  for (const statement of program.body) {
+    visit(statement as Node, declaredProgramScope);
+  }
+
+  const unbound = new Set<string>();
+  for (const { scope, identifier, name } of references) {
+    const binding = scope.lookup(name);
+    if (binding) {
+      binding.references.push(identifier);
+      identifierBindings.set(identifier, binding);
+    } else if (identifier.type !== 'ExportNamedDeclaration') {
+      unbound.add(name);
+    }
+  }
+  // Overload signatures count as references to the function they overload.
+  for (const statement of program.body) {
+    if (statement.type === 'TSDeclareFunction' && statement.id) {
+      declaredProgramScope.bindings.get(statement.id.name)?.references.push(statement);
+    }
+  }
+
+  // Like Babel, an `export` of a declaration counts as a reference to the bindings it declares.
+  for (const statement of program.body) {
+    if (
+      (statement.type !== 'ExportNamedDeclaration' &&
+        statement.type !== 'ExportDefaultDeclaration') ||
+      !statement.declaration
+    ) {
+      continue;
+    }
+    const declaration = statement.declaration as Node;
+    const ids: E.BindingIdentifier[] = [];
+    if (declaration.type === 'VariableDeclaration') {
+      for (const declarator of declaration.declarations) {
+        patternParts(declarator.id, ids, []);
+      }
+    } else if ((declaration as { id?: Node | null }).id?.type === 'Identifier') {
+      // Functions, classes and TS declarations: an exported `type X` also references a value `X`.
+      ids.push((declaration as { id: E.BindingIdentifier }).id);
+    }
+    for (const id of ids) {
+      declaredProgramScope.bindings.get(id.name)?.references.push(statement);
+    }
+  }
+  for (const { scope, identifier } of violations) {
+    const binding = scope.lookup(identifier.name);
+    if (binding) {
+      binding.constant = false;
+      identifierBindings.set(identifier, binding);
+    }
+  }
+
+  return {
+    program: declaredProgramScope,
+    names,
+    unbound,
+    bindingOf: (identifier) => identifierBindings.get(identifier),
+    scopeOf: (node) => {
+      // Linear over scopes; only write paths ask.
+      let best = declaredProgramScope;
+      for (const [scopeNode, scope] of nodeScopes) {
+        const span = scopeNode as Node & { start: number; end: number };
+        const target = node as Node & { start: number; end: number };
+        if (
+          span.start <= target.start &&
+          target.end <= span.end &&
+          span.end - span.start <
+            (best.node as Node & { start: number; end: number }).end -
+              (best.node as Node & { start: number; end: number }).start
+        ) {
+          best = scope;
+        }
+      }
+      return best;
+    },
+  };
+};
+
+const childEntries = (node: Node): { key: string; node: Node }[] => {
+  const result: { key: string; node: Node }[] = [];
+  for (const [key, value] of Object.entries(node)) {
+    if (key === 'parent') {
+      continue;
+    }
+    if (Array.isArray(value)) {
+      for (const item of value) {
+        if (isNode(item)) {
+          result.push({ key, node: item });
+        }
+      }
+    } else if (isNode(value)) {
+      result.push({ key, node: value });
+    }
+  }
+  return result;
+};
+
+/** Generate an unused name: `_meta`, `_meta2`, `_meta3`, … */
+export const generateUid = (info: ScopeInfo, name: string) => {
+  let uid = `_${name}`;
+  for (let index = 2; info.names.has(uid); index++) {
+    uid = `_${name}${index}`;
+  }
+  info.names.add(uid);
+  return uid;
+};
diff --git a/yarn.lock b/yarn.lock
index 0f4d9c5237ee..e701781d71b7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -33560,6 +33560,7 @@ __metadata:
     "@emotion/styled": "npm:^11.14.0"
     "@fal-works/esbuild-plugin-global-externals": "npm:^2.1.2"
     "@happy-dom/global-registrator": "npm:^20.0.11"
+    "@jridgewell/sourcemap-codec": "npm:^1.5.5"
     "@ngard/tiny-isequal": "npm:^1.1.0"
     "@polka/compression": "npm:^1.0.0-next.28"
     "@preact/signals-core": "npm:^1.14.2"
@@ -33641,6 +33642,7 @@ __metadata:
     launch-editor: "npm:^2.13.2"
     lazy-universal-dotenv: "npm:^4.0.0"
     leven: "npm:^4.0.0"
+    magic-string: "npm:^1.1.0"
     mdast-util-from-markdown: "npm:^2.0.0"
     mdast-util-mdx: "npm:^3.0.0"
     mdast-util-mdx-jsx: "npm:^3.2.0"

From 9f5da632039de955d1310c2b714fe77f40b002cd Mon Sep 17 00:00:00 2001
From: Easton <easton.shin@marqvision.com>
Date: Tue, 13 Oct 2026 11:52:16 +0900
Subject: [PATCH 044/326] feat(csf-tools): run CsfFile, ConfigFile and the
 Vitest transforms on OXC

Untouched code is preserved byte for byte; edits are applied to the source
instead of reprinting the whole file with recast.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 code/core/src/csf-tools/ConfigFile.test.ts    |  281 ++--
 code/core/src/csf-tools/ConfigFile.ts         | 1419 +++++++----------
 code/core/src/csf-tools/ConfigObject.test.ts  |   43 +-
 code/core/src/csf-tools/ConfigObject.ts       |  846 +++++-----
 code/core/src/csf-tools/CsfFile.test.ts       |    6 +-
 code/core/src/csf-tools/CsfFile.ts            | 1397 ++++++++--------
 code/core/src/csf-tools/CsfObject.test.ts     |   60 +-
 code/core/src/csf-tools/CsfObject.ts          |  673 +++++---
 .../src/csf-tools/CsfObjectDiscovery.test.ts  |    2 +-
 code/core/src/csf-tools/CsfObjectDiscovery.ts |  461 +++---
 code/core/src/csf-tools/enrichCsf.test.ts     |  431 +----
 code/core/src/csf-tools/enrichCsf.ts          |  154 +-
 .../src/csf-tools/findVarInitialization.ts    |   41 +-
 code/core/src/csf-tools/index.ts              |   37 +-
 .../component-transformer.test.ts             |  349 ++--
 .../vitest-plugin/component-transformer.ts    |  450 ++----
 .../vitest-plugin/transformer.test.ts         |  725 +++------
 .../csf-tools/vitest-plugin/transformer.ts    |  411 ++---
 code/e2e-sandbox/addon-docs.spec.ts           |   14 +-
 19 files changed, 3409 insertions(+), 4391 deletions(-)

diff --git a/code/core/src/csf-tools/ConfigFile.test.ts b/code/core/src/csf-tools/ConfigFile.test.ts
index 51808b164562..3c624b24fd06 100644
--- a/code/core/src/csf-tools/ConfigFile.test.ts
+++ b/code/core/src/csf-tools/ConfigFile.test.ts
@@ -1,11 +1,9 @@
 import { describe, expect, it } from 'vitest';
 
-import * as babelParser from '@babel/parser';
-import { babelPrint, parserOptions } from 'storybook/internal/babel';
-
 import { dedent } from 'ts-dedent';
 
-import { ConfigFile, formatConfig, loadConfig, printConfig } from './ConfigFile.ts';
+import { formatConfig, loadConfig, printConfig } from './ConfigFile.ts';
+import type { CsfExpression } from './CsfObject.ts';
 
 expect.addSnapshotSerializer({
   serialize: (val: any) => (typeof val === 'string' ? val : val.toString()),
@@ -448,6 +446,22 @@ describe('ConfigFile', () => {
   });
 
   describe('set', () => {
+    it('writes a node read from the same file as its source', () => {
+      const config = loadConfig(`export const a = { b: [1, 'two'] }; export const c = {};`).parse();
+      config.set(['c', 'd'], config.getFieldNode(['a', 'b']) as CsfExpression);
+      expect(printConfig(config).code).toBe(
+        `export const a = { b: [1, 'two'] }; export const c = { d: [1, 'two'] };`
+      );
+    });
+
+    it('rejects a node whose source is unknown', () => {
+      const other = loadConfig(`export const a = 1;`).parse();
+      const config = loadConfig(`export const c = {};`).parse();
+      expect(() => config.set(['c', 'd'], other.getFieldNode(['a']) as CsfExpression)).toThrow(
+        /expressions must come from/
+      );
+    });
+
     describe('named exports', () => {
       it('missing export', () => {
         expect(
@@ -460,10 +474,7 @@ describe('ConfigFile', () => {
           )
         ).toMatchInlineSnapshot(`
           export const addons = [];
-
-          export const core = {
-            builder: "webpack5"
-          };
+          export const core = { builder: "webpack5" };
         `);
       });
       it('missing field', () => {
@@ -475,12 +486,7 @@ describe('ConfigFile', () => {
               export const core = { foo: 'bar' };
             `
           )
-        ).toMatchInlineSnapshot(`
-          export const core = {
-            foo: 'bar',
-            builder: 'webpack5'
-          };
-        `);
+        ).toMatchInlineSnapshot(`export const core = { foo: 'bar', builder: 'webpack5' };`);
       });
       it('found scalar', () => {
         expect(
@@ -513,11 +519,7 @@ describe('ConfigFile', () => {
               export const core = { builder: { name: 'webpack4' } };
             `
           )
-        ).toMatchInlineSnapshot(`
-          export const core = { builder: {
-            name: 'webpack5'
-          } };
-        `);
+        ).toMatchInlineSnapshot(`export const core = { builder: { name: 'webpack5' } };`);
       });
       it('variable export', () => {
         expect(
@@ -546,15 +548,7 @@ describe('ConfigFile', () => {
               module.exports = { addons: [] };
             `
           )
-        ).toMatchInlineSnapshot(`
-          module.exports = {
-            addons: [],
-
-            core: {
-              builder: "webpack5"
-            }
-          };
-        `);
+        ).toMatchInlineSnapshot(`module.exports = { addons: [], core: { builder: "webpack5" } };`);
       });
       it('missing field', () => {
         expect(
@@ -565,12 +559,7 @@ describe('ConfigFile', () => {
               module.exports = { core: { foo: 'bar' }};
             `
           )
-        ).toMatchInlineSnapshot(`
-          module.exports = { core: {
-            foo: 'bar',
-            builder: 'webpack5'
-          }};
-        `);
+        ).toMatchInlineSnapshot(`module.exports = { core: { foo: 'bar', builder: 'webpack5' }};`);
       });
       it('found scalar', () => {
         expect(
@@ -595,15 +584,7 @@ describe('ConfigFile', () => {
               export default { addons: [] };
             `
           )
-        ).toMatchInlineSnapshot(`
-          export default {
-            addons: [],
-
-            core: {
-              builder: "webpack5"
-            }
-          };
-        `);
+        ).toMatchInlineSnapshot(`export default { addons: [], core: { builder: "webpack5" } };`);
       });
       it('missing field', () => {
         expect(
@@ -614,12 +595,7 @@ describe('ConfigFile', () => {
               export default { core: { foo: 'bar' }};
             `
           )
-        ).toMatchInlineSnapshot(`
-          export default { core: {
-            foo: 'bar',
-            builder: 'webpack5'
-          }};
-        `);
+        ).toMatchInlineSnapshot(`export default { core: { foo: 'bar', builder: 'webpack5' }};`);
       });
       it('found scalar', () => {
         expect(
@@ -636,31 +612,23 @@ describe('ConfigFile', () => {
 
     describe('quotes', () => {
       it('no quotes', () => {
-        expect(setField(['foo', 'bar'], 'baz', '')).toMatchInlineSnapshot(`
-          export const foo = {
-            bar: "baz"
-          };
-        `);
+        expect(setField(['foo', 'bar'], 'baz', '')).toMatchInlineSnapshot(
+          `export const foo = { bar: "baz" };`
+        );
       });
       it('more single quotes', () => {
         expect(setField(['foo', 'bar'], 'baz', `export const stories = ['a', 'b', "c"]`))
           .toMatchInlineSnapshot(`
             export const stories = ['a', 'b', "c"]
-
-            export const foo = {
-              bar: 'baz'
-            };
+            export const foo = { bar: 'baz' };
           `);
       });
       it('more double quotes', () => {
         expect(setField(['foo', 'bar'], 'baz', `export const stories = ['a', "b", "c"]`))
           .toMatchInlineSnapshot(`
-          export const stories = ['a', "b", "c"]
-
-          export const foo = {
-            bar: "baz"
-          };
-        `);
+            export const stories = ['a', "b", "c"]
+            export const foo = { bar: "baz" };
+          `);
       });
     });
 
@@ -695,10 +663,7 @@ describe('ConfigFile', () => {
             `
           )
         ).toMatchInlineSnapshot(`
-          const parameters = {
-            foo: 'bar',
-            a11y: 'todo'
-          };
+          const parameters = { foo: 'bar', a11y: 'todo' };
           const preview = {
             parameters,
           }
@@ -722,9 +687,7 @@ describe('ConfigFile', () => {
         ).toMatchInlineSnapshot(`
           const parameters = { foo: 'bar' };
           const preview = {
-            parameters: {
-              a11y: 'todo'
-            },
+            parameters: { a11y: 'todo' },
           }
           export default preview;
         `);
@@ -748,10 +711,7 @@ describe('ConfigFile', () => {
           import { definePreview } from '@storybook/react-vite';
           export const foo = definePreview({
             addons: [],
-
-            core: {
-              builder: 'webpack5'
-            }
+            core: { builder: 'webpack5' },
           });
         `);
       });
@@ -770,10 +730,7 @@ describe('ConfigFile', () => {
         ).toMatchInlineSnapshot(`
           import { definePreview } from '@storybook/react-vite';
           export const foo = definePreview({
-            core: {
-              foo: 'bar',
-              builder: 'webpack5'
-            },
+            core: { foo: 'bar', builder: 'webpack5' },
           });
         `);
       });
@@ -809,12 +766,9 @@ describe('ConfigFile', () => {
               export default { core: { builder: 'webpack5' } };
             `
         )
-      ).toMatchInlineSnapshot(`
-        export default {
-          core: { builder: 'webpack5' },
-          addons: ['docs']
-        };
-      `);
+      ).toMatchInlineSnapshot(
+        `export default { core: { builder: 'webpack5' }, addons: ['docs'] };`
+      );
     });
     it('found scalar', () => {
       expect(() =>
@@ -825,9 +779,7 @@ describe('ConfigFile', () => {
               export default { addons: 5 };
             `
         )
-      ).toThrowErrorMatchingInlineSnapshot(
-        `Error: Expected array at 'addons', got 'NumericLiteral'`
-      );
+      ).toThrowErrorMatchingInlineSnapshot(`Error: Expected array at 'addons', got 'Literal'`);
     });
     it('array of simple values', () => {
       expect(
@@ -1005,11 +957,7 @@ describe('ConfigFile', () => {
               module.exports = { core: { builder: { name: 'webpack4' } }, addons: [] };
             `
           )
-        ).toMatchInlineSnapshot(`
-          module.exports = {
-            addons: []
-          };
-        `);
+        ).toMatchInlineSnapshot(`module.exports = { addons: [] };`);
       });
     });
 
@@ -1072,11 +1020,7 @@ describe('ConfigFile', () => {
               export default { core: { builder: { name: 'webpack4' } }, addons: [] };
             `
           )
-        ).toMatchInlineSnapshot(`
-          export default {
-            addons: []
-          };
-        `);
+        ).toMatchInlineSnapshot(`export default { addons: [] };`);
       });
       it('root globals as variable', () => {
         expect(
@@ -1088,9 +1032,7 @@ describe('ConfigFile', () => {
             `
           )
         ).toMatchInlineSnapshot(`
-          const preview = {
-            bar: { a: 1 }
-          };
+          const preview = { bar: { a: 1 } };
           export default preview;
         `);
       });
@@ -1138,51 +1080,28 @@ describe('ConfigFile', () => {
 
     describe('quotes', () => {
       it('no quotes', () => {
-        expect(setField(['foo', 'bar'], 'baz', '')).toMatchInlineSnapshot(`
-          export const foo = {
-            bar: "baz"
-          };
-        `);
+        expect(setField(['foo', 'bar'], 'baz', '')).toMatchInlineSnapshot(
+          `export const foo = { bar: "baz" };`
+        );
       });
       it('more single quotes', () => {
         expect(setField(['foo', 'bar'], 'baz', `export const stories = ['a', 'b', "c"]`))
           .toMatchInlineSnapshot(`
             export const stories = ['a', 'b', "c"]
-
-            export const foo = {
-              bar: 'baz'
-            };
+            export const foo = { bar: 'baz' };
           `);
       });
       it('more double quotes', () => {
         expect(setField(['foo', 'bar'], 'baz', `export const stories = ['a', "b", "c"]`))
           .toMatchInlineSnapshot(`
-          export const stories = ['a', "b", "c"]
-
-          export const foo = {
-            bar: "baz"
-          };
-        `);
+            export const stories = ['a', "b", "c"]
+            export const foo = { bar: "baz" };
+          `);
       });
     });
   });
 
   describe('quote inference under EOL reconstruction', () => {
-    it('keeps single quotes when token offsets index a CRLF reconstruction (Windows)', () => {
-      const source = `export default {\n  framework: '@storybook/react-vite',\n};\n`;
-      // On Windows, recast rebuilds the parser input with `os.EOL` before babel sees it, so
-      // babel's token offsets index a CRLF string while `_code` is the original LF source.
-      // Parsing the CRLF variant directly with @babel/parser recreates exactly that
-      // misalignment; quote inference must not depend on token offsets to survive it.
-      const ast = babelParser.parse(source.replaceAll('\n', '\r\n'), { ...parserOptions });
-      const config = new ConfigFile(ast, source);
-      config.parse();
-      config.setImport(['fileURLToPath'], 'node:url');
-      const printed = printConfig(config).code;
-      expect(printed).toContain("from 'node:url'");
-      expect(printed).not.toContain('from "node:url"');
-    });
-
     it('infers quotes and prints LF output for CRLF sources', () => {
       const source = [
         "import { addons } from 'storybook/manager-api';",
@@ -1457,7 +1376,6 @@ describe('ConfigFile', () => {
          */
 
         import type { StorybookConfig } from '@storybook/react-vite';
-
         import { dirname } from 'node:path';
         import { fileURLToPath } from 'node:url';
 
@@ -1502,9 +1420,7 @@ describe('ConfigFile', () => {
       expect(formatConfig(config)).toMatchInlineSnapshot(`
         // Copyright Example
 
-        const {
-          dirname
-        } = require("node:path");
+        const { dirname } = require("node:path");
 
         module.exports = { stories: [] };
       `);
@@ -1519,10 +1435,10 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.setImport('path', 'path');
 
-      const parsed = babelPrint(config._ast);
+      const parsed = printConfig(config).code;
 
       expect(parsed).toMatchInlineSnapshot(`
-        import path from 'path';
+        import path from "path";
         const config: StorybookConfig = { };
         export default config;
       `);
@@ -1538,7 +1454,7 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.setImport(['dirname'], 'node:path');
 
-      const parsed = babelPrint(config._ast);
+      const parsed = printConfig(config).code;
 
       expect(parsed).toMatchInlineSnapshot(`
         import { join, dirname } from 'path';
@@ -1556,10 +1472,10 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.setImport('path', 'path');
 
-      const parsed = babelPrint(config._ast);
+      const parsed = printConfig(config).code;
 
       expect(parsed).toMatchInlineSnapshot(`
-        import path from 'path';
+        import path from "path";
         const config: StorybookConfig = { };
         export default config;
       `);
@@ -1574,10 +1490,10 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.setImport(['dirname'], 'path');
 
-      const parsed = babelPrint(config._ast);
+      const parsed = printConfig(config).code;
 
       expect(parsed).toMatchInlineSnapshot(`
-        import { dirname } from 'path';
+        import { dirname } from "path";
         const config: StorybookConfig = { };
         export default config;
       `);
@@ -1594,7 +1510,7 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.setImport(['dirname'], 'path');
 
-      const parsed = babelPrint(config._ast);
+      const parsed = printConfig(config).code;
 
       expect(parsed).toMatchInlineSnapshot(`
         import { dirname } from 'path';
@@ -1608,18 +1524,18 @@ describe('ConfigFile', () => {
       const config = loadConfig('').parse();
       config.setImport({ namespace: 'path' }, 'path');
 
-      const parsed = babelPrint(config._ast);
+      const parsed = printConfig(config).code;
 
-      expect(parsed).toMatchInlineSnapshot(`import * as path from 'path';`);
+      expect(parsed).toMatchInlineSnapshot(`import * as path from "path";`);
     });
 
     it(`supports setting import without specifier`, () => {
       const config = loadConfig('').parse();
       config.setImport(null, 'path');
 
-      const parsed = babelPrint(config._ast);
+      const parsed = printConfig(config).code;
 
-      expect(parsed).toMatchInlineSnapshot(`import 'path';`);
+      expect(parsed).toMatchInlineSnapshot(`import "path";`);
     });
   });
 
@@ -1633,10 +1549,10 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.setRequireImport('path', 'path');
 
-      const parsed = babelPrint(config._ast);
+      const parsed = printConfig(config).code;
 
       expect(parsed).toMatchInlineSnapshot(`
-        const path = require('path');
+        const path = require("path");
         const config: StorybookConfig = { };
         export default config;
       `);
@@ -1652,7 +1568,7 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.setRequireImport('path', 'path');
 
-      const parsed = babelPrint(config._ast);
+      const parsed = printConfig(config).code;
 
       expect(parsed).toMatchInlineSnapshot(`
         const path = require('path');
@@ -1670,13 +1586,10 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.setRequireImport(['dirname'], 'path');
 
-      const parsed = babelPrint(config._ast);
+      const parsed = printConfig(config).code;
 
       expect(parsed).toMatchInlineSnapshot(`
-        const {
-          dirname,
-        } = require('path');
-
+        const { dirname } = require("path");
         const config: StorybookConfig = { };
         export default config;
       `);
@@ -1693,13 +1606,10 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.setRequireImport(['dirname', 'basename'], 'path');
 
-      const parsed = babelPrint(config._ast);
+      const parsed = printConfig(config).code;
 
       expect(parsed).toMatchInlineSnapshot(`
-        const {
-          dirname,
-          basename,
-        } = require('path');
+        const { dirname, basename } = require('path');
 
         const config: StorybookConfig = { };
         export default config;
@@ -1717,13 +1627,10 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.setRequireImport(['dirname', 'basename'], 'node:path');
 
-      const parsed = babelPrint(config._ast);
+      const parsed = printConfig(config).code;
 
       expect(parsed).toMatchInlineSnapshot(`
-        const {
-          dirname,
-          basename,
-        } = require('path');
+        const { dirname, basename } = require('path');
 
         const config: StorybookConfig = { };
         export default config;
@@ -1742,7 +1649,7 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.removeImport('path', 'path');
 
-      const parsed = babelPrint(config._ast);
+      const parsed = printConfig(config).code;
 
       expect(parsed).toMatchInlineSnapshot(`
         const config: StorybookConfig = { };
@@ -1760,7 +1667,7 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.removeImport('path', 'path');
 
-      const parsed = babelPrint(config._ast);
+      const parsed = printConfig(config).code;
 
       expect(parsed).toMatchInlineSnapshot(`
         const config: StorybookConfig = { };
@@ -1778,15 +1685,13 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.removeImport(['dirname'], 'path');
 
-      const parsed = babelPrint(config._ast);
+      const parsed = printConfig(config).code;
 
       expect(parsed).toMatchInlineSnapshot(`
-        const {
-          basename,
-        } = require('path');
+        const { basename } = require('path');
         const config: StorybookConfig = { };
         export default config;
-        `);
+      `);
     });
 
     it(`removes a named ES6 import`, () => {
@@ -1799,7 +1704,7 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.removeImport(['dirname'], 'path');
 
-      const parsed = babelPrint(config._ast);
+      const parsed = printConfig(config).code;
 
       expect(parsed).toMatchInlineSnapshot(`
         import { basename } from 'path';
@@ -1818,12 +1723,10 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.removeImport(['dirname', 'basename'], 'path');
 
-      const parsed = babelPrint(config._ast);
+      const parsed = printConfig(config).code;
 
       expect(parsed).toMatchInlineSnapshot(`
-        const {
-          join,
-        } = require('path');
+        const { join } = require('path');
         const config: StorybookConfig = { };
         export default config;
       `);
@@ -1839,7 +1742,7 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.removeImport(['dirname', 'basename'], 'path');
 
-      const parsed = babelPrint(config._ast);
+      const parsed = printConfig(config).code;
 
       expect(parsed).toMatchInlineSnapshot(`
         import { join } from 'path';
@@ -1857,7 +1760,7 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.removeImport({ namespace: 'path' }, 'path');
 
-      const parsed = babelPrint(config._ast);
+      const parsed = printConfig(config).code;
 
       expect(parsed).toMatchInlineSnapshot(`
         const config: StorybookConfig = { };
@@ -1874,7 +1777,7 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.removeImport({ namespace: 'alsoPath' }, 'path');
 
-      const parsed = babelPrint(config._ast);
+      const parsed = printConfig(config).code;
 
       expect(parsed).toMatchInlineSnapshot(`
         import path from 'path';
@@ -1893,7 +1796,7 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.removeImport(['dirname', 'basename'], 'path');
 
-      const parsed = babelPrint(config._ast);
+      const parsed = printConfig(config).code;
 
       expect(parsed).toMatchInlineSnapshot(`
         const config: StorybookConfig = { };
@@ -1911,7 +1814,7 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.removeImport(['dirname', 'basename'], 'path');
 
-      const parsed = babelPrint(config._ast);
+      const parsed = printConfig(config).code;
 
       expect(parsed).toMatchInlineSnapshot(`
         const config: StorybookConfig = { };
@@ -1929,7 +1832,7 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.removeImport(['dirname'], 'node:path');
 
-      const parsed = babelPrint(config._ast);
+      const parsed = printConfig(config).code;
 
       expect(parsed).toMatchInlineSnapshot(`
         const config: StorybookConfig = { };
@@ -1947,7 +1850,7 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.removeImport(['dirname'], 'node:path');
 
-      const parsed = babelPrint(config._ast);
+      const parsed = printConfig(config).code;
 
       expect(parsed).toMatchInlineSnapshot(`
         const config: StorybookConfig = { };
@@ -1964,7 +1867,7 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.removeImport('path', 'path');
 
-      const parsed = babelPrint(config._ast);
+      const parsed = printConfig(config).code;
 
       expect(parsed).toMatchInlineSnapshot(source);
     });
@@ -1979,7 +1882,7 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.removeImport(['nonexistent'], 'path');
 
-      const parsed = babelPrint(config._ast);
+      const parsed = printConfig(config).code;
 
       expect(parsed).toMatchInlineSnapshot(source);
     });
@@ -1994,7 +1897,7 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.removeImport(['nonexistent'], 'path');
 
-      const parsed = babelPrint(config._ast);
+      const parsed = printConfig(config).code;
 
       expect(parsed).toMatchInlineSnapshot(source);
     });
@@ -2010,7 +1913,7 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.removeImport(['readFile'], 'fs');
 
-      const parsed = babelPrint(config._ast);
+      const parsed = printConfig(config).code;
 
       expect(parsed).toMatchInlineSnapshot(`
         const { dirname } = require('path');
@@ -2030,7 +1933,7 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.removeImport(['dirname'], 'path');
 
-      const parsed = babelPrint(config._ast);
+      const parsed = printConfig(config).code;
 
       expect(parsed).toMatchInlineSnapshot(`
         import { readFile } from 'fs';
diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index 6c6259daf0fe..cb8f8faf899f 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -1,28 +1,46 @@
 import { readFile, writeFile } from 'node:fs/promises';
 
-import {
-  type RecastOptions,
-  babelParse,
-  generate,
-  recast,
-  types as t,
-  traverse,
-} from 'storybook/internal/babel';
 import { logger } from 'storybook/internal/node-logger';
 
 import { dedent } from 'ts-dedent';
 import invariant from 'tiny-invariant';
 
 import type { PrintResultType } from './PrintResultType.ts';
-import { createConfigObject } from './ConfigObject.ts';
+import { createConfigObject, specifierList } from './ConfigObject.ts';
 import {
+  type CsfExpression,
   type CsfMutationDiagnostic,
   type CsfMutationResult,
   type CsfObject,
+  type CsfObjectHost,
   type CsfValue,
   createCsfObject,
+  literalRoot,
+  parseExpression,
+  printExpression,
 } from './CsfObject.ts';
-import { unwrapExpression } from './story-shape/utils.ts';
+import {
+  type E,
+  type Node,
+  isIdentifier,
+  isStringLiteral,
+  locationOf,
+  unwrapExpression,
+  walk,
+} from './estree/ast.ts';
+import {
+  SourceEditor,
+  appendStatement,
+  appendToList,
+  arrayList,
+  objectList,
+  prependStatement,
+  printString,
+  printValue,
+  removeFromList,
+  removeStatement,
+} from './estree/editor.ts';
+import { findVarInitialization } from './findVarInitialization.ts';
 
 export interface CallArgumentsOptions {
   importedName: string;
@@ -47,48 +65,50 @@ const getCsfParsingErrorMessage = ({
     `;
 };
 
-const propKey = (p: t.ObjectProperty) => {
-  if (t.isIdentifier(p.key)) {
+const propKey = (p: Node) => {
+  if (p.type !== 'Property') {
+    return null;
+  }
+  if (p.key.type === 'Identifier') {
     return p.key.name;
   }
-
-  if (t.isStringLiteral(p.key)) {
+  if (isStringLiteral(p.key)) {
     return p.key.value;
   }
   return null;
 };
 
-const _getPath = (path: string[], node: t.Node): t.Node | undefined => {
+const _getPath = (path: string[], node: Node | null | undefined): Node | undefined => {
   if (path.length === 0) {
-    return node;
+    return node ?? undefined;
   }
-  if (t.isObjectExpression(node)) {
+  if (node?.type === 'ObjectExpression') {
     const [first, ...rest] = path;
-    const field = (node.properties as t.ObjectProperty[]).find((p) => propKey(p) === first);
+    const field = node.properties.find((p) => propKey(p) === first) as E.ObjectProperty | undefined;
     if (field) {
-      return _getPath(rest, (field as t.ObjectProperty).value);
+      return _getPath(rest, field.value);
     }
   }
   return undefined;
 };
 
-const _getPathProperties = (path: string[], node: t.Node): t.ObjectProperty[] | undefined => {
+const _getPathProperties = (path: string[], node: Node): E.ObjectProperty[] | undefined => {
   if (path.length === 0) {
-    if (t.isObjectExpression(node)) {
-      return node.properties as t.ObjectProperty[];
+    if (node.type === 'ObjectExpression') {
+      return node.properties as E.ObjectProperty[];
     }
     throw new Error('Expected object expression');
   }
-  if (t.isObjectExpression(node)) {
+  if (node.type === 'ObjectExpression') {
     const [first, ...rest] = path;
-    const field = (node.properties as t.ObjectProperty[]).find((p) => propKey(p) === first);
+    const field = node.properties.find((p) => propKey(p) === first) as E.ObjectProperty | undefined;
     if (field) {
       // FXIME handle spread etc.
       if (rest.length === 0) {
-        return node.properties as t.ObjectProperty[];
+        return node.properties as E.ObjectProperty[];
       }
 
-      return _getPathProperties(rest, (field as t.ObjectProperty).value);
+      return _getPathProperties(rest, field.value);
     }
   }
   return undefined;
@@ -96,78 +116,29 @@ const _getPathProperties = (path: string[], node: t.Node): t.ObjectProperty[] |
 
 const _findVarDeclarator = (
   identifier: string,
-  program: t.Program
-): t.VariableDeclarator | null | undefined => {
-  let declarator: t.VariableDeclarator | null | undefined = null;
-  let declarations: t.VariableDeclarator[] | null = null;
-
-  program.body.find((node: t.Node) => {
-    if (t.isVariableDeclaration(node)) {
-      declarations = node.declarations;
-    } else if (t.isExportNamedDeclaration(node) && t.isVariableDeclaration(node.declaration)) {
-      declarations = node.declaration.declarations;
+  program: E.Program
+): E.VariableDeclarator | undefined => {
+  for (const statement of program.body) {
+    const declaration =
+      statement.type === 'ExportNamedDeclaration' ? statement.declaration : statement;
+    if (declaration?.type !== 'VariableDeclaration') {
+      continue;
+    }
+    const declarator = declaration.declarations.find((decl) => isIdentifier(decl.id, identifier));
+    if (declarator) {
+      return declarator;
     }
-
-    return (
-      declarations &&
-      declarations.find((decl: t.VariableDeclarator) => {
-        if (
-          t.isVariableDeclarator(decl) &&
-          t.isIdentifier(decl.id) &&
-          decl.id.name === identifier
-        ) {
-          declarator = decl;
-          return true; // stop looking
-        }
-        return false;
-      })
-    );
-  });
-  return declarator;
-};
-
-const _findVarInitialization = (identifier: string, program: t.Program) => {
-  const declarator = _findVarDeclarator(identifier, program);
-  return declarator?.init;
-};
-
-type RecastComment = t.Comment & { leading?: boolean };
-type CommentedStatement = t.Statement & { comments?: RecastComment[] };
-
-const NEXT_LINE_DIRECTIVE =
-  /^\s*(@ts-(expect-error|ignore)|[a-z]+-disable-next-line|prettier-ignore|biome-ignore)\b/;
-
-/**
- * Return the leading comments of a program's first statement that form the file header. A
- * directive that applies only to that statement, such as `@ts-expect-error`, ends the header.
- */
-export const getHeaderComments = (statement: t.Statement | undefined): RecastComment[] => {
-  const comments = (statement as CommentedStatement | undefined)?.comments ?? [];
-  const leading = comments.filter((comment) => comment.leading);
-  const directive = leading.findIndex(({ value }) => NEXT_LINE_DIRECTIVE.test(value));
-  return directive === -1 ? leading : leading.slice(0, directive);
-};
-
-// A license header has to stay first: add below the existing imports, or take the header over
-// when there are none.
-const prependStatement = (program: t.Program, statement: t.Statement) => {
-  const first: CommentedStatement | undefined = program.body[0];
-  const header = getHeaderComments(first);
-  if (!first || !header.length) {
-    program.body.unshift(statement);
-    return;
-  }
-  const firstNonImport = program.body.findIndex((node) => !t.isImportDeclaration(node));
-  const index = firstNonImport === -1 ? program.body.length : firstNonImport;
-  if (index === 0) {
-    const notHeader = (comment: t.Comment) => !header.includes(comment);
-    first.comments = first.comments?.filter(notHeader);
-    first.leadingComments = first.leadingComments?.filter(notHeader);
-    Object.assign(statement, { comments: header, leadingComments: header });
   }
-  program.body.splice(index, 0, statement);
+  return undefined;
 };
 
+const isRequireOf = (node: Node | null | undefined, fromImport: string) =>
+  node?.type === 'CallExpression' &&
+  isIdentifier(node.callee, 'require') &&
+  isStringLiteral(node.arguments[0]) &&
+  (node.arguments[0].value === fromImport ||
+    node.arguments[0].value === fromImport.split('node:')[1]);
+
 export class ConfigFile implements CsfObject {
   /**
    * Identify the config, meta, story, annotation, or call argument this editor represents.
@@ -216,7 +187,7 @@ export class ConfigFile implements CsfObject {
   }
 
   /**
-   * Read a copy of the Babel expression at a property path. Missing fields return `undefined`.
+   * Read a detached copy of the expression at a property path. Missing fields return `undefined`.
    *
    * @example
    * ```ts
@@ -225,7 +196,7 @@ export class ConfigFile implements CsfObject {
    * object.get(['missing']); // undefined
    * ```
    */
-  get(path: readonly string[]): t.Expression | undefined {
+  get(path: readonly string[]): CsfExpression | undefined {
     const editor = this._editor('read');
     return editor.ok ? editor.object.get(path) : undefined;
   }
@@ -248,8 +219,7 @@ export class ConfigFile implements CsfObject {
   }
 
   /**
-   * Set a plain value or Babel expression, creating missing parents. Accepts nested arrays and
-   * objects; top-level expression-shaped objects are interpreted as AST nodes.
+   * Set a plain value or an expression from `get` / `parseExpression`, creating missing parents.
    *
    * @example
    * ```ts
@@ -259,27 +229,26 @@ export class ConfigFile implements CsfObject {
    * object.getValue(['parameters']); // { a11y: { test: 'todo', enabled: true } }
    * ```
    */
-  set(path: readonly string[], value: CsfValue | t.Expression): CsfMutationResult {
+  set(path: readonly string[], value: CsfValue | CsfExpression): CsfMutationResult {
     return this._mutate((object) => object.set(path, value));
   }
 
   /**
-   * Replace a value using its live Babel expression. Reused nodes preserve their source formatting.
-   * Return a new node, or `undefined` to leave the value unchanged. Do not mutate or retain the input
-   * node: such changes bypass change tracking and diagnostics.
+   * Replace a value derived from its current expression. Return a new expression, or `undefined`
+   * (or the input) to leave the value unchanged.
    *
    * @example
    * ```ts
    * const object = loadConfig("export default { tags: ['docs'] };").parse();
    * object.transform(['tags'], (value) =>
-   *   t.arrayExpression([t.spreadElement(value), t.stringLiteral('autodocs')])
+   *   parseExpression(`[...${printExpression(value)}, 'autodocs']`)
    * ); // { ok: true, changed: true }
    * object.getValue(['tags']); // ['docs', 'autodocs']
    * ```
    */
   transform(
     path: readonly string[],
-    derive: (value: t.Expression) => t.Expression | undefined
+    derive: (value: CsfExpression) => CsfExpression | undefined
   ): CsfMutationResult {
     return this._mutate((object) => object.transform(path, derive));
   }
@@ -361,9 +330,6 @@ export class ConfigFile implements CsfObject {
       (diagnostic) => this._mutationDiagnostics.push(diagnostic),
       () => {
         this._changed = true;
-        this._exports = {};
-        this._exportDecls = {};
-        this.parse();
       }
     );
     if (editor.ok === false) {
@@ -372,18 +338,16 @@ export class ConfigFile implements CsfObject {
     return editor;
   }
 
-  _ast: t.File;
-
-  _code: string;
+  _editorSource: SourceEditor;
 
-  _exports: Record<string, t.Expression> = {};
+  _exports: Record<string, Node> = {};
 
   // FIXME: this is a hack. this is only used in the case where the user is
   // modifying a named export that's a scalar. The _exports map is not suitable
   // for that. But rather than refactor the whole thing, we just use this as a stopgap.
-  _exportDecls: Record<string, t.VariableDeclarator | t.FunctionDeclaration> = {};
+  _exportDecls: Record<string, E.VariableDeclarator | E.Function> = {};
 
-  _exportsObject: t.ObjectExpression | undefined;
+  _exportsObject: E.ObjectExpression | undefined;
 
   _quotes: 'single' | 'double' | undefined;
 
@@ -391,26 +355,43 @@ export class ConfigFile implements CsfObject {
 
   hasDefaultExport = false;
 
-  constructor(ast: t.File, code: string, fileName?: string) {
-    this._ast = ast;
-    this._code = code;
+  constructor(code: string, fileName?: string) {
+    this._editorSource = new SourceEditor(code, fileName);
     this.fileName = fileName;
   }
 
-  _parseExportsObject(exportsObject: t.ObjectExpression) {
+  get _program(): E.Program {
+    return this._editorSource.program;
+  }
+
+  get _code(): string {
+    return this._editorSource.code;
+  }
+
+  _commit() {
+    if (!this._editorSource.commit()) {
+      return;
+    }
+    this._exports = {};
+    this._exportDecls = {};
+    this._exportsObject = undefined;
+    this.hasDefaultExport = false;
+    this.parse();
+  }
+
+  _parseExportsObject(exportsObject: E.ObjectExpression) {
     this._exportsObject = exportsObject;
-    (exportsObject.properties as t.ObjectProperty[]).forEach((p) => {
+    for (const p of exportsObject.properties) {
       const exportName = propKey(p);
       if (exportName) {
-        const exportVal = this._resolveDeclaration(p.value as t.Node);
-        this._exports[exportName] = exportVal as t.Expression;
+        this._exports[exportName] = this._resolveDeclaration((p as E.ObjectProperty).value);
       }
-    });
+    }
   }
 
   /** Unwraps TS assertions/satisfies from a node, to get the underlying node. */
-  _unwrap = (node: t.Node | undefined | null): any => {
-    if (t.isTSAsExpression(node) || t.isTSSatisfiesExpression(node)) {
+  _unwrap = (node: Node | undefined | null): any => {
+    if (node?.type === 'TSAsExpression' || node?.type === 'TSSatisfiesExpression') {
       return this._unwrap(node.expression);
     }
     return node;
@@ -420,176 +401,158 @@ export class ConfigFile implements CsfObject {
    * Resolve a declaration node by unwrapping TS assertions/satisfies and following identifiers to
    * resolve the correct node in case it's an identifier.
    */
-  _resolveDeclaration = (node: t.Node, parent: t.Node = this._ast.program) => {
+  _resolveDeclaration = (node: Node, isTopLevel = true) => {
     const decl = this._unwrap(node);
-    if (t.isIdentifier(decl) && t.isProgram(parent)) {
-      const initialization = _findVarInitialization(decl.name, parent);
+    if (decl?.type === 'Identifier' && isTopLevel) {
+      const initialization = findVarInitialization(decl.name, this._program);
       return initialization ? this._unwrap(initialization) : decl;
     }
     return decl;
   };
 
   parse() {
-    // Infer the dominant quote style from the pristine AST up front: later mutations can
-    // remove the last string literals (e.g. cleanupTypeImports dropping a legacy import),
-    // which must not change how newly generated nodes are quoted.
-    this._inferQuotes();
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const self = this;
-    traverse(this._ast, {
-      ExportDefaultDeclaration: {
-        enter({ node, parent }) {
-          self.hasDefaultExport = true;
-          let decl = self._resolveDeclaration(node.declaration as t.Node, parent);
-
-          // csf factory - unwrap call expressions like definePreview({...}) or definePreview({...}).type<T>()
-          while (t.isCallExpression(decl)) {
-            if (t.isObjectExpression(decl.arguments[0])) {
-              decl = decl.arguments[0];
-              break;
-            } else if (
-              t.isMemberExpression(decl.callee) &&
-              t.isCallExpression(decl.callee.object)
-            ) {
-              decl = decl.callee.object;
-            } else {
-              break;
-            }
+    // Read before any edit: a mutation may remove the string literals the style is inferred from.
+    this._editorSource.preferredQuote = this._quote;
+    walk(this._program, (node, parent) => {
+      const isTopLevel = parent?.type === 'Program';
+      if (node.type === 'ExportDefaultDeclaration') {
+        this.hasDefaultExport = true;
+        let decl = this._resolveDeclaration(node.declaration as Node, isTopLevel);
+
+        // csf factory - unwrap call expressions like definePreview({...}) or definePreview({...}).type<T>()
+        while (decl?.type === 'CallExpression') {
+          if (decl.arguments[0]?.type === 'ObjectExpression') {
+            decl = decl.arguments[0];
+            break;
+          } else if (
+            decl.callee.type === 'MemberExpression' &&
+            decl.callee.object.type === 'CallExpression'
+          ) {
+            decl = decl.callee.object;
+          } else {
+            break;
           }
+        }
 
-          if (t.isObjectExpression(decl)) {
-            self._parseExportsObject(decl);
-          } else {
-            logger.debug(
-              getCsfParsingErrorMessage({
-                fileName: self.fileName,
-                expectedType: 'ObjectExpression',
-                foundType: decl?.type,
-                node: decl || node.declaration,
-              })
-            );
+        if (decl?.type === 'ObjectExpression') {
+          this._parseExportsObject(decl);
+        } else {
+          logger.debug(
+            getCsfParsingErrorMessage({
+              fileName: this.fileName,
+              expectedType: 'ObjectExpression',
+              foundType: decl?.type,
+              node: decl || node.declaration,
+            })
+          );
+        }
+      } else if (node.type === 'ExportNamedDeclaration') {
+        if (node.declaration?.type === 'VariableDeclaration') {
+          // export const X = ...;
+          for (const decl of node.declaration.declarations) {
+            if (decl.id.type === 'Identifier') {
+              const exportName = decl.id.name;
+              this._exports[exportName] = this._resolveDeclaration(decl.init as Node, isTopLevel);
+              this._exportDecls[exportName] = decl;
+            }
           }
-        },
-      },
-      ExportNamedDeclaration: {
-        enter({ node, parent }) {
-          if (t.isVariableDeclaration(node.declaration)) {
-            // export const X = ...;
-            node.declaration.declarations.forEach((decl) => {
-              if (t.isVariableDeclarator(decl) && t.isIdentifier(decl.id)) {
-                const { name: exportName } = decl.id;
-                const exportVal = self._resolveDeclaration(decl.init as t.Node, parent);
-                self._exports[exportName] = exportVal;
-                self._exportDecls[exportName] = decl;
+        } else if (node.declaration?.type === 'FunctionDeclaration') {
+          // export function X() {...};
+          const decl = node.declaration;
+          if (decl.id) {
+            this._exportDecls[decl.id.name] = decl;
+            this._exports[decl.id.name] = decl;
+          }
+        } else if (node.specifiers.length > 0) {
+          // export { X };
+          for (const spec of node.specifiers) {
+            if (spec.local.type !== 'Identifier') {
+              continue;
+            }
+            const localName = spec.local.name;
+            const exportName =
+              spec.exported.type === 'Identifier'
+                ? spec.exported.name
+                : (spec.exported as E.StringLiteral).value;
+
+            const decl =
+              _findVarDeclarator(localName, this._program) ??
+              this._program.body.find(
+                (statement): statement is E.Function =>
+                  statement.type === 'FunctionDeclaration' && statement.id?.name === localName
+              );
+            // decl can be empty in case X from `import { X } from ....` because it is not handled in _findVarDeclarator
+            if (decl) {
+              const value =
+                decl.type !== 'VariableDeclarator'
+                  ? decl
+                  : decl.init
+                    ? this._resolveDeclaration(decl.init, isTopLevel)
+                    : undefined;
+              if (exportName === 'default' && value?.type === 'ObjectExpression') {
+                this.hasDefaultExport = true;
+                this._parseExportsObject(value);
+                continue;
               }
-            });
-          } else if (t.isFunctionDeclaration(node.declaration)) {
-            // export function X() {...};
-            const decl = node.declaration;
-            if (t.isIdentifier(decl.id)) {
-              const { name: exportName } = decl.id;
-              self._exportDecls[exportName] = decl;
-              self._exports[exportName] = t.toExpression(t.cloneNode(decl));
+              this._exports[exportName] = value;
+              this._exportDecls[exportName] = decl;
             }
-          } else if (node.specifiers) {
-            // export { X };
-            node.specifiers.forEach((spec) => {
-              if (
-                t.isExportSpecifier(spec) &&
-                t.isIdentifier(spec.local) &&
-                (t.isIdentifier(spec.exported) || t.isStringLiteral(spec.exported))
-              ) {
-                const { name: localName } = spec.local;
-                const exportName = t.isIdentifier(spec.exported)
-                  ? spec.exported.name
-                  : spec.exported.value;
-
-                const decl =
-                  _findVarDeclarator(localName, self._ast.program) ??
-                  self._ast.program.body.find(
-                    (statement): statement is t.FunctionDeclaration =>
-                      t.isFunctionDeclaration(statement) && statement.id?.name === localName
-                  );
-                // decl can be empty in case X from `import { X } from ....` because it is not handled in _findVarDeclarator
-                if (decl) {
-                  const value = t.isFunctionDeclaration(decl)
-                    ? t.toExpression(t.cloneNode(decl))
-                    : decl.init
-                      ? self._resolveDeclaration(decl.init, parent)
-                      : undefined;
-                  if (exportName === 'default' && t.isObjectExpression(value)) {
-                    self.hasDefaultExport = true;
-                    self._parseExportsObject(value);
-                    return;
-                  }
-                  self._exports[exportName] = value;
-                  self._exportDecls[exportName] = decl;
-                }
+          }
+        } else {
+          logger.debug(
+            getCsfParsingErrorMessage({
+              fileName: this.fileName,
+              expectedType: 'VariableDeclaration',
+              foundType: node.declaration?.type,
+              node: node.declaration,
+            })
+          );
+        }
+      } else if (
+        node.type === 'ExpressionStatement' &&
+        node.expression.type === 'AssignmentExpression' &&
+        node.expression.operator === '='
+      ) {
+        const { left, right } = node.expression;
+        if (
+          left.type === 'MemberExpression' &&
+          isIdentifier(left.object, 'module') &&
+          isIdentifier(left.property, 'exports')
+        ) {
+          const exportObject = this._resolveDeclaration(right, isTopLevel);
+
+          if (exportObject?.type === 'ObjectExpression') {
+            this._exportsObject = exportObject;
+            for (const p of exportObject.properties as Node[]) {
+              const exportName = propKey(p);
+              if (exportName) {
+                this._exports[exportName] = this._resolveDeclaration(
+                  (p as E.ObjectProperty).value,
+                  isTopLevel
+                );
               }
-            });
+            }
           } else {
             logger.debug(
               getCsfParsingErrorMessage({
-                fileName: self.fileName,
-                expectedType: 'VariableDeclaration',
-                foundType: node.declaration?.type,
-                node: node.declaration,
+                fileName: this.fileName,
+                expectedType: 'ObjectExpression',
+                foundType: exportObject?.type,
+                node: exportObject,
               })
             );
           }
-        },
-      },
-      ExpressionStatement: {
-        enter({ node, parent }) {
-          if (t.isAssignmentExpression(node.expression) && node.expression.operator === '=') {
-            const { left, right } = node.expression;
-            if (
-              t.isMemberExpression(left) &&
-              t.isIdentifier(left.object) &&
-              left.object.name === 'module' &&
-              t.isIdentifier(left.property) &&
-              left.property.name === 'exports'
-            ) {
-              let exportObject = right;
-              exportObject = self._resolveDeclaration(exportObject as t.Node, parent);
-
-              if (t.isObjectExpression(exportObject)) {
-                self._exportsObject = exportObject;
-                (exportObject.properties as t.ObjectProperty[]).forEach((p) => {
-                  const exportName = propKey(p);
-                  if (exportName) {
-                    const exportVal = self._resolveDeclaration(p.value as t.Node, parent);
-                    self._exports[exportName] = exportVal as t.Expression;
-                  }
-                });
-              } else {
-                logger.debug(
-                  getCsfParsingErrorMessage({
-                    fileName: self.fileName,
-                    expectedType: 'ObjectExpression',
-                    foundType: exportObject?.type,
-                    node: exportObject,
-                  })
-                );
-              }
-            }
-          }
-        },
-      },
-      CallExpression: {
-        enter: ({ node }) => {
-          if (
-            t.isIdentifier(node.callee) &&
-            node.callee.name === 'definePreview' &&
-            node.arguments.length === 1 &&
-            t.isObjectExpression(node.arguments[0])
-          ) {
-            self._parseExportsObject(node.arguments[0]);
-          }
-        },
-      },
+        }
+      } else if (
+        node.type === 'CallExpression' &&
+        isIdentifier(node.callee, 'definePreview') &&
+        node.arguments.length === 1 &&
+        node.arguments[0].type === 'ObjectExpression'
+      ) {
+        this._parseExportsObject(node.arguments[0]);
+      }
     });
-    return self;
+    return this;
   }
 
   getFieldNode(path: string[]) {
@@ -653,19 +616,19 @@ export class ConfigFile implements CsfObject {
     }
 
     const pathNames: string[] = [];
-    if (t.isArrayExpression(node)) {
-      (node.elements as t.Expression[]).forEach((element) => {
-        pathNames.push(this._getPresetValue(element, 'name'));
-      });
+    if (node.type === 'ArrayExpression') {
+      for (const element of node.elements) {
+        pathNames.push(this._getPresetValue(element as Node, 'name'));
+      }
     }
 
     return pathNames;
   }
 
-  _getWrappedValue(node: t.Node) {
-    if (t.isCallExpression(node)) {
+  _getWrappedValue(node: Node) {
+    if (node.type === 'CallExpression') {
       const arg = node.arguments[0];
-      if (t.isStringLiteral(arg)) {
+      if (isStringLiteral(arg)) {
         return arg.value;
       }
     }
@@ -678,19 +641,18 @@ export class ConfigFile implements CsfObject {
    * 1. `{ node: 'value' }`
    * 2. `{ node: { fallbackProperty: 'value' } }`
    */
-  _getPresetValue(node: t.Node, fallbackProperty: string) {
+  _getPresetValue(node: Node, fallbackProperty: string) {
     let value;
-    if (t.isStringLiteral(node)) {
+    if (isStringLiteral(node)) {
       value = node.value;
-    } else if (t.isObjectExpression(node)) {
-      node.properties.forEach((prop) => {
+    } else if (node.type === 'ObjectExpression') {
+      for (const prop of node.properties) {
+        if (prop.type !== 'Property') {
+          continue;
+        }
         // { framework: { name: 'value' } }
-        if (
-          t.isObjectProperty(prop) &&
-          t.isIdentifier(prop.key) &&
-          prop.key.name === fallbackProperty
-        ) {
-          if (t.isStringLiteral(prop.value)) {
+        if (isIdentifier(prop.key, fallbackProperty)) {
+          if (isStringLiteral(prop.value)) {
             value = prop.value.value;
           } else {
             value = this._getWrappedValue(prop.value);
@@ -698,16 +660,11 @@ export class ConfigFile implements CsfObject {
         }
 
         // { "framework": { "name": "value" } }
-        if (
-          t.isObjectProperty(prop) &&
-          t.isStringLiteral(prop.key) &&
-          prop.key.value === 'name' &&
-          t.isStringLiteral(prop.value)
-        ) {
+        if (isStringLiteral(prop.key) && prop.key.value === 'name' && isStringLiteral(prop.value)) {
           value = prop.value.value;
         }
-      });
-    } else if (t.isCallExpression(node)) {
+      }
+    } else if (node.type === 'CallExpression') {
       value = this._getWrappedValue(node);
     }
 
@@ -721,14 +678,11 @@ export class ConfigFile implements CsfObject {
   }
 
   removeField(path: string[]) {
-    const removeProperty = (properties: t.ObjectProperty[], prop: string) => {
-      const index = properties.findIndex(
-        (p) =>
-          (t.isIdentifier(p.key) && p.key.name === prop) ||
-          (t.isStringLiteral(p.key) && p.key.value === prop)
-      );
-      if (index >= 0) {
-        properties.splice(index, 1);
+    const editor = this._editorSource;
+    const removeProperty = (object: E.ObjectExpression, prop: string) => {
+      const member = object.properties.find((p) => propKey(p) === prop);
+      if (member) {
+        removeFromList(editor, objectList(object), [member]);
       }
     };
     // the structure of this._exports doesn't work for this use case
@@ -736,50 +690,51 @@ export class ConfigFile implements CsfObject {
     if (path.length === 1) {
       let removedRootProperty = false;
       // removing the root export
-      this._ast.program.body.forEach((node) => {
+      for (const node of this._program.body) {
         // named export
-        if (t.isExportNamedDeclaration(node) && t.isVariableDeclaration(node.declaration)) {
+        if (
+          node.type === 'ExportNamedDeclaration' &&
+          node.declaration?.type === 'VariableDeclaration'
+        ) {
           const decl = node.declaration.declarations[0];
-          if (t.isIdentifier(decl.id) && decl.id.name === path[0]) {
-            this._ast.program.body.splice(this._ast.program.body.indexOf(node), 1);
+          if (isIdentifier(decl.id, path[0])) {
+            removeStatement(editor, node);
             removedRootProperty = true;
           }
         }
         // default export
-        if (t.isExportDefaultDeclaration(node)) {
-          const resolved = this._resolveDeclaration(node.declaration as t.Node);
-          if (t.isObjectExpression(resolved)) {
-            const properties = resolved.properties as t.ObjectProperty[];
-            removeProperty(properties, path[0]);
+        if (node.type === 'ExportDefaultDeclaration') {
+          const resolved = this._resolveDeclaration(node.declaration as Node);
+          if (resolved?.type === 'ObjectExpression') {
+            removeProperty(resolved, path[0]);
             removedRootProperty = true;
           }
         }
         // module.exports
         if (
-          t.isExpressionStatement(node) &&
-          t.isAssignmentExpression(node.expression) &&
-          t.isMemberExpression(node.expression.left) &&
-          t.isIdentifier(node.expression.left.object) &&
-          node.expression.left.object.name === 'module' &&
-          t.isIdentifier(node.expression.left.property) &&
-          node.expression.left.property.name === 'exports' &&
-          t.isObjectExpression(node.expression.right)
+          node.type === 'ExpressionStatement' &&
+          node.expression.type === 'AssignmentExpression' &&
+          node.expression.left.type === 'MemberExpression' &&
+          isIdentifier(node.expression.left.object, 'module') &&
+          isIdentifier(node.expression.left.property, 'exports') &&
+          node.expression.right.type === 'ObjectExpression'
         ) {
-          const properties = node.expression.right.properties as t.ObjectProperty[];
-          removeProperty(properties, path[0]);
+          removeProperty(node.expression.right, path[0]);
           removedRootProperty = true;
         }
-      });
+      }
 
       if (removedRootProperty) {
+        this._commit();
         return;
       }
     }
 
-    const properties = this.getFieldProperties(path) as t.ObjectProperty[];
-    if (properties) {
-      const lastPath = path.at(-1) as string;
-      removeProperty(properties, lastPath);
+    const [root, ...rest] = path;
+    const parentNode = _getPath(rest.slice(0, -1), this._exports[root]);
+    if (this._exports[root] && parentNode?.type === 'ObjectExpression') {
+      removeProperty(parentNode, path.at(-1)!);
+      this._commit();
     }
   }
 
@@ -791,12 +746,13 @@ export class ConfigFile implements CsfObject {
     }
   }
 
-  appendNodeToArray(path: string[], node: t.Expression) {
+  appendNodeToArray(path: string[], node: CsfExpression) {
     const current = this.getFieldNode(path);
     if (!current) {
-      this.set(path, t.arrayExpression([node]));
-    } else if (t.isArrayExpression(current)) {
-      current.elements.push(node);
+      this.set(path, parseExpression(`[${printExpression(node)}]`));
+    } else if (current.type === 'ArrayExpression') {
+      appendToList(this._editorSource, arrayList(current), [printExpression(node)], '');
+      this._commit();
     } else {
       throw new Error(`Expected array at '${path.join('.')}', got '${current.type}'`);
     }
@@ -812,19 +768,20 @@ export class ConfigFile implements CsfObject {
     if (!current) {
       return;
     }
-    if (t.isArrayExpression(current)) {
-      const index = current.elements.findIndex((element) => {
-        if (t.isStringLiteral(element)) {
+    if (current.type === 'ArrayExpression') {
+      const element = current.elements.find((element) => {
+        if (isStringLiteral(element)) {
           return element.value === value;
         }
-        if (t.isObjectExpression(element)) {
+        if (element?.type === 'ObjectExpression') {
           const name = this._getPresetValue(element, 'name');
           return name === value;
         }
-        return this._getWrappedValue(element as t.Node) === value;
+        return element ? this._getWrappedValue(element) === value : false;
       });
-      if (index >= 0) {
-        current.elements.splice(index, 1);
+      if (element) {
+        removeFromList(this._editorSource, arrayList(current), [element]);
+        this._commit();
       } else {
         throw new Error(`Could not find '${value}' in array at '${path.join('.')}'`);
       }
@@ -835,58 +792,28 @@ export class ConfigFile implements CsfObject {
 
   _inferQuotes() {
     if (!this._quotes) {
-      // Count the raw quote character of each string literal from the AST. Token offsets
-      // cannot be trusted here: recast reconstructs the parser input with `os.EOL` line
-      // endings, so on Windows the token offsets of an LF-only source point into that CRLF
-      // reconstruction and misalign with `this._code`, which made every source infer as
-      // double-quoted and printed newly generated nodes with the wrong quotes.
       const occurrences = { "'": 0, '"': 0 };
-      const countQuotes = ({ node }: { node: t.Node }) => {
-        const raw = (node as t.StringLiteral).extra?.raw;
+      walk(this._program, (node) => {
+        const raw = isStringLiteral(node) ? node.raw : undefined;
         if (typeof raw === 'string' && (raw[0] === "'" || raw[0] === '"')) {
           occurrences[raw[0] as "'" | '"'] += 1;
         }
-      };
-      traverse(this._ast, {
-        StringLiteral: { enter: countQuotes },
-        DirectiveLiteral: { enter: countQuotes },
       });
       this._quotes = occurrences["'"] > occurrences['"'] ? 'single' : 'double';
     }
     return this._quotes;
   }
 
-  valueToNode(value: any): t.Expression | undefined {
-    const quotes = this._inferQuotes();
-    let valueNode;
-    // we do this rather than types.valueToNode because apparently
-    // babel only preserves quotes if they are parsed from the original code.
-    if (quotes === 'single') {
-      const { code } = generate(t.valueToNode(value), { jsescOption: { quotes } });
-      const program = babelParse(`const __x = ${code}`);
-      traverse(program, {
-        VariableDeclaration: {
-          enter({ node }) {
-            if (
-              node.declarations.length === 1 &&
-              t.isVariableDeclarator(node.declarations[0]) &&
-              t.isIdentifier(node.declarations[0].id) &&
-              node.declarations[0].id.name === '__x'
-            ) {
-              valueNode = node.declarations[0].init;
-            }
-          },
-        },
-      });
-    } else {
-      // double quotes is the default so we can skip all that
-      valueNode = t.valueToNode(value);
-    }
-    return valueNode;
+  get _quote() {
+    return this._inferQuotes() === 'single' ? "'" : '"';
+  }
+
+  valueToNode(value: any): CsfExpression | undefined {
+    return parseExpression(printValue(value, this._quote));
   }
 
-  getBodyDeclarations(): t.Statement[] {
-    return this._ast.program.body;
+  getBodyDeclarations(): Node[] {
+    return this._program.body;
   }
 
   /**
@@ -909,128 +836,35 @@ export class ConfigFile implements CsfObject {
    * manager.changed; // true
    * ```
    */
-  callArguments({
-    importedName,
-    methodName,
-    moduleNames,
-  }: CallArgumentsOptions): readonly CsfObject[] {
-    const modules = new Set(moduleNames);
-    const imports = new Map<string, Set<t.Node>>();
-
-    traverse(this._ast, {
-      ImportDeclaration(path) {
-        if (!modules.has(path.node.source.value) || path.node.importKind === 'type') {
-          return;
-        }
-
-        for (const specifier of path.node.specifiers) {
-          if (
-            t.isImportSpecifier(specifier) &&
-            specifier.importKind !== 'type' &&
-            t.isIdentifier(specifier.imported, { name: importedName })
-          ) {
-            const bindingNodes = imports.get(specifier.local.name) ?? new Set<t.Node>();
-            bindingNodes.add(specifier);
-            imports.set(specifier.local.name, bindingNodes);
-          }
-        }
-      },
-      VariableDeclarator(path) {
-        const { id, init } = path.node;
-        if (
-          !t.isObjectPattern(id) ||
-          !t.isCallExpression(init) ||
-          !t.isIdentifier(init.callee, { name: 'require' }) ||
-          path.scope.getBinding('require') !== undefined ||
-          init.arguments.length !== 1 ||
-          !t.isStringLiteral(init.arguments[0]) ||
-          !modules.has(init.arguments[0].value)
-        ) {
-          return;
-        }
-
-        for (const property of id.properties) {
-          if (
-            t.isObjectProperty(property) &&
-            !property.computed &&
-            ((t.isIdentifier(property.key) && property.key.name === importedName) ||
-              (t.isStringLiteral(property.key) && property.key.value === importedName)) &&
-            t.isIdentifier(property.value)
-          ) {
-            const bindingNodes = imports.get(property.value.name) ?? new Set<t.Node>();
-            bindingNodes.add(path.node);
-            imports.set(property.value.name, bindingNodes);
-          }
-        }
-      },
-    });
-
-    const objects: CsfObject[] = [];
+  callArguments(options: CallArgumentsOptions): readonly CsfObject[] {
     const report = (diagnostic: CsfMutationDiagnostic) =>
       this._mutationDiagnostics.push(diagnostic);
-    const markChanged = () => {
-      this._changed = true;
-    };
-
-    traverse(this._ast, {
-      CallExpression(path) {
-        const { callee } = path.node;
-        if (
-          !t.isMemberExpression(callee) ||
-          !t.isIdentifier(callee.object) ||
-          !(
-            (t.isIdentifier(callee.property) &&
-              !callee.computed &&
-              callee.property.name === methodName) ||
-            (t.isStringLiteral(callee.property) && callee.property.value === methodName)
-          )
-        ) {
-          return;
-        }
-
-        const bindingNode = path.scope.getBinding(callee.object.name)?.path.node;
-        if (bindingNode && imports.get(callee.object.name)?.has(bindingNode)) {
-          const argument = path.node.arguments[0];
-          if (!argument) {
-            return;
-          }
-          const value = unwrapExpression(argument);
-          const target = { kind: 'call-argument', importedName, methodName } as const;
-          const binding = path.scope.getBinding(callee.object.name);
-          if (!binding?.constant || !t.isObjectExpression(value)) {
-            report({
-              code: !binding?.constant ? 'ambiguous-binding' : 'unsupported-initializer',
-              target,
-              path: [],
-              message: !binding?.constant
-                ? 'the imported binding is reassigned'
-                : 'the call argument is not an object literal',
-              ...(argument.loc ? { loc: argument.loc } : {}),
-            });
-            return;
-          }
-          objects.push(
-            createCsfObject(
-              target,
-              {
-                node: value,
-                scope: path.scope,
-                buildCodeFrameError: path.buildCodeFrameError.bind(path),
-              },
-              [],
-              report,
-              markChanged
-            )
-          );
-        }
-      },
+    const target = {
+      kind: 'call-argument',
+      importedName: options.importedName,
+      methodName: options.methodName,
+    } as const;
+    const calls = findCallArguments(this, options, report);
+    return calls.map((_, index) => {
+      const host: CsfObjectHost = {
+        editor: this._editorSource,
+        root: () => {
+          // Edits re-parse the file, so the argument is found again by its position among calls.
+          const node = findCallArguments(this, options, () => {})[index];
+          return node && literalRoot(this._editorSource, node);
+        },
+        commit: () => this._commit(),
+      };
+      return createCsfObject(target, host, [], report, () => {
+        this._changed = true;
+      });
     });
-
-    return objects;
   }
 
-  setBodyDeclaration(declaration: t.Declaration) {
-    this._ast.program.body.push(declaration);
+  /** Appends a statement, given as source, to the end of the file. */
+  setBodyDeclaration(declaration: string) {
+    appendStatement(this._editorSource, declaration);
+    this._commit();
   }
 
   /**
@@ -1051,109 +885,58 @@ export class ConfigFile implements CsfObject {
    * @param fromImport - The module to import from
    */
   setRequireImport(importSpecifier: string[] | string, fromImport: string) {
-    const requireDeclaration = this._ast.program.body.find((node) => {
-      const hasDeclaration =
-        t.isVariableDeclaration(node) &&
-        node.declarations.length === 1 &&
-        t.isVariableDeclarator(node.declarations[0]) &&
-        t.isCallExpression(node.declarations[0].init) &&
-        t.isIdentifier(node.declarations[0].init.callee) &&
-        node.declarations[0].init.callee.name === 'require' &&
-        t.isStringLiteral(node.declarations[0].init.arguments[0]) &&
-        (node.declarations[0].init.arguments[0].value === fromImport ||
-          node.declarations[0].init.arguments[0].value === fromImport.split('node:')[1]);
-      if (hasDeclaration) {
-        // @ts-expect-error the node declaration was found above already
-        fromImport = node.declarations[0].init.arguments[0].value;
-      }
-
-      return hasDeclaration;
-    }) as t.VariableDeclaration | undefined;
-
-    /**
-     * Returns true, when the given import declaration has the given import specifier
-     *
-     * @example
-     *
-     * ```ts
-     * // const { foo } = require('bar');
-     * hasImportSpecifier(declaration, 'foo');
-     * ```
-     */
-    const hasRequireSpecifier = (name: string) =>
-      t.isObjectPattern(requireDeclaration?.declarations[0].id) &&
-      requireDeclaration?.declarations[0].id.properties.find(
-        (specifier) =>
-          t.isObjectProperty(specifier) &&
-          t.isIdentifier(specifier.key) &&
-          specifier.key.name === name
-      );
-
-    /**
-     * Returns true, when the given import declaration has the given default import specifier
-     *
-     * @example
-     *
-     * ```ts
-     * // import foo from 'bar';
-     * hasImportSpecifier(declaration, 'foo');
-     * ```
-     */
-    const hasDefaultRequireSpecifier = (declaration: t.VariableDeclaration, name: string) =>
-      declaration.declarations.length === 1 &&
-      t.isVariableDeclarator(declaration.declarations[0]) &&
-      t.isIdentifier(declaration.declarations[0].id) &&
-      declaration.declarations[0].id.name === name;
+    const requireDeclaration = this._findRequire(fromImport);
+    if (requireDeclaration) {
+      fromImport = (
+        (requireDeclaration.declarations[0].init as E.CallExpression)
+          .arguments[0] as E.StringLiteral
+      ).value;
+    }
+    const source = printString(fromImport, this._quote);
+    const editor = this._editorSource;
 
     // if the import specifier is a string, we're dealing with default imports
     if (typeof importSpecifier === 'string') {
-      // If the import declaration with the given source exists
-      const addDefaultRequireSpecifier = () => {
-        prependStatement(
-          this._ast.program,
-          t.variableDeclaration('const', [
-            t.variableDeclarator(
-              t.identifier(importSpecifier),
-              t.callExpression(t.identifier('require'), [t.stringLiteral(fromImport)])
-            ),
-          ])
-        );
-      };
-
-      if (requireDeclaration) {
-        if (!hasDefaultRequireSpecifier(requireDeclaration, importSpecifier)) {
-          // If the import declaration hasn't the specified default identifier, we add a new variable declaration
-          addDefaultRequireSpecifier();
-        }
-        // If the import declaration with the given source doesn't exist
-      } else {
-        // Add the import declaration to the top of the file
-        addDefaultRequireSpecifier();
+      const declarator = requireDeclaration?.declarations[0];
+      if (!declarator || !isIdentifier(declarator.id, importSpecifier)) {
+        // If the import declaration hasn't the specified default identifier, we add a new variable declaration
+        prependStatement(editor, `const ${importSpecifier} = require(${source});`);
       }
       // if the import specifier is an array, we're dealing with named imports
     } else if (requireDeclaration) {
-      importSpecifier.forEach((specifier) => {
-        if (!hasRequireSpecifier(specifier)) {
-          (requireDeclaration.declarations[0].id as t.ObjectPattern).properties.push(
-            t.objectProperty(t.identifier(specifier), t.identifier(specifier), undefined, true)
-          );
+      const pattern = requireDeclaration.declarations[0].id;
+      if (pattern.type === 'ObjectPattern') {
+        const missing = importSpecifier.filter(
+          (specifier) =>
+            !pattern.properties.some(
+              (property) => property.type === 'Property' && isIdentifier(property.key, specifier)
+            )
+        );
+        if (missing.length > 0) {
+          appendToList(editor, objectList(pattern), missing);
         }
-      });
+      }
     } else {
-      prependStatement(
-        this._ast.program,
-        t.variableDeclaration('const', [
-          t.variableDeclarator(
-            t.objectPattern(
-              importSpecifier.map((specifier) =>
-                t.objectProperty(t.identifier(specifier), t.identifier(specifier), undefined, true)
-              )
-            ),
-            t.callExpression(t.identifier('require'), [t.stringLiteral(fromImport)])
-          ),
-        ])
-      );
+      prependStatement(editor, `const { ${importSpecifier.join(', ')} } = require(${source});`);
     }
+    this._commit();
+  }
+
+  _findRequire(fromImport: string) {
+    return this._program.body.find(
+      (node): node is E.VariableDeclaration =>
+        node.type === 'VariableDeclaration' &&
+        node.declarations.length === 1 &&
+        isRequireOf(node.declarations[0].init, fromImport)
+    );
+  }
+
+  _findImport(fromImport: string) {
+    return this._program.body.find(
+      (node): node is E.ImportDeclaration =>
+        node.type === 'ImportDeclaration' &&
+        (node.source.value === fromImport || node.source.value === fromImport.split('node:')[1])
+    );
   }
 
   /**
@@ -1182,191 +965,121 @@ export class ConfigFile implements CsfObject {
    * @param fromImport - The module to import from
    */
   setImport(importSpecifier: string[] | string | { namespace: string } | null, fromImport: string) {
-    const importDeclaration = this._ast.program.body.find((node) => {
-      const hasDeclaration =
-        t.isImportDeclaration(node) &&
-        (node.source.value === fromImport || node.source.value === fromImport.split('node:')[1]);
-
-      if (hasDeclaration) {
-        fromImport = node.source.value;
-      }
-
-      return hasDeclaration;
-    }) as t.ImportDeclaration | undefined;
-
-    const getNewImportSpecifier = (specifier: string) =>
-      t.importSpecifier(t.identifier(specifier), t.identifier(specifier));
-    /**
-     * Returns true, when the given import declaration has the given import specifier
-     *
-     * @example
-     *
-     * ```ts
-     * // import { foo } from 'bar';
-     * hasImportSpecifier(declaration, 'foo');
-     * ```
-     */
-    const hasImportSpecifier = (declaration: t.ImportDeclaration, name: string) =>
-      declaration.specifiers.find(
-        (specifier) =>
-          t.isImportSpecifier(specifier) &&
-          t.isIdentifier(specifier.imported) &&
-          specifier.imported.name === name
-      );
-
-    /**
-     * Returns true, when the given import declaration has the given default import specifier
-     *
-     * @example
-     *
-     * ```ts
-     * // import foo from 'bar';
-     * hasNamespaceImportSpecifier(declaration, 'foo');
-     * ```
-     */
-    const hasNamespaceImportSpecifier = (declaration: t.ImportDeclaration, name: string) =>
-      declaration.specifiers.find(
-        (specifier) =>
-          t.isImportNamespaceSpecifier(specifier) &&
-          t.isIdentifier(specifier.local) &&
-          specifier.local.name === name
-      );
-
-    /** Returns true when the given import declaration has a default import specifier */
-    const hasDefaultImportSpecifier = (declaration: t.ImportDeclaration, name: string) =>
-      declaration.specifiers.find(
+    const importDeclaration = this._findImport(fromImport);
+    if (importDeclaration) {
+      fromImport = importDeclaration.source.value;
+    }
+    const editor = this._editorSource;
+    const source = printString(fromImport, this._quote);
+    const has = (type: string, name: string) =>
+      importDeclaration?.specifiers.some(
         (specifier) =>
-          t.isImportDefaultSpecifier(specifier) &&
-          t.isIdentifier(specifier.local) &&
-          specifier.local.name === name
+          specifier.type === type &&
+          (type === 'ImportSpecifier'
+            ? isIdentifier((specifier as E.ImportSpecifier).imported, name)
+            : specifier.local.name === name)
       );
 
     // Handle side-effect imports (e.g., import 'foo')
     if (importSpecifier === null) {
       if (!importDeclaration) {
-        prependStatement(this._ast.program, t.importDeclaration([], t.stringLiteral(fromImport)));
+        prependStatement(editor, `import ${source};`);
       }
       // Handle default imports e.g. import foo from 'bar'
     } else if (typeof importSpecifier === 'string') {
-      if (importDeclaration) {
-        if (!hasDefaultImportSpecifier(importDeclaration, importSpecifier)) {
-          importDeclaration.specifiers.push(
-            t.importDefaultSpecifier(t.identifier(importSpecifier))
-          );
-        }
-      } else {
-        prependStatement(
-          this._ast.program,
-          t.importDeclaration(
-            [t.importDefaultSpecifier(t.identifier(importSpecifier))],
-            t.stringLiteral(fromImport)
-          )
-        );
+      if (!importDeclaration) {
+        prependStatement(editor, `import ${importSpecifier} from ${source};`);
+      } else if (!has('ImportDefaultSpecifier', importSpecifier)) {
+        this._addSpecifiers(importDeclaration, { defaultName: importSpecifier });
       }
       // Handle named imports e.g. import { foo } from 'bar'
     } else if (Array.isArray(importSpecifier)) {
-      if (importDeclaration) {
-        importSpecifier.forEach((specifier) => {
-          if (!hasImportSpecifier(importDeclaration, specifier)) {
-            importDeclaration.specifiers.push(getNewImportSpecifier(specifier));
-          }
-        });
+      if (!importDeclaration) {
+        prependStatement(editor, `import { ${importSpecifier.join(', ')} } from ${source};`);
       } else {
-        prependStatement(
-          this._ast.program,
-          t.importDeclaration(
-            importSpecifier.map(getNewImportSpecifier),
-            t.stringLiteral(fromImport)
-          )
-        );
+        const missing = importSpecifier.filter((name) => !has('ImportSpecifier', name));
+        if (missing.length > 0) {
+          this._addSpecifiers(importDeclaration, { named: missing });
+        }
       }
       // Handle namespace imports e.g. import * as foo from 'bar'
     } else if (importSpecifier.namespace) {
-      if (importDeclaration) {
-        if (!hasNamespaceImportSpecifier(importDeclaration, importSpecifier.namespace)) {
-          importDeclaration.specifiers.push(
-            t.importNamespaceSpecifier(t.identifier(importSpecifier.namespace))
-          );
-        }
-      } else {
-        prependStatement(
-          this._ast.program,
-          t.importDeclaration(
-            [t.importNamespaceSpecifier(t.identifier(importSpecifier.namespace))],
-            t.stringLiteral(fromImport)
-          )
-        );
+      if (!importDeclaration) {
+        prependStatement(editor, `import * as ${importSpecifier.namespace} from ${source};`);
+      } else if (!has('ImportNamespaceSpecifier', importSpecifier.namespace)) {
+        this._addSpecifiers(importDeclaration, { namespace: importSpecifier.namespace });
       }
     }
+    this._commit();
+  }
+
+  _addSpecifiers(
+    declaration: E.ImportDeclaration,
+    added: { defaultName?: string; named?: string[]; namespace?: string }
+  ) {
+    const editor = this._editorSource;
+    const named = declaration.specifiers.filter(
+      (specifier): specifier is E.ImportSpecifier => specifier.type === 'ImportSpecifier'
+    );
+    if (added.named && named.length > 0) {
+      appendToList(editor, specifierList(editor, declaration), added.named);
+      return;
+    }
+    const defaultSpecifier = declaration.specifiers.find(
+      (specifier) => specifier.type === 'ImportDefaultSpecifier'
+    );
+    const namespace = declaration.specifiers.find(
+      (specifier) => specifier.type === 'ImportNamespaceSpecifier'
+    );
+    const parts = [
+      added.defaultName ?? (defaultSpecifier && editor.source(defaultSpecifier)),
+      added.namespace ? `* as ${added.namespace}` : namespace && editor.source(namespace),
+      named.length > 0
+        ? `{ ${named.map((specifier) => editor.source(specifier)).join(', ')} }`
+        : added.named && `{ ${added.named.join(', ')} }`,
+    ].filter(Boolean);
+    const kind = declaration.importKind === 'type' ? 'import type' : 'import';
+    editor.edits.overwrite(
+      declaration.start,
+      declaration.source.start,
+      `${kind} ${parts.join(', ')} from `
+    );
   }
 
   _removeRequireImport(
     importSpecifier: string[] | string | { namespace: string } | null,
     fromImport: string
   ) {
-    // Find require declaration first.
-    const requireDeclarationIndex = this._ast.program.body.findIndex((node) => {
-      const hasDeclaration =
-        t.isVariableDeclaration(node) &&
-        node.declarations.length === 1 &&
-        t.isVariableDeclarator(node.declarations[0]) &&
-        t.isCallExpression(node.declarations[0].init) &&
-        t.isIdentifier(node.declarations[0].init.callee) &&
-        node.declarations[0].init.callee.name === 'require' &&
-        t.isStringLiteral(node.declarations[0].init.arguments[0]) &&
-        (node.declarations[0].init.arguments[0].value === fromImport ||
-          node.declarations[0].init.arguments[0].value === fromImport.split('node:')[1]);
-
-      return hasDeclaration;
-    });
-
-    if (requireDeclarationIndex === -1) {
+    const requireDeclaration = this._findRequire(fromImport);
+    // require() has no side-effect only or namespace forms, so those are skipped.
+    if (!requireDeclaration || importSpecifier === null) {
       return;
     }
-
-    const requireDeclaration = this._ast.program.body[
-      requireDeclarationIndex
-    ] as t.VariableDeclaration;
     const declarator = requireDeclaration.declarations[0];
-
-    // Handle side-effect requires - require() statements don't have side-effect only versions like imports
-    // so we skip this case for require statements
-    if (importSpecifier === null) {
-      return;
-    }
+    const editor = this._editorSource;
 
     // Handle default requires e.g. const foo = require('bar')
     if (typeof importSpecifier === 'string') {
       // For default requires, if the identifier matches, remove the entire declaration
-      if (t.isIdentifier(declarator.id) && declarator.id.name === importSpecifier) {
-        this._ast.program.body.splice(requireDeclarationIndex, 1);
+      if (isIdentifier(declarator.id, importSpecifier)) {
+        removeStatement(editor, requireDeclaration);
       }
       return;
     }
 
-    // require() doesn't have namespace imports so we skip this.
-    // We only allow it in our param type to keep things consistent for removeImport.
-    if (typeof importSpecifier === 'object' && 'namespace' in importSpecifier) {
-      return;
-    }
-
     // Handle named requires e.g. const { foo, bar } = require('baz')
-    if (Array.isArray(importSpecifier) && t.isObjectPattern(declarator.id)) {
-      const objectPattern = declarator.id as t.ObjectPattern;
-      importSpecifier.forEach((specifier) => {
-        const index = objectPattern.properties.findIndex(
-          (prop) =>
-            t.isObjectProperty(prop) && t.isIdentifier(prop.key) && prop.key.name === specifier
-        );
-
-        if (index !== -1) {
-          objectPattern.properties.splice(index, 1);
-        }
-      });
-
+    if (Array.isArray(importSpecifier) && declarator.id.type === 'ObjectPattern') {
+      const pattern = declarator.id;
+      const removed = pattern.properties.filter(
+        (property) =>
+          property.type === 'Property' &&
+          importSpecifier.some((specifier) => isIdentifier(property.key, specifier))
+      );
       // If no properties left in the destructuring, remove the entire declaration
-      if (objectPattern.properties.length === 0) {
-        this._ast.program.body.splice(requireDeclarationIndex, 1);
+      if (removed.length === pattern.properties.length) {
+        removeStatement(editor, requireDeclaration);
+      } else if (removed.length > 0) {
+        removeFromList(editor, objectList(pattern), removed);
       }
     }
   }
@@ -1375,75 +1088,64 @@ export class ConfigFile implements CsfObject {
     importSpecifier: string[] | string | { namespace: string } | null,
     fromImport: string
   ) {
-    // Find import declaration first.
-    const importDeclarationIndex = this._ast.program.body.findIndex(
-      (node) =>
-        t.isImportDeclaration(node) &&
-        (node.source.value === fromImport || node.source.value === fromImport.split('node:')[1])
-    );
-    if (importDeclarationIndex === -1) {
+    const importDeclaration = this._findImport(fromImport);
+    if (!importDeclaration) {
       return;
     }
-    const importDeclaration = this._ast.program.body[importDeclarationIndex] as t.ImportDeclaration;
+    const editor = this._editorSource;
 
     // Remove side-effect imports (e.g., import 'foo') if exact match, else do nothing.
     if (importSpecifier === null) {
       if (importDeclaration.specifiers.length === 0) {
-        this._ast.program.body.splice(importDeclarationIndex, 1);
+        removeStatement(editor, importDeclaration);
       }
-
       return;
     }
 
-    // From now on, remove requested specifiers from the import declaration.
-    // Handle namespace imports e.g. import * as foo from 'bar'
-    if (typeof importSpecifier === 'object' && 'namespace' in importSpecifier) {
-      const index = importDeclaration.specifiers.findIndex(
-        (specifier) =>
-          t.isImportNamespaceSpecifier(specifier) &&
-          t.isIdentifier(specifier.local) &&
+    const removed = importDeclaration.specifiers.filter((specifier) => {
+      // Handle namespace imports e.g. import * as foo from 'bar'
+      if (typeof importSpecifier === 'object' && 'namespace' in importSpecifier) {
+        return (
+          specifier.type === 'ImportNamespaceSpecifier' &&
           specifier.local.name === importSpecifier.namespace
-      );
-
-      if (index !== -1) {
-        importDeclaration.specifiers.splice(index, 1);
-      }
-    }
-
-    // Handle default imports e.g. import foo from 'bar'
-    if (typeof importSpecifier === 'string') {
-      const index = importDeclaration.specifiers.findIndex(
-        (specifier) =>
-          t.isImportDefaultSpecifier(specifier) &&
-          t.isIdentifier(specifier.local) &&
-          specifier.local.name === importSpecifier
-      );
-
-      if (index !== -1) {
-        importDeclaration.specifiers.splice(index, 1);
+        );
       }
-    }
-
-    // Handle named imports e.g. import { foo } from 'bar'
-    if (Array.isArray(importSpecifier)) {
-      importSpecifier.forEach((specifier) => {
-        const index = importDeclaration.specifiers.findIndex(
-          (current) =>
-            t.isImportSpecifier(current) &&
-            t.isIdentifier(current.imported) &&
-            current.imported.name === specifier
+      // Handle default imports e.g. import foo from 'bar'
+      if (typeof importSpecifier === 'string') {
+        return (
+          specifier.type === 'ImportDefaultSpecifier' && specifier.local.name === importSpecifier
         );
-
-        if (index !== -1) {
-          importDeclaration.specifiers.splice(index, 1);
-        }
-      });
+      }
+      // Handle named imports e.g. import { foo } from 'bar'
+      return (
+        specifier.type === 'ImportSpecifier' &&
+        importSpecifier.some((name) => isIdentifier(specifier.imported, name))
+      );
+    });
+    if (removed.length === 0) {
+      return;
     }
 
     // If the import declaration has no specifiers left, remove it.
-    if (importDeclaration.specifiers.length === 0) {
-      this._ast.program.body.splice(importDeclarationIndex, 1);
+    if (removed.length === importDeclaration.specifiers.length) {
+      removeStatement(editor, importDeclaration);
+      return;
     }
+    const kept = importDeclaration.specifiers.filter((specifier) => !removed.includes(specifier));
+    const defaultSpecifier = kept.find((specifier) => specifier.type === 'ImportDefaultSpecifier');
+    const namespace = kept.find((specifier) => specifier.type === 'ImportNamespaceSpecifier');
+    const named = kept.filter((specifier) => specifier.type === 'ImportSpecifier');
+    const parts = [
+      defaultSpecifier && editor.source(defaultSpecifier),
+      namespace && editor.source(namespace),
+      named.length > 0 && `{ ${named.map((specifier) => editor.source(specifier)).join(', ')} }`,
+    ].filter(Boolean);
+    const kind = importDeclaration.importKind === 'type' ? 'import type' : 'import';
+    editor.edits.overwrite(
+      importDeclaration.start,
+      importDeclaration.source.start,
+      `${kind} ${parts.join(', ')} from `
+    );
   }
 
   /**
@@ -1476,26 +1178,118 @@ export class ConfigFile implements CsfObject {
     fromImport: string
   ) {
     this._removeRequireImport(importSpecifier, fromImport);
+    this._commit();
     this._removeImport(importSpecifier, fromImport);
+    this._commit();
   }
 }
 
-export const loadConfig = (code: string, fileName?: string) => {
-  const ast = babelParse(code);
-  return new ConfigFile(ast, code, fileName);
+// First object arguments of `importedName.methodName(...)` calls, in source order.
+const findCallArguments = (
+  config: ConfigFile,
+  { importedName, methodName, moduleNames }: CallArgumentsOptions,
+  report: (diagnostic: CsfMutationDiagnostic) => void
+): E.ObjectExpression[] => {
+  const editor = config._editorSource;
+  const modules = new Set(moduleNames);
+  const imports = new Map<string, Set<Node>>();
+  const addImport = (name: string, node: Node) =>
+    imports.set(name, (imports.get(name) ?? new Set()).add(node));
+
+  walk(editor.program, (node) => {
+    if (node.type === 'ImportDeclaration') {
+      if (!modules.has(node.source.value) || node.importKind === 'type') {
+        return;
+      }
+      for (const specifier of node.specifiers) {
+        if (
+          specifier.type === 'ImportSpecifier' &&
+          specifier.importKind !== 'type' &&
+          isIdentifier(specifier.imported, importedName)
+        ) {
+          addImport(specifier.local.name, specifier);
+        }
+      }
+    } else if (node.type === 'VariableDeclarator') {
+      const { id, init } = node;
+      if (
+        id.type !== 'ObjectPattern' ||
+        init?.type !== 'CallExpression' ||
+        !isIdentifier(init.callee, 'require') ||
+        editor.scopes.bindingOf(init.callee) !== undefined ||
+        init.arguments.length !== 1 ||
+        !isStringLiteral(init.arguments[0]) ||
+        !modules.has(init.arguments[0].value)
+      ) {
+        return;
+      }
+      for (const property of id.properties) {
+        if (
+          property.type === 'Property' &&
+          !property.computed &&
+          (isIdentifier(property.key, importedName) ||
+            (isStringLiteral(property.key) && property.key.value === importedName)) &&
+          property.value.type === 'Identifier'
+        ) {
+          addImport(property.value.name, node);
+        }
+      }
+    }
+  });
+
+  const objects: E.ObjectExpression[] = [];
+  walk(editor.program, (node) => {
+    if (node.type !== 'CallExpression') {
+      return;
+    }
+    const { callee } = node;
+    if (
+      callee.type !== 'MemberExpression' ||
+      callee.object.type !== 'Identifier' ||
+      !(
+        (isIdentifier(callee.property, methodName) && !callee.computed) ||
+        (isStringLiteral(callee.property) && callee.property.value === methodName)
+      )
+    ) {
+      return;
+    }
+    const binding = editor.scopes.bindingOf(callee.object);
+    if (!binding || !imports.get(callee.object.name)?.has(binding.node)) {
+      return;
+    }
+    const argument = node.arguments[0];
+    if (!argument) {
+      return;
+    }
+    const value = argument.type === 'SpreadElement' ? argument : unwrapExpression(argument);
+    if (!binding.constant || value.type !== 'ObjectExpression') {
+      report({
+        code: !binding.constant ? 'ambiguous-binding' : 'unsupported-initializer',
+        target: { kind: 'call-argument', importedName, methodName },
+        path: [],
+        message: !binding.constant
+          ? 'the imported binding is reassigned'
+          : 'the call argument is not an object literal',
+        loc: locationOf(editor.code, argument.start, argument.end),
+      });
+      return;
+    }
+    objects.push(value);
+  });
+  return objects;
 };
 
+export const loadConfig = (code: string, fileName?: string) => new ConfigFile(code, fileName);
+
 export const formatConfig = (config: ConfigFile): string => {
   return printConfig(config).code;
 };
 
-export const printConfig = (config: ConfigFile, options: RecastOptions = {}): PrintResultType => {
-  return recast.print(config._ast, {
-    quote: config._inferQuotes(),
-    // Recast defaults this to `os.EOL`, which would carriage-return printed files on Windows.
-    lineTerminator: '\n',
-    ...options,
-  });
+/** Print the config with its edits; untouched code is preserved byte for byte. */
+export const printConfig = (config: ConfigFile): PrintResultType => {
+  // Written files always use LF line endings, whatever the input used.
+  const code = config._editorSource.toString().replace(/\r\n?/g, '\n');
+  return { code, toString: () => code };
 };
 
 export const readConfig = async (fileName: string) => {
@@ -1515,18 +1309,13 @@ export const writeConfig = async (config: ConfigFile, fileName?: string) => {
 };
 
 export const isCsfFactoryPreview = (previewConfig: ConfigFile) => {
-  const program = previewConfig._ast.program;
-  return !!program.body.find((node) => {
-    return (
-      t.isImportDeclaration(node) &&
+  return previewConfig._program.body.some(
+    (node) =>
+      node.type === 'ImportDeclaration' &&
       node.source.value.includes('storybook') &&
-      node.specifiers.some((specifier) => {
-        return (
-          t.isImportSpecifier(specifier) &&
-          t.isIdentifier(specifier.imported) &&
-          specifier.imported.name === 'definePreview'
-        );
-      })
-    );
-  });
+      node.specifiers.some(
+        (specifier) =>
+          specifier.type === 'ImportSpecifier' && isIdentifier(specifier.imported, 'definePreview')
+      )
+  );
 };
diff --git a/code/core/src/csf-tools/ConfigObject.test.ts b/code/core/src/csf-tools/ConfigObject.test.ts
index e5a8c7d153ad..cefcd5ed253e 100644
--- a/code/core/src/csf-tools/ConfigObject.test.ts
+++ b/code/core/src/csf-tools/ConfigObject.test.ts
@@ -1,8 +1,7 @@
 import { describe, expect, it } from 'vitest';
 
-import { types as t } from 'storybook/internal/babel';
-
 import { loadConfig, printConfig } from './ConfigFile.ts';
+import { parseExpression, printExpression } from './CsfObject.ts';
 
 const configurations = [
   `export default { parameters: { a11y: { element: '#root' } } };`,
@@ -160,11 +159,11 @@ describe('ConfigFile mutations', () => {
       changed: true,
     });
     expect(object.get(['parameters'])).toBeUndefined();
-    expect(object.transform(['globals', 'a11y'], () => t.stringLiteral('#app'))).toEqual({
+    expect(object.transform(['globals', 'a11y'], () => parseExpression("'#app'"))).toEqual({
       ok: true,
       changed: true,
     });
-    expect(object.set(['tags'], t.arrayExpression([t.stringLiteral('autodocs')]))).toEqual({
+    expect(object.set(['tags'], parseExpression("['autodocs']"))).toEqual({
       ok: true,
       changed: true,
     });
@@ -240,7 +239,7 @@ describe('ConfigFile mutations', () => {
   ])('does not expose unsafe config bindings in %s', (source) => {
     const config = loadConfig(source).parse();
 
-    expect(config.set(['parameters', 'a11y', 'context'], t.stringLiteral('#app'))).toMatchObject({
+    expect(config.set(['parameters', 'a11y', 'context'], parseExpression("'#app'"))).toMatchObject({
       ok: false,
       changed: false,
     });
@@ -258,16 +257,11 @@ describe('ConfigFile mutations', () => {
 
     expect(
       config.transform(['beforeEach'], (value) => {
-        if (!t.isFunctionExpression(value)) {
+        if (value.type !== 'FunctionExpression') {
           throw new Error('Expected a function expression');
         }
-        return {
-          ...value,
-          body: t.blockStatement([
-            ...value.body.body,
-            t.expressionStatement(t.callExpression(t.identifier('spy'), [])),
-          ]),
-        };
+        const source = printExpression(value);
+        return parseExpression(`${source.slice(0, source.lastIndexOf('}'))} spy(); }`);
       })
     ).toEqual({ ok: true, changed: true });
 
@@ -285,14 +279,7 @@ describe('ConfigFile mutations', () => {
 
   it('preserves the local name when replacing an exported function', () => {
     const config = loadConfig('export function beforeEach() {}').parse();
-    config.set(
-      ['beforeEach'],
-      t.functionExpression(
-        t.identifier('replacement'),
-        [],
-        t.blockStatement([t.returnStatement(t.identifier('replacement'))])
-      )
-    );
+    config.set(['beforeEach'], parseExpression('function replacement() { return replacement; }'));
 
     const output = printConfig(config).code;
     expect(output).toContain('export const beforeEach = function replacement()');
@@ -305,10 +292,10 @@ describe('ConfigFile mutations', () => {
 
   it('replaces a named function with a value and keeps later edits in sync', () => {
     const config = loadConfig('export function beforeEach() {}').parse();
-    config.set(['beforeEach'], t.booleanLiteral(false));
+    config.set(['beforeEach'], parseExpression('false'));
     config.rename(['beforeEach'], 'disabled');
     expect(loadConfig(printConfig(config).code).parse().get(['disabled'])).toMatchObject({
-      type: 'BooleanLiteral',
+      type: 'Literal',
       value: false,
     });
     expect(config.get(['beforeEach'])).toBeUndefined();
@@ -320,7 +307,7 @@ describe('ConfigFile mutations', () => {
     'const a11y = {}; export const parameters = { a11y };',
   ])('edits nested local objects in %s', (source) => {
     const config = loadConfig(source).parse();
-    config.set(['parameters', 'a11y', 'test'], t.stringLiteral('todo'));
+    config.set(['parameters', 'a11y', 'test'], parseExpression("'todo'"));
     const output = loadConfig(printConfig(config).code).parse();
     expect(output.get(['parameters', 'a11y', 'test'])).toMatchObject({ value: 'todo' });
     config.move(['parameters', 'a11y', 'test'], ['initialGlobals', 'a11y']);
@@ -336,7 +323,7 @@ describe('ConfigFile mutations', () => {
     'export default { get parameters() { return {}; } };',
   ])('leaves unsafe nested objects unchanged in %s', (source) => {
     const config = loadConfig(source).parse();
-    expect(config.set(['parameters', 'a11y', 'test'], t.stringLiteral('todo'))).toMatchObject({
+    expect(config.set(['parameters', 'a11y', 'test'], parseExpression("'todo'"))).toMatchObject({
       ok: false,
     });
     expect(printConfig(config).code).toBe(source);
@@ -372,8 +359,8 @@ describe('ConfigFile mutations', () => {
     const config = loadConfig('').parse();
     const object = config;
 
-    object.set(['framework'], t.stringLiteral('@storybook/react-vite'));
-    object.set(['parameters', 'a11y', 'context'], t.stringLiteral('#app'));
+    object.set(['framework'], parseExpression("'@storybook/react-vite'"));
+    object.set(['parameters', 'a11y', 'context'], parseExpression("'#app'"));
 
     const output = loadConfig(printConfig(config).code).parse();
     expect(output.getValue(['framework'])).toBe('@storybook/react-vite');
@@ -387,7 +374,7 @@ describe('ConfigFile mutations', () => {
       const object = config;
 
       expect(object.rename(['original'], name)).toEqual({ ok: true, changed: true });
-      expect(object.set([name], t.stringLiteral('updated'))).toEqual({ ok: true, changed: true });
+      expect(object.set([name], parseExpression("'updated'"))).toEqual({ ok: true, changed: true });
 
       const output = printConfig(config).code;
       expect(output).toContain(`const local = 'keep'`);
diff --git a/code/core/src/csf-tools/ConfigObject.ts b/code/core/src/csf-tools/ConfigObject.ts
index 278b8870f1fb..ce661e892a60 100644
--- a/code/core/src/csf-tools/ConfigObject.ts
+++ b/code/core/src/csf-tools/ConfigObject.ts
@@ -1,416 +1,506 @@
-import { type NodePath, traverse, types as t } from 'storybook/internal/babel';
-
 import type { ConfigFile } from './ConfigFile.ts';
-import { type CsfMutationDiagnostic, type CsfObject, createCsfObject } from './CsfObject.ts';
-import { pathForNode } from './story-shape/index.ts';
+import {
+  type CsfMutationDiagnostic,
+  type CsfObject,
+  type CsfObjectHost,
+  type MemberInsert,
+  type ObjectRoot,
+  createCsfObject,
+  literalRoot,
+  valueSource,
+} from './CsfObject.ts';
+import {
+  type E,
+  type Node,
+  type Property,
+  isIdentifier,
+  isStringLiteral,
+  locationOf,
+  staticKey,
+  walk,
+} from './estree/ast.ts';
+import {
+  type List,
+  type SourceEditor,
+  appendStatement,
+  printKey,
+  printString,
+  removeFromList,
+  removeStatement,
+} from './estree/editor.ts';
+import { generateUid } from './estree/scope.ts';
 
-type NamedExport = {
-  declaration: NodePath<t.VariableDeclarator | t.FunctionDeclaration>;
-  specifier?: NodePath<t.ExportSpecifier>;
-};
+type Span = { start: number; end: number };
 
-const isConfigFactory = (callee: NodePath): boolean => {
-  if (!callee.isIdentifier()) {
+const isConfigFactory = (editor: SourceEditor, callee: Node): boolean => {
+  if (callee.type !== 'Identifier') {
     return false;
   }
-  const binding = callee.scope.getBinding(callee.node.name);
-  const name = binding?.path.isImportSpecifier()
-    ? binding.path.node.imported
-    : !binding
-      ? callee.node
-      : undefined;
+  const binding = editor.scopes.bindingOf(callee);
+  const name =
+    binding?.node.type === 'ImportSpecifier'
+      ? binding.node.imported
+      : !binding
+        ? callee
+        : undefined;
   return (
-    t.isIdentifier(name) && ['defineMain', 'definePreview', 'defineConfig'].includes(name.name)
+    name?.type === 'Identifier' &&
+    ['defineMain', 'definePreview', 'defineConfig'].includes(name.name)
   );
 };
 
-const isExportReference = (reference: NodePath): boolean => {
-  const parent = reference.parentPath;
-  if (!parent) {
-    return false;
-  }
-  if (
-    parent.isTSAsExpression() ||
-    parent.isTSSatisfiesExpression() ||
-    parent.isTSNonNullExpression()
-  ) {
-    return isExportReference(parent);
-  }
-  return (
-    reference.isExportNamedDeclaration() ||
-    parent.isExportDefaultDeclaration() ||
-    parent.isExportSpecifier() ||
-    (parent.isAssignmentExpression() &&
-      t.isMemberExpression(parent.node.left) &&
-      t.isIdentifier(parent.node.left.object, { name: 'module' }) &&
-      t.isIdentifier(parent.node.left.property, { name: 'exports' }))
-  );
+const isModuleExports = (node: Node) =>
+  node.type === 'MemberExpression' &&
+  isIdentifier(node.object, 'module') &&
+  (isIdentifier(node.property, 'exports') || isStringLiteral(node.property)) &&
+  (node.property.type === 'Identifier' || (node.property as E.StringLiteral).value === 'exports');
+
+const TS_WRAPPERS = new Set(['TSAsExpression', 'TSSatisfiesExpression', 'TSNonNullExpression']);
+
+const isValidIdentifier = (name: string) => /^[A-Za-z_$][\w$]*$/.test(name);
+
+// `custom-field` → `customField`
+const toIdentifier = (name: string) =>
+  name
+    .replace(/[^\w$]+(.)?/g, (_, next: string | undefined) => (next ? next.toUpperCase() : ''))
+    .replace(/^\d/, '_$&') || '_';
+
+type NamedEntry = {
+  name: string;
+  declaration: E.VariableDeclarator | E.Function;
+  // The `const`/`let` statement owning a declarator, or the function itself.
+  statement: Node;
+  exportStatement?: E.ExportNamedDeclaration;
+  specifier?: { statement: E.ExportNamedDeclaration; specifier: E.ExportSpecifier };
 };
 
-export function createConfigObject(
+type Rejection = { ok: false; diagnostic: CsfMutationDiagnostic };
+
+export const locateConfigRoot = (
   config: ConfigFile,
-  mode: 'read' | 'mutate',
-  report: (diagnostic: CsfMutationDiagnostic) => void,
-  markChanged: () => void
-): { ok: true; object: CsfObject } | { ok: false; diagnostic: CsfMutationDiagnostic } {
-  let result: { ok: true; object: CsfObject } | { ok: false; diagnostic: CsfMutationDiagnostic } = {
+  mode: 'read' | 'mutate'
+): { ok: true; root: ObjectRoot } | Rejection => {
+  const editor = config._editorSource;
+  const { program } = editor;
+  const reject = (
+    node: Node | Span | undefined,
+    code: CsfMutationDiagnostic['code'],
+    message: string
+  ): Rejection => ({
     ok: false,
     diagnostic: {
-      code: 'unsupported-initializer',
+      code,
       target: { kind: 'config' },
       path: [],
-      message: 'Cannot find a mutable config root',
+      message,
+      ...(node && node !== program
+        ? { loc: locationOf(editor.code, (node as Span).start, (node as Span).end) }
+        : {}),
     },
+  });
+
+  const parents = new Map<Node, Node | null>();
+  const assignments: E.AssignmentExpression[] = [];
+  walk(program, (node, parent) => {
+    parents.set(node, parent);
+    if (
+      node.type === 'AssignmentExpression' &&
+      node.left.type === 'MemberExpression' &&
+      (isModuleExports(node.left) || isIdentifier(node.left.object, 'exports'))
+    ) {
+      assignments.push(node);
+    }
+  });
+  const ancestors = (node: Node) => {
+    const result: Node[] = [];
+    for (let parent = parents.get(node); parent; parent = parents.get(parent)) {
+      result.push(parent);
+    }
+    return result;
   };
-  const reject = (node: t.Node, code: CsfMutationDiagnostic['code'], message: string) => {
-    result = {
-      ok: false,
-      diagnostic: {
-        code,
-        target: { kind: 'config' },
-        path: [],
-        message,
-        ...(node.loc ? { loc: node.loc } : {}),
-      },
-    };
+  const isStatement = (node: Node) =>
+    node.type.endsWith('Statement') || node.type.endsWith('Declaration');
+
+  const isExportReference = (reference: Node): boolean => {
+    if (
+      reference.type === 'ExportNamedDeclaration' ||
+      reference.type === 'ExportDefaultDeclaration'
+    ) {
+      return true;
+    }
+    let parent = parents.get(reference);
+    while (parent && TS_WRAPPERS.has(parent.type)) {
+      parent = parents.get(parent);
+    }
+    return (
+      parent?.type === 'ExportDefaultDeclaration' ||
+      parent?.type === 'ExportSpecifier' ||
+      (parent?.type === 'AssignmentExpression' && isModuleExports(parent.left))
+    );
   };
 
-  traverse(config._ast, {
-    Program(program) {
-      program.stop();
-      const assignments: NodePath<t.AssignmentExpression>[] = [];
-      program.traverse({
-        AssignmentExpression(path) {
-          const { left } = path.node;
-          if (
-            t.isMemberExpression(left) &&
-            ((t.isIdentifier(left.object, { name: 'module' }) &&
-              (t.isIdentifier(left.property, { name: 'exports' }) ||
-                t.isStringLiteral(left.property, { value: 'exports' }))) ||
-              t.isIdentifier(left.object, { name: 'exports' }))
-          ) {
-            assignments.push(path);
-          }
-        },
-      });
-      const root = pathForNode(program, config._exportsObject);
-      if (root) {
-        const declaration = root.findParent((parent) => parent.isVariableDeclarator());
-        if (
-          mode === 'mutate' &&
-          Object.values(config._exportDecls).some((exported) => exported !== declaration?.node)
-        ) {
-          reject(
-            root.node,
-            'ambiguous-binding',
-            'Cannot mutate mixed default and named config exports'
-          );
-          return;
-        }
-        for (
-          let parent: NodePath | null = root.parentPath;
-          parent && !parent.isProgram();
-          parent = parent.parentPath
-        ) {
-          if (!parent.isCallExpression()) {
-            continue;
-          }
-          const callee = parent.get('callee');
-          const typeChain =
-            callee.isMemberExpression() &&
-            !callee.node.computed &&
-            t.isIdentifier(callee.node.property, { name: 'type' }) &&
-            parent.node.arguments.length === 0;
-          if (!typeChain && !(isConfigFactory(callee) && parent.node.arguments.length === 1)) {
-            reject(
-              parent.node,
-              'unsupported-initializer',
-              'Cannot mutate an arbitrary config factory call'
-            );
-            return;
-          }
-        }
-        const statement = root.getStatementParent();
-        if (
-          statement?.isExpressionStatement() &&
-          (!t.isAssignmentExpression(statement.node.expression) ||
-            !t.isMemberExpression(statement.node.expression.left) ||
-            !t.isIdentifier(statement.node.expression.left.object, { name: 'module' }) ||
-            !t.isIdentifier(statement.node.expression.left.property, { name: 'exports' }))
-        ) {
-          reject(
-            root.node,
-            'ambiguous-binding',
-            'Cannot mutate a config that is not directly exported'
-          );
-          return;
-        }
-        if (
-          !statement?.parentPath.isProgram() &&
-          !statement?.parentPath.isExportNamedDeclaration()
-        ) {
-          reject(
-            root.node,
-            'unsupported-initializer',
-            'Cannot mutate a config declared inside a function or conditional'
-          );
-          return;
-        }
-        if (declaration?.isVariableDeclarator() && t.isIdentifier(declaration.node.id)) {
-          const binding = declaration.scope.getBinding(declaration.node.id.name);
-          if (
-            !binding?.constant ||
-            binding.referencePaths.length !== 1 ||
-            !binding.referencePaths.every(isExportReference)
-          ) {
-            reject(
-              declaration.node,
-              'ambiguous-binding',
-              'Cannot mutate a shared or reassigned config binding'
-            );
-            return;
-          }
-        }
-        if (
-          assignments.length > 1 ||
-          assignments.some(
-            (assignment) =>
-              assignment.scope.hasBinding('module') ||
-              (t.isMemberExpression(assignment.node.left) && assignment.node.left.computed) ||
-              !assignment.parentPath.parentPath?.isProgram()
-          )
-        ) {
-          reject(
-            root.node,
-            'ambiguous-binding',
-            'Cannot mutate conditional, repeated, or shadowed module.exports'
-          );
-          return;
-        }
-        result = {
-          ok: true,
-          object: createCsfObject({ kind: 'config' }, root, [], report, markChanged),
-        };
-        return;
+  const root = config._exportsObject;
+  if (root) {
+    const chain = ancestors(root);
+    const declaration = chain.find(
+      (node): node is E.VariableDeclarator => node.type === 'VariableDeclarator'
+    );
+    if (
+      mode === 'mutate' &&
+      Object.values(config._exportDecls).some((exported) => exported !== declaration)
+    ) {
+      return reject(
+        root,
+        'ambiguous-binding',
+        'Cannot mutate mixed default and named config exports'
+      );
+    }
+    for (const parent of chain) {
+      if (parent.type !== 'CallExpression') {
+        continue;
       }
-
-      if (config.hasDefaultExport || assignments.length > 0) {
-        reject(
-          config._ast.program,
+      const { callee } = parent;
+      const typeChain =
+        callee.type === 'MemberExpression' &&
+        !callee.computed &&
+        isIdentifier(callee.property, 'type') &&
+        parent.arguments.length === 0;
+      if (!typeChain && !(isConfigFactory(editor, callee) && parent.arguments.length === 1)) {
+        return reject(
+          parent,
           'unsupported-initializer',
-          'Cannot mutate a config without a static object initializer'
+          'Cannot mutate an arbitrary config factory call'
+        );
+      }
+    }
+    const statementIndex = chain.findIndex(isStatement);
+    const statement = chain[statementIndex];
+    if (
+      statement?.type === 'ExpressionStatement' &&
+      (statement.expression.type !== 'AssignmentExpression' ||
+        !isModuleExports(statement.expression.left) ||
+        statement.expression.left.type !== 'MemberExpression' ||
+        statement.expression.left.property.type !== 'Identifier')
+    ) {
+      return reject(
+        root,
+        'ambiguous-binding',
+        'Cannot mutate a config that is not directly exported'
+      );
+    }
+    const statementParent = chain[statementIndex + 1];
+    if (statementParent?.type !== 'Program' && statementParent?.type !== 'ExportNamedDeclaration') {
+      return reject(
+        root,
+        'unsupported-initializer',
+        'Cannot mutate a config declared inside a function or conditional'
+      );
+    }
+    if (declaration?.id.type === 'Identifier') {
+      const binding = editor.scopes.bindingOf(declaration.id);
+      if (
+        !binding?.constant ||
+        binding.references.length !== 1 ||
+        !binding.references.every(isExportReference)
+      ) {
+        return reject(
+          declaration,
+          'ambiguous-binding',
+          'Cannot mutate a shared or reassigned config binding'
         );
-        return;
       }
+    }
+    if (
+      assignments.length > 1 ||
+      assignments.some((assignment) => {
+        const [statementNode, statementParentNode] = ancestors(assignment);
+        return (
+          editor.scopes.program.bindings.has('module') ||
+          (assignment.left.type === 'MemberExpression' && assignment.left.computed) ||
+          statementNode?.type !== 'ExpressionStatement' ||
+          statementParentNode?.type !== 'Program'
+        );
+      })
+    ) {
+      return reject(
+        root,
+        'ambiguous-binding',
+        'Cannot mutate conditional, repeated, or shadowed module.exports'
+      );
+    }
+    return { ok: true, root: literalRoot(editor, root) };
+  }
 
-      const named = new Map<t.ObjectProperty, NamedExport>();
-      const virtualRoot = t.objectExpression([]);
-      const seen = new Set<t.Node>();
-      for (const statement of program.get('body')) {
-        if (statement.isExportNamedDeclaration() && statement.node.exportKind === 'type') {
+  if (config.hasDefaultExport || assignments.length > 0) {
+    return reject(
+      program,
+      'unsupported-initializer',
+      'Cannot mutate a config without a static object initializer'
+    );
+  }
+
+  for (const statement of program.body) {
+    if (statement.type === 'ExportNamedDeclaration' && statement.exportKind === 'type') {
+      continue;
+    }
+    if (
+      statement.type === 'ExportAllDeclaration' ||
+      (statement.type === 'ExportNamedDeclaration' && statement.source)
+    ) {
+      return reject(
+        statement,
+        'unsupported-initializer',
+        'Cannot mutate re-exported config fields'
+      );
+    }
+    if (statement.type === 'ExportNamedDeclaration') {
+      for (const specifier of statement.specifiers) {
+        if (specifier.exportKind === 'type') {
           continue;
         }
-        if (
-          statement.isExportAllDeclaration() ||
-          (statement.isExportNamedDeclaration() && statement.node.source)
-        ) {
-          reject(
-            statement.node,
+        const name = exportedName(specifier.exported);
+        if (!Object.hasOwn(config._exportDecls, name)) {
+          return reject(
+            specifier,
             'unsupported-initializer',
-            'Cannot mutate re-exported config fields'
+            `Cannot mutate the unresolved ${name} export`
           );
-          return;
-        }
-        if (statement.isExportNamedDeclaration()) {
-          for (const specifier of statement.get('specifiers')) {
-            if (!specifier.isExportSpecifier() || specifier.node.exportKind === 'type') {
-              continue;
-            }
-            const name = t.isIdentifier(specifier.node.exported)
-              ? specifier.node.exported.name
-              : specifier.node.exported.value;
-            if (!Object.hasOwn(config._exportDecls, name)) {
-              reject(
-                specifier.node,
-                'unsupported-initializer',
-                `Cannot mutate the unresolved ${name} export`
-              );
-              return;
-            }
-          }
         }
       }
+    }
+  }
 
-      for (const [name, node] of Object.entries(config._exportDecls)) {
-        const declaration = pathForNode(program, node);
-        if (
-          !(declaration?.isVariableDeclarator() || declaration?.isFunctionDeclaration()) ||
-          !t.isIdentifier(declaration.node.id)
-        ) {
-          reject(
-            node,
-            'unsupported-initializer',
-            `Cannot mutate the ${name} export without an expression initializer`
-          );
-          return;
-        }
-        const binding = declaration.scope.getBinding(declaration.node.id.name);
-        if (
-          !binding?.constant ||
-          seen.has(node) ||
-          (mode === 'mutate' && !binding.referencePaths.every(isExportReference))
-        ) {
-          reject(
-            node,
-            'ambiguous-binding',
-            `Cannot mutate the shared or reassigned ${name} export`
-          );
-          return;
-        }
-        seen.add(node);
-        const reference = binding.referencePaths.find((path) =>
-          path.parentPath?.isExportSpecifier()
+  const entries: NamedEntry[] = [];
+  const seen = new Set<Node>();
+  for (const [name, declaration] of Object.entries(config._exportDecls)) {
+    if (declaration.id?.type !== 'Identifier') {
+      return reject(
+        declaration,
+        'unsupported-initializer',
+        `Cannot mutate the ${name} export without an expression initializer`
+      );
+    }
+    const binding = editor.scopes.bindingOf(declaration.id);
+    if (
+      !binding?.constant ||
+      seen.has(declaration) ||
+      (mode === 'mutate' && !binding.references.every(isExportReference))
+    ) {
+      return reject(
+        declaration,
+        'ambiguous-binding',
+        `Cannot mutate the shared or reassigned ${name} export`
+      );
+    }
+    seen.add(declaration);
+    if (declaration.type === 'VariableDeclarator' && !declaration.init) {
+      return reject(
+        declaration,
+        'unsupported-initializer',
+        `Cannot mutate the ${name} export without an expression initializer`
+      );
+    }
+    const reference = binding.references.find(
+      (candidate) => parents.get(candidate)?.type === 'ExportSpecifier'
+    );
+    const specifier = reference && (parents.get(reference) as E.ExportSpecifier);
+    const owner = parents.get(declaration)!;
+    const exportStatement = [owner, parents.get(owner)].find(
+      (node): node is E.ExportNamedDeclaration => node?.type === 'ExportNamedDeclaration'
+    );
+    entries.push({
+      name,
+      declaration,
+      statement: declaration.type === 'VariableDeclarator' ? owner : declaration,
+      exportStatement,
+      specifier: specifier
+        ? { specifier, statement: parents.get(specifier) as E.ExportNamedDeclaration }
+        : undefined,
+    });
+  }
+
+  return { ok: true, root: namedExportsRoot(editor, entries) };
+};
+
+const exportedName = (node: E.ModuleExportName) =>
+  node.type === 'Identifier' ? node.name : (node as E.StringLiteral).value;
+
+// A config made of named exports, edited as if it were one object literal.
+const namedExportsRoot = (editor: SourceEditor, entries: NamedEntry[]): ObjectRoot => {
+  const quote = editor.quote;
+  const byProperty = new Map<Property, NamedEntry>();
+  const properties = entries.map((entry) => {
+    const value = (
+      entry.declaration.type === 'VariableDeclarator' ? entry.declaration.init : entry.declaration
+    ) as E.Expression;
+    const property = {
+      type: 'Property',
+      kind: 'init',
+      method: false,
+      shorthand: false,
+      computed: false,
+      key: {
+        type: 'Literal',
+        value: entry.name,
+        raw: printString(entry.name, quote),
+        start: 0,
+        end: 0,
+      },
+      value,
+      start: entry.declaration.start,
+      end: entry.declaration.end,
+    } as unknown as Property;
+    byProperty.set(property, entry);
+    return property;
+  });
+
+  const declare = (members: MemberInsert[]) => {
+    const names = editor.scopes.names;
+    for (const { key, value } of members) {
+      if (isValidIdentifier(key) && !editor.scopes.program.bindings.has(key) && !names.has(key)) {
+        names.add(key);
+        appendStatement(editor, `export const ${key} = ${value};`);
+      } else {
+        const id = generateUid(editor.scopes, toIdentifier(key));
+        const exported = isValidIdentifier(key) ? key : printString(key, quote);
+        appendStatement(editor, `const ${id} = ${value};\nexport { ${id} as ${exported} };`);
+      }
+    }
+  };
+
+  const removeEntry = (entry: NamedEntry) => {
+    if (entry.specifier) {
+      const { statement, specifier } = entry.specifier;
+      if (statement.specifiers.length === 1) {
+        removeStatement(editor, statement);
+      } else {
+        removeFromList(editor, specifierList(editor, statement), [specifier]);
+      }
+      return;
+    }
+    if (entry.declaration.type === 'VariableDeclarator') {
+      const statement = entry.statement as E.VariableDeclaration;
+      if (statement.declarations.length > 1) {
+        const list: List = {
+          open: statement.start + statement.kind.length,
+          close: statement.declarations.at(-1)!.end,
+          items: statement.declarations,
+        };
+        removeFromList(editor, list, [entry.declaration]);
+        return;
+      }
+    }
+    removeStatement(editor, entry.exportStatement ?? entry.statement);
+  };
+
+  const entryOf = (member: Property) => {
+    const entry = byProperty.get(member);
+    if (!entry) {
+      throw new Error('CsfObject: unknown named export member');
+    }
+    return entry;
+  };
+
+  return {
+    properties,
+    detached: true,
+    append: declare,
+    prepend: declare,
+    remove: (members) => members.forEach((member) => removeEntry(entryOf(member))),
+    replaceValue: (member, text) => {
+      const { declaration } = entryOf(member);
+      if (declaration.type === 'VariableDeclarator') {
+        editor.edits.overwrite(declaration.init!.start, declaration.init!.end, text);
+        return;
+      }
+      const id = declaration.id!.name;
+      const fn = /^(async\s+)?function\s*(\*)?\s*([\w$]*)\s*(?=[(<])/.exec(text);
+      if (fn && (!fn[3] || fn[3] === id)) {
+        // Keep `export function name() {}` when the replacement is a compatible function.
+        const prefix = `${fn[1] ? 'async ' : ''}function${fn[2] ? '*' : ''} ${id}`;
+        editor.edits.overwrite(
+          declaration.start,
+          declaration.end,
+          prefix + text.slice(fn[0].length)
         );
-        const specifier = reference?.parentPath;
-        const value = declaration.isFunctionDeclaration()
-          ? t.toExpression(t.cloneNode(declaration.node))
-          : declaration.node.init;
-        if (!t.isExpression(value)) {
-          reject(
-            node,
-            'unsupported-initializer',
-            `Cannot mutate the ${name} export without an expression initializer`
-          );
-          return;
-        }
-        const property = t.objectProperty(t.stringLiteral(name), value);
-        virtualRoot.properties.push(property);
-        named.set(property, {
-          declaration,
-          ...(specifier?.isExportSpecifier() ? { specifier } : {}),
-        });
+        return;
       }
+      editor.edits.overwrite(declaration.start, declaration.end, `const ${id} = ${text};`);
+    },
+    rename: (member, key) => {
+      const entry = entryOf(member);
+      const name = key;
+      if (entry.specifier) {
+        const exported = entry.specifier.specifier.exported;
+        editor.edits.overwrite(
+          exported.start,
+          exported.end,
+          isValidIdentifier(name) ? name : printString(name, quote)
+        );
+        return;
+      }
+      const id = entry.declaration.id as E.BindingIdentifier;
+      if (
+        isValidIdentifier(name) &&
+        (id.name === name || !editor.scopes.program.bindings.has(name))
+      ) {
+        editor.edits.overwrite(id.start, id.end, name);
+        return;
+      }
+      removeEntry(entry);
+      declare([{ key: name, value: valueSource(editor, member), text: '' }]);
+    },
+    group: (members, key) => {
+      members.forEach((member) => removeEntry(entryOf(member)));
+      const inner = members
+        .map((member) => `${printKey(entryOf(member).name, quote)}: ${valueSource(editor, member)}`)
+        .join(', ');
+      declare([{ key, value: `{ ${inner} }`, text: '' }]);
+    },
+    take: (member, key) => {
+      const value = valueSource(editor, member);
+      return { key, value, text: `${printKey(key, quote)}: ${value}` };
+    },
+  };
+};
 
-      const syncExports = () => {
-        for (const [property, entry] of named) {
-          if (!virtualRoot.properties.includes(property)) {
-            if (entry.specifier) {
-              entry.specifier.remove();
-            } else {
-              entry.declaration.remove();
-            }
-            named.delete(property);
-          }
-        }
-        for (const property of virtualRoot.properties) {
-          if (!t.isObjectProperty(property) || !t.isExpression(property.value)) {
-            continue;
-          }
-          const name = t.isIdentifier(property.key)
-            ? property.key.name
-            : t.isStringLiteral(property.key)
-              ? property.key.value
-              : undefined;
-          if (name === undefined) {
-            continue;
-          }
-          const entry = named.get(property);
-          if (entry) {
-            if (entry.declaration.isFunctionDeclaration()) {
-              if (
-                t.isFunctionExpression(property.value) &&
-                (!property.value.id || property.value.id.name === entry.declaration.node.id?.name)
-              ) {
-                const { params, body, async, generator, returnType, typeParameters } =
-                  property.value;
-                Object.assign(entry.declaration.node, {
-                  params,
-                  body,
-                  async,
-                  generator,
-                  returnType,
-                  typeParameters,
-                });
-              } else {
-                const id = entry.declaration.node.id;
-                if (!id) {
-                  continue;
-                }
-                const variable = t.variableDeclarator(id, property.value);
-                entry.declaration.replaceWith(t.variableDeclaration('const', [variable]));
-                const path = pathForNode(program, variable);
-                if (path) {
-                  entry.declaration = path;
-                }
-              }
-            } else if (entry.declaration.isVariableDeclarator()) {
-              entry.declaration.node.init = property.value;
-            }
-            if (entry.specifier) {
-              entry.specifier.node.exported = t.isValidIdentifier(name)
-                ? t.identifier(name)
-                : t.stringLiteral(name);
-              continue;
-            }
-            if (
-              t.isValidIdentifier(name) &&
-              (t.isIdentifier(entry.declaration.node.id, { name }) ||
-                !program.scope.hasBinding(name))
-            ) {
-              entry.declaration.node.id = t.identifier(name);
-              continue;
-            }
-            entry.declaration.remove();
-          }
-          const id =
-            t.isValidIdentifier(name) && !program.scope.hasBinding(name)
-              ? t.identifier(name)
-              : program.scope.generateUidIdentifier(name);
-          const declaration = t.variableDeclarator(id, property.value);
-          const variable = t.variableDeclaration('const', [declaration]);
-          if (id.name === name) {
-            program.pushContainer('body', t.exportNamedDeclaration(variable));
-          } else {
-            const specifier = t.exportSpecifier(
-              id,
-              t.isValidIdentifier(name) ? t.identifier(name) : t.stringLiteral(name)
-            );
-            program.pushContainer('body', [variable, t.exportNamedDeclaration(null, [specifier])]);
-          }
-          const declarationPath = pathForNode(program, declaration);
-          if (declarationPath) {
-            const specifierPath = program
-              .get('body')
-              .flatMap((statement) =>
-                statement.isExportNamedDeclaration() ? statement.get('specifiers') : []
-              )
-              .find((specifier) => specifier.isExportSpecifier() && specifier.node.local === id);
-            named.set(property, {
-              declaration: declarationPath,
-              ...(specifierPath?.isExportSpecifier() ? { specifier: specifierPath } : {}),
-            });
-          }
-        }
-        program.scope.crawl();
-        markChanged();
-      };
+const specifierList = (
+  editor: SourceEditor,
+  statement: E.ExportNamedDeclaration | E.ImportDeclaration
+): List => {
+  const open = editor.code.indexOf('{', statement.start) + 1;
+  const close = editor.code.indexOf('}', open);
+  return {
+    open,
+    close,
+    items: statement.specifiers.filter(
+      (specifier) =>
+        specifier.type !== 'ImportDefaultSpecifier' && specifier.type !== 'ImportNamespaceSpecifier'
+    ),
+  };
+};
+
+export { specifierList };
 
-      result = {
-        ok: true,
-        object: createCsfObject(
-          { kind: 'config' },
-          {
-            node: virtualRoot,
-            detached: true,
-            scope: program.scope,
-            buildCodeFrameError: program.buildCodeFrameError.bind(program),
-          },
-          [],
-          report,
-          syncExports
-        ),
-      };
+export function createConfigObject(
+  config: ConfigFile,
+  mode: 'read' | 'mutate',
+  report: (diagnostic: CsfMutationDiagnostic) => void,
+  markChanged: () => void
+): { ok: true; object: CsfObject } | { ok: false; diagnostic: CsfMutationDiagnostic } {
+  const located = locateConfigRoot(config, mode);
+  if (located.ok === false) {
+    return located;
+  }
+  const host: CsfObjectHost = {
+    editor: config._editorSource,
+    root: () => {
+      const current = locateConfigRoot(config, mode);
+      return current.ok ? current.root : undefined;
     },
-  });
-  return result;
+    commit: () => config._commit(),
+  };
+  return { ok: true, object: createCsfObject({ kind: 'config' }, host, [], report, markChanged) };
 }
+
+export { staticKey };
diff --git a/code/core/src/csf-tools/CsfFile.test.ts b/code/core/src/csf-tools/CsfFile.test.ts
index b99ddc322ef7..efe8e3196cff 100644
--- a/code/core/src/csf-tools/CsfFile.test.ts
+++ b/code/core/src/csf-tools/CsfFile.test.ts
@@ -83,9 +83,7 @@ describe('CsfFile', () => {
           { transformInlineMeta: true }
         )
       ).toMatchInlineSnapshot(`
-        "const _meta = {
-          title: 'foo/bar'
-        };
+        "const _meta = { title: 'foo/bar' };
         export default _meta;"
       `);
     });
@@ -3019,7 +3017,7 @@ describe('CsfFile', () => {
         `
           )
         ).toThrowErrorMatchingInlineSnapshot(`
-          [MultipleMetaError: CSF: multiple meta objects 
+          [MultipleMetaError: CSF: multiple meta objects (line 3, col 15)
 
           More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export]
         `);
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index 3ad209064eaa..a8a6eb136976 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -1,16 +1,5 @@
 import { readFile, writeFile } from 'node:fs/promises';
 
-import {
-  BabelFileClass,
-  type GeneratorOptions,
-  type NodePath,
-  type RecastOptions,
-  babelParse,
-  generate,
-  recast,
-  types as t,
-  traverse,
-} from 'storybook/internal/babel';
 import {
   isExportStory,
   storyNameFromExport,
@@ -32,24 +21,21 @@ import { Tag } from '../shared/constants/tags.ts';
 import type { PrintResultType } from './PrintResultType.ts';
 import { type CsfMutationDiagnostic, type CsfObject, type CsfObjectOptions } from './CsfObject.ts';
 import { discoverCsfObjects } from './CsfObjectDiscovery.ts';
-import { findVarInitialization } from './findVarInitialization.ts';
 import {
-  isCanonicalCsf2BindCall,
-  isCsfFactoryCall,
+  type E,
+  type Node,
+  type SourceLocation,
+  identifierKey,
+  isFunction,
+  isIdentifier,
+  isRegExpLiteral,
+  isStringLiteral,
+  locationOf,
   unwrapExpression,
-} from './story-shape/utils.ts';
-
-// We add this BabelFile as a temporary workaround to deal with a BabelFileClass "ImportEquals should have a literal source" issue in no link mode with tsup
-interface BabelFile {
-  ast: t.File;
-  opts: any;
-  hub: any;
-  metadata: object;
-  path: NodePath<t.Program>;
-  scope: any;
-  inputMap: object | null;
-  code: string;
-}
+} from './estree/ast.ts';
+import { SourceEditor, appendStatement } from './estree/editor.ts';
+import { generateUid } from './estree/scope.ts';
+import { findVarInitialization } from './findVarInitialization.ts';
 
 type CsfMutationState = {
   diagnostics: CsfMutationDiagnostic[];
@@ -61,59 +47,102 @@ const mutationStates = new WeakMap<CsfFile, CsfMutationState>();
 const PREVIEW_FILE_REGEX = /\/preview(.(js|jsx|mjs|ts|tsx))?$/;
 export const isValidPreviewPath = (filepath: string) => PREVIEW_FILE_REGEX.test(filepath);
 
-function parseIncludeExclude(prop: t.Node) {
-  if (t.isArrayExpression(prop)) {
+type StaticIdentifierMemberCall = E.CallExpression & {
+  callee: E.StaticMemberExpression & { object: E.IdentifierReference; property: E.IdentifierName };
+};
+
+type CsfFactoryCall = E.CallExpression & {
+  callee: E.StaticMemberExpression & { property: E.IdentifierName };
+};
+
+export const isCanonicalCsf2BindCall = (
+  node: Node | null | undefined
+): node is StaticIdentifierMemberCall =>
+  node?.type === 'CallExpression' &&
+  node.callee.type === 'MemberExpression' &&
+  !node.callee.computed &&
+  node.callee.object.type === 'Identifier' &&
+  isIdentifier(node.callee.property, 'bind') &&
+  (node.arguments.length === 0 ||
+    (node.arguments.length === 1 &&
+      node.arguments[0].type === 'ObjectExpression' &&
+      node.arguments[0].properties.length === 0));
+
+/** Receiver of a `.type<T>()` chain, which returns its receiver: `meta` for `meta.type<T>()`. */
+export const withoutTypeCalls = (object: Node): Node =>
+  object.type === 'CallExpression' &&
+  object.arguments.length === 0 &&
+  object.callee.type === 'MemberExpression' &&
+  !object.callee.computed &&
+  isIdentifier(object.callee.property, 'type')
+    ? withoutTypeCalls(object.callee.object)
+    : object;
+
+export const isCsfFactoryCall = (node: Node | null | undefined): node is CsfFactoryCall =>
+  node?.type === 'CallExpression' &&
+  node.callee.type === 'MemberExpression' &&
+  !node.callee.computed &&
+  withoutTypeCalls(node.callee.object).type === 'Identifier' &&
+  node.callee.property.type === 'Identifier' &&
+  (node.callee.property.name === 'story' || node.callee.property.name === 'extend');
+
+/** Identifier a CSF factory call is made on: `meta` in `meta.type<T>().story()`. */
+export const csfFactoryReceiver = (node: CsfFactoryCall): E.IdentifierReference =>
+  withoutTypeCalls(node.callee.object) as E.IdentifierReference;
+
+function parseIncludeExclude(prop: Node) {
+  if (prop.type === 'ArrayExpression') {
     return prop.elements.map((e) => {
-      if (t.isStringLiteral(e)) {
+      if (isStringLiteral(e)) {
         return e.value;
       }
       throw new Error(`Expected string literal: ${e}`);
     });
   }
 
-  if (t.isStringLiteral(prop)) {
+  if (isStringLiteral(prop)) {
     return new RegExp(prop.value);
   }
 
-  if (t.isRegExpLiteral(prop)) {
-    return new RegExp(prop.pattern, prop.flags);
+  if (isRegExpLiteral(prop)) {
+    return new RegExp(prop.regex.pattern, prop.regex.flags);
   }
 
   throw new Error(`Unknown include/exclude: ${prop}`);
 }
 
-function parseTags(prop: t.Node) {
-  if (!t.isArrayExpression(prop)) {
+function parseTags(prop: Node | null | undefined) {
+  if (prop?.type !== 'ArrayExpression') {
     throw new Error('CSF: Expected tags array');
   }
 
   return prop.elements.map((e) => {
-    if (t.isStringLiteral(e)) {
+    if (isStringLiteral(e)) {
       return e.value;
     }
     throw new Error(`CSF: Expected tag to be string literal`);
   }) as Tag[];
 }
 
-function parseTestTags(optionsNode: t.Node | null | undefined, program: t.Program) {
+function parseTestTags(optionsNode: Node | null | undefined, program: E.Program) {
   if (!optionsNode) {
     return [] as string[];
   }
 
-  let node: t.Node = optionsNode;
-  if (t.isIdentifier(node)) {
+  let node: Node | null = optionsNode;
+  if (node.type === 'Identifier') {
     node = findVarInitialization(node.name, program);
   }
 
-  if (t.isObjectExpression(node)) {
+  if (node?.type === 'ObjectExpression') {
     const tagsProp = node.properties.find(
-      (property) =>
-        t.isObjectProperty(property) && t.isIdentifier(property.key) && property.key.name === 'tags'
-    ) as t.ObjectProperty | undefined;
+      (property): property is E.ObjectProperty =>
+        property.type === 'Property' && identifierKey(property) === 'tags' && !property.method
+    );
 
     if (tagsProp) {
-      let tagsNode: t.Node = tagsProp.value as t.Node;
-      if (t.isIdentifier(tagsNode)) {
+      let tagsNode: Node | null = tagsProp.value;
+      if (tagsNode.type === 'Identifier') {
         tagsNode = findVarInitialization(tagsNode.name, program);
       }
       return parseTags(tagsNode);
@@ -123,10 +152,13 @@ function parseTestTags(optionsNode: t.Node | null | undefined, program: t.Progra
   return [] as string[];
 }
 
-const formatLocation = (node: t.Node, fileName?: string) => {
+/** Anything an error can point at: a node with a location, or nothing. */
+export type Located = { loc?: SourceLocation | null } | null | undefined;
+
+const formatLocation = (node: Located, fileName?: string) => {
   let loc = '';
-  if (node.loc) {
-    const { line, column } = node.loc?.start || {};
+  if (node?.loc) {
+    const { line, column } = node.loc.start;
     loc = `(line ${line}, col ${column})`;
   }
   return `${fileName || ''} ${loc}`.trim();
@@ -134,30 +166,27 @@ const formatLocation = (node: t.Node, fileName?: string) => {
 
 export const isModuleMock = (importPath: string) => MODULE_MOCK_REGEX.test(importPath);
 
-const isArgsStory = (init: t.Node, parent: t.Node, csf: CsfFile) => {
-  let storyFn: t.Node = init;
+const isArgsStory = (init: Node, isTopLevel: boolean, csf: CsfFile) => {
+  let storyFn: Node | null = init;
   // export const Foo = Bar.bind({})
-  if (t.isProgram(parent) && isCanonicalCsf2BindCall(init)) {
+  if (isTopLevel && isCanonicalCsf2BindCall(init)) {
     const boundIdentifier = init.callee.object.name;
-    const template = findVarInitialization(boundIdentifier, parent);
+    const template = findVarInitialization(boundIdentifier, csf._program);
     if (template) {
       csf._templates[boundIdentifier] = template;
       storyFn = template;
     }
   }
-  if (t.isArrowFunctionExpression(storyFn)) {
-    return storyFn.params.length > 0;
-  }
-  if (t.isFunctionDeclaration(storyFn)) {
+  if (storyFn?.type === 'ArrowFunctionExpression' || storyFn?.type === 'FunctionDeclaration') {
     return storyFn.params.length > 0;
   }
   return false;
 };
 
-const parseExportsOrder = (init: t.Expression) => {
-  if (t.isArrayExpression(init)) {
-    return (init.elements as t.Expression[]).map((item) => {
-      if (t.isStringLiteral(item)) {
+const parseExportsOrder = (init: Node | null) => {
+  if (init?.type === 'ArrayExpression') {
+    return init.elements.map((item) => {
+      if (isStringLiteral(item)) {
         return item.value;
       }
       throw new Error(`Expected string literal named export: ${item}`);
@@ -180,22 +209,18 @@ const sortExports = (exportByName: Record<string, any>, order: string[]) => {
   );
 };
 
-const hasMount = (play: t.Node | undefined) => {
+const hasMount = (play: Node | undefined) => {
   if (
-    t.isArrowFunctionExpression(play) ||
-    t.isFunctionDeclaration(play) ||
-    t.isObjectMethod(play)
+    play?.type === 'ArrowFunctionExpression' ||
+    play?.type === 'FunctionDeclaration' ||
+    // Object methods are stored as their function expression.
+    play?.type === 'FunctionExpression'
   ) {
-    const params = play.params;
-    if (params.length >= 1) {
-      const [arg] = params;
-      if (t.isObjectPattern(arg)) {
-        return !!arg.properties.find((prop) => {
-          if (t.isObjectProperty(prop) && t.isIdentifier(prop.key)) {
-            return prop.key.name === 'mount';
-          }
-        });
-      }
+    const [arg] = play.params;
+    if (arg?.type === 'ObjectPattern') {
+      return arg.properties.some(
+        (prop) => prop.type === 'Property' && identifierKey(prop) === 'mount'
+      );
     }
   }
   return false;
@@ -208,17 +233,17 @@ export interface CsfOptions {
   makeTitle: (userTitle: string) => string;
   /**
    * If an inline meta is detected e.g. `export default { title: 'foo' }` it will be transformed
-   * into a constant format e.g. `export const _meta = { title: 'foo' }; export default _meta;`
+   * into a constant format e.g. `const _meta = { title: 'foo' }; export default _meta;`
    */
   transformInlineMeta?: boolean;
 }
 
 export class NoMetaError extends Error {
-  constructor(message: string, ast: t.Node, fileName?: string) {
+  constructor(message: string, ast: Located, fileName?: string) {
     const msg = message.trim();
     super(dedent`
       CSF: ${msg} ${formatLocation(ast, fileName)}
-      
+
       More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
     `);
     this.name = this.constructor.name;
@@ -226,11 +251,10 @@ export class NoMetaError extends Error {
 }
 
 export class MultipleMetaError extends Error {
-  constructor(message: string, ast: t.Node, fileName?: string) {
-    const msg = `${message} ${formatLocation(ast, fileName)}`.trim();
+  constructor(message: string, ast: Located, fileName?: string) {
     super(dedent`
       CSF: ${message} ${formatLocation(ast, fileName)}
-      
+
       More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
     `);
     this.name = this.constructor.name;
@@ -238,11 +262,10 @@ export class MultipleMetaError extends Error {
 }
 
 export class MixedFactoryError extends Error {
-  constructor(message: string, ast: t.Node, fileName?: string) {
-    const msg = `${message} ${formatLocation(ast, fileName)}`.trim();
+  constructor(message: string, ast: Located, fileName?: string) {
     super(dedent`
       CSF: ${message} ${formatLocation(ast, fileName)}
-      
+
       More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
     `);
     this.name = this.constructor.name;
@@ -250,11 +273,10 @@ export class MixedFactoryError extends Error {
 }
 
 export class BadMetaError extends Error {
-  constructor(message: string, ast: t.Node, fileName?: string) {
-    const msg = ``.trim();
+  constructor(message: string, ast: Located, fileName?: string) {
     super(dedent`
       CSF: ${message} ${formatLocation(ast, fileName)}
-      
+
       More info: https://storybook.js.org/docs/writing-stories?ref=error#default-export
     `);
     this.name = this.constructor.name;
@@ -275,51 +297,43 @@ export interface StaticStory extends Pick<StoryAnnotations, 'name' | 'parameters
 }
 
 export interface StoryTest {
-  node: t.Node;
-  function: t.Node;
+  node: Node;
+  function: Node;
   name: string;
   id: string;
   tags: string[];
-  parent: { node: t.Node };
+  parent: { node: Node | undefined };
 }
 
 export class CsfFile {
-  _ast: t.File;
-
-  _file: BabelFile;
+  _editor: SourceEditor;
 
   _options: CsfOptions;
 
   _rawComponentPath?: string;
 
-  _componentImportSpecifier?: t.ImportSpecifier | t.ImportDefaultSpecifier;
+  _componentImportSpecifier?: E.ImportSpecifier | E.ImportDefaultSpecifier;
 
   _meta?: StaticMeta;
 
   _stories: Record<string, StaticStory> = {};
 
-  _metaAnnotations: Record<string, t.Node> = {};
-
-  _storyExports: Record<string, t.VariableDeclarator | t.FunctionDeclaration> = {};
-
-  _storyDeclarationPath: Record<string, NodePath<t.VariableDeclarator | t.FunctionDeclaration>> =
-    {};
-
-  _storyPaths: Record<string, NodePath<t.ExportNamedDeclaration>> = {};
+  _metaAnnotations: Record<string, Node> = {};
 
-  _metaStatement: t.Statement | undefined;
+  _storyExports: Record<string, E.VariableDeclarator | E.Function> = {};
 
-  _metaStatementPath: NodePath<t.Statement> | undefined;
+  // The `export` statement of each story (the declaration for `export { X as Y }`).
+  _storyStatements: Record<string, E.ExportNamedDeclaration | Node> = {};
 
-  _metaNode: t.ObjectExpression | undefined;
+  _metaStatement: Node | undefined;
 
-  _metaPath: NodePath<t.ExportDefaultDeclaration> | undefined;
+  _metaNode: E.ObjectExpression | undefined;
 
   _metaVariableName: string | undefined;
 
   _metaIsFactory: boolean | undefined;
 
-  _metaFactoryCall: t.CallExpression | undefined;
+  _metaFactoryCall: E.CallExpression | undefined;
 
   /**
    * True when the CSF factory configuration could not be resolved to an object literal in this
@@ -327,11 +341,9 @@ export class CsfFile {
    */
   _metaNodeIsSynthetic: boolean | undefined;
 
-  _storyStatements: Record<string, t.ExportNamedDeclaration | t.Expression> = {};
+  _storyAnnotations: Record<string, Record<string, Node>> = {};
 
-  _storyAnnotations: Record<string, Record<string, t.Node>> = {};
-
-  _templates: Record<string, t.Expression> = {};
+  _templates: Record<string, Node> = {};
 
   _namedExportsOrder?: string[];
 
@@ -339,14 +351,28 @@ export class CsfFile {
 
   _tests: StoryTest[] = [];
 
-  constructor(ast: t.File, options: CsfOptions, file: BabelFile) {
-    this._ast = ast;
-    this._file = file;
+  constructor(code: string, options: CsfOptions) {
+    this._editor = new SourceEditor(code, options.fileName);
     this._options = options;
     this.imports = [];
     mutationStates.set(this, { diagnostics: [], changed: false });
   }
 
+  get _program(): E.Program {
+    return this._editor.program;
+  }
+
+  get _code(): string {
+    return this._editor.code;
+  }
+
+  _loc(node: Node | { start: number; end: number } | undefined): Located {
+    const span = node as { start?: number; end?: number } | undefined;
+    return typeof span?.start === 'number' && typeof span.end === 'number'
+      ? { loc: locationOf(this._editor.code, span.start, span.end) }
+      : undefined;
+  }
+
   /**
    * Read diagnostics from object discovery, reads, and mutations. Check them before writing
    * because a file can contain both successful edits and unsupported targets.
@@ -406,570 +432,567 @@ export class CsfFile {
     );
   }
 
-  _parseTitle(value: t.Node) {
-    const node = t.isIdentifier(value)
-      ? findVarInitialization(value.name, this._ast.program)
-      : value;
-    if (t.isStringLiteral(node)) {
+  // Not committed: `formatCsf` prints it with the other pending edits.
+  _appendStatement(code: string) {
+    appendStatement(this._editor, code);
+  }
+
+  _commit() {
+    if (!this._editor.commit()) {
+      return;
+    }
+    this._reset();
+    this.parse();
+  }
+
+  _reset() {
+    this._rawComponentPath = undefined;
+    this._componentImportSpecifier = undefined;
+    this._meta = undefined;
+    this._stories = {};
+    this._metaAnnotations = {};
+    this._storyExports = {};
+    this._storyStatements = {};
+    this._metaStatement = undefined;
+    this._metaNode = undefined;
+    this._metaVariableName = undefined;
+    this._metaIsFactory = undefined;
+    this._metaFactoryCall = undefined;
+    this._metaNodeIsSynthetic = undefined;
+    this._storyAnnotations = {};
+    this._templates = {};
+    this._namedExportsOrder = undefined;
+    this.imports = [];
+    this._tests = [];
+  }
+
+  _parseTitle(value: Node) {
+    const node =
+      value.type === 'Identifier' ? findVarInitialization(value.name, this._program) : value;
+    if (isStringLiteral(node)) {
       return node.value;
     }
-    if (t.isTSSatisfiesExpression(node) && t.isStringLiteral(node.expression)) {
+    if (node?.type === 'TSSatisfiesExpression' && isStringLiteral(node.expression)) {
       return node.expression.value;
     }
 
     throw new Error(dedent`
-      CSF: unexpected dynamic title ${formatLocation(node, this._options.fileName)}
+      CSF: unexpected dynamic title ${formatLocation(this._loc(node ?? undefined), this._options.fileName)}
 
       More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#string-literal-titles
     `);
   }
 
-  _parseMeta(declaration: t.ObjectExpression, program: t.Program) {
+  _parseMeta(declaration: E.ObjectExpression, program: E.Program) {
     if (this._metaNode) {
-      throw new MultipleMetaError('multiple meta objects', declaration, this._options.fileName);
+      throw new MultipleMetaError(
+        'multiple meta objects',
+        this._loc(declaration),
+        this._options.fileName
+      );
     }
     this._metaNode = declaration;
     const meta: StaticMeta = {};
-    (declaration.properties as t.ObjectProperty[]).forEach((p) => {
-      if (t.isIdentifier(p.key)) {
-        const value = t.isObjectMethod(p) ? p : p.value;
-        this._metaAnnotations[p.key.name] = value;
-
-        if (p.key.name === 'title') {
-          meta.title = this._parseTitle(p.value);
-        } else if (['includeStories', 'excludeStories'].includes(p.key.name)) {
-          (meta as any)[p.key.name] = parseIncludeExclude(p.value);
-        } else if (p.key.name === 'component') {
-          const n = p.value;
-          if (t.isIdentifier(n)) {
-            const id = n.name;
-            const importStmt = program.body.find(
-              (stmt) =>
-                t.isImportDeclaration(stmt) &&
-                stmt.specifiers.find((spec) => spec.local.name === id)
-            ) as t.ImportDeclaration;
-            if (importStmt) {
-              // Example: `import { ComponentImport } from './path-to-component'`
-              // const meta = { component: ComponentImport };
-              // Sets:
-              // - _rawComponentPath = './path-to-component'
-              // - _componentImportSpecifier = ComponentImport
-              const { source } = importStmt;
-              const specifier = importStmt.specifiers.find((spec) => spec.local.name === id);
-              if (t.isStringLiteral(source) && specifier) {
-                this._rawComponentPath = source.value;
-                if (t.isImportSpecifier(specifier) || t.isImportDefaultSpecifier(specifier)) {
-                  this._componentImportSpecifier = specifier;
-                }
+    for (const p of declaration.properties) {
+      const key = identifierKey(p);
+      if (p.type !== 'Property' || key === undefined) {
+        continue;
+      }
+      this._metaAnnotations[key] = p.value;
+
+      if (key === 'title') {
+        meta.title = this._parseTitle(p.value);
+      } else if (key === 'includeStories' || key === 'excludeStories') {
+        (meta as any)[key] = parseIncludeExclude(p.value);
+      } else if (key === 'component') {
+        const n = p.value;
+        if (n.type === 'Identifier') {
+          const id = n.name;
+          const importStmt = program.body.find(
+            (stmt): stmt is E.ImportDeclaration =>
+              stmt.type === 'ImportDeclaration' &&
+              stmt.specifiers.some((spec) => spec.local.name === id)
+          );
+          if (importStmt) {
+            // Example: `import { ComponentImport } from './path-to-component'`
+            // const meta = { component: ComponentImport };
+            // Sets:
+            // - _rawComponentPath = './path-to-component'
+            // - _componentImportSpecifier = ComponentImport
+            const specifier = importStmt.specifiers.find((spec) => spec.local.name === id);
+            if (specifier) {
+              this._rawComponentPath = importStmt.source.value;
+              if (
+                specifier.type === 'ImportSpecifier' ||
+                specifier.type === 'ImportDefaultSpecifier'
+              ) {
+                this._componentImportSpecifier = specifier;
               }
             }
           }
-          const { code } = recast.print(p.value, {});
-          meta.component = code;
-        } else if (p.key.name === 'tags') {
-          let node = p.value;
-          if (t.isIdentifier(node)) {
-            node = findVarInitialization(node.name, this._ast.program);
-          }
-          meta.tags = parseTags(node);
-        } else if (p.key.name === 'id') {
-          if (t.isStringLiteral(p.value)) {
-            meta.id = p.value.value;
-          } else {
-            throw new Error(`Unexpected component id: ${p.value}`);
-          }
+        }
+        meta.component = this._editor.source(p.value);
+      } else if (key === 'tags') {
+        let node: Node | null = p.value;
+        if (node.type === 'Identifier') {
+          node = findVarInitialization(node.name, this._program);
+        }
+        meta.tags = parseTags(node);
+      } else if (key === 'id') {
+        if (isStringLiteral(p.value)) {
+          meta.id = p.value.value;
+        } else {
+          throw new Error(`Unexpected component id: ${p.value}`);
         }
       }
-    });
+    }
     this._meta = meta;
   }
 
-  getStoryExport(key: string) {
-    let node = this._storyExports[key] as t.Node;
-    node = t.isVariableDeclarator(node) ? (node.init as t.Node) : node;
+  getStoryExport(key: string): Node {
+    let node: Node | null = this._storyExports[key];
+    node = node?.type === 'VariableDeclarator' ? node.init : node;
     if (isCanonicalCsf2BindCall(node)) {
       node = this._templates[node.callee.object.name];
     }
-    return node;
+    return node as Node;
   }
 
-  parse() {
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const self = this;
-    traverse(this._ast, {
-      ExportDefaultDeclaration: {
-        enter(path) {
-          const { node, parent } = path;
-          const isVariableReference = t.isIdentifier(node.declaration) && t.isProgram(parent);
-
-          /**
-           * Transform inline default exports into a constant declaration as it is needed for the
-           * Vitest plugin to compose stories using CSF1 through CSF3 should not be needed at all
-           * once we move to CSF4 entirely
-           *
-           * `export default {};`
-           *
-           * Becomes
-           *
-           * `const _meta = {}; export default _meta;`
-           */
-          if (
-            self._options.transformInlineMeta &&
-            !isVariableReference &&
-            t.isExpression(node.declaration)
-          ) {
-            const metaId = path.scope.generateUidIdentifier('meta');
-            self._metaVariableName = metaId.name;
-            const nodes = [
-              t.variableDeclaration('const', [t.variableDeclarator(metaId, node.declaration)]),
-              t.exportDefaultDeclaration(metaId),
-            ];
-
-            // Preserve sourcemaps location
-            nodes.forEach((_node: t.Node) => (_node.loc = path.node.loc));
-            path.replaceWithMultiple(nodes);
-
-            // This is a bit brittle because it assumes that we will hit the inserted default export
-            // as the traversal continues.
-            return;
-          }
+  _metaObjectFrom(decl: Node | null | undefined): E.ObjectExpression | undefined {
+    if (decl?.type === 'ObjectExpression') {
+      // export default { ... };
+      return decl;
+    }
+    if (
+      // export default { ... } as Meta<...>
+      // export default { ... } satisfies Meta<...>
+      (decl?.type === 'TSAsExpression' || decl?.type === 'TSSatisfiesExpression') &&
+      decl.expression.type === 'ObjectExpression'
+    ) {
+      return decl.expression;
+    }
+    if (
+      // export default { ... } satisfies Meta as Meta<...>
+      decl?.type === 'TSAsExpression' &&
+      decl.expression.type === 'TSSatisfiesExpression' &&
+      decl.expression.expression.type === 'ObjectExpression'
+    ) {
+      return decl.expression.expression;
+    }
+    return undefined;
+  }
 
-          let metaNode: t.ObjectExpression | undefined;
-          let decl;
-          if (isVariableReference) {
-            // const meta = { ... };
-            // export default meta;
-            const variableName = (node.declaration as t.Identifier).name;
-            self._metaVariableName = variableName;
-            const isMetaVariable = (declaration: t.VariableDeclarator) =>
-              t.isIdentifier(declaration.id) && declaration.id.name === variableName;
-
-            self._metaStatementPath = self._file.path
-              .get('body')
-              .find(
-                (path) =>
-                  path.isVariableDeclaration() && path.node.declarations.some(isMetaVariable)
-              );
+  _visitExportDefault(node: E.ExportDefaultDeclaration) {
+    const isVariableReference = node.declaration.type === 'Identifier';
+
+    let decl: Node | null | undefined;
+    if (
+      this._options.transformInlineMeta &&
+      !isVariableReference &&
+      node.declaration.type !== 'FunctionDeclaration' &&
+      node.declaration.type !== 'ClassDeclaration' &&
+      node.declaration.type !== 'TSInterfaceDeclaration'
+    ) {
+      /**
+       * Transform inline default exports into a constant declaration as it is needed for the
+       * Vitest plugin to compose stories using CSF1 through CSF3 should not be needed at all once
+       * we move to CSF4 entirely
+       *
+       * `export default {};`
+       *
+       * Becomes
+       *
+       * `const _meta = {}; export default _meta;`
+       */
+      const metaName = generateUid(this._editor.scopes, 'meta');
+      this._metaVariableName = metaName;
+      const declaration = node.declaration as Node & { start: number; end: number };
+      this._editor.edits.overwrite(node.start, declaration.start, `const ${metaName} = `);
+      this._editor.edits.appendLeft(node.end, `\nexport default ${metaName};`);
+      this._metaStatement = node;
+      decl = declaration;
+    } else if (isVariableReference) {
+      // const meta = { ... };
+      // export default meta;
+      const variableName = (node.declaration as E.IdentifierReference).name;
+      this._metaVariableName = variableName;
+      const statement = this._program.body.find(
+        (candidate): candidate is E.VariableDeclaration =>
+          candidate.type === 'VariableDeclaration' &&
+          candidate.declarations.some((d) => isIdentifier(d.id, variableName))
+      );
+      this._metaStatement = statement;
+      decl = statement?.declarations.find((d) => isIdentifier(d.id, variableName))?.init;
+    } else {
+      this._metaStatement = node;
+      decl = node.declaration;
+    }
+
+    const metaNode = this._metaObjectFrom(decl);
+    if (metaNode) {
+      this._parseMeta(metaNode, this._program);
+    }
+
+    if (this._metaStatement && !this._metaNode) {
+      throw new NoMetaError(
+        'default export must be an object',
+        this._loc(this._metaStatement),
+        this._options.fileName
+      );
+    }
+  }
 
-            self._metaStatement = self._metaStatementPath?.node;
+  _visitExportNamed(node: E.ExportNamedDeclaration, isTopLevel: boolean) {
+    const { declaration } = node;
+    let declarations: (E.VariableDeclarator | E.Function)[] | undefined;
+    if (declaration?.type === 'VariableDeclaration') {
+      declarations = declaration.declarations;
+    } else if (declaration?.type === 'FunctionDeclaration') {
+      declarations = [declaration];
+    }
+    if (declarations) {
+      // export const X = ...;
+      for (const decl of declarations) {
+        const id = decl.id;
+        if (id?.type !== 'Identifier') {
+          continue;
+        }
+        const exportName = id.name;
+        if (exportName === '__namedExportsOrder' && decl.type === 'VariableDeclarator') {
+          this._namedExportsOrder = parseExportsOrder(decl.init);
+          continue;
+        }
 
-            decl = ((self?._metaStatement as t.VariableDeclaration)?.declarations || []).find(
-              isMetaVariable
-            )?.init;
+        // Determine the story node, unwrapping TS expressions
+        let storyNode: Node | null | undefined;
+        if (decl.type === 'VariableDeclarator') {
+          const init = decl.init;
+          if (init?.type === 'TSAsExpression' && init.expression.type === 'TSSatisfiesExpression') {
+            // { ... } satisfies Meta<...> as Meta<...>
+            storyNode = init.expression.expression;
+          } else if (init?.type === 'TSAsExpression' || init?.type === 'TSSatisfiesExpression') {
+            // { ... } as Meta<...>
+            // { ... } satisfies Meta<...>
+            storyNode = init.expression;
           } else {
-            self._metaStatement = node;
-            self._metaStatementPath = path;
-            decl = node.declaration;
+            storyNode = init;
           }
+        } else {
+          storyNode = decl;
+        }
 
-          if (t.isObjectExpression(decl)) {
-            // export default { ... };
-            metaNode = decl;
-          } else if (
-            // export default { ... } as Meta<...>
-            // export default { ... } satisfies Meta<...>
-            (t.isTSAsExpression(decl) || t.isTSSatisfiesExpression(decl)) &&
-            t.isObjectExpression(decl.expression)
-          ) {
-            metaNode = decl.expression;
-          } else if (
-            // export default { ... } satisfies Meta as Meta<...>
-            t.isTSAsExpression(decl) &&
-            t.isTSSatisfiesExpression(decl.expression) &&
-            t.isObjectExpression(decl.expression.expression)
-          ) {
-            metaNode = decl.expression.expression;
-          }
+        // Check if this is a factory story (meta.story() or meta.extend())
+        let storyIsFactory = false;
+        if (isCsfFactoryCall(storyNode)) {
+          storyIsFactory = true;
+          storyNode = storyNode.arguments[0] as Node | undefined;
+        }
 
-          if (metaNode && t.isProgram(parent)) {
-            self._parseMeta(metaNode, parent);
-          }
+        // Skip non-factory exports in factory files
+        if (this._metaIsFactory && !storyIsFactory) {
+          continue;
+        }
 
-          if (self._metaStatement && !self._metaNode) {
-            throw new NoMetaError(
-              'default export must be an object',
-              self._metaStatement,
-              self._options.fileName
+        if (!this._metaIsFactory && storyIsFactory) {
+          if (this._metaNode) {
+            throw new MixedFactoryError(
+              'expected non-factory story',
+              this._loc(storyNode ?? undefined),
+              this._options.fileName
+            );
+          } else {
+            throw new BadMetaError(
+              'meta() factory must be imported from .storybook/preview configuration',
+              this._loc(storyNode ?? undefined),
+              this._options.fileName
             );
           }
+        }
 
-          self._metaPath = path;
-        },
-      },
-      ExportNamedDeclaration: {
-        enter(path) {
-          const { node, parent } = path;
-          const declaration = path.get('declaration');
-          let declarations;
-          if (declaration.isVariableDeclaration()) {
-            declarations = declaration.get('declarations').filter((d) => d.isVariableDeclarator());
-          } else if (declaration.isFunctionDeclaration()) {
-            declarations = [declaration];
-          }
-          if (declarations) {
-            // export const X = ...;
-            declarations.forEach((declPath) => {
-              const decl = declPath.node;
-              const id = declPath.node.id;
-
-              if (t.isIdentifier(id)) {
-                const { name: exportName } = id;
-                if (exportName === '__namedExportsOrder' && declPath.isVariableDeclarator()) {
-                  self._namedExportsOrder = parseExportsOrder(declPath.node.init as t.Expression);
-                  return;
-                }
-
-                // Determine the story node, unwrapping TS expressions
-                let storyNode;
-                if (t.isVariableDeclarator(decl)) {
-                  if (
-                    t.isTSAsExpression(decl.init) &&
-                    t.isTSSatisfiesExpression(decl.init.expression)
-                  ) {
-                    // { ... } satisfies Meta<...> as Meta<...>
-                    storyNode = decl.init.expression.expression;
-                  } else if (
-                    t.isTSAsExpression(decl.init) ||
-                    t.isTSSatisfiesExpression(decl.init)
-                  ) {
-                    // { ... } as Meta<...>
-                    // { ... } satisfies Meta<...>
-                    storyNode = decl.init.expression;
-                  } else {
-                    storyNode = decl.init;
-                  }
-                } else {
-                  storyNode = decl;
-                }
-
-                // Check if this is a factory story (meta.story() or meta.extend())
-                let storyIsFactory = false;
-                if (storyNode && isCsfFactoryCall(storyNode)) {
-                  storyIsFactory = true;
-                  storyNode = storyNode.arguments[0];
-                }
-
-                // Skip non-factory exports in factory files
-                if (self._metaIsFactory && !storyIsFactory) {
-                  return;
-                }
-
-                if (!self._metaIsFactory && storyIsFactory) {
-                  if (self._metaNode) {
-                    throw new MixedFactoryError(
-                      'expected non-factory story',
-                      storyNode as t.Node,
-                      self._options.fileName
-                    );
-                  } else {
-                    throw new BadMetaError(
-                      'meta() factory must be imported from .storybook/preview configuration',
-                      storyNode as t.Node,
-                      self._options.fileName
-                    );
-                  }
-                }
-
-                // Now we know this is a valid story, register it
-                self._storyExports[exportName] = decl;
-                self._storyDeclarationPath[exportName] = declPath;
-                self._storyPaths[exportName] = path;
-                self._storyStatements[exportName] = node;
-                let name = storyNameFromExport(exportName);
-                if (self._storyAnnotations[exportName]) {
-                  logger.warn(
-                    `Unexpected annotations for "${exportName}" before story declaration`
-                  );
-                } else {
-                  self._storyAnnotations[exportName] = {};
-                }
-
-                const parameters: { [key: string]: any } = {};
-                if (t.isObjectExpression(storyNode)) {
-                  parameters.__isArgsStory = true; // assume default render is an args story
-                  // CSF3 object export
-                  (storyNode.properties as t.ObjectProperty[]).forEach((p) => {
-                    if (t.isIdentifier(p.key)) {
-                      const key = p.key.name;
-                      if (t.isObjectMethod(p)) {
-                        self._storyAnnotations[exportName][key] = p;
-                      } else {
-                        if (p.key.name === 'render') {
-                          parameters.__isArgsStory = isArgsStory(
-                            p.value as t.Expression,
-                            parent,
-                            self
-                          );
-                        } else if (p.key.name === 'name' && t.isStringLiteral(p.value)) {
-                          name = p.value.value;
-                        } else if (p.key.name === 'storyName' && t.isStringLiteral(p.value)) {
-                          logger.warn(
-                            `Unexpected usage of "storyName" in "${exportName}". Please use "name" instead.`
-                          );
-                        } else if (p.key.name === 'parameters' && t.isObjectExpression(p.value)) {
-                          const idProperty = p.value.properties.find(
-                            (property) =>
-                              t.isObjectProperty(property) &&
-                              t.isIdentifier(property.key) &&
-                              property.key.name === '__id'
-                          ) as t.ObjectProperty | undefined;
-                          if (idProperty) {
-                            parameters.__id = (idProperty.value as t.StringLiteral).value;
-                          }
-                        }
-                        self._storyAnnotations[exportName][p.key.name] = p.value;
-                      }
-                    }
-                  });
-                } else {
-                  parameters.__isArgsStory = isArgsStory(storyNode as t.Node, parent, self);
-                }
-                self._stories[exportName] = {
-                  id: 'FIXME',
-                  name,
-                  parameters,
-                  __stats: {
-                    factory: storyIsFactory,
-                  },
-                };
-              }
-            });
-          } else if (node.specifiers.length > 0) {
-            // export { X as Y }
-            node.specifiers.forEach((specifier) => {
-              if (
-                t.isExportSpecifier(specifier) &&
-                (t.isIdentifier(specifier.exported) || t.isStringLiteral(specifier.exported))
-              ) {
-                const exportName = t.isIdentifier(specifier.exported)
-                  ? specifier.exported.name
-                  : specifier.exported.value;
-                const { name: localName } = specifier.local;
-                const decl = t.isProgram(parent)
-                  ? findVarInitialization(localName, parent)
-                  : specifier.local;
-
-                if (exportName === 'default') {
-                  self._metaVariableName = localName;
-                  let metaNode: t.ObjectExpression | undefined;
-
-                  if (t.isObjectExpression(decl)) {
-                    // export default { ... };
-                    metaNode = decl;
-                  } else if (
-                    // export default { ... } as Meta<...>
-                    // export default { ... } satisfies Meta<...>
-                    (t.isTSAsExpression(decl) || t.isTSSatisfiesExpression(decl)) &&
-                    t.isObjectExpression(decl.expression)
-                  ) {
-                    metaNode = decl.expression;
-                  } else if (
-                    // export default { ... } satisfies Meta as Meta<...>
-                    t.isTSAsExpression(decl) &&
-                    t.isTSSatisfiesExpression(decl.expression) &&
-                    t.isObjectExpression(decl.expression.expression)
-                  ) {
-                    metaNode = decl.expression.expression;
-                  }
-
-                  if (metaNode && t.isProgram(parent)) {
-                    self._parseMeta(metaNode, parent);
-                  }
-                } else {
-                  const annotations = {} as Record<string, t.Node>;
-                  const storyNode = decl;
-                  if (t.isObjectExpression(storyNode)) {
-                    (storyNode.properties as t.ObjectProperty[]).forEach((p) => {
-                      if (t.isIdentifier(p.key)) {
-                        annotations[p.key.name] = p.value;
-                      }
-                    });
-                  }
-                  self._storyAnnotations[exportName] = annotations;
-                  self._storyStatements[exportName] = decl;
-                  self._storyPaths[exportName] = path;
-                  self._stories[exportName] = {
-                    id: 'FIXME',
-                    name: exportName,
-                    localName,
-                    parameters: {},
-                    __stats: {},
-                  };
-                }
-              }
-            });
-          }
-        },
-      },
-      ExpressionStatement: {
-        enter({ node, parent }) {
-          const { expression } = node;
-          // B.storyName = 'some string';
-          if (
-            t.isProgram(parent) &&
-            t.isAssignmentExpression(expression) &&
-            t.isMemberExpression(expression.left) &&
-            t.isIdentifier(expression.left.object) &&
-            t.isIdentifier(expression.left.property)
-          ) {
-            const exportName = expression.left.object.name;
-            const annotationKey = expression.left.property.name;
-            const annotationValue = expression.right;
-
-            if (self._storyAnnotations[exportName]) {
-              self._storyAnnotations[exportName][annotationKey] = annotationValue;
-            }
-
-            if (annotationKey === 'storyName' && t.isStringLiteral(annotationValue)) {
-              const storyName = annotationValue.value;
-              const story = self._stories[exportName];
+        // Now we know this is a valid story, register it
+        this._storyExports[exportName] = decl;
+        this._storyStatements[exportName] = node;
+        let name = storyNameFromExport(exportName);
+        if (this._storyAnnotations[exportName]) {
+          logger.warn(`Unexpected annotations for "${exportName}" before story declaration`);
+        } else {
+          this._storyAnnotations[exportName] = {};
+        }
 
-              if (!story) {
-                return;
+        const parameters: { [key: string]: any } = {};
+        if (storyNode?.type === 'ObjectExpression') {
+          parameters.__isArgsStory = true; // assume default render is an args story
+          // CSF3 object export
+          for (const p of storyNode.properties) {
+            const key = identifierKey(p);
+            if (p.type !== 'Property' || key === undefined) {
+              continue;
+            }
+            if (p.method) {
+              this._storyAnnotations[exportName][key] = p.value;
+              continue;
+            }
+            if (key === 'render') {
+              parameters.__isArgsStory = isArgsStory(p.value, isTopLevel, this);
+            } else if (key === 'name' && isStringLiteral(p.value)) {
+              name = p.value.value;
+            } else if (key === 'storyName' && isStringLiteral(p.value)) {
+              logger.warn(
+                `Unexpected usage of "storyName" in "${exportName}". Please use "name" instead.`
+              );
+            } else if (key === 'parameters' && p.value.type === 'ObjectExpression') {
+              const idProperty = p.value.properties.find(
+                (property): property is E.ObjectProperty =>
+                  property.type === 'Property' && identifierKey(property) === '__id'
+              );
+              if (idProperty) {
+                parameters.__id = (idProperty.value as E.StringLiteral).value;
               }
-              story.name = storyName;
             }
+            this._storyAnnotations[exportName][key] = p.value;
           }
-          // B.test('foo', () => {})
-          // B.test('foo', context, () => {})
-          if (
-            t.isCallExpression(expression) &&
-            t.isMemberExpression(expression.callee) &&
-            t.isIdentifier(expression.callee.object) &&
-            t.isIdentifier(expression.callee.property) &&
-            expression.callee.property.name === 'test' &&
-            expression.arguments.length >= 2 &&
-            t.isStringLiteral(expression.arguments[0])
-          ) {
-            const exportName = expression.callee.object.name;
-            const testName = expression.arguments[0].value;
-            const testFunction =
-              expression.arguments.length === 2 ? expression.arguments[1] : expression.arguments[2];
-            const testArguments =
-              expression.arguments.length === 2 ? null : expression.arguments[1];
-            const tags = parseTestTags(testArguments as t.Node | null, self._ast.program);
-
-            self._tests.push({
-              function: testFunction,
-              name: testName,
-              node: expression,
-              // can't set id because meta title isn't available yet
-              // so it's set later on
-              id: 'FIXME',
-              tags,
-              parent: { node: self._storyStatements[exportName] },
-            });
-
-            // TODO: fix this when stories fail
-            self._stories[exportName].__stats.tests = true;
-          }
-        },
-      },
-      CallExpression: {
-        enter(path) {
-          const { node } = path;
-          const { callee } = node;
-          if (t.isIdentifier(callee) && callee.name === 'storiesOf') {
-            throw new Error(dedent`
-              Unexpected \`storiesOf\` usage: ${formatLocation(node, self._options.fileName)}.
-
-              \`storiesOf\` was removed in Storybook 8.0. Write stories in CSF instead.
-            `);
+        } else {
+          parameters.__isArgsStory = storyNode ? isArgsStory(storyNode, isTopLevel, this) : false;
+        }
+        this._stories[exportName] = {
+          id: 'FIXME',
+          name,
+          parameters,
+          __stats: {
+            factory: storyIsFactory,
+          },
+        };
+      }
+    } else if (node.specifiers.length > 0) {
+      // export { X as Y }
+      for (const specifier of node.specifiers) {
+        if (specifier.local.type !== 'Identifier') {
+          continue;
+        }
+        const exportName =
+          specifier.exported.type === 'Identifier'
+            ? specifier.exported.name
+            : (specifier.exported as E.StringLiteral).value;
+        const localName = specifier.local.name;
+        const decl = isTopLevel ? findVarInitialization(localName, this._program) : specifier.local;
+
+        if (exportName === 'default') {
+          this._metaVariableName = localName;
+          const metaNode = this._metaObjectFrom(decl);
+          if (metaNode && isTopLevel) {
+            this._parseMeta(metaNode, this._program);
           }
-          if (
-            t.isMemberExpression(callee) &&
-            t.isIdentifier(callee.property) &&
-            callee.property.name === 'meta' &&
-            !callee.computed
-          ) {
-            // Find the root object for factory pattern:
-            // - preview.meta() => preview
-            // - preview.type().meta() => preview
-            let rootObject = callee.object;
-            if (t.isCallExpression(rootObject) && t.isMemberExpression(rootObject.callee)) {
-              rootObject = rootObject.callee.object;
-            }
-
-            if (t.isIdentifier(rootObject)) {
-              const configCandidate = path.scope.getBinding(rootObject.name);
-              const configParent = configCandidate?.path?.parentPath?.node;
-              if (t.isImportDeclaration(configParent)) {
-                if (isValidPreviewPath(configParent.source.value)) {
-                  self._metaIsFactory = true;
-                  self._metaFactoryCall = node;
-                  const metaDeclarator = path.findParent((p) => p.isVariableDeclarator());
-
-                  // find the name of the meta variable declaration
-                  // e.g. const foo = preview.meta({ ... });
-                  // otherwise fallback to meta
-                  self._metaVariableName =
-                    metaDeclarator?.isVariableDeclarator() && t.isIdentifier(metaDeclarator.node.id)
-                      ? metaDeclarator.node.id.name
-                      : callee.property.name;
-                  const [argument] = node.arguments;
-                  const argumentBinding =
-                    argument && t.isIdentifier(argument)
-                      ? path.scope.getBinding(argument.name)
-                      : undefined;
-                  const argumentNode =
-                    argumentBinding?.constant && argumentBinding.path.isVariableDeclarator()
-                      ? argumentBinding.path.node.init
-                      : argument;
-                  const unwrappedArgument = argumentNode && unwrapExpression(argumentNode);
-                  if (t.isObjectExpression(unwrappedArgument)) {
-                    self._parseMeta(unwrappedArgument, self._ast.program);
-                  } else {
-                    self._metaNodeIsSynthetic = true;
-                    self._parseMeta(t.objectExpression([]), self._ast.program);
-                  }
-                } else if (rootObject.name === 'preview') {
-                  // Only throw if the variable is named "preview" - this indicates
-                  // the user is trying to use CSF Factories but with a wrong import path.
-                  // Other .meta() calls (e.g., Zod v4's .meta()) are silently ignored.
-                  throw new BadMetaError(
-                    'meta() factory must be imported from .storybook/preview configuration',
-                    configParent,
-                    self._options.fileName
-                  );
-                }
+        } else {
+          const annotations = {} as Record<string, Node>;
+          const storyNode = decl;
+          if (storyNode?.type === 'ObjectExpression') {
+            for (const p of storyNode.properties) {
+              const key = identifierKey(p);
+              if (p.type === 'Property' && key !== undefined) {
+                annotations[key] = p.value;
               }
             }
           }
-        },
-      },
-      ImportDeclaration: {
-        enter({ node }) {
-          const { source } = node;
-          if (t.isStringLiteral(source)) {
-            self.imports.push(source.value);
-          } else {
-            throw new Error('CSF: unexpected import source');
+          this._storyAnnotations[exportName] = annotations;
+          this._storyStatements[exportName] = decl as Node;
+          this._stories[exportName] = {
+            id: 'FIXME',
+            name: exportName,
+            localName,
+            parameters: {},
+            __stats: {},
+          };
+        }
+      }
+    }
+  }
+
+  _visitExpressionStatement(node: E.ExpressionStatement, isTopLevel: boolean) {
+    const { expression } = node;
+    // B.storyName = 'some string';
+    if (
+      isTopLevel &&
+      expression.type === 'AssignmentExpression' &&
+      expression.left.type === 'MemberExpression' &&
+      expression.left.object.type === 'Identifier' &&
+      expression.left.property.type === 'Identifier'
+    ) {
+      const exportName = expression.left.object.name;
+      const annotationKey = expression.left.property.name;
+      const annotationValue = expression.right;
+
+      if (this._storyAnnotations[exportName]) {
+        this._storyAnnotations[exportName][annotationKey] = annotationValue;
+      }
+
+      if (annotationKey === 'storyName' && isStringLiteral(annotationValue)) {
+        const storyName = annotationValue.value;
+        const story = this._stories[exportName];
+
+        if (story) {
+          story.name = storyName;
+        }
+      }
+    }
+    // B.test('foo', () => {})
+    // B.test('foo', context, () => {})
+    if (
+      expression.type === 'CallExpression' &&
+      expression.callee.type === 'MemberExpression' &&
+      expression.callee.object.type === 'Identifier' &&
+      expression.callee.property.type === 'Identifier' &&
+      expression.callee.property.name === 'test' &&
+      expression.arguments.length >= 2 &&
+      isStringLiteral(expression.arguments[0])
+    ) {
+      const exportName = expression.callee.object.name;
+      const testName = expression.arguments[0].value;
+      const testFunction =
+        expression.arguments.length === 2 ? expression.arguments[1] : expression.arguments[2];
+      const testArguments = expression.arguments.length === 2 ? null : expression.arguments[1];
+      const tags = parseTestTags(testArguments, this._program);
+
+      this._tests.push({
+        function: testFunction,
+        name: testName,
+        node: expression,
+        // can't set id because meta title isn't available yet
+        // so it's set later on
+        id: 'FIXME',
+        tags,
+        parent: { node: this._storyStatements[exportName] },
+      });
+
+      // TODO: fix this when stories fail
+      this._stories[exportName].__stats.tests = true;
+    }
+  }
+
+  _visitCallExpression(node: E.CallExpression, ancestors: Node[]) {
+    const { callee } = node;
+    if (isIdentifier(callee, 'storiesOf')) {
+      throw new Error(dedent`
+        Unexpected \`storiesOf\` usage: ${formatLocation(this._loc(node), this._options.fileName)}.
+
+        \`storiesOf\` was removed in Storybook 8.0. Write stories in CSF instead.
+      `);
+    }
+    if (
+      callee.type === 'MemberExpression' &&
+      isIdentifier(callee.property, 'meta') &&
+      !callee.computed
+    ) {
+      // Find the root object for factory pattern:
+      // - preview.meta() => preview
+      // - preview.type().meta() => preview
+      let rootObject: Node = callee.object;
+      if (rootObject.type === 'CallExpression' && rootObject.callee.type === 'MemberExpression') {
+        rootObject = rootObject.callee.object;
+      }
+
+      if (rootObject.type === 'Identifier') {
+        const configCandidate = this._editor.scopes.bindingOf(rootObject);
+        const configParent = configCandidate?.declaration;
+        if (configParent?.type === 'ImportDeclaration') {
+          if (isValidPreviewPath(configParent.source.value)) {
+            this._metaIsFactory = true;
+            this._metaFactoryCall = node;
+            const metaDeclarator = ancestors.findLast(
+              (ancestor): ancestor is E.VariableDeclarator => ancestor.type === 'VariableDeclarator'
+            );
+
+            // find the name of the meta variable declaration
+            // e.g. const foo = preview.meta({ ... });
+            // otherwise fallback to meta
+            this._metaVariableName =
+              metaDeclarator?.id.type === 'Identifier' ? metaDeclarator.id.name : 'meta';
+            const [argument] = node.arguments;
+            const argumentBinding =
+              argument?.type === 'Identifier' ? this._editor.scopes.bindingOf(argument) : undefined;
+            const argumentNode =
+              argumentBinding?.constant && argumentBinding.node.type === 'VariableDeclarator'
+                ? argumentBinding.node.init
+                : argument;
+            const unwrappedArgument = argumentNode && unwrapExpression(argumentNode as Node);
+            if (unwrappedArgument?.type === 'ObjectExpression') {
+              this._parseMeta(unwrappedArgument, this._program);
+            } else {
+              this._metaNodeIsSynthetic = true;
+              this._parseMeta(
+                { type: 'ObjectExpression', properties: [], start: node.start, end: node.start },
+                this._program
+              );
+            }
+          } else if (rootObject.name === 'preview') {
+            // Only throw if the variable is named "preview" - this indicates
+            // the user is trying to use CSF Factories but with a wrong import path.
+            // Other .meta() calls (e.g., Zod v4's .meta()) are silently ignored.
+            throw new BadMetaError(
+              'meta() factory must be imported from .storybook/preview configuration',
+              this._loc(configParent),
+              this._options.fileName
+            );
           }
-        },
-      },
-    });
+        }
+      }
+    }
+  }
 
-    if (!self._meta) {
-      throw new NoMetaError('missing default export', self._ast, self._options.fileName);
+  parse() {
+    const visit = (node: Node, ancestors: Node[]) => {
+      const parent = ancestors.at(-1);
+      const isTopLevel = parent?.type === 'Program';
+      switch (node.type) {
+        case 'ImportDeclaration':
+          this.imports.push(node.source.value);
+          return;
+        case 'ExportDefaultDeclaration':
+          this._visitExportDefault(node);
+          break;
+        case 'ExportNamedDeclaration':
+          this._visitExportNamed(node, isTopLevel);
+          break;
+        case 'ExpressionStatement':
+          this._visitExpressionStatement(node, isTopLevel);
+          break;
+        case 'CallExpression':
+          this._visitCallExpression(node, ancestors);
+          break;
+      }
+      ancestors.push(node);
+      for (const child of childNodes(node)) {
+        visit(child, ancestors);
+      }
+      ancestors.pop();
+    };
+    visit(this._program, []);
+
+    if (!this._meta) {
+      // The program node starts at its first statement, not at the start of the file.
+      throw new NoMetaError(
+        'missing default export',
+        this._loc({ start: 0, end: 0 }),
+        this._options.fileName
+      );
     }
 
     // default export can come at any point in the file, so we do this post processing last
-    const entries = Object.entries(self._stories);
-    self._meta.title = this._options.makeTitle(self._meta?.title as string);
-    if (self._metaAnnotations.play) {
-      self._meta.tags = [...(self._meta.tags || []), Tag.PLAY_FN];
+    const entries = Object.entries(this._stories);
+    this._meta.title = this._options.makeTitle(this._meta?.title as string);
+    if (this._metaAnnotations.play) {
+      this._meta.tags = [...(this._meta.tags || []), Tag.PLAY_FN];
     }
-    self._stories = entries.reduce(
+    this._stories = entries.reduce(
       (acc, [key, story]) => {
-        if (!isExportStory(key, self._meta as StaticMeta)) {
+        if (!isExportStory(key, this._meta as StaticMeta)) {
           return acc;
         }
         const id =
           story.parameters?.__id ??
-          toId((self._meta?.id || self._meta?.title) as string, storyNameFromExport(key));
+          toId((this._meta?.id || this._meta?.title) as string, storyNameFromExport(key));
         const parameters: Record<string, any> = { ...story.parameters, __id: id };
 
-        const { includeStories } = self._meta || {};
+        const { includeStories } = this._meta || {};
         if (
           key === '__page' &&
           (entries.length === 1 || (Array.isArray(includeStories) && includeStories.length === 1))
@@ -977,12 +1000,11 @@ export class CsfFile {
           parameters.docsOnly = true;
         }
         acc[key] = { ...story, id, parameters };
-        const storyAnnotations = self._storyAnnotations[key];
+        const storyAnnotations = this._storyAnnotations[key];
         const { tags, play } = storyAnnotations;
         if (tags) {
-          const node = t.isIdentifier(tags)
-            ? findVarInitialization(tags.name, this._ast.program)
-            : tags;
+          const node =
+            tags.type === 'Identifier' ? findVarInitialization(tags.name, this._program) : tags;
           acc[key].tags = parseTags(node);
         }
         if (play) {
@@ -991,17 +1013,18 @@ export class CsfFile {
         const stats = acc[key].__stats;
         ['play', 'render', 'loaders', 'beforeEach', 'globals', 'tags'].forEach((annotation) => {
           stats[annotation as keyof IndexInputStats] =
-            !!storyAnnotations[annotation] || !!self._metaAnnotations[annotation];
+            !!storyAnnotations[annotation] || !!this._metaAnnotations[annotation];
         });
-        const storyExport = self.getStoryExport(key);
+        const storyExport = this.getStoryExport(key);
         stats.storyFn = !!(
-          t.isArrowFunctionExpression(storyExport) || t.isFunctionDeclaration(storyExport)
+          storyExport?.type === 'ArrowFunctionExpression' ||
+          storyExport?.type === 'FunctionDeclaration'
         );
-        stats.mount = hasMount(storyAnnotations.play ?? self._metaAnnotations.play);
-        stats.moduleMock = !!self.imports.find((fname) => isModuleMock(fname));
+        stats.mount = hasMount(storyAnnotations.play ?? this._metaAnnotations.play);
+        stats.moduleMock = !!this.imports.find((fname) => isModuleMock(fname));
 
-        const storyNode = self._storyStatements[key];
-        const storyTests = self._tests.filter((t) => t.parent.node === storyNode);
+        const storyNode = this._storyStatements[key];
+        const storyTests = this._tests.filter((t) => t.parent.node === storyNode);
         if (storyTests.length > 0) {
           // TODO: [test-syntax] if we want to add a tag for the story that contains tests, this is the place for it
           // acc[key].tags = [...(acc[key].tags || []), 'story-with-tests'];
@@ -1017,20 +1040,20 @@ export class CsfFile {
       {} as Record<string, StaticStory>
     );
 
-    Object.keys(self._storyExports).forEach((key) => {
-      if (!isExportStory(key, self._meta as StaticMeta)) {
-        delete self._storyExports[key];
-        delete self._storyAnnotations[key];
-        delete self._storyStatements[key];
+    Object.keys(this._storyExports).forEach((key) => {
+      if (!isExportStory(key, this._meta as StaticMeta)) {
+        delete this._storyExports[key];
+        delete this._storyAnnotations[key];
+        delete this._storyStatements[key];
       }
     });
 
-    if (self._namedExportsOrder) {
-      const unsortedExports = Object.keys(self._storyExports);
-      self._storyExports = sortExports(self._storyExports, self._namedExportsOrder);
-      self._stories = sortExports(self._stories, self._namedExportsOrder);
+    if (this._namedExportsOrder) {
+      const unsortedExports = Object.keys(this._storyExports);
+      this._storyExports = sortExports(this._storyExports, this._namedExportsOrder);
+      this._stories = sortExports(this._stories, this._namedExportsOrder);
 
-      const sortedExports = Object.keys(self._storyExports);
+      const sortedExports = Object.keys(this._storyExports);
       if (unsortedExports.length !== sortedExports.length) {
         throw new Error(
           `Missing exports after sort: ${unsortedExports.filter(
@@ -1040,7 +1063,7 @@ export class CsfFile {
       }
     }
 
-    return self as CsfFile & IndexedCSFFile;
+    return this as CsfFile & IndexedCSFFile;
   }
 
   public get meta() {
@@ -1051,7 +1074,7 @@ export class CsfFile {
     return Object.values(this._stories);
   }
 
-  public getStoryTests(story: string | t.Node) {
+  public getStoryTests(story: string | Node) {
     const storyNode = typeof story === 'string' ? this._storyStatements[story] : story;
     if (!storyNode) {
       return [];
@@ -1122,47 +1145,75 @@ export class CsfFile {
   }
 }
 
-/** Using new babel.File is more powerful and give access to API such as buildCodeFrameError */
-export const babelParseFile = ({
-  code,
-  filename = '',
-  ast,
-}: {
-  code: string;
-  filename?: string;
-  ast?: t.File;
-}): BabelFile => {
-  return new BabelFileClass(
-    { filename, highlightCode: false },
-    { code, ast: ast ?? babelParse(code) }
-  );
+// Children in source order; type annotations are skipped since CSF never reads them.
+const childNodes = (node: Node): Node[] => {
+  const result: Node[] = [];
+  for (const key in node) {
+    if (
+      key === 'parent' ||
+      key === 'typeAnnotation' ||
+      key === 'returnType' ||
+      key === 'typeParameters' ||
+      key === 'typeArguments'
+    ) {
+      continue;
+    }
+    const value = (node as any)[key];
+    if (Array.isArray(value)) {
+      for (const item of value) {
+        if (item && typeof item === 'object' && typeof item.type === 'string') {
+          result.push(item);
+        }
+      }
+    } else if (value && typeof value === 'object' && typeof value.type === 'string') {
+      result.push(value);
+    }
+  }
+  return result.sort((a: any, b: any) => a.start - b.start);
 };
 
-export const loadCsf = (code: string, options: CsfOptions) => {
-  const ast = babelParse(code);
-  const file = babelParseFile({ code, filename: options.fileName, ast });
-  return new CsfFile(ast, options, file);
+export const loadCsf = (code: string, options: CsfOptions) => new CsfFile(code, options);
+
+type MagicStringSourceMap = ReturnType<SourceEditor['edits']['generateMap']>;
+
+/** A source map that carries the content of its source, as Vite and Rollup expect. */
+export type CsfSourceMap = Omit<MagicStringSourceMap, 'sourcesContent'> & {
+  sourcesContent: string[];
 };
 
+export interface FormatCsfOptions {
+  sourceMaps?: boolean;
+  /** Source name the map refers to; defaults to the file name the CSF was loaded with. */
+  sourceFileName?: string;
+}
+
+/**
+ * Print the file with its pending edits. With `sourceMaps`, returns the code and a hi-res source map
+ * from the loaded code to the output.
+ */
 export const formatCsf = (
   csf: CsfFile,
-  options: GeneratorOptions & { inputSourceMap?: any } = { sourceMaps: false },
-  code?: string
-): ReturnType<typeof generate> | string => {
-  const result = generate(csf._ast, options, code);
-  if (options.sourceMaps) {
-    return result;
+  options: FormatCsfOptions = { sourceMaps: false }
+): { code: string; map: CsfSourceMap } | string => {
+  const code = csf._editor.toString();
+  if (!options.sourceMaps) {
+    return code;
   }
-  return result.code;
+  return {
+    code,
+    map: csf._editor.edits.generateMap({
+      hires: true,
+      source: options.sourceFileName ?? csf._options.fileName,
+      includeContent: true,
+    }) as CsfSourceMap,
+  };
 };
 
-/** Use this function, if you want to preserve styles. Uses recast under the hood. */
-export const printCsf = (csf: CsfFile, options: RecastOptions = {}): PrintResultType => {
-  return recast.print(csf._ast, {
-    // Recast defaults this to `os.EOL`, which would carriage-return printed files on Windows.
-    lineTerminator: '\n',
-    ...options,
-  });
+/** Print the file with its pending edits; untouched code is preserved byte for byte. */
+export const printCsf = (csf: CsfFile): PrintResultType => {
+  // Written files always use LF line endings, whatever the input used.
+  const code = csf._editor.toString().replace(/\r\n?/g, '\n');
+  return { code, toString: () => code };
 };
 
 export const readCsf = async (fileName: string, options: CsfOptions) => {
@@ -1178,3 +1229,5 @@ export const writeCsf = async (csf: CsfFile, fileName?: string) => {
   }
   await writeFile(fileName as string, printCsf(csf).code);
 };
+
+export { isFunction };
diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index e2167bbb0133..619cfba06d4f 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -1,10 +1,8 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
-import { types as t } from 'storybook/internal/babel';
-
 import { loadCsf, printCsf } from './CsfFile.ts';
 import { loadConfig } from './ConfigFile.ts';
-import type { CsfValue } from './CsfObject.ts';
+import { type CsfValue, parseExpression, printExpression } from './CsfObject.ts';
 
 const parse = (source: string) =>
   loadCsf(source, { makeTitle: (title) => title ?? 'title' }).parse();
@@ -12,6 +10,20 @@ const parse = (source: string) =>
 describe('CsfObject', () => {
   afterEach(() => vi.unstubAllGlobals());
 
+  it.each(['<T>(value: T) => value', '<number>size'])(
+    'reads %s, which only a .ts file allows',
+    (expression) => {
+      const csf = loadCsf(`const size = 1;\nexport default { parameters: ${expression} };`, {
+        fileName: 'Button.stories.ts',
+        makeTitle: (title) => title ?? 'title',
+      }).parse();
+      const [meta] = csf.objects({ stories: false });
+
+      expect(printExpression(meta.get(['parameters'])!)).toBe(expression);
+      expect(printExpression(parseExpression(expression))).toBe(expression);
+    }
+  );
+
   it.each([
     { expression: 'false', expected: false },
     { expression: '-2.5', expected: -2.5 },
@@ -143,13 +155,11 @@ describe('CsfObject', () => {
     const [story] = csf.objects({ meta: false });
     story.rename(['play'], 'beforeEach');
     story.transform(['beforeEach'], (value) => {
-      if (!t.isFunctionExpression(value)) {
+      if (value.type !== 'FunctionExpression') {
         throw new Error('Expected a function expression');
       }
-      return {
-        ...value,
-        body: t.blockStatement([...value.body.body, t.returnStatement(t.booleanLiteral(true))]),
-      };
+      const source = printExpression(value);
+      return parseExpression(`${source.slice(0, source.lastIndexOf('}'))} return true; }`);
     });
     expect(printCsf(csf).code).toContain('beforeEach()');
     expect(printCsf(csf).code).toContain('return true;');
@@ -212,7 +222,7 @@ describe('CsfObject', () => {
     });
     const output = parse(printCsf(csf).code);
     const [updated] = output.objects({ meta: true, stories: false });
-    expect(updated.get(destination)).toMatchObject({ type: 'StringLiteral', value: 'mobile' });
+    expect(updated.get(destination)).toMatchObject({ type: 'Literal', value: 'mobile' });
     if (destination[0] === 'globals') {
       expect(updated.get(['parameters'])).toBeUndefined();
     } else if (destination.length === 2) {
@@ -318,7 +328,7 @@ describe('CsfObject', () => {
     const [updated] = parse(printCsf(csf).code).objects({ meta: false });
     expect(updated.get(['args', 'appearance', 'dark'])).toMatchObject({ value: true });
     expect(updated.get(['args', 'labels'])).toMatchObject({
-      elements: [{ type: 'StringLiteral', value: 'original' }],
+      elements: [{ type: 'Literal', value: 'original' }],
     });
   });
 
@@ -326,13 +336,13 @@ describe('CsfObject', () => {
     const csf = parse(`export default { title: 'Original' };`);
     const [meta] = csf.objects({ meta: true, stories: false });
     const value = meta.get(['title']);
-    const replacement = t.stringLiteral('Replacement');
+    const replacement = parseExpression('"Replacement"');
 
-    if (t.isStringLiteral(value)) {
+    if (value?.type === 'Literal') {
       value.value = 'Mutated';
     }
     expect(meta.set(['title'], replacement)).toEqual({ ok: true, changed: true });
-    replacement.value = 'Mutated replacement';
+    (replacement as { value: unknown }).value = 'Mutated replacement';
 
     expect(printCsf(csf).code).toContain('title: "Replacement"');
     expect(printCsf(csf).code).not.toContain('Mutated');
@@ -350,7 +360,7 @@ describe('CsfObject', () => {
     expect(stories).toHaveLength(1);
     expect(stories[0].target).toEqual({ kind: 'story', exportName: 'First', localName: 'Local' });
     expect(stories[0].get(['parameters', 'componentSubtitle'])).toMatchObject({
-      type: 'StringLiteral',
+      type: 'Literal',
       value: 'Aliased',
     });
   });
@@ -487,8 +497,8 @@ describe('CsfObject', () => {
 
     expect(
       meta.transform(['parameters', 'backgrounds', 'values'], (values) =>
-        t.isArrayExpression(values) && t.isExpression(values.elements[0])
-          ? t.objectExpression([t.objectProperty(t.identifier('gray'), values.elements[0])])
+        values.type === 'ArrayExpression' && values.elements[0]
+          ? parseExpression(`{\n  gray: ${printExpression(values.elements[0])}\n}`)
           : undefined
       )
     ).toEqual({ ok: true, changed: true });
@@ -550,12 +560,12 @@ describe('CsfObject', () => {
     const csf = parse(source);
     const [meta] = csf.objects({ meta: true, stories: false });
 
-    expect(meta.set(['parameters', '__proto__', 'polluted'], t.booleanLiteral(true))).toMatchObject(
-      {
-        ok: false,
-        diagnostic: { code: 'unsupported-member' },
-      }
-    );
+    expect(
+      meta.set(['parameters', '__proto__', 'polluted'], parseExpression('true'))
+    ).toMatchObject({
+      ok: false,
+      diagnostic: { code: 'unsupported-member' },
+    });
     expect(printCsf(csf).code).toBe(source);
   });
 
@@ -682,10 +692,10 @@ describe('CsfObject', () => {
   it('replaces a shorthand property value', () => {
     const csf = parse('const name = "old"; export default { name };');
     const [meta] = csf.objects({ stories: false });
-    meta.set(['name'], t.stringLiteral('new'));
+    meta.set(['name'], parseExpression("'new'"));
 
     const [updated] = parse(printCsf(csf).code).objects({ stories: false });
-    expect(updated.get(['name'])).toMatchObject({ type: 'StringLiteral', value: 'new' });
+    expect(updated.get(['name'])).toMatchObject({ type: 'Literal', value: 'new' });
   });
 
   it('preserves a shorthand property value when renaming its key', () => {
@@ -748,7 +758,7 @@ describe('CsfObject', () => {
     `);
     const [meta] = csf.objects({ meta: true, stories: false });
 
-    expect(meta.get(['title'])).toMatchObject({ type: 'StringLiteral', value: 'Example' });
+    expect(meta.get(['title'])).toMatchObject({ type: 'Literal', value: 'Example' });
   });
 
   it('rejects mutable identifier-backed factory meta configuration', () => {
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index 6f9f688faf0a..b1f5b0ffe299 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -1,6 +1,32 @@
-import { type NodePath, types as t } from 'storybook/internal/babel';
-
-import { pathForNode, unwrapExpression } from './story-shape/index.ts';
+import {
+  type E,
+  type Node,
+  type Property,
+  type SourceLocation,
+  isIdentifier,
+  isNumericLiteral,
+  locationOf,
+  expressionFromSource,
+  staticKey,
+  textOf,
+  unwrapExpression,
+} from './estree/ast.ts';
+import {
+  type SourceEditor,
+  appendMembers,
+  functionFromMethod,
+  isSpan,
+  keySource,
+  memberText,
+  prependMembers,
+  printKey,
+  printValue,
+  removeMembers,
+  renameKey,
+  renamedMemberText,
+  replaceValue,
+  separatorBefore,
+} from './estree/editor.ts';
 
 export type CsfObjectTarget =
   | { kind: 'config' }
@@ -31,7 +57,7 @@ export interface CsfMutationDiagnostic {
   target: CsfObjectTarget;
   path: readonly string[];
   message: string;
-  loc?: t.SourceLocation;
+  loc?: SourceLocation;
 }
 
 export type CsfMutationResult =
@@ -47,6 +73,34 @@ export type CsfValue =
   | readonly CsfValue[]
   | { readonly [key: string]: CsfValue };
 
+/**
+ * An expression detached from any file, as returned by `get` and accepted by `set` and
+ * `transform`. It is a plain OXC ESTree node; its source is kept alongside it, so a value read from
+ * one file can be written to another without a code generator.
+ */
+export type CsfExpression = E.Expression;
+
+/**
+ * Parse source into a detached expression for `set` and `transform`.
+ *
+ * @example
+ * ```ts
+ * object.transform(['tags'], (value) => parseExpression(`[...${printExpression(value)}, 'autodocs']`));
+ * ```
+ */
+export const parseExpression = (code: string): CsfExpression => expressionFromSource(code);
+
+/** Source of an expression returned by `get` or `parseExpression`, or of any node inside one. */
+export const printExpression = (node: Node): string => {
+  const source = textOf(node);
+  if (source === undefined) {
+    throw new Error(
+      'CsfObject: expressions must come from `get`, `transform` or `parseExpression`'
+    );
+  }
+  return source;
+};
+
 export interface CsfObject {
   /**
    * Identify the config, meta, story, annotation, or call argument this editor represents.
@@ -71,8 +125,8 @@ export interface CsfObject {
    */
   readonly changed: boolean;
   /**
-   * Read a copy of the Babel expression at a property path. For a CSF2 annotation, its annotation
-   * path returns the whole object. Missing fields return `undefined`.
+   * Read a detached copy of the expression at a property path. For a CSF2 annotation, its
+   * annotation path returns the whole object. Missing fields return `undefined`.
    *
    * @example
    * ```ts
@@ -81,7 +135,7 @@ export interface CsfObject {
    * object.get(['missing']); // undefined
    * ```
    */
-  get(path: readonly string[]): t.Expression | undefined;
+  get(path: readonly string[]): CsfExpression | undefined;
   /**
    * Read plain values without executing code. Missing fields return `undefined`; unresolved
    * expressions also return `undefined` and add a mutation diagnostic.
@@ -96,8 +150,7 @@ export interface CsfObject {
    */
   getValue(path: readonly string[]): CsfValue;
   /**
-   * Set a plain value or Babel expression, creating missing parents. Accepts nested arrays and
-   * objects; top-level expression-shaped objects are interpreted as AST nodes.
+   * Set a plain value or an expression from `get` / `parseExpression`, creating missing parents.
    *
    * @example
    * ```ts
@@ -107,24 +160,23 @@ export interface CsfObject {
    * object.getValue(['parameters']); // { a11y: { test: 'todo', enabled: true } }
    * ```
    */
-  set(path: readonly string[], value: CsfValue | t.Expression): CsfMutationResult;
+  set(path: readonly string[], value: CsfValue | CsfExpression): CsfMutationResult;
   /**
-   * Replace a value using its live Babel expression. Reused nodes preserve their source formatting.
-   * Return a new node, or `undefined` to leave the value unchanged. Do not mutate or retain the input
-   * node: such changes bypass change tracking and diagnostics.
+   * Replace a value derived from its current expression. Return a new expression, or `undefined`
+   * (or the input) to leave the value unchanged.
    *
    * @example
    * ```ts
    * const object = loadConfig("export default { tags: ['docs'] };").parse();
    * object.transform(['tags'], (value) =>
-   *   t.arrayExpression([t.spreadElement(value), t.stringLiteral('autodocs')])
+   *   parseExpression(`[...${printExpression(value)}, 'autodocs']`)
    * ); // { ok: true, changed: true }
    * object.getValue(['tags']); // ['docs', 'autodocs']
    * ```
    */
   transform(
     path: readonly string[],
-    derive: (value: t.Expression) => t.Expression | undefined
+    derive: (value: CsfExpression) => CsfExpression | undefined
   ): CsfMutationResult;
   /**
    * Remove a property and recursively clean up empty parents. Missing fields are a no-op.
@@ -184,53 +236,116 @@ export interface CsfObjectOptions {
   stories?: boolean;
 }
 
+// `text` is the whole member, including its leading comments.
+export interface MemberInsert {
+  key: string;
+  value: string;
+  text: string;
+}
+
+// Object literals edit their braces; a config made of named exports edits export declarations.
+export interface ObjectRoot {
+  readonly properties: readonly E.ObjectPropertyKind[];
+  readonly detached: boolean;
+  // The object literal itself, when the root is one.
+  readonly node?: E.ObjectExpression;
+  append(members: MemberInsert[]): void;
+  prepend(members: MemberInsert[]): void;
+  remove(members: Property[]): void;
+  replaceValue(member: Property, text: string): void;
+  // `key` is the raw property name.
+  rename(member: Property, key: string): void;
+  // Replaces contiguous members with `key: { ...members }`.
+  group(members: Property[], key: string): void;
+  // The member as text to insert elsewhere under another key.
+  take(member: Property, key: string): MemberInsert;
+}
+
+export interface CsfObjectHost {
+  readonly editor: SourceEditor;
+  // Located again after every commit.
+  root(): ObjectRoot | undefined;
+  commit(): void;
+}
+
+export const literalRoot = (editor: SourceEditor, object: E.ObjectExpression): ObjectRoot => ({
+  properties: object.properties,
+  detached: false,
+  node: object,
+  append: (members) =>
+    appendMembers(
+      editor,
+      object,
+      members.map((member) => member.text)
+    ),
+  prepend: (members) =>
+    prependMembers(
+      editor,
+      object,
+      members.map((member) => member.text)
+    ),
+  remove: (members) => removeMembers(editor, object, members),
+  replaceValue: (member, text) => replaceValue(editor, member, text),
+  rename: (member, key) => renameKey(editor, member, printKey(key, editor.quote)),
+  group: (members, key) => {
+    const texts = members.map((member) => memberText(editor, object, member));
+    const first = object.properties.indexOf(members[0]);
+    const multiline = editor.code.slice(object.start, object.end).includes('\n');
+    removeMembers(editor, object, members.slice(1));
+    const before = editor.code.slice(0, members[0].start);
+    const indent = /[ \t]*$/.exec(before.slice(before.lastIndexOf('\n') + 1))![0];
+    const inner = multiline
+      ? `{\n${texts.map((text) => `${indent}  ${text.split('\n').join(`\n${indent}  `)},`).join('\n')}\n${indent}}`
+      : `{ ${texts.join(', ')} }`;
+    // Leading comments of the first member move into the group with it.
+    const start = separatorBefore(editor.code, object, first);
+    const lead = multiline ? `\n${indent}` : ' ';
+    editor.edits.overwrite(
+      start,
+      members[0].end,
+      `${lead}${printKey(key, editor.quote)}: ${inner}`
+    );
+  },
+  take: (member, key) => ({
+    key,
+    value: valueSource(editor, member),
+    text: renamedMemberText(editor, object, member, printKey(key, editor.quote)),
+  }),
+});
+
+// Methods become function expressions.
+export const valueSource = (editor: SourceEditor, member: Property) =>
+  member.method || member.kind !== 'init'
+    ? functionFromMethod(editor, member)
+    : editor.source(member.value);
+
 const UNRESOLVED = Symbol('unresolved');
 
 type ReportDiagnostic = (diagnostic: CsfMutationDiagnostic) => void;
 type MarkChanged = () => void;
-type ObjectRoot = Pick<NodePath<t.ObjectExpression>, 'node' | 'scope' | 'buildCodeFrameError'> & {
-  detached?: boolean;
-};
 
-type PropertyLookup =
-  | { ok: true; property?: t.ObjectProperty | t.ObjectMethod }
-  | { ok: false; code: CsfMutationDiagnosticCode; node: t.Node };
+type ParentObject = { root: ObjectRoot; node?: E.ObjectExpression };
 
-const staticKey = (member: t.ObjectMethod | t.ObjectProperty): string | undefined => {
-  if (t.isStringLiteral(member.key)) {
-    return member.key.value;
-  }
-  if (t.isNumericLiteral(member.key)) {
-    return String(member.key.value);
-  }
-  if (t.isIdentifier(member.key) && !member.computed) {
-    return member.key.name;
-  }
-  if (t.isTemplateLiteral(member.key) && member.key.expressions.length === 0) {
-    return member.key.quasis[0]?.value.cooked ?? member.key.quasis[0]?.value.raw;
-  }
-  return undefined;
-};
-
-const keyNode = (name: string) =>
-  t.isValidIdentifier(name) ? t.identifier(name) : t.stringLiteral(name);
+type PropertyLookup =
+  | { ok: true; property?: Property }
+  | { ok: false; code: CsfMutationDiagnosticCode; node: Node };
 
 const unsafePath = (path: readonly string[]) => path.includes('__proto__');
 
 const lookupProperty = (
-  object: t.ObjectExpression,
+  properties: readonly E.ObjectPropertyKind[],
   name: string,
   removing = false
 ): PropertyLookup => {
-  const matches: (t.ObjectProperty | t.ObjectMethod)[] = [];
-  let unknown: { code: CsfMutationDiagnosticCode; node: t.Node } | undefined;
-  let unknownAfterMatch: { code: CsfMutationDiagnosticCode; node: t.Node } | undefined;
+  const matches: Property[] = [];
+  let unknown: { code: CsfMutationDiagnosticCode; node: Node } | undefined;
+  let unknownAfterMatch: { code: CsfMutationDiagnosticCode; node: Node } | undefined;
 
-  for (const member of object.properties) {
-    const key = t.isSpreadElement(member) ? undefined : staticKey(member);
+  for (const member of properties) {
+    const key = member.type === 'SpreadElement' ? undefined : staticKey(member);
     if (key === undefined) {
       unknown = {
-        code: t.isSpreadElement(member) ? 'spread-field' : 'dynamic-key',
+        code: member.type === 'SpreadElement' ? 'spread-field' : 'dynamic-key',
         node: member,
       };
       if (matches.length > 0) {
@@ -241,7 +356,7 @@ const lookupProperty = (
     if (key !== name) {
       continue;
     }
-    if (!t.isObjectProperty(member) && !t.isObjectMethod(member, { kind: 'method' })) {
+    if (member.type !== 'Property' || member.kind !== 'init') {
       return { ok: false, code: 'unsupported-member', node: member };
     }
     matches.push(member);
@@ -260,44 +375,32 @@ const lookupProperty = (
   return { ok: true, property: matches[0] };
 };
 
-const propertyExpression = (
-  property: t.ObjectProperty | t.ObjectMethod
-): t.Expression | undefined => {
-  if (t.isObjectProperty(property)) {
-    return t.isExpression(property.value) ? property.value : undefined;
-  }
-  const value = t.functionExpression(
-    null,
-    property.params,
-    property.body,
-    property.generator,
-    property.async
-  );
-  value.returnType = property.returnType;
-  value.typeParameters = property.typeParameters;
-  return value;
-};
-
-const isEvaluationInert = (node: t.Node): boolean => {
+const isEvaluationInert = (node: Node): boolean => {
   const value = unwrapExpression(node);
-  if (t.isTemplateLiteral(value)) {
+  if (value.type === 'TemplateLiteral') {
     return value.expressions.length === 0;
   }
-  if (t.isLiteral(value) || t.isFunctionExpression(value) || t.isArrowFunctionExpression(value)) {
+  if (
+    value.type === 'Literal' ||
+    value.type === 'FunctionExpression' ||
+    value.type === 'ArrowFunctionExpression'
+  ) {
     return true;
   }
-  if (t.isUnaryExpression(value)) {
+  if (value.type === 'UnaryExpression') {
     return ['!', 'void', 'typeof'].includes(value.operator)
       ? isEvaluationInert(value.argument)
-      : t.isNumericLiteral(unwrapExpression(value.argument));
+      : isNumericLiteral(unwrapExpression(value.argument));
   }
-  if (t.isArrayExpression(value)) {
+  if (value.type === 'ArrayExpression') {
     return value.elements.every((element) => element === null || isEvaluationInert(element));
   }
-  if (t.isObjectExpression(value)) {
+  if (value.type === 'ObjectExpression') {
     return value.properties.every(
       (property) =>
-        t.isObjectProperty(property) &&
+        property.type === 'Property' &&
+        property.kind === 'init' &&
+        !property.method &&
         !property.computed &&
         staticKey(property) !== undefined &&
         isEvaluationInert(property.value)
@@ -309,103 +412,163 @@ const isEvaluationInert = (node: t.Node): boolean => {
 class CsfObjectEditor implements CsfObject {
   #changed = false;
 
+  readonly target: CsfObjectTarget;
+
+  private readonly host: CsfObjectHost;
+
+  private readonly prefix: readonly string[];
+
+  private readonly reportDiagnostic: ReportDiagnostic;
+
+  private readonly markChanged: MarkChanged;
+
   constructor(
-    readonly target: CsfObjectTarget,
-    private readonly root: ObjectRoot,
-    private readonly prefix: readonly string[],
-    private readonly reportDiagnostic: ReportDiagnostic,
-    private readonly markChanged: MarkChanged
-  ) {}
+    target: CsfObjectTarget,
+    host: CsfObjectHost,
+    prefix: readonly string[],
+    reportDiagnostic: ReportDiagnostic,
+    markChanged: MarkChanged
+  ) {
+    this.target = target;
+    this.host = host;
+    this.prefix = prefix;
+    this.reportDiagnostic = reportDiagnostic;
+    this.markChanged = markChanged;
+  }
 
   get changed() {
     return this.#changed;
   }
 
-  get(path: readonly string[]): t.Expression | undefined {
-    const value = this.getExpression(path);
-    return value ? t.cloneNode(value, true) : undefined;
+  private get editor() {
+    return this.host.editor;
+  }
+
+  private root(): ObjectRoot {
+    const root = this.host.root();
+    if (!root) {
+      throw new Error('CsfObject: the edited object no longer exists in the file');
+    }
+    return root;
+  }
+
+  get(path: readonly string[]): CsfExpression | undefined {
+    const root = this.rootNodeFor(path);
+    if (root) {
+      return parseExpression(this.editor.source(root));
+    }
+    const found = this.getProperty(path);
+    return found ? parseExpression(valueSource(this.editor, found)) : undefined;
   }
 
   getValue(path: readonly string[]): CsfValue {
-    const expression = this.getExpression(path);
-    if (!expression) {
+    const root = this.rootNodeFor(path);
+    if (root) {
+      const value = this.readValue(root);
+      if (value === UNRESOLVED) {
+        this.failure('unsupported-value', path, root);
+        return undefined;
+      }
+      return value;
+    }
+    const property = this.getProperty(path);
+    if (!property) {
+      return undefined;
+    }
+    if (property.method) {
+      this.failure('unsupported-value', path, property);
       return undefined;
     }
-    const value = this.readValue(expression);
+    const value = this.readValue(property.value);
     if (value === UNRESOLVED) {
-      this.failure('unsupported-value', path, expression);
+      this.failure('unsupported-value', path, property.value);
       return undefined;
     }
     return value;
   }
 
-  private getExpression(path: readonly string[]): t.Expression | undefined {
+  // A CSF2 annotation editor answers its own annotation path with the whole assigned object.
+  private rootNodeFor(path: readonly string[]): E.ObjectExpression | undefined {
+    return this.prefix.length > 0 && this.normalizePath(path)?.length === 0
+      ? this.root().node
+      : undefined;
+  }
+
+  private getProperty(path: readonly string[]): Property | undefined {
     const logicalPath = this.normalizePath(path);
     if (!logicalPath) {
       return undefined;
     }
-    if (logicalPath.length === 0) {
-      return this.prefix.length > 0 ? this.root.node : undefined;
-    }
     const found = this.inspect(logicalPath);
     if (found.ok === false) {
       this.failure(found.code, path, found.node);
       return undefined;
     }
-    return found.property && propertyExpression(found.property);
+    return found.property;
   }
 
-  set(path: readonly string[], value: CsfValue | t.Expression): CsfMutationResult {
+  private sourceFor(value: CsfValue | CsfExpression) {
+    if (!isSpan(value)) {
+      return printValue(value, this.editor.quote);
+    }
+    // Registers the source of this file's nodes, so a node read from the file prints as written.
+    this.editor.parentOf(value as Node);
+    return printExpression(value as Node);
+  }
+
+  set(path: readonly string[], value: CsfValue | CsfExpression): CsfMutationResult {
     const logicalPath = this.normalizePath(path);
     if (!logicalPath || logicalPath.length === 0 || unsafePath(logicalPath)) {
-      return this.failure('unsupported-member', path, this.root.node);
+      return this.failure('unsupported-member', path, this.anchor());
     }
     const inspected = this.inspect(logicalPath);
     if (inspected.ok === false) {
       return this.failure(inspected.code, path, inspected.node);
     }
-    if (t.isObjectProperty(inspected.property) && inspected.property.value === value) {
-      return { ok: true, changed: false };
-    }
-    const expression =
-      t.isNode(value) && t.isExpression(value) ? t.cloneNode(value, true) : t.valueToNode(value);
+    const text = this.sourceFor(value);
     if (inspected.property && inspected.parent) {
-      this.replaceValue(inspected.property, inspected.parent, expression);
+      inspected.parent.root.replaceValue(inspected.property, text);
     } else {
-      this.insert(logicalPath, t.objectProperty(keyNode(logicalPath.at(-1)!), expression));
+      this.insert(logicalPath, [
+        {
+          key: logicalPath.at(-1)!,
+          value: text,
+          text: `${printKey(logicalPath.at(-1)!, this.editor.quote)}: ${text}`,
+        },
+      ]);
     }
     return this.success();
   }
 
   transform(
     path: readonly string[],
-    derive: (value: t.Expression) => t.Expression | undefined
+    derive: (value: CsfExpression) => CsfExpression | undefined
   ): CsfMutationResult {
     const logicalPath = this.normalizePath(path);
     if (!logicalPath || logicalPath.length === 0 || unsafePath(logicalPath)) {
-      return this.failure('unsupported-member', path, this.root.node);
+      return this.failure('unsupported-member', path, this.anchor());
     }
     const inspected = this.inspect(logicalPath);
     if (inspected.ok === false) {
       return this.failure(inspected.code, path, inspected.node);
     }
     const { property, parent } = inspected;
-    const value = property && propertyExpression(property);
-    if (!property || !parent || !value) {
+    if (!property || !parent) {
       return { ok: true, changed: false };
     }
+    const value = parseExpression(valueSource(this.editor, property));
     const derived = derive(value);
     if (!derived || derived === value) {
       return { ok: true, changed: false };
     }
-    this.replaceValue(property, parent, derived);
+    parent.root.replaceValue(property, printExpression(derived));
     return this.success();
   }
 
   remove(path: readonly string[]): CsfMutationResult {
     const logicalPath = this.normalizePath(path);
     if (!logicalPath || logicalPath.length === 0 || unsafePath(logicalPath)) {
-      return this.failure('unsupported-member', path, this.root.node);
+      return this.failure('unsupported-member', path, this.anchor());
     }
     const inspected = this.inspect(logicalPath);
     if (inspected.ok === false) {
@@ -414,11 +577,12 @@ class CsfObjectEditor implements CsfObject {
     if (!inspected.property || !inspected.parent) {
       return { ok: true, changed: false };
     }
-    const removal = lookupProperty(inspected.parent, logicalPath.at(-1)!, true);
+    const removal = lookupProperty(inspected.parent.root.properties, logicalPath.at(-1)!, true);
     if (!removal.ok) {
       return this.failure(removal.code, path, removal.node);
     }
-    inspected.parent.properties.splice(inspected.parent.properties.indexOf(inspected.property), 1);
+    inspected.parent.root.remove([inspected.property]);
+    this.commit();
     this.removeEmptyParents(logicalPath);
     return this.success();
   }
@@ -439,7 +603,7 @@ class CsfObjectEditor implements CsfObject {
       unsafePath(sourcePath) ||
       unsafePath(destinationPath)
     ) {
-      return this.failure('unsupported-member', !sourcePath ? from : to, this.root.node);
+      return this.failure('unsupported-member', !sourcePath ? from : to, this.anchor());
     }
     if (
       sourcePath.length === destinationPath.length &&
@@ -451,7 +615,7 @@ class CsfObjectEditor implements CsfObject {
       destinationPath.length > sourcePath.length &&
       sourcePath.every((part, index) => destinationPath[index] === part)
     ) {
-      return this.failure('cyclic-move', to, this.root.node);
+      return this.failure('cyclic-move', to, this.anchor());
     }
 
     const source = this.inspect(sourcePath);
@@ -461,7 +625,7 @@ class CsfObjectEditor implements CsfObject {
     if (!source.property || !source.parent) {
       return { ok: true, changed: false };
     }
-    const removal = lookupProperty(source.parent, sourcePath.at(-1)!, true);
+    const removal = lookupProperty(source.parent.root.properties, sourcePath.at(-1)!, true);
     if (!removal.ok) {
       return this.failure(removal.code, from, removal.node);
     }
@@ -473,27 +637,22 @@ class CsfObjectEditor implements CsfObject {
       return this.failure('occupied-destination', to, destination.property);
     }
 
+    const key = destinationPath.at(-1)!;
     const sourceParent = sourcePath.slice(0, -1);
     const destinationParent = destinationPath.slice(0, -1);
     if (
       sourceParent.length === destinationParent.length &&
       sourceParent.every((part, index) => destinationParent[index] === part)
     ) {
-      if (t.isObjectProperty(source.property)) {
-        source.property.shorthand = false;
-      }
-      source.property.key = keyNode(destinationPath.at(-1)!);
-      source.property.computed = false;
+      source.parent.root.rename(source.property, key);
       return this.success();
     }
 
-    source.parent.properties.splice(source.parent.properties.indexOf(source.property), 1);
-    if (t.isObjectProperty(source.property)) {
-      source.property.shorthand = false;
-    }
-    source.property.key = keyNode(destinationPath.at(-1)!);
-    source.property.computed = false;
-    this.insert(destinationPath, source.property);
+    const moved = source.parent.root.take(source.property, key);
+    source.parent.root.remove([source.property]);
+    this.commit();
+    this.insert(destinationPath, [{ ...moved, key }]);
+    this.commit();
     this.removeEmptyParents(sourcePath);
     return this.success();
   }
@@ -501,13 +660,13 @@ class CsfObjectEditor implements CsfObject {
   group(path: readonly string[], names: readonly string[]): CsfMutationResult {
     const logicalPath = this.normalizePath(path);
     if (!logicalPath || logicalPath.length === 0 || unsafePath(logicalPath) || unsafePath(names)) {
-      return this.failure('unsupported-member', path, this.root.node);
+      return this.failure('unsupported-member', path, this.anchor());
     }
     const group = logicalPath.at(-1)!;
     if (names.includes(group)) {
-      return this.failure('cyclic-move', path, this.root.node);
+      return this.failure('cyclic-move', path, this.anchor());
     }
-    let parent = this.root.node;
+    let parent: ObjectRoot = this.root();
     if (logicalPath.length > 1) {
       const inspected = this.inspect(logicalPath.slice(0, -1));
       if (inspected.ok === false) {
@@ -516,35 +675,37 @@ class CsfObjectEditor implements CsfObject {
       if (!inspected.property) {
         return { ok: true, changed: false };
       }
-      const value = t.isObjectProperty(inspected.property)
-        ? this.resolveExpression(inspected.property.value)
-        : undefined;
-      if (!t.isObjectExpression(value)) {
+      const value = this.resolveExpression(inspected.property.value);
+      if (value?.type !== 'ObjectExpression') {
         return this.failure('unsupported-member', path, inspected.property);
       }
-      parent = value;
+      parent = literalRoot(this.editor, value);
     }
     const moved = parent.properties.filter(
-      (property): property is t.ObjectProperty | t.ObjectMethod =>
-        !t.isSpreadElement(property) && names.includes(staticKey(property) ?? '')
+      (property): property is Property =>
+        property.type !== 'SpreadElement' && names.includes(staticKey(property) ?? '')
     );
     if (moved.length === 0) {
       return { ok: true, changed: false };
     }
     for (const property of parent.properties) {
-      if (t.isSpreadElement(property) || property.computed || staticKey(property) === undefined) {
+      if (
+        property.type === 'SpreadElement' ||
+        property.computed ||
+        staticKey(property) === undefined
+      ) {
         return this.failure(
-          t.isSpreadElement(property) ? 'spread-field' : 'dynamic-key',
+          property.type === 'SpreadElement' ? 'spread-field' : 'dynamic-key',
           path,
           property,
-          `the configuration contains ${t.isSpreadElement(property) ? 'a spread property' : 'a computed property'}`
+          `the configuration contains ${property.type === 'SpreadElement' ? 'a spread property' : 'a computed property'}`
         );
       }
     }
     const sourceNames = new Set<string>();
     for (const property of moved) {
       const name = staticKey(property)!;
-      if (!t.isObjectProperty(property) || !t.isExpression(property.value)) {
+      if (property.kind !== 'init' || property.method) {
         return this.failure(
           'unsupported-member',
           path,
@@ -557,7 +718,7 @@ class CsfObjectEditor implements CsfObject {
       }
       sourceNames.add(name);
     }
-    const destination = lookupProperty(parent, group);
+    const destination = lookupProperty(parent.properties, group);
     if (destination.ok === false) {
       return this.failure(
         destination.code,
@@ -570,8 +731,8 @@ class CsfObjectEditor implements CsfObject {
     }
     if (destination.property) {
       const existing = destination.property;
-      const value = t.isObjectProperty(existing) ? unwrapExpression(existing.value) : undefined;
-      if (!t.isObjectExpression(value)) {
+      const value = existing.method ? undefined : unwrapExpression(existing.value);
+      if (value?.type !== 'ObjectExpression') {
         return this.failure(
           'unsupported-member',
           path,
@@ -580,15 +741,19 @@ class CsfObjectEditor implements CsfObject {
         );
       }
       for (const property of value.properties) {
-        if (t.isSpreadElement(property) || property.computed || staticKey(property) === undefined) {
+        if (
+          property.type === 'SpreadElement' ||
+          property.computed ||
+          staticKey(property) === undefined
+        ) {
           return this.failure(
-            t.isSpreadElement(property) ? 'spread-field' : 'dynamic-key',
+            property.type === 'SpreadElement' ? 'spread-field' : 'dynamic-key',
             path,
             property,
-            `the existing ${group} object contains ${t.isSpreadElement(property) ? 'a spread property' : 'a computed property'}`
+            `the existing ${group} object contains ${property.type === 'SpreadElement' ? 'a spread property' : 'a computed property'}`
           );
         }
-        if (!t.isObjectProperty(property) || !t.isExpression(property.value)) {
+        if (property.kind !== 'init' || property.method) {
           return this.failure(
             'unsupported-member',
             path,
@@ -599,7 +764,7 @@ class CsfObjectEditor implements CsfObject {
       }
       const existingNames = new Set(
         value.properties.map((property) =>
-          t.isSpreadElement(property) ? undefined : staticKey(property)
+          property.type === 'SpreadElement' ? undefined : staticKey(property)
         )
       );
       for (const property of moved) {
@@ -612,23 +777,22 @@ class CsfObjectEditor implements CsfObject {
             `the ${name} option exists at both top level and inside ${group}, where the nested value is authoritative`
           );
         }
-        if (!t.isObjectProperty(property) || !isEvaluationInert(property.value)) {
+        if (!isEvaluationInert(property.value)) {
           return this.failure(
             'evaluation-order',
             path,
             property,
-            `the ${name} option has a ${t.isObjectProperty(property) ? unwrapExpression(property.value).type : 'non-expression'} value whose relocation into the existing ${group} object could change expression evaluation order`
+            `the ${name} option has a ${unwrapExpression(property.value).type} value whose relocation into the existing ${group} object could change expression evaluation order`
           );
         }
       }
-      value.properties.unshift(...moved);
-      const movedSet = new Set<t.ObjectMember | t.SpreadElement>(moved);
-      parent.properties = parent.properties.filter((property) => !movedSet.has(property));
+      literalRoot(this.editor, value).prepend(
+        moved.map((property) => parent.take(property, staticKey(property)!))
+      );
+      parent.remove(moved);
     } else {
-      if (parent === this.root.node && this.root.detached) {
-        const effectful = moved.find(
-          (property) => !t.isObjectProperty(property) || !isEvaluationInert(property.value)
-        );
+      if (parent.detached) {
+        const effectful = moved.find((property) => !isEvaluationInert(property.value));
         if (effectful) {
           return this.failure(
             'evaluation-order',
@@ -648,53 +812,31 @@ class CsfObjectEditor implements CsfObject {
           `the top-level ${group} options are not contiguous, so grouping them could change expression evaluation order`
         );
       }
-      parent.properties.splice(
-        first,
-        moved.length,
-        t.objectProperty(keyNode(group), t.objectExpression(moved))
-      );
+      parent.group(moved, group);
     }
     return this.success();
   }
 
-  private replaceValue(
-    property: t.ObjectProperty | t.ObjectMethod,
-    parent: t.ObjectExpression,
-    value: t.Expression
-  ) {
-    if (t.isObjectProperty(property)) {
-      property.value = value;
-      property.shorthand = false;
-    } else if (t.isFunctionExpression(value) && !value.id) {
-      property.params = value.params;
-      property.body = value.body;
-      property.async = value.async;
-      property.generator = value.generator;
-      property.returnType = value.returnType;
-      property.typeParameters = value.typeParameters;
-    } else {
-      parent.properties.splice(
-        parent.properties.indexOf(property),
-        1,
-        t.inheritsComments(t.objectProperty(property.key, value, property.computed), property)
-      );
-    }
-  }
-
   private removeEmptyParents(path: readonly string[]) {
     for (let depth = path.length - 1; depth > 0; depth--) {
       const ancestor = this.inspect(path.slice(0, depth));
-      if (ancestor.ok === false || !t.isObjectProperty(ancestor.property) || !ancestor.parent) {
+      if (
+        ancestor.ok === false ||
+        !ancestor.property ||
+        ancestor.property.method ||
+        !ancestor.parent
+      ) {
         return;
       }
       const value = this.resolveExpression(ancestor.property.value);
-      if (!t.isObjectExpression(value) || value.properties.length > 0) {
+      if (value?.type !== 'ObjectExpression' || value.properties.length > 0) {
         return;
       }
-      if (!lookupProperty(ancestor.parent, path[depth - 1], true).ok) {
+      if (!lookupProperty(ancestor.parent.root.properties, path[depth - 1], true).ok) {
         return;
       }
-      ancestor.parent.properties.splice(ancestor.parent.properties.indexOf(ancestor.property), 1);
+      ancestor.parent.root.remove([ancestor.property]);
+      this.commit();
     }
   }
 
@@ -711,21 +853,24 @@ class CsfObjectEditor implements CsfObject {
     return path.slice(this.prefix.length);
   }
 
-  private readValue(node: t.Node): CsfValue | typeof UNRESOLVED {
+  private readValue(node: Node): CsfValue | typeof UNRESOLVED {
     const value = this.resolveExpression(node);
-    if (t.isStringLiteral(value) || t.isNumericLiteral(value) || t.isBooleanLiteral(value)) {
-      return value.value;
+    if (!value) {
+      return UNRESOLVED;
     }
-    if (t.isNullLiteral(value)) {
-      return null;
+    if (value.type === 'Literal') {
+      if ('regex' in value || 'bigint' in value) {
+        return UNRESOLVED;
+      }
+      return (value as E.StringLiteral | E.NumericLiteral | E.BooleanLiteral | E.NullLiteral).value;
     }
-    if (t.isIdentifier(value)) {
+    if (value.type === 'Identifier') {
       return value.name === 'undefined' ? undefined : UNRESOLVED;
     }
-    if (t.isTemplateLiteral(value) && value.expressions.length === 0) {
+    if (value.type === 'TemplateLiteral' && value.expressions.length === 0) {
       return value.quasis[0].value.cooked ?? UNRESOLVED;
     }
-    if (t.isUnaryExpression(value)) {
+    if (value.type === 'UnaryExpression') {
       const argument = this.readValue(value.argument);
       if (typeof argument !== 'number') {
         return UNRESOLVED;
@@ -735,18 +880,18 @@ class CsfObjectEditor implements CsfObject {
       }
       return value.operator === '+' ? argument : UNRESOLVED;
     }
-    if (t.isArrayExpression(value)) {
+    if (value.type === 'ArrayExpression') {
       const elements: CsfValue[] = [];
       for (const element of value.elements) {
         if (!element) {
           elements.length++;
           continue;
         }
-        const item = this.readValue(t.isSpreadElement(element) ? element.argument : element);
+        const item = this.readValue(element.type === 'SpreadElement' ? element.argument : element);
         if (item === UNRESOLVED) {
           return UNRESOLVED;
         }
-        if (t.isSpreadElement(element)) {
+        if (element.type === 'SpreadElement') {
           if (!Array.isArray(item)) {
             return UNRESOLVED;
           }
@@ -757,10 +902,10 @@ class CsfObjectEditor implements CsfObject {
       }
       return elements;
     }
-    if (t.isObjectExpression(value)) {
+    if (value.type === 'ObjectExpression') {
       const entries: [string, CsfValue][] = [];
       for (const property of value.properties) {
-        if (t.isSpreadElement(property)) {
+        if (property.type === 'SpreadElement') {
           const spread = this.readValue(property.argument);
           if (typeof spread !== 'object' || spread === null || Array.isArray(spread)) {
             return UNRESOLVED;
@@ -770,7 +915,8 @@ class CsfObjectEditor implements CsfObject {
         }
         const key = staticKey(property);
         if (
-          !t.isObjectProperty(property) ||
+          property.kind !== 'init' ||
+          property.method ||
           key === undefined ||
           (key === '__proto__' && !property.computed)
         ) {
@@ -787,115 +933,140 @@ class CsfObjectEditor implements CsfObject {
     return UNRESOLVED;
   }
 
-  private resolveExpression(node: t.Node): t.Node | undefined {
-    const program = this.root.scope.getProgramParent().path;
-    if (!program.isProgram()) {
-      return undefined;
-    }
+  private resolveExpression(node: Node): Node | undefined {
     let value = unwrapExpression(node);
-    const visited = new Set<t.Node>();
-    while (t.isIdentifier(value) && !visited.has(value)) {
+    const visited = new Set<Node>();
+    while (isIdentifier(value) && !visited.has(value)) {
       visited.add(value);
-      const reference = pathForNode(program, value);
-      const binding = reference?.scope.getBinding(value.name);
-      if (!binding && reference && value.name === 'undefined') {
+      const binding = this.editor.scopes.bindingOf(value);
+      if (!binding && value.name === 'undefined') {
         return value;
       }
       if (
         !binding?.constant ||
-        binding.referencePaths.length !== 1 ||
-        binding.referencePaths[0].node !== value ||
-        !binding.path.isVariableDeclarator() ||
-        !binding.path.node.init
+        binding.references.length !== 1 ||
+        binding.references[0] !== value ||
+        binding.node.type !== 'VariableDeclarator' ||
+        binding.node.id.type !== 'Identifier' ||
+        !binding.node.init
       ) {
         return undefined;
       }
-      value = unwrapExpression(binding.path.node.init);
+      value = unwrapExpression(binding.node.init);
     }
     return value;
   }
 
-  private inspect(path: readonly string[]) {
-    let object = this.root.node;
-    let parent: t.ObjectExpression | undefined;
-    let property: t.ObjectProperty | t.ObjectMethod | undefined;
+  private inspect(
+    path: readonly string[]
+  ):
+    | { ok: true; parent?: ParentObject; property?: Property }
+    | { ok: false; code: CsfMutationDiagnosticCode; node: Node } {
+    let parent: ParentObject = { root: this.root() };
+    let property: Property | undefined;
 
     for (const [index, name] of path.entries()) {
-      const lookup = lookupProperty(object, name);
+      const lookup = lookupProperty(parent.root.properties, name);
       if (lookup.ok === false) {
         return lookup;
       }
-      parent = object;
       property = lookup.property;
       if (!property || index === path.length - 1) {
-        return { ok: true as const, parent, property };
+        return { ok: true, parent, property };
       }
-      if (!t.isObjectProperty(property)) {
-        return { ok: false as const, code: 'unsupported-member' as const, node: property };
+      if (property.method) {
+        return { ok: false, code: 'unsupported-member', node: property };
       }
       const value = this.resolveExpression(property.value);
-      if (!t.isObjectExpression(value)) {
-        return { ok: false as const, code: 'unsupported-member' as const, node: property.value };
+      if (value?.type !== 'ObjectExpression') {
+        return { ok: false, code: 'unsupported-member', node: property.value };
       }
-      object = value;
+      parent = { root: literalRoot(this.editor, value), node: value };
     }
 
-    return { ok: true as const, parent, property };
+    return { ok: true, parent, property };
   }
 
-  private insert(path: readonly string[], property: t.ObjectProperty | t.ObjectMethod) {
-    let object = this.root.node;
-    for (const name of path.slice(0, -1)) {
-      const lookup = lookupProperty(object, name);
+  // Parents may not exist yet; the caller has validated the path.
+  private insert(path: readonly string[], members: MemberInsert[]) {
+    let parent = this.root();
+    const quote = this.editor.quote;
+    for (const [index, name] of path.slice(0, -1).entries()) {
+      const lookup = lookupProperty(parent.properties, name);
       if (lookup.ok === false) {
-        throw this.root.buildCodeFrameError('CsfObject mutation preflight was invalidated');
+        throw new Error('CsfObject mutation preflight was invalidated');
       }
       if (!lookup.property) {
-        const child = t.objectExpression([]);
-        object.properties.push(t.objectProperty(keyNode(name), child));
-        object = child;
-      } else {
-        const value = t.isObjectProperty(lookup.property)
-          ? this.resolveExpression(lookup.property.value)
-          : undefined;
-        if (!t.isObjectExpression(value)) {
-          throw this.root.buildCodeFrameError('CsfObject mutation preflight was invalidated');
-        }
-        object = value;
+        const missing = path.slice(index, -1);
+        // Comments travel with moved members; a line comment needs the object to span lines.
+        const multiline = members.some((member) => member.text.includes('\n'));
+        const block = (texts: string[]) =>
+          multiline
+            ? `{\n${texts.map((text) => `  ${text.split('\n').join('\n  ')},`).join('\n')}\n}`
+            : `{ ${texts.join(', ')} }`;
+        const nested = missing
+          .slice(1)
+          .reverse()
+          .reduce(
+            (inner, key) => block([`${printKey(key, quote)}: ${inner}`]),
+            block(members.map((member) => member.text))
+          );
+        parent.append([{ key: name, value: nested, text: `${printKey(name, quote)}: ${nested}` }]);
+        return;
+      }
+      const value = lookup.property.method
+        ? undefined
+        : this.resolveExpression(lookup.property.value);
+      if (value?.type !== 'ObjectExpression') {
+        throw new Error('CsfObject mutation preflight was invalidated');
       }
+      parent = literalRoot(this.editor, value);
     }
-    object.properties.push(property);
+    parent.append(members);
+  }
+
+  private anchor(): Node {
+    return this.editor.program;
+  }
+
+  private commit() {
+    this.host.commit();
   }
 
   private failure(
     code: CsfMutationDiagnosticCode,
     path: readonly string[],
-    node: t.Node,
+    node: Node,
     message = `Cannot mutate ${path.join('.')} because the target contains ${code.replaceAll('-', ' ')}`
   ) {
+    const span = node as Node & { start?: number; end?: number };
     const diagnostic: CsfMutationDiagnostic = {
       code,
       target: this.target,
       path: [...path],
       message,
-      ...(node.loc ? { loc: node.loc } : {}),
+      ...(typeof span.start === 'number' && span.end !== undefined && node !== this.editor.program
+        ? { loc: locationOf(this.editor.code, span.start, span.end) }
+        : {}),
     };
     this.reportDiagnostic(diagnostic);
     return { ok: false as const, changed: false as const, diagnostic };
   }
 
   private success(): CsfMutationResult {
+    this.commit();
     this.#changed = true;
     this.markChanged();
-    this.root.scope.getProgramParent().crawl();
     return { ok: true, changed: true };
   }
 }
 
 export const createCsfObject = (
   target: CsfObjectTarget,
-  root: ObjectRoot,
+  host: CsfObjectHost,
   prefix: readonly string[],
   report: ReportDiagnostic,
   markChanged: MarkChanged
-): CsfObject => new CsfObjectEditor(target, root, prefix, report, markChanged);
+): CsfObject => new CsfObjectEditor(target, host, prefix, report, markChanged);
+
+export { keySource };
diff --git a/code/core/src/csf-tools/CsfObjectDiscovery.test.ts b/code/core/src/csf-tools/CsfObjectDiscovery.test.ts
index 963f61e791ba..e24a723c8f68 100644
--- a/code/core/src/csf-tools/CsfObjectDiscovery.test.ts
+++ b/code/core/src/csf-tools/CsfObjectDiscovery.test.ts
@@ -156,7 +156,7 @@ describe('CsfObject discovery', () => {
     `);
     const [meta] = csf.objects({ meta: true, stories: false });
 
-    expect(meta.get(['title'])).toMatchObject({ type: 'StringLiteral', value: 'Example' });
+    expect(meta.get(['title'])).toMatchObject({ type: 'Literal', value: 'Example' });
   });
 
   it.each([
diff --git a/code/core/src/csf-tools/CsfObjectDiscovery.ts b/code/core/src/csf-tools/CsfObjectDiscovery.ts
index 228a2d43c818..a56e8de8cdf1 100644
--- a/code/core/src/csf-tools/CsfObjectDiscovery.ts
+++ b/code/core/src/csf-tools/CsfObjectDiscovery.ts
@@ -1,21 +1,16 @@
-import { type NodePath, types as t } from 'storybook/internal/babel';
-
 import type { CsfFile } from './CsfFile.ts';
+import { csfFactoryReceiver, isCsfFactoryCall, withoutTypeCalls } from './CsfFile.ts';
 import {
   type CsfMutationDiagnostic,
   type CsfObject,
+  type CsfObjectHost,
   type CsfObjectOptions,
   type CsfObjectTarget,
   createCsfObject,
+  literalRoot,
 } from './CsfObject.ts';
-import {
-  csfFactoryReceiver,
-  isCsfFactoryCall,
-  metaObjectPath,
-  pathForNode,
-  unwrapExpression,
-  withoutTypeCalls,
-} from './story-shape/index.ts';
+import { type E, type Node, isStringLiteral, locationOf, unwrapExpression } from './estree/ast.ts';
+import type { Binding } from './estree/scope.ts';
 
 type ReportDiagnostic = (diagnostic: CsfMutationDiagnostic) => void;
 type MarkChanged = () => void;
@@ -23,192 +18,162 @@ type MarkChanged = () => void;
 type StoryBinding = {
   exportName: string;
   localName: string;
-  declaration: NodePath<t.VariableDeclarator | t.FunctionDeclaration>;
+  declaration: E.VariableDeclarator | E.Function;
 };
 
 type AnnotationCandidate = {
   target: Extract<CsfObjectTarget, { kind: 'story-annotation' }>;
   annotation: 'parameters' | 'argTypes';
-  root?: NodePath<t.ObjectExpression>;
-  node: t.Node;
+  root?: E.ObjectExpression;
+  node: Node;
   message?: string;
 };
 
+// An object literal an editor works on, before it is wrapped into a `CsfObject`.
+type Discovered = { target: CsfObjectTarget; prefix: readonly string[]; node: E.ObjectExpression };
+
+const loc = (csf: CsfFile, node: Node) => {
+  const span = node as Node & { start: number; end: number };
+  return { loc: locationOf(csf._code, span.start, span.end) };
+};
+
 const storyTarget = ({ exportName, localName }: StoryBinding): CsfObjectTarget => ({
   kind: 'story',
   exportName,
   localName,
 });
 
-const reportBindingFailure = (
-  exportName: string,
-  localName: string,
-  node: t.Node,
-  report: ReportDiagnostic
-) =>
-  report({
-    code: 'ambiguous-binding',
-    target: { kind: 'story', exportName, localName },
-    path: [],
-    message: `Cannot mutate ${exportName} because ${localName} is not a unique constant binding`,
-    ...(node.loc ? { loc: node.loc } : {}),
-  });
+const exportedName = (node: E.ModuleExportName) =>
+  node.type === 'Identifier' ? node.name : (node as E.StringLiteral).value;
 
 const addQualifiedBinding = (
-  candidate: NodePath<t.Node>,
+  csf: CsfFile,
+  node: Node,
   exportName: string,
   localName: string,
   bindings: Map<string, StoryBinding>,
   report: ReportDiagnostic,
   isStory: boolean
 ) => {
-  const binding = candidate.scope.getBinding(localName);
+  const binding = csf._editor.scopes.program.bindings.get(localName);
   if (
     !binding?.constant ||
-    (!binding.path.isVariableDeclarator() && !binding.path.isFunctionDeclaration())
+    (binding.node.type !== 'VariableDeclarator' && binding.node.type !== 'FunctionDeclaration')
   ) {
     if (isStory) {
-      reportBindingFailure(exportName, localName, candidate.node, report);
+      report({
+        code: 'ambiguous-binding',
+        target: { kind: 'story', exportName, localName },
+        path: [],
+        message: `Cannot mutate ${exportName} because ${localName} is not a unique constant binding`,
+        ...loc(csf, node),
+      });
     }
   } else {
     bindings.set(`${localName}:${exportName}`, {
       exportName,
       localName,
-      declaration: binding.path,
+      declaration: binding.node as E.VariableDeclarator | E.Function,
     });
   }
 };
 
-const addDirectBindings = (
-  statement: NodePath<t.ExportNamedDeclaration>,
-  bindings: Map<string, StoryBinding>,
-  report: ReportDiagnostic,
-  csf: CsfFile
-) => {
-  const declaration = statement.get('declaration');
-  if (declaration.isVariableDeclaration()) {
-    for (const declarator of declaration.get('declarations')) {
-      const id = declarator.get('id');
-      if (id.isIdentifier()) {
-        addQualifiedBinding(
-          id,
-          id.node.name,
-          id.node.name,
-          bindings,
-          report,
-          id.node.name in csf._stories
-        );
+const storyBindings = (csf: CsfFile, report: ReportDiagnostic): StoryBinding[] => {
+  const bindings = new Map<string, StoryBinding>();
+  for (const statement of csf._program.body) {
+    if (statement.type !== 'ExportNamedDeclaration' || statement.exportKind === 'type') {
+      continue;
+    }
+    const { declaration } = statement;
+    if (declaration?.type === 'VariableDeclaration') {
+      for (const declarator of declaration.declarations) {
+        if (declarator.id.type === 'Identifier') {
+          const { name } = declarator.id;
+          addQualifiedBinding(
+            csf,
+            declarator.id,
+            name,
+            name,
+            bindings,
+            report,
+            name in csf._stories
+          );
+        }
       }
+    } else if (declaration?.type === 'FunctionDeclaration' && declaration.id) {
+      const { name } = declaration.id;
+      addQualifiedBinding(csf, declaration, name, name, bindings, report, name in csf._stories);
     }
-  } else if (declaration.isFunctionDeclaration() && declaration.node.id) {
-    const name = declaration.node.id.name;
-    addQualifiedBinding(declaration, name, name, bindings, report, name in csf._stories);
-  }
-};
-
-const addAliasedBindings = (
-  statement: NodePath<t.ExportNamedDeclaration>,
-  bindings: Map<string, StoryBinding>,
-  report: ReportDiagnostic,
-  csf: CsfFile
-) => {
-  if (statement.node.source) {
-    for (const specifier of statement.get('specifiers')) {
-      if (!specifier.isExportSpecifier() || !t.isIdentifier(specifier.node.local)) {
+    for (const specifier of statement.specifiers) {
+      if (specifier.local.type !== 'Identifier') {
         continue;
       }
-      const exportName = t.isIdentifier(specifier.node.exported)
-        ? specifier.node.exported.name
-        : specifier.node.exported.value;
-      if (exportName !== 'default' && exportName in csf._stories) {
-        report({
-          code: 'unsupported-initializer',
-          target: { kind: 'story', exportName, localName: specifier.node.local.name },
-          path: [],
-          message: `Cannot mutate re-exported story ${exportName} automatically`,
-          ...(specifier.node.loc ? { loc: specifier.node.loc } : {}),
-        });
+      const exportName = exportedName(specifier.exported);
+      if (statement.source) {
+        if (exportName !== 'default' && exportName in csf._stories) {
+          report({
+            code: 'unsupported-initializer',
+            target: { kind: 'story', exportName, localName: specifier.local.name },
+            path: [],
+            message: `Cannot mutate re-exported story ${exportName} automatically`,
+            ...loc(csf, specifier),
+          });
+        }
+        continue;
+      }
+      if (exportName === 'default') {
+        continue;
       }
+      addQualifiedBinding(
+        csf,
+        specifier,
+        exportName,
+        specifier.local.name,
+        bindings,
+        report,
+        exportName in csf._stories
+      );
     }
-    return;
   }
-  for (const specifier of statement.get('specifiers')) {
-    if (!specifier.isExportSpecifier() || !t.isIdentifier(specifier.node.local)) {
-      continue;
-    }
-    const exportName = t.isIdentifier(specifier.node.exported)
-      ? specifier.node.exported.name
-      : specifier.node.exported.value;
-    if (exportName === 'default') {
-      continue;
+  const candidates = [...bindings.values()].filter((binding) => binding.exportName in csf._stories);
+  const unique = new Map<Node, StoryBinding>();
+  for (const candidate of candidates) {
+    if (!unique.has(candidate.declaration)) {
+      unique.set(candidate.declaration, candidate);
     }
-    const localName = specifier.node.local.name;
-    addQualifiedBinding(
-      specifier,
-      exportName,
-      localName,
-      bindings,
-      report,
-      exportName in csf._stories
-    );
   }
+  return [...unique.values()];
 };
 
-const factoryMember = (node: t.Node | undefined): 'story' | 'extend' | undefined => {
+const variableInit = (binding: Binding | undefined) =>
+  binding?.constant && binding.node.type === 'VariableDeclarator' ? binding.node.init : undefined;
+
+const factoryMember = (node: Node | null | undefined): 'story' | 'extend' | undefined => {
   const unwrapped = node && unwrapExpression(node);
-  if (!unwrapped || !t.isCallExpression(unwrapped) || !t.isMemberExpression(unwrapped.callee)) {
+  if (unwrapped?.type !== 'CallExpression' || unwrapped.callee.type !== 'MemberExpression') {
     return undefined;
   }
   const property = unwrapped.callee.property;
-  if (unwrapped.callee.computed || !t.isIdentifier(property)) {
+  if (unwrapped.callee.computed || property.type !== 'Identifier') {
     return undefined;
   }
   return property.name === 'story' || property.name === 'extend' ? property.name : undefined;
 };
 
-const storyBindings = (csf: CsfFile, report: ReportDiagnostic): StoryBinding[] => {
-  const bindings = new Map<string, StoryBinding>();
-  for (const statement of csf._file.path.get('body')) {
-    if (!statement.isExportNamedDeclaration() || statement.node.exportKind === 'type') {
-      continue;
-    }
-    addDirectBindings(statement, bindings, report, csf);
-    addAliasedBindings(statement, bindings, report, csf);
-  }
-  const candidates = [...bindings.values()].filter((binding) => binding.exportName in csf._stories);
-  const unique = new Map<t.Node, StoryBinding>();
-  for (const candidate of candidates) {
-    const previous = unique.get(candidate.declaration.node);
-    if (
-      !previous ||
-      (!(previous.exportName in csf._stories) && candidate.exportName in csf._stories)
-    ) {
-      unique.set(candidate.declaration.node, candidate);
-    }
-  }
-  return [...unique.values()];
-};
-
 const isFactoryMeta = (csf: CsfFile, name: string, seen = new Set<string>()): boolean => {
-  const binding = csf._file.path.scope.getBinding(name);
-  if (
-    seen.has(name) ||
-    !csf._metaFactoryCall ||
-    !binding?.constant ||
-    !binding.path.isVariableDeclarator() ||
-    !t.isExpression(binding.path.node.init)
-  ) {
+  const init = variableInit(csf._editor.scopes.program.bindings.get(name));
+  if (seen.has(name) || !csf._metaFactoryCall || !init) {
     return false;
   }
   seen.add(name);
-  const initializer = withoutTypeCalls(unwrapExpression(binding.path.node.init));
+  const initializer = withoutTypeCalls(unwrapExpression(init));
   return (
     initializer === csf._metaFactoryCall ||
-    (t.isIdentifier(initializer) && isFactoryMeta(csf, initializer.name, seen))
+    (initializer.type === 'Identifier' && isFactoryMeta(csf, initializer.name, seen))
   );
 };
 
-const isFactoryStory = (csf: CsfFile, node: t.Node, seen = new Set<string>()): boolean => {
+const isFactoryStory = (csf: CsfFile, node: Node, seen = new Set<string>()): boolean => {
   if (!isCsfFactoryCall(node)) {
     return false;
   }
@@ -220,51 +185,45 @@ const isFactoryStory = (csf: CsfFile, node: t.Node, seen = new Set<string>()): b
     return false;
   }
   seen.add(receiver);
-  const binding = csf._file.path.scope.getBinding(receiver);
-  const initializer =
-    binding?.constant && binding.path.isVariableDeclarator() ? binding.path.node.init : undefined;
+  const initializer = variableInit(csf._editor.scopes.program.bindings.get(receiver));
   return initializer ? isFactoryStory(csf, unwrapExpression(initializer), seen) : false;
 };
 
 const factoryMetaConfigurationIsSafe = (csf: CsfFile): boolean => {
   const argument = csf._metaFactoryCall?.arguments[0];
-  if (!argument || !t.isIdentifier(argument)) {
+  if (argument?.type !== 'Identifier') {
     return true;
   }
-  const binding = csf._file.path.scope.getBinding(argument.name);
+  const binding = csf._editor.scopes.program.bindings.get(argument.name);
   if (
     !binding?.constant ||
-    !binding.path.isVariableDeclarator() ||
-    !binding.path.parentPath?.isVariableDeclaration({ kind: 'const' })
+    binding.node.type !== 'VariableDeclarator' ||
+    binding.declaration?.type !== 'VariableDeclaration' ||
+    binding.declaration.kind !== 'const'
   ) {
     return false;
   }
-  const initializer = binding.path.node.init;
-  if (!initializer || !t.isObjectExpression(unwrapExpression(initializer))) {
+  const initializer = binding.node.init;
+  if (!initializer || unwrapExpression(initializer).type !== 'ObjectExpression') {
     return false;
   }
-  return binding.referencePaths.length === 1 && binding.referencePaths[0].node === argument;
+  return binding.references.length === 1 && binding.references[0] === argument;
 };
 
-const discoverMeta = (
-  csf: CsfFile,
-  report: ReportDiagnostic,
-  markChanged: MarkChanged
-): CsfObject[] => {
+const discoverMeta = (csf: CsfFile, report: ReportDiagnostic): Discovered[] => {
   if (csf._metaIsFactory && csf._metaFactoryCall && !factoryMetaConfigurationIsSafe(csf)) {
     report({
       code: 'unsupported-initializer',
       target: { kind: 'meta' },
       path: [],
       message: 'Cannot mutate CSF factory meta with an identifier-backed configuration',
-      ...(csf._metaFactoryCall.loc ? { loc: csf._metaFactoryCall.loc } : {}),
+      ...loc(csf, csf._metaFactoryCall),
     });
     return [];
   }
-  const meta = metaObjectPath(csf);
-  if (meta) {
+  if (csf._metaNode && !csf._metaNodeIsSynthetic) {
     const binding = csf._metaVariableName
-      ? meta.scope.getBinding(csf._metaVariableName)
+      ? csf._editor.scopes.program.bindings.get(csf._metaVariableName)
       : undefined;
     if (binding && !binding.constant) {
       report({
@@ -272,11 +231,11 @@ const discoverMeta = (
         target: { kind: 'meta' },
         path: [],
         message: `Cannot mutate meta because ${csf._metaVariableName} is not a unique constant binding`,
-        ...(binding.path.node.loc ? { loc: binding.path.node.loc } : {}),
+        ...loc(csf, binding.node),
       });
       return [];
     }
-    return [createCsfObject({ kind: 'meta' }, meta, [], report, markChanged)];
+    return [{ target: { kind: 'meta' }, prefix: [], node: csf._metaNode }];
   }
   if (csf._metaIsFactory && csf._metaFactoryCall) {
     report({
@@ -284,7 +243,7 @@ const discoverMeta = (
       target: { kind: 'meta' },
       path: [],
       message: 'Cannot mutate CSF factory meta automatically; move the field manually',
-      ...(csf._metaFactoryCall.loc ? { loc: csf._metaFactoryCall.loc } : {}),
+      ...loc(csf, csf._metaFactoryCall),
     });
   }
   return [];
@@ -293,75 +252,62 @@ const discoverMeta = (
 const discoverStories = (
   csf: CsfFile,
   bindings: StoryBinding[],
-  report: ReportDiagnostic,
-  markChanged: MarkChanged
-): CsfObject[] =>
-  bindings.flatMap((binding) => {
-    const declaration = binding.declaration;
-    const init = declaration.isVariableDeclarator() ? declaration.get('init') : declaration;
-    const node = init.node ? unwrapExpression(init.node) : undefined;
+  report: ReportDiagnostic
+): Discovered[] =>
+  bindings.flatMap((binding): Discovered[] => {
+    const { declaration } = binding;
+    const init = declaration.type === 'VariableDeclarator' ? declaration.init : declaration;
+    const node = init ? unwrapExpression(init as Node) : undefined;
     if (node && factoryMember(node)) {
-      const argument = t.isCallExpression(node) ? node.arguments[0] : undefined;
+      const argument = node.type === 'CallExpression' ? node.arguments[0] : undefined;
       const argumentNode =
-        argument && t.isExpression(argument) ? unwrapExpression(argument) : undefined;
+        argument && argument.type !== 'SpreadElement' ? unwrapExpression(argument) : undefined;
       if (
-        t.isCallExpression(node) &&
+        node.type === 'CallExpression' &&
         isFactoryStory(csf, node) &&
         node.arguments.length === 1 &&
-        argumentNode &&
-        t.isObjectExpression(argumentNode)
+        argumentNode?.type === 'ObjectExpression'
       ) {
-        const root = pathForNode(csf._file.path, argumentNode);
-        return root ? [createCsfObject(storyTarget(binding), root, [], report, markChanged)] : [];
+        return [{ target: storyTarget(binding), prefix: [], node: argumentNode }];
       }
       report({
         code: 'unsupported-initializer',
         target: storyTarget(binding),
         path: [],
         message: `Cannot mutate CSF factory story ${binding.exportName} because its configuration is not an inline object literal`,
-        ...(node.loc ? { loc: node.loc } : {}),
+        ...loc(csf, node),
       });
       return [];
     }
-    const expression = init.isExpression() ? init : undefined;
-    const unwrapped = expression && unwrapExpression(expression.node);
-    const root =
-      unwrapped && t.isObjectExpression(unwrapped)
-        ? pathForNode(csf._file.path, unwrapped)
-        : undefined;
-    return root ? [createCsfObject(storyTarget(binding), root, [], report, markChanged)] : [];
+    return node?.type === 'ObjectExpression'
+      ? [{ target: storyTarget(binding), prefix: [], node }]
+      : [];
   });
 
 const annotationCandidates = (
-  csf: CsfFile,
-  statement: NodePath<t.Statement>,
+  statement: Node,
   bindings: Map<string, StoryBinding>
 ): AnnotationCandidate[] => {
-  if (!statement.isExpressionStatement()) {
+  if (statement.type !== 'ExpressionStatement') {
     return [];
   }
-  const expression = statement.get('expression');
-  if (!expression.isAssignmentExpression()) {
+  const { expression } = statement;
+  if (expression.type !== 'AssignmentExpression') {
     return [];
   }
-  const left = expression.get('left');
-  const right = expression.get('right');
-  if (!left.isMemberExpression() || !right.isExpression()) {
-    return [];
-  }
-  const object = left.get('object');
-  const property = left.get('property');
-  if (!object.isIdentifier()) {
+  const { left, right } = expression;
+  if (left.type !== 'MemberExpression' || left.object.type !== 'Identifier') {
     return [];
   }
+  const property = left.property;
   const propertyName =
-    !left.node.computed && property.isIdentifier()
-      ? property.node.name
-      : left.node.computed && property.isStringLiteral()
-        ? property.node.value
+    !left.computed && property.type === 'Identifier'
+      ? property.name
+      : left.computed && isStringLiteral(property)
+        ? property.value
         : undefined;
-  const binding = bindings.get(object.node.name);
-  if (!propertyName && left.node.computed && binding) {
+  const binding = bindings.get(left.object.name);
+  if (!propertyName && left.computed && binding) {
     return [
       {
         target: {
@@ -371,20 +317,17 @@ const annotationCandidates = (
           annotation: 'parameters',
         },
         annotation: 'parameters',
-        node: property.node,
+        node: property,
         message: `Cannot mutate ${binding.localName} annotation because its computed name is not a static string literal`,
       },
     ];
   }
-  if (!propertyName) {
-    return [];
-  }
   const annotation =
     propertyName === 'parameters' || propertyName === 'argTypes' ? propertyName : undefined;
   if (!annotation || !binding) {
     return [];
   }
-  const rootNode = unwrapExpression(right.node);
+  const rootNode = unwrapExpression(right);
   return [
     {
       target: {
@@ -395,82 +338,92 @@ const annotationCandidates = (
       },
       annotation,
       root:
-        expression.node.operator === '=' && t.isObjectExpression(rootNode)
-          ? pathForNode(csf._file.path, rootNode)
-          : undefined,
-      node: right.node,
-      ...(expression.node.operator === '='
+        expression.operator === '=' && rootNode.type === 'ObjectExpression' ? rootNode : undefined,
+      node: right,
+      ...(expression.operator === '='
         ? {}
         : {
-            message: `Cannot mutate ${binding.localName}.${annotation} because it uses ${expression.node.operator} assignment`,
+            message: `Cannot mutate ${binding.localName}.${annotation} because it uses ${expression.operator} assignment`,
           }),
     },
   ];
 };
 
-const reportOrCreateAnnotation = (
-  matches: AnnotationCandidate[],
-  report: ReportDiagnostic,
-  markChanged: MarkChanged
-): CsfObject[] => {
-  const [candidate] = matches;
-  if (matches.length > 1) {
-    report({
-      code: 'ambiguous-binding',
-      target: candidate.target,
-      path: [candidate.annotation],
-      message: `Cannot mutate repeated ${candidate.target.localName}.${candidate.annotation} assignments`,
-      ...(candidate.node.loc ? { loc: candidate.node.loc } : {}),
-    });
-    return [];
-  }
-  if (!candidate.root) {
-    report({
-      code: 'unsupported-initializer',
-      target: candidate.target,
-      path: [candidate.annotation],
-      message:
-        candidate.message ??
-        `Cannot mutate ${candidate.target.localName}.${candidate.annotation} because its value is not an object literal`,
-      ...(candidate.node.loc ? { loc: candidate.node.loc } : {}),
-    });
-    return [];
-  }
-  return [
-    createCsfObject(candidate.target, candidate.root, [candidate.annotation], report, markChanged),
-  ];
-};
-
 const discoverAnnotations = (
   csf: CsfFile,
   storyBindings: StoryBinding[],
-  report: ReportDiagnostic,
-  markChanged: MarkChanged
-): CsfObject[] => {
+  report: ReportDiagnostic
+): Discovered[] => {
   const bindings = new Map(storyBindings.map((binding) => [binding.localName, binding]));
   const candidates = new Map<string, AnnotationCandidate[]>();
-  for (const statement of csf._file.path.get('body')) {
-    for (const candidate of annotationCandidates(csf, statement, bindings)) {
+  for (const statement of csf._program.body) {
+    for (const candidate of annotationCandidates(statement, bindings)) {
       const identity = `${candidate.target.localName}:${candidate.annotation}`;
       candidates.set(identity, [...(candidates.get(identity) ?? []), candidate]);
     }
   }
-  return [...candidates.values()].flatMap((matches) =>
-    reportOrCreateAnnotation(matches, report, markChanged)
-  );
+  return [...candidates.values()].flatMap((matches): Discovered[] => {
+    const [candidate] = matches;
+    if (matches.length > 1) {
+      report({
+        code: 'ambiguous-binding',
+        target: candidate.target,
+        path: [candidate.annotation],
+        message: `Cannot mutate repeated ${candidate.target.localName}.${candidate.annotation} assignments`,
+        ...loc(csf, candidate.node),
+      });
+      return [];
+    }
+    if (!candidate.root) {
+      report({
+        code: 'unsupported-initializer',
+        target: candidate.target,
+        path: [candidate.annotation],
+        message:
+          candidate.message ??
+          `Cannot mutate ${candidate.target.localName}.${candidate.annotation} because its value is not an object literal`,
+        ...loc(csf, candidate.node),
+      });
+      return [];
+    }
+    return [{ target: candidate.target, prefix: [candidate.annotation], node: candidate.root }];
+  });
 };
 
-export const discoverCsfObjects = (
+const discover = (
   csf: CsfFile,
   options: CsfObjectOptions,
-  report: ReportDiagnostic,
-  markChanged: MarkChanged
-): readonly CsfObject[] => {
+  report: ReportDiagnostic
+): Discovered[] => {
   const includeStories = options.stories ?? true;
   const bindings = includeStories ? storyBindings(csf, report) : [];
   return [
-    ...((options.meta ?? true) ? discoverMeta(csf, report, markChanged) : []),
-    ...(includeStories ? discoverStories(csf, bindings, report, markChanged) : []),
-    ...(includeStories ? discoverAnnotations(csf, bindings, report, markChanged) : []),
+    ...((options.meta ?? true) ? discoverMeta(csf, report) : []),
+    ...(includeStories ? discoverStories(csf, bindings, report) : []),
+    ...(includeStories ? discoverAnnotations(csf, bindings, report) : []),
   ];
 };
+
+const sameTarget = (a: CsfObjectTarget, b: CsfObjectTarget) =>
+  JSON.stringify(a) === JSON.stringify(b);
+
+export const discoverCsfObjects = (
+  csf: CsfFile,
+  options: CsfObjectOptions,
+  report: ReportDiagnostic,
+  markChanged: MarkChanged
+): readonly CsfObject[] =>
+  discover(csf, options, report).map(({ target, prefix }) => {
+    const host: CsfObjectHost = {
+      editor: csf._editor,
+      root: () => {
+        // Edits re-parse the file, so the object is found again by its target.
+        const current = discover(csf, options, () => {}).find((candidate) =>
+          sameTarget(candidate.target, target)
+        );
+        return current && literalRoot(csf._editor, current.node);
+      },
+      commit: () => csf._commit(),
+    };
+    return createCsfObject(target, host, prefix, report, markChanged);
+  });
diff --git a/code/core/src/csf-tools/enrichCsf.test.ts b/code/core/src/csf-tools/enrichCsf.test.ts
index 155b50060f8f..382f9ad6fb89 100644
--- a/code/core/src/csf-tools/enrichCsf.test.ts
+++ b/code/core/src/csf-tools/enrichCsf.test.ts
@@ -45,19 +45,10 @@ describe('enrichCsf', () => {
       ).toMatchInlineSnapshot(`
         // compiled code
         export default {
-          title: 'Button'
-        };
-        export const Basic = () => React.createElement(Button);
-        Basic.parameters = {
-          ...Basic.parameters,
-          docs: {
-            ...Basic.parameters?.docs,
-            source: {
-              originalSource: "() => <Button />",
-              ...Basic.parameters?.docs?.source
-            }
-          }
-        };
+         title: 'Button',
+        }
+        export const Basic = () => React.createElement(Button)
+        Basic.parameters = { ...Basic.parameters, docs: { ...Basic.parameters?.docs, source: { originalSource: "() => <Button />", ...Basic.parameters?.docs?.source } } };
       `);
     });
     it('csf2', async () => {
@@ -85,23 +76,12 @@ describe('enrichCsf', () => {
       ).toMatchInlineSnapshot(`
         // compiled code
         export default {
-          title: 'Button'
-        };
-        const Template = args => React.createElement(Button, args);
+          title: 'Button',
+        }
+        const Template = (args) => React.createElement(Button, args);
         export const Basic = Template.bind({});
-        Basic.parameters = {
-          foo: 'bar'
-        };
-        Basic.parameters = {
-          ...Basic.parameters,
-          docs: {
-            ...Basic.parameters?.docs,
-            source: {
-              originalSource: "args => <Button {...args} />",
-              ...Basic.parameters?.docs?.source
-            }
-          }
-        };
+        Basic.parameters = { foo: 'bar' }
+        Basic.parameters = { ...Basic.parameters, docs: { ...Basic.parameters?.docs, source: { originalSource: "(args) => <Button {...args} />", ...Basic.parameters?.docs?.source } } };
       `);
     });
     it('csf3', async () => {
@@ -127,23 +107,10 @@ describe('enrichCsf', () => {
       ).toMatchInlineSnapshot(`
         // compiled code
         export default {
-          title: 'Button'
-        };
-        export const Basic = {
-          parameters: {
-            foo: 'bar'
-          }
-        };
-        Basic.parameters = {
-          ...Basic.parameters,
-          docs: {
-            ...Basic.parameters?.docs,
-            source: {
-              originalSource: "{\\n  parameters: {\\n    foo: 'bar'\\n  }\\n}",
-              ...Basic.parameters?.docs?.source
-            }
-          }
-        };
+          title: 'Button',
+        }
+        export const Basic = { parameters: { foo: 'bar' } }
+        Basic.parameters = { ...Basic.parameters, docs: { ...Basic.parameters?.docs, source: { originalSource: "{\\n  parameters: { foo: 'bar' }\\n}", ...Basic.parameters?.docs?.source } } };
       `);
     });
     it('csf factories', async () => {
@@ -172,23 +139,14 @@ describe('enrichCsf', () => {
         )
       ).toMatchInlineSnapshot(`
         // compiled code
-        import { config } from "/.storybook/preview.ts";
+        import {config} from "/.storybook/preview.ts";
         const meta = config.meta({
-          args: {
-            label: "Hello world!"
-          }
+            args: {
+              label: "Hello world!"
+            }
         });
         export const Story = meta.story({});
-        Story.input.parameters = {
-          ...Story.input.parameters,
-          docs: {
-            ...Story.input.parameters?.docs,
-            source: {
-              originalSource: "meta.story({})",
-              ...Story.input.parameters?.docs?.source
-            }
-          }
-        };
+        Story.input.parameters = { ...Story.input.parameters, docs: { ...Story.input.parameters?.docs, source: { originalSource: "meta.story({})", ...Story.input.parameters?.docs?.source } } };
       `);
     });
     it('csf factories typed with meta.type<>(), reused and extended', async () => {
@@ -215,42 +173,15 @@ describe('enrichCsf', () => {
         )
       ).toMatchInlineSnapshot(`
         // compiled code
-        import { config } from "/.storybook/preview.ts";
+        import {config} from "/.storybook/preview.ts";
         const meta = config.meta({});
         const withIcon = meta.type();
         export const Story = meta.type().story({});
         export const Reused = withIcon.story({});
         export const Extended = Reused.extend({});
-        Story.input.parameters = {
-          ...Story.input.parameters,
-          docs: {
-            ...Story.input.parameters?.docs,
-            source: {
-              originalSource: "meta.type<{\\n  args: {\\n    icon: string;\\n  };\\n}>().story({})",
-              ...Story.input.parameters?.docs?.source
-            }
-          }
-        };
-        Reused.input.parameters = {
-          ...Reused.input.parameters,
-          docs: {
-            ...Reused.input.parameters?.docs,
-            source: {
-              originalSource: "withIcon.story({})",
-              ...Reused.input.parameters?.docs?.source
-            }
-          }
-        };
-        Extended.input.parameters = {
-          ...Extended.input.parameters,
-          docs: {
-            ...Extended.input.parameters?.docs,
-            source: {
-              originalSource: "Reused.extend({})",
-              ...Extended.input.parameters?.docs?.source
-            }
-          }
-        };
+        Story.input.parameters = { ...Story.input.parameters, docs: { ...Story.input.parameters?.docs, source: { originalSource: "meta.type<{ args: { icon: string } }>().story({})", ...Story.input.parameters?.docs?.source } } };
+        Reused.input.parameters = { ...Reused.input.parameters, docs: { ...Reused.input.parameters?.docs, source: { originalSource: "withIcon.story({})", ...Reused.input.parameters?.docs?.source } } };
+        Extended.input.parameters = { ...Extended.input.parameters, docs: { ...Extended.input.parameters?.docs, source: { originalSource: "Reused.extend({})", ...Extended.input.parameters?.docs?.source } } };
       `);
     });
     it('multiple stories', async () => {
@@ -276,30 +207,12 @@ describe('enrichCsf', () => {
       ).toMatchInlineSnapshot(`
         // compiled code
         export default {
-          title: 'Button'
-        };
-        export const A = {};
-        export const B = {};
-        A.parameters = {
-          ...A.parameters,
-          docs: {
-            ...A.parameters?.docs,
-            source: {
-              originalSource: "{}",
-              ...A.parameters?.docs?.source
-            }
-          }
-        };
-        B.parameters = {
-          ...B.parameters,
-          docs: {
-            ...B.parameters?.docs,
-            source: {
-              originalSource: "{}",
-              ...B.parameters?.docs?.source
-            }
-          }
-        };
+          title: 'Button',
+        }
+        export const A = {}
+        export const B = {}
+        A.parameters = { ...A.parameters, docs: { ...A.parameters?.docs, source: { originalSource: "{}", ...A.parameters?.docs?.source } } };
+        B.parameters = { ...B.parameters, docs: { ...B.parameters?.docs, source: { originalSource: "{}", ...B.parameters?.docs?.source } } };
       `);
     });
   });
@@ -328,20 +241,11 @@ describe('enrichCsf', () => {
       ).toMatchInlineSnapshot(`
         // compiled code
         export default {
-          title: 'Button'
-        };
+         title: 'Button',
+        }
         // The most basic button
         export const Basic = () => React.createElement(Button);
-        Basic.parameters = {
-          ...Basic.parameters,
-          docs: {
-            ...Basic.parameters?.docs,
-            source: {
-              originalSource: "() => <Button />",
-              ...Basic.parameters?.docs?.source
-            }
-          }
-        };
+        Basic.parameters = { ...Basic.parameters, docs: { ...Basic.parameters?.docs, source: { originalSource: "() => <Button />", ...Basic.parameters?.docs?.source } } };
       `);
     });
 
@@ -367,19 +271,10 @@ describe('enrichCsf', () => {
       ).toMatchInlineSnapshot(`
         // compiled code
         export default {
-          title: 'Button'
-        };
-        export const Basic = () => React.createElement(Button);
-        Basic.parameters = {
-          ...Basic.parameters,
-          docs: {
-            ...Basic.parameters?.docs,
-            source: {
-              originalSource: "() => <Button />",
-              ...Basic.parameters?.docs?.source
-            }
-          }
-        };
+         title: 'Button',
+        }
+        export const Basic = () => React.createElement(Button)
+        Basic.parameters = { ...Basic.parameters, docs: { ...Basic.parameters?.docs, source: { originalSource: "() => <Button />", ...Basic.parameters?.docs?.source } } };
       `);
     });
 
@@ -405,23 +300,10 @@ describe('enrichCsf', () => {
       ).toMatchInlineSnapshot(`
         // compiled code
         export default {
-          title: 'Button'
-        };
+         title: 'Button',
+        }
         export const Basic = () => React.createElement(Button);
-        Basic.parameters = {
-          ...Basic.parameters,
-          docs: {
-            ...Basic.parameters?.docs,
-            source: {
-              originalSource: "() => <Button />",
-              ...Basic.parameters?.docs?.source
-            },
-            description: {
-              story: "The most basic button",
-              ...Basic.parameters?.docs?.description
-            }
-          }
-        };
+        Basic.parameters = { ...Basic.parameters, docs: { ...Basic.parameters?.docs, source: { originalSource: "() => <Button />", ...Basic.parameters?.docs?.source }, description: { story: "The most basic button", ...Basic.parameters?.docs?.description } } };
       `);
     });
 
@@ -451,23 +333,10 @@ describe('enrichCsf', () => {
       ).toMatchInlineSnapshot(`
         // compiled code
         export default {
-          title: 'Button'
-        };
+         title: 'Button',
+        }
         export const Basic = () => React.createElement(Button);
-        Basic.parameters = {
-          ...Basic.parameters,
-          docs: {
-            ...Basic.parameters?.docs,
-            source: {
-              originalSource: "() => <Button />",
-              ...Basic.parameters?.docs?.source
-            },
-            description: {
-              story: "The most basic button\\n\\nIn a block!",
-              ...Basic.parameters?.docs?.description
-            }
-          }
-        };
+        Basic.parameters = { ...Basic.parameters, docs: { ...Basic.parameters?.docs, source: { originalSource: "() => <Button />", ...Basic.parameters?.docs?.source }, description: { story: "The most basic button\\n\\nIn a block!", ...Basic.parameters?.docs?.description } } };
       `);
     });
 
@@ -497,23 +366,10 @@ describe('enrichCsf', () => {
       ).toMatchInlineSnapshot(`
         // compiled code
         export default {
-          title: 'Button'
-        };
+         title: 'Button',
+        }
         export const Basic = () => React.createElement(Button);
-        Basic.parameters = {
-          ...Basic.parameters,
-          docs: {
-            ...Basic.parameters?.docs,
-            source: {
-              originalSource: "() => <Button />",
-              ...Basic.parameters?.docs?.source
-            },
-            description: {
-              story: "- A bullet list\\n  - A sub-bullet\\n- A second bullet",
-              ...Basic.parameters?.docs?.description
-            }
-          }
-        };
+        Basic.parameters = { ...Basic.parameters, docs: { ...Basic.parameters?.docs, source: { originalSource: "() => <Button />", ...Basic.parameters?.docs?.source }, description: { story: "- A bullet list\\n  - A sub-bullet\\n- A second bullet", ...Basic.parameters?.docs?.description } } };
       `);
     });
   });
@@ -541,19 +397,10 @@ describe('enrichCsf', () => {
       ).toMatchInlineSnapshot(`
         // compiled code
         export default {
-          title: 'Button'
-        };
+          title: 'Button',
+        }
         export const Basic = () => React.createElement(Button);
-        Basic.parameters = {
-          ...Basic.parameters,
-          docs: {
-            ...Basic.parameters?.docs,
-            source: {
-              originalSource: "() => <Button />",
-              ...Basic.parameters?.docs?.source
-            }
-          }
-        };
+        Basic.parameters = { ...Basic.parameters, docs: { ...Basic.parameters?.docs, source: { originalSource: "() => <Button />", ...Basic.parameters?.docs?.source } } };
       `);
     });
 
@@ -579,19 +426,10 @@ describe('enrichCsf', () => {
       ).toMatchInlineSnapshot(`
         // compiled code
         export default {
-          title: 'Button'
-        };
+         title: 'Button',
+        }
         export const Basic = () => React.createElement();
-        Basic.parameters = {
-          ...Basic.parameters,
-          docs: {
-            ...Basic.parameters?.docs,
-            source: {
-              originalSource: "() => <Button />",
-              ...Basic.parameters?.docs?.source
-            }
-          }
-        };
+        Basic.parameters = { ...Basic.parameters, docs: { ...Basic.parameters?.docs, source: { originalSource: "() => <Button />", ...Basic.parameters?.docs?.source } } };
       `);
     });
 
@@ -617,26 +455,11 @@ describe('enrichCsf', () => {
       ).toMatchInlineSnapshot(`
         // compiled code
         export default {
-          title: 'Button',
-          parameters: {
-            docs: {
-              description: {
-                component: "The most basic button"
-              }
-            }
-          }
-        };
-        export const Basic = () => React.createElement(Button);
-        Basic.parameters = {
-          ...Basic.parameters,
-          docs: {
-            ...Basic.parameters?.docs,
-            source: {
-              originalSource: "() => <Button />",
-              ...Basic.parameters?.docs?.source
-            }
-          }
-        };
+         title: 'Button',
+         parameters: { docs: { description: { component: "The most basic button" } } }
+        }
+        export const Basic = () => React.createElement(Button)
+        Basic.parameters = { ...Basic.parameters, docs: { ...Basic.parameters?.docs, source: { originalSource: "() => <Button />", ...Basic.parameters?.docs?.source } } };
       `);
     });
 
@@ -666,26 +489,11 @@ describe('enrichCsf', () => {
       ).toMatchInlineSnapshot(`
         // compiled code
         export default {
-          title: 'Button',
-          parameters: {
-            docs: {
-              description: {
-                component: "The most basic button\\n\\nIn a block!"
-              }
-            }
-          }
-        };
+         title: 'Button',
+         parameters: { docs: { description: { component: "The most basic button\\n\\nIn a block!" } } },
+        }
         export const Basic = () => React.createElement();
-        Basic.parameters = {
-          ...Basic.parameters,
-          docs: {
-            ...Basic.parameters?.docs,
-            source: {
-              originalSource: "() => <Button />",
-              ...Basic.parameters?.docs?.source
-            }
-          }
-        };
+        Basic.parameters = { ...Basic.parameters, docs: { ...Basic.parameters?.docs, source: { originalSource: "() => <Button />", ...Basic.parameters?.docs?.source } } };
       `);
     });
 
@@ -715,26 +523,11 @@ describe('enrichCsf', () => {
       ).toMatchInlineSnapshot(`
         // compiled code
         export default {
-          title: 'Button',
-          parameters: {
-            docs: {
-              description: {
-                component: "- A bullet list\\n  - A sub-bullet\\n- A second bullet"
-              }
-            }
-          }
-        };
+         title: 'Button',
+         parameters: { docs: { description: { component: "- A bullet list\\n  - A sub-bullet\\n- A second bullet" } } },
+        }
         export const Basic = () => React.createElement(Button);
-        Basic.parameters = {
-          ...Basic.parameters,
-          docs: {
-            ...Basic.parameters?.docs,
-            source: {
-              originalSource: "() => <Button />",
-              ...Basic.parameters?.docs?.source
-            }
-          }
-        };
+        Basic.parameters = { ...Basic.parameters, docs: { ...Basic.parameters?.docs, source: { originalSource: "() => <Button />", ...Basic.parameters?.docs?.source } } };
       `);
     });
 
@@ -770,27 +563,11 @@ describe('enrichCsf', () => {
           title: 'Button',
           parameters: {
             foo: 'bar',
-            docs: {
-              story: {
-                inline: true
-              },
-              description: {
-                component: "The most basic button"
-              }
-            }
+            docs: { story: { inline: true }, description: { component: "The most basic button" } }
           }
-        };
+        }
         export const Basic = () => React.createElement(Button);
-        Basic.parameters = {
-          ...Basic.parameters,
-          docs: {
-            ...Basic.parameters?.docs,
-            source: {
-              originalSource: "() => <Button />",
-              ...Basic.parameters?.docs?.source
-            }
-          }
-        };
+        Basic.parameters = { ...Basic.parameters, docs: { ...Basic.parameters?.docs, source: { originalSource: "() => <Button />", ...Basic.parameters?.docs?.source } } };
       `);
     });
 
@@ -838,18 +615,9 @@ describe('enrichCsf', () => {
               }
             }
           }
-        };
+        }
         export const Basic = () => React.createElement(Button);
-        Basic.parameters = {
-          ...Basic.parameters,
-          docs: {
-            ...Basic.parameters?.docs,
-            source: {
-              originalSource: "() => <Button />",
-              ...Basic.parameters?.docs?.source
-            }
-          }
-        };
+        Basic.parameters = { ...Basic.parameters, docs: { ...Basic.parameters?.docs, source: { originalSource: "() => <Button />", ...Basic.parameters?.docs?.source } } };
       `);
     });
 
@@ -879,26 +647,11 @@ describe('enrichCsf', () => {
         // compiled code
         const meta = {
           title: 'Button',
-          parameters: {
-            docs: {
-              description: {
-                component: "The most basic button"
-              }
-            }
-          }
-        };
+          parameters: { docs: { description: { component: "The most basic button" } } }
+        }
         export default meta;
         export const Basic = () => React.createElement(Button);
-        Basic.parameters = {
-          ...Basic.parameters,
-          docs: {
-            ...Basic.parameters?.docs,
-            source: {
-              originalSource: "() => <Button />",
-              ...Basic.parameters?.docs?.source
-            }
-          }
-        };
+        Basic.parameters = { ...Basic.parameters, docs: { ...Basic.parameters?.docs, source: { originalSource: "() => <Button />", ...Basic.parameters?.docs?.source } } };
       `);
     });
   });
@@ -927,19 +680,10 @@ describe('enrichCsf', () => {
       ).toMatchInlineSnapshot(`
         // compiled code
         export default {
-          title: 'Button'
-        };
+         title: 'Button',
+        }
         export const Basic = () => React.createElement(Button);
-        Basic.parameters = {
-          ...Basic.parameters,
-          docs: {
-            ...Basic.parameters?.docs,
-            description: {
-              story: "The most basic button",
-              ...Basic.parameters?.docs?.description
-            }
-          }
-        };
+        Basic.parameters = { ...Basic.parameters, docs: { ...Basic.parameters?.docs, description: { story: "The most basic button", ...Basic.parameters?.docs?.description } } };
       `);
     });
 
@@ -966,19 +710,10 @@ describe('enrichCsf', () => {
       ).toMatchInlineSnapshot(`
         // compiled code
         export default {
-          title: 'Button'
-        };
+         title: 'Button',
+        }
         export const Basic = () => React.createElement(Button);
-        Basic.parameters = {
-          ...Basic.parameters,
-          docs: {
-            ...Basic.parameters?.docs,
-            source: {
-              originalSource: "() => <Button />",
-              ...Basic.parameters?.docs?.source
-            }
-          }
-        };
+        Basic.parameters = { ...Basic.parameters, docs: { ...Basic.parameters?.docs, source: { originalSource: "() => <Button />", ...Basic.parameters?.docs?.source } } };
       `);
     });
 
@@ -1005,8 +740,8 @@ describe('enrichCsf', () => {
       ).toMatchInlineSnapshot(`
         // compiled code
         export default {
-          title: 'Button'
-        };
+         title: 'Button',
+        }
         export const Basic = () => React.createElement(Button);
       `);
     });
@@ -1020,7 +755,7 @@ const source = (csfExport: string) => {
   `;
   const csf = loadCsf(code, { makeTitle: (userTitle) => userTitle }).parse();
   const exportNode = Object.values(csf._storyExports)[0];
-  return extractSource(exportNode);
+  return extractSource(exportNode, csf._code);
 };
 
 describe('extractSource', () => {
@@ -1036,7 +771,7 @@ describe('extractSource', () => {
       source(dedent`
         export const Basic =  (args) => <Button {...args} />;
       `)
-    ).toMatchInlineSnapshot(`args => <Button {...args} />`);
+    ).toMatchInlineSnapshot(`(args) => <Button {...args} />`);
   });
   it('csf3', () => {
     expect(
@@ -1047,9 +782,7 @@ describe('extractSource', () => {
       `)
     ).toMatchInlineSnapshot(`
       {
-        parameters: {
-          foo: 'bar'
-        }
+        parameters: { foo: 'bar' }
       }
     `);
   });
diff --git a/code/core/src/csf-tools/enrichCsf.ts b/code/core/src/csf-tools/enrichCsf.ts
index e15a7e2d6894..9a09628cd570 100644
--- a/code/core/src/csf-tools/enrichCsf.ts
+++ b/code/core/src/csf-tools/enrichCsf.ts
@@ -1,7 +1,13 @@
-import { generate, types as t } from 'storybook/internal/babel';
 import { type CsfEnricher } from 'storybook/internal/types';
 
 import type { CsfFile } from './CsfFile.ts';
+import { type E, type Node, identifierKey } from './estree/ast.ts';
+import {
+  type SourceEditor,
+  appendMembers,
+  appendStatement,
+  prependMembers,
+} from './estree/editor.ts';
 
 export interface EnrichCsfOptions {
   disableSource?: boolean;
@@ -16,126 +22,93 @@ export const enrichCsfStory = (
   options?: EnrichCsfOptions
 ) => {
   const storyExport = csfSource.getStoryExport(key);
-  const source = !options?.disableSource && extractSource(storyExport);
+  const source = !options?.disableSource && extractSource(storyExport, csfSource._code);
   const description =
-    !options?.disableDescription && extractDescription(csfSource._storyStatements[key]);
-  const parameters = [];
+    !options?.disableDescription &&
+    extractDescription(csfSource._storyStatements[key], csfSource._editor);
   // in csf 1/2/3 use Story.parameters; CSF factories use Story.input.parameters
-  const baseStoryObject = csfSource._metaIsFactory
-    ? t.memberExpression(t.identifier(key), t.identifier('input'))
-    : t.identifier(key);
-  const originalParameters = t.memberExpression(baseStoryObject, t.identifier('parameters'));
-  parameters.push(t.spreadElement(originalParameters));
-  const optionalDocs = t.optionalMemberExpression(
-    originalParameters,
-    t.identifier('docs'),
-    false,
-    true
-  );
-  const extraDocsParameters = [];
+  const originalParameters = csfSource._metaIsFactory
+    ? `${key}.input.parameters`
+    : `${key}.parameters`;
+  const optionalDocs = `${originalParameters}?.docs`;
+  const extraDocsParameters: string[] = [];
 
   // docs: { source: { originalSource: %%source%% } },
   if (source) {
-    const optionalSource = t.optionalMemberExpression(
-      optionalDocs,
-      t.identifier('source'),
-      false,
-      true
-    );
-
     extraDocsParameters.push(
-      t.objectProperty(
-        t.identifier('source'),
-        t.objectExpression([
-          t.objectProperty(t.identifier('originalSource'), t.stringLiteral(source)),
-          t.spreadElement(optionalSource),
-        ])
-      )
+      `source: { originalSource: ${JSON.stringify(source)}, ...${optionalDocs}?.source }`
     );
   }
 
   // docs: { description: { story: %%description%% } },
   if (description) {
-    const optionalDescription = t.optionalMemberExpression(
-      optionalDocs,
-      t.identifier('description'),
-      false,
-      true
-    );
     extraDocsParameters.push(
-      t.objectProperty(
-        t.identifier('description'),
-        t.objectExpression([
-          t.objectProperty(t.identifier('story'), t.stringLiteral(description)),
-          t.spreadElement(optionalDescription),
-        ])
-      )
+      `description: { story: ${JSON.stringify(description)}, ...${optionalDocs}?.description }`
     );
   }
 
   if (extraDocsParameters.length > 0) {
-    parameters.push(
-      t.objectProperty(
-        t.identifier('docs'),
-        t.objectExpression([t.spreadElement(optionalDocs), ...extraDocsParameters])
-      )
+    appendStatement(
+      csf._editor,
+      `${originalParameters} = { ...${originalParameters}, docs: { ...${optionalDocs}, ${extraDocsParameters.join(', ')} } };`
     );
-    const addParameter = t.expressionStatement(
-      t.assignmentExpression('=', originalParameters, t.objectExpression(parameters))
-    );
-    csf._ast.program.body.push(addParameter);
   }
 };
 
 const addComponentDescription = (
-  node: t.ObjectExpression,
+  editor: SourceEditor,
+  node: E.ObjectExpression,
   path: string[],
-  value: t.ObjectProperty
+  value: string
 ) => {
   if (!path.length) {
-    const hasExistingComponent = node.properties.find(
-      (p) => t.isObjectProperty(p) && t.isIdentifier(p.key) && p.key.name === 'component'
+    const hasExistingComponent = node.properties.some(
+      (p) => p.type === 'Property' && identifierKey(p) === 'component'
     );
     if (!hasExistingComponent) {
       // make this the lowest-priority so that if the user is object-spreading on top of it,
       // the users' code will "win"
-      node.properties.unshift(value);
+      prependMembers(editor, node, [`component: ${value}`]);
     }
     return;
   }
   const [first, ...rest] = path;
   const existing = node.properties.find(
-    (p) =>
-      t.isObjectProperty(p) &&
-      t.isIdentifier(p.key) &&
-      p.key.name === first &&
-      t.isObjectExpression(p.value)
+    (p): p is E.ObjectProperty =>
+      p.type === 'Property' && identifierKey(p) === first && p.value.type === 'ObjectExpression'
   );
-  let subNode: t.ObjectExpression;
   if (existing) {
-    subNode = (existing as t.ObjectProperty).value as t.ObjectExpression;
-  } else {
-    subNode = t.objectExpression([]);
-    node.properties.push(t.objectProperty(t.identifier(first), subNode));
+    addComponentDescription(editor, existing.value as E.ObjectExpression, rest, value);
+    return;
   }
-  addComponentDescription(subNode, rest, value);
+  const nested = rest.reduceRight(
+    (inner, key) => `{ ${key}: ${inner} }`,
+    `{ component: ${value} }`
+  );
+  appendMembers(editor, node, [`${first}: ${nested}`]);
 };
 
 export const enrichCsfMeta = (csf: CsfFile, csfSource: CsfFile, options?: EnrichCsfOptions) => {
-  const description = !options?.disableDescription && extractDescription(csfSource._metaStatement);
+  const description =
+    !options?.disableDescription && extractDescription(csfSource._metaStatement, csfSource._editor);
   // docs: { description: { component: %%description%% } },
   if (description) {
     const metaNode = csf._metaNode;
-    if (metaNode && !csf._metaNodeIsSynthetic && t.isObjectExpression(metaNode)) {
+    if (metaNode && !csf._metaNodeIsSynthetic) {
       addComponentDescription(
+        csf._editor,
         metaNode,
         ['parameters', 'docs', 'description'],
-        t.objectProperty(t.identifier('component'), t.stringLiteral(description))
+        JSON.stringify(description)
       );
     }
   }
 };
 
+/**
+ * Add `docs.source.originalSource` and JSDoc descriptions to a parsed CSF file. Edits accumulate
+ * on `csf`; print them with `formatCsf(csf, { sourceMaps: true })`.
+ */
 export const enrichCsf = async (csf: CsfFile, csfSource: CsfFile, options?: EnrichCsfOptions) => {
   enrichCsfMeta(csf, csfSource, options);
   await options?.enrichCsf?.(csf, csfSource);
@@ -144,19 +117,40 @@ export const enrichCsf = async (csf: CsfFile, csfSource: CsfFile, options?: Enri
   });
 };
 
-export const extractSource = (node: t.Node) => {
-  const src = t.isVariableDeclarator(node) ? node.init : node;
-  const { code } = generate(src as t.Node, {});
-  return code;
+// The story's own source text: the initializer of `const X = …`, or the function itself.
+export const extractSource = (node: Node, code: string) => {
+  const src = (node?.type === 'VariableDeclarator' ? node.init : node) as
+    | { start: number; end: number }
+    | null
+    | undefined;
+  return src ? code.slice(src.start, src.end) : '';
 };
 
-export const extractDescription = (node?: t.Node) => {
-  if (!node?.leadingComments) {
-    return '';
+export const leadingComments = (node: Node | undefined, editor: SourceEditor) => {
+  const start = (node as { start?: number } | undefined)?.start;
+  if (start === undefined) {
+    return [];
+  }
+  const comments: E.Comment[] = [];
+  let position = start;
+  for (let index = editor.comments.length - 1; index >= 0; index--) {
+    const comment = editor.comments[index];
+    if (comment.end > position) {
+      continue;
+    }
+    if (editor.code.slice(comment.end, position).trim()) {
+      break;
+    }
+    comments.unshift(comment);
+    position = comment.start;
   }
-  const comments = node.leadingComments
+  return comments;
+};
+
+export const extractDescription = (node: Node | undefined, editor: SourceEditor) => {
+  const comments = leadingComments(node, editor)
     .map((comment) => {
-      if (comment.type === 'CommentLine' || !comment.value.startsWith('*')) {
+      if (comment.type === 'Line' || !comment.value.startsWith('*')) {
         return null;
       }
       return (
diff --git a/code/core/src/csf-tools/findVarInitialization.ts b/code/core/src/csf-tools/findVarInitialization.ts
index b933ba1ab4e4..4e01166d518a 100644
--- a/code/core/src/csf-tools/findVarInitialization.ts
+++ b/code/core/src/csf-tools/findVarInitialization.ts
@@ -1,29 +1,18 @@
-import { types as t } from 'storybook/internal/babel';
+import type { E, Node } from './estree/ast.ts';
 
-export const findVarInitialization = (identifier: string, program: t.Program): t.Expression => {
-  let init: t.Expression = null as any;
-  let declarations: t.VariableDeclarator[] = null as any;
-  program.body.find((node: t.Node) => {
-    if (t.isVariableDeclaration(node)) {
-      declarations = node.declarations;
-    } else if (t.isExportNamedDeclaration(node) && t.isVariableDeclaration(node.declaration)) {
-      declarations = node.declaration.declarations;
+// Initializer of a top-level `const`/`let`/`var` (exported or not) named `identifier`.
+export const findVarInitialization = (identifier: string, program: E.Program): Node | null => {
+  for (const statement of program.body) {
+    const declaration =
+      statement.type === 'ExportNamedDeclaration' ? statement.declaration : statement;
+    if (declaration?.type !== 'VariableDeclaration') {
+      continue;
     }
-
-    return (
-      declarations &&
-      declarations.find((decl: t.Node) => {
-        if (
-          t.isVariableDeclarator(decl) &&
-          t.isIdentifier(decl.id) &&
-          decl.id.name === identifier
-        ) {
-          init = decl.init as t.Expression;
-          return true; // stop looking
-        }
-        return false;
-      })
-    );
-  });
-  return init;
+    for (const declarator of declaration.declarations) {
+      if (declarator.id.type === 'Identifier' && declarator.id.name === identifier) {
+        return declarator.init;
+      }
+    }
+  }
+  return null;
 };
diff --git a/code/core/src/csf-tools/index.ts b/code/core/src/csf-tools/index.ts
index 36d83d771ed4..f0aec9600c75 100644
--- a/code/core/src/csf-tools/index.ts
+++ b/code/core/src/csf-tools/index.ts
@@ -1,5 +1,6 @@
 export * from './CsfFile.ts';
 export type {
+  CsfExpression,
   CsfMutationDiagnostic,
   CsfMutationDiagnosticCode,
   CsfMutationResult,
@@ -8,10 +9,42 @@ export type {
   CsfObjectTarget,
   CsfValue,
 } from './CsfObject.ts';
+export { parseExpression, printExpression } from './CsfObject.ts';
 export * from './ConfigFile.ts';
 export * from './jsdoc.ts';
 export * from './enrichCsf.ts';
-export * from './story-shape/index.ts';
-export { babelParse } from 'storybook/internal/babel';
 export { vitestTransform } from './vitest-plugin/transformer.ts';
 export { componentTransform } from './vitest-plugin/component-transformer.ts';
+export * from './story-shape/index.ts';
+export type { E as ESTree, Node as ESTreeNode, SourceLocation } from './estree/ast.ts';
+export {
+  expressionFromSource,
+  isStringLiteral,
+  isValidIdentifier,
+  locationOf,
+  parseModule,
+  textOf,
+  unwrapExpression as unwrapESTreeExpression,
+  walk,
+} from './estree/ast.ts';
+export { SourceEditor } from './estree/editor.ts';
+export { analyzeScopes, generateUid, type Binding, type ScopeInfo } from './estree/scope.ts';
+export {
+  type List,
+  appendMembers,
+  appendStatement,
+  appendToList,
+  arrayList,
+  headerComments,
+  itemText,
+  objectList,
+  prependMembers,
+  prependStatement,
+  prependToList,
+  printKey,
+  printString,
+  printValue,
+  removeFromList,
+  removeMembers,
+  removeStatement,
+} from './estree/editor.ts';
diff --git a/code/core/src/csf-tools/vitest-plugin/component-transformer.test.ts b/code/core/src/csf-tools/vitest-plugin/component-transformer.test.ts
index b4648699f4d0..d7468cfdd1e6 100644
--- a/code/core/src/csf-tools/vitest-plugin/component-transformer.test.ts
+++ b/code/core/src/csf-tools/vitest-plugin/component-transformer.test.ts
@@ -33,33 +33,22 @@ describe('component transformer', () => {
     expect(result.code).toContain('_test("Badge", _testStory({');
 
     expect(result.code).toMatchInlineSnapshot(`
-      "import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
-      import { test as _test, expect as _expect } from "vitest";
+      "
+            import { test as _test, expect as _expect } from "vitest";
+      import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
       import { Body } from '../typography';
-      export const Badge = ({
-        text
-      }: {
-        text: string;
-      }) => <div>
+
+            export const Badge = ({ text }: { text: string }) => (
+              <div>
                 <Body>{text}</Body>
-              </div>;
+              </div>
+            );
+          
       const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
       if (_isRunningFromThisFile) {
-        _test("Badge", _testStory({
-          exportName: "Badge",
-          story: {
-            args: {}
-          },
-          meta: {
-            title: "generated/tests/Badge",
-            component: Badge
-          },
-          skipTags: [],
-          storyId: "generated-Badge",
-          componentPath: "src/components/Badge.tsx",
-          componentName: "Badge"
-        }));
-      }"
+        _test("Badge", _testStory({ exportName: "Badge", story: { args: {} }, meta: { title: "generated/tests/Badge", component: Badge }, skipTags: [], storyId: "generated-Badge", componentPath: "src/components/Badge.tsx", componentName: "Badge" }));
+      }
+      "
     `);
   });
 
@@ -75,27 +64,17 @@ describe('component transformer', () => {
     expect(result.code).toContain('_test("Spinner", _testStory({');
 
     expect(result.code).toMatchInlineSnapshot(`
-      "import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
-      import { test as _test, expect as _expect } from "vitest";
+      "
+            import { test as _test, expect as _expect } from "vitest";
+      import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
       const _Spinner = () => <div />;
       export default _Spinner;
+          
       const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
       if (_isRunningFromThisFile) {
-        _test("Spinner", _testStory({
-          exportName: "Spinner",
-          story: {
-            args: {}
-          },
-          meta: {
-            title: "generated/tests/Spinner",
-            component: _Spinner
-          },
-          skipTags: [],
-          storyId: "generated-Spinner",
-          componentPath: "src/components/Spinner.tsx",
-          componentName: "_Spinner"
-        }));
-      }"
+        _test("Spinner", _testStory({ exportName: "Spinner", story: { args: {} }, meta: { title: "generated/tests/Spinner", component: _Spinner }, skipTags: [], storyId: "generated-Spinner", componentPath: "src/components/Spinner.tsx", componentName: "_Spinner" }));
+      }
+      "
     `);
   });
 
@@ -138,97 +117,48 @@ describe('component transformer', () => {
     expect(result.code).toContain('_test("Spinner", _testStory({');
 
     expect(result.code).toMatchInlineSnapshot(`
-      "import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
-      import { test as _test, expect as _expect } from "vitest";
+      "
+            import { test as _test, expect as _expect } from "vitest";
+      import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
       import { someWrapper } from '../lib/util';
-      function Component() {}
-      const _Spinner = someWrapper(Component);
+            function Component() {}
+
+            const _Spinner = someWrapper(Component);
       export default _Spinner;
-      export function withErrorBoundary<P extends object, R>(Component: ComponentType<P>) {
-        return forwardRef<R, P>(function WithErrorBoundary(props, ref) {
-          return <ErrorBoundary>
+
+            export function withErrorBoundary<P extends object, R>(
+              Component: ComponentType<P>,
+            ) {
+              return forwardRef<R, P>(function WithErrorBoundary(props, ref) {
+                return (
+                  <ErrorBoundary>
                     <Component {...props} ref={ref} />
-                  </ErrorBoundary>;
-        });
-      }
-      export const FancyButton = React.forwardRef((props, ref) => <button ref={ref}>
+                  </ErrorBoundary>
+                )
+              })
+            }
+            
+            export const FancyButton = React.forwardRef((props, ref) => (
+              <button ref={ref}>
                 {props.children}
-              </button>);
-      export const Label = memo(() => <div />);
-      export { Label };
+              </button>
+            ));
+
+            export const Label = memo(() => <div />);
+            
+            export {
+              Label,
+            };
+          
       const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
       if (_isRunningFromThisFile) {
-        _test("Spinner", _testStory({
-          exportName: "Spinner",
-          story: {
-            args: {}
-          },
-          meta: {
-            title: "generated/tests/Spinner",
-            component: _Spinner
-          },
-          skipTags: [],
-          storyId: "generated-Spinner",
-          componentPath: "src/components/Spinner.tsx",
-          componentName: "_Spinner"
-        }));
-        _test("withErrorBoundary", _testStory({
-          exportName: "withErrorBoundary",
-          story: {
-            args: {}
-          },
-          meta: {
-            title: "generated/tests/withErrorBoundary",
-            component: withErrorBoundary
-          },
-          skipTags: [],
-          storyId: "generated-withErrorBoundary",
-          componentPath: "src/components/Spinner.tsx",
-          componentName: "withErrorBoundary"
-        }));
-        _test("FancyButton", _testStory({
-          exportName: "FancyButton",
-          story: {
-            args: {}
-          },
-          meta: {
-            title: "generated/tests/FancyButton",
-            component: FancyButton
-          },
-          skipTags: [],
-          storyId: "generated-FancyButton",
-          componentPath: "src/components/Spinner.tsx",
-          componentName: "FancyButton"
-        }));
-        _test("Label", _testStory({
-          exportName: "Label",
-          story: {
-            args: {}
-          },
-          meta: {
-            title: "generated/tests/Label",
-            component: Label
-          },
-          skipTags: [],
-          storyId: "generated-Label",
-          componentPath: "src/components/Spinner.tsx",
-          componentName: "Label"
-        }));
-        _test("Label", _testStory({
-          exportName: "Label",
-          story: {
-            args: {}
-          },
-          meta: {
-            title: "generated/tests/Label",
-            component: Label
-          },
-          skipTags: [],
-          storyId: "generated-Label",
-          componentPath: "src/components/Spinner.tsx",
-          componentName: "Label"
-        }));
-      }"
+        _test("Spinner", _testStory({ exportName: "Spinner", story: { args: {} }, meta: { title: "generated/tests/Spinner", component: _Spinner }, skipTags: [], storyId: "generated-Spinner", componentPath: "src/components/Spinner.tsx", componentName: "_Spinner" }));
+        _test("withErrorBoundary", _testStory({ exportName: "withErrorBoundary", story: { args: {} }, meta: { title: "generated/tests/withErrorBoundary", component: withErrorBoundary }, skipTags: [], storyId: "generated-withErrorBoundary", componentPath: "src/components/Spinner.tsx", componentName: "withErrorBoundary" }));
+        _test("FancyButton", _testStory({ exportName: "FancyButton", story: { args: {} }, meta: { title: "generated/tests/FancyButton", component: FancyButton }, skipTags: [], storyId: "generated-FancyButton", componentPath: "src/components/Spinner.tsx", componentName: "FancyButton" }));
+        _test("Label", _testStory({ exportName: "Label", story: { args: {} }, meta: { title: "generated/tests/Label", component: Label }, skipTags: [], storyId: "generated-Label", componentPath: "src/components/Spinner.tsx", componentName: "Label" }));
+        _test("Label", _testStory({ exportName: "Label", story: { args: {} }, meta: { title: "generated/tests/Label", component: Label }, skipTags: [], storyId: "generated-Label", componentPath: "src/components/Spinner.tsx", componentName: "Label" }));
+      }
+      "
     `);
   });
 
@@ -251,88 +181,30 @@ describe('component transformer', () => {
     expect(result.code).toContain('_test("Badge", _testStory({');
     expect(result.code).toContain('_test("Tag", _testStory({');
     expect(result.code).toMatchInlineSnapshot(`
-      "import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
-      import { test as _test, expect as _expect } from "vitest";
+      "
+            import { test as _test, expect as _expect } from "vitest";
+      import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
       export const Label = () => <div />;
-      export const Tag = () => <span />;
-      const _Badge = () => <div />;
+            export const Tag = () => <span />;
+            const _Badge = () => <div />;
       export default _Badge;
-      const Input = () => <input />;
-      const Checkbox = () => <input type="checkbox" />;
-      export { Input, Checkbox as CheckboxInput };
+
+            const Input = () => <input />;
+            const Checkbox = () => <input type="checkbox" />;
+            export {
+              Input,
+              Checkbox as CheckboxInput
+            };
+          
       const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
       if (_isRunningFromThisFile) {
-        _test("Label", _testStory({
-          exportName: "Label",
-          story: {
-            args: {}
-          },
-          meta: {
-            title: "generated/tests/Label",
-            component: Label
-          },
-          skipTags: [],
-          storyId: "generated-Label",
-          componentPath: "src/components/Badge.tsx",
-          componentName: "Label"
-        }));
-        _test("Tag", _testStory({
-          exportName: "Tag",
-          story: {
-            args: {}
-          },
-          meta: {
-            title: "generated/tests/Tag",
-            component: Tag
-          },
-          skipTags: [],
-          storyId: "generated-Tag",
-          componentPath: "src/components/Badge.tsx",
-          componentName: "Tag"
-        }));
-        _test("Badge", _testStory({
-          exportName: "Badge",
-          story: {
-            args: {}
-          },
-          meta: {
-            title: "generated/tests/Badge",
-            component: _Badge
-          },
-          skipTags: [],
-          storyId: "generated-Badge",
-          componentPath: "src/components/Badge.tsx",
-          componentName: "_Badge"
-        }));
-        _test("Input", _testStory({
-          exportName: "Input",
-          story: {
-            args: {}
-          },
-          meta: {
-            title: "generated/tests/Input",
-            component: Input
-          },
-          skipTags: [],
-          storyId: "generated-Input",
-          componentPath: "src/components/Badge.tsx",
-          componentName: "Input"
-        }));
-        _test("CheckboxInput", _testStory({
-          exportName: "CheckboxInput",
-          story: {
-            args: {}
-          },
-          meta: {
-            title: "generated/tests/CheckboxInput",
-            component: Checkbox
-          },
-          skipTags: [],
-          storyId: "generated-CheckboxInput",
-          componentPath: "src/components/Badge.tsx",
-          componentName: "Checkbox"
-        }));
-      }"
+        _test("Label", _testStory({ exportName: "Label", story: { args: {} }, meta: { title: "generated/tests/Label", component: Label }, skipTags: [], storyId: "generated-Label", componentPath: "src/components/Badge.tsx", componentName: "Label" }));
+        _test("Tag", _testStory({ exportName: "Tag", story: { args: {} }, meta: { title: "generated/tests/Tag", component: Tag }, skipTags: [], storyId: "generated-Tag", componentPath: "src/components/Badge.tsx", componentName: "Tag" }));
+        _test("Badge", _testStory({ exportName: "Badge", story: { args: {} }, meta: { title: "generated/tests/Badge", component: _Badge }, skipTags: [], storyId: "generated-Badge", componentPath: "src/components/Badge.tsx", componentName: "_Badge" }));
+        _test("Input", _testStory({ exportName: "Input", story: { args: {} }, meta: { title: "generated/tests/Input", component: Input }, skipTags: [], storyId: "generated-Input", componentPath: "src/components/Badge.tsx", componentName: "Input" }));
+        _test("CheckboxInput", _testStory({ exportName: "CheckboxInput", story: { args: {} }, meta: { title: "generated/tests/CheckboxInput", component: Checkbox }, skipTags: [], storyId: "generated-CheckboxInput", componentPath: "src/components/Badge.tsx", componentName: "Checkbox" }));
+      }
+      "
     `);
   });
 
@@ -407,41 +279,23 @@ describe('component transformer', () => {
 
     expect(result.code).toContain('import { fn as _fn } from "storybook/test"');
     expect(result.code).toMatchInlineSnapshot(`
-      "import { fn as _fn } from "storybook/test";
+      "
+            import { test as _test, expect as _expect } from "vitest";
       import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
-      import { test as _test, expect as _expect } from "vitest";
+      import { fn as _fn } from "storybook/test";
       import { Body } from '../typography';
-      export const Badge = ({
-        text
-      }: {
-        text: string;
-      }) => <div>
+
+            export const Badge = ({ text }: { text: string }) => (
+              <div>
                 <Body>{text}</Body>
-              </div>;
+              </div>
+            );
+          
       const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
       if (_isRunningFromThisFile) {
-        _test("Badge", _testStory({
-          exportName: "Badge",
-          story: {
-            args: {
-              photoUrl: "photoUrl",
-              onClick: _fn(),
-              someObject: {
-                category: "category",
-                onClick: _fn()
-              }
-            }
-          },
-          meta: {
-            title: "generated/tests/Badge",
-            component: Badge
-          },
-          skipTags: [],
-          storyId: "generated-Badge",
-          componentPath: "src/components/Badge.tsx",
-          componentName: "Badge"
-        }));
-      }"
+        _test("Badge", _testStory({ exportName: "Badge", story: { args: { photoUrl: "photoUrl", onClick: _fn(), someObject: { category: "category", onClick: _fn() } } }, meta: { title: "generated/tests/Badge", component: Badge }, skipTags: [], storyId: "generated-Badge", componentPath: "src/components/Badge.tsx", componentName: "Badge" }));
+      }
+      "
     `);
   });
 
@@ -481,31 +335,16 @@ describe('component transformer', () => {
     // Check that valid identifiers still use identifier syntax
     expect(result.code).toContain('validKey: "validKey"');
     expect(result.code).toMatchInlineSnapshot(`
-      "import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
-      import { test as _test, expect as _expect } from "vitest";
+      "
+            import { test as _test, expect as _expect } from "vitest";
+      import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
       export const Badge = () => <div />;
+          
       const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
       if (_isRunningFromThisFile) {
-        _test("Badge", _testStory({
-          exportName: "Badge",
-          story: {
-            args: {
-              "data-testid": "data-testid",
-              "aria-label": "aria-label",
-              "2invalid": "2invalid",
-              validKey: "validKey"
-            }
-          },
-          meta: {
-            title: "generated/tests/Badge",
-            component: Badge
-          },
-          skipTags: [],
-          storyId: "generated-Badge",
-          componentPath: "src/components/Badge.tsx",
-          componentName: "Badge"
-        }));
-      }"
+        _test("Badge", _testStory({ exportName: "Badge", story: { args: { "data-testid": "data-testid", "aria-label": "aria-label", "2invalid": "2invalid", validKey: "validKey" } }, meta: { title: "generated/tests/Badge", component: Badge }, skipTags: [], storyId: "generated-Badge", componentPath: "src/components/Badge.tsx", componentName: "Badge" }));
+      }
+      "
     `);
   });
 
diff --git a/code/core/src/csf-tools/vitest-plugin/component-transformer.ts b/code/core/src/csf-tools/vitest-plugin/component-transformer.ts
index 22372b3b95e6..290375e310d6 100644
--- a/code/core/src/csf-tools/vitest-plugin/component-transformer.ts
+++ b/code/core/src/csf-tools/vitest-plugin/component-transformer.ts
@@ -1,20 +1,21 @@
 import path from 'node:path';
 
-import {
-  BabelFileClass,
-  type NodePath,
-  babelParse,
-  generate,
-  types as t,
-  traverse,
-} from 'storybook/internal/babel';
 import type { ArgTypes } from 'storybook/internal/csf';
 
 import {
   STORYBOOK_FN_PLACEHOLDER,
   generateDummyArgsFromArgTypes,
 } from '../../core-server/utils/get-dummy-args-from-argtypes.ts';
-import { createTestGuardDeclaration } from './transformer.ts';
+import { type E, type Node, unwrapExpression, walk } from '../estree/ast.ts';
+import {
+  SourceEditor,
+  appendToList,
+  prependStatement,
+  printKey,
+  printValue,
+} from '../estree/editor.ts';
+import { generateUid } from '../estree/scope.ts';
+import { GeneratedTail, createTestGuardDeclaration, printWithTail } from './transformer.ts';
 
 const VITEST_IMPORT_SOURCE = 'vitest';
 const TEST_UTILS_IMPORT_SOURCE = '@storybook/addon-vitest/internal/test-utils';
@@ -22,7 +23,7 @@ const STORYBOOK_TEST_IMPORT_SOURCE = 'storybook/test';
 
 type ComponentExport = {
   exportedName: string;
-  localIdentifier: t.Identifier;
+  localName: string;
 };
 
 const sanitizeIdentifier = (value: string) => {
@@ -39,240 +40,168 @@ const createComponentNameFromFileName = (fileName: string) => {
   return sanitizeIdentifier(basename);
 };
 
-const containsJsxNode = (valuePath: NodePath<t.Node | null | undefined> | null) => {
-  if (!valuePath?.node) {
+const containsJsxNode = (node: Node | null | undefined) => {
+  if (!node) {
     return false;
   }
 
   let found = false;
-  valuePath.traverse({
-    JSXElement(path) {
-      found = true;
-      path.stop();
-    },
-    JSXFragment(path) {
+  walk(node, (child) => {
+    if (found) {
+      return false;
+    }
+    if (child.type === 'JSXElement' || child.type === 'JSXFragment') {
       found = true;
-      path.stop();
-    },
+      return false;
+    }
   });
   return found;
 };
 
-const unwrapExpression = (node: t.Node | null): t.Node | null => {
-  if (!node) {
-    return null;
-  }
-
-  if (t.isTSAsExpression(node) || t.isTSSatisfiesExpression(node)) {
-    return unwrapExpression(node.expression);
+const dedupeImports = (
+  editor: SourceEditor,
+  source: string,
+  specifiers: { imported: string; local: string }[]
+) => {
+  const texts = specifiers.map(({ imported, local }) =>
+    imported === local ? imported : `${imported} as ${local}`
+  );
+  const existing = editor.program.body.find(
+    (node): node is E.ImportDeclaration =>
+      node.type === 'ImportDeclaration' &&
+      node.source.value === source &&
+      node.importKind !== 'type'
+  );
+  const named = existing?.specifiers.filter((specifier) => specifier.type === 'ImportSpecifier');
+  if (existing && named && named.length > 0) {
+    const open = editor.code.indexOf('{', existing.start) + 1;
+    appendToList(editor, { open, close: editor.code.indexOf('}', open), items: named }, texts);
+    return;
   }
-
-  return node;
-};
-
-const dedupeImports = (program: t.Program, source: string, specifiers: t.ImportSpecifier[]) => {
-  const existing = program.body.find(
-    (node) => t.isImportDeclaration(node) && node.source.value === source
-  ) as t.ImportDeclaration | undefined;
-
-  if (existing) {
-    specifiers.forEach((specifier) => {
-      if (
-        existing.specifiers.every(
-          (existingSpecifier) =>
-            !t.isImportSpecifier(existingSpecifier) ||
-            existingSpecifier.local.name !== specifier.local.name
-        )
-      ) {
-        existing.specifiers.push(specifier);
-      }
-    });
+  if (
+    existing &&
+    existing.specifiers.length === 1 &&
+    existing.specifiers[0].type === 'ImportDefaultSpecifier'
+  ) {
+    editor.edits.appendLeft(existing.specifiers[0].end, `, { ${texts.join(', ')} }`);
     return;
   }
-
-  program.body.unshift(t.importDeclaration(specifiers, t.stringLiteral(source)));
+  prependStatement(editor, `import { ${texts.join(', ')} } from ${JSON.stringify(source)};`);
 };
 
-// Traverses the AST to find all exported components that contain JSX. Handles named exports,
-// default exports, and various declaration types.
-const collectComponentExports = (program: t.Program, fileName: string) => {
+// Exported components that contain JSX.
+const collectComponentExports = (editor: SourceEditor, fileName: string) => {
   const components: ComponentExport[] = [];
+  const { program, scopes } = editor;
 
   // Helper to add a component to the collection if it contains JSX
   const addComponent = (
     exportedName: string,
-    localIdentifier: t.Identifier,
-    valuePath: NodePath<t.Node | null | undefined> | null
+    localName: string,
+    value: Node | null | undefined
   ) => {
-    if (!valuePath || !valuePath.node) {
-      return;
-    }
-
-    const target = unwrapExpression(valuePath.node);
-    if (!target) {
+    if (!value || !unwrapExpression(value)) {
       return;
     }
 
-    if (!containsJsxNode(valuePath)) {
+    if (!containsJsxNode(value)) {
       return;
     }
 
-    components.push({ exportedName, localIdentifier });
+    components.push({ exportedName, localName });
   };
 
-  traverse(program, {
-    ExportNamedDeclaration(path) {
-      const { node } = path;
+  for (const node of program.body) {
+    if (node.type === 'ExportNamedDeclaration') {
       if (node.source) {
-        return;
+        continue;
       }
 
-      const declarationPath = path.get('declaration');
-
-      if (declarationPath.isVariableDeclaration()) {
-        declarationPath.get('declarations').forEach((declPath) => {
-          if (!declPath.isVariableDeclarator()) {
-            return;
-          }
-          const id = declPath.node.id;
-          if (!t.isIdentifier(id)) {
-            return;
+      const { declaration } = node;
+      if (declaration?.type === 'VariableDeclaration') {
+        for (const declarator of declaration.declarations) {
+          if (declarator.id.type === 'Identifier') {
+            addComponent(declarator.id.name, declarator.id.name, declarator.init);
           }
-          const initPath = declPath.get('init');
-          addComponent(id.name, id, initPath);
-        });
-      } else if (declarationPath.isFunctionDeclaration() && declarationPath.node.id) {
-        const declarationId = declarationPath.node.id;
-        if (t.isIdentifier(declarationId)) {
-          addComponent(declarationId.name, declarationId, declarationPath);
-        }
-      } else if (declarationPath.isClassDeclaration() && declarationPath.node.id) {
-        const declarationId = declarationPath.node.id;
-        if (t.isIdentifier(declarationId)) {
-          addComponent(declarationId.name, declarationId, declarationPath);
         }
+      } else if (
+        (declaration?.type === 'FunctionDeclaration' || declaration?.type === 'ClassDeclaration') &&
+        declaration.id
+      ) {
+        addComponent(declaration.id.name, declaration.id.name, declaration);
       }
 
-      path.get('specifiers').forEach((specifierPath) => {
-        if (!specifierPath.isExportSpecifier()) {
-          return;
+      for (const specifier of node.specifiers) {
+        const { local, exported } = specifier;
+        if (local.type !== 'Identifier' || exported.type !== 'Identifier') {
+          continue;
         }
-        const { local, exported } = specifierPath.node;
-        if (!t.isIdentifier(local) || !t.isIdentifier(exported)) {
-          return;
-        }
-        const binding = specifierPath.scope.getBinding(local.name);
+        const binding = scopes.program.bindings.get(local.name);
         if (!binding) {
-          return;
-        }
-
-        const bindingPath = binding.path;
-        const localIdentifier = binding.identifier;
-        if (!t.isIdentifier(localIdentifier)) {
-          return;
+          continue;
         }
-        if (bindingPath.isVariableDeclarator()) {
-          addComponent(exported.name, localIdentifier, bindingPath.get('init'));
-        } else if (bindingPath.isFunctionDeclaration() || bindingPath.isClassDeclaration()) {
-          const bindingNodeId = bindingPath.node.id;
-          if (t.isIdentifier(bindingNodeId)) {
-            addComponent(exported.name, localIdentifier, bindingPath);
-          }
-        }
-      });
-    },
-    ExportDefaultDeclaration(path) {
-      const { node } = path;
-      const declaration = node.declaration;
-
-      if (
-        t.isFunctionExpression(declaration) ||
-        t.isArrowFunctionExpression(declaration) ||
-        t.isClassExpression(declaration)
-      ) {
-        const identifierName = createComponentNameFromFileName(fileName);
-        const identifier = path.scope.generateUidIdentifier(identifierName);
-        const variableDeclaration = t.variableDeclaration('const', [
-          t.variableDeclarator(identifier, declaration),
-        ]);
-        variableDeclaration.loc = node.loc;
-        path.insertBefore(variableDeclaration);
-        node.declaration = identifier;
-
-        const insertedVarPath = path.getPrevSibling();
-        let initPath: NodePath<t.Node | null | undefined> | null = null;
-        if (insertedVarPath?.isVariableDeclaration()) {
-          const declarationPath = insertedVarPath.get('declarations')[0];
-          if (declarationPath?.isVariableDeclarator()) {
-            initPath = declarationPath.get('init');
-          }
+        if (binding.node.type === 'VariableDeclarator') {
+          addComponent(exported.name, binding.name, binding.node.init);
+        } else if (
+          (binding.node.type === 'FunctionDeclaration' ||
+            binding.node.type === 'ClassDeclaration') &&
+          binding.node.id
+        ) {
+          addComponent(exported.name, binding.name, binding.node);
         }
-
-        addComponent(identifierName, identifier, initPath);
-        return;
       }
+    } else if (node.type === 'ExportDefaultDeclaration') {
+      const declaration = node.declaration as Node;
 
-      if (t.isCallExpression(declaration)) {
+      if (
+        declaration.type === 'FunctionExpression' ||
+        declaration.type === 'ArrowFunctionExpression' ||
+        declaration.type === 'ClassExpression' ||
         // Handle wrapped component exports e.g.
         // export default someWrapper(Component)
+        declaration.type === 'CallExpression'
+      ) {
         const identifierName = createComponentNameFromFileName(fileName);
-        const identifier = path.scope.generateUidIdentifier(identifierName);
-        const variableDeclaration = t.variableDeclaration('const', [
-          t.variableDeclarator(identifier, declaration),
-        ]);
-        variableDeclaration.loc = node.loc;
-        path.insertBefore(variableDeclaration);
-        node.declaration = identifier;
-
-        // Assume wrapped exports are components without detecting JSX to filter out. We can do that if needed in the future based on feedback.
-        components.push({ exportedName: identifierName, localIdentifier: identifier });
-        return;
+        const identifier = generateUid(scopes, identifierName);
+        const span = declaration as Node & { start: number };
+        editor.edits.overwrite(node.start, span.start, `const ${identifier} = `);
+        editor.edits.appendLeft(node.end, `\nexport default ${identifier};`);
+
+        if (declaration.type === 'CallExpression') {
+          // Assume wrapped exports are components without detecting JSX to filter out. We can do that if needed in the future based on feedback.
+          components.push({ exportedName: identifierName, localName: identifier });
+        } else {
+          addComponent(identifierName, identifier, declaration);
+        }
+        continue;
       }
 
-      if (t.isIdentifier(declaration)) {
-        const binding = path.scope.getBinding(declaration.name);
+      if (declaration.type === 'Identifier') {
+        const binding = scopes.program.bindings.get(declaration.name);
         if (!binding) {
-          return;
+          continue;
         }
 
-        const bindingIdentifier = binding.identifier;
-        if (!t.isIdentifier(bindingIdentifier)) {
-          return;
+        if (binding.node.type === 'VariableDeclarator') {
+          addComponent(createComponentNameFromFileName(fileName), binding.name, binding.node.init);
+        } else if (
+          (binding.node.type === 'FunctionDeclaration' ||
+            binding.node.type === 'ClassDeclaration') &&
+          binding.node.id
+        ) {
+          addComponent(binding.node.id.name, binding.name, binding.node);
         }
-
-        if (binding.path.isVariableDeclarator()) {
-          addComponent(
-            createComponentNameFromFileName(fileName),
-            bindingIdentifier,
-            binding.path.get('init')
-          );
-        } else if (binding.path.isFunctionDeclaration() || binding.path.isClassDeclaration()) {
-          const bindingNodeId = binding.path.node.id;
-          if (t.isIdentifier(bindingNodeId)) {
-            addComponent(bindingNodeId.name, bindingIdentifier, binding.path);
-          }
-        }
-        return;
-      }
-
-      if (t.isFunctionDeclaration(declaration) && declaration.id) {
-        addComponent(
-          declaration.id.name,
-          declaration.id,
-          path.get('declaration') as NodePath<t.FunctionDeclaration>
-        );
-        return;
+        continue;
       }
 
-      if (t.isClassDeclaration(declaration) && declaration.id) {
-        addComponent(
-          declaration.id.name,
-          declaration.id,
-          path.get('declaration') as NodePath<t.ClassDeclaration>
-        );
+      if (
+        (declaration.type === 'FunctionDeclaration' || declaration.type === 'ClassDeclaration') &&
+        declaration.id
+      ) {
+        addComponent(declaration.id.name, declaration.id.name, declaration);
       }
-    },
-  });
+    }
+  }
 
   return components;
 };
@@ -293,31 +222,22 @@ export const componentTransform = async ({
     componentName: string;
     fileName: string;
   }) => Promise<ArgTypes | null | undefined>;
-}): Promise<ReturnType<typeof generate> | { code: string; map: null }> => {
-  const ast = babelParse(code);
-  const file = new BabelFileClass({ filename: fileName, highlightCode: false }, { code, ast });
+}): Promise<ReturnType<typeof printWithTail> | { code: string; map: null }> => {
+  const editor = new SourceEditor(code, fileName);
 
-  const components = collectComponentExports(ast.program, fileName);
+  const components = collectComponentExports(editor, fileName);
   if (!components.length) {
     return { code, map: null };
   }
 
-  const vitestTestId = file.path.scope.generateUidIdentifier('test');
-  const vitestExpectId = file.path.scope.generateUidIdentifier('expect');
-  const testStoryId = file.path.scope.generateUidIdentifier('testStory');
-  const convertToFilePathId = t.identifier('convertToFilePath');
-  const fnId = file.path.scope.generateUidIdentifier('fn');
+  const { scopes } = editor;
+  const vitestTestId = generateUid(scopes, 'test');
+  const vitestExpectId = generateUid(scopes, 'expect');
+  const testStoryId = generateUid(scopes, 'testStory');
+  const convertToFilePathId = 'convertToFilePath';
+  const fnId = generateUid(scopes, 'fn');
 
-  dedupeImports(ast.program, VITEST_IMPORT_SOURCE, [
-    t.importSpecifier(vitestTestId, t.identifier('test')),
-    t.importSpecifier(vitestExpectId, t.identifier('expect')),
-  ]);
-  dedupeImports(ast.program, TEST_UTILS_IMPORT_SOURCE, [
-    t.importSpecifier(testStoryId, t.identifier('testStory')),
-    t.importSpecifier(convertToFilePathId, t.identifier('convertToFilePath')),
-  ]);
-
-  const testStatements: t.ExpressionStatement[] = [];
+  const testStatements: string[] = [];
 
   // Detect whether argTypes contains fn placeholders that need replacing with an actual function expression. Done ahead of time for performance reasons.
   const hasFunctionPlaceholder = (value: unknown): boolean => {
@@ -329,43 +249,35 @@ export const componentTransform = async ({
    * [[STORYBOOK_FN_PLACEHOLDER]] In those cases we need to replace them with an actual fn() call
    * from storybook/test
    */
-  const valueToNodeRecursive = (value: unknown, replaceFnCalls: boolean): t.Expression => {
-    // When there are no function placeholders, no need to recurse - just use valueToNode
+  const printArg = (value: unknown, replaceFnCalls: boolean): string => {
     if (!replaceFnCalls) {
-      return t.valueToNode(value) as t.Expression;
+      return printValue(value, '"');
     }
 
     if (value === STORYBOOK_FN_PLACEHOLDER) {
-      return t.callExpression(fnId, []);
+      return `${fnId}()`;
     }
 
     if (typeof value === 'object' && value !== null) {
       if (Array.isArray(value)) {
-        return t.arrayExpression(value.map((val) => valueToNodeRecursive(val, replaceFnCalls)));
+        return `[${value.map((val) => printArg(val, replaceFnCalls)).join(', ')}]`;
       }
 
       // For objects, create a new object with recursively processed values
-      const properties = Object.entries(value).map(([key, val]) => {
-        const keyNode = t.isValidIdentifier(key) ? t.identifier(key) : t.stringLiteral(key);
-        return t.objectProperty(keyNode, valueToNodeRecursive(val, replaceFnCalls));
-      });
-      return t.objectExpression(properties);
+      return buildArgsExpression(value as Record<string, unknown>, replaceFnCalls);
     }
 
-    return t.valueToNode(value) as t.Expression;
+    return printValue(value, '"');
   };
 
-  // Helper to convert a props object to an AST object expression
   const buildArgsExpression = (args?: Record<string, unknown>, useFnImport = false) => {
     if (!args || Object.keys(args).length === 0) {
-      return t.objectExpression([]);
+      return '{}';
     }
 
-    const properties = Object.entries(args).map(([key, value]) => {
-      const keyNode = t.isValidIdentifier(key) ? t.identifier(key) : t.stringLiteral(key);
-      return t.objectProperty(keyNode, valueToNodeRecursive(value, useFnImport));
-    });
-    return t.objectExpression(properties);
+    return `{ ${Object.entries(args)
+      .map(([key, value]) => `${printKey(key, '"')}: ${printArg(value, useFnImport)}`)
+      .join(', ')} }`;
   };
 
   // Check if any component has function placeholders and add import if needed
@@ -386,65 +298,43 @@ export const componentTransform = async ({
 
     // Each component export is passed as component in an inline meta
     // this allows for multiple component metas in a single test file
-    const meta = t.objectExpression([
-      t.objectProperty(
-        t.identifier('title'),
-        t.stringLiteral(`generated/tests/${component.exportedName}`)
-      ),
-      t.objectProperty(t.identifier('component'), component.localIdentifier),
-    ]);
+    const meta = `{ title: ${JSON.stringify(`generated/tests/${component.exportedName}`)}, component: ${component.localName} }`;
 
     // The actual testStory function
-    const testStoryArgs = t.objectExpression([
-      t.objectProperty(t.identifier('exportName'), t.stringLiteral(component.exportedName)),
-      // This is where the story annotation for a particular component is defined, inline
-      t.objectProperty(
-        t.identifier('story'),
-        t.objectExpression([
-          t.objectProperty(
-            t.identifier('args'),
-            buildArgsExpression(generatedArgs, hasAnyFunctionPlaceholders)
-          ),
-        ])
-      ),
-      t.objectProperty(t.identifier('meta'), meta),
-      t.objectProperty(t.identifier('skipTags'), t.arrayExpression([])),
-      t.objectProperty(
-        t.identifier('storyId'),
-        t.stringLiteral(`generated-${component.exportedName}`)
-      ),
-      t.objectProperty(t.identifier('componentPath'), t.stringLiteral(fileName)),
-      t.objectProperty(
-        t.identifier('componentName'),
-        t.stringLiteral(component.localIdentifier.name)
-      ),
-    ]);
-
-    const testCall = t.expressionStatement(
-      t.callExpression(vitestTestId, [
-        t.stringLiteral(component.exportedName),
-        t.callExpression(testStoryId, [testStoryArgs]),
-      ])
+    const testStoryArgs = [
+      `exportName: ${JSON.stringify(component.exportedName)}`,
+      `story: { args: ${buildArgsExpression(generatedArgs, hasAnyFunctionPlaceholders)} }`,
+      `meta: ${meta}`,
+      'skipTags: []',
+      `storyId: ${JSON.stringify(`generated-${component.exportedName}`)}`,
+      `componentPath: ${JSON.stringify(fileName)}`,
+      `componentName: ${JSON.stringify(component.localName)}`,
+    ].join(', ');
+
+    testStatements.push(
+      `  ${vitestTestId}(${JSON.stringify(component.exportedName)}, ${testStoryId}({ ${testStoryArgs} }));`
     );
-
-    testStatements.push(testCall);
   }
 
+  dedupeImports(editor, VITEST_IMPORT_SOURCE, [
+    { imported: 'test', local: vitestTestId },
+    { imported: 'expect', local: vitestExpectId },
+  ]);
+  dedupeImports(editor, TEST_UTILS_IMPORT_SOURCE, [
+    { imported: 'testStory', local: testStoryId },
+    { imported: 'convertToFilePath', local: convertToFilePathId },
+  ]);
   if (hasAnyFunctionPlaceholders) {
-    dedupeImports(ast.program, STORYBOOK_TEST_IMPORT_SOURCE, [
-      t.importSpecifier(fnId, t.identifier('fn')),
-    ]);
+    dedupeImports(editor, STORYBOOK_TEST_IMPORT_SOURCE, [{ imported: 'fn', local: fnId }]);
   }
 
   // Wrap the code in a guard to avoid side effects when running tests
-  const { declaration: guardDeclaration, identifier: guardIdentifier } = createTestGuardDeclaration(
-    file.path.scope,
-    vitestExpectId,
-    convertToFilePathId
-  );
-
-  ast.program.body.push(guardDeclaration);
-  ast.program.body.push(t.ifStatement(guardIdentifier, t.blockStatement(testStatements)));
-
-  return generate(ast, { sourceMaps: true, sourceFileName: fileName }, code);
+  const guardIdentifier = generateUid(scopes, 'isRunningFromThisFile');
+  const tail = new GeneratedTail();
+  tail.push(createTestGuardDeclaration(guardIdentifier, vitestExpectId, convertToFilePathId));
+  tail.push(`if (${guardIdentifier}) {`);
+  testStatements.forEach((statement) => tail.push(statement));
+  tail.push('}');
+
+  return printWithTail(editor, tail, fileName);
 };
diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
index 151c758d4ba8..e2f48b97a850 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
@@ -67,20 +67,15 @@ describe('transformer', () => {
           import { test as _test, expect as _expect } from "vitest";
           import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
           const _meta = {
-            component: Button,
-            title: "automatic/calculated/title"
-          };
+                      component: Button,
+                      title: "automatic/calculated/title",
+                    };
           export default _meta;
-          export const Story = {};
+                    export const Story = {};
+                  
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Story", _testStory({
-              exportName: "Story",
-              story: Story,
-              meta: _meta,
-              skipTags: [],
-              storyId: "automatic-calculated-title--story"
-            }));
+            _test("Story", _testStory({ exportName: "Story", story: Story, meta: _meta, skipTags: [], storyId: "automatic-calculated-title--story" }));
           }
         `);
       });
@@ -102,20 +97,15 @@ describe('transformer', () => {
           import { test as _test, expect as _expect } from "vitest";
           import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
           const _meta = {
-            title: "automatic/calculated/title",
-            component: Button
-          };
+                      title: "automatic/calculated/title",
+                      component: Button,
+                    };
           export default _meta;
-          export const Story = {};
+                    export const Story = {};
+                  
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Story", _testStory({
-              exportName: "Story",
-              story: Story,
-              meta: _meta,
-              skipTags: [],
-              storyId: "automatic-calculated-title--story"
-            }));
+            _test("Story", _testStory({ exportName: "Story", story: Story, meta: _meta, skipTags: [], storyId: "automatic-calculated-title--story" }));
           }
         `);
       });
@@ -138,20 +128,16 @@ describe('transformer', () => {
           import { test as _test, expect as _expect } from "vitest";
           import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
           const meta = {
-            component: Button,
-            title: "automatic/calculated/title"
-          };
-          export default meta;
-          export const Story = {};
+                      component: Button,
+                      title: "automatic/calculated/title",
+                    };
+                    export default meta;
+
+                    export const Story = {};
+                  
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Story", _testStory({
-              exportName: "Story",
-              story: Story,
-              meta: meta,
-              skipTags: [],
-              storyId: "automatic-calculated-title--story"
-            }));
+            _test("Story", _testStory({ exportName: "Story", story: Story, meta: meta, skipTags: [], storyId: "automatic-calculated-title--story" }));
           }
         `);
       });
@@ -175,20 +161,16 @@ describe('transformer', () => {
           import { test as _test, expect as _expect } from "vitest";
           import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
           const meta = {
-            title: "automatic/calculated/title",
-            component: Button
-          };
-          export default meta;
-          export const Story = {};
+                      title: "automatic/calculated/title",
+                      component: Button,
+                    };
+                    export default meta;
+
+                    export const Story = {};
+                  
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Story", _testStory({
-              exportName: "Story",
-              story: Story,
-              meta: meta,
-              skipTags: [],
-              storyId: "automatic-calculated-title--story"
-            }));
+            _test("Story", _testStory({ exportName: "Story", story: Story, meta: meta, skipTags: [], storyId: "automatic-calculated-title--story" }));
           }
         `);
       });
@@ -213,24 +195,19 @@ describe('transformer', () => {
           import { test as _test, expect as _expect } from "vitest";
           import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
           const _meta = {
-            component: Button,
-            title: "automatic/calculated/title"
-          };
+                      component: Button,
+                      title: "automatic/calculated/title",
+                    }
           export default _meta;
-          export const Primary = {
-            args: {
-              label: 'Primary Button'
-            }
-          };
+                    export const Primary = {
+                      args: {
+                        label: 'Primary Button',
+                      },
+                    };
+                  
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Primary", _testStory({
-              exportName: "Primary",
-              story: Primary,
-              meta: _meta,
-              skipTags: [],
-              storyId: "automatic-calculated-title--primary"
-            }));
+            _test("Primary", _testStory({ exportName: "Primary", story: Primary, meta: _meta, skipTags: [], storyId: "automatic-calculated-title--primary" }));
           }
         `);
       });
@@ -245,23 +222,12 @@ describe('transformer', () => {
           expect(result.code).toMatchInlineSnapshot(`
             import { test as _test, expect as _expect } from "vitest";
             import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
-            const _meta = {
-              component: Button,
-              title: "automatic/calculated/title"
-            };
+            const _meta = { component: Button, title: "automatic/calculated/title" }
             export default _meta;
-            export const Primary = {
-              name: "custom name"
-            };
+                      export const Primary = { name: "custom name" };
             const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
             if (_isRunningFromThisFile) {
-              _test("custom name", _testStory({
-                exportName: "Primary",
-                story: Primary,
-                meta: _meta,
-                skipTags: [],
-                storyId: "automatic-calculated-title--primary"
-              }));
+              _test("custom name", _testStory({ exportName: "Primary", story: Primary, meta: _meta, skipTags: [], storyId: "automatic-calculated-title--primary" }));
             }
           `);
         });
@@ -275,22 +241,13 @@ describe('transformer', () => {
           expect(result.code).toMatchInlineSnapshot(`
             import { test as _test, expect as _expect } from "vitest";
             import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
-            const _meta = {
-              component: Button,
-              title: "automatic/calculated/title"
-            };
+            const _meta = { component: Button, title: "automatic/calculated/title" }
             export default _meta;
-            export const Story = () => {};
-            Story.storyName = 'custom name';
+                      export const Story = () => {}
+                      Story.storyName = 'custom name';
             const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
             if (_isRunningFromThisFile) {
-              _test("custom name", _testStory({
-                exportName: "Story",
-                story: Story,
-                meta: _meta,
-                skipTags: [],
-                storyId: "automatic-calculated-title--story"
-              }));
+              _test("custom name", _testStory({ exportName: "Story", story: Story, meta: _meta, skipTags: [], storyId: "automatic-calculated-title--story" }));
             }
           `);
         });
@@ -313,25 +270,19 @@ describe('transformer', () => {
         expect(result.code).toMatchInlineSnapshot(`
           import { test as _test, expect as _expect } from "vitest";
           import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
-          const _meta = {
-            title: "automatic/calculated/title"
-          };
+          const _meta = { title: "automatic/calculated/title" };
           export default _meta;
-          const Primary = {
-            args: {
-              label: 'Primary Button'
-            }
-          };
-          export { Primary };
+                    const Primary = {
+                      args: {
+                        label: 'Primary Button',
+                      },
+                    };
+
+                    export { Primary };
+                  
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Primary", _testStory({
-              exportName: "Primary",
-              story: Primary,
-              meta: _meta,
-              skipTags: [],
-              storyId: "automatic-calculated-title--primary"
-            }));
+            _test("Primary", _testStory({ exportName: "Primary", story: Primary, meta: _meta, skipTags: [], storyId: "automatic-calculated-title--primary" }));
           }
         `);
       });
@@ -353,25 +304,19 @@ describe('transformer', () => {
         expect(result.code).toMatchInlineSnapshot(`
           import { test as _test, expect as _expect } from "vitest";
           import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
-          const _meta = {
-            title: "automatic/calculated/title"
-          };
+          const _meta = { title: "automatic/calculated/title" };
           export default _meta;
-          const Primary = {
-            args: {
-              label: 'Primary Button'
-            }
-          };
-          export { Primary as PrimaryStory };
+                    const Primary = {
+                      args: {
+                        label: 'Primary Button',
+                      },
+                    };
+
+                    export { Primary as PrimaryStory };
+                  
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("PrimaryStory", _testStory({
-              exportName: "PrimaryStory",
-              story: Primary,
-              meta: _meta,
-              skipTags: [],
-              storyId: "automatic-calculated-title--primary-story"
-            }));
+            _test("PrimaryStory", _testStory({ exportName: "PrimaryStory", story: Primary, meta: _meta, skipTags: [], storyId: "automatic-calculated-title--primary-story" }));
           }
         `);
       });
@@ -394,33 +339,22 @@ describe('transformer', () => {
         expect(result.code).toMatchInlineSnapshot(`
           import { test as _test, expect as _expect } from "vitest";
           import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
-          const _meta = {
-            title: "automatic/calculated/title"
-          };
+          const _meta = { title: "automatic/calculated/title" };
           export default _meta;
-          const Primary = {
-            args: {
-              label: 'Primary Button'
-            }
-          };
-          export const Secondary = {};
-          export { Primary };
+                    const Primary = {
+                      args: {
+                        label: 'Primary Button',
+                      },
+                    };
+
+                    export const Secondary = {}
+
+                    export { Primary };
+                  
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Secondary", _testStory({
-              exportName: "Secondary",
-              story: Secondary,
-              meta: _meta,
-              skipTags: [],
-              storyId: "automatic-calculated-title--secondary"
-            }));
-            _test("Primary", _testStory({
-              exportName: "Primary",
-              story: Primary,
-              meta: _meta,
-              skipTags: [],
-              storyId: "automatic-calculated-title--primary"
-            }));
+            _test("Secondary", _testStory({ exportName: "Secondary", story: Secondary, meta: _meta, skipTags: [], storyId: "automatic-calculated-title--secondary" }));
+            _test("Primary", _testStory({ exportName: "Primary", story: Primary, meta: _meta, skipTags: [], storyId: "automatic-calculated-title--primary" }));
           }
         `);
       });
@@ -442,22 +376,17 @@ describe('transformer', () => {
           import { test as _test, expect as _expect } from "vitest";
           import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
           const _meta = {
-            title: "automatic/calculated/title",
-            component: Button,
-            excludeStories: ['nonStory']
-          };
+                      title: "automatic/calculated/title",
+                      component: Button,
+                      excludeStories: ['nonStory'],
+                    }
           export default _meta;
-          export const Story = {};
-          export const nonStory = 123;
+                    export const Story = {};
+                    export const nonStory = 123
+                  
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Story", _testStory({
-              exportName: "Story",
-              story: Story,
-              meta: _meta,
-              skipTags: [],
-              storyId: "automatic-calculated-title--story"
-            }));
+            _test("Story", _testStory({ exportName: "Story", story: Story, meta: _meta, skipTags: [], storyId: "automatic-calculated-title--story" }));
           }
         `);
       });
@@ -476,12 +405,13 @@ describe('transformer', () => {
         expect(result.code).toMatchInlineSnapshot(`
           import { test as _test, describe as _describe } from "vitest";
           const _meta = {
-            title: "automatic/calculated/title",
-            component: Button,
-            tags: ['!test']
-          };
+                      title: "automatic/calculated/title",
+                      component: Button,
+                      tags: ['!test']
+                    }
           export default _meta;
-          export const Story = {};
+                    export const Story = {}
+                  
           _describe.skip("No valid tests found");
         `);
       });
@@ -504,23 +434,15 @@ describe('transformer', () => {
         expect(result.code).toMatchInlineSnapshot(`
           import { test as _test, expect as _expect } from "vitest";
           import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
-          const _meta = {
-            title: "automatic/calculated/title"
-          };
+          const _meta = { title: "automatic/calculated/title" };
           export default _meta;
-          export const Included = {
-            tags: ['include-me']
-          };
-          export const NotIncluded = {};
+                    export const Included = { tags: ['include-me'] };
+
+                    export const NotIncluded = {}
+                  
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Included", _testStory({
-              exportName: "Included",
-              story: Included,
-              meta: _meta,
-              skipTags: [],
-              storyId: "automatic-calculated-title--included"
-            }));
+            _test("Included", _testStory({ exportName: "Included", story: Included, meta: _meta, skipTags: [], storyId: "automatic-calculated-title--included" }));
           }
         `);
       });
@@ -541,23 +463,15 @@ describe('transformer', () => {
         expect(result.code).toMatchInlineSnapshot(`
           import { test as _test, expect as _expect } from "vitest";
           import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
-          const _meta = {
-            title: "automatic/calculated/title"
-          };
+          const _meta = { title: "automatic/calculated/title" };
           export default _meta;
-          export const Included = {};
-          export const NotIncluded = {
-            tags: ['exclude-me']
-          };
+                    export const Included = {};
+
+                    export const NotIncluded = { tags: ['exclude-me'] }
+                  
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Included", _testStory({
-              exportName: "Included",
-              story: Included,
-              meta: _meta,
-              skipTags: [],
-              storyId: "automatic-calculated-title--included"
-            }));
+            _test("Included", _testStory({ exportName: "Included", story: Included, meta: _meta, skipTags: [], storyId: "automatic-calculated-title--included" }));
           }
         `);
       });
@@ -576,22 +490,13 @@ describe('transformer', () => {
         expect(result.code).toMatchInlineSnapshot(`
           import { test as _test, expect as _expect } from "vitest";
           import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
-          const _meta = {
-            title: "automatic/calculated/title"
-          };
+          const _meta = { title: "automatic/calculated/title" };
           export default _meta;
-          export const Skipped = {
-            tags: ['skip-me']
-          };
+                    export const Skipped = { tags: ['skip-me'] };
+                  
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Skipped", _testStory({
-              exportName: "Skipped",
-              story: Skipped,
-              meta: _meta,
-              skipTags: ["skip-me"],
-              storyId: "automatic-calculated-title--skipped"
-            }));
+            _test("Skipped", _testStory({ exportName: "Skipped", story: Skipped, meta: _meta, skipTags: ["skip-me"], storyId: "automatic-calculated-title--skipped" }));
           }
         `);
       });
@@ -612,41 +517,18 @@ describe('transformer', () => {
         expect(result.code).toMatchInlineSnapshot(`
           import { test as _test, expect as _expect, describe as _describe } from "vitest";
           import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
-          const _meta = {
-            title: "automatic/calculated/title"
-          };
+          const _meta = { title: "automatic/calculated/title" };
           export default _meta;
-          export const Primary = {};
-          Primary.test("runs", () => {});
-          Primary.test("skipped", {
-            tags: ['skip-me']
-          }, () => {});
+                    export const Primary = {};
+                    Primary.test("runs", () => {});
+                    Primary.test("skipped", { tags: ['skip-me'] }, () => {});
+                  
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
             _describe("Primary  ", () => {
-              _test("base story", _testStory({
-                exportName: "Primary",
-                story: Primary,
-                meta: _meta,
-                skipTags: ["skip-me"],
-                storyId: "automatic-calculated-title--primary"
-              }));
-              _test("runs", _testStory({
-                exportName: "Primary",
-                story: Primary,
-                meta: _meta,
-                skipTags: ["skip-me"],
-                storyId: "automatic-calculated-title--primary:runs",
-                testName: "runs"
-              }));
-              _test("skipped", _testStory({
-                exportName: "Primary",
-                story: Primary,
-                meta: _meta,
-                skipTags: ["skip-me"],
-                storyId: "automatic-calculated-title--primary:skipped",
-                testName: "skipped"
-              }));
+              _test("base story", _testStory({ exportName: "Primary", story: Primary, meta: _meta, skipTags: ["skip-me"], storyId: "automatic-calculated-title--primary" }));
+              _test("runs", _testStory({ exportName: "Primary", story: Primary, meta: _meta, skipTags: ["skip-me"], storyId: "automatic-calculated-title--primary:runs", testName: "runs" }));
+              _test("skipped", _testStory({ exportName: "Primary", story: Primary, meta: _meta, skipTags: ["skip-me"], storyId: "automatic-calculated-title--primary:skipped", testName: "skipped" }));
             });
           }
         `);
@@ -724,20 +606,15 @@ describe('transformer', () => {
           import { test as _test, expect as _expect } from "vitest";
           import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
           const meta = {
-            title: "automatic/calculated/title",
-            component: Button
-          };
-          export default meta;
-          export const Primary = {};
+                      title: "automatic/calculated/title",
+                      component: Button,
+                    }
+                    export default meta;
+                    export const Primary = {};
+                  
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Primary", _testStory({
-              exportName: "Primary",
-              story: Primary,
-              meta: meta,
-              skipTags: [],
-              storyId: "automatic-calculated-title--primary"
-            }));
+            _test("Primary", _testStory({ exportName: "Primary", story: Primary, meta: meta, skipTags: [], storyId: "automatic-calculated-title--primary" }));
           }
         `);
 
@@ -787,20 +664,12 @@ describe('transformer', () => {
           import { test as _test, expect as _expect } from "vitest";
           import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
           import { config } from '#.storybook/preview';
-          const meta = config.meta({
-            component: Button,
-            title: "automatic/calculated/title"
-          });
-          export const Story = meta.story({});
+                  const meta = config.meta({ component: Button, title: "automatic/calculated/title" });
+                  export const Story = meta.story({});
+                
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Story", _testStory({
-              exportName: "Story",
-              story: Story,
-              meta: meta,
-              skipTags: [],
-              storyId: "automatic-calculated-title--story"
-            }));
+            _test("Story", _testStory({ exportName: "Story", story: Story, meta: meta, skipTags: [], storyId: "automatic-calculated-title--story" }));
           }
         `);
       });
@@ -818,22 +687,11 @@ describe('transformer', () => {
           import { test as _test, expect as _expect } from "vitest";
           import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
           import { config } from '#.storybook/preview';
-          const meta = config.meta({
-            component: Button,
-            title: "automatic/calculated/title"
-          });
-          export const Primary = meta.story({
-            name: "custom name"
-          });
+                  const meta = config.meta({ component: Button, title: "automatic/calculated/title" });
+                  export const Primary = meta.story({ name: "custom name" });
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("custom name", _testStory({
-              exportName: "Primary",
-              story: Primary,
-              meta: meta,
-              skipTags: [],
-              storyId: "automatic-calculated-title--primary"
-            }));
+            _test("custom name", _testStory({ exportName: "Primary", story: Primary, meta: meta, skipTags: [], storyId: "automatic-calculated-title--primary" }));
           }
         `);
       });
@@ -857,25 +715,18 @@ describe('transformer', () => {
           import { test as _test, expect as _expect } from "vitest";
           import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
           import { config } from '#.storybook/preview';
-          const meta = config.meta({
-            component: Button,
-            title: "automatic/calculated/title"
-          });
-          const Primary = meta.story({
-            args: {
-              label: 'Primary Button'
-            }
-          });
-          export { Primary };
+                  const meta = config.meta({ component: Button, title: "automatic/calculated/title" });
+                  const Primary = meta.story({
+                    args: {
+                      label: 'Primary Button',
+                    }
+                  });
+
+                  export { Primary };
+                
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Primary", _testStory({
-              exportName: "Primary",
-              story: Primary,
-              meta: meta,
-              skipTags: [],
-              storyId: "automatic-calculated-title--primary"
-            }));
+            _test("Primary", _testStory({ exportName: "Primary", story: Primary, meta: meta, skipTags: [], storyId: "automatic-calculated-title--primary" }));
           }
         `);
       });
@@ -899,25 +750,18 @@ describe('transformer', () => {
           import { test as _test, expect as _expect } from "vitest";
           import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
           import { config } from '#.storybook/preview';
-          const meta = config.meta({
-            component: Button,
-            title: "automatic/calculated/title"
-          });
-          const Primary = meta.story({
-            args: {
-              label: 'Primary Button'
-            }
-          });
-          export { Primary as PrimaryStory };
+                  const meta = config.meta({ component: Button, title: "automatic/calculated/title" });
+                  const Primary = meta.story({
+                    args: {
+                      label: 'Primary Button',
+                    }
+                  });
+
+                  export { Primary as PrimaryStory };
+                
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("PrimaryStory", _testStory({
-              exportName: "PrimaryStory",
-              story: Primary,
-              meta: meta,
-              skipTags: [],
-              storyId: "automatic-calculated-title--primary-story"
-            }));
+            _test("PrimaryStory", _testStory({ exportName: "PrimaryStory", story: Primary, meta: meta, skipTags: [], storyId: "automatic-calculated-title--primary-story" }));
           }
         `);
       });
@@ -940,33 +784,22 @@ describe('transformer', () => {
         expect(result.code).toMatchInlineSnapshot(`
           import { test as _test, expect as _expect } from "vitest";
           import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
-          const _meta = {
-            title: "automatic/calculated/title"
-          };
+          const _meta = { title: "automatic/calculated/title" };
           export default _meta;
-          const Primary = {
-            args: {
-              label: 'Primary Button'
-            }
-          };
-          export const Secondary = {};
-          export { Primary };
+                  const Primary = {
+                    args: {
+                      label: 'Primary Button',
+                    },
+                  };
+
+                  export const Secondary = {}
+
+                  export { Primary };
+                
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Secondary", _testStory({
-              exportName: "Secondary",
-              story: Secondary,
-              meta: _meta,
-              skipTags: [],
-              storyId: "automatic-calculated-title--secondary"
-            }));
-            _test("Primary", _testStory({
-              exportName: "Primary",
-              story: Primary,
-              meta: _meta,
-              skipTags: [],
-              storyId: "automatic-calculated-title--primary"
-            }));
+            _test("Secondary", _testStory({ exportName: "Secondary", story: Secondary, meta: _meta, skipTags: [], storyId: "automatic-calculated-title--secondary" }));
+            _test("Primary", _testStory({ exportName: "Primary", story: Primary, meta: _meta, skipTags: [], storyId: "automatic-calculated-title--primary" }));
           }
         `);
       });
@@ -988,22 +821,17 @@ describe('transformer', () => {
           import { test as _test, expect as _expect } from "vitest";
           import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
           const _meta = {
-            title: "automatic/calculated/title",
-            component: Button,
-            excludeStories: ['nonStory']
-          };
+                    title: "automatic/calculated/title",
+                    component: Button,
+                    excludeStories: ['nonStory'],
+                  }
           export default _meta;
-          export const Story = {};
-          export const nonStory = 123;
+                  export const Story = {};
+                  export const nonStory = 123
+                
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Story", _testStory({
-              exportName: "Story",
-              story: Story,
-              meta: _meta,
-              skipTags: [],
-              storyId: "automatic-calculated-title--story"
-            }));
+            _test("Story", _testStory({ exportName: "Story", story: Story, meta: _meta, skipTags: [], storyId: "automatic-calculated-title--story" }));
           }
         `);
       });
@@ -1020,16 +848,17 @@ describe('transformer', () => {
         const result = await transform({ code });
 
         expect(result.code).toMatchInlineSnapshot(`
-        import { test as _test, describe as _describe } from "vitest";
-        const _meta = {
-          title: "automatic/calculated/title",
-          component: Button,
-          tags: ['!test']
-        };
-        export default _meta;
-        export const Story = {};
-        _describe.skip("No valid tests found");
-      `);
+          import { test as _test, describe as _describe } from "vitest";
+          const _meta = {
+                    title: "automatic/calculated/title",
+                    component: Button,
+                    tags: ['!test']
+                  }
+          export default _meta;
+                  export const Story = {}
+                
+          _describe.skip("No valid tests found");
+        `);
       });
       it('should support test annotation', async () => {
         const code = `
@@ -1046,43 +875,17 @@ describe('transformer', () => {
           import { test as _test, expect as _expect, describe as _describe } from "vitest";
           import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
           import { config } from '#.storybook/preview';
-          const meta = config.meta({
-            component: Button,
-            title: "automatic/calculated/title"
-          });
-          export const A = meta.story({});
-          A.test("foo", {
-            args: {
-              primary: true
-            }
-          }, () => {});
-          A.test("bar", () => {});
+                  const meta = config.meta({ component: Button, title: "automatic/calculated/title" });
+                  export const A = meta.story({});
+                  A.test("foo", { args: { primary: true }}, () => {});
+                  A.test("bar", () => {});
+                
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
             _describe("A  ", () => {
-              _test("base story", _testStory({
-                exportName: "A",
-                story: A,
-                meta: meta,
-                skipTags: [],
-                storyId: "automatic-calculated-title--a"
-              }));
-              _test("foo", _testStory({
-                exportName: "A",
-                story: A,
-                meta: meta,
-                skipTags: [],
-                storyId: "automatic-calculated-title--a:foo",
-                testName: "foo"
-              }));
-              _test("bar", _testStory({
-                exportName: "A",
-                story: A,
-                meta: meta,
-                skipTags: [],
-                storyId: "automatic-calculated-title--a:bar",
-                testName: "bar"
-              }));
+              _test("base story", _testStory({ exportName: "A", story: A, meta: meta, skipTags: [], storyId: "automatic-calculated-title--a" }));
+              _test("foo", _testStory({ exportName: "A", story: A, meta: meta, skipTags: [], storyId: "automatic-calculated-title--a:foo", testName: "foo" }));
+              _test("bar", _testStory({ exportName: "A", story: A, meta: meta, skipTags: [], storyId: "automatic-calculated-title--a:bar", testName: "bar" }));
             });
           }
         `);
@@ -1103,29 +906,15 @@ describe('transformer', () => {
           import { test as _test, expect as _expect, describe as _describe } from "vitest";
           import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
           import { config } from '#.storybook/preview';
-          const meta = config.meta({
-            title: "automatic/calculated/title"
-          });
-          export const Primary = meta.story({});
-          Primary.test("foo", () => {});
+                    const meta = config.meta({ title: "automatic/calculated/title" });
+                    export const Primary = meta.story({});
+                    Primary.test("foo", () => {});
+                  
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
             _describe("Primary  ", () => {
-              _test("base story", _testStory({
-                exportName: "Primary",
-                story: Primary,
-                meta: meta,
-                skipTags: [],
-                storyId: "automatic-calculated-title--primary"
-              }));
-              _test("foo", _testStory({
-                exportName: "Primary",
-                story: Primary,
-                meta: meta,
-                skipTags: [],
-                storyId: "automatic-calculated-title--primary:foo",
-                testName: "foo"
-              }));
+              _test("base story", _testStory({ exportName: "Primary", story: Primary, meta: meta, skipTags: [], storyId: "automatic-calculated-title--primary" }));
+              _test("foo", _testStory({ exportName: "Primary", story: Primary, meta: meta, skipTags: [], storyId: "automatic-calculated-title--primary:foo", testName: "foo" }));
             });
           }
         `);
@@ -1151,22 +940,14 @@ describe('transformer', () => {
           import { test as _test, expect as _expect } from "vitest";
           import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
           import { config } from '#.storybook/preview';
-          const meta = config.meta({
-            title: "automatic/calculated/title"
-          });
-          export const Included = meta.story({
-            tags: ['include-me']
-          });
-          export const NotIncluded = meta.story({});
+                  const meta = config.meta({ title: "automatic/calculated/title" });
+                  export const Included = meta.story({ tags: ['include-me'] });
+
+                  export const NotIncluded = meta.story({});
+                
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Included", _testStory({
-              exportName: "Included",
-              story: Included,
-              meta: meta,
-              skipTags: [],
-              storyId: "automatic-calculated-title--included"
-            }));
+            _test("Included", _testStory({ exportName: "Included", story: Included, meta: meta, skipTags: [], storyId: "automatic-calculated-title--included" }));
           }
         `);
       });
@@ -1189,22 +970,14 @@ describe('transformer', () => {
           import { test as _test, expect as _expect } from "vitest";
           import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
           import { config } from '#.storybook/preview';
-          const meta = config.meta({
-            title: "automatic/calculated/title"
-          });
-          export const Included = meta.story({});
-          export const NotIncluded = meta.story({
-            tags: ['exclude-me']
-          });
+                    const meta = config.meta({ title: "automatic/calculated/title" });
+                    export const Included = meta.story({});
+
+                    export const NotIncluded = meta.story({ tags: ['exclude-me'] });
+                  
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Included", _testStory({
-              exportName: "Included",
-              story: Included,
-              meta: meta,
-              skipTags: [],
-              storyId: "automatic-calculated-title--included"
-            }));
+            _test("Included", _testStory({ exportName: "Included", story: Included, meta: meta, skipTags: [], storyId: "automatic-calculated-title--included" }));
           }
         `);
       });
@@ -1225,21 +998,12 @@ describe('transformer', () => {
           import { test as _test, expect as _expect } from "vitest";
           import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
           import { config } from '#.storybook/preview';
-          const meta = config.meta({
-            title: "automatic/calculated/title"
-          });
-          export const Skipped = meta.story({
-            tags: ['skip-me']
-          });
+                  const meta = config.meta({ title: "automatic/calculated/title" });
+                  export const Skipped = meta.story({ tags: ['skip-me'] });
+                
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Skipped", _testStory({
-              exportName: "Skipped",
-              story: Skipped,
-              meta: meta,
-              skipTags: ["skip-me"],
-              storyId: "automatic-calculated-title--skipped"
-            }));
+            _test("Skipped", _testStory({ exportName: "Skipped", story: Skipped, meta: meta, skipTags: ["skip-me"], storyId: "automatic-calculated-title--skipped" }));
           }
         `);
       });
@@ -1262,40 +1026,17 @@ describe('transformer', () => {
           import { test as _test, expect as _expect, describe as _describe } from "vitest";
           import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
           import { config } from '#.storybook/preview';
-          const meta = config.meta({
-            title: "automatic/calculated/title"
-          });
-          export const Primary = meta.story({});
-          Primary.test("runs", () => {});
-          Primary.test("skipped", {
-            tags: ['skip-me']
-          }, () => {});
+                    const meta = config.meta({ title: "automatic/calculated/title" });
+                    export const Primary = meta.story({});
+                    Primary.test("runs", () => {});
+                    Primary.test("skipped", { tags: ['skip-me'] }, () => {});
+                  
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
             _describe("Primary  ", () => {
-              _test("base story", _testStory({
-                exportName: "Primary",
-                story: Primary,
-                meta: meta,
-                skipTags: ["skip-me"],
-                storyId: "automatic-calculated-title--primary"
-              }));
-              _test("runs", _testStory({
-                exportName: "Primary",
-                story: Primary,
-                meta: meta,
-                skipTags: ["skip-me"],
-                storyId: "automatic-calculated-title--primary:runs",
-                testName: "runs"
-              }));
-              _test("skipped", _testStory({
-                exportName: "Primary",
-                story: Primary,
-                meta: meta,
-                skipTags: ["skip-me"],
-                storyId: "automatic-calculated-title--primary:skipped",
-                testName: "skipped"
-              }));
+              _test("base story", _testStory({ exportName: "Primary", story: Primary, meta: meta, skipTags: ["skip-me"], storyId: "automatic-calculated-title--primary" }));
+              _test("runs", _testStory({ exportName: "Primary", story: Primary, meta: meta, skipTags: ["skip-me"], storyId: "automatic-calculated-title--primary:runs", testName: "runs" }));
+              _test("skipped", _testStory({ exportName: "Primary", story: Primary, meta: meta, skipTags: ["skip-me"], storyId: "automatic-calculated-title--primary:skipped", testName: "skipped" }));
             });
           }
         `);
@@ -1319,29 +1060,15 @@ describe('transformer', () => {
           import { test as _test, expect as _expect, describe as _describe } from "vitest";
           import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
           import { config } from '#.storybook/preview';
-          const meta = config.meta({
-            title: "automatic/calculated/title"
-          });
-          export const Primary = meta.story({});
-          Primary.test("foo", () => {});
+                  const meta = config.meta({ title: "automatic/calculated/title" });
+                  export const Primary = meta.story({});
+                  Primary.test("foo", () => {});
+                
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
             _describe("Primary  ", () => {
-              _test("base story", _testStory({
-                exportName: "Primary",
-                story: Primary,
-                meta: meta,
-                skipTags: [],
-                storyId: "automatic-calculated-title--primary"
-              }));
-              _test("foo", _testStory({
-                exportName: "Primary",
-                story: Primary,
-                meta: meta,
-                skipTags: [],
-                storyId: "automatic-calculated-title--primary:foo",
-                testName: "foo"
-              }));
+              _test("base story", _testStory({ exportName: "Primary", story: Primary, meta: meta, skipTags: [], storyId: "automatic-calculated-title--primary" }));
+              _test("foo", _testStory({ exportName: "Primary", story: Primary, meta: meta, skipTags: [], storyId: "automatic-calculated-title--primary:foo", testName: "foo" }));
             });
           }
         `);
diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.ts b/code/core/src/csf-tools/vitest-plugin/transformer.ts
index 2c21516cbc69..8b6879131872 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.ts
@@ -1,13 +1,16 @@
 /* eslint-disable local-rules/no-uncategorized-errors */
-import { types as t } from 'storybook/internal/babel';
 import { getStoryTitle } from 'storybook/internal/common';
 import { combineTags } from 'storybook/internal/csf/csf-utils';
 import { logger } from 'storybook/internal/node-logger';
 import type { StoriesEntry, Tag } from 'storybook/internal/types';
 
+import { decode, encode } from '@jridgewell/sourcemap-codec';
 import { dedent } from 'ts-dedent';
 
-import { type StoryTest, formatCsf, loadCsf } from '../CsfFile.ts';
+import { type CsfSourceMap, type StoryTest, loadCsf } from '../CsfFile.ts';
+import { type Node, identifierKey, locationOf } from '../estree/ast.ts';
+import { type SourceEditor, appendMembers, prependStatement } from '../estree/editor.ts';
+import { generateUid } from '../estree/scope.ts';
 
 type TagsFilter = {
   include: string[];
@@ -25,11 +28,6 @@ const isValidTest = (storyTags: string[], tagsFilter: TagsFilter) => {
   // Skipped tests are intentionally included here
   return true;
 };
-/**
- * TODO: the functionality in this file can be moved back to the vitest plugin itself It can use
- * `storybook/internal/babel` for all it's babel needs, without duplicating babel embedding in our
- * bundles.
- */
 
 /**
  * We add double space characters so that it's possible to do a regex for all test run use cases.
@@ -40,8 +38,8 @@ const isValidTest = (storyTags: string[], tagsFilter: TagsFilter) => {
  * circumvent the issue.
  */
 const DOUBLE_SPACES = '  ';
-const getLiteralWithZeroWidthSpace = (testTitle: string) =>
-  t.stringLiteral(`${testTitle}${DOUBLE_SPACES}`);
+
+const q = (value: string) => JSON.stringify(value);
 
 /**
  * In Storybook users might be importing stories from other story files. As a side effect, tests can
@@ -52,58 +50,52 @@ const getLiteralWithZeroWidthSpace = (testTitle: string) =>
  * globalThis.**vitest_worker**.filepath) if(isRunningFromThisFile) { ... }
  */
 export function createTestGuardDeclaration(
-  scope: { generateUidIdentifier: (name: string) => t.Identifier },
-  expectId: t.Identifier,
-  convertToFilePathId: t.Identifier
-): { declaration: t.VariableDeclaration; identifier: t.Identifier } {
-  const isRunningFromThisFileId = scope.generateUidIdentifier('isRunningFromThisFile');
-
-  // expect.getState().testPath
-  const testPathProperty = t.memberExpression(
-    t.callExpression(t.memberExpression(expectId, t.identifier('getState')), []),
-    t.identifier('testPath')
-  );
-
+  identifier: string,
+  expectId: string,
+  convertToFilePathId: string
+): string {
   // There is a bug in Vitest where expect.getState().testPath is undefined when called outside of a test function so we add this fallback in the meantime
   // https://github.com/vitest-dev/vitest/issues/6367
-  // globalThis.__vitest_worker__.filepath
-  const filePathProperty = t.memberExpression(
-    t.memberExpression(t.identifier('globalThis'), t.identifier('__vitest_worker__')),
-    t.identifier('filepath')
-  );
-
-  // Combine testPath and filepath using the ?? operator
-  const nullishCoalescingExpression = t.logicalExpression(
-    '??',
-    // TODO: switch order of testPathProperty and filePathProperty when the bug is fixed
-    // https://github.com/vitest-dev/vitest/issues/6367 (or probably just use testPathProperty)
-    filePathProperty,
-    testPathProperty
-  );
+  // TODO: switch order of testPath and filepath when the bug is fixed (or probably just use testPath)
+  return `const ${identifier} = ${convertToFilePathId}(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? ${expectId}.getState().testPath);`;
+}
 
-  // Create the final expression: import.meta.url.includes(...)
-  const includesCall = t.callExpression(
-    t.memberExpression(
-      t.callExpression(convertToFilePathId, [
-        t.memberExpression(
-          t.memberExpression(t.identifier('import'), t.identifier('meta')),
-          t.identifier('url')
-        ),
-      ]),
-      t.identifier('includes')
-    ),
-    [nullishCoalescingExpression]
-  );
+// Generated source with lines whose source map should point at a given source node.
+export class GeneratedTail {
+  lines: { text: string; target?: Node }[] = [];
 
-  const isRunningFromThisFileDeclaration = t.variableDeclaration('const', [
-    t.variableDeclarator(isRunningFromThisFileId, includesCall),
-  ]);
+  push(text: string, target?: Node) {
+    this.lines.push({ text, target });
+  }
+}
 
+// Generated lines map to their target node, so Vitest reports each test at its story.
+export const printWithTail = (editor: SourceEditor, tail: GeneratedTail, fileName: string) => {
+  const head = editor.toString();
+  const map = editor.edits.generateMap({ hires: true, source: fileName, includeContent: true });
+  const decoded = decode(map.mappings);
+  const firstLine = head.split('\n').length;
+  const separator = head.endsWith('\n') ? '' : '\n';
+  tail.lines.forEach(({ text, target }, index) => {
+    const line = firstLine - (separator ? 0 : 1) + index;
+    while (decoded.length <= line) {
+      decoded.push([]);
+    }
+    if (target) {
+      const { start } = locationOf(
+        editor.code,
+        (target as { start: number }).start,
+        (target as { start: number }).start
+      );
+      decoded[line] = [[/^\s*/.exec(text)![0].length, 0, start.line - 1, start.column]];
+    }
+  });
+  map.mappings = encode(decoded);
   return {
-    declaration: isRunningFromThisFileDeclaration,
-    identifier: isRunningFromThisFileId,
+    code: `${head}${separator}${tail.lines.map(({ text }) => text).join('\n')}\n`,
+    map: map as CsfSourceMap,
   };
-}
+};
 
 export async function vitestTransform({
   code,
@@ -119,7 +111,7 @@ export async function vitestTransform({
   tagsFilter: TagsFilter;
   stories: StoriesEntry[];
   previewLevelTags: Tag[];
-}): Promise<ReturnType<typeof formatCsf>> {
+}): Promise<ReturnType<typeof printWithTail>> {
   const parsed = loadCsf(code, {
     fileName,
     transformInlineMeta: true,
@@ -144,11 +136,9 @@ export async function vitestTransform({
     },
   }).parse();
 
-  const ast = parsed._ast;
-
+  const editor = parsed._editor;
   const metaExportName = parsed._metaVariableName!;
-
-  const metaNode = parsed._metaNode as t.ObjectExpression;
+  const metaNode = parsed._metaNode;
 
   if (!metaNode || parsed._metaNodeIsSynthetic || !parsed._meta) {
     throw new Error(
@@ -157,15 +147,19 @@ export async function vitestTransform({
   }
 
   const metaTitleProperty = metaNode.properties.find(
-    (prop) => t.isObjectProperty(prop) && t.isIdentifier(prop.key) && prop.key.name === 'title'
+    (prop) => prop.type === 'Property' && identifierKey(prop) === 'title'
   );
 
-  const metaTitle = t.stringLiteral(parsed._meta?.title || 'unknown');
+  const metaTitle = q(parsed._meta?.title || 'unknown');
   if (!metaTitleProperty) {
-    metaNode.properties.push(t.objectProperty(t.identifier('title'), metaTitle));
-  } else if (t.isObjectProperty(metaTitleProperty)) {
+    appendMembers(editor, metaNode, [`title: ${metaTitle}`]);
+  } else if (metaTitleProperty.type === 'Property' && !metaTitleProperty.method) {
     // If the title is present in meta, overwrite it because autotitle can still affect existing titles
-    metaTitleProperty.value = metaTitle;
+    if (metaTitleProperty.shorthand) {
+      editor.edits.overwrite(metaTitleProperty.start, metaTitleProperty.end, `title: ${metaTitle}`);
+    } else {
+      editor.edits.overwrite(metaTitleProperty.value.start, metaTitleProperty.value.end, metaTitle);
+    }
   }
 
   // Filter out stories based on the passed tags filter
@@ -184,236 +178,103 @@ export async function vitestTransform({
     }
   });
 
-  const vitestTestId = parsed._file.path.scope.generateUidIdentifier('test');
-  const vitestDescribeId = parsed._file.path.scope.generateUidIdentifier('describe');
+  const scopes = editor.scopes;
+  const vitestTestId = generateUid(scopes, 'test');
+  const vitestDescribeId = generateUid(scopes, 'describe');
+  const tail = new GeneratedTail();
 
   // if no valid stories are found, we just add describe.skip() to the file to avoid empty test files
   if (Object.keys(validStories).length === 0) {
-    const describeSkipBlock = t.expressionStatement(
-      t.callExpression(t.memberExpression(vitestDescribeId, t.identifier('skip')), [
-        t.stringLiteral('No valid tests found'),
-      ])
+    tail.push(`${vitestDescribeId}.skip(${q('No valid tests found')});`);
+    prependStatement(
+      editor,
+      `import { test as ${vitestTestId}, describe as ${vitestDescribeId} } from "vitest";`
     );
-
-    ast.program.body.push(describeSkipBlock);
-    const imports = [
-      t.importDeclaration(
-        [
-          t.importSpecifier(vitestTestId, t.identifier('test')),
-          t.importSpecifier(vitestDescribeId, t.identifier('describe')),
-        ],
-        t.stringLiteral('vitest')
-      ),
-    ];
-
-    ast.program.body.unshift(...imports);
-
-    return formatCsf(parsed, { sourceMaps: true, sourceFileName: fileName }, code);
+    return printWithTail(editor, tail, fileName);
   }
 
-  const vitestExpectId = parsed._file.path.scope.generateUidIdentifier('expect');
-  const testStoryId = parsed._file.path.scope.generateUidIdentifier('testStory');
-  const skipTagsId = t.identifier(JSON.stringify(tagsFilter.skip));
-  const componentPathLiteral = parsed._rawComponentPath
-    ? t.stringLiteral(parsed._rawComponentPath)
-    : null;
-
-  let componentNameLiteral = null;
-  if (
-    parsed._componentImportSpecifier &&
-    (t.isImportSpecifier(parsed._componentImportSpecifier) ||
-      t.isImportDefaultSpecifier(parsed._componentImportSpecifier))
-  ) {
-    componentNameLiteral = t.stringLiteral(parsed._componentImportSpecifier.local.name);
-  }
+  const vitestExpectId = generateUid(scopes, 'expect');
+  const testStoryId = generateUid(scopes, 'testStory');
+  const isRunningFromThisFileId = generateUid(scopes, 'isRunningFromThisFile');
+  const skipTags = JSON.stringify(tagsFilter.skip);
+  const componentPath = parsed._rawComponentPath;
+  const componentName = parsed._componentImportSpecifier?.local.name;
 
-  const { declaration: isRunningFromThisFileDeclaration, identifier: isRunningFromThisFileId } =
-    createTestGuardDeclaration(
-      parsed._file.path.scope,
-      vitestExpectId,
-      t.identifier('convertToFilePath')
-    );
-
-  ast.program.body.push(isRunningFromThisFileDeclaration);
+  tail.push(
+    createTestGuardDeclaration(isRunningFromThisFileId, vitestExpectId, 'convertToFilePath')
+  );
 
-  const getTestStatementForStory = ({
-    localName,
-    exportName,
-    testTitle,
-    node,
-    overrideSourcemap = true,
-    storyId,
-  }: {
-    localName: string;
-    exportName: string;
-    testTitle: string;
-    node: t.Node;
-    overrideSourcemap?: boolean;
-    storyId: string;
-  }): t.ExpressionStatement => {
-    const objectProperties: t.ObjectProperty[] = [
-      t.objectProperty(t.identifier('exportName'), t.stringLiteral(exportName)),
-      t.objectProperty(t.identifier('story'), t.identifier(localName)),
-      t.objectProperty(t.identifier('meta'), t.identifier(metaExportName)),
-      t.objectProperty(t.identifier('skipTags'), skipTagsId),
-      t.objectProperty(t.identifier('storyId'), t.stringLiteral(storyId)),
+  const testStoryCall = (
+    localName: string,
+    exportName: string,
+    storyId: string,
+    testName?: string
+  ) => {
+    const properties = [
+      `exportName: ${q(exportName)}`,
+      `story: ${localName}`,
+      `meta: ${metaExportName}`,
+      `skipTags: ${skipTags}`,
+      `storyId: ${q(storyId)}`,
+      ...(componentPath ? [`componentPath: ${q(componentPath)}`] : []),
+      ...(componentName ? [`componentName: ${q(componentName)}`] : []),
+      ...(testName ? [`testName: ${q(testName)}`] : []),
     ];
-
-    if (componentPathLiteral) {
-      objectProperties.push(t.objectProperty(t.identifier('componentPath'), componentPathLiteral));
-    }
-
-    if (componentNameLiteral) {
-      objectProperties.push(t.objectProperty(t.identifier('componentName'), componentNameLiteral));
-    }
-
-    // Create the _test expression directly using the exportName identifier
-    const testStoryCall = t.expressionStatement(
-      t.callExpression(vitestTestId, [
-        t.stringLiteral(testTitle),
-        t.callExpression(testStoryId, [t.objectExpression(objectProperties)]),
-      ])
-    );
-
-    if (overrideSourcemap) {
-      // Preserve sourcemaps location
-      testStoryCall.loc = node.loc;
-    }
-
-    // Return just the testStoryCall as composeStoryCall is not needed
-    return testStoryCall;
+    return `${testStoryId}({ ${properties.join(', ')} })`;
   };
 
-  const getDescribeStatementForStory = (options: {
-    localName: string;
-    describeTitle: string;
-    exportName: string;
-    tests: StoryTest[];
-    node: t.Node;
-    parentStoryId: string;
-  }): t.ExpressionStatement => {
-    const { localName, describeTitle, exportName, tests, node, parentStoryId } = options;
-    const describeBlock = t.callExpression(vitestDescribeId, [
-      getLiteralWithZeroWidthSpace(describeTitle),
-      t.arrowFunctionExpression(
-        [],
-        t.blockStatement([
-          getTestStatementForStory({
-            ...options,
-            testTitle: 'base story',
-            overrideSourcemap: false,
-            storyId: parentStoryId,
-          }),
-          ...tests.map(({ name: testName, node: testNode, id: storyId }) => {
-            const objectProperties: t.ObjectProperty[] = [
-              t.objectProperty(t.identifier('exportName'), t.stringLiteral(exportName)),
-              t.objectProperty(t.identifier('story'), t.identifier(localName)),
-              t.objectProperty(t.identifier('meta'), t.identifier(metaExportName)),
-              t.objectProperty(t.identifier('skipTags'), skipTagsId),
-              t.objectProperty(t.identifier('storyId'), t.stringLiteral(storyId)),
-            ];
-
-            if (componentPathLiteral) {
-              objectProperties.push(
-                t.objectProperty(t.identifier('componentPath'), componentPathLiteral)
-              );
-            }
-
-            if (componentNameLiteral) {
-              objectProperties.push(
-                t.objectProperty(t.identifier('componentName'), componentNameLiteral)
-              );
-            }
-
-            if (testName) {
-              objectProperties.push(
-                t.objectProperty(t.identifier('testName'), t.stringLiteral(testName))
-              );
-            }
-
-            const testStatement = t.expressionStatement(
-              t.callExpression(vitestTestId, [
-                t.stringLiteral(testName),
-                t.callExpression(testStoryId, [t.objectExpression(objectProperties)]),
-              ])
-            );
-            testStatement.loc = testNode.loc;
-            return testStatement;
-          }),
-        ])
-      ),
-    ]);
-
-    describeBlock.loc = node.loc;
-    return t.expressionStatement(describeBlock);
-  };
+  tail.push(`if (${isRunningFromThisFileId}) {`);
+  for (const [exportName, node] of Object.entries(validStories)) {
+    if (node === null || node === undefined) {
+      logger.warn(
+        dedent`
+          [Storybook]: Could not transform "${exportName}" story into test at "${fileName}".
+          Please make sure to define stories in the same file and not re-export stories coming from other files".
+        `
+      );
+      continue;
+    }
 
-  const storyTestStatements = Object.entries(validStories)
-    .map(([exportName, node]) => {
-      if (node === null) {
-        logger.warn(
-          dedent`
-            [Storybook]: Could not transform "${exportName}" story into test at "${fileName}".
-            Please make sure to define stories in the same file and not re-export stories coming from other files".
-          `
+    const localName = parsed._stories[exportName].localName ?? exportName;
+    // use the story's name as the test title for vitest, and fallback to exportName
+    const testTitle = parsed._stories[exportName].name ?? exportName;
+    const storyId = parsed._stories[exportName].id;
+    const tests: StoryTest[] = parsed.getStoryTests(exportName);
+
+    if (tests?.length > 0) {
+      tail.push(`  ${vitestDescribeId}(${q(`${testTitle}${DOUBLE_SPACES}`)}, () => {`, node);
+      tail.push(
+        `    ${vitestTestId}("base story", ${testStoryCall(localName, exportName, storyId)});`,
+        node
+      );
+      for (const { name: testName, node: testNode, id: testId } of tests) {
+        tail.push(
+          `    ${vitestTestId}(${q(testName)}, ${testStoryCall(localName, exportName, testId, testName)});`,
+          testNode
         );
-        return;
-      }
-
-      const localName = parsed._stories[exportName].localName ?? exportName;
-      // use the story's name as the test title for vitest, and fallback to exportName
-      const testTitle = parsed._stories[exportName].name ?? exportName;
-      const storyId = parsed._stories[exportName].id;
-      const tests = parsed.getStoryTests(exportName);
-
-      if (tests?.length > 0) {
-        return getDescribeStatementForStory({
-          localName,
-          describeTitle: testTitle,
-          exportName,
-          tests,
-          node,
-          parentStoryId: storyId,
-        });
       }
+      tail.push('  });');
+      continue;
+    }
 
-      return getTestStatementForStory({
-        testTitle,
-        localName,
-        exportName,
-        node,
-        storyId,
-      });
-    })
-    .filter((st) => !!st) as t.ExpressionStatement[];
-
-  const testBlock = t.ifStatement(isRunningFromThisFileId, t.blockStatement(storyTestStatements));
-
-  ast.program.body.push(testBlock);
+    tail.push(
+      `  ${vitestTestId}(${q(testTitle)}, ${testStoryCall(localName, exportName, storyId)});`,
+      node
+    );
+  }
+  tail.push('}');
 
   const hasTests = Object.keys(validStories).some(
     (exportName) => parsed.getStoryTests(exportName).length > 0
   );
 
-  const imports = [
-    t.importDeclaration(
-      [
-        t.importSpecifier(vitestTestId, t.identifier('test')),
-        t.importSpecifier(vitestExpectId, t.identifier('expect')),
-        ...(hasTests ? [t.importSpecifier(vitestDescribeId, t.identifier('describe'))] : []),
-      ],
-      t.stringLiteral('vitest')
-    ),
-    t.importDeclaration(
-      [
-        t.importSpecifier(testStoryId, t.identifier('testStory')),
-        t.importSpecifier(t.identifier('convertToFilePath'), t.identifier('convertToFilePath')),
-      ],
-      t.stringLiteral('@storybook/addon-vitest/internal/test-utils')
-    ),
-  ];
-
-  ast.program.body.unshift(...imports);
+  prependStatement(
+    editor,
+    [
+      `import { test as ${vitestTestId}, expect as ${vitestExpectId}${hasTests ? `, describe as ${vitestDescribeId}` : ''} } from "vitest";`,
+      `import { testStory as ${testStoryId}, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";`,
+    ].join('\n')
+  );
 
-  return formatCsf(parsed, { sourceMaps: true, sourceFileName: fileName }, code);
+  return printWithTail(editor, tail, fileName);
 }
diff --git a/code/e2e-sandbox/addon-docs.spec.ts b/code/e2e-sandbox/addon-docs.spec.ts
index 4c651337a355..864142761546 100644
--- a/code/e2e-sandbox/addon-docs.spec.ts
+++ b/code/e2e-sandbox/addon-docs.spec.ts
@@ -55,19 +55,17 @@ test.describe('addon-docs', () => {
     await showCodeButton.click();
     const sourceCode = root.locator('pre.prismjs');
     const expectedSource = dedent`{
-      args: {
-        label: 'Another'
-      },
+      args: { label: 'Another' },
       parameters: {
         docs: {
           source: {
-            type: 'code'
-          }
-        }
+            type: 'code',
+          },
+        },
       },
       play: async () => {
-        await new Promise(resolve => resolve('Play function'));
-      }
+        await new Promise((resolve) => resolve('Play function'));
+      },
     }`;
     await expect(sourceCode).toHaveText(expectedSource);
   });

From 38b259f9c9665652a2b428006473975806353eed Mon Sep 17 00:00:00 2001
From: Easton <easton.shin@marqvision.com>
Date: Tue, 13 Oct 2026 11:52:16 +0900
Subject: [PATCH 045/326] refactor(csf-tools): port story-shape to ESTree nodes
 and SourceEditor

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../story-shape/authored-source.test.ts       |   4 +-
 .../csf-tools/story-shape/authored-source.ts  |  39 +-
 .../story-shape/import-statements.test.ts     |   2 +-
 .../story-shape/import-statements.ts          |  92 +++--
 .../src/csf-tools/story-shape/imports.test.ts |  13 +-
 .../core/src/csf-tools/story-shape/imports.ts |  35 +-
 code/core/src/csf-tools/story-shape/index.ts  |  16 +-
 .../src/csf-tools/story-shape/jsdoc.test.ts   |  15 +-
 code/core/src/csf-tools/story-shape/jsdoc.ts  |  22 +-
 .../story-shape/normalize-story.test.ts       |  14 +-
 .../csf-tools/story-shape/normalize-story.ts  | 167 ++++-----
 .../story-shape/reference-context.ts          |  13 +-
 .../src/csf-tools/story-shape/render.test.ts  |  25 +-
 code/core/src/csf-tools/story-shape/render.ts | 195 ++++------
 .../story-shape/resolve-arg-value.test.ts     |  10 +-
 .../story-shape/resolve-arg-value.ts          | 241 +++++++-----
 .../story-shape/resolve-members.test.ts       |  18 +-
 .../csf-tools/story-shape/resolve-members.ts  | 242 ++++++------
 .../story-shape/resolve-story-args.ts         |  28 +-
 .../src/csf-tools/story-shape/utils.test.ts   | 352 ++++--------------
 code/core/src/csf-tools/story-shape/utils.ts  | 241 ++++--------
 21 files changed, 798 insertions(+), 986 deletions(-)

diff --git a/code/core/src/csf-tools/story-shape/authored-source.test.ts b/code/core/src/csf-tools/story-shape/authored-source.test.ts
index f18ab7338dcc..91253f97f157 100644
--- a/code/core/src/csf-tools/story-shape/authored-source.test.ts
+++ b/code/core/src/csf-tools/story-shape/authored-source.test.ts
@@ -1,10 +1,10 @@
-import { createStoryArgsResolver, loadCsf } from 'storybook/internal/csf-tools';
-
 import { describe, expect, it } from 'vitest';
 
 import { dedent } from 'ts-dedent';
 
+import { loadCsf } from '../CsfFile.ts';
 import { authoredSource } from './authored-source.ts';
+import { createStoryArgsResolver } from './resolve-story-args.ts';
 
 const authoredSourceOf = (source: string, exportName = 'Default') => {
   const csf = loadCsf(source, { makeTitle: () => 'Example/Button' }).parse();
diff --git a/code/core/src/csf-tools/story-shape/authored-source.ts b/code/core/src/csf-tools/story-shape/authored-source.ts
index acb984f04018..28504d963862 100644
--- a/code/core/src/csf-tools/story-shape/authored-source.ts
+++ b/code/core/src/csf-tools/story-shape/authored-source.ts
@@ -1,5 +1,4 @@
-import { types as t } from 'storybook/internal/babel';
-
+import { type Node, isStringLiteral } from '../estree/ast.ts';
 import type { ReferenceContext, ResolvedMembers } from './resolve-members.ts';
 import { resolveObjectMembers, sourceOf } from './resolve-members.ts';
 import { resolveArgValue } from './resolve-arg-value.ts';
@@ -15,7 +14,7 @@ export type AuthoredSource =
 type AuthoredSourceShape = Pick<ResolvedStoryArgs, 'storyMembers' | 'metaMembers'>;
 
 type MemberPathResolution =
-  | { kind: 'value'; node: t.Node }
+  | { kind: 'value'; node: Node }
   | { kind: 'missing' }
   | { kind: 'masked' }
   | { kind: 'unresolvable'; source: string };
@@ -38,16 +37,17 @@ export const authoredSource = (
 
     const resolved = resolveArgValue(code.node, ctx);
     const value = unwrapExpression(resolved.node);
-    if (t.isIdentifier(value, { name: 'undefined' })) {
-      continue;
-    }
-    if (t.isUnaryExpression(value, { operator: 'void' })) {
+    if (isUndefined(value)) {
       continue;
     }
-    if (t.isNullLiteral(value)) {
+    if (
+      value.type === 'Literal' &&
+      value.value === null &&
+      !('regex' in value || 'bigint' in value)
+    ) {
       return { kind: 'disabled' };
     }
-    if (t.isStringLiteral(value)) {
+    if (isStringLiteral(value)) {
       return { kind: 'code', code: value.value };
     }
     const parts = templateParts(value);
@@ -72,11 +72,8 @@ const memberAt = (
     }
     const original = result.node;
     const object = unwrapExpression(resolveArgValue(original, ctx).node);
-    if (!t.isObjectExpression(object)) {
-      if (
-        t.isIdentifier(object, { name: 'undefined' }) ||
-        t.isUnaryExpression(object, { operator: 'void' })
-      ) {
+    if (object.type !== 'ObjectExpression') {
+      if (isUndefined(object)) {
         return { kind: 'missing' };
       }
       if (isOpaqueValue(object)) {
@@ -101,5 +98,15 @@ const memberOf = (members: ResolvedMembers, key: string): MemberPathResolution =
   return { kind: 'missing' };
 };
 
-const isOpaqueValue = (node: t.Node): boolean =>
-  !t.isLiteral(node) && !t.isArrayExpression(node) && !t.isFunction(node);
+const isUndefined = (node: Node): boolean =>
+  (node.type === 'Identifier' && node.name === 'undefined') ||
+  (node.type === 'UnaryExpression' && node.operator === 'void');
+
+const isOpaqueValue = (node: Node): boolean =>
+  node.type !== 'Literal' &&
+  node.type !== 'TemplateLiteral' &&
+  node.type !== 'ArrayExpression' &&
+  node.type !== 'ArrowFunctionExpression' &&
+  node.type !== 'FunctionExpression' &&
+  node.type !== 'FunctionDeclaration' &&
+  !(node.type === 'Property' && node.method);
diff --git a/code/core/src/csf-tools/story-shape/import-statements.test.ts b/code/core/src/csf-tools/story-shape/import-statements.test.ts
index 45d02605d8ca..19a2bb8d4254 100644
--- a/code/core/src/csf-tools/story-shape/import-statements.test.ts
+++ b/code/core/src/csf-tools/story-shape/import-statements.test.ts
@@ -11,7 +11,7 @@ import {
 import { collectImportBindings } from './imports.ts';
 
 const bindingsOf = (code: string) =>
-  collectImportBindings(loadCsf(code, { makeTitle: (title) => title ?? 'title' })._file.path);
+  collectImportBindings(loadCsf(code, { makeTitle: (title) => title ?? 'title' })._program);
 
 const resolve = (code: string, componentName: string) =>
   resolveComponentImport(componentName, bindingsOf(code));
diff --git a/code/core/src/csf-tools/story-shape/import-statements.ts b/code/core/src/csf-tools/story-shape/import-statements.ts
index 38062bbc5a6f..075cbaefb70b 100644
--- a/code/core/src/csf-tools/story-shape/import-statements.ts
+++ b/code/core/src/csf-tools/story-shape/import-statements.ts
@@ -1,5 +1,4 @@
-import { babelParse, babelPrint, types as t } from 'storybook/internal/babel';
-
+import { type E, parseModule } from '../estree/ast.ts';
 import { type ImportBinding, importedName, isTypeSpecifier } from './imports.ts';
 
 /** A component reference resolved to the module binding it comes from. */
@@ -68,10 +67,10 @@ interface ParsedOverride {
 }
 
 function parseImportOverride(code: string): ParsedOverride | undefined {
-  let declaration: t.ImportDeclaration | undefined;
+  let declaration: E.ImportDeclaration | undefined;
   try {
-    declaration = babelParse(code).program.body.find((node): node is t.ImportDeclaration =>
-      t.isImportDeclaration(node)
+    declaration = parseModule(code).program.body.find(
+      (node): node is E.ImportDeclaration => node.type === 'ImportDeclaration'
     );
   } catch {
     return undefined;
@@ -82,25 +81,30 @@ function parseImportOverride(code: string): ParsedOverride | undefined {
   }
 
   const source = declaration.source.value;
-  const specifier = (declaration.specifiers ?? []).find((s) => !isTypeSpecifier(s));
+  const specifier = declaration.specifiers.find((s) => !isTypeSpecifier(s));
 
-  if (t.isImportNamespaceSpecifier(specifier)) {
+  if (specifier?.type === 'ImportNamespaceSpecifier') {
     return { source, specifier: { kind: 'namespace', local: specifier.local.name } };
   }
-  if (t.isImportDefaultSpecifier(specifier)) {
+  if (specifier?.type === 'ImportDefaultSpecifier') {
     return { source, specifier: { kind: 'default' } };
   }
-  if (t.isImportSpecifier(specifier)) {
+  if (specifier?.type === 'ImportSpecifier') {
     return { source, specifier: { kind: 'named', imported: importedName(specifier.imported) } };
   }
   return { source };
 }
 
+interface NamedSpecifier {
+  local: string;
+  imported: string;
+}
+
 interface Bucket {
-  source: t.StringLiteral;
-  defaults: t.Identifier[];
-  namespaces: t.Identifier[];
-  named: t.ImportSpecifier[];
+  source: string;
+  defaults: string[];
+  namespaces: string[];
+  named: NamedSpecifier[];
 }
 
 function addUniqueBy<T>(list: T[], item: T, eq: (candidate: T) => boolean) {
@@ -112,13 +116,13 @@ function addUniqueBy<T>(list: T[], item: T, eq: (candidate: T) => boolean) {
 function addNamed(bucket: Bucket, local: string, imported: string) {
   addUniqueBy(
     bucket.named,
-    t.importSpecifier(t.identifier(local), t.identifier(imported)),
-    (n) => n.local.name === local && importedName(n.imported) === imported
+    { local, imported },
+    (n) => n.local === local && n.imported === imported
   );
 }
 
-function addSingle(list: t.Identifier[], name: string) {
-  addUniqueBy(list, t.identifier(name), (n) => n.name === name);
+function addSingle(list: string[], name: string) {
+  addUniqueBy(list, name, (n) => n === name);
 }
 
 function collectSpecifier(
@@ -176,25 +180,41 @@ function collectSpecifier(
   }
 }
 
-function printBucket({ source, defaults, namespaces, named }: Bucket): string[] {
-  const print = (
-    specifiers: (t.ImportDefaultSpecifier | t.ImportNamespaceSpecifier | t.ImportSpecifier)[]
-  ) => babelPrint(t.importDeclaration(specifiers, source));
+const WRAP_COLUMN = 80;
 
-  const extraDefaults = defaults.slice(1).map((d) => print([t.importDefaultSpecifier(d)]));
+function printImport(
+  source: string,
+  {
+    defaultName,
+    namespace,
+    named,
+  }: { defaultName?: string; namespace?: string; named?: NamedSpecifier[] }
+): string {
+  const from = `from '${source.replaceAll('\\', '\\\\').replaceAll("'", "\\'")}';`;
+  const leading = [defaultName, namespace && `* as ${namespace}`].filter(Boolean);
+  const names = (named ?? []).map(({ local, imported }) =>
+    local === imported ? local : `${imported} as ${local}`
+  );
+  if (names.length === 0) {
+    return `import ${leading.join(', ')} ${from}`;
+  }
+  const head = leading.length > 0 ? `${leading.join(', ')}, ` : '';
+  const braced = `{ ${names.join(', ')} }`;
+  // Only the specifier list wraps, so a long path alone keeps the import on one line.
+  return braced.length <= WRAP_COLUMN
+    ? `import ${head}${braced} ${from}`
+    : `import ${head}{\n${names.map((name) => `  ${name},`).join('\n')}\n} ${from}`;
+}
 
-  if (namespaces.length > 0) {
-    const first: (t.ImportDefaultSpecifier | t.ImportNamespaceSpecifier)[] = [];
-    if (defaults[0]) {
-      first.push(t.importDefaultSpecifier(defaults[0]));
-    }
-    first.push(t.importNamespaceSpecifier(namespaces[0]));
+function printBucket({ source, defaults, namespaces, named }: Bucket): string[] {
+  const extraDefaults = defaults.slice(1).map((d) => printImport(source, { defaultName: d }));
 
+  if (namespaces.length > 0) {
     return [
-      print(first),
-      ...(named.length > 0 ? [print(named)] : []),
+      printImport(source, { defaultName: defaults[0], namespace: namespaces[0] }),
+      ...(named.length > 0 ? [printImport(source, { named })] : []),
       ...extraDefaults,
-      ...namespaces.slice(1).map((ns) => print([t.importNamespaceSpecifier(ns)])),
+      ...namespaces.slice(1).map((ns) => printImport(source, { namespace: ns })),
     ];
   }
 
@@ -202,13 +222,7 @@ function printBucket({ source, defaults, namespaces, named }: Bucket): string[]
     return [];
   }
 
-  const first: (t.ImportDefaultSpecifier | t.ImportSpecifier)[] = [];
-  if (defaults[0]) {
-    first.push(t.importDefaultSpecifier(defaults[0]));
-  }
-  first.push(...named);
-
-  return [print(first), ...extraDefaults];
+  return [printImport(source, { defaultName: defaults[0], named }), ...extraDefaults];
 }
 
 /**
@@ -238,7 +252,7 @@ export function buildImportStatements({
 
     let bucket = buckets.get(source);
     if (!bucket) {
-      bucket = { source: t.stringLiteral(source), defaults: [], namespaces: [], named: [] };
+      bucket = { source, defaults: [], namespaces: [], named: [] };
       buckets.set(source, bucket);
     }
 
diff --git a/code/core/src/csf-tools/story-shape/imports.test.ts b/code/core/src/csf-tools/story-shape/imports.test.ts
index 7940dd0cf5e7..c9fa086b93ef 100644
--- a/code/core/src/csf-tools/story-shape/imports.test.ts
+++ b/code/core/src/csf-tools/story-shape/imports.test.ts
@@ -1,20 +1,18 @@
 import { describe, expect, it } from 'vitest';
 
-import { types as t } from 'storybook/internal/babel';
-
 import { dedent } from 'ts-dedent';
 
 import { loadCsf } from '../CsfFile.ts';
 import { collectImportBindings, importedName, isTypeSpecifier } from './imports.ts';
 
 const programPath = (code: string) => {
-  return loadCsf(code, { makeTitle: (title) => title ?? 'title' })._file.path;
+  return loadCsf(code, { makeTitle: (title) => title ?? 'title' })._program;
 };
 
 const importSpecifiers = (code: string) => {
-  const declaration = programPath(code).node.body.find((node) => t.isImportDeclaration(node));
+  const declaration = programPath(code).body.find((node) => node.type === 'ImportDeclaration');
 
-  if (!t.isImportDeclaration(declaration)) {
+  if (declaration?.type !== 'ImportDeclaration') {
     throw new Error('Expected import declaration');
   }
 
@@ -85,7 +83,10 @@ describe('importedName', () => {
       import { Button, 'a-b' as ab } from './button';
     `);
 
-    if (!t.isImportSpecifier(identifierSpecifier) || !t.isImportSpecifier(stringSpecifier)) {
+    if (
+      identifierSpecifier.type !== 'ImportSpecifier' ||
+      stringSpecifier.type !== 'ImportSpecifier'
+    ) {
       throw new Error('Expected named import specifiers');
     }
 
diff --git a/code/core/src/csf-tools/story-shape/imports.ts b/code/core/src/csf-tools/story-shape/imports.ts
index 9ce29c2b8038..218c56a3127a 100644
--- a/code/core/src/csf-tools/story-shape/imports.ts
+++ b/code/core/src/csf-tools/story-shape/imports.ts
@@ -1,4 +1,4 @@
-import { type NodePath, types as t } from 'storybook/internal/babel';
+import type { E } from '../estree/ast.ts';
 
 export interface ImportBinding {
   /** Module specifier the local name is imported from. */
@@ -9,38 +9,31 @@ export interface ImportBinding {
 
 /** True for `import { type X }` specifiers, which carry no runtime binding. */
 export const isTypeSpecifier = (
-  s: t.ImportSpecifier | t.ImportDefaultSpecifier | t.ImportNamespaceSpecifier
-): boolean => t.isImportSpecifier(s) && s.importKind === 'type';
+  s: E.ImportSpecifier | E.ImportDefaultSpecifier | E.ImportNamespaceSpecifier
+): boolean => s.type === 'ImportSpecifier' && s.importKind === 'type';
 
 /** Exported name behind an import specifier, incl. string-named exports. */
-export const importedName = (im: t.Identifier | t.StringLiteral): string =>
-  t.isIdentifier(im) ? im.name : im.value;
+export const importedName = (im: E.ModuleExportName): string =>
+  im.type === 'Identifier' ? im.name : (im as E.StringLiteral).value;
 
 /** Map of local identifier → import binding for a file's value imports (type-only skipped). */
-export function collectImportBindings(program: NodePath<t.Program>): Map<string, ImportBinding> {
+export function collectImportBindings(program: E.Program): Map<string, ImportBinding> {
   const localToImport = new Map<string, ImportBinding>();
 
-  for (const stmt of program.get('body')) {
-    if (!stmt.isImportDeclaration()) {
+  for (const statement of program.body) {
+    if (statement.type !== 'ImportDeclaration' || statement.importKind === 'type') {
       continue;
     }
-    const decl = stmt.node;
-
-    if (decl.importKind === 'type') {
-      continue;
-    }
-
-    for (const s of decl.specifiers ?? []) {
-      if (!('local' in s) || !s.local || isTypeSpecifier(s)) {
+    const importId = statement.source.value;
+    for (const s of statement.specifiers) {
+      if (isTypeSpecifier(s)) {
         continue;
       }
-
-      const importId = decl.source.value;
-      if (t.isImportDefaultSpecifier(s)) {
+      if (s.type === 'ImportDefaultSpecifier') {
         localToImport.set(s.local.name, { importId, importName: 'default' });
-      } else if (t.isImportNamespaceSpecifier(s)) {
+      } else if (s.type === 'ImportNamespaceSpecifier') {
         localToImport.set(s.local.name, { importId, importName: '*' });
-      } else if (t.isImportSpecifier(s)) {
+      } else {
         localToImport.set(s.local.name, { importId, importName: importedName(s.imported) });
       }
     }
diff --git a/code/core/src/csf-tools/story-shape/index.ts b/code/core/src/csf-tools/story-shape/index.ts
index fff069b6b86b..918622025abd 100644
--- a/code/core/src/csf-tools/story-shape/index.ts
+++ b/code/core/src/csf-tools/story-shape/index.ts
@@ -11,8 +11,12 @@ export {
   isTypeSpecifier,
   type ImportBinding,
 } from './imports.ts';
-export { extractStoryJSDocInfo, jsDocTagsForPath } from './jsdoc.ts';
-export { normalizeStoryDeclaration, type NormalizedStoryDeclaration } from './normalize-story.ts';
+export { extractStoryJSDocInfo, jsDocTagsForNode } from './jsdoc.ts';
+export {
+  normalizeStoryDeclaration,
+  storyShapeError,
+  type NormalizedStoryDeclaration,
+} from './normalize-story.ts';
 export {
   createStoryReferenceResolver,
   parseReferenceModule,
@@ -20,6 +24,7 @@ export {
 } from './reference-context.ts';
 export { isSelfContained, resolveArgValue, type ResolvedArgValue } from './resolve-arg-value.ts';
 export {
+  codeOf,
   resolveArgsRecord,
   resolveBindingMembers,
   resolveObjectMembers,
@@ -41,7 +46,7 @@ export {
 export {
   resolveEffectiveRender,
   resolveRenderFunction,
-  type RenderFunctionPath,
+  type RenderFunction,
   type RenderResolution,
 } from './render.ts';
 export {
@@ -49,15 +54,14 @@ export {
   isCanonicalCsf2BindCall,
   isCsfFactoryCall,
   keyOf,
-  metaObjectPath,
-  pathForNode,
+  metaObject,
   propertyValue,
   resolveIdentifierInit,
   resolveReturnedObjectExpression,
   returnedExpression,
-  returnedExpressionPath,
   templateParts,
   unwrapExpression,
   withoutTypeCalls,
+  type FunctionNode,
   type TemplateParts,
 } from './utils.ts';
diff --git a/code/core/src/csf-tools/story-shape/jsdoc.test.ts b/code/core/src/csf-tools/story-shape/jsdoc.test.ts
index 0fbe43c049d3..c4a305ab37a0 100644
--- a/code/core/src/csf-tools/story-shape/jsdoc.test.ts
+++ b/code/core/src/csf-tools/story-shape/jsdoc.test.ts
@@ -6,14 +6,15 @@ import { loadCsf } from '../CsfFile.ts';
 import { extractStoryJSDocInfo } from './jsdoc.ts';
 
 const storyStatement = (code: string) => {
-  return loadCsf(code, { makeTitle: (title) => title ?? 'title' }).parse()._storyStatements['A'];
+  const csf = loadCsf(code, { makeTitle: (title) => title ?? 'title' }).parse();
+  return [csf._storyStatements['A'], csf._editor] as const;
 };
 
 describe('extractStoryJSDocInfo', () => {
   it('extracts a plain JSDoc description', () => {
     expect(
       extractStoryJSDocInfo(
-        storyStatement(dedent`
+        ...storyStatement(dedent`
           export default { title: 'Button' };
           /**
            * Primary button story.
@@ -30,7 +31,7 @@ describe('extractStoryJSDocInfo', () => {
   it('uses @describe over the JSDoc body', () => {
     expect(
       extractStoryJSDocInfo(
-        storyStatement(dedent`
+        ...storyStatement(dedent`
           export default { title: 'Button' };
           /**
            * Body description.
@@ -48,7 +49,7 @@ describe('extractStoryJSDocInfo', () => {
   it('uses @desc when @describe is absent', () => {
     expect(
       extractStoryJSDocInfo(
-        storyStatement(dedent`
+        ...storyStatement(dedent`
           export default { title: 'Button' };
           /**
            * Body description.
@@ -66,7 +67,7 @@ describe('extractStoryJSDocInfo', () => {
   it('extracts @summary', () => {
     expect(
       extractStoryJSDocInfo(
-        storyStatement(dedent`
+        ...storyStatement(dedent`
           export default { title: 'Button' };
           /**
            * Full story description.
@@ -84,7 +85,7 @@ describe('extractStoryJSDocInfo', () => {
   it('returns undefined fields when no JSDoc is present', () => {
     expect(
       extractStoryJSDocInfo(
-        storyStatement(dedent`
+        ...storyStatement(dedent`
           export default { title: 'Button' };
           export const A = {};
         `)
@@ -98,7 +99,7 @@ describe('extractStoryJSDocInfo', () => {
   it('trims surrounding whitespace from the final description', () => {
     expect(
       extractStoryJSDocInfo(
-        storyStatement(dedent`
+        ...storyStatement(dedent`
           export default { title: 'Button' };
           /**
            *
diff --git a/code/core/src/csf-tools/story-shape/jsdoc.ts b/code/core/src/csf-tools/story-shape/jsdoc.ts
index 1146b4b7cfca..8d4943f1cbb6 100644
--- a/code/core/src/csf-tools/story-shape/jsdoc.ts
+++ b/code/core/src/csf-tools/story-shape/jsdoc.ts
@@ -1,29 +1,35 @@
-import type { NodePath, types as t } from 'storybook/internal/babel';
-
+import type { Node } from '../estree/ast.ts';
+import type { SourceEditor } from '../estree/editor.ts';
 import { extractDescription } from '../enrichCsf.ts';
 import { extractComponentDescription, extractJSDocInfo } from '../jsdoc.ts';
 
 /**
- * JSDoc tags on the docblock of the statement a path belongs to.
+ * JSDoc tags on the docblock of the statement a node belongs to.
  *
  * The docblock sits on the enclosing statement rather than the expression itself, so a `meta`
  * object literal has to look upwards to find the comment an author wrote above `const meta`.
  */
-export function jsDocTagsForPath(path?: NodePath<t.Node>): Record<string, string[]> {
-  const statement = path?.getStatementParent();
-  const jsdocComment = statement ? extractDescription(statement.node) : '';
+export function jsDocTagsForNode(
+  node: Node | undefined,
+  editor: SourceEditor
+): Record<string, string[]> {
+  const statement = node ? editor.statementOf(node) : undefined;
+  const jsdocComment = statement ? extractDescription(statement, editor) : '';
 
   return jsdocComment ? (extractJSDocInfo(jsdocComment).tags ?? {}) : {};
 }
 
 /** Story description and summary from its JSDoc; `@describe`/`@desc` tags override the body. */
-export function extractStoryJSDocInfo(storyStatement?: t.Node): {
+export function extractStoryJSDocInfo(
+  storyStatement: Node | undefined,
+  editor: SourceEditor
+): {
   description?: string;
   summary?: string;
 } {
   // A story docblock resolves exactly like a `meta` one; only the tag map is component-specific.
   const { description, summary } = extractComponentDescription(
-    extractDescription(storyStatement) || undefined,
+    extractDescription(storyStatement, editor) || undefined,
     undefined
   );
 
diff --git a/code/core/src/csf-tools/story-shape/normalize-story.test.ts b/code/core/src/csf-tools/story-shape/normalize-story.test.ts
index 82d6a568d7cd..4f785094ebe2 100644
--- a/code/core/src/csf-tools/story-shape/normalize-story.test.ts
+++ b/code/core/src/csf-tools/story-shape/normalize-story.test.ts
@@ -1,10 +1,9 @@
 import { describe, expect, it } from 'vitest';
 
-import { recast, types as t } from 'storybook/internal/babel';
-
 import { dedent } from 'ts-dedent';
 
 import { loadCsf } from '../CsfFile.ts';
+import { textOf } from '../estree/ast.ts';
 import { normalizeStoryDeclaration } from './normalize-story.ts';
 
 const parse = (code: string) => {
@@ -12,14 +11,15 @@ const parse = (code: string) => {
 };
 
 const normalize = (code: string, exportName = 'A') => {
-  return normalizeStoryDeclaration(parse(code)._storyDeclarationPath[exportName]);
+  const csf = parse(code);
+  csf._editor.parentOf(csf._program);
+  return normalizeStoryDeclaration(csf._storyExports[exportName], csf._editor);
 };
 
 const printedShape = (code: string) => {
   const normalized = normalize(code);
   return {
-    // Recast may emit CRLF on Windows; keep assertions LF-stable across OSes.
-    code: recast.print(normalized.path.node).code.replace(/\r\n/g, '\n'),
+    code: textOf(normalized.node),
     type: normalized.type,
   };
 };
@@ -167,7 +167,7 @@ describe('normalizeStoryDeclaration', () => {
     `);
 
     expect(normalized.type).toBe('fn');
-    expect(t.isArrowFunctionExpression(normalized.path.node)).toBe(true);
+    expect(normalized.node.type).toBe('ArrowFunctionExpression');
   });
 
   it('resolves a story export that references a local function', () => {
@@ -181,7 +181,7 @@ describe('normalizeStoryDeclaration', () => {
     );
 
     expect(normalized.type).toBe('fn');
-    expect(t.isArrowFunctionExpression(normalized.path.node)).toBe(true);
+    expect(normalized.node.type).toBe('ArrowFunctionExpression');
   });
 
   it('resolves a typed chain of immutable local story aliases', () => {
diff --git a/code/core/src/csf-tools/story-shape/normalize-story.ts b/code/core/src/csf-tools/story-shape/normalize-story.ts
index ff8a33129a5d..4488d4e5edee 100644
--- a/code/core/src/csf-tools/story-shape/normalize-story.ts
+++ b/code/core/src/csf-tools/story-shape/normalize-story.ts
@@ -1,16 +1,22 @@
-import type { NodePath, types as t } from 'storybook/internal/babel';
-
+import { type E, type Node, locationOf } from '../estree/ast.ts';
+import type { SourceEditor } from '../estree/editor.ts';
 import { isCanonicalCsf2BindCall, isCsfFactoryCall, resolveIdentifierInit } from './utils.ts';
 
 export type NormalizedStoryDeclaration =
-  | { type: 'config'; path: NodePath<t.ObjectExpression> }
-  | {
-      type: 'fn';
-      path: NodePath<t.ArrowFunctionExpression | t.FunctionExpression | t.FunctionDeclaration>;
-    }
-  | { type: 'emptyConfig'; path: NodePath<t.Expression> };
-
-type StoryDeclarationExpression = NodePath<t.FunctionDeclaration | t.Expression>;
+  | { type: 'config'; node: E.ObjectExpression }
+  | { type: 'fn'; node: E.ArrowFunctionExpression | E.Function }
+  | { type: 'emptyConfig'; node: E.CallExpression };
+
+type StoryDeclarationExpression = E.Function | E.Expression;
+
+/** An error pointing at the node a story file got wrong. */
+export const storyShapeError = (message: string, node: Node, editor: SourceEditor) => {
+  const span = node as Node & { start: number; end: number };
+  const { start } = locationOf(editor.code, span.start, span.end);
+  return new SyntaxError(
+    `${editor.fileName ? `${editor.fileName}: ` : ''}${message} (${start.line}:${start.column})`
+  );
+};
 
 /**
  * Resolve a story export's declaration to its snippet-ready story shape.
@@ -18,39 +24,40 @@ type StoryDeclarationExpression = NodePath<t.FunctionDeclaration | t.Expression>
  * @example
  *
  * ```ts
- * export const A: Story = { args: {} }; //            → { type: 'config', path }
- * export const B = {} satisfies Story; //             → { type: 'config', path }
- * export const C = meta.story({ args: {} }); //       → { type: 'config', path }
- * export const D = meta.story(); //                   → { type: 'emptyConfig', path }
+ * export const A: Story = { args: {} }; //            → { type: 'config', node }
+ * export const B = {} satisfies Story; //             → { type: 'config', node }
+ * export const C = meta.story({ args: {} }); //       → { type: 'config', node }
+ * export const D = meta.story(); //                   → { type: 'emptyConfig', node }
  * export const E = Template.bind({}); //              → Template's classified initializer
  * ```
  */
 export function normalizeStoryDeclaration(
-  storyDeclaration: NodePath<t.Node>
+  storyDeclaration: Node,
+  editor: SourceEditor
 ): NormalizedStoryDeclaration {
-  const storyPath = declarationExpression(storyDeclaration);
-  const resolvedStoryPath = resolveLocalStory(storyDeclaration, storyPath);
-  const resolvedBindPath = bindInitializer(storyDeclaration, resolvedStoryPath);
-  const normalizedPath = resolvedBindPath ?? factoryArgumentExpression(resolvedStoryPath);
-  const unwrappedPath = unwrapTypeExpression(normalizedPath);
+  const storyNode = resolveLocalStory(editor, declarationExpression(storyDeclaration, editor));
+  const resolvedBind = bindInitializer(editor, storyNode);
+  const normalized = resolvedBind ?? factoryArgumentExpression(storyNode, editor);
+  const unwrapped = unwrapTypeExpression(normalized);
 
-  return classifyStoryPath(unwrappedPath);
+  return classifyStory(unwrapped, editor);
 }
 
+/** Follows a chain of constant local aliases (`export const A = Impl`) to the story they name. */
 function resolveLocalStory(
-  declaration: NodePath<t.Node>,
+  editor: SourceEditor,
   expression: StoryDeclarationExpression
 ): StoryDeclarationExpression {
   const visited = new Set<string>();
   let current = unwrapTypeExpression(expression);
 
-  while (current.isIdentifier()) {
-    const name = current.node.name;
-    if (visited.has(name) || !current.scope.getBinding(name)?.constant) {
+  while (current.type === 'Identifier') {
+    const { name } = current;
+    if (visited.has(name) || !editor.scopes.program.bindings.get(name)?.constant) {
       break;
     }
     visited.add(name);
-    const resolved = resolveIdentifierInit(declaration, current);
+    const resolved = resolveIdentifierInit(editor.program, name);
     if (!resolved) {
       break;
     }
@@ -61,105 +68,95 @@ function resolveLocalStory(
 }
 
 /** Declaration body that can be classified as a story shape. */
-function declarationExpression(storyDeclaration: NodePath<t.Node>): StoryDeclarationExpression {
-  if (storyDeclaration.isFunctionDeclaration()) {
+function declarationExpression(
+  storyDeclaration: Node,
+  editor: SourceEditor
+): StoryDeclarationExpression {
+  if (storyDeclaration.type === 'FunctionDeclaration') {
     return storyDeclaration;
   }
 
-  if (storyDeclaration.isVariableDeclarator()) {
-    const init = storyDeclaration.get('init');
-    if (!init.isExpression()) {
-      throw storyDeclaration.buildCodeFrameError('Expected story initializer to be an expression');
+  if (storyDeclaration.type === 'VariableDeclarator') {
+    if (!storyDeclaration.init) {
+      throw storyShapeError(
+        'Expected story initializer to be an expression',
+        storyDeclaration,
+        editor
+      );
     }
-    return init;
+    return storyDeclaration.init;
   }
 
-  throw storyDeclaration.buildCodeFrameError(
-    'Expected story to be a function or variable declaration'
+  throw storyShapeError(
+    'Expected story to be a function or variable declaration',
+    storyDeclaration,
+    editor
   );
 }
 
 /** Initializer resolved from a local `Template.bind(...)` call. */
 function bindInitializer(
-  storyDeclaration: NodePath<t.Node>,
-  storyPath: StoryDeclarationExpression
+  editor: SourceEditor,
+  storyNode: StoryDeclarationExpression
 ): StoryDeclarationExpression | null {
-  if (!storyPath.isCallExpression()) {
+  if (!isCanonicalCsf2BindCall(storyNode)) {
     return null;
   }
-
-  if (!isCanonicalCsf2BindCall(storyPath.node)) {
-    return null;
-  }
-
-  const callee = storyPath.get('callee');
-  if (!callee.isMemberExpression()) {
-    return null;
-  }
-  const obj = callee.get('object');
-  if (!obj.isIdentifier()) {
-    return null;
-  }
-
-  return resolveIdentifierInit(storyDeclaration, obj);
+  return resolveIdentifierInit(editor.program, storyNode.callee.object.name);
 }
 
 /** Single config argument from factory calls, preserving zero-arg calls. */
 function factoryArgumentExpression(
-  storyPath: StoryDeclarationExpression
+  storyNode: StoryDeclarationExpression,
+  editor: SourceEditor
 ): StoryDeclarationExpression {
-  if (!storyPath.isCallExpression() || !isCsfFactoryCall(storyPath.node)) {
-    return storyPath;
+  if (!isCsfFactoryCall(storyNode)) {
+    return storyNode;
   }
 
-  const args = storyPath.get('arguments');
+  const args = storyNode.arguments;
   if (args.length === 0) {
-    return storyPath;
+    return storyNode;
   }
 
-  if (args.length !== 1 || !args[0].isExpression()) {
-    throw storyPath.buildCodeFrameError('Could not evaluate story expression');
+  if (args.length !== 1 || args[0].type === 'SpreadElement') {
+    throw storyShapeError('Could not evaluate story expression', storyNode, editor);
   }
 
   return args[0];
 }
 
-/** Path-level unwrap for story-legal TS wrappers only; declaration normalization preserves paths. */
-function unwrapTypeExpression(storyPath: StoryDeclarationExpression): StoryDeclarationExpression {
-  if (storyPath.isTSSatisfiesExpression()) {
-    return storyPath.get('expression');
+function unwrapTypeExpression(storyNode: StoryDeclarationExpression): StoryDeclarationExpression {
+  if (storyNode.type === 'TSSatisfiesExpression' || storyNode.type === 'TSAsExpression') {
+    return storyNode.expression;
   }
 
-  if (storyPath.isTSAsExpression()) {
-    return storyPath.get('expression');
-  }
-
-  return storyPath;
+  return storyNode;
 }
 
-/** Final story shape classification for a normalized declaration path. */
-function classifyStoryPath(storyPath: StoryDeclarationExpression): NormalizedStoryDeclaration {
-  if (storyPath.isObjectExpression()) {
-    return { type: 'config', path: storyPath };
+function classifyStory(
+  storyNode: StoryDeclarationExpression,
+  editor: SourceEditor
+): NormalizedStoryDeclaration {
+  if (storyNode.type === 'ObjectExpression') {
+    return { type: 'config', node: storyNode };
   }
 
   if (
-    storyPath.isArrowFunctionExpression() ||
-    storyPath.isFunctionExpression() ||
-    storyPath.isFunctionDeclaration()
+    storyNode.type === 'ArrowFunctionExpression' ||
+    storyNode.type === 'FunctionExpression' ||
+    storyNode.type === 'FunctionDeclaration'
   ) {
-    return { type: 'fn', path: storyPath };
+    return { type: 'fn', node: storyNode };
   }
 
-  if (
-    storyPath.isCallExpression() &&
-    isCsfFactoryCall(storyPath.node) &&
-    storyPath.node.arguments.length === 0
-  ) {
-    return { type: 'emptyConfig', path: storyPath };
+  if (isCsfFactoryCall(storyNode) && storyNode.arguments.length === 0) {
+    return { type: 'emptyConfig', node: storyNode };
   }
 
-  throw storyPath.buildCodeFrameError(
-    'Expected story to be csf factory, function or an object expression'
+  throw storyShapeError(
+    'Expected story to be csf factory, function or an object expression',
+    storyNode,
+    editor
   );
 }
diff --git a/code/core/src/csf-tools/story-shape/reference-context.ts b/code/core/src/csf-tools/story-shape/reference-context.ts
index 835c9a3c9e37..3dc56696c8cc 100644
--- a/code/core/src/csf-tools/story-shape/reference-context.ts
+++ b/code/core/src/csf-tools/story-shape/reference-context.ts
@@ -1,10 +1,9 @@
-import type { types as t } from 'storybook/internal/babel';
-
 import { readFileSync } from 'node:fs';
 
 import { createModuleResolver } from '../../common/utils/module-resolver.ts';
 import { jsTsSourceExtensions } from '../../shared/constants/extensions.ts';
-import { babelParseFile } from '../CsfFile.ts';
+import type { Node } from '../estree/ast.ts';
+import { SourceEditor } from '../estree/editor.ts';
 import { isSelfContained } from './resolve-arg-value.ts';
 import type { ReferenceModule, StoryReferenceResolver } from './resolve-members.ts';
 
@@ -66,11 +65,13 @@ export function createStoryReferenceResolver(
 /** Parses a module reached by an import, for a caller that already resolved its path. */
 export const parseReferenceModule = (filePath: string): ReferenceModule | undefined => {
   try {
-    const code = readFileSync(filePath, 'utf8');
-    return { program: babelParseFile({ code, filename: filePath }).path, filePath };
+    const editor = new SourceEditor(readFileSync(filePath, 'utf8'), filePath);
+    // Index the module so its nodes print as written wherever a resolution carries them.
+    editor.parentOf(editor.program);
+    return { editor, filePath };
   } catch {
     return undefined;
   }
 };
 
-const selfContained = (node: t.Node) => (isSelfContained(node) ? node : undefined);
+const selfContained = (node: Node) => (isSelfContained(node) ? node : undefined);
diff --git a/code/core/src/csf-tools/story-shape/render.test.ts b/code/core/src/csf-tools/story-shape/render.test.ts
index 2e708191691b..22786532205c 100644
--- a/code/core/src/csf-tools/story-shape/render.test.ts
+++ b/code/core/src/csf-tools/story-shape/render.test.ts
@@ -1,10 +1,11 @@
 import { describe, expect, it } from 'vitest';
 
-import { recast } from 'storybook/internal/babel';
-
 import { dedent } from 'ts-dedent';
 
 import { loadCsf } from '../CsfFile.ts';
+import type { Node } from '../estree/ast.ts';
+import { textOf } from '../estree/ast.ts';
+import type { SourceEditor } from '../estree/editor.ts';
 import { resolveEffectiveRender, resolveRenderFunction } from './render.ts';
 import { normalizeStoryDeclaration } from './normalize-story.ts';
 
@@ -12,17 +13,24 @@ import { normalizeStoryDeclaration } from './normalize-story.ts';
 const resolveStoryRender = (code: string) => {
   const source = `export default { title: 'T' };\n${dedent(code)}`;
   const csf = loadCsf(source, { makeTitle: (title) => title ?? 'title' }).parse();
-  const declaration = csf._storyDeclarationPath['A'];
-  const normalized = normalizeStoryDeclaration(declaration);
+  editor = csf._editor;
+  const normalized = normalizeStoryDeclaration(csf._storyExports['A'], csf._editor);
 
   return resolveRenderFunction(
-    normalized.type === 'config' ? normalized.path : undefined,
-    declaration
+    normalized.type === 'config' ? normalized.node : undefined,
+    csf._editor
   );
 };
 
+let editor: SourceEditor;
+
+const printed = (node: Node) => {
+  const parent = editor.parentOf(node);
+  return textOf(parent?.type === 'Property' && parent.method ? parent : node);
+};
+
 const printedBody = (resolution: ReturnType<typeof resolveStoryRender>) =>
-  resolution.kind === 'resolved' ? recast.print(resolution.path.node).code : undefined;
+  resolution.kind === 'resolved' ? printed(resolution.node) : undefined;
 
 describe('resolveRenderFunction', () => {
   it('reports a story with no render property as missing', () => {
@@ -108,7 +116,7 @@ describe('resolveRenderFunction', () => {
     expect(resolution.kind).toBe('unresolved');
     expect(
       resolution.kind === 'unresolved' && resolution.shadowedRender
-        ? recast.print(resolution.shadowedRender.node).code
+        ? printed(resolution.shadowedRender)
         : undefined
     ).toBe('() => 1');
   });
@@ -176,6 +184,7 @@ describe('resolveEffectiveRender', () => {
       ? code
       : `export default { title: 'T' };\n${code}`;
     const csf = loadCsf(dedent(source), { makeTitle: (title) => title ?? 'title' }).parse();
+    editor = csf._editor;
     const resolution = resolveEffectiveRender(csf, 'A');
     expect(printedBody(resolution)).toBe(expected);
   });
diff --git a/code/core/src/csf-tools/story-shape/render.ts b/code/core/src/csf-tools/story-shape/render.ts
index 3d43b952cd73..8b8cb826ef43 100644
--- a/code/core/src/csf-tools/story-shape/render.ts
+++ b/code/core/src/csf-tools/story-shape/render.ts
@@ -1,18 +1,16 @@
-import { type NodePath, type types as t } from 'storybook/internal/babel';
-
 import type { CsfFile } from '../CsfFile.ts';
-import { normalizeStoryDeclaration } from './normalize-story.ts';
+import type { E, Node } from '../estree/ast.ts';
+import type { SourceEditor } from '../estree/editor.ts';
+import { normalizeStoryDeclaration, storyShapeError } from './normalize-story.ts';
 import {
   type ReferenceContext,
   type ResolvedMembers,
   resolveObjectMembers,
 } from './resolve-members.ts';
-import { keyOf, metaObjectPath, pathForNode, resolveIdentifierInit } from './utils.ts';
+import { type FunctionNode, keyOf, metaObject, resolveIdentifierInit } from './utils.ts';
 
-/** A function a story or meta supplies through `render`. */
-export type RenderFunctionPath = NodePath<
-  t.ArrowFunctionExpression | t.FunctionExpression | t.FunctionDeclaration | t.ObjectMethod
->;
+/** A function a story or meta supplies through `render`; a method shorthand is its function. */
+export type RenderFunction = FunctionNode;
 
 /**
  * Outcome of looking for a `render` function.
@@ -27,13 +25,15 @@ export type RenderFunctionPath = NodePath<
  */
 export type RenderResolution =
   | { kind: 'missing' }
-  | { kind: 'resolved'; path: RenderFunctionPath }
-  | { kind: 'unresolved'; shadowedRender?: RenderFunctionPath };
+  | { kind: 'resolved'; node: RenderFunction }
+  | { kind: 'unresolved'; shadowedRender?: RenderFunction };
 
-type RenderReadResult = RenderResolution | { kind: 'invalid'; path: NodePath<t.Node> };
+type RenderReadResult = RenderResolution | { kind: 'invalid'; node: Node };
 
-const isRenderFunction = (path: NodePath<t.Node>): path is RenderFunctionPath =>
-  path.isArrowFunctionExpression() || path.isFunctionExpression() || path.isFunctionDeclaration();
+const isRenderFunction = (node: Node | null | undefined): node is RenderFunction =>
+  node?.type === 'ArrowFunctionExpression' ||
+  node?.type === 'FunctionExpression' ||
+  node?.type === 'FunctionDeclaration';
 
 /**
  * Resolves the `render` property of a story or meta config, following a local identifier
@@ -45,8 +45,8 @@ const isRenderFunction = (path: NodePath<t.Node>): path is RenderFunctionPath =>
  * the explicit property wins. When `render` is missing, any spread could still be supplying one,
  * which is also `unresolved`.
  *
- * `storyDeclaration` anchors the identifier lookup to the module the story lives in, so a helper
- * declared beside the story resolves while an imported one reports `unresolved`.
+ * `editor` is the module the story lives in, so a helper declared beside the story resolves while
+ * an imported one reports `unresolved`.
  *
  * `references` lets a spread be read rather than assumed: with it, `{ ...Base }` reports whichever
  * `render` `Base` supplies, or `missing` when it supplies none, instead of the `unresolved` a pass
@@ -56,73 +56,40 @@ const isRenderFunction = (path: NodePath<t.Node>): path is RenderFunctionPath =>
  * story-file mistake rather than something a static pass merely could not follow.
  */
 export function resolveRenderFunction(
-  config: NodePath<t.ObjectExpression> | undefined,
-  storyDeclaration: NodePath<t.Node>,
+  config: E.ObjectExpression | undefined,
+  editor: SourceEditor,
   references?: ReferenceContext
 ): RenderResolution {
-  const properties = config?.get('properties') ?? [];
-
-  // Duplicate keys resolve to the LAST occurrence, matching runtime object semantics.
-  let renderIndex = -1;
-  for (let index = properties.length - 1; index >= 0; index -= 1) {
-    const property = properties[index];
-    if (
-      (property.isObjectProperty() || property.isObjectMethod()) &&
-      keyOf(property.node) === 'render'
-    ) {
-      renderIndex = index;
-      break;
-    }
-  }
-
-  const throughSpreads = () =>
-    config && references
-      ? renderFromMembers(
-          resolveObjectMembers(config.node, references),
-          references,
-          storyDeclaration
-        )
-      : { kind: 'unresolved' as const };
-
-  if (renderIndex === -1) {
-    return properties.some((property) => property.isSpreadElement())
-      ? throughSpreads()
-      : { kind: 'missing' };
-  }
-
-  const resolved = readRenderProperty(properties[renderIndex], storyDeclaration);
+  const resolved = readRender(config, editor, references);
   if (resolved.kind === 'invalid') {
-    throw resolved.path.buildCodeFrameError(
-      'Expected render to be an arrow function or function expression'
+    throw storyShapeError(
+      'Expected render to be an arrow function or function expression',
+      resolved.node,
+      editor
     );
   }
-  if (properties.some((property, index) => index > renderIndex && property.isSpreadElement())) {
-    const read = throughSpreads();
-    if (read.kind !== 'unresolved') {
-      return read;
-    }
-    return resolved.kind === 'resolved'
-      ? { kind: 'unresolved', shadowedRender: resolved.path }
-      : { kind: 'unresolved' };
-  }
-
   return resolved;
 }
 
+/**
+ * The `render` a story runs with: its own, or the meta's when the story does not set one.
+ *
+ * A story `render` that is present but cannot be read, including one that is not a function,
+ * reports `unresolved` rather than falling back to the meta's.
+ */
 export function resolveEffectiveRender(
   csf: CsfFile,
   exportName: string,
   references?: ReferenceContext
 ): RenderResolution {
-  const declaration = csf._storyDeclarationPath[exportName];
-  const normalized = normalizeStoryDeclarationForRender(declaration);
+  const normalized = normalizeStoryDeclaration(csf._storyExports[exportName], csf._editor);
   if (normalized.type === 'fn') {
-    return { kind: 'resolved', path: normalized.path };
+    return { kind: 'resolved', node: normalized.node as RenderFunction };
   }
 
   const storyRender = readRender(
-    normalized.type === 'config' ? normalized.path : undefined,
-    declaration,
+    normalized.type === 'config' ? (normalized.node as E.ObjectExpression) : undefined,
+    csf._editor,
     references
   );
   if (storyRender.kind === 'invalid') {
@@ -132,26 +99,22 @@ export function resolveEffectiveRender(
     return storyRender;
   }
 
-  const metaRender = readRender(metaObjectPath(csf), declaration, references);
+  const metaRender = readRender(metaObject(csf), csf._editor, references);
   return metaRender.kind === 'invalid' ? { kind: 'unresolved' } : metaRender;
 }
 
-const normalizeStoryDeclarationForRender = normalizeStoryDeclaration;
-
 const readRender = (
-  config: NodePath<t.ObjectExpression> | undefined,
-  storyDeclaration: NodePath<t.Node>,
+  config: E.ObjectExpression | undefined,
+  editor: SourceEditor,
   references?: ReferenceContext
 ): RenderReadResult => {
-  const properties = config?.get('properties') ?? [];
+  const properties = config?.properties ?? [];
 
+  // Duplicate keys resolve to the LAST occurrence, matching runtime object semantics.
   let renderIndex = -1;
   for (let index = properties.length - 1; index >= 0; index -= 1) {
     const property = properties[index];
-    if (
-      (property.isObjectProperty() || property.isObjectMethod()) &&
-      keyOf(property.node) === 'render'
-    ) {
+    if (property.type === 'Property' && keyOf(property) === 'render') {
       renderIndex = index;
       break;
     }
@@ -159,27 +122,28 @@ const readRender = (
 
   const throughSpreads = () =>
     config && references
-      ? renderFromMembers(
-          resolveObjectMembers(config.node, references),
-          references,
-          storyDeclaration
-        )
+      ? renderFromMembers(resolveObjectMembers(config, references), editor)
       : { kind: 'unresolved' as const };
 
   if (renderIndex === -1) {
-    return properties.some((property) => property.isSpreadElement())
+    return properties.some((property) => property.type === 'SpreadElement')
       ? throughSpreads()
       : { kind: 'missing' };
   }
 
-  const resolved = readRenderProperty(properties[renderIndex], storyDeclaration);
-  if (properties.some((property, index) => index > renderIndex && property.isSpreadElement())) {
+  const resolved = readRenderProperty(properties[renderIndex] as E.ObjectProperty, editor);
+  if (resolved.kind === 'invalid') {
+    return resolved;
+  }
+  if (
+    properties.some((property, index) => index > renderIndex && property.type === 'SpreadElement')
+  ) {
     const read = throughSpreads();
     if (read.kind !== 'unresolved') {
       return read;
     }
     return resolved.kind === 'resolved'
-      ? { kind: 'unresolved', shadowedRender: resolved.path }
+      ? { kind: 'unresolved', shadowedRender: resolved.node }
       : { kind: 'unresolved' };
   }
 
@@ -192,11 +156,7 @@ const readRender = (
  * A member the story file itself does not contain is `unresolved`: a function another module
  * declares reads as a name that means nothing in a snippet, whichever way it is printed.
  */
-function renderFromMembers(
-  members: ResolvedMembers,
-  references: ReferenceContext,
-  storyDeclaration: NodePath<t.Node>
-): RenderResolution {
+function renderFromMembers(members: ResolvedMembers, editor: SourceEditor): RenderResolution {
   if (members.unresolved.length > 0) {
     return { kind: 'unresolved' };
   }
@@ -206,48 +166,51 @@ function renderFromMembers(
     return { kind: 'missing' };
   }
 
-  const path = pathForNode(references.program, node);
-  if (!path) {
+  if (editor.parentOf(node) === null) {
     return { kind: 'unresolved' };
   }
-  if (path.isObjectMethod()) {
-    return path.node.kind === 'method' && !path.node.generator
-      ? { kind: 'resolved', path }
-      : { kind: 'unresolved' };
+  if (node.type === 'Property') {
+    return methodRender(node as E.ObjectProperty);
   }
-  if (path.isIdentifier()) {
-    const resolved = resolveIdentifierInit(storyDeclaration, path);
-    return resolved && isRenderFunction(resolved)
-      ? { kind: 'resolved', path: resolved }
+  if (node.type === 'Identifier') {
+    const resolved = resolveIdentifierInit(editor.program, node.name);
+    return isRenderFunction(resolved)
+      ? { kind: 'resolved', node: resolved }
       : { kind: 'unresolved' };
   }
-  return isRenderFunction(path) ? { kind: 'resolved', path } : { kind: 'unresolved' };
+  return isRenderFunction(node) ? { kind: 'resolved', node } : { kind: 'unresolved' };
 }
 
+// A getter, setter or generator is not itself the render function.
+const methodRender = (
+  property: E.ObjectProperty
+): Extract<RenderResolution, { kind: 'resolved' | 'unresolved' }> => {
+  const fn = property.value as E.Function;
+  return property.kind === 'init' && property.method && !fn.generator
+    ? { kind: 'resolved', node: fn }
+    : { kind: 'unresolved' };
+};
+
 function readRenderProperty(
-  renderProperty: NodePath<t.ObjectExpression['properties'][number]>,
-  storyDeclaration: NodePath<t.Node>
+  renderProperty: E.ObjectProperty,
+  editor: SourceEditor
 ): Extract<RenderReadResult, { kind: 'invalid' | 'resolved' | 'unresolved' }> {
-  if (renderProperty.isObjectMethod()) {
-    // A getter's render value is what it returns, a setter reads as undefined, and a generator is
-    // not a render function, so only a plain method is the function itself.
-    return renderProperty.node.kind === 'method' && !renderProperty.node.generator
-      ? { kind: 'resolved', path: renderProperty }
-      : { kind: 'unresolved' };
+  if (renderProperty.method || renderProperty.kind !== 'init') {
+    return methodRender(renderProperty);
   }
 
-  const renderPath = (renderProperty as NodePath<t.ObjectProperty>).get('value');
+  const render = renderProperty.value;
 
-  if (renderPath.isIdentifier()) {
-    const resolved = resolveIdentifierInit(storyDeclaration, renderPath);
-    return resolved && isRenderFunction(resolved)
-      ? { kind: 'resolved', path: resolved }
+  if (render.type === 'Identifier') {
+    const resolved = resolveIdentifierInit(editor.program, render.name);
+    return isRenderFunction(resolved)
+      ? { kind: 'resolved', node: resolved }
       : { kind: 'unresolved' };
   }
 
-  if (!isRenderFunction(renderPath)) {
-    return { kind: 'invalid', path: renderPath };
+  if (!isRenderFunction(render)) {
+    return { kind: 'invalid', node: render };
   }
 
-  return { kind: 'resolved', path: renderPath };
+  return { kind: 'resolved', node: render };
 }
diff --git a/code/core/src/csf-tools/story-shape/resolve-arg-value.test.ts b/code/core/src/csf-tools/story-shape/resolve-arg-value.test.ts
index a76683bb317f..11771173be38 100644
--- a/code/core/src/csf-tools/story-shape/resolve-arg-value.test.ts
+++ b/code/core/src/csf-tools/story-shape/resolve-arg-value.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { babelParseFile } from '../CsfFile.ts';
+import { SourceEditor } from '../estree/editor.ts';
 import { resolveArgValue } from './resolve-arg-value.ts';
 import {
   type ReferenceContext,
@@ -9,8 +9,12 @@ import {
   sourceOf,
 } from './resolve-members.ts';
 
+const indexed = (editor: SourceEditor) => {
+  editor.parentOf(editor.program);
+  return editor;
+};
 const contextOf = (code: string, filePath = 'entry.ts'): ReferenceContext => ({
-  program: babelParseFile({ code, filename: filePath }).path,
+  editor: indexed(new SourceEditor(code, filePath)),
   filePath,
 });
 
@@ -121,7 +125,7 @@ describe('resolveArgValue', () => {
 
   it('names nothing for a global or a parameter the expression declares itself', () => {
     expect(valueOf('', '(event) => Math.max(event.x, 0)')).toEqual({
-      node: 'event => Math.max(event.x, 0)',
+      node: '(event) => Math.max(event.x, 0)',
       imports: [],
       unresolved: [],
     });
diff --git a/code/core/src/csf-tools/story-shape/resolve-arg-value.ts b/code/core/src/csf-tools/story-shape/resolve-arg-value.ts
index 251b114185ae..393d7700009f 100644
--- a/code/core/src/csf-tools/story-shape/resolve-arg-value.ts
+++ b/code/core/src/csf-tools/story-shape/resolve-arg-value.ts
@@ -1,16 +1,16 @@
 // Reads an arg value written as a name through to the definition it refers to, and reports what
 // printing the result still depends on.
-import { type NodePath, traverse, types as t } from 'storybook/internal/babel';
-
+import { type E, type Node, expressionFromSource, parseFragment } from '../estree/ast.ts';
+import { analyzeScopes } from '../estree/scope.ts';
 import { type ImportRef } from './import-statements.ts';
 import { type ImportBinding, collectImportBindings } from './imports.ts';
-import { type ReferenceContext, resolveArgsRecord } from './resolve-members.ts';
-import { unwrapExpression } from './utils.ts';
+import { type ReferenceContext, codeOf, resolveArgsRecord } from './resolve-members.ts';
+import { keyOf, unwrapExpression } from './utils.ts';
 
 /** An arg value read through to the definition it names, and what printing it still depends on. */
 export interface ResolvedArgValue {
   /** Node to print in place of what was written. */
-  node: t.Node;
+  node: Node;
   /** Imports the printed node needs to resolve where the snippet lands. */
   imports: ImportRef[];
   /** Source text of every name the printed node depends on that no import can supply. */
@@ -25,14 +25,14 @@ export interface ResolvedArgValue {
  * import that makes it resolve. Names a larger expression reaches for are reported the same way,
  * except that a locally declared one can only be named, not substituted into the expression.
  */
-export const resolveArgValue = (node: t.Node, ctx: ReferenceContext): ResolvedArgValue => {
+export const resolveArgValue = (node: Node, ctx: ReferenceContext): ResolvedArgValue => {
   const unresolved: string[] = [];
   const resolved = inlineSpreads(
     followValue(unwrapExpression(node), ctx, new Set()),
     ctx,
     unresolved
   );
-  const bindings = importBindingsOf(ctx.program);
+  const bindings = importBindingsOf(ctx.editor.program);
   const imports: ImportRef[] = [];
 
   for (const name of freeNames(resolved)) {
@@ -46,7 +46,7 @@ export const resolveArgValue = (node: t.Node, ctx: ReferenceContext): ResolvedAr
       });
       continue;
     }
-    if (ctx.program.scope.getBinding(name)) {
+    if (ctx.editor.scopes.program.bindings.has(name)) {
       unresolved.push(name);
     }
   }
@@ -60,15 +60,15 @@ export const resolveArgValue = (node: t.Node, ctx: ReferenceContext): ResolvedAr
  * This is the bar a value copied out of another module has to clear, since the names that module
  * declares and imports mean nothing where the snippet lands.
  */
-export const isSelfContained = (node: t.Node): boolean => freeNames(node).size === 0;
+export const isSelfContained = (node: Node): boolean => freeNames(node).size === 0;
 
-const importBindings = new WeakMap<t.Node, Map<string, ImportBinding>>();
+const importBindings = new WeakMap<E.Program, Map<string, ImportBinding>>();
 
-const importBindingsOf = (program: NodePath<t.Program>): Map<string, ImportBinding> => {
-  let bindings = importBindings.get(program.node);
+const importBindingsOf = (program: E.Program): Map<string, ImportBinding> => {
+  let bindings = importBindings.get(program);
   if (bindings === undefined) {
     bindings = collectImportBindings(program);
-    importBindings.set(program.node, bindings);
+    importBindings.set(program, bindings);
   }
   return bindings;
 };
@@ -79,28 +79,32 @@ const importBindingsOf = (program: NodePath<t.Program>): Map<string, ImportBindi
  * A spread this pass cannot read leaves its object exactly as written: printing part of it would
  * claim the value is something it is not, where printing the source at least shows the story.
  */
-const inlineSpreads = (node: t.Node, ctx: ReferenceContext, unresolved: string[]): t.Node => {
+const inlineSpreads = (node: Node, ctx: ReferenceContext, unresolved: string[]): Node => {
   // A value with nothing to pull in is returned as it was parsed, so it keeps the story's own
   // formatting rather than being reprinted from a rebuilt tree.
   if (!hasNamedSpread(node)) {
     return node;
   }
 
-  if (t.isArrayExpression(node)) {
-    return t.arrayExpression(
-      node.elements.map((element) =>
-        element && t.isExpression(element)
-          ? (inlineSpreads(element, ctx, unresolved) as t.Expression)
-          : element
-      )
+  if (node.type === 'ArrayExpression') {
+    return rebuilt(
+      `[${node.elements
+        .map((element) =>
+          element === null
+            ? ''
+            : element.type === 'SpreadElement'
+              ? codeOf(element)
+              : codeOf(inlineSpreads(element, ctx, unresolved))
+        )
+        .join(', ')}]`
     );
   }
 
-  if (!t.isObjectExpression(node)) {
+  if (node.type !== 'ObjectExpression') {
     return node;
   }
-  if (!node.properties.some((property) => t.isSpreadElement(property))) {
-    return objectFrom(node.properties, ctx, unresolved) ?? node;
+  if (!node.properties.some((property) => property.type === 'SpreadElement')) {
+    return objectFrom(node.properties as E.ObjectProperty[], ctx, unresolved) ?? node;
   }
 
   const members = resolveArgsRecord(node, ctx);
@@ -110,113 +114,176 @@ const inlineSpreads = (node: t.Node, ctx: ReferenceContext, unresolved: string[]
   }
   return (
     objectFrom(
-      Object.entries(members.properties).map(([key, value]) =>
-        t.objectProperty(
-          t.isValidIdentifier(key) ? t.identifier(key) : t.stringLiteral(key),
-          value as t.Expression
-        )
-      ),
+      Object.entries(members.properties).map(([key, value]) => ({ key, value })),
       ctx,
       unresolved
     ) ?? node
   );
 };
 
+// A node built from rewritten source; its parts print as written there.
+const rebuilt = (code: string): Node => unwrapExpression(expressionFromSource(code));
+
 /**
  * Whether a value spreads something it names rather than something written out on the spot.
  *
  * Only a named spread is worth writing out: `{ ...{ a: 1 }, b: 2 }` already says what it holds, so
  * rewriting it would reprint the story's own source for no gain.
  */
-const hasNamedSpread = (node: t.Node): boolean => {
-  if (t.isArrayExpression(node)) {
+const hasNamedSpread = (node: Node): boolean => {
+  if (node.type === 'ArrayExpression') {
     return node.elements.some(
-      (element) => element !== null && t.isExpression(element) && hasNamedSpread(element)
+      (element) => element !== null && element.type !== 'SpreadElement' && hasNamedSpread(element)
     );
   }
   return (
-    t.isObjectExpression(node) &&
+    node.type === 'ObjectExpression' &&
     node.properties.some((property) =>
-      t.isSpreadElement(property)
-        ? !t.isObjectExpression(unwrapExpression(property.argument))
-        : t.isObjectProperty(property) &&
-          t.isExpression(property.value) &&
-          hasNamedSpread(property.value)
+      property.type === 'SpreadElement'
+        ? unwrapExpression(property.argument).type !== 'ObjectExpression'
+        : !property.method && property.kind === 'init' && hasNamedSpread(property.value)
     )
   );
 };
 
+const isValidIdentifier = (name: string) => /^[A-Za-z_$][\w$]*$/.test(name);
+
 /** An object literal with every member value's own spreads written out, when they all can be. */
 const objectFrom = (
-  properties: t.ObjectExpression['properties'],
+  properties: (E.ObjectProperty | { key: string; value: Node })[],
   ctx: ReferenceContext,
   unresolved: string[]
-): t.ObjectExpression | undefined => {
-  const rebuilt: t.ObjectExpression['properties'] = [];
+): Node | undefined => {
+  const members: string[] = [];
   for (const property of properties) {
-    if (!t.isObjectProperty(property) || !t.isExpression(property.value)) {
-      return undefined;
+    let key: string;
+    let original: Node;
+    if ('type' in property) {
+      if (property.method || property.kind !== 'init') {
+        return undefined;
+      }
+      const name = keyOf(property);
+      key = property.computed
+        ? `[${codeOf(property.key)}]`
+        : name !== null && isValidIdentifier(name)
+          ? name
+          : codeOf(property.key);
+      original = property.value;
+    } else {
+      if (property.value.type === 'Property') {
+        return undefined;
+      }
+      key = isValidIdentifier(property.key) ? property.key : JSON.stringify(property.key);
+      original = property.value;
     }
-    const value = inlineSpreads(property.value, ctx, unresolved) as t.Expression;
+    const value = inlineSpreads(original, ctx, unresolved);
     // A shorthand prints its key and nothing else, so it may only stay shorthand while its value is
     // still the one the key stands for.
-    rebuilt.push(
-      t.objectProperty(
-        property.key,
-        value,
-        property.computed,
-        property.shorthand && value === property.value
-      )
-    );
+    const shorthand = 'type' in property && property.shorthand && value === property.value;
+    members.push(shorthand ? key : `${key}: ${codeOf(value)}`);
   }
-  return t.objectExpression(rebuilt);
+  // One member per line, so formatters keep the object expanded.
+  return rebuilt(
+    members.length === 0
+      ? '{}'
+      : `{\n${members.map((member) => `  ${member.replaceAll('\n', '\n  ')}`).join(',\n')}\n}`
+  );
 };
 
 /** Reads a bare name through to the value it was declared with, as far as the chain goes. */
-const followValue = (node: t.Node, ctx: ReferenceContext, seen: Set<string>): t.Node => {
-  if (!t.isIdentifier(node) || seen.has(node.name)) {
+const followValue = (node: Node, ctx: ReferenceContext, seen: Set<string>): Node => {
+  if (node.type !== 'Identifier' || seen.has(node.name)) {
     return node;
   }
-  const binding = ctx.program.scope.getBinding(node.name);
+  const binding = ctx.editor.scopes.program.bindings.get(node.name);
   if (
     !binding ||
-    binding.kind === 'module' ||
+    binding.kind === 'import' ||
     !binding.constant ||
-    !t.isVariableDeclarator(binding.path.node) ||
-    !binding.path.node.init
+    binding.node.type !== 'VariableDeclarator' ||
+    !binding.node.init
   ) {
     return node;
   }
   seen.add(node.name);
-  return followValue(unwrapExpression(binding.path.node.init), ctx, seen);
+  return followValue(unwrapExpression(binding.node.init), ctx, seen);
 };
 
-/**
- * Names an expression reaches for from outside itself. ES globals count as resolved, since they
- * mean the same wherever the snippet lands.
- */
-const freeNames = (node: t.Node): Set<string> => {
-  const expression = t.isExpression(node)
-    ? node
-    : t.isObjectMethod(node)
-      ? t.objectExpression([node])
-      : undefined;
-  if (expression === undefined) {
-    throw new Error(`Cannot read the names a ${node.type} depends on: it is not an expression`);
+const freeNames = (node: Node): Set<string> => {
+  if (node.type === 'Property') {
+    return unboundNames(`({ ${codeOf(node)} })`);
   }
+  return unboundNames(`(${codeOf(node)})`);
+};
 
-  // The clone keeps this traversal from binding scope information to nodes the story file's own
-  // program still owns.
-  const wrapped = t.file(
-    t.program([t.expressionStatement(t.cloneNode(expression, true) as t.Expression)])
+// Names every scope has, so a snippet never needs to import them.
+const ES_BUILTINS = new Set([
+  'AggregateError',
+  'Array',
+  'ArrayBuffer',
+  'Atomics',
+  'BigInt',
+  'BigInt64Array',
+  'BigUint64Array',
+  'Boolean',
+  'DataView',
+  'Date',
+  'Error',
+  'EvalError',
+  'FinalizationRegistry',
+  'Float16Array',
+  'Float32Array',
+  'Float64Array',
+  'Function',
+  'Infinity',
+  'Int16Array',
+  'Int32Array',
+  'Int8Array',
+  'Intl',
+  'Iterator',
+  'JSON',
+  'Map',
+  'Math',
+  'NaN',
+  'Number',
+  'Object',
+  'Promise',
+  'Proxy',
+  'RangeError',
+  'ReferenceError',
+  'Reflect',
+  'RegExp',
+  'Set',
+  'SharedArrayBuffer',
+  'String',
+  'Symbol',
+  'SyntaxError',
+  'TypeError',
+  'Uint16Array',
+  'Uint32Array',
+  'Uint8Array',
+  'Uint8ClampedArray',
+  'URIError',
+  'WeakMap',
+  'WeakRef',
+  'WeakSet',
+  'arguments',
+  'decodeURI',
+  'decodeURIComponent',
+  'encodeURI',
+  'encodeURIComponent',
+  'escape',
+  'eval',
+  'globalThis',
+  'isFinite',
+  'isNaN',
+  'parseFloat',
+  'parseInt',
+  'undefined',
+  'unescape',
+]);
+
+const unboundNames = (code: string) =>
+  new Set(
+    [...analyzeScopes(parseFragment(code).program).unbound].filter((name) => !ES_BUILTINS.has(name))
   );
-  const names = new Set<string>();
-  traverse(wrapped, {
-    ReferencedIdentifier(path) {
-      if (!path.scope.hasBinding(path.node.name)) {
-        names.add(path.node.name);
-      }
-    },
-  });
-  return names;
-};
diff --git a/code/core/src/csf-tools/story-shape/resolve-members.test.ts b/code/core/src/csf-tools/story-shape/resolve-members.test.ts
index 306d1bd471aa..154b7a81f999 100644
--- a/code/core/src/csf-tools/story-shape/resolve-members.test.ts
+++ b/code/core/src/csf-tools/story-shape/resolve-members.test.ts
@@ -1,10 +1,9 @@
 import { describe, expect, it } from 'vitest';
 
-import { types as t } from 'storybook/internal/babel';
-
 import { dedent } from 'ts-dedent';
 
-import { babelParseFile } from '../CsfFile.ts';
+import { expressionFromSource, isStringLiteral } from '../estree/ast.ts';
+import { SourceEditor } from '../estree/editor.ts';
 import { isSelfContained } from './resolve-arg-value.ts';
 import {
   type ReferenceContext,
@@ -15,8 +14,12 @@ import {
   sourceOf,
 } from './resolve-members.ts';
 
+const indexed = (editor: SourceEditor) => {
+  editor.parentOf(editor.program);
+  return editor;
+};
 const moduleOf = (code: string, filePath: string): ReferenceModule => ({
-  program: babelParseFile({ code, filename: filePath }).path,
+  editor: indexed(new SourceEditor(code, filePath)),
   filePath,
 });
 
@@ -644,7 +647,7 @@ describe('externalize', () => {
         `,
       },
       'entry.ts',
-      (node) => (t.isStringLiteral(node) ? node : undefined)
+      (node) => (isStringLiteral(node) ? node : undefined)
     );
     expect(argsOf('', 'Reuse', ctx)).toEqual({ args: {}, unresolved: ['...shared'] });
   });
@@ -652,10 +655,7 @@ describe('externalize', () => {
 
 describe('resolveReferencedValue', () => {
   const valueOf = (ctx: ReferenceContext, expression: string) => {
-    const node = (
-      babelParseFile({ code: `(${expression})`, filename: 'probe.ts' }).ast.program
-        .body[0] as t.ExpressionStatement
-    ).expression;
+    const node = expressionFromSource(expression);
     const resolved = resolveReferencedValue(ctx, node);
     return resolved && { value: sourceOf(resolved.node), filePath: resolved.ctx.filePath };
   };
diff --git a/code/core/src/csf-tools/story-shape/resolve-members.ts b/code/core/src/csf-tools/story-shape/resolve-members.ts
index 6b60f05700ac..e420e6b0fa88 100644
--- a/code/core/src/csf-tools/story-shape/resolve-members.ts
+++ b/code/core/src/csf-tools/story-shape/resolve-members.ts
@@ -1,7 +1,7 @@
 // Follows the references a story hides its config behind: a spread of a constant, of a sibling
 // story, or of something another module owns, applying every write in the order it runs.
-import { generate, type NodePath, types as t } from 'storybook/internal/babel';
-
+import { type E, type Node, expressionFromSource, isStringLiteral, textOf } from '../estree/ast.ts';
+import type { SourceEditor } from '../estree/editor.ts';
 import { importedName, isTypeSpecifier } from './imports.ts';
 import {
   csfFactoryReceiver,
@@ -10,11 +10,15 @@ import {
   keyOf,
   unwrapExpression,
 } from './utils.ts';
+import { isFunction } from '../estree/ast.ts';
 
 /** Members of an object, and what reading it statically could not account for. */
 export interface ResolvedMembers {
-  /** Member name → value node, as of the last write this pass could read. */
-  properties: Record<string, t.Node>;
+  /**
+   * Member name → value node, as of the last write this pass could read. A method keeps its whole
+   * `Property` node, so it stays distinguishable from a property holding a function.
+   */
+  properties: Record<string, Node>;
   /**
    * Names whose value an `unresolved` entry written after them may replace at runtime. A member
    * absent from `properties` is only knowably absent when `unresolved` is empty.
@@ -26,8 +30,8 @@ export interface ResolvedMembers {
 
 /** A module a reference reaches into, parsed and paired with the path it was read from. */
 export interface ReferenceModule {
-  program: NodePath<t.Program>;
-  /** Absolute path `program` was parsed from; the base every import specifier resolves against. */
+  editor: SourceEditor;
+  /** Absolute path `editor` was parsed from; the base every import specifier resolves against. */
   filePath: string;
 }
 
@@ -43,7 +47,7 @@ export interface ReferenceContext extends ReferenceModule {
    * was written as means nothing where the snippet lands. Returning `undefined` rejects the value,
    * leaving the reference that reached it unresolved.
    */
-  externalize?: (node: t.Node) => t.Node | undefined;
+  externalize?: (node: Node) => Node | undefined;
 }
 
 /** The half of a {@link ReferenceContext} that is not specific to one story file. */
@@ -55,16 +59,27 @@ export interface StoryReferences extends StoryReferenceResolver {
   filePath: string;
 }
 
-/** Source text of a node, for naming an expression a static pass could not read. */
-export const sourceOf = (node: t.Node): string =>
-  generate(node, { concise: true, comments: false }).code;
+/** Source text of a node exactly as written, for printing it or building code around it. */
+export const codeOf = (node: Node): string => {
+  const text = textOf(node);
+  if (text === undefined) {
+    throw new Error(`Cannot print a ${node.type} node whose source is unknown`);
+  }
+  return text;
+};
+
+/** Source text of a node on one line, for naming an expression a static pass could not read. */
+export const sourceOf = (node: Node): string => codeOf(node).replace(/\s*\n\s*/g, ' ');
 
-const complete = (properties: Record<string, t.Node> = {}): ResolvedMembers => ({
+const complete = (properties: Record<string, Node> = {}): ResolvedMembers => ({
   properties,
   shadowed: [],
   unresolved: [],
 });
 
+const isMethod = (node: Node): node is E.ObjectProperty =>
+  node.type === 'Property' && (node.method || node.kind !== 'init');
+
 /**
  * Members of an object literal, absorbing every spread the context can follow.
  *
@@ -72,7 +87,7 @@ const complete = (properties: Record<string, t.Node> = {}): ResolvedMembers => (
  * or generator does not, because reading it runs code.
  */
 export const resolveObjectMembers = (
-  object: t.ObjectExpression,
+  object: E.ObjectExpression,
   ctx: ReferenceContext
 ): ResolvedMembers => membersOf(object, ctx, new Set());
 
@@ -83,25 +98,31 @@ export const resolveObjectMembers = (
  * is reported rather than kept, wherever a spread copied it from.
  */
 export const resolveArgsRecord = (
-  node: t.Node | undefined,
+  node: Node | undefined,
   ctx: ReferenceContext
 ): ResolvedMembers => {
   if (node === undefined) {
     return complete();
   }
   const unwrapped = unwrapExpression(node);
-  if (t.isObjectExpression(unwrapped)) {
+  if (unwrapped.type === 'ObjectExpression') {
     return asArgsRecord(membersOf(unwrapped, ctx, new Set()));
   }
   // `args: shared` names its record instead of writing one, which reads the same as spreading it.
-  const referenced = resolveReference(ctx, unwrapped, node.start ?? undefined, new Set());
+  const referenced = resolveReference(ctx, unwrapped, startOf(node), new Set());
   return referenced
     ? asArgsRecord(referenced)
-    : { properties: {}, shadowed: [], unresolved: [`args: ${sourceOf(unwrapped)}`] };
+    : {
+        properties: {},
+        shadowed: [],
+        unresolved: [`args: ${sourceOf(unwrapped)}`],
+      };
 };
 
+const startOf = (node: Node) => (node as Node & { start: number }).start;
+
 const asArgsRecord = (members: ResolvedMembers): ResolvedMembers => {
-  const methods = Object.entries(members.properties).filter(([, node]) => t.isObjectMethod(node));
+  const methods = Object.entries(members.properties).filter(([, node]) => isMethod(node));
   if (methods.length === 0) {
     return members;
   }
@@ -142,8 +163,8 @@ export const resolveBindingMembers = (
  */
 export const resolveReferencedValue = (
   ctx: ReferenceContext,
-  expression: t.Node
-): { node: t.Node; ctx: ReferenceContext } | undefined => {
+  expression: Node
+): { node: Node; ctx: ReferenceContext } | undefined => {
   const chain = memberChain(expression);
   if (!chain || chain.path.length === 0) {
     return undefined;
@@ -171,7 +192,7 @@ export const resolveReferencedValue = (
       return { node: value, ctx: scope };
     }
     const unwrapped = unwrapExpression(value);
-    if (!t.isObjectExpression(unwrapped)) {
+    if (unwrapped.type !== 'ObjectExpression') {
       return undefined;
     }
     members = membersOf(unwrapped, scope, visited);
@@ -181,11 +202,11 @@ export const resolveReferencedValue = (
 };
 
 const membersOf = (
-  object: t.ObjectExpression,
+  object: E.ObjectExpression,
   ctx: ReferenceContext,
   visited: Set<string>
 ): ResolvedMembers => {
-  const properties: Record<string, t.Node> = {};
+  const properties: Record<string, Node> = {};
   const unresolved: string[] = [];
   const shadowed = new Set<string>();
 
@@ -199,7 +220,7 @@ const membersOf = (
   };
 
   for (const property of object.properties) {
-    if (t.isSpreadElement(property)) {
+    if (property.type === 'SpreadElement') {
       const spread = spreadMembers(ctx, property, visited);
       if (spread === undefined || spread.unresolved.length > 0) {
         shadowKnownMembers(sourceOf(property));
@@ -220,7 +241,7 @@ const membersOf = (
       shadowKnownMembers(sourceOf(property));
       continue;
     }
-    if (t.isObjectMethod(property) && (property.kind !== 'method' || property.generator)) {
+    if (property.kind !== 'init' || (property.method && (property.value as E.Function).generator)) {
       // An accessor or generator replaces exactly the member it names, with a value only running
       // the story produces.
       delete properties[key];
@@ -228,7 +249,7 @@ const membersOf = (
       unresolved.push(sourceOf(property));
       continue;
     }
-    properties[key] = t.isObjectMethod(property) ? property : property.value;
+    properties[key] = property.method ? property : property.value;
     shadowed.delete(key);
   }
 
@@ -238,24 +259,24 @@ const membersOf = (
 /** The object a spread copies from, whether it is written out or named. */
 const spreadMembers = (
   ctx: ReferenceContext,
-  spread: t.SpreadElement,
+  spread: E.SpreadElement,
   visited: Set<string>
 ): ResolvedMembers | undefined => {
   const argument = unwrapExpression(spread.argument);
-  return t.isObjectExpression(argument)
+  return argument.type === 'ObjectExpression'
     ? membersOf(argument, ctx, visited)
-    : resolveReference(ctx, argument, spread.start ?? undefined, visited);
+    : resolveReference(ctx, argument, startOf(spread), visited);
 };
 
 /** A member chain of statically-known keys, like `HeaderStories.LoggedIn.input.args`. */
-const memberChain = (node: t.Node): { root: string; path: string[] } | undefined => {
+const memberChain = (node: Node): { root: string; path: string[] } | undefined => {
   const path: string[] = [];
   let current = unwrapExpression(node);
-  while (t.isMemberExpression(current)) {
+  while (current.type === 'MemberExpression') {
     const key =
-      t.isIdentifier(current.property) && !current.computed
+      current.property.type === 'Identifier' && !current.computed
         ? current.property.name
-        : t.isStringLiteral(current.property)
+        : isStringLiteral(current.property)
           ? current.property.value
           : undefined;
     if (key === undefined) {
@@ -264,7 +285,7 @@ const memberChain = (node: t.Node): { root: string; path: string[] } | undefined
     path.unshift(key);
     current = unwrapExpression(current.object);
   }
-  return t.isIdentifier(current) ? { root: current.name, path } : undefined;
+  return current.type === 'Identifier' ? { root: current.name, path } : undefined;
 };
 
 /**
@@ -276,7 +297,7 @@ const memberChain = (node: t.Node): { root: string; path: string[] } | undefined
  */
 const resolveReference = (
   ctx: ReferenceContext,
-  expression: t.Node,
+  expression: Node,
   position: number | undefined,
   visited: Set<string>
 ): ResolvedMembers | undefined => {
@@ -322,7 +343,7 @@ const unguardedResolveReference = (
       return index === located.path.length - 1 ? complete() : undefined;
     }
     const unwrapped = unwrapExpression(value);
-    if (!t.isObjectExpression(unwrapped)) {
+    if (unwrapped.type !== 'ObjectExpression') {
       return undefined;
     }
     members = membersOf(unwrapped, scope, visited);
@@ -393,7 +414,7 @@ const externalized = (
   if (!ctx.externalize) {
     return members;
   }
-  const properties: Record<string, t.Node> = {};
+  const properties: Record<string, Node> = {};
   for (const [key, node] of Object.entries(members.properties)) {
     const value = ctx.externalize(node);
     if (value === undefined) {
@@ -443,13 +464,13 @@ const unguardedBindingMembers = (
   position: number | undefined,
   visited: Set<string>
 ): BoundMembers | undefined => {
-  const binding = ctx.program.scope.getBinding(name);
+  const binding = ctx.editor.scopes.program.bindings.get(name);
   if (!binding) {
     return undefined;
   }
 
-  if (binding.kind === 'module') {
-    return importedBinding(ctx, binding.path, visited);
+  if (binding.kind === 'import') {
+    return importedBinding(ctx, binding.node, binding.declaration, visited);
   }
 
   if (!binding.constant) {
@@ -457,10 +478,10 @@ const unguardedBindingMembers = (
   }
 
   const rootName = localAliasRoot(ctx, name);
-  const rootBinding = ctx.program.scope.getBinding(rootName);
+  const rootBinding = ctx.editor.scopes.program.bindings.get(rootName);
   const declared = declaredBindingMembers(
     ctx,
-    rootBinding?.path.node ?? binding.path.node,
+    rootBinding?.node ?? binding.node,
     position,
     visited
   );
@@ -485,18 +506,18 @@ const unguardedBindingMembers = (
 
 const declaredBindingMembers = (
   ctx: ReferenceContext,
-  node: t.Node,
+  node: Node,
   position: number | undefined,
   visited: Set<string>
 ): { members: ResolvedMembers; accessor?: 'input' } | undefined => {
-  if (t.isFunctionDeclaration(node)) {
+  if (node.type === 'FunctionDeclaration') {
     // Hoisted, so it is readable at any position; the CSF2 form gives it members by assignment.
     return { members: complete() };
   }
-  if (!t.isVariableDeclarator(node)) {
+  if (node.type !== 'VariableDeclarator' || node.id.type !== 'Identifier') {
     return undefined;
   }
-  if (position !== undefined && (node.start ?? Number.POSITIVE_INFINITY) > position) {
+  if (position !== undefined && node.start > position) {
     return undefined;
   }
   return node.init ? declaredMembers(ctx, node.init, position, visited) : { members: complete() };
@@ -505,34 +526,41 @@ const declaredBindingMembers = (
 /** Members an initializer declares, plus the accessor a CSF factory keeps them behind. */
 const declaredMembers = (
   ctx: ReferenceContext,
-  init: t.Expression,
+  init: E.Expression,
   position: number | undefined,
   visited: Set<string>
 ): { members: ResolvedMembers; accessor?: 'input' } | undefined => {
   const unwrapped = unwrapExpression(init);
 
-  if (t.isObjectExpression(unwrapped)) {
+  if (unwrapped.type === 'ObjectExpression') {
     return { members: membersOf(unwrapped, ctx, visited) };
   }
 
   const factory = factoryCall(unwrapped);
-  if (factory === undefined && (t.isFunction(unwrapped) || isCanonicalCsf2BindCall(unwrapped))) {
+  if (factory === undefined && (isFunction(unwrapped) || isCanonicalCsf2BindCall(unwrapped))) {
     return { members: complete() };
   }
-  if (t.isIdentifier(unwrapped)) {
+  if (unwrapped.type === 'Identifier') {
     const referenced = bindingMembers(ctx, unwrapped.name, position, visited);
     if (referenced?.kind === 'members') {
       const members = referenced.external
         ? ctx.externalize && externalized(referenced.members, referenced.ctx)
         : referenced.members;
       if (members) {
-        return { members, ...(referenced.accessor ? { accessor: referenced.accessor } : {}) };
+        return {
+          members,
+          ...(referenced.accessor ? { accessor: referenced.accessor } : {}),
+        };
       }
     }
   }
   if (factory === undefined) {
     return {
-      members: { properties: {}, shadowed: [], unresolved: [sourceOf(unwrapped)] },
+      members: {
+        properties: {},
+        shadowed: [],
+        unresolved: [sourceOf(unwrapped)],
+      },
     };
   }
 
@@ -569,22 +597,24 @@ const declaredMembers = (
 /** Annotations `extend` merges per key rather than replacing outright. */
 const MERGED_ANNOTATIONS = ['args', 'argTypes', 'parameters', 'globals'];
 
+/** Name a chain of constant local aliases (`const Alias = Base`) bottoms out at. */
 const localAliasRoot = (ctx: ReferenceContext, name: string): string => {
+  const { bindings } = ctx.editor.scopes.program;
   const visited = new Set<string>();
   let current = name;
   while (!visited.has(current)) {
     visited.add(current);
-    const binding = ctx.program.scope.getBinding(current);
-    const node = binding?.path.node;
-    if (!binding?.constant || !t.isVariableDeclarator(node) || !node.init) {
+    const binding = bindings.get(current);
+    const node = binding?.node;
+    if (!binding?.constant || node?.type !== 'VariableDeclarator' || !node.init) {
       break;
     }
     const init = unwrapExpression(node.init);
-    if (!t.isIdentifier(init)) {
+    if (init.type !== 'Identifier') {
       break;
     }
-    const target = ctx.program.scope.getBinding(init.name);
-    if (!target?.constant || target.kind === 'module') {
+    const target = bindings.get(init.name);
+    if (!target?.constant || target.kind === 'import') {
       break;
     }
     current = init.name;
@@ -592,11 +622,12 @@ const localAliasRoot = (ctx: ReferenceContext, name: string): string => {
   return current;
 };
 
+/** Every name aliasing `root`, mapped to where it starts aliasing it. */
 const localAliases = (ctx: ReferenceContext, root: string): Map<string, number> => {
   const aliases = new Map<string, number>([[root, Number.NEGATIVE_INFINITY]]);
-  for (const [name, binding] of Object.entries(ctx.program.scope.bindings)) {
+  for (const [name, binding] of ctx.editor.scopes.program.bindings) {
     if (name !== root && binding.constant && localAliasRoot(ctx, name) === root) {
-      aliases.set(name, binding.path.node.start ?? Number.POSITIVE_INFINITY);
+      aliases.set(name, (binding.node as { start?: number }).start ?? Number.POSITIVE_INFINITY);
     }
   }
   return aliases;
@@ -613,30 +644,34 @@ const localAliases = (ctx: ReferenceContext, root: string): Map<string, number>
 const mergedAnnotations = (
   parent: Pick<ResolvedMembers, 'properties'>,
   child: Pick<ResolvedMembers, 'properties'>
-): { properties: Record<string, t.Node> } => {
+): { properties: Record<string, Node> } => {
   const properties = { ...parent.properties, ...child.properties };
 
   for (const key of MERGED_ANNOTATIONS) {
     const from = parent.properties[key];
     const over = child.properties[key];
-    if (
-      from === undefined ||
-      over === undefined ||
-      !t.isExpression(from) ||
-      !t.isExpression(over)
-    ) {
+    if (from === undefined || over === undefined || isMethod(from) || isMethod(over)) {
       continue;
     }
-    properties[key] = t.objectExpression([t.spreadElement(from), t.spreadElement(over)]);
+    properties[key] = spreadPair(from, over);
   }
 
   return { properties };
 };
 
+// The spreads point at the original nodes, so each still resolves in the scope it was written in.
+const spreadPair = (from: Node, over: Node): E.ObjectExpression => {
+  const merged = expressionFromSource(`{ ...${codeOf(from)}, ...${codeOf(over)} }`);
+  const object = unwrapExpression(merged) as E.ObjectExpression;
+  (object.properties[0] as E.SpreadElement).argument = from as E.Expression;
+  (object.properties[1] as E.SpreadElement).argument = over as E.Expression;
+  return object;
+};
+
 /** A CSF factory call, which holds its config behind `input` rather than as its own members. */
 const factoryCall = (
-  node: t.Node
-): { method: 'story' | 'extend'; parent: string; config?: t.ObjectExpression } | undefined => {
+  node: Node
+): { method: 'story' | 'extend'; parent: string; config?: E.ObjectExpression } | undefined => {
   if (!isCsfFactoryCall(node)) {
     return undefined;
   }
@@ -646,13 +681,13 @@ const factoryCall = (
   }
   const [argument] = node.arguments;
   const config = argument && unwrapExpression(argument);
-  if (argument !== undefined && (config === undefined || !t.isObjectExpression(config))) {
+  if (argument !== undefined && config?.type !== 'ObjectExpression') {
     return undefined;
   }
   return {
     method,
     parent: csfFactoryReceiver(node).name,
-    ...(config && t.isObjectExpression(config) ? { config } : {}),
+    ...(config?.type === 'ObjectExpression' ? { config } : {}),
   };
 };
 
@@ -668,37 +703,40 @@ const assignedMembers = (
   aliases: Map<string, number>,
   position: number | undefined
 ): {
-  properties: Record<string, t.Node>;
+  properties: Record<string, Node>;
   unresolved: string[];
 } => {
-  const properties: Record<string, t.Node> = {};
+  const properties: Record<string, Node> = {};
   const unresolved: string[] = [];
 
-  for (const statement of ctx.program.node.body) {
-    if (!t.isExpressionStatement(statement) || !t.isAssignmentExpression(statement.expression)) {
+  for (const statement of ctx.editor.program.body) {
+    if (
+      statement.type !== 'ExpressionStatement' ||
+      statement.expression.type !== 'AssignmentExpression'
+    ) {
       continue;
     }
     const assignment = statement.expression;
-    let target: t.Node = assignment.left;
+    let target: Node = assignment.left;
     let depth = 0;
     let outermost: string | undefined;
-    while (t.isMemberExpression(target)) {
+    while (target.type === 'MemberExpression') {
       depth += 1;
       outermost =
-        t.isIdentifier(target.property) && !target.computed
+        target.property.type === 'Identifier' && !target.computed
           ? target.property.name
-          : t.isStringLiteral(target.property)
+          : isStringLiteral(target.property)
             ? target.property.value
             : undefined;
       target = target.object;
     }
-    if (depth === 0 || !t.isIdentifier(target) || !aliases.has(target.name)) {
+    if (depth === 0 || target.type !== 'Identifier' || !aliases.has(target.name)) {
       continue;
     }
-    if ((assignment.start ?? 0) < aliases.get(target.name)!) {
+    if (assignment.start < aliases.get(target.name)!) {
       continue;
     }
-    if (position !== undefined && (assignment.start ?? 0) > position) {
+    if (position !== undefined && assignment.start > position) {
       continue;
     }
     if (depth > 1 || outermost === undefined || assignment.operator !== '=') {
@@ -713,18 +751,17 @@ const assignedMembers = (
 
 const importedBinding = (
   ctx: ReferenceContext,
-  specifierPath: NodePath<t.Node>,
+  specifier: Node,
+  declaration: Node | undefined,
   visited: Set<string>
 ): BoundMembers | undefined => {
-  const specifier = specifierPath.node;
-  const declaration = specifierPath.parent;
   if (
-    !t.isImportDeclaration(declaration) ||
+    declaration?.type !== 'ImportDeclaration' ||
     declaration.importKind === 'type' ||
     !(
-      t.isImportSpecifier(specifier) ||
-      t.isImportDefaultSpecifier(specifier) ||
-      t.isImportNamespaceSpecifier(specifier)
+      specifier.type === 'ImportSpecifier' ||
+      specifier.type === 'ImportDefaultSpecifier' ||
+      specifier.type === 'ImportNamespaceSpecifier'
     ) ||
     isTypeSpecifier(specifier)
   ) {
@@ -736,13 +773,12 @@ const importedBinding = (
     return undefined;
   }
 
-  if (t.isImportNamespaceSpecifier(specifier)) {
+  if (specifier.type === 'ImportNamespaceSpecifier') {
     return { kind: 'namespace', ctx: target };
   }
 
-  const exportName = t.isImportDefaultSpecifier(specifier)
-    ? 'default'
-    : importedName(specifier.imported);
+  const exportName =
+    specifier.type === 'ImportDefaultSpecifier' ? 'default' : importedName(specifier.imported);
   return exportedBinding(target, exportName, visited);
 };
 
@@ -763,13 +799,13 @@ const exportedBinding = (
   const asExternal = (bound: BoundMembers | undefined) =>
     bound === undefined || bound.kind === 'namespace' ? bound : { ...bound, external: true };
 
-  for (const statement of ctx.program.node.body) {
-    if (t.isExportDefaultDeclaration(statement) && exportName === 'default') {
-      const declaration = unwrapExpression(statement.declaration);
-      if (t.isIdentifier(declaration)) {
+  for (const statement of ctx.editor.program.body) {
+    if (statement.type === 'ExportDefaultDeclaration' && exportName === 'default') {
+      const declaration = unwrapExpression(statement.declaration as Node);
+      if (declaration.type === 'Identifier') {
         return asExternal(bindingMembers(ctx, declaration.name, undefined, visited));
       }
-      return t.isObjectExpression(declaration)
+      return declaration.type === 'ObjectExpression'
         ? {
             kind: 'members',
             ctx,
@@ -779,16 +815,14 @@ const exportedBinding = (
         : undefined;
     }
 
-    if (!t.isExportNamedDeclaration(statement) || statement.exportKind === 'type') {
+    if (statement.type !== 'ExportNamedDeclaration' || statement.exportKind === 'type') {
       continue;
     }
     const specifier = statement.specifiers.find(
-      (candidate): candidate is t.ExportSpecifier =>
-        t.isExportSpecifier(candidate) &&
-        candidate.exportKind !== 'type' &&
-        importedName(candidate.exported) === exportName
+      (candidate) =>
+        candidate.exportKind !== 'type' && importedName(candidate.exported) === exportName
     );
-    if (!specifier) {
+    if (!specifier || specifier.local.type !== 'Identifier') {
       continue;
     }
     if (!statement.source) {
diff --git a/code/core/src/csf-tools/story-shape/resolve-story-args.ts b/code/core/src/csf-tools/story-shape/resolve-story-args.ts
index 6af949e0ab30..7c2a3449e451 100644
--- a/code/core/src/csf-tools/story-shape/resolve-story-args.ts
+++ b/code/core/src/csf-tools/story-shape/resolve-story-args.ts
@@ -1,9 +1,8 @@
 // The one choreography every renderer's snippet generator shares: resolve the meta's members once,
 // resolve each story's binding, merge their args, and read every value through to something that
 // means the same where the snippet lands.
-import { types as t } from 'storybook/internal/babel';
-
 import type { CsfFile } from '../CsfFile.ts';
+import type { Node } from '../estree/ast.ts';
 import { type ImportRef } from './import-statements.ts';
 import { resolveArgValue } from './resolve-arg-value.ts';
 import {
@@ -19,7 +18,7 @@ import {
 /** Everything reading one story's args statically produced. */
 export interface ResolvedStoryArgs {
   /** Meta args merged under story args, keyed by arg name, every value read through. */
-  args: Record<string, t.Node>;
+  args: Record<string, Node>;
   /** Imports the arg values need beyond the component, from values that kept a name. */
   imports: ImportRef[];
   /** Source text of everything hiding args from this pass; empty when the merged args are known. */
@@ -46,17 +45,18 @@ export function createStoryArgsResolver(
   csf: CsfFile,
   references?: StoryReferences
 ): StoryArgsResolver {
+  // Index the story file so its nodes print as written wherever a resolution carries them.
+  csf._editor.parentOf(csf._program);
   const ctx: ReferenceContext = {
-    program: csf._file.path,
-    filePath: csf._file.opts.filename ?? '',
+    editor: csf._editor,
+    filePath: csf._options.fileName ?? '',
     ...references,
   };
 
-  const metaNode = csf._metaNode;
-  const metaMembers =
-    metaNode && t.isObjectExpression(metaNode)
-      ? resolveObjectMembers(metaNode, ctx)
-      : { properties: {}, shadowed: [], unresolved: [] };
+  const metaNode = csf._metaNodeIsSynthetic ? undefined : csf._metaNode;
+  const metaMembers = metaNode
+    ? resolveObjectMembers(metaNode, ctx)
+    : { properties: {}, shadowed: [], unresolved: [] };
   const metaArgs = resolveArgsRecord(metaMembers.properties.args, ctx);
 
   return {
@@ -67,11 +67,15 @@ export function createStoryArgsResolver(
       const storyMembers = resolveBindingMembers(ctx, localName) ?? {
         properties: {},
         shadowed: [],
-        unresolved: [sourceOf(csf._storyStatements[storyExport] ?? t.identifier(storyExport))],
+        unresolved: [
+          csf._storyStatements[storyExport]
+            ? sourceOf(csf._storyStatements[storyExport])
+            : storyExport,
+        ],
       };
       const storyArgs = resolveArgsRecord(storyMembers.properties.args, ctx);
 
-      const args: Record<string, t.Node> = {};
+      const args: Record<string, Node> = {};
       const imports: ImportRef[] = [];
       const unresolved = [
         ...metaMembers.unresolved,
diff --git a/code/core/src/csf-tools/story-shape/utils.test.ts b/code/core/src/csf-tools/story-shape/utils.test.ts
index 382b9a635bc6..fb9c8ffef545 100644
--- a/code/core/src/csf-tools/story-shape/utils.test.ts
+++ b/code/core/src/csf-tools/story-shape/utils.test.ts
@@ -1,106 +1,37 @@
 import { describe, expect, it } from 'vitest';
 
-import { recast, types as t } from 'storybook/internal/babel';
-
 import { dedent } from 'ts-dedent';
 
-import { babelParseFile, loadCsf } from '../CsfFile.ts';
-import type { RenderFunctionPath } from './render.ts';
+import { loadCsf } from '../CsfFile.ts';
+import { type E, type Node, expressionFromSource, textOf } from '../estree/ast.ts';
 import {
   csfFactoryReceiver,
   isCanonicalCsf2BindCall,
   isCsfFactoryCall,
   keyOf,
-  metaObjectPath,
+  metaObject,
   resolveIdentifierInit,
   returnedExpression,
-  returnedExpressionPath,
   unwrapExpression,
 } from './utils.ts';
 
 const parse = (code: string) => {
-  return loadCsf(code, { makeTitle: (title) => title ?? 'title' }).parse();
+  const csf = loadCsf(code, { makeTitle: (title) => title ?? 'title' }).parse();
+  csf._editor.parentOf(csf._program);
+  return csf;
 };
 
-const storyInitializer = (initializer: string): t.Node => {
-  let found: t.Expression | null | undefined;
-  babelParseFile({ code: `const A = ${initializer};` }).path.traverse({
-    VariableDeclarator(path) {
-      if (t.isIdentifier(path.node.id, { name: 'A' })) {
-        found = path.node.init;
-        path.stop();
-      }
-    },
-  });
+const printed = (node: Node) => textOf(node);
 
+const renderFunction = (code: string): Node => {
+  const csf = parse(code);
+  const found = resolveIdentifierInit(csf._program, 'render');
   if (!found) {
-    throw new Error('Expected declaration to have an initializer');
+    throw new Error('Expected a render function');
   }
   return found;
 };
 
-// Recast may emit CRLF on Windows; keep assertions LF-stable across OSes.
-const printed = (node: t.Node) => recast.print(node).code.replace(/\r\n/g, '\n');
-
-const storyBindIdentifier = (code: string) => {
-  const storyPath = parse(code)._storyDeclarationPath['A'];
-
-  if (!storyPath.isVariableDeclarator()) {
-    throw new Error('Expected story declaration to be a variable declarator');
-  }
-
-  const init = storyPath.get('init');
-  if (!init.isCallExpression()) {
-    throw new Error('Expected story initializer to be a call expression');
-  }
-
-  const callee = init.get('callee');
-  if (!callee.isMemberExpression()) {
-    throw new Error('Expected story initializer callee to be a member expression');
-  }
-
-  const object = callee.get('object');
-  if (!object.isIdentifier()) {
-    throw new Error('Expected bind callee object to be an identifier');
-  }
-
-  return {
-    identifier: object,
-    storyPath,
-  };
-};
-
-const renderFunctionPath = (code: string): RenderFunctionPath => {
-  let found: RenderFunctionPath | undefined;
-
-  parse(code)._file.path.traverse({
-    FunctionDeclaration(path) {
-      if (path.node.id?.name === 'render') {
-        found = path;
-        path.stop();
-      }
-    },
-    VariableDeclarator(path) {
-      const id = path.get('id');
-      const init = path.get('init');
-
-      if (
-        id.isIdentifier({ name: 'render' }) &&
-        (init.isArrowFunctionExpression() || init.isFunctionExpression())
-      ) {
-        found = init;
-        path.stop();
-      }
-    },
-  });
-
-  if (!found) {
-    throw new Error('Expected a render function path');
-  }
-
-  return found;
-};
-
 describe('isCanonicalCsf2BindCall', () => {
   it('accepts only an identifier .bind call with no configuration', () => {
     expect(
@@ -111,35 +42,18 @@ describe('isCanonicalCsf2BindCall', () => {
         "Template['bind']({})",
         'Template[bind]({})',
         'makeStory({})',
-      ].map((initializer) => [initializer, isCanonicalCsf2BindCall(storyInitializer(initializer))])
-    ).toMatchInlineSnapshot(`
-      [
-        [
-          "Template.bind()",
-          true,
-        ],
-        [
-          "Template.bind({})",
-          true,
-        ],
-        [
-          "Template.bind({ role: 'button' })",
-          false,
-        ],
-        [
-          "Template['bind']({})",
-          false,
-        ],
-        [
-          "Template[bind]({})",
-          false,
-        ],
-        [
-          "makeStory({})",
-          false,
-        ],
-      ]
-    `);
+      ].map((initializer) => [
+        initializer,
+        isCanonicalCsf2BindCall(expressionFromSource(initializer)),
+      ])
+    ).toEqual([
+      ['Template.bind()', true],
+      ['Template.bind({})', true],
+      ["Template.bind({ role: 'button' })", false],
+      ["Template['bind']({})", false],
+      ['Template[bind]({})', false],
+      ['makeStory({})', false],
+    ]);
   });
 });
 
@@ -159,63 +73,25 @@ describe('isCsfFactoryCall', () => {
         "schema.type('string').story({})",
         'makeStory({})',
         'Template.bind({})',
-      ].map((initializer) => [initializer, isCsfFactoryCall(storyInitializer(initializer))])
-    ).toMatchInlineSnapshot(`
-      [
-        [
-          "meta.story({})",
-          true,
-        ],
-        [
-          "meta.type<{ args: { icon: string } }>().story({})",
-          true,
-        ],
-        [
-          "meta.type<A>().type<B>().story({})",
-          true,
-        ],
-        [
-          "Base.extend({})",
-          true,
-        ],
-        [
-          "meta['story']({})",
-          false,
-        ],
-        [
-          "meta[story]({})",
-          false,
-        ],
-        [
-          "getMeta().story({})",
-          false,
-        ],
-        [
-          "getMeta().type<A>().story({})",
-          false,
-        ],
-        [
-          "meta['type']<A>().story({})",
-          false,
-        ],
-        [
-          "schema.type('string').story({})",
-          false,
-        ],
-        [
-          "makeStory({})",
-          false,
-        ],
-        [
-          "Template.bind({})",
-          false,
-        ],
-      ]
-    `);
+      ].map((initializer) => [initializer, isCsfFactoryCall(expressionFromSource(initializer))])
+    ).toEqual([
+      ['meta.story({})', true],
+      ['meta.type<{ args: { icon: string } }>().story({})', true],
+      ['meta.type<A>().type<B>().story({})', true],
+      ['Base.extend({})', true],
+      ["meta['story']({})", false],
+      ['meta[story]({})', false],
+      ['getMeta().story({})', false],
+      ['getMeta().type<A>().story({})', false],
+      ["meta['type']<A>().story({})", false],
+      ["schema.type('string').story({})", false],
+      ['makeStory({})', false],
+      ['Template.bind({})', false],
+    ]);
   });
 
   it('reads the receiver through meta.type<>()', () => {
-    const call = storyInitializer('meta.type<A>().type<B>().story({})');
+    const call = expressionFromSource('meta.type<A>().type<B>().story({})');
 
     expect(isCsfFactoryCall(call) && csfFactoryReceiver(call).name).toBe('meta');
   });
@@ -223,7 +99,7 @@ describe('isCsfFactoryCall', () => {
 
 describe('keyOf', () => {
   it('returns literal object member keys and skips dynamic keys', () => {
-    const meta = metaObjectPath(
+    const meta = metaObject(
       parse(dedent`
         const computed = 'dynamic';
         const spread = {};
@@ -241,8 +117,8 @@ describe('keyOf', () => {
       `)
     );
 
-    const keys = meta?.node.properties.map((property) =>
-      t.isSpreadElement(property) ? null : keyOf(property)
+    const keys = meta?.properties.map((property) =>
+      property.type === 'SpreadElement' ? null : keyOf(property)
     );
 
     expect(keys).toEqual([
@@ -260,44 +136,30 @@ describe('keyOf', () => {
 });
 
 describe('unwrapExpression', () => {
-  const typeAnnotation = t.tsTypeReference(t.identifier('Story'));
-
-  it('unwraps TypeScript expression wrappers and parentheses', () => {
-    const value = t.objectExpression([]);
-
-    expect(unwrapExpression(t.tsAsExpression(value, typeAnnotation))).toBe(value);
-    expect(unwrapExpression(t.tsSatisfiesExpression(value, typeAnnotation))).toBe(value);
-    expect(unwrapExpression(t.tsNonNullExpression(value))).toBe(value);
-    expect(unwrapExpression(t.tsTypeAssertion(typeAnnotation, value))).toBe(value);
-    expect(unwrapExpression(t.parenthesizedExpression(value))).toBe(value);
-  });
-
-  it('unwraps nested TypeScript expression wrappers', () => {
-    const value = t.objectExpression([]);
-    const wrapped = t.tsSatisfiesExpression(
-      t.tsNonNullExpression(t.tsAsExpression(value, typeAnnotation)),
-      typeAnnotation
-    );
-
-    expect(unwrapExpression(wrapped)).toBe(value);
-  });
+  it.each(['{} as Story', '{} satisfies Story', '{}!', '({})', '(({} as Story)!) satisfies Story'])(
+    'unwraps %s',
+    (code) => {
+      const wrapped = expressionFromSource(code);
+      expect(unwrapExpression(wrapped).type).toBe('ObjectExpression');
+    }
+  );
 
   it('returns other nodes untouched', () => {
-    const value = t.stringLiteral('Save');
+    const value = expressionFromSource("'Save'");
 
     expect(unwrapExpression(value)).toBe(value);
   });
 });
 
 describe('returnedExpression', () => {
-  const cases = [
+  it.each([
     {
       code: dedent`
         export default { title: 'Button' };
         const render = () => ({ label: 'Save' });
         export const A = {};
       `,
-      expected: "({\n  label: 'Save'\n})",
+      expected: "{ label: 'Save' }",
       name: 'concise arrow body',
     },
     {
@@ -334,106 +196,57 @@ describe('returnedExpression', () => {
       expected: undefined,
       name: 'no-return block',
     },
-  ];
-
-  it.each(cases)('resolves $name', ({ code, expected }) => {
-    const returned = returnedExpression(renderFunctionPath(code).node);
+  ])('resolves $name', ({ code, expected }) => {
+    const returned = returnedExpression(renderFunction(code));
 
     expect(returned ? printed(returned) : undefined).toBe(expected);
   });
 
-  it.each(cases)('resolves $name as a path', ({ code, expected }) => {
-    const returned = returnedExpressionPath(renderFunctionPath(code));
-
-    expect(returned ? printed(returned.node) : undefined).toBe(expected);
-  });
-
   it('resolves an object method body, which `setup()` uses', () => {
-    const [method] = t.objectExpression([
-      t.objectMethod(
-        'method',
-        t.identifier('setup'),
-        [],
-        t.blockStatement([t.returnStatement(t.stringLiteral('Save'))])
-      ),
-    ]).properties;
+    const object = expressionFromSource(`{ setup() { return 'Save'; } }`) as E.ObjectExpression;
 
-    expect(printed(returnedExpression(method)!)).toBe(`"Save"`);
+    expect(printed(returnedExpression(object.properties[0])!)).toBe(`'Save'`);
   });
 });
 
 describe('resolveIdentifierInit', () => {
-  it('resolves local function declarations', () => {
-    const { identifier, storyPath } = storyBindIdentifier(dedent`
-      export default { title: 'Button' };
-      function Template(args) {
-        return args;
-      }
-      export const A = Template.bind({});
-    `);
-
-    const resolved = resolveIdentifierInit(storyPath, identifier);
-
-    expect(resolved?.isFunctionDeclaration()).toBe(true);
-    expect(printed(resolved!.node)).toMatchInlineSnapshot(`
-      "function Template(args) {
-        return args;
-      }"
-    `);
-  });
-
-  it('resolves exported function declarations', () => {
-    const { identifier, storyPath } = storyBindIdentifier(dedent`
-      export default { title: 'Button' };
-      export function Template(args) {
-        return args;
-      }
-      export const A = Template.bind({});
-    `);
+  it.each([
+    ['local', 'function Template(args) {\n  return args;\n}'],
+    ['exported', 'export function Template(args) {\n  return args;\n}'],
+  ])('resolves %s function declarations', (_, declaration) => {
+    const csf = parse(
+      `export default { title: 'Button' };\n${declaration}\nexport const A = Template.bind({});`
+    );
 
-    const resolved = resolveIdentifierInit(storyPath, identifier);
+    const resolved = resolveIdentifierInit(csf._program, 'Template');
 
-    expect(resolved?.isFunctionDeclaration()).toBe(true);
-    expect(printed(resolved!.node)).toMatchInlineSnapshot(`
-      "function Template(args) {
-        return args;
-      }"
-    `);
+    expect(resolved?.type).toBe('FunctionDeclaration');
+    expect(printed(resolved!)).toBe('function Template(args) {\n  return args;\n}');
   });
 
-  it('resolves local and exported const arrow initializers', () => {
-    const local = storyBindIdentifier(dedent`
-      export default { title: 'Button' };
-      const Template = (args) => args;
-      export const A = Template.bind({});
-    `);
-    const exported = storyBindIdentifier(dedent`
+  it.each(['const', 'export const'])('resolves %s arrow initializers', (keyword) => {
+    const csf = parse(dedent`
       export default { title: 'Button' };
-      export const Template = (args) => args;
+      ${keyword} Template = (args) => args;
       export const A = Template.bind({});
     `);
 
-    expect(printed(resolveIdentifierInit(local.storyPath, local.identifier)!.node)).toBe(
-      '(args) => args'
-    );
-    expect(printed(resolveIdentifierInit(exported.storyPath, exported.identifier)!.node)).toBe(
-      '(args) => args'
-    );
+    expect(printed(resolveIdentifierInit(csf._program, 'Template')!)).toBe('(args) => args');
   });
 
   it('returns null for unknown identifiers', () => {
-    const { identifier, storyPath } = storyBindIdentifier(dedent`
+    const csf = parse(dedent`
       export default { title: 'Button' };
       export const A = Template.bind({});
     `);
 
-    expect(resolveIdentifierInit(storyPath, identifier)).toBeNull();
+    expect(resolveIdentifierInit(csf._program, 'Template')).toBeNull();
   });
 });
 
-describe('metaObjectPath', () => {
-  it('returns the object expression path for a parsed CSF meta', () => {
-    const meta = metaObjectPath(
+describe('metaObject', () => {
+  it('returns the object expression for a parsed CSF meta', () => {
+    const meta = metaObject(
       parse(dedent`
         export default {
           title: 'Button',
@@ -442,18 +255,11 @@ describe('metaObjectPath', () => {
       `)
     );
 
-    expect(meta?.isObjectExpression()).toBe(true);
-    expect(printed(meta!.node)).toMatchInlineSnapshot(`
-      "{
-          title: 'Button',
-          args: { label: 'Save' }
-      }"
-    `);
+    expect(meta?.type).toBe('ObjectExpression');
+    expect(printed(meta!)).toBe("{\n  title: 'Button',\n  args: { label: 'Save' },\n}");
   });
 
-  // A parsed CSF file always has a meta object (parse() throws otherwise), so the
-  // undefined branch is only reachable before parse() has collected a meta node.
-  it('returns undefined when no meta node has been collected yet', () => {
+  it('returns undefined before parse() has collected a meta node', () => {
     const csf = loadCsf(
       dedent`
         const title = 'Button';
@@ -462,6 +268,6 @@ describe('metaObjectPath', () => {
       { makeTitle: (title) => title ?? 'title' }
     );
 
-    expect(metaObjectPath(csf)).toBeUndefined();
+    expect(metaObject(csf)).toBeUndefined();
   });
 });
diff --git a/code/core/src/csf-tools/story-shape/utils.ts b/code/core/src/csf-tools/story-shape/utils.ts
index 4f40ddbae07b..a915486dadec 100644
--- a/code/core/src/csf-tools/story-shape/utils.ts
+++ b/code/core/src/csf-tools/story-shape/utils.ts
@@ -1,72 +1,30 @@
-import { type NodePath, types as t } from 'storybook/internal/babel';
-
 import type { CsfFile } from '../CsfFile.ts';
-import type { RenderFunctionPath } from './render.ts';
+import { type E, type Node, isFunction, isStringLiteral, unwrapExpression } from '../estree/ast.ts';
 
-type StaticIdentifierMemberCall = t.CallExpression & {
-  callee: t.MemberExpression & { object: t.Identifier; property: t.Identifier };
-};
+export { unwrapExpression };
+export {
+  csfFactoryReceiver,
+  isCanonicalCsf2BindCall,
+  isCsfFactoryCall,
+  withoutTypeCalls,
+} from '../CsfFile.ts';
 
-type CsfFactoryCall = t.CallExpression & {
-  callee: t.MemberExpression & { property: t.Identifier };
-};
+/** A function a story or meta can supply as `render`, including a method's function expression. */
+export type FunctionNode = E.Function | E.ArrowFunctionExpression;
 
 export interface TemplateParts {
   quasis: string[];
-  expressions: t.Node[];
+  expressions: Node[];
 }
 
-/** Peels TS assertion/satisfies wrappers and parentheses off an expression node. */
-export const unwrapExpression = (node: t.Node): t.Node =>
-  t.isTSAsExpression(node) ||
-  t.isTSSatisfiesExpression(node) ||
-  t.isTSNonNullExpression(node) ||
-  t.isTSTypeAssertion(node) ||
-  t.isParenthesizedExpression(node)
-    ? unwrapExpression(node.expression)
-    : node;
-
-export const isCanonicalCsf2BindCall = (node: t.Node): node is StaticIdentifierMemberCall =>
-  t.isCallExpression(node) &&
-  t.isMemberExpression(node.callee) &&
-  !node.callee.computed &&
-  t.isIdentifier(node.callee.object) &&
-  t.isIdentifier(node.callee.property, { name: 'bind' }) &&
-  (node.arguments.length === 0 ||
-    (node.arguments.length === 1 &&
-      t.isObjectExpression(node.arguments[0]) &&
-      node.arguments[0].properties.length === 0));
-
-/** Receiver of a `.type<T>()` chain, which returns its receiver: `meta` for `meta.type<T>()`. */
-export const withoutTypeCalls = (object: t.Node): t.Node =>
-  t.isCallExpression(object) &&
-  object.arguments.length === 0 &&
-  t.isMemberExpression(object.callee) &&
-  !object.callee.computed &&
-  t.isIdentifier(object.callee.property, { name: 'type' })
-    ? withoutTypeCalls(object.callee.object)
-    : object;
-
-export const isCsfFactoryCall = (node: t.Node): node is CsfFactoryCall =>
-  t.isCallExpression(node) &&
-  t.isMemberExpression(node.callee) &&
-  !node.callee.computed &&
-  t.isIdentifier(withoutTypeCalls(node.callee.object)) &&
-  t.isIdentifier(node.callee.property) &&
-  (node.callee.property.name === 'story' || node.callee.property.name === 'extend');
-
-/** Identifier a CSF factory call is made on: `meta` in `meta.type<T>().story()`. */
-export const csfFactoryReceiver = (node: CsfFactoryCall): t.Identifier =>
-  withoutTypeCalls(node.callee.object) as t.Identifier;
-
-export const templateParts = (node: t.Node): TemplateParts | undefined => {
-  if (t.isTemplateLiteral(node)) {
+export const templateParts = (node: Node): TemplateParts | undefined => {
+  if (node.type === 'TemplateLiteral') {
     return {
       quasis: node.quasis.map((quasi) => quasi.value.cooked ?? ''),
       expressions: node.expressions,
     };
   }
-  if (!t.isTaggedTemplateExpression(node) || !isStringRawTag(node.tag)) {
+  if (node.type !== 'TaggedTemplateExpression' || !isStringRawTag(node.tag)) {
     return undefined;
   }
   return {
@@ -75,11 +33,13 @@ export const templateParts = (node: t.Node): TemplateParts | undefined => {
   };
 };
 
-const isStringRawTag = (tag: t.Expression): boolean =>
-  t.isMemberExpression(tag) &&
+const isStringRawTag = (tag: Node): boolean =>
+  tag.type === 'MemberExpression' &&
   !tag.computed &&
-  t.isIdentifier(tag.object, { name: 'String' }) &&
-  t.isIdentifier(tag.property, { name: 'raw' });
+  tag.object.type === 'Identifier' &&
+  tag.object.name === 'String' &&
+  tag.property.type === 'Identifier' &&
+  tag.property.name === 'raw';
 
 /**
  * Static key of an object member, or `null` when it is computed from something else.
@@ -87,27 +47,23 @@ const isStringRawTag = (tag: t.Expression): boolean =>
  * A computed key written as a string literal is static: `{ ['args']: … }` names the same member as
  * `{ args: … }`, so it reads as that name rather than as a key only running the story would produce.
  */
-export const keyOf = (p: t.ObjectMethod | t.ObjectProperty): string | null =>
-  t.isStringLiteral(p.key) ? p.key.value : !p.computed && t.isIdentifier(p.key) ? p.key.name : null;
+export const keyOf = (p: E.ObjectProperty): string | null =>
+  isStringLiteral(p.key)
+    ? p.key.value
+    : !p.computed && p.key.type === 'Identifier'
+      ? p.key.name
+      : null;
 
 /** Value of an object expression's own property, when it has one. */
 export const propertyValue = (
-  object: t.ObjectExpression | undefined | null,
+  object: E.ObjectExpression | undefined | null,
   name: string
-): t.Node | undefined =>
+): Node | undefined =>
   object?.properties.find(
-    (candidate): candidate is t.ObjectProperty =>
-      t.isObjectProperty(candidate) && keyOf(candidate) === name
+    (candidate): candidate is E.ObjectProperty =>
+      candidate.type === 'Property' && !candidate.method && keyOf(candidate) === name
   )?.value;
 
-/** Expression a block body consists of, when it consists of exactly `return <expression>`. */
-const soleReturnedExpression = (body: t.BlockStatement): t.Expression | undefined => {
-  const [statement, ...rest] = body.body;
-  return rest.length === 0 && t.isReturnStatement(statement) && t.isExpression(statement.argument)
-    ? statement.argument
-    : undefined;
-};
-
 /**
  * Expression a function returns directly, covering the concise body (`() => …`) and a block body
  * that is only a `return`.
@@ -115,30 +71,19 @@ const soleReturnedExpression = (body: t.BlockStatement): t.Expression | undefine
  * A block body must hold nothing but that `return`, since any extra statement could change what the
  * expression evaluates to and a static reader cannot follow it.
  */
-export const returnedExpression = (fn: t.Node | undefined): t.Expression | undefined => {
-  if (!t.isFunction(fn)) {
+export const returnedExpression = (node: Node | null | undefined): E.Expression | undefined => {
+  // A method shorthand (`setup() { … }`) returns what its function returns.
+  const fn = node?.type === 'Property' && node.method ? node.value : node;
+  if (!isFunction(fn) || !fn.body) {
     return undefined;
   }
-
-  return t.isExpression(fn.body) ? fn.body : soleReturnedExpression(fn.body);
-};
-
-/** {@link returnedExpression} as a path, for callers that resolve identifiers against scope. */
-export const returnedExpressionPath = (
-  renderFunction: RenderFunctionPath
-): NodePath<t.Expression> | undefined => {
-  if (!returnedExpression(renderFunction.node)) {
-    return undefined;
-  }
-
-  const body = renderFunction.get('body');
-  if (body.isExpression()) {
-    return body;
+  if (fn.body.type !== 'BlockStatement') {
+    return fn.body as E.Expression;
   }
-
-  const [statement] = body.isBlockStatement() ? body.get('body') : [];
-  const argument = statement?.isReturnStatement() ? statement.get('argument') : undefined;
-  return argument?.isExpression() ? argument : undefined;
+  const [statement, ...rest] = fn.body.body;
+  return rest.length === 0 && statement?.type === 'ReturnStatement' && statement.argument
+    ? statement.argument
+    : undefined;
 };
 
 /**
@@ -148,95 +93,51 @@ export const returnedExpressionPath = (
  * that object literal
  */
 export const resolveReturnedObjectExpression = (
-  renderFunction: RenderFunctionPath
-): t.ObjectExpression | undefined => {
-  const returned = returnedExpressionPath(renderFunction);
-
-  if (returned?.isObjectExpression()) {
-    return returned.node;
+  renderFunction: FunctionNode,
+  program: E.Program
+): E.ObjectExpression | undefined => {
+  const returned = returnedExpression(renderFunction);
+  if (returned?.type === 'ObjectExpression') {
+    return returned;
   }
-  if (!returned?.isIdentifier()) {
+  if (returned?.type !== 'Identifier') {
     return undefined;
   }
-
-  const resolved = resolveIdentifierInit(renderFunction, returned);
-  return resolved?.isObjectExpression() ? resolved.node : undefined;
+  const resolved = resolveIdentifierInit(program, returned.name);
+  return resolved?.type === 'ObjectExpression' ? resolved : undefined;
 };
 
 /** Resolve a local story helper used by `Template.bind({})` or `render: Template`. */
 export function resolveIdentifierInit(
-  storyPath: NodePath<t.Node>,
-  identifier: NodePath<t.Identifier>
-): NodePath<t.FunctionDeclaration> | NodePath<t.Expression> | null {
-  const programPath = storyPath.findParent((p) => p.isProgram()) as NodePath<t.Program> | null;
-
-  if (!programPath) {
-    return null;
-  }
-
-  for (const stmt of programPath.get('body')) {
-    if (stmt.isFunctionDeclaration() && stmt.node.id?.name === identifier.node.name) {
-      return stmt;
-    }
-    if (stmt.isExportNamedDeclaration()) {
-      const decl = stmt.get('declaration');
-      if (decl.isFunctionDeclaration() && decl.node.id?.name === identifier.node.name) {
-        return decl;
-      }
+  program: E.Program,
+  name: string
+): E.Function | E.Expression | null {
+  for (const statement of program.body) {
+    const declaration =
+      statement.type === 'ExportNamedDeclaration' ? statement.declaration : statement;
+    if (declaration?.type === 'FunctionDeclaration' && declaration.id?.name === name) {
+      return declaration;
     }
   }
 
-  const declarators = programPath.get('body').flatMap((stmt) => {
-    if (stmt.isVariableDeclaration()) {
-      return stmt.get('declarations');
+  for (const statement of program.body) {
+    const declaration =
+      statement.type === 'ExportNamedDeclaration' ? statement.declaration : statement;
+    if (declaration?.type !== 'VariableDeclaration') {
+      continue;
     }
-    if (stmt.isExportNamedDeclaration()) {
-      const decl = stmt.get('declaration');
-
-      if (decl && decl.isVariableDeclaration()) {
-        return decl.get('declarations');
-      }
+    const match = declaration.declarations.find(
+      (declarator) => declarator.id.type === 'Identifier' && declarator.id.name === name
+    );
+    if (match) {
+      return match.init ?? null;
     }
-    return [];
-  });
-
-  const match = declarators.find((d) => {
-    const id = d.get('id');
-    return id.isIdentifier() && id.node.name === identifier.node.name;
-  });
-
-  if (!match) {
-    return null;
   }
-  const init = match.get('init');
-  return init && init.isExpression() ? init : null;
-}
 
-/** NodePath for a known node inside a program. */
-export function pathForNode<T extends t.Node>(
-  program: NodePath<t.Program>,
-  target: T | undefined
-): NodePath<T> | undefined {
-  if (!target) {
-    return undefined;
-  }
-  let found: NodePath<T> | undefined;
-
-  program.traverse({
-    enter(p) {
-      if (p.node && p.node === target) {
-        found = p as NodePath<T>;
-        p.stop();
-      }
-    },
-  });
-
-  return found;
+  return null;
 }
 
-/** ObjectExpression path for the parsed CSF default meta, when available. */
-export function metaObjectPath(csf: CsfFile): NodePath<t.ObjectExpression> | undefined {
-  const metaPath = pathForNode(csf._file.path, csf._metaNode);
-
-  return metaPath?.isObjectExpression() ? metaPath : undefined;
+/** Object literal of the parsed CSF default meta, when it is part of the file. */
+export function metaObject(csf: CsfFile): E.ObjectExpression | undefined {
+  return csf._metaNodeIsSynthetic ? undefined : csf._metaNode;
 }

From 6f452818d6294d21bfdc311ec2be95398dca316a Mon Sep 17 00:00:00 2001
From: Easton <easton.shin@marqvision.com>
Date: Tue, 13 Oct 2026 11:52:16 +0900
Subject: [PATCH 046/326] refactor(core): move core helpers off Babel onto the
 csf-tools ESTree API

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 code/core/src/cli/AddonVitestService.ts       |   2 +-
 code/core/src/cli/eslintPlugin.test.ts        | 112 ++---
 code/core/src/cli/eslintPlugin.ts             | 317 +++++++--------
 code/core/src/cli/index.ts                    |   1 +
 code/core/src/cli/vitest-config.test.ts       | 383 ++++++++++++++++++
 code/core/src/cli/vitest-config.ts            | 163 ++++++++
 .../common/utils/resolve-meta-component.ts    |  49 +--
 .../utils/setup-addon-in-config.test.ts       |  17 +-
 .../src/common/utils/setup-addon-in-config.ts |  14 +-
 code/core/src/common/utils/subcomponents.ts   |  64 ++-
 .../utils/sync-main-preview-addons.test.ts    |  20 +-
 .../common/utils/sync-main-preview-addons.ts  |  14 +-
 .../utils/wrap-getAbsolutePath-utils.ts       | 216 +++-------
 .../src/core-server/utils/analyze-mdx.test.ts |   6 +-
 .../utils/ghost-stories/get-candidates.ts     |  50 +--
 .../duplicate-story-with-new-name.test.ts     |  16 +-
 .../duplicate-story-with-new-name.ts          |  79 ++--
 .../utils/save-story/save-story.ts            |  27 +-
 .../update-args-in-csf-file.test.ts           |  18 +-
 .../save-story/update-args-in-csf-file.ts     | 159 +++-----
 .../utils/save-story/valueToAST.ts            |  43 --
 .../utils/save-story/valueToSource.ts         |  33 ++
 .../utils/warnWhenUsingArgTypesRegex.ts       |  60 +--
 .../argTypes/convert/convert.test.ts          |   2 +-
 code/core/src/mocking-utils/extract.test.ts   |  14 +-
 code/core/src/mocking-utils/extract.ts        |  73 ++--
 26 files changed, 1143 insertions(+), 809 deletions(-)
 create mode 100644 code/core/src/cli/vitest-config.test.ts
 create mode 100644 code/core/src/cli/vitest-config.ts
 delete mode 100644 code/core/src/core-server/utils/save-story/valueToAST.ts
 create mode 100644 code/core/src/core-server/utils/save-story/valueToSource.ts

diff --git a/code/core/src/cli/AddonVitestService.ts b/code/core/src/cli/AddonVitestService.ts
index 610b0797c001..04f9a09b7c44 100644
--- a/code/core/src/cli/AddonVitestService.ts
+++ b/code/core/src/cli/AddonVitestService.ts
@@ -1,7 +1,6 @@
 import fs from 'node:fs/promises';
 import os from 'node:os';
 
-import { canUpdateVitestConfigFile } from 'storybook/internal/babel';
 import type { JsPackageManager } from 'storybook/internal/common';
 import { getProjectRoot } from 'storybook/internal/common';
 import { CLI_COLORS } from 'storybook/internal/node-logger';
@@ -18,6 +17,7 @@ import {
   SUPPORTED_FRAMEWORKS,
   VITEST_FALLBACK_SPECIFIER,
 } from './AddonVitestService.constants.ts';
+import { canUpdateVitestConfigFile } from './vitest-config.ts';
 
 type Result = {
   compatible: boolean;
diff --git a/code/core/src/cli/eslintPlugin.test.ts b/code/core/src/cli/eslintPlugin.test.ts
index fab70770f8a6..73a8f36f2847 100644
--- a/code/core/src/cli/eslintPlugin.test.ts
+++ b/code/core/src/cli/eslintPlugin.test.ts
@@ -318,18 +318,21 @@ describe('configureEslintPlugin', () => {
       const [, content] = vi.mocked(writeFile).mock.calls[0];
       expect(content).toMatchInlineSnapshot(`
         "// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
-        const storybook = require(\"eslint-plugin-storybook\");
-
+        const storybook = require('eslint-plugin-storybook');
         const { FlatCompat } = require('@eslint/eslintrc');
         const js = require('@eslint/js');
         const cypress = require('eslint-plugin-cypress/flat');
 
         const compat = new FlatCompat({ recommendedConfig: js.configs.recommended });
 
-        module.exports = [...compat.extends(
-          require.resolve('@acme/eslint-config/base'),
-          require.resolve('@acme/eslint-config/react'),
-        ), cypress.configs.recommended, ...storybook.configs[\"flat/recommended\"]];"
+        module.exports = [
+          ...compat.extends(
+            require.resolve('@acme/eslint-config/base'),
+            require.resolve('@acme/eslint-config/react'),
+          ),
+          cypress.configs.recommended,
+          ...storybook.configs["flat/recommended"],
+        ];"
       `);
       expect(content).not.toContain('import storybook');
     });
@@ -359,7 +362,7 @@ describe('configureEslintPlugin', () => {
 
         module.exports = [
           { rules: { 'no-console': 'error' } },
-          ...storybook.configs[\"flat/recommended\"]
+          ...storybook.configs["flat/recommended"],
         ];"
       `);
     });
@@ -407,14 +410,10 @@ describe('configureEslintPlugin', () => {
 
       expect(output).toMatchInlineSnapshot(`
         "// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
-        const storybook = require("eslint-plugin-storybook");
-
+        const storybook = require('eslint-plugin-storybook');
         const { defineConfig } = require('eslint/config');
 
-        module.exports = defineConfig([
-          { rules: { 'no-console': 'error' } },
-          ...storybook.configs["flat/recommended"]
-        ]);"
+        module.exports = defineConfig([{ rules: { 'no-console': 'error' } }, ...storybook.configs["flat/recommended"]]);"
       `);
       expect(logger.warn).not.toHaveBeenCalled();
     });
@@ -431,8 +430,7 @@ describe('configureEslintPlugin', () => {
 
       expect(output).toMatchInlineSnapshot(`
         "// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
-        const storybook = require("eslint-plugin-storybook");
-
+        const storybook = require('eslint-plugin-storybook');
         const tseslint = require('typescript-eslint');
 
         module.exports = tseslint.config(tseslint.configs.recommended, storybook.configs["flat/recommended"]);"
@@ -451,10 +449,7 @@ describe('configureEslintPlugin', () => {
 
       expect(output).toMatchInlineSnapshot(`
         "const storybook = require('eslint-plugin-storybook');
-        const config = [
-          { rules: { 'no-console': 'error' } },
-          ...storybook.configs["flat/recommended"]
-        ];
+        const config = [{ rules: { 'no-console': 'error' } }, ...storybook.configs["flat/recommended"]];
 
         module.exports = config;"
       `);
@@ -472,7 +467,7 @@ describe('configureEslintPlugin', () => {
         'eslint.config.js'
       );
 
-      expect(output).toContain('const _storybook = require("eslint-plugin-storybook");');
+      expect(output).toContain("const _storybook = require('eslint-plugin-storybook');");
       expect(output).toContain('..._storybook.configs["flat/recommended"]');
     });
 
@@ -507,7 +502,7 @@ describe('configureEslintPlugin', () => {
         'eslint.config.js'
       );
 
-      expect(output).toContain('const storybook = require("eslint-plugin-storybook");');
+      expect(output).toContain("const storybook = require('eslint-plugin-storybook');");
       expect(output).toContain('...storybook.configs["flat/recommended"]');
       expect(output).not.toContain('...nestedStorybook.configs');
     });
@@ -522,7 +517,7 @@ describe('configureEslintPlugin', () => {
         'eslint.config.js'
       );
 
-      expect(output).toContain('const _storybook = require("eslint-plugin-storybook");');
+      expect(output).toContain("const _storybook = require('eslint-plugin-storybook');");
       expect(output).toContain('..._storybook.configs["flat/recommended"]');
     });
 
@@ -533,7 +528,7 @@ describe('configureEslintPlugin', () => {
       `;
       const output = await configureFlatConfig(input, 'eslint.config.js');
 
-      expect(output).toContain('const _storybook = require("eslint-plugin-storybook");');
+      expect(output).toContain("const _storybook = require('eslint-plugin-storybook');");
       expect(output).toContain('..._storybook.configs["flat/recommended"]');
       await expect(configureFlatConfig(output, 'eslint.config.js')).resolves.toBe(output);
     });
@@ -618,10 +613,12 @@ describe('configureEslintPlugin', () => {
       const [, content] = vi.mocked(writeFile).mock.calls[0];
       expect(content).toMatchInlineSnapshot(`
         "// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
-        import storybook from "eslint-plugin-storybook";
-
+        import storybook from 'eslint-plugin-storybook';
         import somePlugin from 'some-plugin';
-        export default [somePlugin, ...storybook.configs["flat/recommended"]];"
+        export default [
+          somePlugin,
+          ...storybook.configs["flat/recommended"],
+        ]"
       `);
     });
 
@@ -646,8 +643,7 @@ describe('configureEslintPlugin', () => {
       const [, content] = vi.mocked(writeFile).mock.calls[0];
       expect(content).toMatchInlineSnapshot(`
         "// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
-        import storybook from "eslint-plugin-storybook";
-
+        import storybook from 'eslint-plugin-storybook';
         import somePlugin from 'some-plugin';
         import tseslint from 'typescript-eslint';
         export default tseslint.config(somePlugin, storybook.configs["flat/recommended"]);"
@@ -678,9 +674,11 @@ describe('configureEslintPlugin', () => {
       expect(content).toMatchInlineSnapshot(`
         "// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
         import storybook from "eslint-plugin-storybook";
-
         import eslint from "@eslint/js";
-        const options = [eslint.configs.recommended, ...storybook.configs["flat/recommended"]]
+        const options = [
+          eslint.configs.recommended,
+          ...storybook.configs["flat/recommended"],
+        ]
 
         export default options;"
       `);
@@ -709,9 +707,11 @@ describe('configureEslintPlugin', () => {
       expect(content).toMatchInlineSnapshot(`
         "// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
         import storybook from "eslint-plugin-storybook";
-
         import eslint from "@eslint/js";
-        const options = [eslint.configs.recommended, ...storybook.configs["flat/recommended"]] as Config
+        const options = [
+          eslint.configs.recommended,
+          ...storybook.configs["flat/recommended"],
+        ] as Config
 
         export default options;"
       `);
@@ -738,9 +738,11 @@ describe('configureEslintPlugin', () => {
       expect(content).toMatchInlineSnapshot(`
         "// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
         import storybook from "eslint-plugin-storybook";
-
         import eslint from "@eslint/js";
-        export default [eslint.configs.recommended, ...storybook.configs["flat/recommended"]] satisfies Config;"
+        export default [
+          eslint.configs.recommended,
+          ...storybook.configs["flat/recommended"],
+        ] satisfies Config;"
       `);
     });
 
@@ -777,17 +779,21 @@ describe('configureEslintPlugin', () => {
       expect(content).toMatchInlineSnapshot(`
         "// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
         import storybook from "eslint-plugin-storybook";
-
         import { defineConfig, globalIgnores } from "eslint/config";
         import nextVitals from "eslint-config-next/core-web-vitals";
         import nextTs from "eslint-config-next/typescript";
 
-        const eslintConfig = defineConfig([...nextVitals, ...nextTs, globalIgnores([
-          ".next/**",
-          "out/**",
-          "build/**",
-          "next-env.d.ts",
-        ]), ...storybook.configs["flat/recommended"]]);
+        const eslintConfig = defineConfig([
+          ...nextVitals,
+          ...nextTs,
+          globalIgnores([
+            ".next/**",
+            "out/**",
+            "build/**",
+            "next-env.d.ts",
+          ]),
+          ...storybook.configs["flat/recommended"],
+        ]);
 
         export default eslintConfig;"
       `);
@@ -824,17 +830,21 @@ describe('configureEslintPlugin', () => {
       expect(content).toMatchInlineSnapshot(`
         "// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
         import storybook from "eslint-plugin-storybook";
-
         import { defineConfig, globalIgnores } from "eslint/config";
         import nextVitals from "eslint-config-next/core-web-vitals";
         import nextTs from "eslint-config-next/typescript";
 
-        export default defineConfig([...nextVitals, ...nextTs, globalIgnores([
-          ".next/**",
-          "out/**",
-          "build/**",
-          "next-env.d.ts",
-        ]), ...storybook.configs["flat/recommended"]]);"
+        export default defineConfig([
+          ...nextVitals,
+          ...nextTs,
+          globalIgnores([
+            ".next/**",
+            "out/**",
+            "build/**",
+            "next-env.d.ts",
+          ]),
+          ...storybook.configs["flat/recommended"],
+        ]);"
       `);
     });
 
@@ -862,9 +872,8 @@ describe('configureEslintPlugin', () => {
       expect(content).toMatchInlineSnapshot(`
         "// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
         import storybook from "eslint-plugin-storybook";
-
         import { defineConfig } from "some-other-config-lib";
-        
+
         const eslintConfig = defineConfig([
           { rules: { "no-console": "error" } },
         ]);
@@ -891,8 +900,7 @@ describe('configureEslintPlugin', () => {
       const [, content] = vi.mocked(writeFile).mock.calls[0];
       expect(content).toMatchInlineSnapshot(`
         "// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
-        import storybook from "eslint-plugin-storybook";
-
+        import storybook from 'eslint-plugin-storybook';
         import someCustomConfig from 'my-eslint-config';
         export default someCustomConfig({}, [{}]);"
       `);
diff --git a/code/core/src/cli/eslintPlugin.ts b/code/core/src/cli/eslintPlugin.ts
index a70208839c7c..d22e47b7d679 100644
--- a/code/core/src/cli/eslintPlugin.ts
+++ b/code/core/src/cli/eslintPlugin.ts
@@ -1,7 +1,23 @@
 import { readFile, writeFile } from 'node:fs/promises';
 
 import { type JsPackageManager, getProjectRoot } from 'storybook/internal/common';
-import { type CsfValue, readConfig, writeConfig } from 'storybook/internal/csf-tools';
+import {
+  type CsfValue,
+  type ESTree as E,
+  type ESTreeNode as Node,
+  SourceEditor,
+  appendToList,
+  arrayList,
+  generateUid,
+  importedName,
+  isStringLiteral,
+  prependStatement,
+  printString,
+  readConfig,
+  unwrapESTreeExpression as unwrapExpression,
+  walk,
+  writeConfig,
+} from 'storybook/internal/csf-tools';
 import { logger, prompt } from 'storybook/internal/node-logger';
 
 import commentJson from 'comment-json';
@@ -10,8 +26,6 @@ import * as find from 'empathic/find';
 import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
 
-import { type NodePath, babelParse, recast, types as t, traverse } from '../babel/index.ts';
-
 export const SUPPORTED_ESLINT_EXTENSIONS = ['ts', 'mts', 'cts', 'mjs', 'js', 'cjs', 'json'];
 const UNSUPPORTED_ESLINT_EXTENSIONS = ['yaml', 'yml'];
 
@@ -42,62 +56,56 @@ export const findEslintFile = (instanceDir: string) => {
 };
 
 const STORYBOOK_PLUGIN = 'eslint-plugin-storybook';
-const FLAT_CONFIG_DOCS_COMMENT = {
-  type: 'CommentLine',
-  value:
-    ' For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format',
-};
+const FLAT_CONFIG_DOCS_COMMENT =
+  '// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format';
 
-type Scope = NodePath['scope'];
 type ConfigHelperNames = { tsEslint: string; defineConfig: string };
-type ConfigTarget = t.ArrayExpression | t.CallExpression;
+type ConfigTarget = E.ArrayExpression | E.CallExpression;
 
-function unwrapTSExpression(expr: t.Node | null | undefined): t.Node | null | undefined {
-  if (t.isTSAsExpression(expr) || t.isTSSatisfiesExpression(expr)) {
-    return unwrapTSExpression(expr.expression);
-  }
-  return expr;
-}
+const isIdentifierNamed = (node: Node | null | undefined, name: string) =>
+  node?.type === 'Identifier' && node.name === name;
 
-function isRequireOf(node: t.Node | null | undefined, source: string): node is t.CallExpression {
+function isRequireOf(node: Node | null | undefined, source: string): node is E.CallExpression {
   return (
-    t.isCallExpression(node) &&
-    t.isIdentifier(node.callee, { name: 'require' }) &&
-    t.isStringLiteral(node.arguments[0], { value: source })
+    node?.type === 'CallExpression' &&
+    isIdentifierNamed(node.callee, 'require') &&
+    isStringLiteral(node.arguments[0]) &&
+    node.arguments[0].value === source
   );
 }
 
-function findConfigHelperNames(program: t.Program): ConfigHelperNames {
+function findConfigHelperNames(program: E.Program): ConfigHelperNames {
   const names: ConfigHelperNames = { tsEslint: '', defineConfig: '' };
   for (const statement of program.body) {
-    if (t.isImportDeclaration(statement)) {
+    if (statement.type === 'ImportDeclaration') {
       for (const specifier of statement.specifiers) {
         if (
           statement.source.value === 'typescript-eslint' &&
-          t.isImportDefaultSpecifier(specifier)
+          specifier.type === 'ImportDefaultSpecifier'
         ) {
           names.tsEslint = specifier.local.name;
         }
         if (
           statement.source.value === 'eslint/config' &&
-          t.isImportSpecifier(specifier) &&
-          t.isIdentifier(specifier.imported, { name: 'defineConfig' })
+          specifier.type === 'ImportSpecifier' &&
+          importedName(specifier.imported) === 'defineConfig'
         ) {
           names.defineConfig = specifier.local.name;
         }
       }
     }
-    if (t.isVariableDeclaration(statement)) {
+    if (statement.type === 'VariableDeclaration') {
       for (const { id, init } of statement.declarations) {
-        if (isRequireOf(init, 'typescript-eslint') && t.isIdentifier(id)) {
+        if (isRequireOf(init, 'typescript-eslint') && id.type === 'Identifier') {
           names.tsEslint = id.name;
         }
-        if (isRequireOf(init, 'eslint/config') && t.isObjectPattern(id)) {
+        if (isRequireOf(init, 'eslint/config') && id.type === 'ObjectPattern') {
           for (const property of id.properties) {
             if (
-              t.isObjectProperty(property) &&
-              t.isIdentifier(property.key, { name: 'defineConfig' }) &&
-              t.isIdentifier(property.value)
+              property.type === 'Property' &&
+              !property.computed &&
+              isIdentifierNamed(property.key, 'defineConfig') &&
+              property.value.type === 'Identifier'
             ) {
               names.defineConfig = property.value.name;
             }
@@ -110,43 +118,44 @@ function findConfigHelperNames(program: t.Program): ConfigHelperNames {
 }
 
 function findConfigTarget(
-  expression: t.Node | null | undefined,
-  scope: Scope,
+  expression: Node | null | undefined,
+  editor: SourceEditor,
   helpers: ConfigHelperNames,
   followIdentifier = true
 ): ConfigTarget | undefined {
-  const config = unwrapTSExpression(expression);
+  const config = unwrapExpression(expression);
 
-  if (t.isArrayExpression(config)) {
+  if (config?.type === 'ArrayExpression') {
     return config;
   }
 
-  if (t.isIdentifier(config) && followIdentifier) {
-    const binding = scope.getBinding(config.name);
+  if (config?.type === 'Identifier') {
+    const binding = followIdentifier ? editor.scopes.program.bindings.get(config.name) : undefined;
     if (
       binding?.constant &&
-      binding.path.isVariableDeclarator() &&
-      t.isIdentifier(binding.path.node.id)
+      binding.node.type === 'VariableDeclarator' &&
+      binding.node.id.type === 'Identifier'
     ) {
-      return findConfigTarget(binding.path.node.init, scope, helpers, false);
+      return findConfigTarget(binding.node.init, editor, helpers, false);
     }
     return undefined;
   }
 
-  if (!t.isCallExpression(config)) {
+  if (config?.type !== 'CallExpression') {
     return undefined;
   }
 
-  if (helpers.defineConfig && t.isIdentifier(config.callee, { name: helpers.defineConfig })) {
-    const configs = unwrapTSExpression(config.arguments[0]);
-    return t.isArrayExpression(configs) ? configs : undefined;
+  if (helpers.defineConfig && isIdentifierNamed(config.callee, helpers.defineConfig)) {
+    const configs = unwrapExpression(config.arguments[0] as Node | undefined);
+    return configs?.type === 'ArrayExpression' ? configs : undefined;
   }
 
   if (
     helpers.tsEslint &&
-    t.isMemberExpression(config.callee) &&
-    t.isIdentifier(config.callee.object, { name: helpers.tsEslint }) &&
-    t.isIdentifier(config.callee.property, { name: 'config' })
+    config.callee.type === 'MemberExpression' &&
+    !config.callee.computed &&
+    isIdentifierNamed(config.callee.object, helpers.tsEslint) &&
+    isIdentifierNamed(config.callee.property, 'config')
   ) {
     return config;
   }
@@ -154,66 +163,69 @@ function findConfigTarget(
   return undefined;
 }
 
-function addStorybookConfig(target: ConfigTarget, storybookLocalName: string) {
-  const storybookConfig = t.memberExpression(
-    t.memberExpression(t.identifier(storybookLocalName), t.identifier('configs')),
-    t.stringLiteral('flat/recommended'),
-    true
-  );
-  if (t.isArrayExpression(target)) {
-    target.elements.push(t.spreadElement(storybookConfig));
+function addStorybookConfig(editor: SourceEditor, target: ConfigTarget, localName: string) {
+  const storybookConfig = `${localName}.configs["flat/recommended"]`;
+  if (target.type === 'ArrayExpression') {
+    appendToList(editor, arrayList(target), [`...${storybookConfig}`], '');
   } else {
-    target.arguments.push(storybookConfig);
+    const open = editor.code.indexOf('(', target.callee.end) + 1;
+    appendToList(editor, { open, close: target.end - 1, items: target.arguments }, [
+      storybookConfig,
+    ]);
   }
 }
 
 function hasStorybookConfig(target: ConfigTarget, storybookLocalNames: Set<string>) {
-  const entries = t.isArrayExpression(target) ? target.elements : target.arguments;
+  const entries = target.type === 'ArrayExpression' ? target.elements : target.arguments;
   return entries.some((entry) => {
-    const config = t.isSpreadElement(entry) ? entry.argument : entry;
+    const config = entry?.type === 'SpreadElement' ? entry.argument : entry;
     if (
-      !t.isMemberExpression(config) ||
-      !t.isStringLiteral(config.property, { value: 'flat/recommended' }) ||
-      !t.isMemberExpression(config.object) ||
-      !t.isIdentifier(config.object.property, { name: 'configs' })
+      config?.type !== 'MemberExpression' ||
+      !isStringLiteral(config.property) ||
+      config.property.value !== 'flat/recommended' ||
+      config.object.type !== 'MemberExpression' ||
+      config.object.computed ||
+      !isIdentifierNamed(config.object.property, 'configs')
     ) {
       return false;
     }
 
     const plugin = config.object.object;
     return (
-      (t.isIdentifier(plugin) && storybookLocalNames.has(plugin.name)) ||
+      (plugin.type === 'Identifier' && storybookLocalNames.has(plugin.name)) ||
       isRequireOf(plugin, STORYBOOK_PLUGIN)
     );
   });
 }
 
-function findCommonJsExport(ast: t.File) {
-  let exportedConfig: t.Expression | undefined;
+function findCommonJsExport(program: E.Program) {
+  const topLevelAssignments = new Set<Node>(
+    program.body.flatMap((statement) =>
+      statement.type === 'ExpressionStatement' ? [statement.expression] : []
+    )
+  );
+  let exportedConfig: Node | undefined;
   let isSupported = true;
 
-  traverse(ast, {
-    AssignmentExpression(path) {
-      const { left } = path.node;
-      if (!t.isMemberExpression(left) || !t.isIdentifier(left.object, { name: 'module' })) {
-        return;
-      }
-      if (!left.computed && !t.isIdentifier(left.property, { name: 'exports' })) {
-        return;
-      }
+  walk(program, (node) => {
+    if (node.type !== 'AssignmentExpression') {
+      return;
+    }
+    const { left } = node;
+    if (left.type !== 'MemberExpression' || !isIdentifierNamed(left.object, 'module')) {
+      return;
+    }
+    if (!left.computed && !isIdentifierNamed(left.property, 'exports')) {
+      return;
+    }
 
-      const isSingleTopLevelExport =
-        !left.computed &&
-        !exportedConfig &&
-        path.node.operator === '=' &&
-        path.parentPath?.isExpressionStatement() &&
-        path.parentPath.parentPath?.isProgram();
-      if (isSingleTopLevelExport) {
-        exportedConfig = path.node.right;
-      } else {
-        isSupported = false;
-      }
-    },
+    const isSingleTopLevelExport =
+      !left.computed && !exportedConfig && node.operator === '=' && topLevelAssignments.has(node);
+    if (isSingleTopLevelExport) {
+      exportedConfig = node.right;
+    } else {
+      isSupported = false;
+    }
   });
 
   return { exportedConfig, isSupported };
@@ -232,69 +244,55 @@ function findCommonJsExport(ast: t.File) {
  * unchanged, with a warning to add the Storybook config manually.
  */
 export const configureFlatConfig = async (code: string, configFile: string) => {
-  const ast = babelParse(code);
+  const editor = new SourceEditor(code);
+  const { program } = editor;
 
+  // Some configs load plugins with import() (e.g. eslint-flat-config-utils), where we can't safely
+  // add the spread.
   let hasStorybookImport = false;
-  let hasDestructuredStorybookRequire = false;
-  const storybookRequires: { localName: string; end: number }[] = [];
-  let programScope = undefined as Scope | undefined;
-  traverse(ast, {
-    Program(path) {
-      programScope = path.scope;
-    },
-    ImportDeclaration(path) {
-      if (path.node.source.value === STORYBOOK_PLUGIN) {
-        hasStorybookImport = true;
-        path.stop();
-      }
-    },
-    CallExpression(path) {
-      // Some configs load plugins with import() (e.g. eslint-flat-config-utils), where we can't safely add the spread
-      if (
-        t.isImport(path.node.callee) &&
-        t.isStringLiteral(path.node.arguments[0], { value: STORYBOOK_PLUGIN })
-      ) {
-        hasStorybookImport = true;
-        path.stop();
-        return;
-      }
+  walk(program, (node) => {
+    if (
+      (node.type === 'ImportDeclaration' && node.source.value === STORYBOOK_PLUGIN) ||
+      (node.type === 'ImportExpression' &&
+        isStringLiteral(node.source) &&
+        node.source.value === STORYBOOK_PLUGIN)
+    ) {
+      hasStorybookImport = true;
+    }
+    return !hasStorybookImport;
+  });
+  if (hasStorybookImport) {
+    return code;
+  }
 
-      const declarator = path.parentPath;
-      if (
-        !isRequireOf(path.node, STORYBOOK_PLUGIN) ||
-        !declarator?.isVariableDeclarator() ||
-        !declarator.parentPath.parentPath?.isProgram()
-      ) {
-        return;
+  const storybookRequires: { localName: string; end: number }[] = [];
+  for (const statement of program.body) {
+    if (statement.type !== 'VariableDeclaration') {
+      continue;
+    }
+    for (const declarator of statement.declarations) {
+      if (!isRequireOf(declarator.init, STORYBOOK_PLUGIN)) {
+        continue;
       }
-
       // Only `const storybook = require(...)` gives a binding we can spread `storybook.configs` from
-      if (t.isIdentifier(declarator.node.id)) {
-        storybookRequires.push({
-          localName: declarator.node.id.name,
-          end: declarator.node.end ?? 0,
-        });
-      } else {
-        hasDestructuredStorybookRequire = true;
-        path.stop();
+      if (declarator.id.type !== 'Identifier') {
+        return code;
       }
-    },
-  });
-  if (hasStorybookImport || hasDestructuredStorybookRequire || !programScope) {
-    return code;
+      storybookRequires.push({ localName: declarator.id.name, end: declarator.end });
+    }
   }
 
-  const helpers = findConfigHelperNames(ast.program);
-  const commonJsExport = findCommonJsExport(ast);
+  const helpers = findConfigHelperNames(program);
+  const commonJsExport = findCommonJsExport(program);
 
   if (
     commonJsExport.exportedConfig ||
     !commonJsExport.isSupported ||
     storybookRequires.length > 0
   ) {
-    const target =
-      commonJsExport.isSupported &&
-      findConfigTarget(commonJsExport.exportedConfig, programScope, helpers);
+    const target = commonJsExport.isSupported
+      ? findConfigTarget(commonJsExport.exportedConfig, editor, helpers)
+      : undefined;
     if (!target) {
       logger.warn(
         `Could not automatically add eslint-plugin-storybook to ${configFile}. Please add it manually: const storybook = require('eslint-plugin-storybook'); then add ...storybook.configs['flat/recommended'] to the exported config. See https://storybook.js.org/docs/configure/integration/eslint-plugin`
@@ -306,44 +304,37 @@ export const configureFlatConfig = async (code: string, configFile: string) => {
       return code;
     }
 
-    const requiredBeforeTarget = storybookRequires.find(({ end }) => end <= (target.start ?? 0));
+    const requiredBeforeTarget = storybookRequires.find(({ end }) => end <= target.start);
     if (requiredBeforeTarget) {
-      addStorybookConfig(target, requiredBeforeTarget.localName);
-      return recast.print(ast).code;
+      addStorybookConfig(editor, target, requiredBeforeTarget.localName);
+      return editor.toString();
     }
 
-    let localName = 'storybook';
-    for (let suffix = 1; programScope.hasBinding(localName); suffix++) {
-      localName = `_storybook${suffix > 1 ? suffix : ''}`;
-    }
-    addStorybookConfig(target, localName);
-    const storybookRequire = t.variableDeclaration('const', [
-      t.variableDeclarator(
-        t.identifier(localName),
-        t.callExpression(t.identifier('require'), [t.stringLiteral(STORYBOOK_PLUGIN)])
-      ),
-    ]);
-    Object.assign(storybookRequire, { comments: [FLAT_CONFIG_DOCS_COMMENT] });
-    ast.program.body.unshift(storybookRequire);
-    return recast.print(ast).code;
+    const localName = editor.scopes.program.bindings.has('storybook')
+      ? generateUid(editor.scopes, 'storybook')
+      : 'storybook';
+    addStorybookConfig(editor, target, localName);
+    prependStatement(
+      editor,
+      `${FLAT_CONFIG_DOCS_COMMENT}\nconst ${localName} = require(${printString(STORYBOOK_PLUGIN, editor.quote)});`
+    );
+    return editor.toString();
   }
 
-  const exportDefault = ast.program.body.find((statement) =>
-    t.isExportDefaultDeclaration(statement)
-  ) as t.ExportDefaultDeclaration | undefined;
-  const target = findConfigTarget(exportDefault?.declaration, programScope, helpers);
+  const exportDefault = program.body.find(
+    (node): node is E.ExportDefaultDeclaration => node.type === 'ExportDefaultDeclaration'
+  );
+  const target = findConfigTarget(exportDefault?.declaration as Node | undefined, editor, helpers);
   if (target) {
-    addStorybookConfig(target, 'storybook');
+    addStorybookConfig(editor, target, 'storybook');
   }
 
-  const importDecl = t.importDeclaration(
-    [t.importDefaultSpecifier(t.identifier('storybook'))],
-    t.stringLiteral(STORYBOOK_PLUGIN)
+  prependStatement(
+    editor,
+    `${FLAT_CONFIG_DOCS_COMMENT}\nimport storybook from ${printString(STORYBOOK_PLUGIN, editor.quote)};`
   );
-  Object.assign(importDecl, { comments: [FLAT_CONFIG_DOCS_COMMENT] });
-  ast.program.body.unshift(importDecl);
 
-  return recast.print(ast).code;
+  return editor.toString();
 };
 
 export async function extractEslintInfo(packageManager: JsPackageManager): Promise<{
diff --git a/code/core/src/cli/index.ts b/code/core/src/cli/index.ts
index 6e17cd94363c..e6e621c12cf8 100644
--- a/code/core/src/cli/index.ts
+++ b/code/core/src/cli/index.ts
@@ -9,3 +9,4 @@ export * from './AddonVitestService.ts';
 export * from './installSkills.ts';
 export * from './detectLanguage.ts';
 export * from './getStorybookData.ts';
+export * from './vitest-config.ts';
diff --git a/code/core/src/cli/vitest-config.test.ts b/code/core/src/cli/vitest-config.test.ts
new file mode 100644
index 000000000000..ea72cc5d1da4
--- /dev/null
+++ b/code/core/src/cli/vitest-config.test.ts
@@ -0,0 +1,383 @@
+import { describe, expect, it } from 'vitest';
+
+import { type E, parseModule } from '../csf-tools/estree/ast.ts';
+import {
+  canUpdateVitestConfigFile,
+  findExportDefault,
+  resolveExpression,
+} from './vitest-config.ts';
+
+const parse = (code: string) => parseModule(code, 'file.ts').program;
+
+describe('canUpdateVitestConfigFile', () => {
+  it('returns true for plain export default object literal', () => {
+    expect(canUpdateVitestConfigFile('export default { test: { name: "node" } }')).toBe(true);
+  });
+
+  it('returns true for bare export default {}', () => {
+    expect(canUpdateVitestConfigFile('export default {}')).toBe(true);
+  });
+
+  it('returns true for defineConfig({}) pattern', () => {
+    expect(
+      canUpdateVitestConfigFile(
+        `
+        import { defineConfig } from 'vitest/config';
+        export default defineConfig({ test: { environment: 'happy-dom' } });`
+      )
+    ).toBe(true);
+  });
+
+  it('returns true for defineProject({}) pattern', () => {
+    expect(
+      canUpdateVitestConfigFile(
+        `
+        import { defineProject } from 'vitest/config';
+        export default defineProject({ test: { environment: 'happy-dom' } });`
+      )
+    ).toBe(true);
+  });
+
+  it('returns true for defineProject from vitest/config', () => {
+    expect(
+      canUpdateVitestConfigFile(
+        `
+        import { defineProject } from 'vitest/config';
+
+        export default defineProject({
+          test: {
+            name: 'node',
+            environment: 'happy-dom',
+            include: ['**/*.test.ts'],
+          },
+        })
+        `
+      )
+    ).toBe(true);
+  });
+
+  it('returns true for simple mergeConfig({}, {}) pattern', () => {
+    expect(
+      canUpdateVitestConfigFile(
+        `
+        import { mergeConfig } from 'vitest/config';
+        import viteConfig from './vite.config';
+        export default mergeConfig(viteConfig, { test: { name: 'node' } });`
+      )
+    ).toBe(true);
+  });
+
+  it('returns true for defineConfig(mergeConfig(...)) pattern', () => {
+    expect(
+      canUpdateVitestConfigFile(
+        `
+        import { defineConfig, mergeConfig } from 'vitest/config';
+        import viteConfig from './vite.config';
+
+        export default defineConfig(
+          mergeConfig(viteConfig, {
+            test: {
+              name: 'node',
+              environment: 'happy-dom',
+              include: ['**/*.test.ts'],
+            },
+          })
+        )
+        `
+      )
+    ).toBe(true);
+  });
+
+  it('returns true for defineConfig(mergeConfig(...) satisfies ViteUserConfig) pattern', () => {
+    expect(
+      canUpdateVitestConfigFile(
+        `
+        import { defineConfig, mergeConfig } from 'vitest/config';
+        import type { ViteUserConfig } from 'vitest/config';
+        import viteConfig from './vite.config';
+
+        export default defineConfig(
+          mergeConfig(viteConfig, {
+            test: {
+              name: 'node',
+              environment: 'happy-dom',
+              include: ['**/*.test.ts'],
+            },
+          }) satisfies ViteUserConfig
+        )
+        `
+      )
+    ).toBe(true);
+  });
+
+  it('returns true for mergeConfig(...) as ViteUserConfig pattern', () => {
+    expect(
+      canUpdateVitestConfigFile(
+        `
+        import { mergeConfig } from 'vitest/config';
+        import type { ViteUserConfig } from 'vitest/config';
+        import viteConfig from './vite.config';
+
+        export default mergeConfig(viteConfig, {
+          test: {
+            name: 'node',
+            environment: 'happy-dom',
+            include: ['**/*.test.ts'],
+          },
+        }) as ViteUserConfig
+        `
+      )
+    ).toBe(true);
+  });
+
+  it('returns true for mergeConfig with shorthand test property (const test = {...})', () => {
+    expect(
+      canUpdateVitestConfigFile(
+        `
+        import { mergeConfig } from 'vitest/config';
+        import viteConfig from './vite.config';
+
+        const test = {
+          name: 'node',
+          environment: 'happy-dom',
+          include: ['**/*.test.ts'],
+        };
+
+        export default mergeConfig(viteConfig, {
+          test,
+        })
+        `
+      )
+    ).toBe(true);
+  });
+
+  it('returns true for mergeConfig with external vitestConfig variable', () => {
+    expect(
+      canUpdateVitestConfigFile(
+        `
+        import { mergeConfig } from 'vitest/config';
+        import viteConfig from './vite.config';
+
+        const vitestConfig = {
+          test: {
+            name: 'node',
+            environment: 'happy-dom',
+            include: ['**/*.test.ts'],
+          },
+        };
+
+        export default mergeConfig(viteConfig, vitestConfig)
+        `
+      )
+    ).toBe(true);
+  });
+
+  it('returns true for const config = mergeConfig(...); export default config pattern', () => {
+    expect(
+      canUpdateVitestConfigFile(
+        `
+        import { defineConfig, mergeConfig } from 'vitest/config';
+        import viteConfig from './vite.config';
+
+        const config = mergeConfig(
+          viteConfig,
+          defineConfig({
+            test: {
+              name: 'node',
+              environment: 'happy-dom',
+              include: ['**/*.test.ts'],
+            },
+          })
+        );
+
+        export default config
+      `
+      )
+    ).toBe(true);
+  });
+
+  it('returns true for export default config where config = defineConfig({...})', () => {
+    expect(
+      canUpdateVitestConfigFile(
+        `
+        import { defineConfig } from 'vitest/config';
+
+        const config = defineConfig({ test: { name: 'node' } });
+        export default config
+        `
+      )
+    ).toBe(true);
+  });
+
+  it('returns true for defineConfig({}) as UserWorkspaceConfig', () => {
+    expect(
+      canUpdateVitestConfigFile(
+        `
+        import { defineConfig } from 'vitest/config';
+        import type { UserWorkspaceConfig } from 'vitest/config';
+
+        export default defineConfig({ test: {} }) as UserWorkspaceConfig
+        `
+      )
+    ).toBe(true);
+  });
+
+  it('returns true for defineConfig({}) satisfies UserWorkspaceConfig', () => {
+    expect(
+      canUpdateVitestConfigFile(
+        `
+        import { defineConfig } from 'vitest/config';
+        import type { UserWorkspaceConfig } from 'vitest/config';
+
+        export default defineConfig({ test: {} }) satisfies UserWorkspaceConfig
+        `
+      )
+    ).toBe(true);
+  });
+
+  it('returns true for defineConfig aliased to a custom name', () => {
+    expect(
+      canUpdateVitestConfigFile(
+        `
+        import { defineConfig as dc } from 'vitest/config';
+        export default dc({ test: {} })
+        `
+      )
+    ).toBe(true);
+  });
+
+  it('returns false when there is no export default', () => {
+    expect(canUpdateVitestConfigFile('const x = 1;')).toBe(false);
+  });
+
+  it('returns true for arrow function pattern: defineConfig(({ mode }) => ({}))', () => {
+    expect(
+      canUpdateVitestConfigFile(
+        `
+        import { defineConfig } from 'vitest/config';
+        export default defineConfig(({ mode }) => ({
+          test: {
+            globals: mode !== 'production',
+          },
+        }))
+        `
+      )
+    ).toBe(true);
+  });
+
+  it('returns false for callback pattern with dynamic control flow', () => {
+    expect(
+      canUpdateVitestConfigFile(
+        `
+        import { defineConfig } from 'vitest/config';
+        export default defineConfig(({ mode }) => {
+          if (mode === 'production') {
+            return { test: { name: 'prod' } };
+          }
+          return { test: { name: 'dev' } };
+        })
+        `
+      )
+    ).toBe(false);
+  });
+
+  it('returns false for unrecognizable export (string literal)', () => {
+    expect(canUpdateVitestConfigFile("export default 'something'")).toBe(false);
+  });
+
+  it('returns false for syntax errors', () => {
+    expect(canUpdateVitestConfigFile('this is not valid syntax !!!')).toBe(false);
+  });
+
+  it('returns false for export default function declaration', () => {
+    expect(canUpdateVitestConfigFile('export default function config() { return {}; }')).toBe(
+      false
+    );
+  });
+});
+
+describe('resolveExpression', () => {
+  it('returns null for null/undefined input', () => {
+    const ast = parse('');
+    expect(resolveExpression(null, ast)).toBeNull();
+    expect(resolveExpression(undefined, ast)).toBeNull();
+  });
+
+  it('returns non-Identifier expressions directly', () => {
+    const ast = parse('42');
+    const numLiteral = (ast.body[0] as E.ExpressionStatement).expression;
+    expect(resolveExpression(numLiteral, ast)).toBe(numLiteral);
+  });
+
+  it('resolves a bare VariableDeclaration', () => {
+    const ast = parse(`
+      const foo = { a: 1 };
+      export default foo;
+    `);
+    const result = resolveExpression(findExportDefault(ast)!.declaration, ast);
+    expect(result?.type).toBe('ObjectExpression');
+  });
+
+  it('resolves an exported const (ExportNamedDeclaration)', () => {
+    const ast = parse(`
+      export const config = { a: 1 };
+      export default config;
+    `);
+    const result = resolveExpression(findExportDefault(ast)!.declaration, ast);
+    expect(result?.type).toBe('ObjectExpression');
+  });
+
+  it('resolves a chain of variable references', () => {
+    const ast = parse(`
+      const inner = { a: 1 };
+      const outer = inner;
+      export default outer;
+    `);
+    const result = resolveExpression(findExportDefault(ast)!.declaration, ast);
+    expect(result?.type).toBe('ObjectExpression');
+  });
+
+  it('resolves through TSAsExpression', () => {
+    const ast = parse(`
+      const foo = { a: 1 };
+      export default foo as any;
+    `);
+    const result = resolveExpression(findExportDefault(ast)!.declaration, ast);
+    expect(result?.type).toBe('ObjectExpression');
+  });
+
+  it('resolves through TSSatisfiesExpression', () => {
+    const ast = parse(`
+      const foo = { a: 1 };
+      export default foo satisfies object;
+    `);
+    const result = resolveExpression(findExportDefault(ast)!.declaration, ast);
+    expect(result?.type).toBe('ObjectExpression');
+  });
+
+  it('returns the Identifier node when variable is not found', () => {
+    const ast = parse(`export default unknown;`);
+    const result = resolveExpression(findExportDefault(ast)!.declaration, ast);
+    expect(result?.type).toBe('Identifier');
+    expect(result).toMatchObject({ name: 'unknown' });
+  });
+
+  it('returns the Identifier node when variable has no initializer', () => {
+    const ast = parse(`
+      let foo;
+      export default foo;
+    `);
+    const result = resolveExpression(findExportDefault(ast)!.declaration, ast);
+    expect(result?.type).toBe('Identifier');
+    expect(result).toMatchObject({ name: 'foo' });
+  });
+
+  it('returns null when maxDepth is exceeded', () => {
+    const lines = Array.from({ length: 12 }, (_, i) =>
+      i === 0 ? `const v0 = { a: 1 };` : `const v${i} = v${i - 1};`
+    ).join('\n');
+    const ast = parse(`${lines}\nexport default v11;`);
+    const result = resolveExpression(findExportDefault(ast)!.declaration, ast);
+    expect(result).toBeNull();
+  });
+});
diff --git a/code/core/src/cli/vitest-config.ts b/code/core/src/cli/vitest-config.ts
new file mode 100644
index 000000000000..25c77f51a6e6
--- /dev/null
+++ b/code/core/src/cli/vitest-config.ts
@@ -0,0 +1,163 @@
+import { type E, parseModule, unwrapExpression } from '../csf-tools/estree/ast.ts';
+
+const MAX_RESOLVE_DEPTH = 10;
+
+/**
+ * Resolve an expression through TypeScript wrappers (`as`, `satisfies`, `!`, `<T>`) and references
+ * to top-level `const`/`let`/`var` declarations (exported or not).
+ *
+ * Returns `null` for a missing expression or a reference chain deeper than 10.
+ */
+export const resolveExpression = (
+  expr: E.Node | null | undefined,
+  program: E.Program,
+  depth = 0
+): E.Node | null => {
+  if (!expr || depth > MAX_RESOLVE_DEPTH) {
+    return null;
+  }
+  const unwrapped = unwrapExpression(expr);
+  if (unwrapped.type !== 'Identifier') {
+    return unwrapped;
+  }
+  for (const statement of program.body) {
+    const declaration =
+      statement.type === 'ExportNamedDeclaration' ? statement.declaration : statement;
+    if (declaration?.type !== 'VariableDeclaration') {
+      continue;
+    }
+    const declarator = declaration.declarations.find(
+      (d) => d.id.type === 'Identifier' && d.id.name === unwrapped.name
+    );
+    if (declarator) {
+      return declarator.init ? resolveExpression(declarator.init, program, depth + 1) : unwrapped;
+    }
+  }
+  return unwrapped;
+};
+
+const isImportedDefineConfigLike = (localName: string, program: E.Program): boolean =>
+  program.body.some(
+    (node) =>
+      node.type === 'ImportDeclaration' &&
+      (node.source.value === 'vitest/config' || node.source.value === 'vite') &&
+      node.specifiers.some(
+        (specifier) =>
+          specifier.type === 'ImportSpecifier' &&
+          specifier.local.name === localName &&
+          specifier.imported.type === 'Identifier' &&
+          (specifier.imported.name === 'defineConfig' ||
+            specifier.imported.name === 'defineProject')
+      )
+  );
+
+const isDefineConfigLike = (node: E.CallExpression, program: E.Program): boolean =>
+  node.callee.type === 'Identifier' &&
+  (node.callee.name === 'defineConfig' ||
+    node.callee.name === 'defineProject' ||
+    isImportedDefineConfigLike(node.callee.name, program));
+
+const isMergeConfigCall = (node: E.Node | null): node is E.CallExpression =>
+  node?.type === 'CallExpression' &&
+  node.callee.type === 'Identifier' &&
+  node.callee.name === 'mergeConfig';
+
+/**
+ * Resolve a `mergeConfig` argument to its config object: an object literal, a variable holding one,
+ * or a call wrapping one (`defineConfig({ ... })`).
+ */
+export const getConfigObjectFromMergeArg = (
+  arg: E.Node,
+  program: E.Program
+): E.ObjectExpression | null => {
+  const resolved = resolveExpression(arg, program);
+  if (resolved?.type === 'ObjectExpression') {
+    return resolved;
+  }
+  if (resolved?.type === 'CallExpression' && resolved.arguments[0]?.type === 'ObjectExpression') {
+    return resolved.arguments[0];
+  }
+  return null;
+};
+
+/**
+ * Find the `mergeConfig(...)` call a default export evaluates to, directly or through
+ * `defineConfig(mergeConfig(...))`, variable references and TypeScript wrappers.
+ */
+export const getEffectiveMergeConfigCall = (
+  decl: E.Node,
+  program: E.Program
+): E.CallExpression | null => {
+  const resolved = resolveExpression(decl, program);
+  if (resolved?.type !== 'CallExpression') {
+    return null;
+  }
+  if (isDefineConfigLike(resolved, program) && resolved.arguments.length > 0) {
+    const inner = resolveExpression(resolved.arguments[0], program);
+    if (isMergeConfigCall(inner)) {
+      return inner;
+    }
+  }
+  return isMergeConfigCall(resolved) ? resolved : null;
+};
+
+/**
+ * Find the config object a default export evaluates to: `{ ... }`, `defineConfig({ ... })`,
+ * `defineProject({ ... })`, or a `defineConfig` callback whose body is an object literal or a single
+ * `return { ... }`. Variable references and TypeScript wrappers are followed.
+ */
+export const getTargetConfigObject = (
+  program: E.Program,
+  exportDefault: E.ExportDefaultDeclaration
+): E.ObjectExpression | null => {
+  const resolved = resolveExpression(exportDefault.declaration, program);
+  if (resolved?.type === 'ObjectExpression') {
+    return resolved;
+  }
+  if (resolved?.type !== 'CallExpression' || !isDefineConfigLike(resolved, program)) {
+    return null;
+  }
+  const [arg] = resolved.arguments;
+  if (arg?.type === 'ObjectExpression') {
+    return arg;
+  }
+  if (arg?.type !== 'ArrowFunctionExpression' && arg?.type !== 'FunctionExpression') {
+    return null;
+  }
+  if (arg.body?.type === 'ObjectExpression') {
+    return arg.body;
+  }
+  // Only `{ return { ... } }`: anything with control flow may return other objects.
+  if (arg.body?.type === 'BlockStatement' && arg.body.body.length === 1) {
+    const [statement] = arg.body.body;
+    if (statement.type === 'ReturnStatement') {
+      const returned = resolveExpression(statement.argument, program);
+      return returned?.type === 'ObjectExpression' ? returned : null;
+    }
+  }
+  return null;
+};
+
+export const findExportDefault = (program: E.Program) =>
+  program.body.find(
+    (node): node is E.ExportDefaultDeclaration => node.type === 'ExportDefaultDeclaration'
+  );
+
+/**
+ * Whether addon-vitest's postinstall can merge its config template into this Vitest/Vite config,
+ * which needs a default export that resolves to a config object or a `mergeConfig(...)` call.
+ */
+export const canUpdateVitestConfigFile = (fileContent: string): boolean => {
+  let program: E.Program;
+  try {
+    ({ program } = parseModule(fileContent));
+  } catch {
+    return false;
+  }
+  const exportDefault = findExportDefault(program);
+  return (
+    !!exportDefault &&
+    (getTargetConfigObject(program, exportDefault) !== null ||
+      getEffectiveMergeConfigCall(exportDefault.declaration, program) !== null)
+  );
+};
diff --git a/code/core/src/common/utils/resolve-meta-component.ts b/code/core/src/common/utils/resolve-meta-component.ts
index 12a9d2f9338a..a0394d2ef616 100644
--- a/code/core/src/common/utils/resolve-meta-component.ts
+++ b/code/core/src/common/utils/resolve-meta-component.ts
@@ -1,6 +1,6 @@
-import { type NodePath, types as t } from 'storybook/internal/babel';
 import type { CsfFile } from 'storybook/internal/csf-tools';
 
+import type { E, Node } from '../../csf-tools/estree/ast.ts';
 import { parseReferenceModule } from '../../csf-tools/story-shape/reference-context.ts';
 import { isSelfContained } from '../../csf-tools/story-shape/resolve-arg-value.ts';
 import {
@@ -39,9 +39,9 @@ export interface MetaComponentResolverOptions {
 }
 
 /** Peels the type-level wrappers off a component expression, as in `Comp<Props>` or `Comp as any`. */
-const unwrapComponentExpression = (node: t.Node): t.Node => {
+const unwrapComponentExpression = (node: Node): Node => {
   const unwrapped = unwrapExpression(node);
-  return t.isTSInstantiationExpression(unwrapped)
+  return unwrapped.type === 'TSInstantiationExpression'
     ? unwrapComponentExpression(unwrapped.expression)
     : unwrapped;
 };
@@ -73,7 +73,7 @@ export function createMetaComponentResolver(options: MetaComponentResolverOption
   };
 
   const fromIdentifier = (module: ReferenceModule, localName: string): MetaComponentResolution => {
-    const binding = findImport(module.program, localName);
+    const binding = findImport(module.editor.program, localName);
     // A namespace object is not a class, so naming one as the component documents nothing.
     if (binding.kind === 'unsupported' || binding.kind === 'namespace') {
       return { reason: 'no-component-import' };
@@ -99,21 +99,23 @@ export function createMetaComponentResolver(options: MetaComponentResolverOption
       return { reason: 'no-meta-component' };
     }
 
-    const storyModule: ReferenceModule = { program: csf._file.path, filePath: storyPath };
+    // Index the story file so the nodes a resolution carries print as written.
+    csf._editor.parentOf(csf._program);
+    const storyModule: ReferenceModule = { editor: csf._editor, filePath: storyPath };
     const expression = unwrapComponentExpression(node);
-    if (t.isIdentifier(expression)) {
+    if (expression.type === 'Identifier') {
       return fromIdentifier(storyModule, expression.name);
     }
 
     // `ns.Button`, where `ns` is a namespace import, is `import { Button } from …` written another
     // way, so it resolves the same.
     if (
-      t.isMemberExpression(expression) &&
+      expression.type === 'MemberExpression' &&
       !expression.computed &&
-      t.isIdentifier(expression.object) &&
-      t.isIdentifier(expression.property)
+      expression.object.type === 'Identifier' &&
+      expression.property.type === 'Identifier'
     ) {
-      const namespace = findImport(csf._file.path, expression.object.name);
+      const namespace = findImport(csf._program, expression.object.name);
       if (namespace.kind === 'namespace') {
         const exportName = expression.property.name;
         return {
@@ -133,13 +135,13 @@ export function createMetaComponentResolver(options: MetaComponentResolverOption
       {
         ...storyModule,
         resolveModule,
-        externalize: (n: t.Node) => (isSelfContained(n) ? n : undefined),
+        externalize: (n: Node) => (isSelfContained(n) ? n : undefined),
       },
       expression
     );
     if (referenced) {
       const value = unwrapComponentExpression(referenced.node);
-      if (t.isIdentifier(value)) {
+      if (value.type === 'Identifier') {
         return fromIdentifier(referenced.ctx, value.name);
       }
     }
@@ -154,28 +156,28 @@ type ImportBinding =
   | { kind: 'local' }
   | { kind: 'unsupported' };
 
-function findImport(program: NodePath<t.Program>, localName: string): ImportBinding {
-  for (const statement of program.get('body')) {
-    if (!statement.isImportDeclaration()) {
+function findImport(program: E.Program, localName: string): ImportBinding {
+  for (const statement of program.body) {
+    if (statement.type !== 'ImportDeclaration') {
       continue;
     }
 
-    for (const specifier of statement.node.specifiers) {
+    for (const specifier of statement.specifiers) {
       if (specifier.local.name !== localName) {
         continue;
       }
 
       // A type-only import binds nothing documentable, but the name is still imported rather than
       // declared here.
-      if (statement.node.importKind === 'type') {
+      if (statement.importKind === 'type') {
         return { kind: 'unsupported' };
       }
 
-      const importId = statement.node.source.value;
-      if (t.isImportNamespaceSpecifier(specifier)) {
+      const importId = statement.source.value;
+      if (specifier.type === 'ImportNamespaceSpecifier') {
         return { kind: 'namespace', importId };
       }
-      if (t.isImportDefaultSpecifier(specifier)) {
+      if (specifier.type === 'ImportDefaultSpecifier') {
         return { kind: 'import', importId, exportName: 'default' };
       }
       if (specifier.importKind === 'type') {
@@ -184,9 +186,10 @@ function findImport(program: NodePath<t.Program>, localName: string): ImportBind
       return {
         kind: 'import',
         importId,
-        exportName: t.isIdentifier(specifier.imported)
-          ? specifier.imported.name
-          : specifier.imported.value,
+        exportName:
+          specifier.imported.type === 'Identifier'
+            ? specifier.imported.name
+            : (specifier.imported as E.StringLiteral).value,
       };
     }
   }
diff --git a/code/core/src/common/utils/setup-addon-in-config.test.ts b/code/core/src/common/utils/setup-addon-in-config.test.ts
index eb99550c0b69..0e91f39553bc 100644
--- a/code/core/src/common/utils/setup-addon-in-config.test.ts
+++ b/code/core/src/common/utils/setup-addon-in-config.test.ts
@@ -22,8 +22,9 @@ describe('setupAddonInConfig', () => {
     vi.clearAllMocks();
 
     mockMain = {
+      _quote: "'",
+      getBodyDeclarations: () => [],
       getFieldNode: vi.fn(),
-      valueToNode: vi.fn(),
       appendNodeToArray: vi.fn(),
       appendValueToArray: vi.fn(),
     } as any;
@@ -50,7 +51,6 @@ describe('setupAddonInConfig', () => {
 
     expect(mockMain.appendValueToArray).toHaveBeenCalledWith(['addons'], '@storybook/addon-docs');
     expect(mockMain.appendNodeToArray).not.toHaveBeenCalled();
-    expect(wrapUtils.wrapValueWithGetAbsolutePathWrapper).not.toHaveBeenCalled();
     expect(csfTools.writeConfig).toHaveBeenCalledWith(mockMain);
     expect(loadMainConfigModule.loadMainConfig).toHaveBeenCalledWith({
       configDir: '.storybook',
@@ -64,12 +64,8 @@ describe('setupAddonInConfig', () => {
   });
 
   it('should add addon with getAbsolutePath wrapper when wrapper exists', async () => {
-    const mockAddonNode = { type: 'StringLiteral' } as any;
-
     vi.mocked(mockMain.getFieldNode).mockReturnValue({} as any);
-    vi.mocked(mockMain.valueToNode).mockReturnValue(mockAddonNode);
     vi.mocked(wrapUtils.getAbsolutePathWrapperName).mockReturnValue('getAbsolutePath');
-    vi.mocked(wrapUtils.wrapValueWithGetAbsolutePathWrapper).mockImplementation(() => {});
 
     await setupAddonInConfig({
       addonName: '@storybook/addon-docs',
@@ -78,12 +74,9 @@ describe('setupAddonInConfig', () => {
       configDir: '.storybook',
     });
 
-    expect(mockMain.valueToNode).toHaveBeenCalledWith('@storybook/addon-docs');
-    expect(mockMain.appendNodeToArray).toHaveBeenCalledWith(['addons'], mockAddonNode);
-    expect(wrapUtils.wrapValueWithGetAbsolutePathWrapper).toHaveBeenCalledWith(
-      mockMain,
-      mockAddonNode
-    );
+    const [path, node] = vi.mocked(mockMain.appendNodeToArray).mock.calls[0];
+    expect(path).toEqual(['addons']);
+    expect(csfTools.printExpression(node)).toBe("getAbsolutePath('@storybook/addon-docs')");
     expect(mockMain.appendValueToArray).not.toHaveBeenCalled();
     expect(csfTools.writeConfig).toHaveBeenCalledWith(mockMain);
     expect(loadMainConfigModule.loadMainConfig).toHaveBeenCalledWith({
diff --git a/code/core/src/common/utils/setup-addon-in-config.ts b/code/core/src/common/utils/setup-addon-in-config.ts
index 5f74b6180c38..a1e3dd391e5f 100644
--- a/code/core/src/common/utils/setup-addon-in-config.ts
+++ b/code/core/src/common/utils/setup-addon-in-config.ts
@@ -1,12 +1,9 @@
 import type { ConfigFile } from 'storybook/internal/csf-tools';
-import { writeConfig } from 'storybook/internal/csf-tools';
+import { parseExpression, writeConfig } from 'storybook/internal/csf-tools';
 
 import { loadMainConfig } from './load-main-config.ts';
 import { syncStorybookAddons } from './sync-main-preview-addons.ts';
-import {
-  getAbsolutePathWrapperName,
-  wrapValueWithGetAbsolutePathWrapper,
-} from './wrap-getAbsolutePath-utils.ts';
+import { getAbsolutePathCall, getAbsolutePathWrapperName } from './wrap-getAbsolutePath-utils.ts';
 
 export interface SetupAddonInConfigOptions {
   addonName: string;
@@ -29,9 +26,10 @@ export async function setupAddonInConfig({
 }: SetupAddonInConfigOptions): Promise<void> {
   const mainConfigAddons = mainConfigCSFFile.getFieldNode(['addons']);
   if (mainConfigAddons && getAbsolutePathWrapperName(mainConfigCSFFile) !== null) {
-    const addonNode = mainConfigCSFFile.valueToNode(addonName);
-    mainConfigCSFFile.appendNodeToArray(['addons'], addonNode as any);
-    wrapValueWithGetAbsolutePathWrapper(mainConfigCSFFile, addonNode as any);
+    mainConfigCSFFile.appendNodeToArray(
+      ['addons'],
+      parseExpression(getAbsolutePathCall(mainConfigCSFFile, addonName))
+    );
   } else {
     mainConfigCSFFile.appendValueToArray(['addons'], addonName);
   }
diff --git a/code/core/src/common/utils/subcomponents.ts b/code/core/src/common/utils/subcomponents.ts
index 57df981ca4ed..0a7338bcfdf2 100644
--- a/code/core/src/common/utils/subcomponents.ts
+++ b/code/core/src/common/utils/subcomponents.ts
@@ -1,50 +1,44 @@
-import { types as t } from 'storybook/internal/babel';
 import type { CsfFile } from 'storybook/internal/csf-tools';
 
+import { type E, type Node, isStringLiteral } from '../../csf-tools/estree/ast.ts';
+
 export type DeclaredSubcomponent = {
   componentName: string;
   name: string;
 };
 
 export function extractDeclaredSubcomponents(csf: CsfFile): DeclaredSubcomponent[] {
-  const rawSubcomponents = unwrapSubcomponentNode(
-    csf._metaAnnotations.subcomponents,
-    csf._ast.program
-  );
+  const rawSubcomponents = unwrapSubcomponentNode(csf._metaAnnotations.subcomponents, csf._program);
 
-  if (!rawSubcomponents || !t.isObjectExpression(rawSubcomponents)) {
+  if (rawSubcomponents?.type !== 'ObjectExpression') {
     return [];
   }
 
   return rawSubcomponents.properties.flatMap((property) => {
-    if (!t.isObjectProperty(property)) {
+    if (property.type !== 'Property' || property.method || property.kind !== 'init') {
       return [];
     }
 
     const name = getObjectKeyName(property.key);
     const directComponentName = getComponentExpressionName(property.value);
-    const componentExpression = unwrapSubcomponentNode(property.value, csf._ast.program);
+    const componentExpression = unwrapSubcomponentNode(property.value, csf._program);
     const componentName = getComponentExpressionName(componentExpression) ?? directComponentName;
 
     return name && componentName ? [{ name, componentName }] : [];
   });
 }
 
-function findVariableInitialization(identifier: string, program: t.Program) {
+function findVariableInitialization(identifier: string, program: E.Program) {
   for (const node of program.body) {
-    const declarations = t.isVariableDeclaration(node)
-      ? node.declarations
-      : t.isExportNamedDeclaration(node) && t.isVariableDeclaration(node.declaration)
-        ? node.declaration.declarations
-        : undefined;
-
-    const declaration = declarations?.find(
-      (decl): decl is t.VariableDeclarator =>
-        t.isVariableDeclarator(decl) && t.isIdentifier(decl.id) && decl.id.name === identifier
+    const declaration = node.type === 'ExportNamedDeclaration' ? node.declaration : node;
+    if (declaration?.type !== 'VariableDeclaration') {
+      continue;
+    }
+    const declarator = declaration.declarations.find(
+      (decl) => decl.id.type === 'Identifier' && decl.id.name === identifier
     );
-
-    if (declaration?.init && t.isExpression(declaration.init)) {
-      return declaration.init;
+    if (declarator?.init) {
+      return declarator.init;
     }
   }
 
@@ -52,14 +46,14 @@ function findVariableInitialization(identifier: string, program: t.Program) {
 }
 
 function unwrapSubcomponentNode(
-  node: t.Node | undefined,
-  program: t.Program,
+  node: Node | undefined,
+  program: E.Program,
   visitedIdentifiers = new Set<string>()
-): t.Node | undefined {
+): Node | undefined {
   let current = node;
 
   while (current) {
-    if (t.isIdentifier(current)) {
+    if (current.type === 'Identifier') {
       if (visitedIdentifiers.has(current.name)) {
         return undefined;
       }
@@ -70,10 +64,10 @@ function unwrapSubcomponentNode(
     }
 
     if (
-      t.isParenthesizedExpression(current) ||
-      t.isTSAsExpression(current) ||
-      t.isTSSatisfiesExpression(current) ||
-      t.isTSNonNullExpression(current)
+      current.type === 'ParenthesizedExpression' ||
+      current.type === 'TSAsExpression' ||
+      current.type === 'TSSatisfiesExpression' ||
+      current.type === 'TSNonNullExpression'
     ) {
       current = current.expression;
       continue;
@@ -85,28 +79,28 @@ function unwrapSubcomponentNode(
   return undefined;
 }
 
-function getObjectKeyName(key: t.Expression | t.Identifier | t.PrivateName) {
-  if (t.isIdentifier(key)) {
+function getObjectKeyName(key: Node) {
+  if (key.type === 'Identifier') {
     return key.name;
   }
 
-  if (t.isStringLiteral(key)) {
+  if (isStringLiteral(key)) {
     return key.value;
   }
 
   return undefined;
 }
 
-function getComponentExpressionName(node: t.Node | undefined): string | undefined {
+function getComponentExpressionName(node: Node | undefined): string | undefined {
   if (!node) {
     return undefined;
   }
 
-  if (t.isIdentifier(node)) {
+  if (node.type === 'Identifier') {
     return node.name;
   }
 
-  if (t.isMemberExpression(node) && !node.computed) {
+  if (node.type === 'MemberExpression' && !node.computed) {
     const objectName = getComponentExpressionName(node.object);
     const propertyName = getComponentExpressionName(node.property);
 
diff --git a/code/core/src/common/utils/sync-main-preview-addons.test.ts b/code/core/src/common/utils/sync-main-preview-addons.test.ts
index 2dfbc3682772..a5e89365e2c3 100644
--- a/code/core/src/common/utils/sync-main-preview-addons.test.ts
+++ b/code/core/src/common/utils/sync-main-preview-addons.test.ts
@@ -42,11 +42,11 @@ describe('syncPreviewAddonsWithMainConfig', () => {
     expect(printConfig(result).code).toMatchInlineSnapshot(`
       import * as addonA11yAnnotations from "@storybook/addon-a11y/preview";
       import * as myAddonAnnotations from "custom-addon/preview";
-      import { definePreview } from "@storybook/react/preview";
+            import { definePreview } from "@storybook/react/preview";
 
-      export default definePreview({
-        addons: [myAddonAnnotations, addonA11yAnnotations],
-      });
+            export default definePreview({
+              addons: [myAddonAnnotations, addonA11yAnnotations],
+            });
     `);
   });
 
@@ -72,11 +72,11 @@ describe('syncPreviewAddonsWithMainConfig', () => {
     expect(printConfig(result).code).toMatchInlineSnapshot(`
       import addonA11yAnnotations from "@storybook/addon-a11y";
       import * as myAddonAnnotations from "custom-addon/preview";
-      import { definePreview } from "@storybook/react/preview";
+            import { definePreview } from "@storybook/react/preview";
 
-      export default definePreview({
-        addons: [myAddonAnnotations, addonA11yAnnotations()],
-      });
+            export default definePreview({
+              addons: [myAddonAnnotations, addonA11yAnnotations()],
+            });
     `);
   });
 
@@ -173,9 +173,7 @@ describe('syncPreviewAddonsWithMainConfig', () => {
     expect(transformedCode).toMatchInlineSnapshot(`
       import { definePreview } from "@storybook/react/preview";
 
-      export default definePreview({
-        addons: []
-      });
+      export default definePreview({ addons: [] });
     `);
   });
 });
diff --git a/code/core/src/common/utils/sync-main-preview-addons.ts b/code/core/src/common/utils/sync-main-preview-addons.ts
index d66f67b96999..2995a9e0a480 100644
--- a/code/core/src/common/utils/sync-main-preview-addons.ts
+++ b/code/core/src/common/utils/sync-main-preview-addons.ts
@@ -1,7 +1,7 @@
-import { types as t } from 'storybook/internal/babel';
 import {
   type ConfigFile,
   isCsfFactoryPreview,
+  parseExpression,
   readConfig,
   writeConfig,
 } from 'storybook/internal/csf-tools';
@@ -57,8 +57,8 @@ export async function syncPreviewAddonsWithMainConfig(
   for (const addon of addons) {
     const annotations = await getAddonAnnotations(addon, configDir);
     if (annotations) {
-      const hasAlreadyImportedAddonAnnotations = previewConfig._ast.program.body.find(
-        (node) => t.isImportDeclaration(node) && node.source.value === annotations.importPath
+      const hasAlreadyImportedAddonAnnotations = previewConfig._program.body.find(
+        (node) => node.type === 'ImportDeclaration' && node.source.value === annotations.importPath
       );
 
       if (hasAlreadyImportedAddonAnnotations) {
@@ -67,9 +67,9 @@ export async function syncPreviewAddonsWithMainConfig(
 
       if (
         !existingAddons ||
-        (t.isArrayExpression(existingAddons) &&
+        (existingAddons.type === 'ArrayExpression' &&
           !existingAddons.elements.some(
-            (element) => t.isIdentifier(element) && element.name === annotations.importName
+            (element) => element?.type === 'Identifier' && element.name === annotations.importName
           ))
       ) {
         syncedAddons.push(addon);
@@ -79,12 +79,12 @@ export async function syncPreviewAddonsWithMainConfig(
           previewConfig.setImport(annotations.importName, annotations.importPath);
           previewConfig.appendNodeToArray(
             ['addons'],
-            t.callExpression(t.identifier(annotations.importName), [])
+            parseExpression(`${annotations.importName}()`)
           );
         } else {
           // import * as addonName from 'addon/preview'; + addonName
           previewConfig.setImport({ namespace: annotations.importName }, annotations.importPath);
-          previewConfig.appendNodeToArray(['addons'], t.identifier(annotations.importName));
+          previewConfig.appendNodeToArray(['addons'], parseExpression(annotations.importName));
         }
       }
     }
diff --git a/code/core/src/common/utils/wrap-getAbsolutePath-utils.ts b/code/core/src/common/utils/wrap-getAbsolutePath-utils.ts
index 70ed4742f8b3..0cab92d305ad 100644
--- a/code/core/src/common/utils/wrap-getAbsolutePath-utils.ts
+++ b/code/core/src/common/utils/wrap-getAbsolutePath-utils.ts
@@ -1,6 +1,8 @@
-import { types as t } from 'storybook/internal/babel';
 import type { ConfigFile } from 'storybook/internal/csf-tools';
 
+import { type Node, isStringLiteral } from '../../csf-tools/estree/ast.ts';
+import { prependStatement, printString } from '../../csf-tools/estree/editor.ts';
+
 const PREFERRED_GET_ABSOLUTE_PATH_WRAPPER_NAME = 'getAbsolutePath';
 const ALTERNATIVE_GET_ABSOLUTE_PATH_WRAPPER_NAME = 'wrapForPnp';
 
@@ -14,38 +16,13 @@ const ALTERNATIVE_GET_ABSOLUTE_PATH_WRAPPER_NAME = 'wrapForPnp';
  * function <name>() {}
  * ```
  */
-export function doesVariableOrFunctionDeclarationExist(node: t.Node, name: string) {
+export function doesVariableOrFunctionDeclarationExist(node: Node, name: string) {
   return (
-    (t.isVariableDeclaration(node) &&
+    (node.type === 'VariableDeclaration' &&
       node.declarations.length === 1 &&
-      t.isVariableDeclarator(node.declarations[0]) &&
-      t.isIdentifier(node.declarations[0].id) &&
-      node.declarations[0].id?.name === name) ||
-    (t.isFunctionDeclaration(node) && t.isIdentifier(node.id) && node.id.name === name)
-  );
-}
-
-/**
- * Wrap a value with getAbsolutePath wrapper.
- *
- * @example
- *
- * ```ts
- * // Before
- * {
- *   framework: '@storybook/react-vite';
- * }
- *
- * // After
- * {
- *   framework: getAbsolutePath('@storybook/react-vite');
- * }
- * ```
- */
-function getReferenceToGetAbsolutePathWrapper(config: ConfigFile, value: string) {
-  return t.callExpression(
-    t.identifier(getAbsolutePathWrapperName(config) ?? PREFERRED_GET_ABSOLUTE_PATH_WRAPPER_NAME),
-    [t.stringLiteral(value)]
+      node.declarations[0].id.type === 'Identifier' &&
+      node.declarations[0].id.name === name) ||
+    (node.type === 'FunctionDeclaration' && node.id?.name === name)
   );
 }
 
@@ -72,31 +49,38 @@ export function getAbsolutePathWrapperName(config: ConfigFile) {
   return null;
 }
 
+/** Source of a call to the config's getAbsolutePath wrapper, such as `getAbsolutePath('x')`. */
+export function getAbsolutePathCall(config: ConfigFile, value: string) {
+  const wrapper = getAbsolutePathWrapperName(config) ?? PREFERRED_GET_ABSOLUTE_PATH_WRAPPER_NAME;
+  return `${wrapper}(${printString(value, config._quote)})`;
+}
+
 /** Check if the node needs to be wrapped with getAbsolutePath wrapper. */
 export function isGetAbsolutePathWrapperNecessary(
-  node: t.Node,
-  cb: (node: t.StringLiteral | t.ObjectProperty | t.ArrayExpression) => void = () => {}
-) {
-  if (t.isStringLiteral(node)) {
-    // value will be converted from StringLiteral to CallExpression.
+  node: Node,
+  cb: (node: Node) => void = () => {}
+): boolean {
+  if (isStringLiteral(node)) {
     cb(node);
     return true;
   }
 
-  if (t.isObjectExpression(node)) {
+  if (node.type === 'ObjectExpression') {
     const nameProperty = node.properties.find(
       (property) =>
-        t.isObjectProperty(property) && t.isIdentifier(property.key) && property.key.name === 'name'
-    ) as t.ObjectProperty;
+        property.type === 'Property' &&
+        property.key.type === 'Identifier' &&
+        property.key.name === 'name'
+    );
 
-    if (nameProperty && t.isStringLiteral(nameProperty.value)) {
-      cb(nameProperty);
+    if (nameProperty?.type === 'Property' && isStringLiteral(nameProperty.value)) {
+      cb(nameProperty.value);
       return true;
     }
   }
 
   if (
-    t.isArrayExpression(node) &&
+    node.type === 'ArrayExpression' &&
     node.elements.some((element) => element && isGetAbsolutePathWrapperNecessary(element))
   ) {
     cb(node);
@@ -111,24 +95,22 @@ export function isGetAbsolutePathWrapperNecessary(
  *
  * @returns Array of fields that need to be wrapped with getAbsolutePath wrapper.
  */
-export function getFieldsForGetAbsolutePathWrapper(config: ConfigFile): t.Node[] {
+export function getFieldsForGetAbsolutePathWrapper(config: ConfigFile): Node[] {
   const frameworkNode = config.getFieldNode(['framework']);
   const builderNode = config.getFieldNode(['core', 'builder']);
   const rendererNode = config.getFieldNode(['core', 'renderer']);
   const addons = config.getFieldNode(['addons']);
 
-  const fieldsWithRequireWrapper = [
+  return [
     ...(frameworkNode ? [frameworkNode] : []),
     ...(builderNode ? [builderNode] : []),
     ...(rendererNode ? [rendererNode] : []),
-    ...(addons && t.isArrayExpression(addons) ? [addons] : []),
+    ...(addons?.type === 'ArrayExpression' ? [addons] : []),
   ];
-
-  return fieldsWithRequireWrapper;
 }
 
 /**
- * Returns AST for the following function
+ * Returns the source of the following function, for `ConfigFile#setBodyDeclaration`.
  *
  * @example
  *
@@ -138,119 +120,56 @@ export function getFieldsForGetAbsolutePathWrapper(config: ConfigFile): t.Node[]
  * }
  * ```
  */
-export function getAbsolutePathWrapperAsCallExpression(
+export function getAbsolutePathWrapperDeclaration(
   isConfigTypescript: boolean,
   names = { dirname: 'dirname', fileURLToPath: 'fileURLToPath' }
-): t.FunctionDeclaration {
+): string {
   let parameter = 'value';
   while (Object.values(names).includes(parameter)) {
     parameter = `_${parameter}`;
   }
-  const functionDeclaration = {
-    ...t.functionDeclaration(
-      t.identifier(PREFERRED_GET_ABSOLUTE_PATH_WRAPPER_NAME),
-      [
-        {
-          ...t.identifier(parameter),
-          ...(isConfigTypescript
-            ? { typeAnnotation: t.tsTypeAnnotation(t.tSStringKeyword()) }
-            : {}),
-        },
-      ],
-      t.blockStatement([
-        t.returnStatement(
-          t.callExpression(t.identifier(names.dirname), [
-            t.callExpression(t.identifier(names.fileURLToPath), [
-              t.callExpression(
-                t.memberExpression(
-                  t.metaProperty(t.identifier('import'), t.identifier('meta')),
-                  t.identifier('resolve')
-                ),
-                [
-                  t.templateLiteral(
-                    [
-                      t.templateElement({ raw: '' }),
-                      t.templateElement({ raw: '/package.json' }, true),
-                    ],
-                    [t.identifier(parameter)]
-                  ),
-                ]
-              ),
-            ]),
-          ])
-        ),
-      ])
-    ),
-    ...(isConfigTypescript ? { returnType: t.tSTypeAnnotation(t.tsAnyKeyword()) } : {}),
-  };
-
-  t.addComment(
-    functionDeclaration,
-    'leading',
-    '*\n * This function is used to resolve the absolute path of a package.\n * It is needed in projects that are set up within a monorepo.\n'
-  );
-
-  return functionDeclaration;
+  return [
+    '/**',
+    ' * This function is used to resolve the absolute path of a package.',
+    ' * It is needed in projects that are set up within a monorepo.',
+    ' */',
+    `function ${PREFERRED_GET_ABSOLUTE_PATH_WRAPPER_NAME}(${parameter}${isConfigTypescript ? ': string' : ''})${isConfigTypescript ? ': any' : ''} {`,
+    `  return ${names.dirname}(${names.fileURLToPath}(import.meta.resolve(\`\${${parameter}}/package.json\`)));`,
+    '}',
+  ].join('\n');
 }
 
-export function wrapValueWithGetAbsolutePathWrapper(config: ConfigFile, node: t.Node) {
-  isGetAbsolutePathWrapperNecessary(node, (n) => {
-    if (t.isStringLiteral(n)) {
-      const wrapperNode = getReferenceToGetAbsolutePathWrapper(config, n.value);
-      Object.keys(n).forEach((k) => {
-        delete n[k as keyof typeof n];
-      });
-      Object.keys(wrapperNode).forEach((k) => {
-        (n as any)[k] = wrapperNode[k as keyof typeof wrapperNode];
-      });
-    }
-
-    if (t.isObjectProperty(n) && t.isStringLiteral(n.value)) {
-      n.value = getReferenceToGetAbsolutePathWrapper(config, n.value.value) as any;
-    }
-
-    if (t.isArrayExpression(n)) {
-      n.elements.forEach((element) => {
-        if (element && isGetAbsolutePathWrapperNecessary(element)) {
-          wrapValueWithGetAbsolutePathWrapper(config, element);
-        }
-      });
-    }
-  });
+export function wrapValuesWithGetAbsolutePathWrapper(config: ConfigFile, nodes: Node[]) {
+  const wrap = (node: Node) =>
+    isGetAbsolutePathWrapperNecessary(node, (target) => {
+      if (isStringLiteral(target)) {
+        config._editorSource.edits.overwrite(
+          target.start,
+          target.end,
+          getAbsolutePathCall(config, target.value)
+        );
+      } else if (target.type === 'ArrayExpression') {
+        target.elements.forEach((element) => element && wrap(element));
+      }
+    });
+  nodes.forEach(wrap);
+  config._commit();
 }
 
-const topLevelNames = (node: t.Node): string[] => {
-  if (t.isImportDeclaration(node)) {
-    return node.specifiers.map((specifier) => specifier.local.name);
-  }
-  if (t.isExportNamedDeclaration(node) && node.declaration) {
-    return topLevelNames(node.declaration);
-  }
-  if (t.isVariableDeclaration(node)) {
-    return node.declarations.flatMap(({ id }) => Object.keys(t.getBindingIdentifiers(id)));
-  }
-  if ((t.isFunctionDeclaration(node) || t.isClassDeclaration(node)) && node.id) {
-    return [node.id.name];
-  }
-  return [];
-};
-
 /**
  * Import the named export `imported` from `source` into a main config, and return the local name to
  * call it by. Reuses an existing import, and renames the import when the config already declares a
  * binding with that name, such as its own `const dirname`.
  */
 export function ensureNamedImport(config: ConfigFile, imported: string, source: string) {
-  const { body } = config._ast.program;
-  for (const node of body) {
-    if (
-      t.isImportDeclaration(node) &&
-      node.source.value.replace(/^node:/, '') === source.replace(/^node:/, '')
-    ) {
+  const sameSource = (value: string) =>
+    value.replace(/^node:/, '') === source.replace(/^node:/, '');
+  for (const node of config._program.body) {
+    if (node.type === 'ImportDeclaration' && sameSource(node.source.value)) {
       const existing = node.specifiers.find(
         (specifier) =>
-          t.isImportSpecifier(specifier) &&
-          (t.isIdentifier(specifier.imported)
+          specifier.type === 'ImportSpecifier' &&
+          (specifier.imported.type === 'Identifier'
             ? specifier.imported.name
             : specifier.imported.value) === imported
       );
@@ -260,7 +179,7 @@ export function ensureNamedImport(config: ConfigFile, imported: string, source:
     }
   }
 
-  const taken = new Set(body.flatMap(topLevelNames));
+  const taken = config._editorSource.scopes.program.bindings;
   if (!taken.has(imported)) {
     config.setImport([imported], source);
     return imported;
@@ -270,11 +189,10 @@ export function ensureNamedImport(config: ConfigFile, imported: string, source:
   while (taken.has(local)) {
     local = `_${local}`;
   }
-  body.unshift(
-    t.importDeclaration(
-      [t.importSpecifier(t.identifier(local), t.identifier(imported))],
-      t.stringLiteral(source)
-    )
+  prependStatement(
+    config._editorSource,
+    `import { ${imported} as ${local} } from ${printString(source, config._quote)};`
   );
+  config._commit();
   return local;
 }
diff --git a/code/core/src/core-server/utils/analyze-mdx.test.ts b/code/core/src/core-server/utils/analyze-mdx.test.ts
index 8d5067d4e04f..ee3be03072f6 100644
--- a/code/core/src/core-server/utils/analyze-mdx.test.ts
+++ b/code/core/src/core-server/utils/analyze-mdx.test.ts
@@ -1,11 +1,11 @@
-import { parse } from '@babel/parser';
 import { dedent } from 'ts-dedent';
 import { describe, expect, it } from 'vitest';
 
 import { analyzeMdx, extractImports } from './analyze-mdx.ts';
 
-const estreeParse = (code: string) =>
-  parse(code, { sourceType: 'module', plugins: ['jsx', 'estree'] }).program;
+import { parseModule } from '../../csf-tools/estree/ast.ts';
+
+const estreeParse = (code: string) => parseModule(code).program as any;
 
 describe('extractImports', () => {
   it('single block', () => {
diff --git a/code/core/src/core-server/utils/ghost-stories/get-candidates.ts b/code/core/src/core-server/utils/ghost-stories/get-candidates.ts
index 661196a3ebea..25e9133e1a30 100644
--- a/code/core/src/core-server/utils/ghost-stories/get-candidates.ts
+++ b/code/core/src/core-server/utils/ghost-stories/get-candidates.ts
@@ -1,55 +1,31 @@
 import { readFile } from 'node:fs/promises';
 
-import { babelParse, traverse } from 'storybook/internal/babel';
-
 // eslint-disable-next-line depend/ban-dependencies
 import { glob } from 'glob';
 
+import { parseModule, walk } from '../../../csf-tools/estree/ast.ts';
 import { getComponentComplexity } from './component-analyzer.ts';
 
 // A valid candidate includes React code and at least one export
 function isValidCandidate(source: string): boolean {
-  const ast = babelParse(source);
+  const { program } = parseModule(source);
 
   let hasJSX = false;
   let hasExport = false;
 
-  traverse(ast, {
-    JSXElement(path) {
-      hasJSX = true;
-
-      if (hasExport) {
-        path.stop();
-      }
-    },
-    JSXFragment(path) {
+  walk(program, (node) => {
+    if (hasJSX && hasExport) {
+      return false;
+    }
+    if (node.type === 'JSXElement' || node.type === 'JSXFragment') {
       hasJSX = true;
-
-      if (hasExport) {
-        path.stop();
-      }
-    },
-    ExportNamedDeclaration(path) {
-      hasExport = true;
-
-      if (hasJSX) {
-        path.stop();
-      }
-    },
-    ExportDefaultDeclaration(path) {
-      hasExport = true;
-
-      if (hasJSX) {
-        path.stop();
-      }
-    },
-    ExportAllDeclaration(path) {
+    } else if (
+      node.type === 'ExportNamedDeclaration' ||
+      node.type === 'ExportDefaultDeclaration' ||
+      node.type === 'ExportAllDeclaration'
+    ) {
       hasExport = true;
-
-      if (hasJSX) {
-        path.stop();
-      }
-    },
+    }
   });
 
   return hasJSX && hasExport;
diff --git a/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.test.ts b/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.test.ts
index 97dacac94a60..518fffea5990 100644
--- a/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.test.ts
+++ b/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.test.ts
@@ -48,25 +48,22 @@ describe('success', () => {
         } satisfies Story;
         
       + export const EmptyDuplicated = {} satisfies Story;
-      + export const EmptyWithCommentDuplicated = {} satisfies Story;
+      + export const EmptyWithCommentDuplicated = {
+      +   // this is a useless comment, to test that it is preserved
+      + } satisfies Story;
       + export const OnlyArgsDuplicated = {} satisfies Story;
-      + 
       + export const RenderNoArgsDuplicated = {
       +   render: (args) => <MyComponent {...args} />,
       + } satisfies Story;
-      + 
       + export const RenderArgsDuplicated = {
       +   render: (args) => <MyComponent {...args} />,
       + } satisfies Story;
-      + 
       + export const RenderExistingArgsDuplicated = {
       +   render: (args) => <MyComponent {...args} />,
       + } satisfies Story;
-      + 
       + export const OrderedArgsDuplicated = {
       +   render: (args) => <MyComponent {...args} />,
       + } satisfies Story;
-      + 
       + export const HasPlayFunctionDuplicated = {
       +   play: async ({ canvasElement }) => {
       +     console.log("play");
@@ -106,13 +103,8 @@ describe('success', () => {
         
       + export const EmptyDuplicated = meta.story({});
       + export const WithArgsDuplicated = meta.story({});
-      + 
       + export const TypedDuplicated = meta
-      +   .type<{
-      +     args: {
-      +       icon: string;
-      +     };
-      +   }>()
+      +   .type<{ args: { icon: string } }>()
       +   .story({});
       + "
     `);
diff --git a/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.ts b/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.ts
index c2c834726f7c..b54f2ef6bfeb 100644
--- a/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.ts
+++ b/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.ts
@@ -1,62 +1,57 @@
-import { types as t, traverse } from 'storybook/internal/babel';
 import type { CsfFile } from 'storybook/internal/csf-tools';
 
+import { type E, type Node, identifierKey, walk } from '../../../csf-tools/estree/ast.ts';
+import {
+  SourceEditor,
+  appendStatement,
+  objectList,
+  removeFromList,
+} from '../../../csf-tools/estree/editor.ts';
 import { SaveStoryError } from './utils.ts';
 
 type In = ReturnType<CsfFile['parse']>;
 
+// Returns the new story's initializer, copied without `args` for the caller to fill in.
 export const duplicateStoryWithNewName = (csfFile: In, storyName: string, newStoryName: string) => {
   const node = csfFile._storyExports[storyName];
-  const cloned = t.cloneNode(node) as t.VariableDeclarator;
-
-  if (!cloned) {
+  if (node?.type !== 'VariableDeclarator' || !node.init) {
     throw new SaveStoryError(`cannot clone Node`);
   }
-
-  let found = false;
-  traverse(cloned, {
-    Identifier(path) {
-      if (found) {
-        return;
-      }
-
-      if (path.node.name === storyName) {
-        found = true;
-        path.node.name = newStoryName;
-      }
-    },
-    ObjectProperty(path) {
-      const key = path.get('key');
-      if (key.isIdentifier() && key.node.name === 'args') {
-        path.remove();
-      }
-    },
-
-    noScope: true,
-  });
+  const init = node.init as Node;
 
   const isCsf4Story =
-    t.isCallExpression(cloned.init) &&
-    t.isMemberExpression(cloned.init.callee) &&
-    t.isIdentifier(cloned.init.callee.property) &&
-    cloned.init.callee.property.name === 'story';
+    init.type === 'CallExpression' &&
+    init.callee.type === 'MemberExpression' &&
+    init.callee.property.type === 'Identifier' &&
+    init.callee.property.name === 'story';
 
   // detect CSF2 and throw
-  if (
-    !isCsf4Story &&
-    (t.isArrowFunctionExpression(cloned.init) || t.isCallExpression(cloned.init))
-  ) {
+  if (!isCsf4Story && (init.type === 'ArrowFunctionExpression' || init.type === 'CallExpression')) {
     throw new SaveStoryError(`Creating a new story based on a CSF2 story is not supported`);
   }
 
-  traverse(csfFile._ast, {
-    Program(path) {
-      path.pushContainer(
-        'body',
-        t.exportNamedDeclaration(t.variableDeclaration('const', [cloned]))
-      );
-    },
+  const copy = new SourceEditor(`(${csfFile._editor.source(init)})`, csfFile._options.fileName);
+  walk(copy.program, (child) => {
+    if (child.type !== 'ObjectExpression') {
+      return;
+    }
+    const args = child.properties.filter(
+      (property): property is E.ObjectProperty =>
+        property.type === 'Property' && !property.computed && identifierKey(property) === 'args'
+    );
+    if (args.length > 0) {
+      removeFromList(copy, objectList(child), args);
+    }
   });
+  const initCode = copy.toString().slice(1, -1);
+  const typeAnnotation =
+    node.id.type === 'Identifier' && node.id.typeAnnotation
+      ? csfFile._editor.source(node.id.typeAnnotation)
+      : '';
+
+  appendStatement(csfFile._editor, `export const ${newStoryName}${typeAnnotation} = ${initCode};`);
+  csfFile._commit();
 
-  return cloned;
+  const duplicated = csfFile._storyExports[newStoryName];
+  return (duplicated?.type === 'VariableDeclarator' ? duplicated.init : duplicated) as Node;
 };
diff --git a/code/core/src/core-server/utils/save-story/save-story.ts b/code/core/src/core-server/utils/save-story/save-story.ts
index ede1c55a99fc..c50e6943d704 100644
--- a/code/core/src/core-server/utils/save-story/save-story.ts
+++ b/code/core/src/core-server/utils/save-story/save-story.ts
@@ -1,7 +1,6 @@
 import { writeFile } from 'node:fs/promises';
 import { basename, isAbsolute, join, relative } from 'node:path';
 
-import { types as t } from 'storybook/internal/babel';
 import type { Channel } from 'storybook/internal/channels';
 import { formatFileContent, getProjectRoot } from 'storybook/internal/common';
 import type {
@@ -21,6 +20,7 @@ import { logger } from 'storybook/internal/node-logger';
 import { isExampleStoryId, telemetry } from 'storybook/internal/telemetry';
 import type { Options } from 'storybook/internal/types';
 
+import { isValidIdentifier } from '../../../csf-tools/estree/ast.ts';
 import { duplicateStoryWithNewName } from './duplicate-story-with-new-name.ts';
 import { updateArgsInCsfFile } from './update-args-in-csf-file.ts';
 import { SaveStoryError } from './utils.ts';
@@ -33,23 +33,6 @@ const parseArgs = (args: string): Record<string, any> =>
     return value;
   });
 
-// Removes extra newlines between story properties. See https://github.com/benjamn/recast/issues/242
-// Only updates the part of the code for the story with the given name.
-const removeExtraNewlines = (code: string, name: string) => {
-  const anything = '([\\s\\S])'; // Multiline match for any character.
-  const newline = '(\\r\\n|\\r|\\n)'; // Either newlines or carriage returns may be used in the file.
-  const closing = newline + '};' + newline; // Marks the end of the story definition.
-  const regex = new RegExp(
-    // Looks for an export by the given name, considers the first closing brace on its own line
-    // to be the end of the story definition.
-    `^(?<before>${anything}*)(?<story>export const ${name} =${anything}+?${closing})(?<after>${anything}*)$`
-  );
-  const { before, story, after } = code.match(regex)?.groups || {};
-  return story
-    ? before + story.replaceAll(/(\r\n|\r|\n)(\r\n|\r|\n)([ \t]*[a-z0-9_]+): /gi, '$2$3:') + after
-    : code;
-};
-
 export function initializeSaveStory(channel: Channel, options: Options) {
   channel.on(SAVE_STORY_REQUEST, async ({ id, payload }: RequestData<SaveStoryRequestPayload>) => {
     const { csfId, importPath, args, name } = payload;
@@ -61,7 +44,7 @@ export function initializeSaveStory(channel: Channel, options: Options) {
     let sourceStoryName: string | undefined;
 
     try {
-      if (name && !t.isValidIdentifier(name)) {
+      if (name && !isValidIdentifier(name)) {
         throw new SaveStoryError(`Invalid story name: ${JSON.stringify(name)}`);
       }
 
@@ -99,14 +82,12 @@ export function initializeSaveStory(channel: Channel, options: Options) {
       sourceStoryName = storyNameFromExport(storyName);
 
       await updateArgsInCsfFile(
+        parsed,
         name ? duplicateStoryWithNewName(parsed, storyName, name) : csf.getStoryExport(storyName),
         args ? parseArgs(args) : {}
       );
 
-      const code = await formatFileContent(
-        sourceFilePath,
-        removeExtraNewlines(printCsf(csf).code, name || storyName)
-      );
+      const code = await formatFileContent(sourceFilePath, printCsf(csf).code);
 
       // Writing the CSF file should trigger HMR, which causes the story to rerender. Delay the
       // response until that happens, but don't wait too long.
diff --git a/code/core/src/core-server/utils/save-story/update-args-in-csf-file.test.ts b/code/core/src/core-server/utils/save-story/update-args-in-csf-file.test.ts
index f5799fd6c1cc..dc15d6fb8046 100644
--- a/code/core/src/core-server/utils/save-story/update-args-in-csf-file.test.ts
+++ b/code/core/src/core-server/utils/save-story/update-args-in-csf-file.test.ts
@@ -35,7 +35,7 @@ describe('success', () => {
     const nodes = names.map((name) => CSF.getStoryExport(name));
 
     nodes.forEach((node) => {
-      updateArgsInCsfFile(node, newArgs);
+      updateArgsInCsfFile(parsed, node, newArgs);
     });
 
     const after = await format(printCsf(parsed).code, {
@@ -104,7 +104,7 @@ describe('success', () => {
     const nodes = names.map((name) => CSF.getStoryExport(name));
 
     for (const node of nodes) {
-      await expect(() => updateArgsInCsfFile(node, newArgs)).rejects.toThrowError();
+      await expect(() => updateArgsInCsfFile(parsed, node, newArgs)).rejects.toThrowError();
     }
   });
   test('CSF Variances', async () => {
@@ -120,7 +120,7 @@ describe('success', () => {
     const nodes = names.map((name) => CSF.getStoryExport(name));
 
     nodes.forEach((node) => {
-      updateArgsInCsfFile(node, newArgs);
+      updateArgsInCsfFile(parsed, node, newArgs);
     });
 
     const after = await format(printCsf(parsed).code, {
@@ -149,9 +149,8 @@ describe('success', () => {
       + 
         
         export const EmptyWithComment = {
+          // this is a useless comment, to test that it is preserved
         
-      -   // this is a useless comment, to test that it is preserved
-      - 
       +   args: {
       +     bordered: true,
       +     initial: "test1",
@@ -175,7 +174,6 @@ describe('success', () => {
       +     bordered: true,
       +     initial: "test1",
       +   },
-      + 
       + 
           render: (args) => <MyComponent {...args} />,
         } satisfies Story;
@@ -246,7 +244,7 @@ describe('success', () => {
     const nodes = names.map((name) => CSF.getStoryExport(name));
 
     nodes.forEach((node) => {
-      updateArgsInCsfFile(node, newArgs);
+      updateArgsInCsfFile(parsed, node, newArgs);
     });
 
     const after = await format(printCsf(parsed).code, {
@@ -310,7 +308,7 @@ describe('success', () => {
       if (node === undefined) {
         return;
       }
-      updateArgsInCsfFile(node, newArgs);
+      updateArgsInCsfFile(parsed, node, newArgs);
     });
 
     const after = await format(printCsf(parsed).code, {
@@ -368,7 +366,7 @@ describe('success', () => {
       if (node === undefined) {
         return;
       }
-      updateArgsInCsfFile(node, newArgs);
+      updateArgsInCsfFile(parsed, node, newArgs);
     });
 
     const after = await format(printCsf(parsed).code, {
@@ -426,11 +424,9 @@ describe('success', () => {
       +     myFunction: () => {},
       +     myNull: null,
       +     myNumber: 41,
-      + 
       +     myObject: {
       +       FOO: "BAR",
       +     },
-      + 
       +     myString: "FOO",
       +     myUndefined: undefined,
       +   },
diff --git a/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts b/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts
index 7c7cca8aef8c..45848274f87c 100644
--- a/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts
+++ b/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts
@@ -1,127 +1,84 @@
-import { types as t, traverse } from 'storybook/internal/babel';
+import type { CsfFile } from 'storybook/internal/csf-tools';
 
+import {
+  type E,
+  type Node,
+  identifierKey,
+  isValidIdentifier,
+  walk,
+} from '../../../csf-tools/estree/ast.ts';
+import { appendMembers, prependMembers, replaceValue } from '../../../csf-tools/estree/editor.ts';
 import { SaveStoryError } from './utils.ts';
-import { valueToAST } from './valueToAST.ts';
+import { objectSource, valueToSource } from './valueToSource.ts';
 
-export const updateArgsInCsfFile = async (node: t.Node, input: Record<string, any>) => {
-  let found = false;
+// Edits accumulate on `csf`; print them with `printCsf`.
+export const updateArgsInCsfFile = async (csf: CsfFile, node: Node, input: Record<string, any>) => {
+  const editor = csf._editor;
   const args = Object.fromEntries(
     Object.entries(input).map(([k, v]) => {
-      if (!t.isValidIdentifier(k, false)) {
+      if (!isValidIdentifier(k, false)) {
         throw new SaveStoryError(`Invalid arg name: ${JSON.stringify(k)}`);
       }
-      return [k, valueToAST(v)];
+      return [k, valueToSource(v, editor.quote)];
     })
   );
 
   const isCsf4Story =
-    t.isCallExpression(node) &&
-    t.isMemberExpression(node.callee) &&
-    t.isIdentifier(node.callee.property) &&
+    node.type === 'CallExpression' &&
+    node.callee.type === 'MemberExpression' &&
+    node.callee.property.type === 'Identifier' &&
     node.callee.property.name === 'story';
 
   // detect CSF2 and throw
-  if (!isCsf4Story && (t.isArrowFunctionExpression(node) || t.isCallExpression(node))) {
+  if (!isCsf4Story && (node.type === 'ArrowFunctionExpression' || node.type === 'CallExpression')) {
     throw new SaveStoryError(`Updating a CSF2 story is not supported`);
   }
 
-  if (t.isObjectExpression(node)) {
-    const properties = node.properties;
-    const argsProperty = properties.find((property) => {
-      if (t.isObjectProperty(property)) {
-        const key = property.key;
-        return t.isIdentifier(key) && key.name === 'args';
-      }
+  // The story object itself, or the first object inside it (e.g. the `meta.story({ … })` argument).
+  let story: E.ObjectExpression | undefined;
+  walk(node, (child) => {
+    if (story) {
+      return false;
+    }
+    if (child.type === 'ObjectExpression') {
+      story = child;
       return false;
-    });
-
-    if (argsProperty) {
-      if (t.isObjectProperty(argsProperty)) {
-        const a = argsProperty.value;
-        if (t.isObjectExpression(a)) {
-          a.properties.forEach((p) => {
-            if (t.isObjectProperty(p)) {
-              const key = p.key;
-              if (t.isIdentifier(key) && key.name in args) {
-                p.value = args[key.name];
-                delete args[key.name];
-              }
-            }
-          });
-
-          const remainder = Object.entries(args);
-          if (Object.keys(args).length) {
-            remainder.forEach(([key, value]) => {
-              a.properties.push(t.objectProperty(t.identifier(key), value));
-            });
-          }
-        }
-      }
-    } else {
-      properties.unshift(
-        t.objectProperty(
-          t.identifier('args'),
-          t.objectExpression(
-            Object.entries(args).map(([key, value]) => t.objectProperty(t.identifier(key), value))
-          )
-        )
-      );
     }
+  });
+  if (!story) {
     return;
   }
 
-  traverse(node, {
-    ObjectExpression(path) {
-      if (found) {
-        return;
-      }
-
-      found = true;
-      const properties = path.get('properties');
-      const argsProperty = properties.find((property) => {
-        if (property.isObjectProperty()) {
-          const key = property.get('key');
-          return key.isIdentifier() && key.node.name === 'args';
-        }
-        return false;
-      });
+  const argsProperty = story.properties.find(
+    (property): property is E.ObjectProperty =>
+      property.type === 'Property' && !property.computed && identifierKey(property) === 'args'
+  );
 
-      if (argsProperty) {
-        if (argsProperty.isObjectProperty()) {
-          const a = argsProperty.get('value');
-          if (a.isObjectExpression()) {
-            a.traverse({
-              ObjectProperty(p) {
-                const key = p.get('key');
-                if (key.isIdentifier() && key.node.name in args) {
-                  p.get('value').replaceWith(args[key.node.name]);
-                  delete args[key.node.name];
-                }
-              },
-              noScope: true,
-            });
+  if (!argsProperty) {
+    prependMembers(editor, story, [
+      `args: ${objectSource(Object.entries(args).map(([key, value]) => `${key}: ${value}`))}`,
+    ]);
+    return;
+  }
 
-            const remainder = Object.entries(args);
-            if (Object.keys(args).length) {
-              remainder.forEach(([key, value]) => {
-                a.pushContainer('properties', t.objectProperty(t.identifier(key), value));
-              });
-            }
-          }
-        }
-      } else {
-        path.unshiftContainer(
-          'properties',
-          t.objectProperty(
-            t.identifier('args'),
-            t.objectExpression(
-              Object.entries(args).map(([key, value]) => t.objectProperty(t.identifier(key), value))
-            )
-          )
-        );
-      }
-    },
+  if (argsProperty.value.type !== 'ObjectExpression') {
+    return;
+  }
+  for (const property of argsProperty.value.properties) {
+    const key =
+      property.type === 'Property' && !property.computed ? identifierKey(property) : undefined;
+    if (property.type === 'Property' && key && key in args) {
+      replaceValue(editor, property, args[key]);
+      delete args[key];
+    }
+  }
 
-    noScope: true,
-  });
+  const remainder = Object.entries(args);
+  if (remainder.length > 0) {
+    appendMembers(
+      editor,
+      argsProperty.value,
+      remainder.map(([key, value]) => `${key}: ${value}`)
+    );
+  }
 };
diff --git a/code/core/src/core-server/utils/save-story/valueToAST.ts b/code/core/src/core-server/utils/save-story/valueToAST.ts
deleted file mode 100644
index 72fe823aad31..000000000000
--- a/code/core/src/core-server/utils/save-story/valueToAST.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { parser, types as t } from 'storybook/internal/babel';
-
-export function valueToAST<T>(literal: T): any {
-  if (literal === null) {
-    return t.nullLiteral();
-  }
-  switch (typeof literal) {
-    case 'function':
-      const ast = parser.parse(literal.toString(), {
-        allowReturnOutsideFunction: true,
-        allowSuperOutsideMethod: true,
-      });
-
-      // @ts-expect-error (it's the contents of the function, it's an expression, trust me)
-      return ast.program.body[0]?.expression;
-
-    case 'number':
-      return t.numericLiteral(literal);
-    case 'string':
-      return t.stringLiteral(literal);
-    case 'boolean':
-      return t.booleanLiteral(literal);
-    case 'undefined':
-      return t.identifier('undefined');
-    default:
-      if (Array.isArray(literal)) {
-        return t.arrayExpression(literal.map(valueToAST));
-      }
-      return t.objectExpression(
-        Object.keys(literal)
-          .filter((k) => {
-            // @ts-expect-error (it's a completely unknown object)
-            const value = literal[k];
-            return typeof value !== 'undefined';
-          })
-          .map((k) => {
-            // @ts-expect-error (it's a completely unknown object)
-            const value = literal[k];
-            return t.objectProperty(t.stringLiteral(k), valueToAST(value));
-          })
-      );
-  }
-}
diff --git a/code/core/src/core-server/utils/save-story/valueToSource.ts b/code/core/src/core-server/utils/save-story/valueToSource.ts
new file mode 100644
index 000000000000..9cfa745a49af
--- /dev/null
+++ b/code/core/src/core-server/utils/save-story/valueToSource.ts
@@ -0,0 +1,33 @@
+import { printString } from '../../../csf-tools/estree/editor.ts';
+
+export function valueToSource<T>(literal: T, quote = '"'): string {
+  if (literal === null) {
+    return 'null';
+  }
+  switch (typeof literal) {
+    case 'function':
+      return literal.toString();
+    case 'number':
+    case 'boolean':
+      return String(literal);
+    case 'string':
+      return printString(literal, quote);
+    case 'undefined':
+      return 'undefined';
+    default:
+      if (Array.isArray(literal)) {
+        return `[${literal.map((item) => valueToSource(item, quote)).join(', ')}]`;
+      }
+      return objectSource(
+        Object.entries(literal as Record<string, unknown>)
+          .filter(([, value]) => typeof value !== 'undefined')
+          .map(([key, value]) => `${printString(key, quote)}: ${valueToSource(value, quote)}`)
+      );
+  }
+}
+
+// An object literal laid out one member per line, so formatters keep it expanded.
+export const objectSource = (members: string[]) =>
+  members.length === 0
+    ? '{}'
+    : `{\n${members.map((member) => `  ${member.split('\n').join('\n  ')},`).join('\n')}\n}`;
diff --git a/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts b/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts
index 10f34e07eaba..e45958608fa3 100644
--- a/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts
+++ b/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts
@@ -1,12 +1,12 @@
 import { readFile } from 'node:fs/promises';
 
-import { type BabelFile, core } from 'storybook/internal/babel';
-import { babelParse } from 'storybook/internal/csf-tools';
 import type { StorybookConfig } from 'storybook/internal/types';
 
 import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
 
+import { locationOf, parseModule, walk } from '../../csf-tools/estree/ast.ts';
+
 export async function warnWhenUsingArgTypesRegex(
   previewConfigPath: string | undefined,
   config: StorybookConfig
@@ -23,34 +23,34 @@ export async function warnWhenUsingArgTypesRegex(
     ) ?? false;
 
   if (hasVisualTestAddon && previewConfigPath && previewContent.includes('argTypesRegex')) {
-    // @ts-expect-error File is not yet exposed, see https://github.com/babel/babel/issues/11350#issuecomment-644118606
-    const file: BabelFile = new core.File(
-      { filename: previewConfigPath },
-      { code: previewContent, ast: babelParse(previewContent) }
-    );
-
-    file.path.traverse({
-      Identifier: (path) => {
-        if (path.node.name === 'argTypesRegex') {
-          const message = dedent`
-            ${picocolors.bold('Attention')}: We've detected that you're using ${picocolors.cyan(
-              'actions.argTypesRegex'
-            )} together with the visual test addon:
-            
-            ${path.buildCodeFrameError(previewConfigPath).message}
-            
-            We recommend removing the ${picocolors.cyan(
-              'argTypesRegex'
-            )} and assigning explicit action with the ${picocolors.cyan(
-              'fn'
-            )} function from ${picocolors.cyan('storybook/test')} instead:
-            https://storybook.js.org/docs/essentials/actions#via-storybooktest-fn-spies
-            
-            The build used by the addon for snapshot testing doesn't take the regex into account, which can cause hard to debug problems when a snapshot depends on the presence of action props.
-          `;
-          console.warn(message);
-        }
-      },
+    const { program } = parseModule(previewContent, previewConfigPath);
+    walk(program, (node) => {
+      if (node.type === 'Identifier' && node.name === 'argTypesRegex') {
+        const message = dedent`
+          ${picocolors.bold('Attention')}: We've detected that you're using ${picocolors.cyan(
+            'actions.argTypesRegex'
+          )} together with the visual test addon:
+          
+          ${codeFrame(previewConfigPath, previewContent, node.start)}
+          
+          We recommend removing the ${picocolors.cyan(
+            'argTypesRegex'
+          )} and assigning explicit action with the ${picocolors.cyan(
+            'fn'
+          )} function from ${picocolors.cyan('storybook/test')} instead:
+          https://storybook.js.org/docs/essentials/actions#via-storybooktest-fn-spies
+          
+          The build used by the addon for snapshot testing doesn't take the regex into account, which can cause hard to debug problems when a snapshot depends on the presence of action props.
+        `;
+        console.warn(message);
+      }
     });
   }
 }
+
+// `file (line:column)` and the offending line with a marker under the identifier.
+const codeFrame = (fileName: string, code: string, index: number) => {
+  const { line, column } = locationOf(code, index, index).start;
+  const text = code.split('\n')[line - 1] ?? '';
+  return `${fileName}: (${line}:${column})\n> ${line} | ${text}\n  ${' '.repeat(String(line).length)} | ${' '.repeat(column)}^`;
+};
diff --git a/code/core/src/docs-tools/argTypes/convert/convert.test.ts b/code/core/src/docs-tools/argTypes/convert/convert.test.ts
index 4911759d50e7..bb09110dfb8b 100644
--- a/code/core/src/docs-tools/argTypes/convert/convert.test.ts
+++ b/code/core/src/docs-tools/argTypes/convert/convert.test.ts
@@ -2,7 +2,7 @@ import { readFileSync } from 'node:fs';
 
 import { describe, expect, it } from 'vitest';
 
-import { transformSync } from 'storybook/internal/babel';
+import { transformSync } from '@babel/core';
 
 import { mapValues } from 'es-toolkit/object';
 import requireFromString from 'require-from-string';
diff --git a/code/core/src/mocking-utils/extract.test.ts b/code/core/src/mocking-utils/extract.test.ts
index 2de77fb2ef1c..33c474fa245a 100644
--- a/code/core/src/mocking-utils/extract.test.ts
+++ b/code/core/src/mocking-utils/extract.test.ts
@@ -1,6 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { parse } from '@babel/parser';
 import { readFileSync } from 'fs';
 import { telemetry } from 'storybook/internal/telemetry';
 
@@ -41,8 +40,7 @@ vi.mock('storybook/internal/telemetry', () => ({
   telemetry: vi.fn(),
 }));
 
-const parser = (input: string) =>
-  parse(input, { sourceType: 'module', plugins: ['jsx', 'typescript'] });
+const parser = extractModule.parseModuleAst;
 
 describe('isModuleDirectory', () => {
   it('returns true for node_modules path', () => {
@@ -220,9 +218,9 @@ describe('extractMockCalls', () => {
 
       const result = extractModule.rewriteSbMockImportCalls(code);
       expect(result.code).toMatchInlineSnapshot(`
-        "sb.mock("./bar/baz", {
-          spy: true
-        });"
+        "
+                sb.mock("./bar/baz", { spy: true });
+              "
       `);
     });
 
@@ -233,7 +231,9 @@ describe('extractMockCalls', () => {
 
       const result = extractModule.rewriteSbMockImportCalls(code);
       expect(result.code).toMatchInlineSnapshot(`
-        "sb.mock("./bar/baz");"
+        "
+                sb.mock("./bar/baz");
+              "
       `);
     });
   });
diff --git a/code/core/src/mocking-utils/extract.ts b/code/core/src/mocking-utils/extract.ts
index 3c051c1fa947..7c6326b0f2f7 100644
--- a/code/core/src/mocking-utils/extract.ts
+++ b/code/core/src/mocking-utils/extract.ts
@@ -1,12 +1,13 @@
 import { readFileSync } from 'node:fs';
 
-import { generate, parser, types as t } from 'storybook/internal/babel';
 import { logger } from 'storybook/internal/node-logger';
 import { telemetry } from 'storybook/internal/telemetry';
 import type { CoreConfig } from 'storybook/internal/types';
 
 import { transformSync } from 'esbuild';
 import { walk } from 'estree-walker';
+import MagicString from 'magic-string';
+import { parseSync } from 'oxc-parser';
 import { basename, normalize } from 'pathe';
 
 import { resolveMock } from './resolve.ts';
@@ -34,25 +35,23 @@ interface ExtractMockCallsOptions {
   configDir: string;
 }
 
-/**
- * A wrapper around the babel parser that enables the necessary plugins to handle modern JavaScript
- * features, including TSX.
- *
- * @param code - The code to parse.
- * @returns The parsed code.
- */
-export const babelParser = (code: string) => {
-  return parser.parse(code, {
-    sourceType: 'module',
-    // Enable plugins to handle modern JavaScript features, including TSX.
-    plugins: ['typescript', 'jsx', 'classProperties', 'objectRestSpread'],
-    errorRecovery: true,
-  }).program;
-};
+/** Parse a module, TSX included, into an ESTree program without throwing on syntax errors. */
+export const parseModuleAst = (code: string) => parseSync('file.tsx', code).program;
+
+/** @deprecated Use `parseModuleAst`. It returns an ESTree program, no longer a Babel AST. */
+export const babelParser = parseModuleAst;
+
+const isStringLiteral = (node: any): boolean =>
+  node?.type === 'Literal' && typeof node.value === 'string';
+
+// `import('foo')`, whose specifier `sb.mock` accepts in place of the string.
+const isStaticImport = (node: any): boolean =>
+  node?.type === 'ImportExpression' && isStringLiteral(node.source);
 
 /** Utility to rewrite sb.mock(import('...'), ...) to sb.mock('...', ...) */
 export function rewriteSbMockImportCalls(code: string) {
-  const ast = babelParser(code);
+  const ast = parseModuleAst(code);
+  const edits = new MagicString(code);
 
   walk(ast as any, {
     enter(node: any) {
@@ -64,17 +63,20 @@ export function rewriteSbMockImportCalls(code: string) {
         node.callee.property.type === 'Identifier' &&
         node.callee.property.name === 'mock' &&
         node.arguments.length > 0 &&
-        node.arguments[0].type === 'CallExpression' &&
-        node.arguments[0].callee.type === 'Import' &&
-        node.arguments[0].arguments.length === 1 &&
-        node.arguments[0].arguments[0].type === 'StringLiteral'
+        isStaticImport(node.arguments[0])
       ) {
         // Replace sb.mock(import('foo'), ...) with sb.mock('foo', ...)
-        node.arguments[0] = t.stringLiteral(node.arguments[0].arguments[0].value);
+        const [argument] = node.arguments;
+        edits.overwrite(argument.start, argument.end, JSON.stringify(argument.source.value));
       }
     },
   });
-  return generate(ast, {}, code);
+  // Spread into a plain object: babel-loader, next in the webpack chain, rejects a string map.
+  const map = { ...edits.generateMap({ hires: true, includeContent: true }) };
+  return {
+    code: edits.toString(),
+    map: { ...map, sourcesContent: map.sourcesContent as string[] },
+  };
 }
 
 /**
@@ -90,7 +92,7 @@ export function extractMockCalls(
       allowReturnOutsideFunction?: boolean;
       jsx?: boolean;
     }
-  ) => t.Node,
+  ) => unknown,
   root: string,
   findMockRedirect: (
     root: string,
@@ -111,10 +113,10 @@ export function extractMockCalls(
       }
       for (const prop of objectExpression.properties) {
         if (
-          prop.type === 'ObjectProperty' &&
+          prop.type === 'Property' &&
           ((prop.key.type === 'Identifier' && prop.key.name === 'spy') ||
-            (prop.key.type === 'StringLiteral' && prop.key.value === 'spy')) &&
-          prop.value.type === 'BooleanLiteral' &&
+            (isStringLiteral(prop.key) && prop.key.value === 'spy')) &&
+          prop.value.type === 'Literal' &&
           prop.value.value === true
         ) {
           return true;
@@ -124,8 +126,7 @@ export function extractMockCalls(
     }
 
     walk(ast as any, {
-      // @ts-expect-error - Node comes from babel
-      async enter(node: t.Node) {
+      async enter(node: any) {
         if (
           node.type !== 'CallExpression' ||
           node.callee.type !== 'MemberExpression' ||
@@ -141,16 +142,12 @@ export function extractMockCalls(
           return;
         }
 
-        let path: string | undefined;
         // Support sb.mock('foo', ...) and sb.mock(import('foo'), ...)
-        if (node.arguments[0].type === 'StringLiteral') {
-          path = node.arguments[0].value as string;
-        } else if (
-          node.arguments[0].type === 'CallExpression' &&
-          node.arguments[0].callee.type === 'Import' &&
-          node.arguments[0].arguments[0].type === 'StringLiteral'
-        ) {
-          path = node.arguments[0].arguments[0].value;
+        let path: string;
+        if (isStringLiteral(node.arguments[0])) {
+          path = node.arguments[0].value;
+        } else if (isStaticImport(node.arguments[0])) {
+          path = node.arguments[0].source.value;
         } else {
           return;
         }

From db126f42933a0a94d864b3d30bb5ddf49d2fb208 Mon Sep 17 00:00:00 2001
From: Easton <easton.shin@marqvision.com>
Date: Tue, 13 Oct 2026 11:52:16 +0900
Subject: [PATCH 047/326] refactor(builders): parse mocked modules and CSF with
 the OXC-based helpers

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../csf-plugin/rollup-based-plugin.test.ts    | 29 ++++++++++---------
 .../src/csf-plugin/rollup-based-plugin.ts     |  9 +++---
 .../docs/src/csf-plugin/webpack-loader.ts     |  8 ++---
 .../plugins/storybook-optimize-deps-plugin.ts |  8 +++--
 .../src/plugins/vite-mock/plugin.ts           | 13 ++++++---
 .../storybook-mock-transform-loader.ts        |  2 +-
 .../src/loaders/webpack-automock-loader.ts    |  4 +--
 .../src/plugins/webpack-mock-plugin.ts        |  4 +--
 8 files changed, 41 insertions(+), 36 deletions(-)

diff --git a/code/addons/docs/src/csf-plugin/rollup-based-plugin.test.ts b/code/addons/docs/src/csf-plugin/rollup-based-plugin.test.ts
index 6cd48703c0a5..d73ebc0101c5 100644
--- a/code/addons/docs/src/csf-plugin/rollup-based-plugin.test.ts
+++ b/code/addons/docs/src/csf-plugin/rollup-based-plugin.test.ts
@@ -4,7 +4,7 @@ import { readFile } from 'node:fs/promises';
 import { SourceMap, type SourceMapPayload } from 'node:module';
 import { resolve } from 'node:path';
 
-import { formatCsf, loadCsf } from 'storybook/internal/csf-tools';
+import { formatCsf } from 'storybook/internal/csf-tools';
 import type { CsfEnricher } from 'storybook/internal/types';
 
 import MagicString from 'magic-string';
@@ -42,17 +42,18 @@ const originalCode = dedent`
   };
 `;
 
-const makeTitle = (title: string) => title || 'default';
-
-const reprint = (code: string) =>
-  formatCsf(
-    loadCsf(code, { makeTitle }).parse(),
-    { sourceMaps: true, sourceFileName: id },
-    code
-  ) as {
-    code: string;
-    map: SourceMapPayload;
+// An earlier transform in the chain, such as `vite-plugin-storybook-test`, that moves code down.
+const earlierTransform = (code: string) => {
+  const edited = new MagicString(code).prepend("import { setup } from 'earlier-transform';\n\n");
+  return {
+    code: edited.toString(),
+    map: edited.generateMap({
+      hires: 'boundary',
+      source: id,
+      includeContent: true,
+    }) as unknown as SourceMapPayload,
   };
+};
 
 const positionOf = (code: string, token: string) => {
   const line = code.split('\n').findIndex((text) => text.includes(token));
@@ -72,7 +73,7 @@ describe('rollupBasedPlugin', () => {
   });
 
   it('maps the output to the transform input instead of the combined sourcemap', async () => {
-    const input = reprint(originalCode);
+    const input = earlierTransform(originalCode);
     const inputPosition = positionOf(input.code, 'play:');
     expect(inputPosition.line).not.toBe(positionOf(originalCode, 'play:').line);
 
@@ -144,7 +145,7 @@ export const Primary = { args: { label: 'Primary' } };
 
     expect(code).toContain('component: "Button component"');
     expect(code).toContain('story: "The primary button"');
-    expect(code).toContain(`originalSource: "{\\n  args: {\\n    label: 'Primary'\\n  }\\n}"`);
+    expect(code).toContain(`originalSource: "{ args: { label: 'Primary' } }"`);
   });
 
   it('takes the original source from the story file when the code was transformed', async () => {
@@ -153,7 +154,7 @@ export const Primary = { args: { label: 'Primary' } };
     const code = await transform(transformed);
 
     expect(code).toContain(`label: 'Transformed'`);
-    expect(code).toContain(`originalSource: "{\\n  args: {\\n    label: 'Primary'\\n  }\\n}"`);
+    expect(code).toContain(`originalSource: "{ args: { label: 'Primary' } }"`);
   });
 
   it('leaves the source passed to enrichCsf hooks unenriched', async () => {
diff --git a/code/addons/docs/src/csf-plugin/rollup-based-plugin.ts b/code/addons/docs/src/csf-plugin/rollup-based-plugin.ts
index e8ad28c243ed..1cca39532878 100644
--- a/code/addons/docs/src/csf-plugin/rollup-based-plugin.ts
+++ b/code/addons/docs/src/csf-plugin/rollup-based-plugin.ts
@@ -20,14 +20,13 @@ export async function transformCsf(
   const sourceCode = await readFile(id, 'utf-8');
   try {
     const makeTitle = (userTitle: string) => userTitle || 'default';
-    const csf = loadCsf(code, { makeTitle }).parse();
-    // Built-in enrichment reads each comment before it changes the meta node and only appends story
-    // statements, so it can share `csf`. An `enrichCsf` hook runs after the meta is changed, so it
-    // gets a separate parse.
+    const csf = loadCsf(code, { makeTitle, fileName: id }).parse();
+    // Enrichment edits the source text and leaves the parsed nodes untouched, so `csf` can double as
+    // the source. An `enrichCsf` hook may print the edited file, so it gets a separate parse.
     const csfSource =
       code === sourceCode && !options.enrichCsf ? csf : loadCsf(sourceCode, { makeTitle }).parse();
     await enrichCsf(csf, csfSource, options);
-    return formatCsf(csf, { sourceMaps: true, sourceFileName: id }, code);
+    return formatCsf(csf, { sourceMaps: true, sourceFileName: id });
   } catch (err: unknown) {
     // Any .stories file that fails to parse (legacy or broken) passes through unmodified so doc generation does not crash.
     const message = err instanceof Error ? err.message : String(err);
diff --git a/code/addons/docs/src/csf-plugin/webpack-loader.ts b/code/addons/docs/src/csf-plugin/webpack-loader.ts
index 3ac61a7e3e66..5751458a28da 100644
--- a/code/addons/docs/src/csf-plugin/webpack-loader.ts
+++ b/code/addons/docs/src/csf-plugin/webpack-loader.ts
@@ -19,14 +19,10 @@ async function loader(this: LoaderContext, content: string, map: any) {
     // The file can be gone by now, e.g. when it is deleted while a rebuild is running
     const sourceCode = await readFile(id, 'utf-8');
     const makeTitle = (userTitle: string) => userTitle || 'default';
-    const csf = loadCsf(content, { makeTitle }).parse();
+    const csf = loadCsf(content, { makeTitle, fileName: id }).parse();
     const csfSource = loadCsf(sourceCode, { makeTitle }).parse();
     await enrichCsf(csf, csfSource, options);
-    const formattedCsf = formatCsf(
-      csf,
-      { sourceMaps: true, inputSourceMap: map, sourceFileName: id },
-      content
-    );
+    const formattedCsf = formatCsf(csf, { sourceMaps: true });
 
     if (typeof formattedCsf === 'string') {
       return callback(null, formattedCsf, map);
diff --git a/code/builders/builder-vite/src/plugins/storybook-optimize-deps-plugin.ts b/code/builders/builder-vite/src/plugins/storybook-optimize-deps-plugin.ts
index 26517acb20e1..cc56dbcd513a 100644
--- a/code/builders/builder-vite/src/plugins/storybook-optimize-deps-plugin.ts
+++ b/code/builders/builder-vite/src/plugins/storybook-optimize-deps-plugin.ts
@@ -1,6 +1,10 @@
 import { loadPreviewOrConfigFile } from 'storybook/internal/common';
 import type { StoryIndexGenerator } from 'storybook/internal/core-server';
-import { babelParser, extractMockCalls, findMockRedirect } from 'storybook/internal/mocking-utils';
+import {
+  parseModuleAst,
+  extractMockCalls,
+  findMockRedirect,
+} from 'storybook/internal/mocking-utils';
 import type { Options, PreviewAnnotation, StoryIndex } from 'storybook/internal/types';
 
 import { resolve } from 'pathe';
@@ -65,7 +69,7 @@ export function storybookOptimizeDepsPlugin(options: Options): Plugin {
                 coreOptions: { disableTelemetry: true },
                 configDir: options.configDir,
               },
-              babelParser,
+              parseModuleAst,
               projectRoot,
               findMockRedirect
             )
diff --git a/code/builders/builder-vite/src/plugins/vite-mock/plugin.ts b/code/builders/builder-vite/src/plugins/vite-mock/plugin.ts
index 5e89a629f346..01a234216556 100644
--- a/code/builders/builder-vite/src/plugins/vite-mock/plugin.ts
+++ b/code/builders/builder-vite/src/plugins/vite-mock/plugin.ts
@@ -1,7 +1,7 @@
 import { readFileSync } from 'node:fs';
 
 import {
-  babelParser,
+  parseModuleAst,
   extractMockCalls,
   findMockRedirect,
   getAutomockCode,
@@ -56,7 +56,7 @@ export function viteMockPlugin(options: MockPluginOptions): Plugin[] {
       },
 
       buildStart() {
-        mockCalls = extractMockCalls(options, babelParser, viteConfig.root, findMockRedirect);
+        mockCalls = extractMockCalls(options, parseModuleAst, viteConfig.root, findMockRedirect);
       },
 
       configureServer(server) {
@@ -65,7 +65,12 @@ export function viteMockPlugin(options: MockPluginOptions): Plugin[] {
             // Store the old mocks before updating
             const oldMockCalls = mockCalls;
             // Re-extract mocks to get the latest list
-            mockCalls = extractMockCalls(options, babelParser, viteConfig.root, findMockRedirect);
+            mockCalls = extractMockCalls(
+              options,
+              parseModuleAst,
+              viteConfig.root,
+              findMockRedirect
+            );
 
             // Invalidate the preview file
             const previewMod = server.moduleGraph.getModuleById(options.previewConfigPath);
@@ -144,7 +149,7 @@ export function viteMockPlugin(options: MockPluginOptions): Plugin[] {
 
             try {
               if (!call.redirectPath) {
-                const automockedCode = getAutomockCode(code, call.spy, babelParser as any);
+                const automockedCode = getAutomockCode(code, call.spy, parseModuleAst as any);
 
                 return {
                   code: automockedCode.toString(),
diff --git a/code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.ts b/code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.ts
index f89f32ca83a8..33f5b2196c7e 100644
--- a/code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.ts
+++ b/code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.ts
@@ -18,7 +18,7 @@ const storybookMockTransformLoader: LoaderDefinition = function mockTransformLoa
 
   try {
     const result = rewriteSbMockImportCalls(source);
-    callback(null, result.code, result.map || undefined, meta);
+    callback(null, result.code, { ...result.map, file: this.resourcePath }, meta);
   } catch (error) {
     const filePath = this.resourcePath;
     logger.debug(`Could not transform sb.mock(import(...)) calls in ${filePath}: ${error}`);
diff --git a/code/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts b/code/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts
index 343140306834..84fba0984b0d 100644
--- a/code/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts
+++ b/code/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts
@@ -1,4 +1,4 @@
-import { babelParser, getAutomockCode } from 'storybook/internal/mocking-utils';
+import { parseModuleAst, getAutomockCode } from 'storybook/internal/mocking-utils';
 
 import type { LoaderContext } from 'webpack';
 
@@ -31,7 +31,7 @@ export default function webpackAutomockLoader(
   const isSpy = options.spy === 'true';
 
   // Generate the mocked source code using the utility from @vitest/mocker.
-  const mocked = getAutomockCode(source, isSpy, babelParser as any);
+  const mocked = getAutomockCode(source, isSpy, parseModuleAst as any);
 
   // Return the transformed code to Webpack for further processing.
   return mocked.toString();
diff --git a/code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts b/code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts
index 74f0cd1b9c7f..d36ba0a4c654 100644
--- a/code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts
+++ b/code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts
@@ -2,7 +2,7 @@ import { dirname, isAbsolute } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 import {
-  babelParser,
+  parseModuleAst,
   extractMockCalls,
   findMockRedirect,
   getIsExternal,
@@ -158,7 +158,7 @@ export class WebpackMockPlugin {
     // Use extractMockCalls to get all mocks from the transformed preview file
     const mocks = extractMockCalls(
       { previewConfigPath, configDir: dirname(previewConfigPath) },
-      babelParser,
+      parseModuleAst,
       compiler.context,
       findMockRedirect
     );

From ebc35849cfcf6609e09cde814b3da020412747b5 Mon Sep 17 00:00:00 2001
From: Easton <easton.shin@marqvision.com>
Date: Tue, 13 Oct 2026 11:52:16 +0900
Subject: [PATCH 048/326] refactor(react): build component manifests and
 snippets from ESTree nodes

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../buildReactComponentDocgen.ts              |   8 +-
 .../generateCodeSnippet.test.tsx              | 143 ++--
 .../componentManifest/generateCodeSnippet.ts  | 630 +++++++-----------
 .../src/componentManifest/generator.test.ts   |  18 +-
 .../componentManifest/getComponentImports.ts  |  78 +--
 .../src/componentManifest/reactDocgen.ts      |  16 +-
 .../componentManifest/resolveComponents.ts    |  11 +-
 code/renderers/react/src/enrichCsf.test.ts    |  59 +-
 code/renderers/react/src/enrichCsf.ts         |  59 +-
 9 files changed, 389 insertions(+), 633 deletions(-)

diff --git a/code/renderers/react/src/componentManifest/buildReactComponentDocgen.ts b/code/renderers/react/src/componentManifest/buildReactComponentDocgen.ts
index 219f566ee209..afbaabf3a50e 100644
--- a/code/renderers/react/src/componentManifest/buildReactComponentDocgen.ts
+++ b/code/renderers/react/src/componentManifest/buildReactComponentDocgen.ts
@@ -4,6 +4,7 @@ import {
   createStoryReferenceResolver,
   extractComponentDescription,
   extractDescription,
+  storyShapeError,
 } from 'storybook/internal/csf-tools';
 import type {
   ComponentManifest,
@@ -356,13 +357,14 @@ export function buildComponentDocgenFromResolved({
       error: docgenError ?? {
         name: error.name,
         message:
-          (csf._metaStatementPath?.buildCodeFrameError(error.message).message ?? error.message) +
-          `\n\n${entry.importPath}:\n${storyFile}`,
+          (csf._metaStatement
+            ? storyShapeError(error.message, csf._metaStatement, csf._editor).message
+            : error.message) + `\n\n${entry.importPath}:\n${storyFile}`,
       },
     };
   }
 
-  const metaJsDoc = extractDescription(csf._metaStatement) || undefined;
+  const metaJsDoc = extractDescription(csf._metaStatement, csf._editor) || undefined;
   const { description, summary, jsDocTags } = extractComponentDescription(
     metaJsDoc,
     docgenDescription,
diff --git a/code/renderers/react/src/componentManifest/generateCodeSnippet.test.tsx b/code/renderers/react/src/componentManifest/generateCodeSnippet.test.tsx
index 0bc5dc4dea73..4e0c72537cdc 100644
--- a/code/renderers/react/src/componentManifest/generateCodeSnippet.test.tsx
+++ b/code/renderers/react/src/componentManifest/generateCodeSnippet.test.tsx
@@ -1,6 +1,5 @@
 import { expect, test } from 'vitest';
 
-import { recast, types as t } from 'storybook/internal/babel';
 import { loadCsf } from 'storybook/internal/csf-tools';
 
 import { dedent } from 'ts-dedent';
@@ -11,10 +10,10 @@ function generateExample(code: string) {
   const csf = loadCsf(code, { makeTitle: (userTitle?: string) => userTitle ?? 'title' }).parse();
 
   const snippets = Object.keys(csf._storyExports).map(
-    (name) => getCodeSnippet(csf, name, csf._meta?.component ?? 'ComponentTitle').node
+    (name) => getCodeSnippet(csf, name, csf._meta?.component ?? 'ComponentTitle').code
   );
 
-  return recast.print(t.program(snippets)).code;
+  return snippets.join('\n');
 }
 
 /** Snippet plus what it still depends on, for the cases that resolve names rather than values. */
@@ -24,7 +23,7 @@ function generateResolved(code: string) {
   return Object.keys(csf._storyExports).map((name) => {
     const snippet = getCodeSnippet(csf, name, csf._meta?.component ?? 'ComponentTitle');
     return {
-      snippet: recast.print(snippet.node).code,
+      snippet: snippet.code,
       imports: snippet.imports.map((ref) => `${ref.importName} from ${ref.importId}`),
       unresolved: snippet.unresolved,
     };
@@ -106,14 +105,7 @@ test('Edge case identifier we can not find', () => {
     export const Default = someImportOrWhatever;
   `);
   expect(() => generateExample(input)).toThrowErrorMatchingInlineSnapshot(
-    `
-    [SyntaxError: Expected story to be csf factory, function or an object expression
-      11 |
-      12 |
-    > 13 |     export const Default = someImportOrWhatever;
-         |                            ^^^^^^^^^^^^^^^^^^^^
-      14 |   ]
-  `
+    `[SyntaxError: Expected story to be csf factory, function or an object expression (13:27)]`
   );
 });
 
@@ -186,14 +178,9 @@ test('Object', () => {
       }
     };
   `);
-  expect(generateExample(input)).toMatchInlineSnapshot(`
-    "const ObjectArgs = () => <Button
-        string="string"
-        number={1}
-        object={{ an: 'object'}}
-        complexObject={{...{a: 1}, an: 'object'}}
-        array={[1,2,3]}>Click me</Button>;"
-  `);
+  expect(generateExample(input)).toMatchInlineSnapshot(
+    `"const ObjectArgs = () => <Button string="string" number={1} object={{ an: 'object'}} complexObject={{...{a: 1}, an: 'object'}} array={[1,2,3]}>Click me</Button>;"`
+  );
 });
 
 test('CSF1', () => {
@@ -258,11 +245,9 @@ test('render: Template (identifier referencing local function declaration)', ()
     function Template(args) { return <Button {...args} label="String"></Button> }
     export const Interactive: Story = { render: Template }
   `);
-  expect(generateExample(input)).toMatchInlineSnapshot(`
-    "function Interactive() {
-        return <Button label="String">Click me</Button>;
-    }"
-  `);
+  expect(generateExample(input)).toMatchInlineSnapshot(
+    `"function Interactive() { return <Button label="String">Click me</Button> }"`
+  );
 });
 
 test('render: Template (identifier referencing unresolvable function)', () => {
@@ -437,11 +422,7 @@ test('CustomRenderBlockBody only', async () => {
     };`
   );
   expect(generateExample(input)).toMatchInlineSnapshot(
-    `
-    "const CustomRenderBlockBody = () => {
-        return <Button foo="bar">Render</Button>;
-    };"
-  `
+    `"const CustomRenderBlockBody = () => { return <Button foo="bar">Render</Button> };"`
   );
 });
 
@@ -484,15 +465,9 @@ test('ObjectInvalidAttr only', async () => {
       args: { '1x': 'a', 'bad key': 'b', '@foo': 'c', '-dash': 'd' }
     };`
   );
-  expect(generateExample(input)).toMatchInlineSnapshot(`
-    "const ObjectInvalidAttr = () => <Button
-        {...{
-            "1x": 'a',
-            "bad key": 'b',
-            "@foo": 'c',
-            "-dash": 'd'
-        }}>Click me</Button>;"
-  `);
+  expect(generateExample(input)).toMatchInlineSnapshot(
+    `"const ObjectInvalidAttr = () => <Button {...{ "1x": 'a', "bad key": 'b', "@foo": 'c', "-dash": 'd' }}>Click me</Button>;"`
+  );
 });
 
 test('Inline nested args in child element (string)', () => {
@@ -562,11 +537,11 @@ test('Deeply nested prop replacement (string)', () => {
   expect(generateExample(input)).toMatchInlineSnapshot(
     `
     "const DeepNestedProp = () => <Button>
-        <Level1>
-            <Level2>
-                <Leaf val="bar" />
-            </Level2>
-        </Level1>
+      <Level1>
+        <Level2>
+          <Leaf val="bar" />
+        </Level2>
+      </Level1>
     </Button>;"
   `
   );
@@ -590,11 +565,11 @@ test('Deeply nested prop replacement (boolean)', () => {
   expect(generateExample(input)).toMatchInlineSnapshot(
     `
     "const DeepNestedBoolean = () => <Button>
-        <Level1>
-            <Level2>
-                <Leaf active />
-            </Level2>
-        </Level1>
+      <Level1>
+        <Level2>
+          <Leaf active />
+        </Level2>
+      </Level1>
     </Button>;"
   `
   );
@@ -615,9 +590,9 @@ test('Deeply nested children expression', () => {
   expect(generateExample(input)).toMatchInlineSnapshot(
     `
     "const DeepNestedChildren = () => <Button>
-        <Level1>
-            <Level2>Click me</Level2>
-        </Level1>
+      <Level1>
+        <Level2>Click me</Level2>
+      </Level1>
     </Button>;"
   `
   );
@@ -642,12 +617,12 @@ test('Deeply nested multiple replacements', () => {
   expect(generateExample(input)).toMatchInlineSnapshot(
     `
     "const DeepNestedMultiple = () => <Button>
-        <Level1>
-            <Leaf1 a="x" />
-            <Level2>
-                <Leaf2 b="y" />
-            </Level2>
-        </Level1>
+      <Level1>
+        <Leaf1 a="x" />
+        <Level2>
+          <Leaf2 b="y" />
+        </Level2>
+      </Level1>
     </Button>;"
   `
   );
@@ -672,12 +647,12 @@ test('Deeply nested multiple replacements and using args spread', () => {
   expect(generateExample(input)).toMatchInlineSnapshot(
     `
     "const DeepNestedMultiple = () => <Button a="x" b="y">
-        <Level1>
-            <Leaf1 a="x" />
-            <Level2>
-                <Leaf2 b="y" />
-            </Level2>
-        </Level1>
+      <Level1>
+        <Leaf1 a="x" />
+        <Level2>
+          <Leaf2 b="y" />
+        </Level2>
+      </Level1>
     </Button>;"
   `
   );
@@ -697,8 +672,8 @@ test('top level args injection and spreading in different places', async () => {
   `);
   expect(generateExample(input)).toMatchInlineSnapshot(`
     "const MultipleSpreads = () => <div count={0}>
-        <Button disabled={false} count={0} empty="">Click me</Button>
-        <Button disabled={false} count={0} empty="">Click me</Button>
+      <Button disabled={false} count={0} empty="">Click me</Button>
+      <Button disabled={false} count={0} empty="">Click me</Button>
     </div>;"
   `);
 });
@@ -715,11 +690,11 @@ test('allow top level export functions', async () => {
   `);
   expect(generateExample(input)).toMatchInlineSnapshot(`
     "function Usage() {
-        return (
-            <div style={{ padding: 40 }}>
-                <Button>Click me</Button>
-            </div>
-        );
+      return (
+        <div style={{ padding: 40 }}>
+          <Button>Click me</Button>
+        </div>
+      );
     }"
   `);
 });
@@ -734,7 +709,7 @@ test('render method shorthand resolves like a render function', () => {
   `);
   expect(generateExample(input)).toMatchInlineSnapshot(`
     "const Default = () => {
-        return <Button>method body</Button>;
+      return <Button>method body</Button>;
     };"
   `);
 });
@@ -874,7 +849,7 @@ test('args assigned to a function-declaration story are inlined', () => {
   `);
   expect(generateExample(input)).toMatchInlineSnapshot(`
     "function Usage() {
-        return <Button label="assigned">Click me</Button>;
+      return <Button label="assigned">Click me</Button>;
     }"
   `);
 });
@@ -908,7 +883,7 @@ test('a body still reading args after a partial inline keeps the parameter', ()
   `);
   expect(generateExample(input)).toMatchInlineSnapshot(`
     "function Usage(args) {
-        return <Button label="assigned" title={args.notAnArg}>Click me</Button>;
+      return <Button label="assigned" title={args.notAnArg}>Click me</Button>;
     }"
   `);
 });
@@ -919,14 +894,14 @@ test('an arg value keeps a shorthand property shorthand', () => {
     const base = { size: 'md' };
     export const Shorthand: Story = { args: { cfg: { dep, nested: { ...base } } } };
   `);
-  expect(generateExample(input)).toMatchInlineSnapshot(`
-    "const Shorthand = () => <Button
-        cfg={{
-            dep,
-
-            nested: {
-                size: 'md'
-            }
-        }}>Click me</Button>;"
-  `);
+  expect(generateExample(input)).toMatchInlineSnapshot(
+    `
+    "const Shorthand = () => <Button cfg={{
+      dep,
+      nested: {
+        size: 'md'
+      }
+    }}>Click me</Button>;"
+  `
+  );
 });
diff --git a/code/renderers/react/src/componentManifest/generateCodeSnippet.ts b/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
index c64be265a935..68c15e6847bc 100644
--- a/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
+++ b/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
@@ -1,30 +1,37 @@
-import { type NodePath, types as t } from 'storybook/internal/babel';
 import {
-  collectImportBindings,
-  createStoryArgsResolver,
   type CsfFile,
+  type ESTree as E,
+  type ESTreeNode as Node,
+  type FunctionNode,
   type ImportRef,
+  type RenderResolution,
+  type StoryArgsResolver,
+  codeOf,
+  collectImportBindings,
+  createStoryArgsResolver,
   isCanonicalCsf2BindCall,
-  metaObjectPath,
+  isStringLiteral,
+  metaObject,
   normalizeStoryDeclaration,
-  type ReferenceContext,
-  type RenderResolution,
+  parseModule,
   resolveRenderFunction,
-  type StoryArgsResolver,
+  storyShapeError,
+  walk,
 } from 'storybook/internal/csf-tools';
 
 import { invariant } from './utils.ts';
 
 function renderFunctionOf(resolution: RenderResolution) {
   if (resolution.kind === 'resolved') {
-    return resolution.path;
+    return resolution.node;
   }
   return resolution.kind === 'unresolved' ? resolution.shadowedRender : undefined;
 }
 
 /** A story's snippet, and what showing it as a complete example still depends on. */
 export interface CodeSnippet {
-  node: t.VariableDeclaration | t.FunctionDeclaration;
+  /** Source of a `const` or `function` declaration named after the story. */
+  code: string;
   /** Imports the snippet needs beyond the component, from arg values that kept a name. */
   imports: ImportRef[];
   /** What a static pass could not read, in the source text it was written as. */
@@ -41,94 +48,92 @@ export function getCodeSnippet(
   const importedBind = importedBoundStory(csf, storyName, args);
   if (importedBind) {
     return {
-      node: importedBind.node,
+      code: importedBind.code,
       imports: [...imports, importedBind.importRef],
       unresolved,
     };
   }
   return {
-    node: buildSnippetNode(csf, storyName, componentName, args, resolver.ctx),
+    code: buildSnippet(csf, storyName, componentName, args, resolver),
     imports,
     unresolved,
   };
 }
 
+type Args = Record<string, Node>;
+
+interface Edit {
+  start: number;
+  end: number;
+  text: string;
+}
+
+// `Story = helper.bind({})` with `helper` imported: the snippet calls the bound helper with the args.
 function importedBoundStory(
   csf: CsfFile,
   storyName: string,
-  args: Record<string, t.Node>
-): { node: t.VariableDeclaration; importRef: ImportRef } | undefined {
-  const declaration = csf._storyDeclarationPath[storyName];
-  if (!declaration?.isVariableDeclarator()) {
-    return undefined;
-  }
-  const init = declaration.get('init');
-  if (!init.isCallExpression() || !isCanonicalCsf2BindCall(init.node)) {
-    return undefined;
-  }
-  const callee = init.get('callee');
-  if (!callee.isMemberExpression()) {
-    return undefined;
-  }
-  const object = callee.get('object');
-  if (!object.isIdentifier()) {
+  args: Args
+): { code: string; importRef: ImportRef } | undefined {
+  const declaration = csf._storyExports[storyName];
+  if (declaration?.type !== 'VariableDeclarator' || !isCanonicalCsf2BindCall(declaration.init)) {
     return undefined;
   }
-  const binding = collectImportBindings(csf._file.path).get(object.node.name);
+  const local = declaration.init.callee.object.name;
+  const binding = collectImportBindings(csf._program).get(local);
   if (!binding) {
     return undefined;
   }
 
-  const values = Object.entries(args).map(([key, value]) => {
-    invariant(t.isExpression(value), `Could not use ${key} as a bound story arg`);
-    return t.objectProperty(t.stringLiteral(key), value);
-  });
-  const boundCall = t.callExpression(init.node, [t.objectExpression(values)]);
-  const node = t.variableDeclaration('const', [
-    t.variableDeclarator(t.identifier(storyName), t.arrowFunctionExpression([], boundCall)),
-  ]);
+  const values = Object.entries(args).map(
+    ([key, value]) => `    ${JSON.stringify(key)}: ${codeOf(value)}`
+  );
+  const argsObject = values.length ? `{\n${values.join(',\n')}\n}` : '{}';
   return {
-    node,
+    code: `const ${storyName} = () => ${codeOf(declaration.init)}(${argsObject});`,
     importRef: {
-      localImportName: object.node.name,
+      localImportName: local,
       importId: binding.importId,
       importName: binding.importName,
-      ...(binding.importName === '*' ? { namespace: object.node.name } : {}),
+      ...(binding.importName === '*' ? { namespace: local } : {}),
     },
   };
 }
 
-function buildSnippetNode(
+function buildSnippet(
   csf: CsfFile,
   storyName: string,
   componentName: string | undefined,
-  merged: Record<string, t.Node>,
-  ctx: ReferenceContext
-): t.VariableDeclaration | t.FunctionDeclaration {
-  const storyDeclaration = csf._storyDeclarationPath[storyName];
+  merged: Args,
+  resolver: StoryArgsResolver
+): string {
+  const editor = csf._editor;
+  const storyDeclaration = csf._storyExports[storyName];
 
   if (!storyDeclaration) {
     const message = 'Expected story to be a function or variable declaration';
-    throw csf._storyPaths[storyName]?.buildCodeFrameError(message) ?? message;
+    const statement = csf._program.body.find(
+      (node) =>
+        node.type === 'ExportNamedDeclaration' &&
+        node.specifiers.some(
+          (specifier) =>
+            (specifier.exported.type === 'Identifier'
+              ? specifier.exported.name
+              : specifier.exported.value) === storyName
+        )
+    );
+    throw statement ? storyShapeError(message, statement, editor) : message;
   }
 
-  const normalizedStory = normalizeStoryDeclaration(storyDeclaration);
+  const normalizedStory = normalizeStoryDeclaration(storyDeclaration, editor);
 
   // Find a function (explicit story fn or render())
-  let storyFn:
-    | NodePath<
-        t.ArrowFunctionExpression | t.FunctionExpression | t.FunctionDeclaration | t.ObjectMethod
-      >
-    | undefined;
-
-  if (normalizedStory.type === 'fn') {
-    storyFn = normalizedStory.path;
-  }
+  let storyFn: FunctionNode | undefined =
+    normalizedStory.type === 'fn' ? normalizedStory.node : undefined;
 
-  const storyConfigPath = normalizedStory.type === 'config' ? normalizedStory.path : undefined;
+  const storyConfig = normalizedStory.type === 'config' ? normalizedStory.node : undefined;
 
-  const metaRender = resolveRenderFunction(metaObjectPath(csf), storyDeclaration, ctx);
-  const storyRender = resolveRenderFunction(storyConfigPath, storyDeclaration, ctx);
+  const metaRender = resolveRenderFunction(metaObject(csf), editor, resolver.ctx);
+  const storyRender = resolveRenderFunction(storyConfig, editor, resolver.ctx);
 
   // Story render takes precedence. Only fall back to meta render when the story
   // has no render property at all — NOT when it has one that couldn't be resolved.
@@ -140,133 +145,112 @@ function buildSnippetNode(
       (storyRender.kind === 'missing' ? renderFunctionOf(metaRender) : undefined);
   }
 
-  // For no-function fallback
-  const entries = Object.entries(merged).filter(([k]) => k !== 'children');
-  const validEntries = entries.filter(([k, v]) => isValidJsxAttrName(k) && v != null);
-  const invalidEntries = entries.filter(([k, v]) => !isValidJsxAttrName(k) && v != null);
-  const injectedAttrs = validEntries.map(([k, v]) => toAttr(k, v)).filter((a) => a != null);
-
-  // If we have a function, transform returned JSX
   if (storyFn) {
-    const fn = storyFn.node;
-
-    if (t.isArrowFunctionExpression(fn) && (t.isJSXElement(fn.body) || t.isJSXFragment(fn.body))) {
-      const spreadRes = transformArgsSpreadsInJsx(fn.body, merged);
-      const inlineRes = inlineArgsInJsx(spreadRes.node, merged);
-      if (spreadRes.changed || inlineRes.changed) {
-        const newFn = t.arrowFunctionExpression(
-          remainingParams(fn, inlineRes.node),
-          inlineRes.node,
-          fn.async
-        );
-        return t.variableDeclaration('const', [
-          t.variableDeclarator(t.identifier(storyName), newFn),
-        ]);
-      }
-    }
-
-    const stmts =
-      t.isFunctionDeclaration(fn) || t.isObjectMethod(fn)
-        ? fn.body.body
-        : t.isArrowFunctionExpression(fn) && t.isBlockStatement(fn.body)
-          ? fn.body.body
-          : t.isFunctionExpression(fn) && t.isBlockStatement(fn.body)
-            ? fn.body.body
-            : undefined;
-
-    if (stmts) {
-      let changed = false;
-      const newBody = stmts.map((stmt) => {
-        if (
-          t.isReturnStatement(stmt) &&
-          stmt.argument &&
-          (t.isJSXElement(stmt.argument) || t.isJSXFragment(stmt.argument))
-        ) {
-          const spreadRes = transformArgsSpreadsInJsx(stmt.argument, merged);
-          const inlineRes = inlineArgsInJsx(spreadRes.node, merged);
-          if (spreadRes.changed || inlineRes.changed) {
-            changed = true;
-            return t.returnStatement(inlineRes.node);
-          }
-        }
-        return stmt;
-      });
-
-      if (changed) {
-        const body = t.blockStatement(newBody);
-        const params = remainingParams(fn, body);
-        return t.isFunctionDeclaration(fn)
-          ? t.functionDeclaration(t.identifier(storyName), params, body, fn.generator, fn.async)
-          : t.variableDeclaration('const', [
-              t.variableDeclarator(
-                t.identifier(storyName),
-                t.arrowFunctionExpression(params, body, fn.async)
-              ),
-            ]);
-      }
-    }
-
-    return t.isFunctionDeclaration(fn)
-      ? t.functionDeclaration(t.identifier(storyName), fn.params, fn.body, fn.generator, fn.async)
-      : t.variableDeclaration('const', [
-          t.variableDeclarator(
-            t.identifier(storyName),
-            t.isObjectMethod(fn) ? t.arrowFunctionExpression(fn.params, fn.body, fn.async) : fn
-          ),
-        ]);
+    return functionSnippet(
+      editor.code,
+      storyName,
+      storyFn,
+      isMethod(editor.parentOf(storyFn)),
+      merged
+    );
   }
 
   // No function: synthesize `<Component {...attrs}/>`
   invariant(componentName, 'Could not generate snippet without component name.');
-  const invalidSpread = buildInvalidSpread(invalidEntries);
-  const name = t.jsxIdentifier(componentName);
-  const openingElAttrs = invalidSpread ? [...injectedAttrs, invalidSpread] : injectedAttrs;
-
+  const attrs = injectedAttributes(merged, new Set());
   const children = toJsxChildren(merged.children);
-  const selfClosing = children.length === 0;
-  const arrow = t.arrowFunctionExpression(
-    [],
-    t.jsxElement(
-      t.jsxOpeningElement(name, openingElAttrs, selfClosing),
-      selfClosing ? null : t.jsxClosingElement(name),
-      children,
-      selfClosing
-    )
-  );
+  const opening = [componentName, ...attrs].join(' ');
+  const element = children ? `<${opening}>${children}</${componentName}>` : `<${opening} />`;
+  return `const ${storyName} = () => ${element};`;
+}
+
+const isMethod = (parent: Node | null) =>
+  parent?.type === 'Property' && (parent.method || parent.kind !== 'init');
+
+// The story function renamed to the story, with the args it reads inlined into its JSX.
+function functionSnippet(
+  code: string,
+  storyName: string,
+  fn: FunctionNode,
+  method: boolean,
+  merged: Args
+): string {
+  const asyncPrefix = fn.async ? 'async ' : '';
+  const params = fn.params.length
+    ? code.slice(fn.params[0].start, fn.params[fn.params.length - 1].end)
+    : '';
+  const edits: Edit[] = [];
+
+  if (fn.type === 'ArrowFunctionExpression' && isJsx(fn.body)) {
+    if (rewriteJsx(code, fn.body, merged, edits)) {
+      const body = printRange(code, fn.body, edits);
+      const kept = readsArgs(`(${body});`) ? params : '';
+      return `const ${storyName} = ${asyncPrefix}(${kept}) => ${body};`;
+    }
+  } else if (fn.body?.type === 'BlockStatement') {
+    let changed = false;
+    for (const statement of fn.body.body) {
+      if (statement.type === 'ReturnStatement' && isJsx(statement.argument)) {
+        changed = rewriteJsx(code, statement.argument, merged, edits) || changed;
+      }
+    }
+    if (changed) {
+      const body = printRange(code, fn.body, edits);
+      const kept = readsArgs(`function f() ${body}`) ? params : '';
+      return fn.type === 'FunctionDeclaration'
+        ? `${asyncPrefix}function${fn.generator ? '*' : ''} ${storyName}(${kept}) ${body}`
+        : `const ${storyName} = ${asyncPrefix}(${kept}) => ${body};`;
+    }
+  }
 
-  return t.variableDeclaration('const', [t.variableDeclarator(t.identifier(storyName), arrow)]);
+  if (fn.type === 'FunctionDeclaration' && fn.body) {
+    return `${asyncPrefix}function${fn.generator ? '*' : ''} ${storyName}(${params}) ${printRange(code, fn.body, [])}`;
+  }
+  if (method && fn.body) {
+    return `const ${storyName} = ${asyncPrefix}(${params}) => ${printRange(code, fn.body, [])};`;
+  }
+  return `const ${storyName} = ${printRange(code, fn, [])};`;
 }
 
-type StoryFunction =
-  | t.ArrowFunctionExpression
-  | t.FunctionExpression
-  | t.FunctionDeclaration
-  | t.ObjectMethod;
-
-/**
- * Parameters the rewritten story function still needs.
- *
- * Inlining the args removes the reason the story took an `args` parameter, so the snippet drops it
- * - unless something the rewrite could not inline still reads from it, which would leave the
- * snippet naming a binding it no longer declares.
- */
-function remainingParams(fn: StoryFunction, body: t.Node): StoryFunction['params'] {
-  return readsArgs(body) ? fn.params : [];
+const isJsx = (node: Node | null | undefined): node is E.JSXElement | E.JSXFragment =>
+  node?.type === 'JSXElement' || node?.type === 'JSXFragment';
+
+// Dedents continuation lines so the snippet does not carry the story file's nesting.
+function printRange(code: string, range: { start: number; end: number }, edits: Edit[]): string {
+  let text = '';
+  let cursor = range.start;
+  for (const edit of [...edits].sort((a, b) => a.start - b.start || a.end - b.end)) {
+    text += code.slice(cursor, edit.start) + edit.text;
+    cursor = edit.end;
+  }
+  text += code.slice(cursor, range.end);
+
+  const lineStart = code.lastIndexOf('\n', range.start - 1) + 1;
+  const indent = /^[ \t]*/.exec(code.slice(lineStart))?.[0] ?? '';
+  return indent
+    ? text
+        .split('\n')
+        .map((line, index) =>
+          index > 0 && line.startsWith(indent) ? line.slice(indent.length) : line
+        )
+        .join('\n')
+    : text;
 }
 
-function readsArgs(node: t.Node): boolean {
+// Whether code still reads the `args` parameter, so the snippet has to keep declaring it.
+function readsArgs(source: string): boolean {
   // A key or a member name spelled `args` names a property, not the parameter.
-  const named = new Set<t.Node>();
+  const named = new Set<Node>();
   let reads = false;
 
-  t.traverseFast(node, (current) => {
-    if (t.isMemberExpression(current) && !current.computed) {
+  walk(parseModule(source).program, (current) => {
+    if (current.type === 'MemberExpression' && !current.computed) {
       named.add(current.property);
     }
-    if ((t.isObjectProperty(current) || t.isObjectMethod(current)) && !current.computed) {
+    if (current.type === 'Property' && !current.computed && !current.shorthand) {
       named.add(current.key);
     }
-    if (t.isIdentifier(current) && current.name === 'args' && !named.has(current)) {
+    if (current.type === 'Identifier' && current.name === 'args' && !named.has(current)) {
       reads = true;
     }
   });
@@ -274,244 +258,138 @@ function readsArgs(node: t.Node): boolean {
   return reads;
 }
 
-/** Build a spread `{...{k: v}}` for props that aren't valid JSX attributes. */
-function buildInvalidSpread(entries: ReadonlyArray<[string, t.Node]>): t.JSXSpreadAttribute | null {
-  if (entries.length === 0) {
-    return null;
-  }
-  const objectProps = entries.map(([k, v]) =>
-    t.objectProperty(t.stringLiteral(k), t.isExpression(v) ? v : t.identifier('undefined'))
-  );
-  return t.jsxSpreadAttribute(t.objectExpression(objectProps));
-}
-
 const isValidJsxAttrName = (n: string) => /^[A-Za-z_][A-Za-z0-9_:-]*$/.test(n);
 
-const toAttr = (key: string, value: t.Node) => {
-  if (t.isBooleanLiteral(value)) {
-    return value.value
-      ? t.jsxAttribute(t.jsxIdentifier(key), null)
-      : t.jsxAttribute(t.jsxIdentifier(key), t.jsxExpressionContainer(value));
+const toAttr = (key: string, value: Node) => {
+  if (value.type === 'Literal' && typeof value.value === 'boolean') {
+    return value.value ? key : `${key}={false}`;
   }
-
-  if (t.isStringLiteral(value)) {
-    return t.jsxAttribute(t.jsxIdentifier(key), t.stringLiteral(value.value));
+  if (isStringLiteral(value) && !value.value.includes('"')) {
+    return `${key}="${value.value}"`;
   }
+  return `${key}={${codeOf(value)}}`;
+};
 
-  if (t.isExpression(value)) {
-    return t.jsxAttribute(t.jsxIdentifier(key), t.jsxExpressionContainer(value));
+// Attributes for every arg not already set by name, with invalid names collected in a spread.
+function injectedAttributes(merged: Args, existing: ReadonlySet<string>): string[] {
+  const entries = Object.entries(merged).filter(
+    ([k, v]) => v != null && k !== 'children' && !existing.has(k)
+  );
+  const attrs = entries.filter(([k]) => isValidJsxAttrName(k)).map(([k, v]) => toAttr(k, v));
+  const invalid = entries.filter(([k]) => !isValidJsxAttrName(k));
+  if (invalid.length > 0) {
+    const members = invalid.map(([k, v]) => `${JSON.stringify(k)}: ${codeOf(v)}`);
+    attrs.push(`{...{ ${members.join(', ')} }}`);
   }
-  return null;
-};
+  return attrs;
+}
 
-const toJsxChildren = (node: t.Node | null | undefined) =>
+const toJsxChildren = (node: Node | null | undefined) =>
   !node
-    ? []
-    : t.isStringLiteral(node)
-      ? [t.jsxText(node.value)]
-      : t.isJSXElement(node) || t.isJSXFragment(node)
-        ? [node]
-        : t.isExpression(node)
-          ? [t.jsxExpressionContainer(node)]
-          : [];
+    ? ''
+    : isStringLiteral(node)
+      ? node.value
+      : isJsx(node)
+        ? codeOf(node)
+        : `{${codeOf(node)}}`;
 
 /** Return `key` if expression is `args.key` (incl. optional chaining), else `null`. */
-function getArgsMemberKey(expr: t.Node) {
-  if (t.isMemberExpression(expr) && t.isIdentifier(expr.object) && expr.object.name === 'args') {
-    if (t.isIdentifier(expr.property) && !expr.computed) {
-      return expr.property.name;
-    }
-
-    if (t.isStringLiteral(expr.property) && expr.computed) {
-      return expr.property.value;
-    }
-  }
+function getArgsMemberKey(expr: Node) {
+  const member = expr.type === 'ChainExpression' ? expr.expression : expr;
   if (
-    t.isOptionalMemberExpression?.(expr) &&
-    t.isIdentifier(expr.object) &&
-    expr.object.name === 'args'
+    member.type !== 'MemberExpression' ||
+    member.object.type !== 'Identifier' ||
+    member.object.name !== 'args'
   ) {
-    const prop = expr.property;
-
-    if (t.isIdentifier(prop) && !expr.computed) {
-      return prop.name;
-    }
-
-    if (t.isStringLiteral(prop) && expr.computed) {
-      return prop.value;
-    }
+    return null;
+  }
+  if (member.property.type === 'Identifier' && !member.computed) {
+    return member.property.name;
+  }
+  if (isStringLiteral(member.property) && member.computed) {
+    return member.property.value;
   }
   return null;
 }
 
-/** Inline `args.foo` -> actual literal/expression in attributes/children (recursively). */
-function inlineArgsInJsx(
-  node: t.JSXElement | t.JSXFragment,
-  merged: Record<string, t.Node>
-): { node: t.JSXElement | t.JSXFragment; changed: boolean } {
+// Records edits expanding `{...args}` and inlining `args.foo` reads; returns whether any were made.
+function rewriteJsx(
+  code: string,
+  node: E.JSXElement | E.JSXFragment,
+  merged: Args,
+  edits: Edit[]
+): boolean {
   let changed = false;
 
-  if (t.isJSXElement(node)) {
+  if (node.type === 'JSXElement') {
     const opening = node.openingElement;
+    const attrs = opening.attributes;
+    const isArgsSpread = (a: Node) =>
+      a.type === 'JSXSpreadAttribute' &&
+      a.argument.type === 'Identifier' &&
+      a.argument.name === 'args';
+    const firstSpread = attrs.findIndex(isArgsSpread);
+    const tagEnd = (opening.typeArguments ?? opening.name).end;
+
+    if (firstSpread !== -1) {
+      changed = true;
+      const existing = new Set(
+        attrs.flatMap((a) =>
+          a.type === 'JSXAttribute' && a.name.type === 'JSXIdentifier' ? [a.name.name] : []
+        )
+      );
+      const pieces = injectedAttributes(merged, existing).join(' ');
+      attrs.forEach((a, index) => {
+        if (!isArgsSpread(a)) {
+          return;
+        }
+        if (index === firstSpread && pieces) {
+          edits.push({ start: a.start, end: a.end, text: pieces });
+        } else {
+          edits.push({ start: index > 0 ? attrs[index - 1].end : tagEnd, end: a.end, text: '' });
+        }
+      });
 
-    const newAttrs = opening.attributes.flatMap<t.JSXAttribute | t.JSXSpreadAttribute>((a) => {
-      if (!t.isJSXAttribute(a)) {
-        return [a];
+      if (node.children.length === 0 && merged.children) {
+        const children = toJsxChildren(merged.children);
+        if (opening.selfClosing) {
+          const name = code.slice(opening.name.start, opening.name.end);
+          const lastEnd = attrs.length > 0 ? attrs[attrs.length - 1].end : tagEnd;
+          edits.push({ start: lastEnd, end: opening.end, text: `>${children}</${name}>` });
+        } else {
+          edits.push({ start: opening.end, end: opening.end, text: children });
+        }
       }
-      const name = t.isJSXIdentifier(a.name) ? a.name.name : null;
+    }
 
-      if (!(name && a.value && t.isJSXExpressionContainer(a.value))) {
-        return [a];
+    for (const a of attrs) {
+      if (
+        a.type !== 'JSXAttribute' ||
+        a.name.type !== 'JSXIdentifier' ||
+        a.value?.type !== 'JSXExpressionContainer'
+      ) {
+        continue;
       }
-
       const key = getArgsMemberKey(a.value.expression);
-
-      if (!(key && key in merged)) {
-        return [a];
-      }
-
-      const repl = toAttr(name, merged[key]);
-      changed = true;
-      return repl ? [repl] : [];
-    });
-
-    const newChildren = node.children.flatMap<
-      t.JSXText | t.JSXExpressionContainer | t.JSXSpreadChild | t.JSXElement | t.JSXFragment
-    >((c) => {
-      if (t.isJSXElement(c) || t.isJSXFragment(c)) {
-        const res = inlineArgsInJsx(c, merged);
-        changed ||= res.changed;
-        return [res.node];
-      }
-      if (t.isJSXExpressionContainer(c)) {
-        const key = getArgsMemberKey(c.expression);
-        if (key === 'children' && merged.children) {
-          changed = true;
-          return toJsxChildren(merged.children);
-        }
-      }
-      return [c];
-    });
-
-    const selfClosing = opening.selfClosing && newChildren.length === 0;
-    return {
-      node: t.jsxElement(
-        t.jsxOpeningElement(opening.name, newAttrs, selfClosing),
-        selfClosing ? null : (node.closingElement ?? t.jsxClosingElement(opening.name)),
-        newChildren,
-        selfClosing
-      ),
-      changed,
-    };
-  }
-
-  const fragChildren = node.children.flatMap((c): (typeof c)[] => {
-    if (t.isJSXElement(c) || t.isJSXFragment(c)) {
-      const res = inlineArgsInJsx(c, merged);
-      changed ||= res.changed;
-      return [res.node];
-    }
-    if (t.isJSXExpressionContainer(c)) {
-      const key = getArgsMemberKey(c.expression);
-      if (key === 'children' && 'children' in merged) {
+      if (key && key in merged) {
+        edits.push({ start: a.start, end: a.end, text: toAttr(a.name.name, merged[key]) });
         changed = true;
-        return toJsxChildren(merged.children);
       }
     }
-    return [c];
-  });
-
-  return { node: t.jsxFragment(node.openingFragment, node.closingFragment, fragChildren), changed };
-}
-
-/** Expand `{...args}` into concrete attributes/children (recursively). */
-function transformArgsSpreadsInJsx(
-  node: t.JSXElement | t.JSXFragment,
-  merged: Record<string, t.Node>
-): { node: t.JSXElement | t.JSXFragment; changed: boolean } {
-  let changed = false;
-
-  const makeInjectedPieces = (
-    existing: ReadonlySet<string>
-  ): Array<t.JSXAttribute | t.JSXSpreadAttribute> => {
-    const entries = Object.entries(merged).filter(([k, v]) => v != null && k !== 'children');
-    const validEntries = entries.filter(([k]) => isValidJsxAttrName(k));
-    const invalidEntries = entries.filter(([k]) => !isValidJsxAttrName(k));
-
-    const injectedAttrs = validEntries
-      .map(([k, v]) => toAttr(k, v))
-      .filter((a): a is t.JSXAttribute => Boolean(a))
-      .filter((a) => t.isJSXIdentifier(a.name) && !existing.has(a.name.name));
-
-    const invalidSpread = buildInvalidSpread(invalidEntries.filter(([k]) => !existing.has(k)));
-    return invalidSpread ? [...injectedAttrs, invalidSpread] : injectedAttrs;
-  };
-
-  if (t.isJSXElement(node)) {
-    const opening = node.openingElement;
-    const attrs = opening.attributes;
-
-    const isArgsSpread = (a: t.JSXAttribute | t.JSXSpreadAttribute) =>
-      t.isJSXSpreadAttribute(a) && t.isIdentifier(a.argument) && a.argument.name === 'args';
-
-    const sawArgsSpread = attrs.some(isArgsSpread);
-    const firstIdx = attrs.findIndex(isArgsSpread);
-    const nonArgsAttrs = attrs.filter((a) => !isArgsSpread(a));
-    const insertionIndex = sawArgsSpread
-      ? attrs.slice(0, firstIdx).filter((a) => !isArgsSpread(a)).length
-      : 0;
-
-    const newAttrs = sawArgsSpread
-      ? (() => {
-          const existing = new Set(
-            nonArgsAttrs
-              .filter((a): a is t.JSXAttribute => t.isJSXAttribute(a))
-              .flatMap((a) => (t.isJSXIdentifier(a.name) ? [a.name.name] : []))
-          );
-          const pieces = makeInjectedPieces(existing);
-          changed = true;
-          return [
-            ...nonArgsAttrs.slice(0, insertionIndex),
-            ...pieces,
-            ...nonArgsAttrs.slice(insertionIndex),
-          ];
-        })()
-      : nonArgsAttrs;
-
-    const newChildren = node.children.flatMap((c): (typeof c)[] => {
-      if (t.isJSXElement(c) || t.isJSXFragment(c)) {
-        const res = transformArgsSpreadsInJsx(c, merged);
-        changed ||= res.changed;
-        return [res.node];
-      }
-      return [c];
-    });
-
-    const children =
-      sawArgsSpread && newChildren.length === 0 && merged.children
-        ? ((changed = true), toJsxChildren(merged.children))
-        : newChildren;
-
-    const selfClosing = children.length === 0;
-    return {
-      node: t.jsxElement(
-        t.jsxOpeningElement(opening.name, newAttrs, selfClosing),
-        selfClosing ? null : (node.closingElement ?? t.jsxClosingElement(opening.name)),
-        children,
-        selfClosing
-      ),
-      changed,
-    };
   }
 
-  const fragChildren = node.children.flatMap((c): (typeof c)[] => {
-    if (t.isJSXElement(c) || t.isJSXFragment(c)) {
-      const res = transformArgsSpreadsInJsx(c, merged);
-      changed ||= res.changed;
-      return [res.node];
+  for (const child of node.children) {
+    if (isJsx(child)) {
+      changed = rewriteJsx(code, child, merged, edits) || changed;
+    } else if (
+      child.type === 'JSXExpressionContainer' &&
+      getArgsMemberKey(child.expression) === 'children' &&
+      merged.children
+    ) {
+      edits.push({ start: child.start, end: child.end, text: toJsxChildren(merged.children) });
+      changed = true;
     }
-    return [c];
-  });
+  }
 
-  return { node: t.jsxFragment(node.openingFragment, node.closingFragment, fragChildren), changed };
+  return changed;
 }
diff --git a/code/renderers/react/src/componentManifest/generator.test.ts b/code/renderers/react/src/componentManifest/generator.test.ts
index ef33fe7edad1..8e3d02d6d85d 100644
--- a/code/renderers/react/src/componentManifest/generator.test.ts
+++ b/code/renderers/react/src/componentManifest/generator.test.ts
@@ -254,11 +254,7 @@ test('manifests generates correct id, name, description and examples ', async ()
               "description": undefined,
               "id": "example-header--logged-in",
               "name": "Logged In",
-              "snippet": "const LoggedIn = () => <Header
-        onLogin={fn()}
-        onLogout={fn()}
-        onCreateAccount={fn()}
-        user={{ name: 'Jane Doe' }} />;",
+              "snippet": "const LoggedIn = () => <Header onLogin={fn()} onLogout={fn()} onCreateAccount={fn()} user={{ name: 'Jane Doe' }} />;",
               "summary": undefined,
             },
             {
@@ -495,11 +491,7 @@ test('component exported from other file', async () => {
       "stories": [
         {
           "error": {
-            "message": "Expected story to be a function or variable declaration
-       9 | export default meta;
-      10 |
-    > 11 | export { Primary } from './other-file';
-         | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^",
+            "message": "Expected story to be a function or variable declaration (11:0)",
             "name": "SyntaxError",
           },
           "id": "example-button--primary",
@@ -550,11 +542,7 @@ test('unknown expressions', async () => {
       "stories": [
         {
           "error": {
-            "message": "Expected story to be csf factory, function or an object expression
-       9 | export default meta;
-      10 |
-    > 11 | export const Primary = someWeirdExpression;
-         |                        ^^^^^^^^^^^^^^^^^^^",
+            "message": "Expected story to be csf factory, function or an object expression (11:23)",
             "name": "SyntaxError",
           },
           "id": "example-button--primary",
diff --git a/code/renderers/react/src/componentManifest/getComponentImports.ts b/code/renderers/react/src/componentManifest/getComponentImports.ts
index 7fda986aaf4c..5f5488202bfd 100644
--- a/code/renderers/react/src/componentManifest/getComponentImports.ts
+++ b/code/renderers/react/src/componentManifest/getComponentImports.ts
@@ -1,11 +1,13 @@
 import { dirname } from 'node:path';
 
-import { type NodePath, types as t } from 'storybook/internal/babel';
 import {
   type CsfFile,
+  type ESTree,
+  type ESTreeNode,
   buildImportStatements,
   collectImportBindings,
   resolveComponentImport,
+  walk,
 } from 'storybook/internal/csf-tools';
 import { logger } from 'storybook/internal/node-logger';
 import type { TypescriptOptions as TypescriptOptionsBase } from 'storybook/internal/types';
@@ -72,51 +74,44 @@ export const getComponents = async ({
   additionalComponentNames?: string[];
 }): Promise<ComponentRef[]> => {
   const { reactDocgenTypescriptOptions } = typescriptOptions;
-  const program: NodePath<t.Program> = csf._file.path;
 
   const componentSet = new Set<string>();
   /** Minimum JSX nesting depth per component name (1 = outermost JSX element). */
   const componentDepth = new Map<string, number>();
-  const localToImport = collectImportBindings(program);
+  const localToImport = collectImportBindings(csf._program);
 
-  // Gather components from all JSX opening elements, tracking nesting depth incrementally.
-  let jsxDepth = 0;
-  program.traverse({
-    JSXElement: {
-      enter() {
-        jsxDepth++;
-      },
-      exit() {
-        jsxDepth--;
-      },
-    },
-    JSXOpeningElement(p) {
-      const n = p.node.name;
-      let name: string | undefined;
-      if (t.isJSXIdentifier(n)) {
-        name = n.name;
-        if (name && /[A-Z]/.test(name.charAt(0))) {
-          componentSet.add(name);
-        }
-      } else if (t.isJSXMemberExpression(n)) {
-        const jsxNameToString = (nm: t.JSXIdentifier | t.JSXMemberExpression): string =>
-          t.isJSXIdentifier(nm)
-            ? nm.name
-            : `${jsxNameToString(nm.object)}.${jsxNameToString(nm.property)}`;
-        name = jsxNameToString(n);
+  // Gather components from all JSX opening elements, tracking how many JSX elements enclose each.
+  const jsxDepth = new Map<ESTreeNode, number>();
+  walk(csf._program, (node, parent) => {
+    const depth = (parent ? (jsxDepth.get(parent) ?? 0) : 0) + (node.type === 'JSXElement' ? 1 : 0);
+    jsxDepth.set(node, depth);
+    if (node.type !== 'JSXOpeningElement') {
+      return;
+    }
+    const n = node.name;
+    let name: string | undefined;
+    if (n.type === 'JSXIdentifier') {
+      name = n.name;
+      if (name && /[A-Z]/.test(name.charAt(0))) {
         componentSet.add(name);
       }
+    } else if (n.type === 'JSXMemberExpression') {
+      const jsxNameToString = (nm: ESTree.JSXIdentifier | ESTree.JSXMemberExpression): string =>
+        nm.type === 'JSXIdentifier'
+          ? nm.name
+          : `${jsxNameToString(nm.object)}.${jsxNameToString(nm.property)}`;
+      name = jsxNameToString(n);
+      componentSet.add(name);
+    }
 
-      if (name) {
-        // jsxDepth is already incremented by JSXElement.enter for the current element,
-        // so subtract 1 to get the number of *wrapping* JSX ancestors.
-        const depth = jsxDepth - 1;
-        const existing = componentDepth.get(name);
-        if (existing === undefined || depth < existing) {
-          componentDepth.set(name, depth);
-        }
+    if (name) {
+      // The opening element shares its JSXElement's depth, which counts that element itself.
+      const wrappingDepth = depth - 1;
+      const existing = componentDepth.get(name);
+      if (existing === undefined || wrappingDepth < existing) {
+        componentDepth.set(name, wrappingDepth);
       }
-    },
+    }
   });
 
   // Add meta.component if present
@@ -133,17 +128,12 @@ export const getComponents = async ({
 
   // Filter out locally defined components (those whose base identifier has a local, non-import binding)
   const isLocallyDefinedWithoutImport = (base: string): boolean => {
-    const binding = program.scope.getBinding(base);
+    const binding = csf._editor.scopes.program.bindings.get(base);
 
     if (!binding) {
       return false; // missing binding -> keep (will become null import)
     }
-    const isImportBinding = Boolean(
-      binding.path.isImportSpecifier?.() ||
-      binding.path.isImportDefaultSpecifier?.() ||
-      binding.path.isImportNamespaceSpecifier?.()
-    );
-    return !isImportBinding;
+    return binding.kind !== 'import';
   };
 
   const filteredComponents = components.filter(
diff --git a/code/renderers/react/src/componentManifest/reactDocgen.ts b/code/renderers/react/src/componentManifest/reactDocgen.ts
index 30896f0ce5cd..7e14490fd7af 100644
--- a/code/renderers/react/src/componentManifest/reactDocgen.ts
+++ b/code/renderers/react/src/componentManifest/reactDocgen.ts
@@ -1,13 +1,12 @@
 import { existsSync } from 'node:fs';
 import { dirname, sep } from 'node:path';
 
-import { babelParse, types as t } from 'storybook/internal/babel';
 import {
   findTsconfigPathForPath,
   getTsconfigPathsBaseDir,
   supportedExtensions,
 } from 'storybook/internal/common';
-import { extractJSDocInfo } from 'storybook/internal/csf-tools';
+import { extractJSDocInfo, parseModule } from 'storybook/internal/csf-tools';
 import { logger } from 'storybook/internal/node-logger';
 
 import {
@@ -118,20 +117,21 @@ export const parseWithReactDocgen = cached(
 
 const getExportPaths = cached(
   (code: string, filePath: string) => {
-    let ast;
+    let program;
     try {
-      ast = babelParse(code);
+      program = parseModule(code, filePath).program;
     } catch {
       return [];
     }
 
     const basedir = dirname(filePath);
-    const body = ast.program.body;
-    return body
+    return program.body
       .flatMap((statement) =>
-        t.isExportAllDeclaration(statement)
+        statement.type === 'ExportAllDeclaration'
           ? [statement.source.value]
-          : t.isExportNamedDeclaration(statement) && !!statement.source && !statement.declaration
+          : statement.type === 'ExportNamedDeclaration' &&
+              !!statement.source &&
+              !statement.declaration
             ? [statement.source.value]
             : []
       )
diff --git a/code/renderers/react/src/componentManifest/resolveComponents.ts b/code/renderers/react/src/componentManifest/resolveComponents.ts
index 80bb7d1005d1..d7afa46726f9 100644
--- a/code/renderers/react/src/componentManifest/resolveComponents.ts
+++ b/code/renderers/react/src/componentManifest/resolveComponents.ts
@@ -1,8 +1,8 @@
-import { recast } from 'storybook/internal/babel';
 import { extractDeclaredSubcomponents } from 'storybook/internal/common';
 import { storyNameFromExport } from 'storybook/internal/csf/csf-utils';
-import type { ImportRef, StoryReferences } from 'storybook/internal/csf-tools';
 import {
+  type ImportRef,
+  type StoryReferences,
   createStoryArgsResolver,
   extractStoryJSDocInfo,
   loadCsf,
@@ -173,7 +173,10 @@ export function extractStorySnippets(
     .map(([storyExport, story]): ResolvedStory => {
       const name = story.name ?? storyNameFromExport(storyExport);
       try {
-        const { description, summary } = extractStoryJSDocInfo(csf._storyStatements[storyExport]);
+        const { description, summary } = extractStoryJSDocInfo(
+          csf._storyStatements[storyExport],
+          csf._editor
+        );
         const snippet = getCodeSnippet(csf, storyExport, componentName, resolver);
         imports.push(...snippet.imports);
         const warning = unresolvedWarning(snippet.unresolved);
@@ -181,7 +184,7 @@ export function extractStorySnippets(
         return {
           id: story.id,
           name,
-          snippet: recast.print(snippet.node).code,
+          snippet: snippet.code,
           description,
           summary,
           ...(warning ? { warning } : {}),
diff --git a/code/renderers/react/src/enrichCsf.test.ts b/code/renderers/react/src/enrichCsf.test.ts
index e9d6afbde4c1..d9228af4c959 100644
--- a/code/renderers/react/src/enrichCsf.test.ts
+++ b/code/renderers/react/src/enrichCsf.test.ts
@@ -1,8 +1,7 @@
 import { expect, test, vi } from 'vitest';
 
-import { generate } from 'storybook/internal/babel';
 import { type InterPresetOptions, getPresets } from 'storybook/internal/common';
-import { loadCsf } from 'storybook/internal/csf-tools';
+import { formatCsf, loadCsf } from 'storybook/internal/csf-tools';
 
 import { dedent } from 'ts-dedent';
 
@@ -28,43 +27,16 @@ test('should enrich csf with code parameters', async () => {
   const csf = loadCsf(code, { makeTitle: (x) => x ?? 'title' });
   csf.parse();
   await enrichCsf?.(csf, csf);
-  expect(generate(csf._ast).code).toMatchInlineSnapshot(`
+  expect(formatCsf(csf)).toMatchInlineSnapshot(`
     "import preview from '#.storybook/preview';
     import { Button } from './Button';
-    const meta = preview.meta({
-      component: Button
-    });
-    export const Primary = meta.story({
-      args: {
-        primary: true,
-        label: 'Button'
-      }
-    });
-    export const Secondary = meta.story({
-      args: {
-        label: 'Button'
-      }
-    });
-    Primary.input.parameters = {
-      ...Primary.input.parameters,
-      docs: {
-        ...Primary.input.parameters?.docs,
-        source: {
-          code: "const Primary = () => <Button primary label=\\"Button\\" />;\\n",
-          ...Primary.input.parameters?.docs?.source
-        }
-      }
-    };
-    Secondary.input.parameters = {
-      ...Secondary.input.parameters,
-      docs: {
-        ...Secondary.input.parameters?.docs,
-        source: {
-          code: "const Secondary = () => <Button label=\\"Button\\" />;\\n",
-          ...Secondary.input.parameters?.docs?.source
-        }
-      }
-    };"
+
+    const meta = preview.meta({ component: Button })
+
+    export const Primary = meta.story({ args: { primary: true,  label: 'Button' } });
+    export const Secondary = meta.story({ args: { label: 'Button' } });
+    Primary.input.parameters = { ...Primary.input.parameters, docs: { ...Primary.input.parameters?.docs, source: { code: "const Primary = () => <Button primary label=\\"Button\\" />;\\n", ...Primary.input.parameters?.docs?.source } } };
+    Secondary.input.parameters = { ...Secondary.input.parameters, docs: { ...Secondary.input.parameters?.docs, source: { code: "const Secondary = () => <Button label=\\"Button\\" />;\\n", ...Secondary.input.parameters?.docs?.source } } };"
   `);
 });
 
@@ -85,17 +57,10 @@ test('should not enrich when experimentalCodeExamples is disabled', async () =>
   const csf = loadCsf(code, { makeTitle: (x) => x ?? 'title' });
   csf.parse();
   await enrichCsf?.(csf, csf);
-  expect(generate(csf._ast).code).toMatchInlineSnapshot(`
+  expect(formatCsf(csf)).toMatchInlineSnapshot(`
     "import preview from '#.storybook/preview';
     import { Button } from './Button';
-    const meta = preview.meta({
-      component: Button
-    });
-    export const Primary = meta.story({
-      args: {
-        primary: true,
-        label: 'Button'
-      }
-    });"
+    const meta = preview.meta({ component: Button })
+    export const Primary = meta.story({ args: { primary: true,  label: 'Button' } });"
   `);
 });
diff --git a/code/renderers/react/src/enrichCsf.ts b/code/renderers/react/src/enrichCsf.ts
index 373c5c57fadd..2c21a418b321 100644
--- a/code/renderers/react/src/enrichCsf.ts
+++ b/code/renderers/react/src/enrichCsf.ts
@@ -1,4 +1,3 @@
-import { type NodePath, recast, types as t } from 'storybook/internal/babel';
 import { getPrettier } from 'storybook/internal/common';
 import { type CsfFile } from 'storybook/internal/csf-tools';
 import type { PresetPropertyFn } from 'storybook/internal/types';
@@ -18,10 +17,10 @@ export const enrichCsf: PresetPropertyFn<'experimental_enrichCsf'> = async (inpu
         return;
       }
       const { format } = await getPrettier();
-      let node;
+      let code;
       let snippet;
       try {
-        node = getCodeSnippet(csfSource, key, csfSource._meta?.component).node;
+        code = getCodeSnippet(csfSource, key, csfSource._meta?.component).code;
       } catch (e) {
         if (!(e instanceof Error)) {
           return;
@@ -31,8 +30,8 @@ export const enrichCsf: PresetPropertyFn<'experimental_enrichCsf'> = async (inpu
 
       try {
         // TODO read the user config
-        if (!snippet && node) {
-          snippet = await format(recast.print(node).code, {
+        if (!snippet && code) {
+          snippet = await format(code, {
             filepath: join(process.cwd(), 'component.tsx'),
           });
         }
@@ -47,22 +46,6 @@ export const enrichCsf: PresetPropertyFn<'experimental_enrichCsf'> = async (inpu
         return;
       }
 
-      // e.g. Story.input.parameters
-      const originalParameters = t.memberExpression(
-        csf._metaIsFactory
-          ? t.memberExpression(t.identifier(key), t.identifier('input'))
-          : t.identifier(key),
-        t.identifier('parameters')
-      );
-
-      // e.g. Story.input.parameters?.docs
-      const docsParameter = t.optionalMemberExpression(
-        originalParameters,
-        t.identifier('docs'),
-        false,
-        true
-      );
-
       // For example:
       // Story.input.parameters = {
       //   ...Story.input.parameters,
@@ -74,37 +57,9 @@ export const enrichCsf: PresetPropertyFn<'experimental_enrichCsf'> = async (inpu
       //     }
       //   }
       // };
-
-      csf._ast.program.body.push(
-        t.expressionStatement(
-          t.assignmentExpression(
-            '=',
-            originalParameters,
-            t.objectExpression([
-              t.spreadElement(originalParameters),
-              t.objectProperty(
-                t.identifier('docs'),
-                t.objectExpression([
-                  t.spreadElement(docsParameter),
-                  t.objectProperty(
-                    t.identifier('source'),
-                    t.objectExpression([
-                      t.objectProperty(t.identifier('code'), t.stringLiteral(snippet)),
-                      t.spreadElement(
-                        t.optionalMemberExpression(
-                          docsParameter,
-                          t.identifier('source'),
-                          false,
-                          true
-                        )
-                      ),
-                    ])
-                  ),
-                ])
-              ),
-            ])
-          )
-        )
+      const parameters = `${key}${csf._metaIsFactory ? '.input' : ''}.parameters`;
+      csf._appendStatement(
+        `${parameters} = { ...${parameters}, docs: { ...${parameters}?.docs, source: { code: ${JSON.stringify(snippet)}, ...${parameters}?.docs?.source } } };`
       );
     });
     await Promise.all(promises);

From 9e59c4a07cbbc31eb744373b3e229eecdc577ecc Mon Sep 17 00:00:00 2001
From: Easton <easton.shin@marqvision.com>
Date: Tue, 13 Oct 2026 11:52:16 +0900
Subject: [PATCH 049/326] refactor(vue3): port docgen to the csf-tools ESTree
 API

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../docgen/component-docgen/build-docgen.ts   |   8 +-
 .../src/docgen/shared/classify-value.test.ts  |  26 +-
 .../vue3/src/docgen/shared/classify-value.ts  |  96 ++++---
 .../src/docgen/shared/render-primitives.ts    |  53 ++--
 .../story-docs/build-story-docs.test.ts       |  11 +-
 .../src/docgen/story-docs/build-story-docs.ts |  96 +++----
 .../classify-args/classify-args.test.ts       |  25 +-
 .../story-docs/classify-args/classify-args.ts |  15 +-
 .../docgen/story-docs/print-h/print-h.test.ts |  33 ++-
 .../src/docgen/story-docs/print-h/print-h.ts  | 216 +++++++--------
 .../transform-template/forward-setup.ts       | 254 +++++++-----------
 .../transform-template.test.ts                |  15 +-
 .../transform-template/transform-template.ts  | 182 +++++++------
 13 files changed, 529 insertions(+), 501 deletions(-)

diff --git a/code/renderers/vue3/src/docgen/component-docgen/build-docgen.ts b/code/renderers/vue3/src/docgen/component-docgen/build-docgen.ts
index 2c64c437079e..286ef5a65845 100644
--- a/code/renderers/vue3/src/docgen/component-docgen/build-docgen.ts
+++ b/code/renderers/vue3/src/docgen/component-docgen/build-docgen.ts
@@ -6,6 +6,7 @@ import {
   extractComponentDescription,
   extractDescription,
   loadCsf,
+  storyShapeError,
 } from 'storybook/internal/csf-tools';
 import type { DocgenPayload, DocgenProviderInput } from 'storybook/internal/types';
 
@@ -143,8 +144,9 @@ export async function buildDocgenPayload(
       error: {
         name: error.name,
         message:
-          (csf._metaStatementPath?.buildCodeFrameError(error.message).message ?? error.message) +
-          `\n\n${input.entry.importPath}:\n${storyFile}`,
+          (csf._metaStatement
+            ? storyShapeError(error.message, csf._metaStatement, csf._editor).message
+            : error.message) + `\n\n${input.entry.importPath}:\n${storyFile}`,
       },
     };
   }
@@ -170,7 +172,7 @@ export async function buildDocgenPayload(
     };
   }
 
-  const metaJsDoc = extractDescription(csf._metaStatement) || undefined;
+  const metaJsDoc = extractDescription(csf._metaStatement, csf._editor) || undefined;
   const { description, summary, jsDocTags } = extractComponentDescription(
     metaJsDoc,
     componentMeta.description,
diff --git a/code/renderers/vue3/src/docgen/shared/classify-value.test.ts b/code/renderers/vue3/src/docgen/shared/classify-value.test.ts
index 5bfd14b771b1..e35098287be6 100644
--- a/code/renderers/vue3/src/docgen/shared/classify-value.test.ts
+++ b/code/renderers/vue3/src/docgen/shared/classify-value.test.ts
@@ -1,8 +1,13 @@
 import { describe, expect, it } from 'vitest';
 
-import { babelParse, types as t } from 'storybook/internal/babel';
+import { expressionFromSource } from 'storybook/internal/csf-tools';
 
-import { classifyValue, isSelfContainedFunction, type ValuePlan } from './classify-value.ts';
+import {
+  classifyValue,
+  isSelfContainedFunction,
+  printValue,
+  type ValuePlan,
+} from './classify-value.ts';
 
 describe('classifyValue', () => {
   it.each<[input: string, output: ValuePlan['kind']]>([
@@ -82,11 +87,12 @@ describe('isSelfContainedFunction', () => {
   });
 });
 
-function expression(code: string): t.Node {
-  const file = babelParse(`(${code})`);
-  const statement = file.program.body[0];
-  if (!t.isExpressionStatement(statement)) {
-    throw new Error(`Not an expression: ${code}`);
-  }
-  return statement.expression;
-}
+describe('printValue', () => {
+  it('strips story-file nesting from continuation lines but not from template literal lines', () => {
+    expect(printValue(expression('{\n      a: `x\n  y`,\n      b: 1,\n    }'))).toBe(
+      '{\n  a: `x\n  y`,\n  b: 1,\n}'
+    );
+  });
+});
+
+const expression = expressionFromSource;
diff --git a/code/renderers/vue3/src/docgen/shared/classify-value.ts b/code/renderers/vue3/src/docgen/shared/classify-value.ts
index e65b6476b712..35fb99611a90 100644
--- a/code/renderers/vue3/src/docgen/shared/classify-value.ts
+++ b/code/renderers/vue3/src/docgen/shared/classify-value.ts
@@ -1,5 +1,11 @@
-import { recast, type types as t } from 'storybook/internal/babel';
-import { unwrapExpression } from 'storybook/internal/csf-tools';
+import {
+  type ESTree as E,
+  type ESTreeNode as Node,
+  codeOf,
+  isStringLiteral,
+  unwrapExpression,
+  walk,
+} from 'storybook/internal/csf-tools';
 
 /**
  * How one arg value reaches the generated SFC.
@@ -64,7 +70,7 @@ const UNDEFINED_IDENTIFIER = 'undefined';
 const NO_LOCALS: ReadonlySet<string> = new Set();
 
 /** Classifies one CSF arg value into the single plan both the classifier and the renderer act on. */
-export function classifyValue(node: t.Node): ValuePlan {
+export function classifyValue(node: Node): ValuePlan {
   const value = unwrapExpression(node);
 
   if (isUndefinedIdentifier(value)) {
@@ -83,21 +89,53 @@ export function classifyValue(node: t.Node): ValuePlan {
   return isResolvable(value) ? { kind: 'hoist' } : { kind: 'unrepresentable' };
 }
 
-// A node parsed from the story file reprints as its own source; one this pass built is formatted
-// from the tree instead, so the indentation has to match the snippet it lands in.
-export function printValue(node: t.Node): string {
-  return recast.print(node, { tabWidth: 2 }).code;
+// Strips the story file's nesting from continuation lines so the value reads naturally when hoisted.
+export function printValue(node: Node): string {
+  const source = codeOf(node);
+  const lines = source.split('\n');
+  if (lines.length === 1) {
+    return source;
+  }
+
+  // Line breaks inside a template literal are part of its value, so those lines keep every space.
+  const { start } = node as Node & { start: number };
+  const quasis: [number, number][] = [];
+  walk(node, (child) => {
+    if (child.type === 'TemplateElement') {
+      const span = child as Node & { start: number; end: number };
+      quasis.push([span.start - start, span.end - start]);
+    }
+  });
+  let offset = 0;
+  const dedentable = lines.map((line, index) => {
+    const lineStart = offset;
+    offset += line.length + 1;
+    return index > 0 && !quasis.some(([from, to]) => from < lineStart && lineStart <= to);
+  });
+
+  const depth = Math.min(
+    ...lines
+      .filter((line, index) => dedentable[index] && line.trim() !== '')
+      .map((line) => line.search(/\S/))
+  );
+  return Number.isFinite(depth) && depth > 0
+    ? lines
+        .map((line, index) =>
+          dedentable[index] ? line.slice(Math.min(depth, line.search(/\S|$/))) : line
+        )
+        .join('\n')
+    : source;
 }
 
-export function isFunctionExpression<T extends t.Node>(
+export function isFunctionExpression<T extends Node>(
   node: T
-): node is T & (t.ArrowFunctionExpression | t.FunctionExpression) {
+): node is T & (E.ArrowFunctionExpression | E.Function) {
   const unwrapped = unwrapExpression(node);
   return unwrapped.type === 'ArrowFunctionExpression' || unwrapped.type === 'FunctionExpression';
 }
 
 /** `args: { a: undefined }` unsets an inherited meta arg, so it renders nothing. */
-function isUndefinedIdentifier(node: t.Node): boolean {
+function isUndefinedIdentifier(node: Node): boolean {
   const unwrapped = unwrapExpression(node);
   return unwrapped.type === 'Identifier' && unwrapped.name === UNDEFINED_IDENTIFIER;
 }
@@ -108,7 +146,7 @@ function isUndefinedIdentifier(node: t.Node): boolean {
  *
  * @example `(value) => value.toUpperCase()` → true; `(value) => formatHelper(value)` → false
  */
-export function isSelfContainedFunction(node: t.Node): boolean {
+export function isSelfContainedFunction(node: Node): boolean {
   const fn = unwrapExpression(node);
   if (fn.type !== 'ArrowFunctionExpression' && fn.type !== 'FunctionExpression') {
     return false;
@@ -119,6 +157,9 @@ export function isSelfContainedFunction(node: t.Node): boolean {
     return false;
   }
 
+  if (!fn.body) {
+    return false;
+  }
   if (fn.body.type !== 'BlockStatement') {
     return isResolvable(fn.body, locals);
   }
@@ -129,7 +170,7 @@ export function isSelfContainedFunction(node: t.Node): boolean {
  * Statement forms a hoisted function body may contain; anything else reports `false` so the arg
  * falls back to the omit-with-warning path.
  */
-function statementIsResolvable(statement: t.Statement, locals: Set<string>): boolean {
+function statementIsResolvable(statement: E.Statement, locals: Set<string>): boolean {
   switch (statement.type) {
     case 'VariableDeclaration':
       return statement.declarations.every(
@@ -151,7 +192,7 @@ function statementIsResolvable(statement: t.Statement, locals: Set<string>): boo
  *
  * @example `({ a, b = 1 }, ...rest)` → adds `a`, `b`, `rest`
  */
-export function collectPatternNames(pattern: t.Node, into: Set<string>): boolean {
+export function collectPatternNames(pattern: Node, into: Set<string>): boolean {
   switch (pattern.type) {
     case 'Identifier':
       into.add(pattern.name);
@@ -173,22 +214,18 @@ export function collectPatternNames(pattern: t.Node, into: Set<string>): boolean
   }
 }
 
-function isEmptyString(node: t.Node): boolean {
+function isEmptyString(node: Node): boolean {
   const value = unwrapExpression(node);
-  return value.type === 'StringLiteral' && value.value === '';
+  return isStringLiteral(value) && value.value === '';
 }
 
 /** Values whose printed form is self-contained, so a template expression can carry them directly. */
-function isInlineLiteral(node: t.Node): boolean {
+function isInlineLiteral(node: Node): boolean {
   const value = unwrapExpression(node);
 
   switch (value.type) {
-    case 'StringLiteral':
-    case 'NumericLiteral':
-    case 'BooleanLiteral':
-    case 'NullLiteral':
-    case 'BigIntLiteral':
-      return true;
+    case 'Literal':
+      return !('regex' in value && value.regex);
     case 'UnaryExpression':
       return value.operator === '-' && isInlineLiteral(value.argument);
     default:
@@ -204,17 +241,12 @@ function isInlineLiteral(node: t.Node): boolean {
  *
  * @example `new Date('2020-01-01')` → true (`Date` is global); `Sizes.LARGE` → false (`Sizes` is not)
  */
-function isResolvable(node: t.Node, locals: ReadonlySet<string> = NO_LOCALS): boolean {
+function isResolvable(node: Node, locals: ReadonlySet<string> = NO_LOCALS): boolean {
   const value = unwrapExpression(node);
-  const resolves = (child: t.Node): boolean => isResolvable(child, locals);
+  const resolves = (child: Node): boolean => isResolvable(child, locals);
 
   switch (value.type) {
-    case 'StringLiteral':
-    case 'NumericLiteral':
-    case 'BooleanLiteral':
-    case 'NullLiteral':
-    case 'BigIntLiteral':
-    case 'RegExpLiteral':
+    case 'Literal':
       return true;
 
     case 'Identifier':
@@ -228,8 +260,8 @@ function isResolvable(node: t.Node, locals: ReadonlySet<string> = NO_LOCALS): bo
 
     case 'ObjectExpression':
       return value.properties.every((property) => {
-        if (property.type !== 'ObjectProperty') {
-          // SpreadElement hides its contents; ObjectMethod bodies can reference anything.
+        if (property.type !== 'Property' || property.method || property.kind !== 'init') {
+          // A spread hides its contents; method and accessor bodies can reference anything.
           return false;
         }
         return (!property.computed || resolves(property.key)) && resolves(property.value);
diff --git a/code/renderers/vue3/src/docgen/shared/render-primitives.ts b/code/renderers/vue3/src/docgen/shared/render-primitives.ts
index 232dadf5d54f..c96368bbd0ef 100644
--- a/code/renderers/vue3/src/docgen/shared/render-primitives.ts
+++ b/code/renderers/vue3/src/docgen/shared/render-primitives.ts
@@ -1,8 +1,9 @@
-import { types as t } from 'storybook/internal/babel';
 import {
+  type ESTreeNode as Node,
+  type ImportBinding,
   buildImportStatements,
+  isStringLiteral,
   unwrapExpression,
-  type ImportBinding,
 } from 'storybook/internal/csf-tools';
 
 import type {
@@ -47,7 +48,7 @@ interface RenderPropValueInput {
   /** JavaScript identifier referenced by hoisted values. */
   variableName: string;
   /** CSF arg value expression. */
-  value: t.Node;
+  value: Node;
   /** Render plan the value was classified with. */
   plan: RenderableValuePlan;
 }
@@ -125,13 +126,13 @@ function renderPropValue(input: RenderPropValueInput, ctx: RenderContext): Rende
     return hoistedProp(input, ctx, printValue(value));
   }
 
-  if (value.type === 'BooleanLiteral') {
+  if (value.type === 'Literal' && typeof value.value === 'boolean') {
     return value.value
       ? { attrName: input.attributeName }
       : { attrName: `:${input.attributeName}`, value: 'false' };
   }
 
-  if (value.type === 'StringLiteral') {
+  if (isStringLiteral(value)) {
     const quoted = quoteAttributeValue(value.value);
     return quoted === undefined
       ? hoistedProp(input, ctx, printValue(value))
@@ -196,18 +197,17 @@ export function renderSlotContent(
 }
 
 /** Source text of a primitive arg value that can appear directly in template text, unescaped. */
-export function inlinePrimitiveSource(node: t.Node): string | undefined {
+export function inlinePrimitiveSource(node: Node): string | undefined {
   const value = unwrapExpression(node);
 
-  switch (value.type) {
-    case 'StringLiteral':
-      return value.value;
-    case 'NumericLiteral':
-    case 'BooleanLiteral':
-      return String(value.value);
-    default:
-      return undefined;
+  if (value.type !== 'Literal') {
+    return undefined;
   }
+  return typeof value.value === 'string'
+    ? value.value
+    : typeof value.value === 'number' || typeof value.value === 'boolean'
+      ? String(value.value)
+      : undefined;
 }
 
 /**
@@ -248,7 +248,7 @@ ${sections.join('\n\n')}
 }
 
 function allocateBindingName(name: string, ctx: RenderContext): string {
-  const baseName = t.toIdentifier(name);
+  const baseName = toIdentifier(name);
   let bindingName = baseName;
   let suffix = 2;
 
@@ -261,6 +261,25 @@ function allocateBindingName(name: string, ctx: RenderContext): string {
   return bindingName;
 }
 
+const RESERVED_WORDS = new Set(
+  (
+    'break case catch class const continue debugger default delete do else enum export extends ' +
+    'false finally for function if import in instanceof new null return super switch this throw ' +
+    'true try typeof var void while with implements interface let package private protected ' +
+    'public static yield await arguments eval'
+  ).split(' ')
+);
+
+// Same output as Babel's `toIdentifier`, which earlier snippets were generated with.
+function toIdentifier(input: string): string {
+  const name = [...input]
+    .map((char) => (/[\p{ID_Continue}$\u200C\u200D]/u.test(char) ? char : '-'))
+    .join('')
+    .replace(/^[-0-9]+/, '')
+    .replace(/[-\s]+(.)?/g, (_, next?: string) => (next ? next.toUpperCase() : ''));
+  return name && !RESERVED_WORDS.has(name) ? name : `_${name}`;
+}
+
 /** Quoted attribute value, or `undefined` when both quote styles occur and it must be hoisted. */
 function quoteAttributeValue(value: string): string | undefined {
   // Attribute values are entity-decoded on re-parse, so an `&` would come back as a different
@@ -361,7 +380,7 @@ export function renderBoundArgAttribute(
 }
 
 /** Hoist an arg value into `<script setup>` and return the binding name that replaces it. */
-export function hoistArgValue(name: string, value: t.Node, ctx: RenderContext): string {
+export function hoistArgValue(name: string, value: Node, ctx: RenderContext): string {
   const source = printValue(unwrapExpression(value));
   const existing = ctx.hoistedArgs.get(name);
   if (existing?.source === source) {
@@ -375,7 +394,7 @@ export function hoistArgValue(name: string, value: t.Node, ctx: RenderContext):
 }
 
 /** Hoist an arg value as a `ref` for a `v-model` binding; an absent value starts the ref empty. */
-export function hoistModelRef(name: string, value: t.Node | undefined, ctx: RenderContext): string {
+export function hoistModelRef(name: string, value: Node | undefined, ctx: RenderContext): string {
   (ctx.imports[VUE_PACKAGE] ??= new Set()).add('ref');
   const bindingName = allocateBindingName(name, ctx);
   ctx.variables.set(bindingName, value ? `ref(${printValue(unwrapExpression(value))})` : 'ref()');
diff --git a/code/renderers/vue3/src/docgen/story-docs/build-story-docs.test.ts b/code/renderers/vue3/src/docgen/story-docs/build-story-docs.test.ts
index 2e874e2fa690..4b49e21cf3be 100644
--- a/code/renderers/vue3/src/docgen/story-docs/build-story-docs.test.ts
+++ b/code/renderers/vue3/src/docgen/story-docs/build-story-docs.test.ts
@@ -2,7 +2,7 @@ import { readFile } from 'node:fs/promises';
 
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { babelParseFile } from 'storybook/internal/csf-tools';
+import { SourceEditor } from 'storybook/internal/csf-tools';
 import type { IndexEntry } from 'storybook/internal/types';
 import type { DocgenPayload } from 'storybook/open-service';
 
@@ -48,9 +48,12 @@ const ENTRY: IndexEntry = {
 const referencesFor = (modules: Record<string, string>) => ({
   resolveModule: (_fromFile: string, specifier: string) => {
     const code = modules[specifier];
-    return code === undefined
-      ? undefined
-      : { program: babelParseFile({ code, filename: specifier }).path, filePath: specifier };
+    if (code === undefined) {
+      return undefined;
+    }
+    const editor = new SourceEditor(code, specifier);
+    editor.parentOf(editor.program);
+    return { editor, filePath: specifier };
   },
 });
 
diff --git a/code/renderers/vue3/src/docgen/story-docs/build-story-docs.ts b/code/renderers/vue3/src/docgen/story-docs/build-story-docs.ts
index 57ab2edac5e1..c2749c16caf8 100644
--- a/code/renderers/vue3/src/docgen/story-docs/build-story-docs.ts
+++ b/code/renderers/vue3/src/docgen/story-docs/build-story-docs.ts
@@ -1,7 +1,6 @@
 import { readFile } from 'node:fs/promises';
 import { isAbsolute, join } from 'node:path';
 
-import { types as t, type NodePath } from 'storybook/internal/babel';
 import {
   STORY_FILE_TEST_REGEXP,
   getComponentIdFromEntry,
@@ -10,28 +9,30 @@ import {
 import { getService } from 'storybook/internal/core-server';
 import { storyNameFromExport } from 'storybook/internal/csf/csf-utils';
 import {
+  type ESTree as E,
+  type ESTreeNode as Node,
+  type ImportBinding,
+  type RenderFunction,
+  type StoryArgsResolver,
+  type StoryReferenceResolver,
   buildImportStatements,
   collectImportBindings,
   createStoryArgsResolver,
   createStoryReferenceResolver,
   extractStoryJSDocInfo,
-  jsDocTagsForPath,
+  jsDocTagsForNode,
   keyOf,
   loadCsf,
-  metaObjectPath,
+  metaObject,
   noSnippetWarning,
   normalizeStoryDeclaration,
   propertyValue,
   resolveComponentImport,
+  resolveEffectiveRender,
   resolveReturnedObjectExpression,
   returnedExpression,
-  returnedExpressionPath,
   unresolvedWarning,
   unwrapExpression,
-  type ImportBinding,
-  type RenderFunctionPath,
-  type StoryArgsResolver,
-  type StoryReferenceResolver,
 } from 'storybook/internal/csf-tools';
 import type { StoryDoc, StoryDocsPayload, StoryDocsProviderInput } from 'storybook/internal/types';
 import type { DocgenPayload, DocgenService } from 'storybook/open-service';
@@ -49,7 +50,6 @@ import {
   transformTemplate,
   type TemplateRenderConfig,
 } from './transform-template/transform-template.ts';
-import { resolveEffectiveRender } from '../../../../../core/src/csf-tools/story-shape/render.ts';
 
 export interface BuildStoryDocsContext {
   /** Resolve a CSF import path to an absolute file path. Defaults to `process.cwd()` join. */
@@ -70,7 +70,6 @@ interface StoryDocsContext {
   /** Present only when the component identifier and docgen data can synthesize snippets. */
   snippet: StorySnippetContext | undefined;
   importBindings: Map<string, ImportBinding>;
-  metaPath: NodePath<t.ObjectExpression> | undefined;
   /** Resolves each story's args, following a spread or a name out of the story file. */
   resolver: StoryArgsResolver;
   /** Story file source, for forwarding setup statements verbatim. */
@@ -100,7 +99,7 @@ type ParsedCsf = ReturnType<ReturnType<typeof loadCsf>['parse']>;
 type ExtractStoriesResult = { stories: Record<string, StoryDoc> };
 type StaticStoryRenderer =
   | { kind: 'bail'; warning: string }
-  | { kind: 'h'; argsParam?: string; expression: t.Expression }
+  | { kind: 'h'; argsParam?: string; expression: E.Expression }
   | { kind: 'sfc' }
   | {
       kind: 'template';
@@ -147,7 +146,7 @@ export async function buildStoryDocsPayload(
     return undefined;
   }
 
-  const metaPath = metaObjectPath(csf);
+  const meta = metaObject(csf);
   const id = getComponentIdFromEntry(input.entry);
   let docgenPayload: DocgenPayload | undefined;
   try {
@@ -155,12 +154,12 @@ export async function buildStoryDocsPayload(
   } catch {
     // Docgen is optional here: without it the payload is still built, just without snippets.
   }
-  const componentName = resolveMetaComponentIdentifier(metaPath);
-  const importBindings = collectImportBindings(csf._file.path);
+  const componentName = resolveMetaComponentIdentifier(meta);
+  const importBindings = collectImportBindings(csf._program);
   const importStatement = createImportStatement(
     componentName,
     importBindings,
-    metaPath,
+    jsDocTagsForNode(meta, csf._editor),
     docgenPayload
   );
   const docgenArgInfo =
@@ -172,7 +171,6 @@ export async function buildStoryDocsPayload(
   const extracted = extractStories(csf, {
     snippet,
     importBindings,
-    metaPath,
     resolver: createStoryArgsResolver(csf, {
       filePath: storyPath,
       ...(context.references ?? openStoryReferences()),
@@ -199,11 +197,9 @@ function fallbackTitle(title: string): string {
  *
  * @example `component: MyButton` → `'MyButton'`; `component: UI.Button` → `undefined`
  */
-function resolveMetaComponentIdentifier(
-  metaPath: NodePath<t.ObjectExpression> | undefined
-): string | undefined {
-  const value = propertyValue(metaPath?.node, 'component');
-  return t.isIdentifier(value) ? value.name : undefined;
+function resolveMetaComponentIdentifier(meta: E.ObjectExpression | undefined): string | undefined {
+  const value = propertyValue(meta, 'component');
+  return value?.type === 'Identifier' ? value.name : undefined;
 }
 
 /**
@@ -219,7 +215,7 @@ function resolveMetaComponentIdentifier(
 function createImportStatement(
   componentName: string | undefined,
   importBindings: Map<string, ImportBinding>,
-  metaPath: NodePath<t.ObjectExpression> | undefined,
+  metaJsDocTags: Record<string, string[]>,
   docgenPayload: DocgenPayload | undefined
 ): string | undefined {
   if (!componentName) {
@@ -229,8 +225,7 @@ function createImportStatement(
   // The override supplies the source and specifier kind, but the local name has to stay the one the
   // snippet renders, so the statement and the snippet keep referring to the same identifier.
   const ref = resolveComponentImport(componentName, importBindings);
-  const importOverride =
-    jsDocTagsForPath(metaPath).import?.[0] ?? docgenPayload?.jsDocTags.import?.[0];
+  const importOverride = metaJsDocTags.import?.[0] ?? docgenPayload?.jsDocTags.import?.[0];
   return buildImportStatements({ refs: [{ ...ref, importOverride }] }).join('\n') || undefined;
 }
 
@@ -270,7 +265,10 @@ function vueDocgenArgInfo(payload: DocgenPayload): VueDocgenArgInfo {
 function extractStories(csf: ParsedCsf, options: StoryDocsContext): ExtractStoriesResult {
   const stories = Object.fromEntries(
     Object.entries(csf._stories).map(([storyExport, story]): [string, StoryDoc] => {
-      const { description, summary } = extractStoryJSDocInfo(csf._storyStatements[storyExport]);
+      const { description, summary } = extractStoryJSDocInfo(
+        csf._storyStatements[storyExport],
+        csf._editor
+      );
       const storyDoc: StoryDoc = {
         id: story.id,
         name: story.name ?? storyNameFromExport(storyExport),
@@ -312,7 +310,7 @@ function enrichStoryDoc(
 
   let normalized;
   try {
-    normalized = normalizeStoryDeclaration(csf._storyDeclarationPath[storyExport]);
+    normalized = normalizeStoryDeclaration(csf._storyExports[storyExport], csf._editor);
   } catch {
     return plain;
   }
@@ -324,7 +322,7 @@ function enrichStoryDoc(
   const effectiveRender = resolveEffectiveRender(csf, storyExport, options.resolver.ctx);
   const renderer =
     effectiveRender.kind === 'resolved'
-      ? staticRendererForRenderFunction(effectiveRender.path, options)
+      ? staticRendererForRenderFunction(effectiveRender.node, options)
       : effectiveRender.kind === 'missing'
         ? { kind: 'sfc' as const }
         : undefined;
@@ -371,13 +369,16 @@ function enrichStoryDoc(
 }
 
 function staticRendererForRenderFunction(
-  renderFunction: RenderFunctionPath,
+  renderFunction: RenderFunction,
   options: StoryDocsContext
 ): StaticStoryRenderer | undefined {
-  const renderObject = resolveReturnedObjectExpression(renderFunction);
+  const renderObject = resolveReturnedObjectExpression(
+    renderFunction,
+    options.resolver.ctx.editor.program
+  );
   if (renderObject) {
     const resolution = readTemplateRenderConfig(renderObject, options.importBindings, {
-      argsParam: argsParameterName(renderFunction.node),
+      argsParam: argsParameterName(renderFunction),
       componentImportStatement: options.snippet?.componentImportStatement,
       componentName: options.snippet?.componentName,
       source: options.source,
@@ -392,17 +393,17 @@ function staticRendererForRenderFunction(
     const setupExpression = setupReturnedRenderExpression(renderObject);
     if (setupExpression) {
       return {
-        argsParam: argsParameterName(renderFunction.node),
+        argsParam: argsParameterName(renderFunction),
         expression: setupExpression,
         kind: 'h',
       };
     }
   }
 
-  const hExpression = returnedExpressionPath(renderFunction)?.node;
+  const hExpression = returnedExpression(renderFunction);
   return hExpression
     ? {
-        argsParam: argsParameterName(renderFunction.node),
+        argsParam: argsParameterName(renderFunction),
         expression: hExpression,
         kind: 'h',
       }
@@ -489,9 +490,9 @@ function renderStaticStorySnippet(
  *
  * @example `render: (args) => ({ setup: () => () => h(C, { label: args.label }) })` -> the `h(...)` call
  */
-function setupReturnedRenderExpression(renderObject: t.ObjectExpression): t.Expression | undefined {
+function setupReturnedRenderExpression(renderObject: E.ObjectExpression): E.Expression | undefined {
   const supported = renderObject.properties.every((property) => {
-    if (t.isSpreadElement(property)) {
+    if (property.type === 'SpreadElement') {
       return false;
     }
     const key = keyOf(property);
@@ -502,28 +503,33 @@ function setupReturnedRenderExpression(renderObject: t.ObjectExpression): t.Expr
   }
 
   const setup = renderObject.properties.find(
-    (property) => !t.isSpreadElement(property) && keyOf(property) === 'setup'
+    (property): property is E.ObjectProperty =>
+      property.type === 'Property' && keyOf(property) === 'setup'
   );
-  const setupFn = t.isObjectMethod(setup)
-    ? setup
-    : t.isObjectProperty(setup)
-      ? unwrapExpression(setup.value)
-      : undefined;
-  if (!setupFn || !t.isFunction(setupFn)) {
+  const setupFn = setup && unwrapExpression(setup.value);
+  if (!setupFn || !isFunction(setupFn)) {
     return undefined;
   }
 
   const renderClosure = returnedExpression(setupFn);
   const closure = renderClosure && unwrapExpression(renderClosure);
   // A render closure with parameters would receive values the snippet cannot reproduce.
-  if (!closure || !t.isFunction(closure) || closure.params.length > 0) {
+  if (!closure || !isFunction(closure) || closure.params.length > 0) {
     return undefined;
   }
 
   return returnedExpression(closure);
 }
 
-function argsParameterName(renderFunction: RenderFunctionPath['node']): string | undefined {
+function isFunction(node: Node): node is RenderFunction {
+  return (
+    node.type === 'ArrowFunctionExpression' ||
+    node.type === 'FunctionExpression' ||
+    node.type === 'FunctionDeclaration'
+  );
+}
+
+function argsParameterName(renderFunction: RenderFunction): string | undefined {
   const [parameter] = renderFunction.params;
-  return t.isIdentifier(parameter) ? parameter.name : undefined;
+  return parameter?.type === 'Identifier' ? parameter.name : undefined;
 }
diff --git a/code/renderers/vue3/src/docgen/story-docs/classify-args/classify-args.test.ts b/code/renderers/vue3/src/docgen/story-docs/classify-args/classify-args.test.ts
index 58d493374489..a6d22cb1f64d 100644
--- a/code/renderers/vue3/src/docgen/story-docs/classify-args/classify-args.test.ts
+++ b/code/renderers/vue3/src/docgen/story-docs/classify-args/classify-args.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { babelParse, types as t } from 'storybook/internal/babel';
+import { type ESTreeNode as Node, expressionFromSource, keyOf } from 'storybook/internal/csf-tools';
 
 import { classifyArgs, type ClassifiedArg } from './classify-args.ts';
 import { printValue } from '../../shared/classify-value.ts';
@@ -191,27 +191,22 @@ function classify(
   };
 }
 
-function parseArgs(code: string): Record<string, t.Node> {
-  const file = babelParse(`(${code})`);
-  const statement = file.program.body[0];
-  if (!t.isExpressionStatement(statement) || !t.isObjectExpression(statement.expression)) {
+function parseArgs(code: string): Record<string, Node> {
+  const expression = expressionFromSource(code);
+  if (expression.type !== 'ObjectExpression') {
     throw new Error(`Not an args object: ${code}`);
   }
 
   return Object.fromEntries(
-    statement.expression.properties.map((property) => {
-      if (!t.isObjectProperty(property) || property.computed) {
+    expression.properties.map((property) => {
+      if (property.type !== 'Property' || property.method || property.computed) {
         throw new Error(`Not a plain arg: ${printValue(property)}`);
       }
-
-      if (t.isIdentifier(property.key)) {
-        return [property.key.name, property.value];
-      }
-      if (t.isStringLiteral(property.key)) {
-        return [property.key.value, property.value];
+      const name = keyOf(property);
+      if (name === null) {
+        throw new Error(`Unsupported arg name: ${printValue(property.key)}`);
       }
-
-      throw new Error(`Unsupported arg name: ${printValue(property.key)}`);
+      return [name, property.value];
     })
   );
 }
diff --git a/code/renderers/vue3/src/docgen/story-docs/classify-args/classify-args.ts b/code/renderers/vue3/src/docgen/story-docs/classify-args/classify-args.ts
index b846baea68ed..df98a0d019a0 100644
--- a/code/renderers/vue3/src/docgen/story-docs/classify-args/classify-args.ts
+++ b/code/renderers/vue3/src/docgen/story-docs/classify-args/classify-args.ts
@@ -1,5 +1,8 @@
-import { type types as t } from 'storybook/internal/babel';
-import { returnedExpression, unwrapExpression } from 'storybook/internal/csf-tools';
+import {
+  type ESTreeNode as Node,
+  returnedExpression,
+  unwrapExpression,
+} from 'storybook/internal/csf-tools';
 
 import {
   classifyValue,
@@ -37,7 +40,7 @@ export interface FunctionSlotPlan {
 
 export interface ClassifiedPropLikeArg {
   name: string;
-  value: t.Node;
+  value: Node;
   role: Exclude<ArgRole, 'slot'>;
   /** Vue event name bound in the template, present when role is 'event'. */
   eventName?: string;
@@ -46,7 +49,7 @@ export interface ClassifiedPropLikeArg {
 
 export interface ClassifiedSlotArg {
   name: string;
-  value: t.Node;
+  value: Node;
   role: 'slot';
   plan: RenderableValuePlan | FunctionSlotPlan;
 }
@@ -93,7 +96,7 @@ export interface ClassifyArgsResult {
  * Function args matching a declared event render as listeners, and declared function props hoist.
  */
 export function classifyArgs(
-  args: Record<string, t.Node>,
+  args: Record<string, Node>,
   docgen: VueDocgenArgInfo
 ): ClassifyArgsResult {
   const classified: ClassifiedArg[] = [];
@@ -123,7 +126,7 @@ export function classifyArgs(
  */
 export function classifyArg(
   name: string,
-  value: t.Node,
+  value: Node,
   docgen: VueDocgenArgInfo
 ): ArgClassification {
   const isSlot = docgen.slots.has(name);
diff --git a/code/renderers/vue3/src/docgen/story-docs/print-h/print-h.test.ts b/code/renderers/vue3/src/docgen/story-docs/print-h/print-h.test.ts
index 958263d3b64e..1c05ad8d5e6f 100644
--- a/code/renderers/vue3/src/docgen/story-docs/print-h/print-h.test.ts
+++ b/code/renderers/vue3/src/docgen/story-docs/print-h/print-h.test.ts
@@ -1,12 +1,12 @@
 import { describe, expect, it } from 'vitest';
 
-import { types as t } from 'storybook/internal/babel';
 import {
+  type ESTreeNode as Node,
+  type ReferenceContext,
   collectImportBindings,
   loadCsf,
-  metaObjectPath,
+  metaObject,
   normalizeStoryDeclaration,
-  type ReferenceContext,
   resolveArgsRecord,
   resolveBindingMembers,
   resolveObjectMembers,
@@ -34,7 +34,7 @@ interface ParsedRender {
   args: ClassifiedArg[];
   unsetArgs: ReadonlySet<string>;
   argsParam?: string;
-  expression?: t.Node;
+  expression?: Node;
   importBindings: ReturnType<typeof collectImportBindings>;
 }
 
@@ -127,15 +127,16 @@ ${storySource}
 `,
     { makeTitle: () => 'Example/MyButton' }
   ).parse();
-  const normalized = normalizeStoryDeclaration(csf._storyDeclarationPath.Primary);
+  csf._editor.parentOf(csf._program);
+  const normalized = normalizeStoryDeclaration(csf._storyExports.Primary, csf._editor);
 
   if (normalized.type !== 'config') {
     throw new Error('Expected a config story');
   }
 
-  const metaPath = metaObjectPath(csf);
-  const references: ReferenceContext = { program: csf._file.path, filePath: 'entry.ts' };
-  const metaMembers = metaPath ? resolveObjectMembers(metaPath.node, references) : undefined;
+  const meta = metaObject(csf);
+  const references: ReferenceContext = { editor: csf._editor, filePath: 'entry.ts' };
+  const metaMembers = meta ? resolveObjectMembers(meta, references) : undefined;
   const classified = classifyArgs(
     {
       ...resolveArgsRecord(metaMembers?.properties.args, references).properties,
@@ -147,27 +148,25 @@ ${storySource}
     docgen
   );
   // Mirrors resolveEffectiveRender in build-story-docs: story render wins, meta is the fallback.
-  const storyRender = resolveRenderFunction(normalized.path, csf._storyDeclarationPath.Primary);
+  const storyRender = resolveRenderFunction(normalized.node, csf._editor);
   const renderResolution =
-    storyRender.kind !== 'missing'
-      ? storyRender
-      : resolveRenderFunction(metaPath, csf._storyDeclarationPath.Primary);
+    storyRender.kind !== 'missing' ? storyRender : resolveRenderFunction(meta, csf._editor);
 
   if (renderResolution.kind !== 'resolved') {
     return {
       args: classified.args,
       unsetArgs: classified.unset,
-      importBindings: collectImportBindings(csf._file.path),
+      importBindings: collectImportBindings(csf._program),
     };
   }
 
-  const [parameter] = renderResolution.path.node.params;
+  const [parameter] = renderResolution.node.params;
   return {
     args: classified.args,
     unsetArgs: classified.unset,
-    argsParam: t.isIdentifier(parameter) ? parameter.name : undefined,
-    expression: returnedExpression(renderResolution.path.node),
-    importBindings: collectImportBindings(csf._file.path),
+    argsParam: parameter?.type === 'Identifier' ? parameter.name : undefined,
+    expression: returnedExpression(renderResolution.node),
+    importBindings: collectImportBindings(csf._program),
   };
 }
 
diff --git a/code/renderers/vue3/src/docgen/story-docs/print-h/print-h.ts b/code/renderers/vue3/src/docgen/story-docs/print-h/print-h.ts
index cfef0548a2d4..3744261d1164 100644
--- a/code/renderers/vue3/src/docgen/story-docs/print-h/print-h.ts
+++ b/code/renderers/vue3/src/docgen/story-docs/print-h/print-h.ts
@@ -1,9 +1,13 @@
-import { types as t } from 'storybook/internal/babel';
 import {
+  type ESTree as E,
+  type ESTreeNode as Node,
+  type ImportBinding,
+  codeOf,
+  isStringLiteral,
   keyOf,
   returnedExpression,
   unwrapExpression,
-  type ImportBinding,
+  walk,
 } from 'storybook/internal/csf-tools';
 
 import {
@@ -27,7 +31,7 @@ import {
 
 export interface PrintHInput {
   /** Render-function expression to print as template markup. */
-  node: t.Node;
+  node: Node;
   /** Name of the render function's args parameter. */
   argsParam?: string;
   /** Story component tag the docgen roles describe. */
@@ -77,8 +81,8 @@ type HTag = {
 };
 
 type HArguments = {
-  props?: t.Node;
-  children?: t.Node;
+  props?: Node;
+  children?: Node;
 };
 
 type PrintedProps = {
@@ -149,7 +153,7 @@ export function printH(input: PrintHInput): PrintHResult | undefined {
 
 /** Markup for a zero-argument slot function whose body is a static, args-free `h()` child tree. */
 export function printHFragment(
-  node: t.ArrowFunctionExpression | t.FunctionExpression,
+  node: E.ArrowFunctionExpression | E.Function,
   options: PrintHFragmentOptions
 ): string | undefined {
   return printFragmentFunction(node, {
@@ -161,9 +165,9 @@ export function printHFragment(
 }
 
 // h('div', { class: 'row' }, 'Hi') -> <div class="row">Hi</div>
-function printNode(node: t.Node, options: PrintOptions): string | undefined {
+function printNode(node: Node, options: PrintOptions): string | undefined {
   const value = unwrapExpression(node);
-  if (!t.isCallExpression(value) || !t.isIdentifier(value.callee, { name: H_FUNCTION })) {
+  if (!isHCall(value)) {
     return undefined;
   }
 
@@ -215,19 +219,19 @@ function joinChildren(children: string[]): string {
     : children.join('');
 }
 
-function renderTag(node: t.Node | undefined | null, options: PrintOptions): HTag | undefined {
+function renderTag(node: Node | undefined | null, options: PrintOptions): HTag | undefined {
   const tag = node ? unwrapExpression(node) : undefined;
   if (!tag) {
     return undefined;
   }
 
-  if (t.isStringLiteral(tag)) {
+  if (isStringLiteral(tag)) {
     return isComponentName(tag.value)
       ? componentTag(tag.value, options)
       : { name: tag.value, selfClosing: isVoidElement(tag.value), void: isVoidElement(tag.value) };
   }
 
-  return t.isIdentifier(tag) ? componentTag(tag.name, options) : undefined;
+  return tag.type === 'Identifier' ? componentTag(tag.name, options) : undefined;
 }
 
 /**
@@ -249,10 +253,8 @@ function componentTag(name: string, options: PrintOptions): HTag | undefined {
   return { name, selfClosing: true, void: false };
 }
 
-function splitHArguments(
-  args: (t.Node | t.SpreadElement | t.ArgumentPlaceholder)[]
-): HArguments | undefined {
-  if (args.some((arg) => t.isSpreadElement(arg) || t.isArgumentPlaceholder(arg))) {
+function splitHArguments(args: E.Argument[]): HArguments | undefined {
+  if (args.some((arg) => arg.type === 'SpreadElement')) {
     return undefined;
   }
   if (args.length === 0) {
@@ -270,15 +272,23 @@ function splitHArguments(
 }
 
 // h(tag, 'Hi'), h(tag, ['Hi']), h(tag, h('b')) -> the argument is children, not props
-function isChildrenArgument(node: t.Node): boolean {
+function isChildrenArgument(node: Node): boolean {
   const value = unwrapExpression(node);
+  return isStringLiteral(value) || value.type === 'ArrayExpression' || isHCall(value);
+}
+
+function isHCall(node: Node): node is E.CallExpression {
   return (
-    t.isStringLiteral(value) ||
-    t.isArrayExpression(value) ||
-    (t.isCallExpression(value) && t.isIdentifier(value.callee, { name: H_FUNCTION }))
+    node.type === 'CallExpression' &&
+    node.callee.type === 'Identifier' &&
+    node.callee.name === H_FUNCTION
   );
 }
 
+function isValueProperty(node: Node): node is E.ObjectProperty {
+  return node.type === 'Property' && !node.method && node.kind === 'init';
+}
+
 /**
  * Attributes and slot children for one props argument, in source order.
  *
@@ -288,7 +298,7 @@ function isChildrenArgument(node: t.Node): boolean {
  * @example `{ label: 'Hi', ...args }` → `label="Hi" v-bind="args"`
  */
 function printProps(
-  node: t.Node | undefined,
+  node: Node | undefined,
   tag: HTag,
   options: PrintOptions
 ): PrintedProps | undefined {
@@ -297,13 +307,13 @@ function printProps(
   }
 
   const value = unwrapExpression(node);
-  if (t.isNullLiteral(value)) {
+  if (value.type === 'Literal' && value.raw === 'null') {
     return { attributes: [], slotChildren: [] };
   }
   if (isArgsIdentifier(value, options.argsParam)) {
     return { attributes: [ARGS_BINDING], slotChildren: [] };
   }
-  if (!t.isObjectExpression(value)) {
+  if (value.type !== 'ObjectExpression') {
     return undefined;
   }
 
@@ -314,14 +324,14 @@ function printProps(
   const slotChildren: string[] = [];
 
   for (const property of value.properties) {
-    if (t.isSpreadElement(property)) {
+    if (property.type === 'SpreadElement') {
       if (!isArgsIdentifier(property.argument, options.argsParam)) {
         return undefined;
       }
       attributes.push(ARGS_BINDING);
       continue;
     }
-    if (!t.isObjectProperty(property)) {
+    if (!isValueProperty(property)) {
       return undefined;
     }
 
@@ -388,7 +398,7 @@ function printSlotArgContent(arg: ClassifiedSlotArg, options: PrintOptions): str
 
 /** Fragments print args-free: their content belongs to components the story does not describe. */
 function printFragmentFunction(
-  node: t.ArrowFunctionExpression | t.FunctionExpression,
+  node: E.ArrowFunctionExpression | E.Function,
   options: Omit<PrintOptions, 'argsParam' | 'componentName'>
 ): string | undefined {
   if (node.params.length > 0) {
@@ -409,33 +419,33 @@ function printFragmentFunction(
 }
 
 // h(tag, { header: () => h('span') }) -> named slots; h(tag, 'Hi') -> one child
-function printChildren(node: t.Node | undefined, options: PrintOptions): string[] | undefined {
+function printChildren(node: Node | undefined, options: PrintOptions): string[] | undefined {
   if (!node) {
     return [];
   }
 
   const value = unwrapExpression(node);
-  return t.isObjectExpression(value)
+  return value.type === 'ObjectExpression'
     ? printSlotsObject(value, options)
     : printChildValue(value, options);
 }
 
 // 'Hi', h('b', 'Hi'), args.label, or ['a', h('b', 'c')] -> one child per rendered vnode
-function printChildValue(node: t.Node, options: PrintOptions): string[] | undefined {
+function printChildValue(node: Node, options: PrintOptions): string[] | undefined {
   const value = unwrapExpression(node);
 
-  if (t.isCallExpression(value)) {
-    if (!t.isIdentifier(value.callee, { name: H_FUNCTION })) {
+  if (value.type === 'CallExpression') {
+    if (!isHCall(value)) {
       return undefined;
     }
     const child = printNode(value, options);
     return child === undefined ? undefined : [child];
   }
 
-  if (t.isArrayExpression(value)) {
+  if (value.type === 'ArrayExpression') {
     const children: string[] = [];
     for (const element of value.elements) {
-      if (!element || t.isSpreadElement(element)) {
+      if (!element || element.type === 'SpreadElement') {
         return undefined;
       }
       const rendered = printChildValue(element, options);
@@ -461,11 +471,11 @@ function printChildValue(node: t.Node, options: PrintOptions): string[] | undefi
 }
 
 // { header: () => h('span', 'Hi') } -> <template #header><span>Hi</span></template>
-function printSlotsObject(value: t.ObjectExpression, options: PrintOptions): string[] | undefined {
+function printSlotsObject(value: E.ObjectExpression, options: PrintOptions): string[] | undefined {
   const slots: string[] = [];
 
   for (const property of value.properties) {
-    if (!t.isObjectProperty(property)) {
+    if (!isValueProperty(property)) {
       return undefined;
     }
 
@@ -501,7 +511,7 @@ function argsExpressionAttribute(name: string, expression: string): string {
  *
  * @example (param `a`) `a.count + 1` → `args.count + 1`; `a.label + suffix` → undefined
  */
-function printedArgsExpression(node: t.Node, argsParam: string): string | undefined {
+function printedArgsExpression(node: Node, argsParam: string): string | undefined {
   if (!isPrintableArgsExpression(node, argsParam)) {
     return undefined;
   }
@@ -509,69 +519,65 @@ function printedArgsExpression(node: t.Node, argsParam: string): string | undefi
     return printValue(node);
   }
 
-  const renamed = t.cloneNode(node, true, true);
-  renameIdentifier(renamed, argsParam);
-  return printValue(renamed);
+  const source = codeOf(node);
+  const start = (node as Node & { start: number }).start;
+  let renamed = '';
+  let cursor = 0;
+  for (const { identifier, shorthand } of identifierReferences(node, argsParam)) {
+    renamed += source.slice(cursor, identifier.start - start);
+    renamed += shorthand ? `${argsParam}: ${ARGS_NAME}` : ARGS_NAME;
+    cursor = identifier.end - start;
+  }
+  return renamed + source.slice(cursor);
 }
 
 /**
  * Expression shapes that survive printing into a template attribute or interpolation and
  * re-parsing by the engine, with the args parameter as the only free reference.
  */
-function isPrintableArgsExpression(node: t.Node, argsParam: string): boolean {
+function isPrintableArgsExpression(node: Node, argsParam: string): boolean {
   const value = unwrapExpression(node);
-  const valid = (child: t.Node): boolean => isPrintableArgsExpression(child, argsParam);
+  const valid = (child: Node): boolean => isPrintableArgsExpression(child, argsParam);
 
   switch (value.type) {
-    case 'StringLiteral':
-    case 'NumericLiteral':
-    case 'BooleanLiteral':
-    case 'NullLiteral':
-    case 'BigIntLiteral':
-      return true;
+    case 'Literal':
+      return !('regex' in value && value.regex);
 
     case 'Identifier':
       return value.name === argsParam;
 
     case 'TemplateLiteral':
-      return value.expressions.every(
-        (expression) => t.isExpression(expression) && valid(expression)
-      );
+      return value.expressions.every(valid);
 
     case 'ArrayExpression':
-      return value.elements.every(
-        (element) => element !== null && !t.isSpreadElement(element) && valid(element)
-      );
+      return value.elements.every((element) => element !== null && valid(element));
 
     case 'ObjectExpression':
       return value.properties.every(
         (property) =>
-          t.isObjectProperty(property) &&
+          isValueProperty(property) &&
           (!property.computed || valid(property.key)) &&
           valid(property.value)
       );
 
+    // Only an optional member chain; an optional call is not printable.
+    case 'ChainExpression':
+      return value.expression.type === 'MemberExpression' && valid(value.expression);
+
     case 'MemberExpression':
-    case 'OptionalMemberExpression':
       return (
         valid(value.object) &&
-        (value.computed ? valid(value.property) : t.isIdentifier(value.property))
+        (value.computed ? valid(value.property) : value.property.type === 'Identifier')
       );
 
     case 'CallExpression':
     case 'NewExpression':
-      return (
-        t.isExpression(value.callee) &&
-        valid(value.callee) &&
-        value.arguments.every((argument) => t.isExpression(argument) && valid(argument))
-      );
+      return valid(value.callee) && value.arguments.every(valid);
 
     case 'UnaryExpression':
       return value.operator !== 'delete' && valid(value.argument);
 
     case 'BinaryExpression':
-      return t.isExpression(value.left) && valid(value.left) && valid(value.right);
-
     case 'LogicalExpression':
       return valid(value.left) && valid(value.right);
 
@@ -584,63 +590,45 @@ function isPrintableArgsExpression(node: t.Node, argsParam: string): boolean {
 }
 
 /** Whether the expression reads the identifier anywhere outside member properties and object keys. */
-function referencesIdentifier(node: t.Node, name: string): boolean {
-  if (t.isIdentifier(node, { name })) {
-    return true;
-  }
-
-  for (const key of t.VISITOR_KEYS[node.type] ?? []) {
-    if (skipsReferencePosition(node, key)) {
-      continue;
-    }
-    const child = node[key as keyof typeof node];
-    if (Array.isArray(child)) {
-      if (child.some((entry) => t.isNode(entry) && referencesIdentifier(entry, name))) {
-        return true;
-      }
-    } else if (t.isNode(child) && referencesIdentifier(child, name)) {
-      return true;
-    }
-  }
-
-  return false;
+function referencesIdentifier(node: Node, name: string): boolean {
+  return identifierReferences(node, name).length > 0;
 }
 
-function renameIdentifier(node: t.Node, from: string): void {
-  if (t.isIdentifier(node, { name: from })) {
-    node.name = ARGS_NAME;
-    return;
-  }
-
-  for (const key of t.VISITOR_KEYS[node.type] ?? []) {
-    if (skipsReferencePosition(node, key)) {
-      continue;
+// Reads of an identifier in source order, flagging the ones written as a shorthand property.
+function identifierReferences(
+  root: Node,
+  name: string
+): { identifier: E.IdentifierReference & { start: number; end: number }; shorthand: boolean }[] {
+  const byStart = new Map<
+    number,
+    { identifier: E.IdentifierReference & { start: number; end: number }; shorthand: boolean }
+  >();
+  walk(root, (node, parent) => {
+    if (node.type !== 'Identifier' || node.name !== name) {
+      return;
     }
-    const child = node[key as keyof typeof node];
-    if (Array.isArray(child)) {
-      child.forEach((entry) => {
-        if (t.isNode(entry)) {
-          renameIdentifier(entry, from);
-        }
-      });
-    } else if (t.isNode(child)) {
-      renameIdentifier(child, from);
+    // args.label -> 'label' and { label: 1 } -> 'label' are name positions, not references
+    if (parent?.type === 'MemberExpression' && parent.property === node && !parent.computed) {
+      return;
     }
-  }
-}
-
-// args.label -> 'label' and { label: 1 } -> 'label' are name positions, not references
-function skipsReferencePosition(node: t.Node, key: string): boolean {
-  if ((t.isMemberExpression(node) || t.isOptionalMemberExpression(node)) && key === 'property') {
-    return !node.computed;
-  }
-  if (t.isObjectProperty(node) && key === 'key') {
-    return !node.computed;
-  }
-  return false;
+    if (
+      parent?.type === 'Property' &&
+      parent.key === node &&
+      !parent.computed &&
+      !parent.shorthand
+    ) {
+      return;
+    }
+    const identifier = node as E.IdentifierReference & { start: number; end: number };
+    byStart.set(identifier.start, {
+      identifier,
+      shorthand: parent?.type === 'Property' && parent.shorthand,
+    });
+  });
+  return [...byStart.values()].sort((a, b) => a.identifier.start - b.identifier.start);
 }
 
-function isArgsIdentifier(node: t.Node, argsParam: string | undefined): boolean {
+function isArgsIdentifier(node: Node, argsParam: string | undefined): boolean {
   const value = unwrapExpression(node);
-  return Boolean(argsParam && t.isIdentifier(value, { name: argsParam }));
+  return Boolean(argsParam && value.type === 'Identifier' && value.name === argsParam);
 }
diff --git a/code/renderers/vue3/src/docgen/story-docs/transform-template/forward-setup.ts b/code/renderers/vue3/src/docgen/story-docs/transform-template/forward-setup.ts
index 0193573f4531..13313a4d8936 100644
--- a/code/renderers/vue3/src/docgen/story-docs/transform-template/forward-setup.ts
+++ b/code/renderers/vue3/src/docgen/story-docs/transform-template/forward-setup.ts
@@ -1,5 +1,11 @@
-import { types as t } from 'storybook/internal/babel';
-import { keyOf, unwrapExpression, type ImportBinding } from 'storybook/internal/csf-tools';
+import {
+  type ESTree as E,
+  type ESTreeNode as Node,
+  type ImportBinding,
+  keyOf,
+  unwrapExpression,
+  walk,
+} from 'storybook/internal/csf-tools';
 
 import {
   collectPatternNames,
@@ -66,13 +72,11 @@ export function setupReferencesWarning(names: string[]): string {
 
 const ARGS_NAME = 'args';
 
-type SetupBody = { statements: t.Statement[]; returned?: t.Node };
+type SetupBody = { statements: E.Statement[]; returned?: Node };
 
-type SourcePosition = NonNullable<t.Node['loc']>['start'];
-type SourceRange = { start: SourcePosition; end: SourcePosition };
-type ArgsReadLocation = SourceRange & { name: string };
+type Spanned = { start: number; end: number };
 
-type ArgsReadsResult = { ok: true; reads: ArgsReadLocation[] } | { ok: false; reference: string };
+type ArgsReadsResult = { ok: true; reads: ArgsRead[] } | { ok: false; reference: string };
 
 /**
  * Reads a render object's `setup` into statements the snippet forwards into `<script setup>`.
@@ -84,13 +88,13 @@ type ArgsReadsResult = { ok: true; reads: ArgsReadLocation[] } | { ok: false; re
  * `setup() { const count = ref(0); return { args, count }; }` → forwards `const count = ref(0);`
  */
 export function readForwardableSetup(
-  setup: t.ObjectMethod | t.ObjectProperty,
+  setup: E.ObjectProperty,
   options: ReadForwardableSetupOptions
 ): ForwardableSetupResolution {
   const bail = (warning: string): ForwardableSetupResolution => ({ kind: 'bail', warning });
 
-  const setupFn = t.isObjectMethod(setup) ? setup : unwrapExpression(setup.value);
-  if (!t.isObjectMethod(setupFn) && !isFunctionExpression(setupFn)) {
+  const setupFn = unwrapExpression(setup.value);
+  if (!isFunctionExpression(setupFn)) {
     return bail(SETUP_UNSUPPORTED_WARNING);
   }
   if (setupFn.params.length > 0) {
@@ -109,20 +113,20 @@ export function readForwardableSetup(
   if (returned && isFunctionExpression(returned)) {
     return { kind: 'render-closure' };
   }
-  if (returned && !t.isObjectExpression(returned)) {
+  if (returned && returned.type !== 'ObjectExpression') {
     return bail(SETUP_RETURN_WARNING);
   }
 
   const locals = new Set<string>();
   for (const statement of body.statements) {
-    if (t.isVariableDeclaration(statement)) {
+    if (statement.type === 'VariableDeclaration') {
       const named = statement.declarations.every((declaration) =>
         collectPatternNames(declaration.id, locals)
       );
       if (!named) {
         return bail(SETUP_UNSUPPORTED_WARNING);
       }
-    } else if (!t.isExpressionStatement(statement)) {
+    } else if (statement.type !== 'ExpressionStatement') {
       return bail(SETUP_UNSUPPORTED_WARNING);
     }
   }
@@ -141,12 +145,17 @@ export function readForwardableSetup(
   const bindings = new Set(locals);
   const aliasStatements: ForwardableStatement[] = [];
   for (const property of returned?.properties ?? []) {
-    if (!t.isObjectProperty(property) || property.computed) {
+    if (
+      property.type !== 'Property' ||
+      property.method ||
+      property.kind !== 'init' ||
+      property.computed
+    ) {
       return bail(SETUP_RETURN_WARNING);
     }
     const key = keyOf(property);
     const value = unwrapExpression(property.value);
-    if (!key || !t.isIdentifier(value)) {
+    if (!key || value.type !== 'Identifier') {
       return bail(SETUP_RETURN_WARNING);
     }
 
@@ -190,45 +199,21 @@ export function readForwardableSetup(
     return bail(setupReferencesWarning(unresolvable));
   }
 
-  const lineStarts = lineStartOffsets(options.source);
   const statements: ForwardableStatement[] = [];
   for (const statement of body.statements) {
-    const { loc } = statement;
-    if (loc == null) {
-      return bail(SETUP_UNSUPPORTED_WARNING);
-    }
-    const start = offsetAt(lineStarts, loc.start);
-    const end = offsetAt(lineStarts, loc.end);
-    if (start == null || end == null || start > end || end > options.source.length) {
-      return bail(SETUP_UNSUPPORTED_WARNING);
-    }
+    const { start, end } = statement as E.Statement & Spanned;
     const reads = collectArgsReads(statement, options.argsParam);
     if (!reads.ok) {
       return bail(setupReferencesWarning([reads.reference]));
     }
-    const argsReads: ArgsRead[] = [];
-    for (const read of reads.reads) {
-      const readStart = offsetAt(lineStarts, read.start);
-      const readEnd = offsetAt(lineStarts, read.end);
-      if (
-        readStart == null ||
-        readEnd == null ||
-        readStart < start ||
-        readEnd < readStart ||
-        readEnd > end
-      ) {
-        return bail(SETUP_UNSUPPORTED_WARNING);
-      }
-      argsReads.push({
-        start: readStart - start,
-        end: readEnd - start,
-        name: read.name,
-      });
-    }
     statements.push({
       source: options.source.slice(start, end),
-      column: loc.start.column,
-      argsReads,
+      column: start - lineStartOf(options.source, start),
+      argsReads: reads.reads.map((read) => ({
+        start: read.start - start,
+        end: read.end - start,
+        name: read.name,
+      })),
     });
   }
 
@@ -242,34 +227,24 @@ export function readForwardableSetup(
   };
 }
 
-function lineStartOffsets(source: string): number[] {
-  const starts = [0];
-  for (let index = 0; index < source.length; index += 1) {
-    const code = source.charCodeAt(index);
-    if (code === 13) {
-      if (source.charCodeAt(index + 1) === 10) {
-        index += 1;
-      }
-      starts.push(index + 1);
-    } else if (code === 10 || code === 0x2028 || code === 0x2029) {
-      starts.push(index + 1);
-    }
+function lineStartOf(source: string, offset: number): number {
+  let index = offset;
+  while (index > 0 && !/[\n\r\u2028\u2029]/.test(source[index - 1])) {
+    index -= 1;
   }
-  return starts;
-}
-
-function offsetAt(lineStarts: number[], pos: { line: number; column: number }): number | undefined {
-  const lineStart = lineStarts[pos.line - 1];
-  return lineStart == null ? undefined : lineStart + pos.column;
+  return index;
 }
 
 // setup() { ...statements; return {...}; } or setup: () => ({ ... })
-function readSetupBody(body: t.BlockStatement | t.Expression): SetupBody | undefined {
-  if (!t.isBlockStatement(body)) {
+function readSetupBody(body: E.FunctionBody | E.Expression | null): SetupBody | undefined {
+  if (!body) {
+    return undefined;
+  }
+  if (body.type !== 'BlockStatement') {
     return { statements: [], returned: body };
   }
 
-  const returnIndex = body.body.findIndex((statement) => t.isReturnStatement(statement));
+  const returnIndex = body.body.findIndex((statement) => statement.type === 'ReturnStatement');
   if (returnIndex === -1) {
     return { statements: body.body };
   }
@@ -278,7 +253,7 @@ function readSetupBody(body: t.BlockStatement | t.Expression): SetupBody | undef
     return undefined;
   }
 
-  const returnStatement = body.body[returnIndex] as t.ReturnStatement;
+  const returnStatement = body.body[returnIndex] as E.ReturnStatement;
   return {
     statements: body.body.slice(0, returnIndex),
     returned: returnStatement.argument ?? undefined,
@@ -290,85 +265,67 @@ function readSetupBody(body: t.BlockStatement | t.Expression): SetupBody | undef
  *
  * @example `const a = args.label;` → one read; `const a = args;` → blocked on `args`
  */
-function collectArgsReads(statement: t.Statement, argsParam: string | undefined): ArgsReadsResult {
+function collectArgsReads(statement: E.Statement, argsParam: string | undefined): ArgsReadsResult {
   if (!argsParam) {
     return { ok: true, reads: [] };
   }
 
-  const reads: ArgsReadLocation[] = [];
+  const reads: ArgsRead[] = [];
   let blocked: string | undefined;
 
-  const visit = (node: t.Node, parent?: t.Node): void => {
+  walk(statement, (node, parent) => {
     if (blocked) {
-      return;
+      return false;
     }
 
     // A mutation whose target roots at the args parameter has no substitutable value form.
-    const mutationTarget = t.isAssignmentExpression(node)
-      ? node.left
-      : t.isUpdateExpression(node) || (t.isUnaryExpression(node) && node.operator === 'delete')
-        ? node.argument
-        : undefined;
+    const mutationTarget =
+      node.type === 'AssignmentExpression'
+        ? node.left
+        : node.type === 'UpdateExpression' ||
+            (node.type === 'UnaryExpression' && node.operator === 'delete')
+          ? node.argument
+          : undefined;
     if (mutationTarget && rootIdentifierName(mutationTarget) === argsParam) {
       blocked = argsParam;
-      return;
+      return false;
     }
 
-    if (t.isIdentifier(node, { name: argsParam })) {
-      const member =
-        parent &&
-        (t.isMemberExpression(parent) || t.isOptionalMemberExpression(parent)) &&
-        parent.object === node &&
-        !parent.computed
-          ? parent
-          : undefined;
-      if (!member || !t.isIdentifier(member.property) || member.loc == null) {
-        blocked = argsParam;
-        return;
-      }
-      reads.push({ start: member.loc.start, end: member.loc.end, name: member.property.name });
+    if (node.type !== 'Identifier' || node.name !== argsParam || isNamePosition(node, parent)) {
       return;
     }
-
-    for (const key of t.VISITOR_KEYS[node.type] ?? []) {
-      if (skipsReferencePosition(node, key)) {
-        continue;
-      }
-      const child = node[key as keyof typeof node];
-      if (Array.isArray(child)) {
-        child.forEach((entry) => {
-          if (t.isNode(entry)) {
-            visit(entry, node);
-          }
-        });
-      } else if (t.isNode(child)) {
-        visit(child, node);
-      }
+    const member =
+      parent?.type === 'MemberExpression' && parent.object === node && !parent.computed
+        ? parent
+        : undefined;
+    if (!member || member.property.type !== 'Identifier') {
+      blocked = argsParam;
+      return false;
     }
-  };
-  visit(statement);
+    const { start, end } = member as E.MemberExpression & Spanned;
+    reads.push({ start, end, name: member.property.name });
+  });
 
   return blocked ? { ok: false, reference: blocked } : { ok: true, reads };
 }
 
 // args.theme.color -> 'args'
-function rootIdentifierName(node: t.Node): string | undefined {
-  let current: t.Node = node;
-  while (t.isMemberExpression(current) || t.isOptionalMemberExpression(current)) {
-    current = current.object;
+function rootIdentifierName(node: Node): string | undefined {
+  let current: Node = node;
+  while (current.type === 'MemberExpression' || current.type === 'ChainExpression') {
+    current = current.type === 'MemberExpression' ? current.object : current.expression;
   }
-  return t.isIdentifier(current) ? current.name : undefined;
+  return current.type === 'Identifier' ? current.name : undefined;
 }
 
 // args.label -> 'label' and { label: 1 } -> 'label' are name positions, not references
-function skipsReferencePosition(node: t.Node, key: string): boolean {
-  if ((t.isMemberExpression(node) || t.isOptionalMemberExpression(node)) && key === 'property') {
-    return !node.computed;
-  }
-  if (t.isObjectProperty(node) && key === 'key') {
-    return !node.computed;
+function isNamePosition(node: Node, parent: Node | null): boolean {
+  if (parent?.type === 'MemberExpression') {
+    return parent.property === node && !parent.computed;
   }
-  return false;
+  return (
+    parent?.type === 'Property' && parent.key === node && !parent.computed && !parent.shorthand
+  );
 }
 
 /**
@@ -376,44 +333,35 @@ function skipsReferencePosition(node: t.Node, key: string): boolean {
  * forwarding grammar does not model. Unknown shapes bail rather than pass through unchecked.
  */
 function collectFreeIdentifiers(
-  node: t.Statement,
+  node: E.Statement,
   scope: ReadonlySet<string>,
   free: Set<string>
 ): boolean {
-  if (t.isVariableDeclaration(node)) {
+  if (node.type === 'VariableDeclaration') {
     // Declared names are already in scope; pattern defaults were validated during collection.
     return node.declarations.every(
       (declaration) => !declaration.init || collectFreeExpression(declaration.init, scope, free)
     );
   }
-  if (t.isExpressionStatement(node)) {
+  if (node.type === 'ExpressionStatement') {
     return collectFreeExpression(node.expression, scope, free);
   }
-  if (t.isReturnStatement(node)) {
+  if (node.type === 'ReturnStatement') {
     return !node.argument || collectFreeExpression(node.argument, scope, free);
   }
   return false;
 }
 
-function collectFreeExpression(
-  node: t.Node,
-  scope: ReadonlySet<string>,
-  free: Set<string>
-): boolean {
-  if (t.isSpreadElement(node)) {
+function collectFreeExpression(node: Node, scope: ReadonlySet<string>, free: Set<string>): boolean {
+  if (node.type === 'SpreadElement') {
     return collectFreeExpression(node.argument, scope, free);
   }
 
-  const value = unwrapExpression(node as t.Expression);
-  const collect = (child: t.Node): boolean => collectFreeExpression(child, scope, free);
+  const value = unwrapExpression(node);
+  const collect = (child: Node): boolean => collectFreeExpression(child, scope, free);
 
   switch (value.type) {
-    case 'StringLiteral':
-    case 'NumericLiteral':
-    case 'BooleanLiteral':
-    case 'NullLiteral':
-    case 'BigIntLiteral':
-    case 'RegExpLiteral':
+    case 'Literal':
       return true;
 
     case 'Identifier':
@@ -423,30 +371,29 @@ function collectFreeExpression(
       return true;
 
     case 'TemplateLiteral':
-      return value.expressions.every(
-        (expression) => t.isExpression(expression) && collect(expression)
-      );
+      return value.expressions.every(collect);
 
     case 'ArrayExpression':
       return value.elements.every((element) => element === null || collect(element));
 
     case 'ObjectExpression':
       return value.properties.every((property) => {
-        if (t.isSpreadElement(property)) {
+        if (property.type === 'SpreadElement') {
           return collect(property.argument);
         }
-        if (t.isObjectProperty(property)) {
+        if (!property.method && property.kind === 'init') {
           return (!property.computed || collect(property.key)) && collect(property.value);
         }
-        return collectFreeFunction(property, scope, free);
+        return collectFreeFunction(property.value as E.Function, scope, free);
       });
 
+    case 'ChainExpression':
+      return collect(value.expression);
+
     case 'MemberExpression':
-    case 'OptionalMemberExpression':
       return collect(value.object) && (!value.computed || collect(value.property));
 
     case 'CallExpression':
-    case 'OptionalCallExpression':
     case 'NewExpression':
       return collect(value.callee) && value.arguments.every(collect);
 
@@ -459,7 +406,7 @@ function collectFreeExpression(
       return collect(value.argument);
 
     case 'BinaryExpression':
-      return t.isExpression(value.left) && collect(value.left) && collect(value.right);
+      return collect(value.left) && collect(value.right);
 
     case 'LogicalExpression':
       return collect(value.left) && collect(value.right);
@@ -468,7 +415,7 @@ function collectFreeExpression(
       return collect(value.test) && collect(value.consequent) && collect(value.alternate);
 
     case 'AssignmentExpression':
-      return t.isExpression(value.left) && collect(value.left) && collect(value.right);
+      return collect(value.left) && collect(value.right);
 
     case 'SequenceExpression':
       return value.expressions.every(collect);
@@ -479,7 +426,7 @@ function collectFreeExpression(
 }
 
 function collectFreeFunction(
-  fn: t.ArrowFunctionExpression | t.FunctionExpression | t.ObjectMethod,
+  fn: E.ArrowFunctionExpression | E.Function,
   scope: ReadonlySet<string>,
   free: Set<string>
 ): boolean {
@@ -487,18 +434,21 @@ function collectFreeFunction(
   if (!fn.params.every((param) => collectPatternNames(param, childScope))) {
     return false;
   }
-  if (t.isFunctionExpression(fn) && fn.id) {
+  if (fn.type === 'FunctionExpression' && fn.id) {
     childScope.add(fn.id.name);
   }
 
   const body = fn.body;
-  if (!t.isBlockStatement(body)) {
+  if (!body) {
+    return false;
+  }
+  if (body.type !== 'BlockStatement') {
     return collectFreeExpression(body, childScope, free);
   }
 
   // Inner declarations scope over the whole body, approximating function-scope hoisting.
   for (const statement of body.body) {
-    if (t.isVariableDeclaration(statement)) {
+    if (statement.type === 'VariableDeclaration') {
       const named = statement.declarations.every((declaration) =>
         collectPatternNames(declaration.id, childScope)
       );
diff --git a/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.test.ts b/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.test.ts
index 5610bc575a3b..2d83492a28b4 100644
--- a/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.test.ts
+++ b/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.test.ts
@@ -4,7 +4,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { vol } from 'memfs';
 
-import { babelParse, types as t } from 'storybook/internal/babel';
+import { type ESTreeNode as Node, expressionFromSource } from 'storybook/internal/csf-tools';
 import type { IndexEntry } from 'storybook/internal/types';
 import type { DocgenPayload } from 'storybook/open-service';
 
@@ -1703,7 +1703,7 @@ import C from './C.vue';
   });
 
   it('hoists a value that needs script scope, indented like the snippet around it', () => {
-    expect(render([prop('options', `{\n    tone: "neutral"\n}`, 'hoist')]))
+    expect(render([prop('options', `{\n      tone: "neutral"\n    }`, 'hoist')]))
       .toBe(`<script lang="ts" setup>
 import C from './C.vue';
 
@@ -1815,7 +1815,7 @@ import C from '@example/C.vue';
   it('hoists inline slot text whose whitespace raw template text would condense', () => {
     const snippet = render([slot('default', `'  padded  '`)]);
 
-    expect(snippet).toContain('const _default = "  padded  ";');
+    expect(snippet).toContain("const _default = '  padded  ';");
     expect(snippet).toContain('{{ _default }}');
   });
 
@@ -1879,11 +1879,6 @@ function event(name: string, eventName: string, code: string): ClassifiedArg {
   };
 }
 
-function expression(code: string): t.Node {
-  const file = babelParse(`const value = ${code}`);
-  const statement = file.program.body[0];
-  if (!t.isVariableDeclaration(statement) || !statement.declarations[0]?.init) {
-    throw new Error(`Not an expression: ${code}`);
-  }
-  return t.removePropertiesDeep(t.cloneNode(statement.declarations[0].init, true, true));
+function expression(code: string): Node {
+  return expressionFromSource(code);
 }
diff --git a/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.ts b/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.ts
index 6e1d25a2dfc3..63eb60179cf8 100644
--- a/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.ts
+++ b/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.ts
@@ -7,12 +7,16 @@ import {
   type TemplateChildNode,
 } from '@vue/compiler-dom';
 
-import { babelParseExpression, types as t } from 'storybook/internal/babel';
 import {
+  type ESTree as E,
+  type ESTreeNode as Node,
+  type ImportBinding,
+  isStringLiteral,
   keyOf,
+  parseModule,
   propertyValue,
   unwrapExpression,
-  type ImportBinding,
+  walk,
 } from 'storybook/internal/csf-tools';
 
 import type { ClassifiedArg } from '../classify-args/classify-args.ts';
@@ -139,7 +143,7 @@ const COMPONENTS_UNREADABLE_WARNING =
 
 /** Read a transformable template-render object without resolving the render function itself. */
 export function readTemplateRenderConfig(
-  renderObject: t.ObjectExpression,
+  renderObject: E.ObjectExpression,
   importBindings: Map<string, ImportBinding>,
   options: ReadTemplateRenderConfigOptions = {}
 ): TemplateRenderResolution {
@@ -636,10 +640,8 @@ function substituteArgsExpression(
     return undefined;
   }
 
-  let ast: t.Expression;
-  try {
-    ast = babelParseExpression(exp.content);
-  } catch {
+  const ast = parseTemplateExpression(exp.content);
+  if (!ast) {
     return undefined;
   }
 
@@ -718,26 +720,70 @@ function bindingPatternForDirective(directive: DirectiveNode): string | undefine
 }
 
 function addBindingPattern(pattern: string, ctx: RenderContext): boolean {
-  let ast: t.Expression;
-  try {
-    ast = babelParseExpression(`${arrowParamsForPattern(pattern)} => 0`);
-  } catch {
-    return false;
-  }
-
-  if (!t.isArrowFunctionExpression(ast)) {
+  const ast = parseTemplateExpression(`${arrowParamsForPattern(pattern)} => 0`);
+  if (ast?.type !== 'ArrowFunctionExpression') {
     return false;
   }
 
   for (const param of ast.params) {
-    for (const name of Object.keys(t.getBindingIdentifiers(param))) {
-      ctx.bindings.add(name);
-    }
+    addBindingNames(param, ctx.bindings);
   }
 
   return true;
 }
 
+// ({ a, b: [c] }, ...rest) -> a, c, rest
+function addBindingNames(pattern: Node, into: Set<string>): void {
+  switch (pattern.type) {
+    case 'Identifier':
+      into.add(pattern.name);
+      break;
+    case 'AssignmentPattern':
+      addBindingNames(pattern.left, into);
+      break;
+    case 'RestElement':
+      addBindingNames(pattern.argument, into);
+      break;
+    case 'ObjectPattern':
+      for (const property of pattern.properties) {
+        addBindingNames(property.type === 'RestElement' ? property.argument : property.value, into);
+      }
+      break;
+    case 'ArrayPattern':
+      for (const element of pattern.elements) {
+        if (element) {
+          addBindingNames(element, into);
+        }
+      }
+      break;
+  }
+}
+
+// Offsets index into `code`; `undefined` unless `code` is exactly one expression.
+function parseTemplateExpression(code: string): E.Expression | undefined {
+  let program: E.Program;
+  try {
+    ({ program } = parseModule(`(${code}\n)`));
+  } catch {
+    return undefined;
+  }
+  const [statement, ...rest] = program.body;
+  // Starting anywhere but right after the opening paren means `code` closed it, as in `a) + (b`.
+  if (
+    rest.length > 0 ||
+    statement?.type !== 'ExpressionStatement' ||
+    (statement.expression as E.Expression & { start: number }).start !== 1
+  ) {
+    return undefined;
+  }
+  walk(statement.expression, (node) => {
+    const span = node as Node & { start: number; end: number };
+    span.start -= 1;
+    span.end -= 1;
+  });
+  return statement.expression;
+}
+
 function arrowParamsForPattern(pattern: string): string {
   const trimmed = pattern.trim();
   return trimmed.startsWith('(') && trimmed.endsWith(')') ? trimmed : `(${trimmed})`;
@@ -751,22 +797,22 @@ function surroundingAttributeQuote(
   return quote === '"' || quote === "'" ? quote : undefined;
 }
 
-function collectArgsReferences(expression: t.Expression): ArgsReference[] | undefined {
+function collectArgsReferences(expression: E.Expression): ArgsReference[] | undefined {
   const references: ArgsReference[] = [];
   let invalid = false;
 
-  const visit = (node: t.Node | null | undefined, parent?: t.Node): void => {
-    if (!node || invalid) {
-      return;
+  walk(expression, (node, parent) => {
+    if (invalid) {
+      return false;
     }
 
     if (
-      t.isAssignmentExpression(node) ||
-      t.isUpdateExpression(node) ||
-      (t.isUnaryExpression(node) && node.operator === 'delete')
+      node.type === 'AssignmentExpression' ||
+      node.type === 'UpdateExpression' ||
+      (node.type === 'UnaryExpression' && node.operator === 'delete')
     ) {
       invalid = true;
-      return;
+      return false;
     }
 
     const reference = argsReference(node);
@@ -774,48 +820,36 @@ function collectArgsReferences(expression: t.Expression): ArgsReference[] | unde
       references.push(reference);
     }
 
-    if (t.isIdentifier(node, { name: ARGS_NAME }) && !isAllowedArgsObject(node, parent)) {
+    if (
+      node.type === 'Identifier' &&
+      node.name === ARGS_NAME &&
+      !isAllowedArgsObject(node, parent)
+    ) {
       invalid = true;
-      return;
-    }
-
-    for (const key of t.VISITOR_KEYS[node.type] ?? []) {
-      const value = node[key as keyof typeof node];
-      if (Array.isArray(value)) {
-        value.forEach((child) => {
-          if (t.isNode(child)) {
-            visit(child, node);
-          }
-        });
-      } else if (t.isNode(value)) {
-        visit(value, node);
-      }
+      return false;
     }
-  };
-
-  visit(expression);
+  });
 
   return invalid ? undefined : references;
 }
 
-function argsReference(node: t.Node): ArgsReference | undefined {
-  const member =
-    t.isMemberExpression(node) || t.isOptionalMemberExpression(node) ? node : undefined;
-  if (!member || member.computed || !t.isIdentifier(member.object, { name: ARGS_NAME })) {
-    return undefined;
-  }
-  if (!t.isIdentifier(member.property) || member.start == null || member.end == null) {
+function argsReference(node: Node): ArgsReference | undefined {
+  if (
+    node.type !== 'MemberExpression' ||
+    node.computed ||
+    node.object.type !== 'Identifier' ||
+    node.object.name !== ARGS_NAME ||
+    node.property.type !== 'Identifier'
+  ) {
     return undefined;
   }
 
-  return { start: member.start, end: member.end, name: member.property.name };
+  const { start, end } = node as E.MemberExpression & { start: number; end: number };
+  return { start, end, name: node.property.name };
 }
 
-function isAllowedArgsObject(node: t.Identifier, parent: t.Node | undefined): boolean {
-  if (!parent || (!t.isMemberExpression(parent) && !t.isOptionalMemberExpression(parent))) {
-    return false;
-  }
-  return parent.object === node && !parent.computed;
+function isAllowedArgsObject(node: Node, parent: Node | null): boolean {
+  return parent?.type === 'MemberExpression' && parent.object === node && !parent.computed;
 }
 
 function replacementForArgsReference(
@@ -1037,21 +1071,21 @@ function valueReferencesArgs(value: string): boolean {
 }
 
 // '<MyButton />' or `<MyButton />` without substitutions
-function staticTemplateSource(node: t.Node | undefined): string | undefined {
-  if (t.isStringLiteral(node)) {
+function staticTemplateSource(node: Node | undefined): string | undefined {
+  if (isStringLiteral(node)) {
     return node.value;
   }
-  if (t.isTemplateLiteral(node) && node.expressions.length === 0) {
-    return node.quasis[0]?.value.cooked;
+  if (node?.type === 'TemplateLiteral' && node.expressions.length === 0) {
+    return node.quasis[0]?.value.cooked ?? undefined;
   }
   return undefined;
 }
 
 // { components: { Button }, setup: () => ({ args }), template: '<Button />' }
-function hasOnlySupportedRenderProperties(renderObject: t.ObjectExpression): boolean {
+function hasOnlySupportedRenderProperties(renderObject: E.ObjectExpression): boolean {
   return renderObject.properties.every((property) => {
     // { ...baseRender, template: '<Button />' }
-    if (t.isSpreadElement(property)) {
+    if (property.type === 'SpreadElement') {
       return false;
     }
 
@@ -1065,7 +1099,7 @@ function hasOnlySupportedRenderProperties(renderObject: t.ObjectExpression): boo
 
 // { Button, 'my-button': Button }
 function readComponentImports(
-  value: t.Node | undefined,
+  value: Node | undefined,
   importBindings: Map<string, ImportBinding>,
   options: ReadTemplateRenderConfigOptions
 ): Map<string, string> | undefined {
@@ -1076,18 +1110,18 @@ function readComponentImports(
   if (!value) {
     return componentImports;
   }
-  if (!t.isObjectExpression(value)) {
+  if (value.type !== 'ObjectExpression') {
     return undefined;
   }
 
   for (const property of value.properties) {
-    if (!t.isObjectProperty(property)) {
+    if (property.type !== 'Property' || property.method || property.kind !== 'init') {
       return undefined;
     }
 
     const tagName = keyOf(property);
     const component = unwrapExpression(property.value);
-    if (!tagName || !t.isIdentifier(component)) {
+    if (!tagName || component.type !== 'Identifier') {
       return undefined;
     }
 
@@ -1106,13 +1140,9 @@ function readComponentImports(
 }
 
 // setup() { return { args }; }
-function setupProperty(
-  renderObject: t.ObjectExpression
-): t.ObjectMethod | t.ObjectProperty | undefined {
-  return renderObject.properties.find((property): property is t.ObjectMethod | t.ObjectProperty => {
-    if (!t.isObjectMethod(property) && !t.isObjectProperty(property)) {
-      return false;
-    }
-    return keyOf(property) === SETUP_PROPERTY;
-  });
+function setupProperty(renderObject: E.ObjectExpression): E.ObjectProperty | undefined {
+  return renderObject.properties.find(
+    (property): property is E.ObjectProperty =>
+      property.type === 'Property' && keyOf(property) === SETUP_PROPERTY
+  );
 }

From e2843a758d655950fe83e8f7049a2aa6b156ef0c Mon Sep 17 00:00:00 2001
From: Easton <easton.shin@marqvision.com>
Date: Tue, 13 Oct 2026 11:52:17 +0900
Subject: [PATCH 050/326] refactor(web-components): port docgen and story
 snippets to the csf-tools ESTree API

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../docgen/component-docgen/build-docgen.ts   |   9 +-
 .../resolve-component/resolve-component.ts    |  23 +--
 .../src/docgen/story-docs/arg-values.test.ts  |   8 +-
 .../src/docgen/story-docs/arg-values.ts       |  72 ++++++----
 .../story-docs/build-story-docs.test.ts       |   4 +-
 .../src/docgen/story-docs/build-story-docs.ts |  33 +++--
 .../src/docgen/story-docs/template-holes.ts   | 130 ++++++-----------
 .../story-docs/template-print.lit.test.ts     |  15 +-
 .../docgen/story-docs/template-print.test.ts  |  31 +---
 .../src/docgen/story-docs/template-print.ts   |  12 +-
 .../src/docgen/story-docs/template-scope.ts   | 135 +++++++++---------
 11 files changed, 219 insertions(+), 253 deletions(-)

diff --git a/code/renderers/web-components/src/docgen/component-docgen/build-docgen.ts b/code/renderers/web-components/src/docgen/component-docgen/build-docgen.ts
index 07cb8f45b433..78d8ff48c2f6 100644
--- a/code/renderers/web-components/src/docgen/component-docgen/build-docgen.ts
+++ b/code/renderers/web-components/src/docgen/component-docgen/build-docgen.ts
@@ -1,6 +1,9 @@
 import { getComponentIdFromEntry, getStoryImportPathFromEntry } from 'storybook/internal/common';
-import type { JsDocTagMap } from 'storybook/internal/csf-tools';
-import { extractComponentDescription, extractDescription } from 'storybook/internal/csf-tools';
+import {
+  type JsDocTagMap,
+  extractComponentDescription,
+  extractDescription,
+} from 'storybook/internal/csf-tools';
 import type { DocgenPayload, DocgenProviderInput } from 'storybook/internal/types';
 
 import { resolve } from 'node:path';
@@ -81,7 +84,7 @@ export function buildDocgenPayload(
   }
 
   const { description, summary, jsDocTags } = extractComponentDescription(
-    extractDescription(csf._metaStatement) || undefined,
+    extractDescription(csf._metaStatement, csf._editor) || undefined,
     found.declaration.description,
     declarationTags(found.declaration)
   );
diff --git a/code/renderers/web-components/src/docgen/component-docgen/resolve-component/resolve-component.ts b/code/renderers/web-components/src/docgen/component-docgen/resolve-component/resolve-component.ts
index 48f596c3d1d4..36ded589e434 100644
--- a/code/renderers/web-components/src/docgen/component-docgen/resolve-component/resolve-component.ts
+++ b/code/renderers/web-components/src/docgen/component-docgen/resolve-component/resolve-component.ts
@@ -1,6 +1,10 @@
-import type { CsfFile } from 'storybook/internal/csf-tools';
-import { loadCsf, unwrapExpression } from 'storybook/internal/csf-tools';
-import { recast, types as t } from 'storybook/internal/babel';
+import {
+  type CsfFile,
+  type ESTreeNode,
+  isStringLiteral,
+  loadCsf,
+  unwrapExpression,
+} from 'storybook/internal/csf-tools';
 
 import { readFileSync } from 'node:fs';
 
@@ -18,21 +22,18 @@ export function parseStoryFile(storyFilePath: string, title: string): CsfFile |
   }
 }
 
-const expressionFor = (node: t.Node): string => recast.print(node).code;
-
-function tagFromNode(node: t.Node): WebComponentsComponentResolution {
-  const expression = expressionFor(node);
+function tagFromNode(csf: CsfFile, node: ESTreeNode): WebComponentsComponentResolution {
   const unwrapped = unwrapExpression(node);
-  if (t.isStringLiteral(unwrapped) && unwrapped.value !== '') {
+  if (isStringLiteral(unwrapped) && unwrapped.value !== '') {
     return { tag: unwrapped.value };
   }
-  if (t.isTemplateLiteral(unwrapped) && unwrapped.expressions.length === 0) {
+  if (unwrapped.type === 'TemplateLiteral' && unwrapped.expressions.length === 0) {
     const tag = unwrapped.quasis[0]?.value.cooked;
     if (tag) {
       return { tag };
     }
   }
-  return { reason: 'component-not-a-tag', expression };
+  return { reason: 'component-not-a-tag', expression: csf._editor.source(node) };
 }
 
 export function resolveStoryComponent(csf: CsfFile): WebComponentsComponentResolution {
@@ -41,5 +42,5 @@ export function resolveStoryComponent(csf: CsfFile): WebComponentsComponentResol
     return { reason: 'no-meta-component' };
   }
 
-  return tagFromNode(component);
+  return tagFromNode(csf, component);
 }
diff --git a/code/renderers/web-components/src/docgen/story-docs/arg-values.test.ts b/code/renderers/web-components/src/docgen/story-docs/arg-values.test.ts
index fd63aa26ac68..8c921ae80674 100644
--- a/code/renderers/web-components/src/docgen/story-docs/arg-values.test.ts
+++ b/code/renderers/web-components/src/docgen/story-docs/arg-values.test.ts
@@ -1,7 +1,7 @@
-import { babelParseExpression } from 'storybook/internal/babel';
-
 import { describe, expect, it } from 'vitest';
 
+import { expressionFromSource } from 'storybook/internal/csf-tools';
+
 import { evaluateArgValue, type ArgValue } from './arg-values.ts';
 
 describe('evaluateArgValue', () => {
@@ -24,9 +24,9 @@ describe('evaluateArgValue', () => {
     { source: `() => 1`, expected: { kind: 'function' } },
     { source: `function () {}`, expected: { kind: 'function' } },
     { source: `name`, expected: { kind: 'unresolved', source: 'name' } },
-    { source: `({ ...name })`, expected: { kind: 'unresolved', source: '{ ...name }' } },
+    { source: `{ ...name }`, expected: { kind: 'unresolved', source: '{ ...name }' } },
     { source: '`hello ${name}`', expected: { kind: 'unresolved', source: '`hello ${name}`' } },
   ])('$source', ({ source, expected }) => {
-    expect(evaluateArgValue(babelParseExpression(source))).toEqual(expected);
+    expect(evaluateArgValue(expressionFromSource(source))).toEqual(expected);
   });
 });
diff --git a/code/renderers/web-components/src/docgen/story-docs/arg-values.ts b/code/renderers/web-components/src/docgen/story-docs/arg-values.ts
index 2ca5cfa2caa2..51696d661e67 100644
--- a/code/renderers/web-components/src/docgen/story-docs/arg-values.ts
+++ b/code/renderers/web-components/src/docgen/story-docs/arg-values.ts
@@ -1,18 +1,40 @@
-import { types as t } from 'storybook/internal/babel';
-import { keyOf, sourceOf, templateParts, unwrapExpression } from 'storybook/internal/csf-tools';
+import {
+  type ESTree as E,
+  type ESTreeNode as Node,
+  keyOf,
+  sourceOf,
+  templateParts,
+  unwrapExpression,
+} from 'storybook/internal/csf-tools';
 
 export type ArgValue =
   | { kind: 'value'; value: unknown }
   | { kind: 'function' }
   | { kind: 'unset' }
   | { kind: 'unresolved'; source: string };
-const FAILED = Symbol('failed');
+export const FAILED = Symbol('failed');
 
-export function evaluateArgValue(node: t.Node): ArgValue {
+export const isFunctionNode = (node: Node): boolean =>
+  node.type === 'ArrowFunctionExpression' ||
+  node.type === 'FunctionExpression' ||
+  node.type === 'FunctionDeclaration';
+
+// Value of a string, number, boolean or `null` literal, or `FAILED` for any other node.
+export const primitiveLiteralValue = (node: Node): unknown => {
+  if (node.type !== 'Literal') {
+    return FAILED;
+  }
+  if (['string', 'number', 'boolean'].includes(typeof node.value)) {
+    return node.value;
+  }
+  return node.value === null && !('regex' in node) && !('bigint' in node) ? null : FAILED;
+};
+
+export function evaluateArgValue(node: Node): ArgValue {
   const value = evaluate(node);
   if (value === FAILED) {
     const unwrapped = unwrapExpression(node);
-    return t.isFunction(unwrapped)
+    return isFunctionNode(unwrapped)
       ? { kind: 'function' }
       : { kind: 'unresolved', source: sourceOf(node) };
   }
@@ -21,22 +43,17 @@ export function evaluateArgValue(node: t.Node): ArgValue {
   }
   return { kind: 'value', value };
 }
-const evaluate = (node: t.Node): unknown | typeof FAILED => {
+const evaluate = (node: Node): unknown | typeof FAILED => {
   const unwrapped = unwrapExpression(node);
+  const literal = primitiveLiteralValue(unwrapped);
+  if (literal !== FAILED) return literal;
+  if (unwrapped.type === 'Identifier' && unwrapped.name === 'undefined') return undefined;
+  if (unwrapped.type === 'UnaryExpression' && unwrapped.operator === 'void') return undefined;
   if (
-    t.isStringLiteral(unwrapped) ||
-    t.isNumericLiteral(unwrapped) ||
-    t.isBooleanLiteral(unwrapped)
-  ) {
-    return unwrapped.value;
-  }
-  if (t.isNullLiteral(unwrapped)) return null;
-  if (t.isIdentifier(unwrapped, { name: 'undefined' })) return undefined;
-  if (t.isUnaryExpression(unwrapped) && unwrapped.operator === 'void') return undefined;
-  if (
-    t.isUnaryExpression(unwrapped) &&
+    unwrapped.type === 'UnaryExpression' &&
     (unwrapped.operator === '-' || unwrapped.operator === '+') &&
-    t.isNumericLiteral(unwrapped.argument)
+    unwrapped.argument.type === 'Literal' &&
+    typeof unwrapped.argument.value === 'number'
   ) {
     return unwrapped.operator === '-' ? -unwrapped.argument.value : unwrapped.argument.value;
   }
@@ -44,15 +61,15 @@ const evaluate = (node: t.Node): unknown | typeof FAILED => {
   if (parts && parts.expressions.length === 0) {
     return parts.quasis[0] ?? FAILED;
   }
-  if (t.isFunction(unwrapped)) return FAILED;
-  if (t.isArrayExpression(unwrapped)) return evaluateArray(unwrapped);
-  if (t.isObjectExpression(unwrapped)) return evaluateObject(unwrapped);
+  if (isFunctionNode(unwrapped)) return FAILED;
+  if (unwrapped.type === 'ArrayExpression') return evaluateArray(unwrapped);
+  if (unwrapped.type === 'ObjectExpression') return evaluateObject(unwrapped);
   return FAILED;
 };
-const evaluateArray = (node: t.ArrayExpression): unknown[] | typeof FAILED => {
+const evaluateArray = (node: E.ArrayExpression): unknown[] | typeof FAILED => {
   const values: unknown[] = [];
   for (const element of node.elements) {
-    if (element === null || t.isSpreadElement(element)) {
+    if (element === null || element.type === 'SpreadElement') {
       return FAILED;
     }
     const value = evaluate(element);
@@ -63,10 +80,15 @@ const evaluateArray = (node: t.ArrayExpression): unknown[] | typeof FAILED => {
   }
   return values;
 };
-const evaluateObject = (node: t.ObjectExpression): Record<string, unknown> | typeof FAILED => {
+const evaluateObject = (node: E.ObjectExpression): Record<string, unknown> | typeof FAILED => {
   const values: Record<string, unknown> = {};
   for (const property of node.properties) {
-    if (!t.isObjectProperty(property) || property.computed || t.isSpreadElement(property)) {
+    if (
+      property.type !== 'Property' ||
+      property.method ||
+      property.kind !== 'init' ||
+      property.computed
+    ) {
       return FAILED;
     }
     const key = keyOf(property);
diff --git a/code/renderers/web-components/src/docgen/story-docs/build-story-docs.test.ts b/code/renderers/web-components/src/docgen/story-docs/build-story-docs.test.ts
index 7edaa29c84a5..991333980f76 100644
--- a/code/renderers/web-components/src/docgen/story-docs/build-story-docs.test.ts
+++ b/code/renderers/web-components/src/docgen/story-docs/build-story-docs.test.ts
@@ -327,7 +327,7 @@ describe('buildStoryDocsPayload', () => {
 <script>
   {
     const host = document.currentScript.previousElementSibling;
-    host.addEventListener('shape-change', event => event.preventDefault());
+    host.addEventListener('shape-change', (event) => event.preventDefault());
   }
 </script>`,
       },
@@ -367,7 +367,7 @@ describe('buildStoryDocsPayload', () => {
 <script>
   {
     const host = document.currentScript.previousElementSibling;
-    host.addEventListener('shape-change', event => first(event));
+    host.addEventListener('shape-change', (event) => first(event));
   }
 </script>`,
       },
diff --git a/code/renderers/web-components/src/docgen/story-docs/build-story-docs.ts b/code/renderers/web-components/src/docgen/story-docs/build-story-docs.ts
index e0c93cfe37bd..1a28992b3f76 100644
--- a/code/renderers/web-components/src/docgen/story-docs/build-story-docs.ts
+++ b/code/renderers/web-components/src/docgen/story-docs/build-story-docs.ts
@@ -1,13 +1,18 @@
-import { types as t } from 'storybook/internal/babel';
 import { getComponentIdFromEntry, getStoryImportPathFromEntry } from 'storybook/internal/common';
 import { storyNameFromExport } from 'storybook/internal/csf';
-import type { CsfFile, StoryArgsResolver, StoryReferences } from 'storybook/internal/csf-tools';
+import type {
+  CsfFile,
+  ESTreeNode as Node,
+  StoryArgsResolver,
+  StoryReferences,
+} from 'storybook/internal/csf-tools';
 import {
   authoredSource,
   createStoryArgsResolver,
   createStoryReferenceResolver,
   extractStoryJSDocInfo,
   noSnippetWarning,
+  resolveEffectiveRender,
   sourceOf,
   unwrapExpression,
   unresolvedWarning,
@@ -22,13 +27,12 @@ import {
   parseStoryFile,
   resolveStoryComponent,
 } from '../component-docgen/resolve-component/resolve-component.ts';
-import { evaluateArgValue } from './arg-values.ts';
+import { evaluateArgValue, isFunctionNode } from './arg-values.ts';
 import { classifyArg, type ArgBinding } from './classify-args.ts';
 import type { ElementSnippet } from './print-element.ts';
 import { printElementSnippet } from './print-element.ts';
 import { printHtmlTemplate } from './template-print.ts';
 import { resolveHtmlTemplate } from './template-scope.ts';
-import { resolveEffectiveRender } from '../../../../../core/src/csf-tools/story-shape/render.ts';
 
 export interface BuildStoryDocsContext {
   getDocgenPayload: (componentId: string) => Promise<WebComponentsDocgenPayload | undefined>;
@@ -146,7 +150,10 @@ const baseStoryDoc = (
   story: CsfFile['_stories'][string],
   result: SnippetResult
 ): StoryDoc => {
-  const { description, summary } = extractStoryJSDocInfo(csf._storyStatements[exportName]);
+  const { description, summary } = extractStoryJSDocInfo(
+    csf._storyStatements[exportName],
+    csf._editor
+  );
   return {
     id: story.id,
     name: story.name ?? storyNameFromExport(exportName),
@@ -219,7 +226,7 @@ const renderedArgsSnippet = (
   const warnings: (string | undefined)[] = [];
   const render = resolveEffectiveRender(deps.csf, exportName, deps.resolveStoryArgs.ctx);
   if (render.kind === 'resolved') {
-    const template = resolveHtmlTemplate(render.path, deps.csf);
+    const template = resolveHtmlTemplate(render.node, deps.csf);
     if (template) {
       const printed = printHtmlTemplate(template, resolved.args, deps.declaration);
       const unresolved = [...resolved.unresolved, ...printed.unresolved];
@@ -237,7 +244,7 @@ const renderedArgsSnippet = (
         ...joinWarnings(hasSnippet ? warnings : [...warnings, noSnippetWarning(unresolved)]),
       };
     }
-    warnings.push(unresolvedWarning([sourceOf(render.path.node)]));
+    warnings.push(unresolvedWarning([sourceOf(render.node)]));
   } else if (render.kind === 'unresolved') {
     warnings.push(unresolvedWarning(unresolvedRenderSource(render, resolved)));
   }
@@ -258,7 +265,7 @@ const renderedArgsSnippet = (
 };
 
 const unboundTemplateArgs = (
-  args: Record<string, t.Node>,
+  args: Record<string, Node>,
   referenced: readonly string[]
 ): string | undefined => {
   const bound = new Set(referenced);
@@ -275,12 +282,12 @@ const unresolvedRenderSource = (
   const node =
     resolved.storyMembers.properties.render ??
     resolved.metaMembers.properties.render ??
-    render.shadowedRender?.node;
+    render.shadowedRender;
   return node ? [sourceOf(node)] : [];
 };
 
 const argsSnippet = (
-  args: Record<string, t.Node>,
+  args: Record<string, Node>,
   declaration: ManifestDeclaration,
   argTypes: WebComponentsDocgenPayload['argTypes'],
   tag: string,
@@ -427,10 +434,8 @@ const hasSnippetContent = (snippet: ElementSnippet): boolean =>
   snippet.slots.length > 0 ||
   snippet.styleRules.length > 0;
 
-const listenerHandler = (node: t.Node): string => {
-  const unwrapped = t.isExpression(node) ? unwrapExpression(node) : node;
-  return t.isFunction(unwrapped) ? sourceOf(node) : '() => {}';
-};
+const listenerHandler = (node: Node): string =>
+  isFunctionNode(unwrapExpression(node)) ? sourceOf(node) : '() => {}';
 
 const incompleteList = (names: string[], suffix: string): string | undefined =>
   names.length === 0
diff --git a/code/renderers/web-components/src/docgen/story-docs/template-holes.ts b/code/renderers/web-components/src/docgen/story-docs/template-holes.ts
index 793e3538d256..b472e5eb0243 100644
--- a/code/renderers/web-components/src/docgen/story-docs/template-holes.ts
+++ b/code/renderers/web-components/src/docgen/story-docs/template-holes.ts
@@ -1,8 +1,7 @@
-import { types as t } from 'storybook/internal/babel';
-import type { ImportBinding } from 'storybook/internal/csf-tools';
-import { sourceOf, unwrapExpression } from 'storybook/internal/csf-tools';
+import type { ESTree as E, ESTreeNode as Node, ImportBinding } from 'storybook/internal/csf-tools';
+import { sourceOf, unwrapExpression, walk } from 'storybook/internal/csf-tools';
 
-import { evaluateArgValue } from './arg-values.ts';
+import { FAILED, evaluateArgValue, isFunctionNode, primitiveLiteralValue } from './arg-values.ts';
 import type { AliasValue, HtmlTemplate, TemplateScope } from './template-scope.ts';
 import {
   aliasValueForIdentifier,
@@ -21,17 +20,18 @@ export type HoleValue =
 export interface HoleContext {
   bindings: Map<string, ImportBinding>;
   scope: TemplateScope;
-  storyArgs: Record<string, t.Node>;
+  storyArgs: Record<string, Node>;
 }
 
 const TEMPLATE_TAG_SOURCES = ['lit', 'lit-html', 'lit-element'];
 const IF_DEFINED_SOURCES = ['lit/directives/if-defined.js', 'lit-html/directives/if-defined.js'];
 
-export const resolveHoleValue = (expression: t.Expression, context: HoleContext): HoleValue => {
+export const resolveHoleValue = (expression: E.Expression, context: HoleContext): HoleValue => {
   const expressionNode = unwrapExpression(expression);
-  const alias = t.isIdentifier(expressionNode)
-    ? aliasValueForIdentifier(expressionNode, context.scope)
-    : undefined;
+  const alias =
+    expressionNode.type === 'Identifier'
+      ? aliasValueForIdentifier(expressionNode, context.scope)
+      : undefined;
   if (alias) {
     return resolveAlias(alias, context, sourceOf(expression));
   }
@@ -48,7 +48,7 @@ export const resolveHoleValue = (expression: t.Expression, context: HoleContext)
   if (isStaticLiteral(unwrapped)) {
     return { kind: 'value', value: literalValue(unwrapped) };
   }
-  if (t.isFunction(unwrapped)) {
+  if (isFunctionNode(unwrapped)) {
     return { handler: sourceOf(expression), kind: 'function' };
   }
   const nested = templateFromExpression(unwrapped, context.bindings, context.scope);
@@ -56,12 +56,12 @@ export const resolveHoleValue = (expression: t.Expression, context: HoleContext)
     return { kind: 'template', source: sourceOf(expression), template: nested };
   }
   if (isIfDefinedCall(unwrapped, context.bindings)) {
-    const value = resolveHoleValue(unwrapped.arguments[0] as t.Expression, context);
+    const value = resolveHoleValue(unwrapped.arguments[0], context);
     return value.kind === 'value' && value.value !== null && value.value !== undefined
       ? value
       : { kind: 'nothing', ...(value.arg ? { arg: value.arg } : {}) };
   }
-  if (t.isConditionalExpression(unwrapped)) {
+  if (unwrapped.type === 'ConditionalExpression') {
     const test = resolveConditionalTest(unwrapped.test, context);
     if (test.kind === 'unresolved') {
       return test;
@@ -76,37 +76,14 @@ export const resolveHoleValue = (expression: t.Expression, context: HoleContext)
   return { kind: 'unresolved', source: sourceOf(expression) };
 };
 
-export const collectReferencedArgs = (
-  expression: t.Expression,
-  scope: TemplateScope
-): Set<string> => {
+export const collectReferencedArgs = (expression: Node, scope: TemplateScope): Set<string> => {
   const referenced = new Set<string>();
-  const visit = (node: t.Node): void => {
-    if (t.isExpression(node)) {
-      const args = referencedArgsForExpression(node, scope);
-      for (const arg of args) {
-        referenced.add(arg);
-      }
-    }
-
-    for (const key of t.VISITOR_KEYS[node.type] ?? []) {
-      if (skipsReferenceChild(node, key)) {
-        continue;
-      }
-      const child = node[key as keyof typeof node];
-      if (Array.isArray(child)) {
-        child.forEach((entry) => {
-          if (t.isNode(entry)) {
-            visit(entry);
-          }
-        });
-      } else if (t.isNode(child)) {
-        visit(child);
-      }
+  walk(expression, (node, parent) => {
+    if (isStaticName(node, parent)) {
+      return false;
     }
-  };
-
-  visit(expression);
+    referencedArgsForExpression(node, scope).forEach((arg) => referenced.add(arg));
+  });
   return referenced;
 };
 
@@ -139,7 +116,7 @@ export const listenerHandler = (value: HoleValue): string =>
 export const escapeText = (value: string): string =>
   value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 
-const resolveArg = (arg: string, node: t.Node | undefined): HoleValue => {
+const resolveArg = (arg: string, node: Node | undefined): HoleValue => {
   if (!node) {
     return { kind: 'value', arg, value: undefined };
   }
@@ -177,7 +154,7 @@ const resolveAlias = (alias: AliasValue, context: HoleContext, source?: string):
 
 const resolveArgReference = (
   reference: { name: string; path: string[] },
-  node: t.Node | undefined,
+  node: Node | undefined,
   missingPathSource?: string
 ): HoleValue => {
   const value = resolveArg(reference.name, node);
@@ -205,11 +182,9 @@ const resolveArgReference = (
   return { arg: reference.name, kind: 'value', value: current };
 };
 
-const referencedArgsForExpression = (
-  expression: t.Expression,
-  scope: TemplateScope
-): Set<string> => {
-  const alias = t.isIdentifier(expression) ? aliasValueForIdentifier(expression, scope) : undefined;
+const referencedArgsForExpression = (expression: Node, scope: TemplateScope): Set<string> => {
+  const alias =
+    expression.type === 'Identifier' ? aliasValueForIdentifier(expression, scope) : undefined;
   if (alias) {
     return referencedArgsForAlias(alias);
   }
@@ -239,58 +214,41 @@ const referencedArgsForAlias = (alias: AliasValue): Set<string> => {
   }
 };
 
-const skipsReferenceChild = (node: t.Node, key: string): boolean =>
-  (t.isMemberExpression(node) && key === 'property' && !node.computed) ||
-  ((t.isObjectProperty(node) || t.isObjectMethod(node)) && key === 'key' && !node.computed);
+// A non-computed member property or object key is a name, not a reference to an arg.
+const isStaticName = (node: Node, parent: Node | null): boolean =>
+  (parent?.type === 'MemberExpression' && parent.property === node && !parent.computed) ||
+  (parent?.type === 'Property' && parent.key === node && parent.value !== node && !parent.computed);
 
-const isNothingExpression = (expression: t.Node, bindings: Map<string, ImportBinding>): boolean =>
-  t.isIdentifier(expression) &&
+const isNothingExpression = (expression: Node, bindings: Map<string, ImportBinding>): boolean =>
+  expression.type === 'Identifier' &&
   isImported(expression.name, 'nothing', TEMPLATE_TAG_SOURCES, bindings);
 
-const isStaticLiteral = (expression: t.Node): boolean =>
-  t.isNullLiteral(expression) ||
-  t.isStringLiteral(expression) ||
-  t.isNumericLiteral(expression) ||
-  t.isBooleanLiteral(expression) ||
-  t.isIdentifier(expression, { name: 'undefined' }) ||
-  (t.isUnaryExpression(expression) && expression.operator === 'void') ||
-  (t.isTemplateLiteral(expression) && expression.expressions.length === 0);
+const isStaticLiteral = (expression: Node): boolean =>
+  primitiveLiteralValue(expression) !== FAILED ||
+  (expression.type === 'Identifier' && expression.name === 'undefined') ||
+  (expression.type === 'UnaryExpression' && expression.operator === 'void') ||
+  (expression.type === 'TemplateLiteral' && expression.expressions.length === 0);
 
-const literalValue = (expression: t.Node): unknown => {
-  if (t.isNullLiteral(expression)) {
-    return null;
-  }
-  if (
-    t.isStringLiteral(expression) ||
-    t.isNumericLiteral(expression) ||
-    t.isBooleanLiteral(expression)
-  ) {
-    return expression.value;
-  }
-  if (t.isIdentifier(expression, { name: 'undefined' })) {
-    return undefined;
-  }
-  if (t.isUnaryExpression(expression) && expression.operator === 'void') {
-    return undefined;
-  }
-  if (t.isTemplateLiteral(expression)) {
+const literalValue = (expression: Node): unknown => {
+  if (expression.type === 'TemplateLiteral') {
     return expression.quasis[0]?.value.cooked ?? expression.quasis[0]?.value.raw ?? '';
   }
-  return undefined;
+  const value = primitiveLiteralValue(expression);
+  return value === FAILED ? undefined : value;
 };
 
 const isIfDefinedCall = (
-  expression: t.Node,
+  expression: Node,
   bindings: Map<string, ImportBinding>
-): expression is t.CallExpression & { arguments: [t.Expression] } =>
-  t.isCallExpression(expression) &&
+): expression is E.CallExpression & { arguments: [E.Expression] } =>
+  expression.type === 'CallExpression' &&
   expression.arguments.length === 1 &&
-  t.isExpression(expression.arguments[0]) &&
-  t.isIdentifier(expression.callee) &&
+  expression.arguments[0].type !== 'SpreadElement' &&
+  expression.callee.type === 'Identifier' &&
   isImported(expression.callee.name, 'ifDefined', IF_DEFINED_SOURCES, bindings);
 
 const resolveConditionalTest = (
-  expression: t.Expression,
+  expression: E.Expression,
   context: HoleContext
 ): { arg?: string; kind: 'value'; truthy: boolean } | { kind: 'unresolved'; source: string } => {
   const arg = argReferenceForExpression(expression, context.scope);
diff --git a/code/renderers/web-components/src/docgen/story-docs/template-print.lit.test.ts b/code/renderers/web-components/src/docgen/story-docs/template-print.lit.test.ts
index b36234c1634b..4340f212fad9 100644
--- a/code/renderers/web-components/src/docgen/story-docs/template-print.lit.test.ts
+++ b/code/renderers/web-components/src/docgen/story-docs/template-print.lit.test.ts
@@ -8,8 +8,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import {
   createStoryArgsResolver,
   loadCsf,
-  normalizeStoryDeclaration,
-  resolveRenderFunction,
+  resolveEffectiveRender,
 } from 'storybook/internal/csf-tools';
 
 import type {
@@ -123,20 +122,12 @@ const renderSnippet = (attrs: readonly AttributeSlot[]): string => {
   `;
   const csf = loadCsf(storySource, { makeTitle: (title) => title ?? 'Example/Lit' }).parse();
   const resolver = createStoryArgsResolver(csf);
-  const normalized = normalizeStoryDeclaration(csf._storyDeclarationPath.Primary);
-  const renderFunction =
-    normalized.type === 'fn'
-      ? { kind: 'resolved' as const, path: normalized.path }
-      : resolveRenderFunction(
-          normalized.type === 'config' ? normalized.path : undefined,
-          csf._storyDeclarationPath.Primary,
-          resolver.ctx
-        );
+  const renderFunction = resolveEffectiveRender(csf, 'Primary', resolver.ctx);
   expect(renderFunction.kind).toBe('resolved');
   if (renderFunction.kind !== 'resolved') {
     throw new Error('Expected render to resolve');
   }
-  const template = resolveHtmlTemplate(renderFunction.path, csf);
+  const template = resolveHtmlTemplate(renderFunction.node, csf);
   expect(template).toBeDefined();
   return printHtmlTemplate(template!, {}, declaration).snippet;
 };
diff --git a/code/renderers/web-components/src/docgen/story-docs/template-print.test.ts b/code/renderers/web-components/src/docgen/story-docs/template-print.test.ts
index d5f4befe2055..758f5ccfd69e 100644
--- a/code/renderers/web-components/src/docgen/story-docs/template-print.test.ts
+++ b/code/renderers/web-components/src/docgen/story-docs/template-print.test.ts
@@ -3,8 +3,7 @@ import { describe, expect, it } from 'vitest';
 import {
   createStoryArgsResolver,
   loadCsf,
-  normalizeStoryDeclaration,
-  resolveRenderFunction,
+  resolveEffectiveRender,
 } from 'storybook/internal/csf-tools';
 
 import type {
@@ -50,20 +49,12 @@ const renderTemplate = (storySource: string) => {
   const csf = loadCsf(storySource, { makeTitle: (title) => title ?? 'Example/Template' }).parse();
   const resolver = createStoryArgsResolver(csf);
   const story = 'Primary';
-  const normalized = normalizeStoryDeclaration(csf._storyDeclarationPath[story]);
-  const render =
-    normalized.type === 'fn'
-      ? { kind: 'resolved' as const, path: normalized.path }
-      : resolveRenderFunction(
-          normalized.type === 'config' ? normalized.path : undefined,
-          csf._storyDeclarationPath[story],
-          resolver.ctx
-        );
+  const render = resolveEffectiveRender(csf, story, resolver.ctx);
   expect(render.kind).toBe('resolved');
   if (render.kind !== 'resolved') {
     throw new Error('Expected render to resolve');
   }
-  const template = resolveHtmlTemplate(render.path, csf);
+  const template = resolveHtmlTemplate(render.node, csf);
   expect(template).toBeDefined();
   return printHtmlTemplate(template!, resolver.resolve(story).args, declaration);
 };
@@ -125,7 +116,7 @@ describe('html template story snippets', () => {
         listeners: [
           {
             event: 'shape-change',
-            handler: 'event => event.preventDefault()',
+            handler: '(event) => event.preventDefault()',
           },
         ],
         properties: [],
@@ -134,7 +125,7 @@ describe('html template story snippets', () => {
 <script>
   {
     const host = document.currentScript.previousElementSibling;
-    host.addEventListener('shape-change', event => event.preventDefault());
+    host.addEventListener('shape-change', (event) => event.preventDefault());
   }
 </script>`,
         unresolved: [],
@@ -1096,19 +1087,11 @@ describe('html template story snippets', () => {
   ])('rejects block body with $name', ({ source }) => {
     const csf = loadCsf(source, { makeTitle: (title) => title ?? 'Example/Template' }).parse();
     const resolver = createStoryArgsResolver(csf);
-    const normalized = normalizeStoryDeclaration(csf._storyDeclarationPath.Primary);
-    const render =
-      normalized.type === 'fn'
-        ? { kind: 'resolved' as const, path: normalized.path }
-        : resolveRenderFunction(
-            normalized.type === 'config' ? normalized.path : undefined,
-            csf._storyDeclarationPath.Primary,
-            resolver.ctx
-          );
+    const render = resolveEffectiveRender(csf, 'Primary', resolver.ctx);
     expect(render.kind).toBe('resolved');
     if (render.kind !== 'resolved') {
       throw new Error('Expected render to resolve');
     }
-    expect(resolveHtmlTemplate(render.path, csf)).toBeUndefined();
+    expect(resolveHtmlTemplate(render.node, csf)).toBeUndefined();
   });
 });
diff --git a/code/renderers/web-components/src/docgen/story-docs/template-print.ts b/code/renderers/web-components/src/docgen/story-docs/template-print.ts
index d5dfbb803b5b..d704f16c11ed 100644
--- a/code/renderers/web-components/src/docgen/story-docs/template-print.ts
+++ b/code/renderers/web-components/src/docgen/story-docs/template-print.ts
@@ -1,4 +1,4 @@
-import type { types as t } from 'storybook/internal/babel';
+import type { ESTree as E, ESTreeNode as Node } from 'storybook/internal/csf-tools';
 import { sourceOf } from 'storybook/internal/csf-tools';
 
 import type { ManifestDeclaration } from '../component-docgen/manifest/types.ts';
@@ -37,7 +37,7 @@ interface TemplatePrintState {
   falseDefaults: Set<string>;
   listenersNotShown: Set<string>;
   lit: boolean;
-  markers: Map<string, t.Expression>;
+  markers: Map<string, E.Expression>;
   properties: Set<string>;
   referenced: Set<string>;
   unresolved: Set<string>;
@@ -45,7 +45,7 @@ interface TemplatePrintState {
 
 export function printHtmlTemplate(
   template: HtmlTemplate,
-  storyArgs: Record<string, t.Node>,
+  storyArgs: Record<string, Node>,
   declaration: ManifestDeclaration
 ): HtmlTemplateRenderResult {
   return printTemplate(template, {
@@ -67,7 +67,7 @@ const printTemplateWithListeners = (
 ): HtmlTemplateRenderResult => {
   const scopedContext = { ...context, bindings: template.bindings, scope: template.scope };
   const nonce = `${Date.now().toString(36)}_${Math.random().toString(36).slice(2)}`;
-  const markers = new Map<string, t.Expression>();
+  const markers = new Map<string, E.Expression>();
   const source = template.quasis.reduce((html, quasi, index) => {
     const expression = template.expressions[index];
     if (!expression) {
@@ -338,7 +338,7 @@ const nodesForChildValue = (value: HoleValue, state: TemplatePrintState): HtmlNo
   }
 };
 
-const resolveMarkerValue = (expression: t.Expression, state: TemplatePrintState): HoleValue => {
+const resolveMarkerValue = (expression: E.Expression, state: TemplatePrintState): HoleValue => {
   const value = resolveHoleValue(expression, state.context);
   if (value.arg) {
     state.referenced.add(value.arg);
@@ -382,7 +382,7 @@ const markersIn = (text: string, state: TemplatePrintState): string[] =>
 const markerSources = (markers: string[], state: TemplatePrintState): string =>
   markers
     .map((marker) => state.markers.get(marker))
-    .filter((expression): expression is t.Expression => expression !== undefined)
+    .filter((expression): expression is E.Expression => expression !== undefined)
     .map(sourceOf)
     .join(', ');
 
diff --git a/code/renderers/web-components/src/docgen/story-docs/template-scope.ts b/code/renderers/web-components/src/docgen/story-docs/template-scope.ts
index 11aa3610f354..06fe02d716b9 100644
--- a/code/renderers/web-components/src/docgen/story-docs/template-scope.ts
+++ b/code/renderers/web-components/src/docgen/story-docs/template-scope.ts
@@ -1,16 +1,24 @@
-import { types as t } from 'storybook/internal/babel';
-import type { CsfFile, ImportBinding, RenderFunctionPath } from 'storybook/internal/csf-tools';
+import type {
+  CsfFile,
+  ESTree as E,
+  ESTreeNode as Node,
+  ImportBinding,
+  RenderFunction,
+} from 'storybook/internal/csf-tools';
 import {
   collectImportBindings,
+  isStringLiteral,
   keyOf,
-  returnedExpressionPath,
+  returnedExpression,
   sourceOf,
   unwrapExpression,
 } from 'storybook/internal/csf-tools';
 
+import { FAILED, primitiveLiteralValue } from './arg-values.ts';
+
 export interface HtmlTemplate {
   bindings: Map<string, ImportBinding>;
-  expressions: t.Expression[];
+  expressions: E.Expression[];
   lit: boolean;
   quasis: string[];
   scope: TemplateScope;
@@ -33,10 +41,10 @@ export type AliasValue =
 const TEMPLATE_TAG_SOURCES = ['lit', 'lit-html', 'lit-element'];
 
 export function resolveHtmlTemplate(
-  renderFunction: RenderFunctionPath,
+  renderFunction: RenderFunction,
   csf: CsfFile
 ): HtmlTemplate | undefined {
-  const bindings = collectImportBindings(csf._file.path);
+  const bindings = collectImportBindings(csf._program);
   const returned = returnedTemplateExpression(renderFunction, bindings);
   return returned
     ? templateFromExpression(unwrapExpression(returned.node), bindings, returned.scope)
@@ -44,11 +52,11 @@ export function resolveHtmlTemplate(
 }
 
 export function templateFromExpression(
-  expression: t.Node,
+  expression: Node,
   bindings: Map<string, ImportBinding>,
   scope: TemplateScope
 ): HtmlTemplate | undefined {
-  if (t.isStringLiteral(expression)) {
+  if (isStringLiteral(expression)) {
     return {
       bindings,
       expressions: [],
@@ -58,10 +66,10 @@ export function templateFromExpression(
       source: sourceOf(expression),
     };
   }
-  if (t.isTemplateLiteral(expression)) {
+  if (expression.type === 'TemplateLiteral') {
     return templateFromLiteral(expression, bindings, false, scope, sourceOf(expression));
   }
-  if (!t.isTaggedTemplateExpression(expression) || !t.isIdentifier(expression.tag)) {
+  if (expression.type !== 'TaggedTemplateExpression' || expression.tag.type !== 'Identifier') {
     return undefined;
   }
   return isImported(expression.tag.name, 'html', TEMPLATE_TAG_SOURCES, bindings) ||
@@ -71,64 +79,65 @@ export function templateFromExpression(
 }
 
 export function aliasValueForIdentifier(
-  expression: t.Identifier,
+  expression: { name: string },
   scope: TemplateScope
 ): AliasValue | undefined {
   return scope.aliases.get(expression.name);
 }
 
 export function argReferenceForExpression(
-  expression: t.Expression,
+  expression: Node,
   scope: TemplateScope
 ): { name: string; path: string[] } | undefined {
   const unwrapped = unwrapExpression(expression);
-  if (t.isIdentifier(unwrapped)) {
+  if (unwrapped.type === 'Identifier') {
     const alias = aliasValueForIdentifier(unwrapped, scope);
     return alias?.kind === 'arg'
       ? { name: alias.name, path: alias.path }
       : parameterArgReference(unwrapped, scope);
   }
-  if (!t.isMemberExpression(unwrapped)) {
+  if (unwrapped.type !== 'MemberExpression') {
     return undefined;
   }
   const property = memberPropertyName(unwrapped);
   if (property === undefined) {
     return undefined;
   }
-  if (scope.args && t.isIdentifier(unwrapped.object, { name: scope.args })) {
+  if (
+    scope.args &&
+    unwrapped.object.type === 'Identifier' &&
+    unwrapped.object.name === scope.args
+  ) {
     return { name: property, path: [] };
   }
-  if (!t.isExpression(unwrapped.object)) {
-    return undefined;
-  }
   const object = argReferenceForExpression(unwrapped.object, scope);
   return object ? { name: object.name, path: [...object.path, property] } : undefined;
 }
 
 const returnedTemplateExpression = (
-  renderFunction: RenderFunctionPath,
+  renderFunction: RenderFunction,
   bindings: Map<string, ImportBinding>
-): { node: t.Expression; scope: TemplateScope } | undefined => {
+): { node: E.Expression; scope: TemplateScope } | undefined => {
   const baseScope = scopeForRenderFunction(renderFunction);
-  const strict = returnedExpressionPath(renderFunction);
+  const strict = returnedExpression(renderFunction);
   if (strict) {
-    return { node: strict.node, scope: baseScope };
+    return { node: strict, scope: baseScope };
   }
 
-  if (!t.isBlockStatement(renderFunction.node.body)) {
+  if (renderFunction.body?.type !== 'BlockStatement') {
     return undefined;
   }
 
-  const statements = renderFunction.node.body.body;
+  const statements = renderFunction.body.body;
   const returned = statements.at(-1);
-  if (!t.isReturnStatement(returned) || !t.isExpression(returned.argument)) {
+  if (returned?.type !== 'ReturnStatement' || !returned.argument) {
     return undefined;
   }
 
   const scope = copyScope(baseScope);
   for (const statement of statements.slice(0, -1)) {
     if (
-      !t.isVariableDeclaration(statement) ||
+      statement.type !== 'VariableDeclaration' ||
       (statement.kind !== 'const' && statement.kind !== 'let')
     ) {
       return undefined;
@@ -141,14 +150,14 @@ const returnedTemplateExpression = (
   return { node: returned.argument, scope };
 };
 
-const scopeForRenderFunction = (renderFunction: RenderFunctionPath): TemplateScope => {
-  const [first] = renderFunction.node.params;
+const scopeForRenderFunction = (renderFunction: RenderFunction): TemplateScope => {
+  const [first] = renderFunction.params;
   const scope: TemplateScope = { aliases: new Map(), destructured: new Map() };
-  if (t.isIdentifier(first)) {
+  if (first?.type === 'Identifier') {
     scope.args = first.name;
     return scope;
   }
-  if (!t.isObjectPattern(first)) {
+  if (first?.type !== 'ObjectPattern') {
     return scope;
   }
   const destructured = destructuredAliases(first, { name: '', path: [] });
@@ -165,15 +174,15 @@ const scopeForRenderFunction = (renderFunction: RenderFunctionPath): TemplateSco
 };
 
 const addVariableAliases = (
-  declaration: t.VariableDeclaration,
+  declaration: E.VariableDeclaration,
   scope: TemplateScope,
   bindings: Map<string, ImportBinding>
 ): boolean => {
   for (const declarator of declaration.declarations) {
-    if (!t.isExpression(declarator.init)) {
+    if (!declarator.init) {
       return false;
     }
-    if (t.isIdentifier(declarator.id)) {
+    if (declarator.id.type === 'Identifier') {
       const alias = aliasForExpression(declarator.init, scope, bindings);
       if (!alias) {
         return false;
@@ -181,7 +190,7 @@ const addVariableAliases = (
       scope.aliases.set(declarator.id.name, alias);
       continue;
     }
-    if (t.isObjectPattern(declarator.id)) {
+    if (declarator.id.type === 'ObjectPattern') {
       const source = destructureSourceForExpression(declarator.init, scope);
       if (!source) {
         return false;
@@ -199,22 +208,22 @@ const addVariableAliases = (
 };
 
 const destructureSourceForExpression = (
-  expression: t.Expression,
+  expression: E.Expression,
   scope: TemplateScope
 ): { name: string; path: string[] } | undefined => {
   const unwrapped = unwrapExpression(expression);
-  return scope.args && t.isIdentifier(unwrapped, { name: scope.args })
+  return scope.args && unwrapped.type === 'Identifier' && unwrapped.name === scope.args
     ? { name: '', path: [] }
     : argReferenceForExpression(expression, scope);
 };
 
 const aliasForExpression = (
-  expression: t.Expression,
+  expression: E.Expression,
   scope: TemplateScope,
   bindings: Map<string, ImportBinding>
 ): AliasValue | undefined => {
   const unwrapped = unwrapExpression(expression);
-  const arg = t.isExpression(unwrapped) ? argReferenceForExpression(unwrapped, scope) : undefined;
+  const arg = argReferenceForExpression(unwrapped, scope);
   if (arg) {
     return { kind: 'arg', source: sourceOf(expression), ...arg };
   }
@@ -229,15 +238,15 @@ const aliasForExpression = (
 };
 
 const destructuredAliases = (
-  pattern: t.ObjectPattern,
+  pattern: E.ObjectPattern,
   source: { name: string; path: string[] }
 ): AliasMap | undefined => {
   const aliases: AliasMap = new Map();
   for (const property of pattern.properties) {
-    if (!t.isObjectProperty(property) || property.computed) {
+    if (property.type !== 'Property' || property.computed) {
       return undefined;
     }
-    const key = keyOf(property);
+    const key = keyOf(property as unknown as E.ObjectProperty);
     if (!key) {
       return undefined;
     }
@@ -245,9 +254,9 @@ const destructuredAliases = (
       source.name === ''
         ? { name: key, path: [] }
         : { name: source.name, path: [...source.path, key] };
-    if (t.isIdentifier(property.value)) {
+    if (property.value.type === 'Identifier') {
       aliases.set(property.value.name, { kind: 'arg', ...root });
-    } else if (t.isObjectPattern(property.value)) {
+    } else if (property.value.type === 'ObjectPattern') {
       const nested = destructuredAliases(property.value, root);
       if (!nested) {
         return undefined;
@@ -261,33 +270,31 @@ const destructuredAliases = (
 };
 
 const parameterArgReference = (
-  expression: t.Identifier,
+  expression: { name: string },
   scope: TemplateScope
 ): { name: string; path: string[] } | undefined => {
   const arg = scope.destructured.get(expression.name);
   return arg ? { name: arg, path: [] } : undefined;
 };
 
-const memberPropertyName = (expression: t.MemberExpression): string | undefined => {
-  if (!expression.computed && t.isIdentifier(expression.property)) {
+const memberPropertyName = (expression: E.MemberExpression): string | undefined => {
+  if (!expression.computed && expression.property.type === 'Identifier') {
     return expression.property.name;
   }
-  return expression.computed && t.isStringLiteral(expression.property)
+  return expression.computed && isStringLiteral(expression.property)
     ? expression.property.value
     : undefined;
 };
 
 const templateFromLiteral = (
-  literal: t.TemplateLiteral,
+  literal: E.TemplateLiteral,
   bindings: Map<string, ImportBinding>,
   lit: boolean,
   scope: TemplateScope,
   source: string
 ): HtmlTemplate => ({
   bindings,
-  expressions: literal.expressions.filter((expression): expression is t.Expression =>
-    t.isExpression(expression)
-  ),
+  expressions: literal.expressions,
   lit,
   quasis: literal.quasis.map((quasi) => quasi.value.raw),
   scope,
@@ -310,22 +317,18 @@ const isImported = (
   return !!binding && sources.includes(binding.importId) && binding.importName === importName;
 };
 
-const isStaticLiteral = (expression: t.Node): boolean =>
-  t.isStringLiteral(expression) ||
-  t.isNumericLiteral(expression) ||
-  t.isBooleanLiteral(expression) ||
-  (t.isTemplateLiteral(expression) && expression.expressions.length === 0);
+const isStaticLiteral = (expression: Node): boolean => {
+  const value = primitiveLiteralValue(expression);
+  return (
+    (value !== FAILED && value !== null) ||
+    (expression.type === 'TemplateLiteral' && expression.expressions.length === 0)
+  );
+};
 
-const literalValue = (expression: t.Node): unknown => {
-  if (
-    t.isStringLiteral(expression) ||
-    t.isNumericLiteral(expression) ||
-    t.isBooleanLiteral(expression)
-  ) {
-    return expression.value;
-  }
-  if (t.isTemplateLiteral(expression)) {
+const literalValue = (expression: Node): unknown => {
+  if (expression.type === 'TemplateLiteral') {
     return expression.quasis[0]?.value.cooked ?? expression.quasis[0]?.value.raw ?? '';
   }
-  return undefined;
+  const value = primitiveLiteralValue(expression);
+  return value === FAILED ? undefined : value;
 };

From a49c06b8d67e03fa5fcd2be619008d3ae34ee6c2 Mon Sep 17 00:00:00 2001
From: Easton <easton.shin@marqvision.com>
Date: Tue, 13 Oct 2026 11:52:17 +0900
Subject: [PATCH 051/326] refactor(angular-vite): port docgen to the csf-tools
 ESTree API

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/docgen/story-docs-args.ts             |  78 +++---
 .../src/docgen/story-docs-build.test.ts       |  32 ++-
 .../src/docgen/story-docs-build.ts            |  37 ++-
 .../src/docgen/story-docs-markup.ts           | 260 +++++++++---------
 .../src/docgen/story-docs-ng-modules.ts       |  31 ++-
 code/frameworks/angular-vite/src/preset.ts    |   6 +-
 6 files changed, 241 insertions(+), 203 deletions(-)

diff --git a/code/frameworks/angular-vite/src/docgen/story-docs-args.ts b/code/frameworks/angular-vite/src/docgen/story-docs-args.ts
index 6e6d0bd85692..9dc66be6286f 100644
--- a/code/frameworks/angular-vite/src/docgen/story-docs-args.ts
+++ b/code/frameworks/angular-vite/src/docgen/story-docs-args.ts
@@ -1,7 +1,12 @@
 // Turns a resolved arg node into the Angular template expression a binding carries. Reading the args
 // themselves - following spreads and names - is the shared CSF pass in `story-shape`.
-import { babelPrint, types as t } from 'storybook/internal/babel';
-import { keyOf, unwrapExpression } from 'storybook/internal/csf-tools';
+import {
+  type ESTreeNode as Node,
+  codeOf,
+  expressionFromSource,
+  keyOf,
+  unwrapExpression,
+} from 'storybook/internal/csf-tools';
 
 import type { SnippetEnum } from './build-docgen.ts';
 import { isValidIdentifier } from '../template-grammar.ts';
@@ -16,15 +21,17 @@ const EVAL_FAILED = Symbol('story-docs-eval-failed');
  */
 export const createArgExternalizer =
   (enums: SnippetEnum[]) =>
-  (node: t.Node): t.Node | undefined => {
+  (node: Node): Node | undefined => {
     const value = evaluateNode(node, enums);
-    return value === EVAL_FAILED ? undefined : t.valueToNode(value);
+    return value === EVAL_FAILED
+      ? undefined
+      : expressionFromSource(printExpressionValue(value, new Set()));
   };
 
 // An arg no static evaluation could reduce to a value falls back to its source text. Every
 // expression is escaped for the attribute position it lands in: the double-quote delimiter and
 // text Angular's lexer would decode as a character reference survive the round-trip unchanged.
-export const evaluateArgExpression = (node: t.Node, enums: SnippetEnum[]): string => {
+export const evaluateArgExpression = (node: Node, enums: SnippetEnum[]): string => {
   const literal = evaluateArgLiteral(node, enums);
   return escapeAttributeExpression(literal ?? printArgSource(unwrapExpression(node)));
 };
@@ -36,17 +43,24 @@ export const evaluateArgExpression = (node: t.Node, enums: SnippetEnum[]): strin
  * to produce code rather than an attribute can tell a real value from a name only the story file
  * knows. The two positions share a printer, so a value reads the same wherever it lands.
  */
-export const evaluateArgLiteral = (node: t.Node, enums: SnippetEnum[]): string | undefined => {
+export const evaluateArgLiteral = (node: Node, enums: SnippetEnum[]): string | undefined => {
   const value = evaluateNode(unwrapExpression(node), enums);
   return value === EVAL_FAILED ? undefined : printExpressionValue(value, new Set());
 };
 
-export const argFieldValue = (node: t.Node): string => printArgSource(unwrapExpression(node));
+export const argFieldValue = (node: Node): string => printArgSource(unwrapExpression(node));
 
-// recast reprints a node it parsed straight from the file's own text, comments and indentation
-// included. A clone drops the bookkeeping that path relies on and is formatted from the AST
-// instead, which is what leaves a binding holding the expression and nothing else.
-const printArgSource = (node: t.Node): string => babelPrint(t.cloneNode(node, true));
+// Continuation lines keep the story file's indentation, which the snippet replaces with its own.
+const printArgSource = (node: Node): string => {
+  const [first, ...rest] = codeOf(node).split(/\r?\n/);
+  const indent = Math.min(
+    ...rest.filter((line) => line.trim()).map((line) => /^[ \t]*/.exec(line)![0].length)
+  );
+  const dedented = rest.map((line) =>
+    line.slice(Math.min(indent, line.length)).replace(/^\t+/, (tabs) => '  '.repeat(tabs.length))
+  );
+  return [first, ...dedented].join('\n');
+};
 
 // Angular expression strings support backslash escapes, so quoting stays lossless.
 const quoteExpressionString = (value: string): string =>
@@ -84,38 +98,36 @@ const printExpressionValue = (value: unknown, seen: Set<unknown>): string => {
 const escapeAttributeExpression = (expression: string): string =>
   expression.replace(/&(?=#|\w+;)/g, '&amp;').replace(/"/g, '&quot;');
 
-const evaluateNode = (node: t.Node, enums: SnippetEnum[]): unknown => {
+const evaluateNode = (node: Node, enums: SnippetEnum[]): unknown => {
   const unwrapped = unwrapExpression(node);
-  if (
-    t.isStringLiteral(unwrapped) ||
-    t.isNumericLiteral(unwrapped) ||
-    t.isBooleanLiteral(unwrapped)
-  ) {
-    return unwrapped.value;
-  }
-  if (t.isNullLiteral(unwrapped)) {
-    return null;
+  if (unwrapped.type === 'Literal') {
+    const { value } = unwrapped;
+    if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+      return value;
+    }
+    return 'regex' in unwrapped || 'bigint' in unwrapped ? EVAL_FAILED : null;
   }
-  if (t.isIdentifier(unwrapped) && unwrapped.name === 'undefined') {
+  if (unwrapped.type === 'Identifier' && unwrapped.name === 'undefined') {
     return undefined;
   }
-  if (t.isUnaryExpression(unwrapped) && unwrapped.operator === 'void') {
+  if (unwrapped.type === 'UnaryExpression' && unwrapped.operator === 'void') {
     return undefined;
   }
   if (
-    t.isUnaryExpression(unwrapped) &&
+    unwrapped.type === 'UnaryExpression' &&
     unwrapped.operator === '-' &&
-    t.isNumericLiteral(unwrapped.argument)
+    unwrapped.argument.type === 'Literal' &&
+    typeof unwrapped.argument.value === 'number'
   ) {
     return -unwrapped.argument.value;
   }
-  if (t.isTemplateLiteral(unwrapped) && unwrapped.expressions.length === 0) {
+  if (unwrapped.type === 'TemplateLiteral' && unwrapped.expressions.length === 0) {
     return unwrapped.quasis[0]?.value.cooked ?? EVAL_FAILED;
   }
-  if (t.isArrayExpression(unwrapped)) {
+  if (unwrapped.type === 'ArrayExpression') {
     const values: unknown[] = [];
     for (const element of unwrapped.elements) {
-      if (element === null || t.isSpreadElement(element)) {
+      if (element === null || element.type === 'SpreadElement') {
         return EVAL_FAILED;
       }
       const value = evaluateNode(element, enums);
@@ -126,10 +138,10 @@ const evaluateNode = (node: t.Node, enums: SnippetEnum[]): unknown => {
     }
     return values;
   }
-  if (t.isObjectExpression(unwrapped)) {
+  if (unwrapped.type === 'ObjectExpression') {
     const value: Record<string, unknown> = {};
     for (const property of unwrapped.properties) {
-      if (!t.isObjectProperty(property)) {
+      if (property.type !== 'Property' || property.method || property.kind !== 'init') {
         return EVAL_FAILED;
       }
       const key = keyOf(property);
@@ -147,10 +159,10 @@ const evaluateNode = (node: t.Node, enums: SnippetEnum[]): unknown => {
   // `Enum.Member`: the analyzer collects referenced enums, so the member's value - what the
   // runtime generator would see - is recoverable statically.
   if (
-    t.isMemberExpression(unwrapped) &&
+    unwrapped.type === 'MemberExpression' &&
     !unwrapped.computed &&
-    t.isIdentifier(unwrapped.object) &&
-    t.isIdentifier(unwrapped.property)
+    unwrapped.object.type === 'Identifier' &&
+    unwrapped.property.type === 'Identifier'
   ) {
     const objectName = unwrapped.object.name;
     const propertyName = unwrapped.property.name;
diff --git a/code/frameworks/angular-vite/src/docgen/story-docs-build.test.ts b/code/frameworks/angular-vite/src/docgen/story-docs-build.test.ts
index cc8db655237f..160d39d0ed98 100644
--- a/code/frameworks/angular-vite/src/docgen/story-docs-build.test.ts
+++ b/code/frameworks/angular-vite/src/docgen/story-docs-build.test.ts
@@ -1511,17 +1511,33 @@ describe('buildStoryDocsPayload', () => {
     });
 
     it.each([
-      ['above the arg', `label:\n          // why\n          (value) => value.trim(),`],
-      ['before the arg', `label: /* why */ (value) => value.trim(),`],
-      ['inside the arg', `label: (value) => /* why */ value.trim(),`],
-      ['inside the parameter list', `label: (/* why */ value) => value.trim(),`],
-    ])('leaves a comment %s out of the binding', async (_name, property) => {
+      [
+        'above the arg',
+        `label:\n          // why\n          (value) => value.trim(),`,
+        `label = (value) => value.trim();`,
+      ],
+      [
+        'before the arg',
+        `label: /* why */ (value) => value.trim(),`,
+        `label = (value) => value.trim();`,
+      ],
+      [
+        'inside the arg',
+        `label: (value) => /* why */ value.trim(),`,
+        `label = (value) => /* why */ value.trim();`,
+      ],
+      [
+        'inside the parameter list',
+        `label: (/* why */ value) => value.trim(),`,
+        `label = (/* why */ value) => value.trim();`,
+      ],
+    ])('binds an arg with a comment %s as the arg is written', async (_name, property, field) => {
       const story = await soleStory(`
         import { ButtonComponent } from './button.component';
         export default { title: 'Example/Button', component: ButtonComponent };
         export const Default = { args: { ${property} } };
       `);
-      expect(story.snippet).toContain(`label = (value) => value.trim();`);
+      expect(story.snippet).toContain(field);
     });
   });
 
@@ -1646,7 +1662,7 @@ describe('buildStoryDocsPayload', () => {
     });
 
     it('indents a hoisted value that prints over several lines', async () => {
-      const story = await storyWithArgs(`value: (item) => { return item.id; }`);
+      const story = await storyWithArgs(`value: (item) => {\n  return item.id;\n}`);
 
       expect(story.snippet).toMatchInlineSnapshot(`
         "import { Component } from '@angular/core';
@@ -1700,7 +1716,7 @@ describe('buildStoryDocsPayload', () => {
           template: \`<sb-button [value]="value" />\`,
         })
         export class DemoComponent {
-          value = (text) => text.replace('"', '\\'');
+          value = (text) => text.replace('"', "'");
         }"
       `);
       expect(story.snippet).not.toContain('&quot;');
diff --git a/code/frameworks/angular-vite/src/docgen/story-docs-build.ts b/code/frameworks/angular-vite/src/docgen/story-docs-build.ts
index 99a2ec0ddd1b..4809f7055a80 100644
--- a/code/frameworks/angular-vite/src/docgen/story-docs-build.ts
+++ b/code/frameworks/angular-vite/src/docgen/story-docs-build.ts
@@ -1,7 +1,11 @@
-import { types as t } from 'storybook/internal/babel';
 import { getComponentIdFromEntry, getStoryImportPathFromEntry } from 'storybook/internal/common';
 import { storyNameFromExport } from 'storybook/internal/csf/csf-utils';
-import type { CsfFile, StoryArgsResolver, StoryReferences } from 'storybook/internal/csf-tools';
+import type {
+  CsfFile,
+  ESTreeNode as Node,
+  StoryArgsResolver,
+  StoryReferences,
+} from 'storybook/internal/csf-tools';
 import {
   buildImportStatements,
   authoredSource,
@@ -87,7 +91,7 @@ export const buildStoryDocsPayload = async (
   };
 
   const componentName = componentNameOf(componentNode);
-  const importBindings = collectImportBindings(csf._file.path);
+  const importBindings = collectImportBindings(csf._program);
   const deps: StoryDocDeps = {
     csf,
     resolveStoryArgs: createStoryArgsResolver(csf, references),
@@ -139,9 +143,9 @@ const createImportStatement = (
 
 // Mirrors the resolver's reading of `meta.component`, keeping the payload named after the story
 // file's component when docgen is unavailable.
-const componentNameOf = (node: t.Node | undefined): string | undefined => {
-  const identifier = node && t.isTSInstantiationExpression(node) ? node.expression : node;
-  return identifier && t.isIdentifier(identifier) ? identifier.name : undefined;
+const componentNameOf = (node: Node | undefined): string | undefined => {
+  const identifier = node?.type === 'TSInstantiationExpression' ? node.expression : node;
+  return identifier?.type === 'Identifier' ? identifier.name : undefined;
 };
 
 interface StoryDocDeps {
@@ -166,7 +170,10 @@ const buildStoryDoc = async (
   const { csf } = deps;
   const name = story.name ?? storyNameFromExport(exportName);
   try {
-    const { description, summary } = extractStoryJSDocInfo(csf._storyStatements[exportName]);
+    const { description, summary } = extractStoryJSDocInfo(
+      csf._storyStatements[exportName],
+      csf._editor
+    );
     const rendered = await renderedSnippet(storyShape(exportName, deps), deps);
 
     return {
@@ -248,7 +255,7 @@ const storyShape = (exportName: string, deps: StoryDocDeps): StoryShape => {
 const renderStorySnippet = async (
   snippetMeta: AngularComponentSnippetMeta,
   shape: StoryShape,
-  storyDecorators: t.Node | undefined,
+  storyDecorators: Node | undefined,
   deps: StoryDocDeps
 ): Promise<HostComponentSnippet> => {
   const { componentImport } = deps;
@@ -464,15 +471,19 @@ const argsExpansion = (snippetMeta: AngularComponentSnippetMeta, shape: StorySha
   return { inputs, outputs };
 };
 
-const isFunctionValue = (node: t.Node): boolean => {
+const isFunctionValue = (node: Node): boolean => {
   const unwrapped = unwrapExpression(node);
-  return t.isFunction(unwrapped);
+  return (
+    unwrapped.type === 'ArrowFunctionExpression' ||
+    unwrapped.type === 'FunctionExpression' ||
+    unwrapped.type === 'FunctionDeclaration'
+  );
 };
 
-const isUndefinedValue = (node: t.Node): boolean => {
+const isUndefinedValue = (node: Node): boolean => {
   const unwrapped = unwrapExpression(node);
   return (
-    (t.isIdentifier(unwrapped) && unwrapped.name === 'undefined') ||
-    t.isUnaryExpression(unwrapped, { operator: 'void' })
+    (unwrapped.type === 'Identifier' && unwrapped.name === 'undefined') ||
+    (unwrapped.type === 'UnaryExpression' && unwrapped.operator === 'void')
   );
 };
diff --git a/code/frameworks/angular-vite/src/docgen/story-docs-markup.ts b/code/frameworks/angular-vite/src/docgen/story-docs-markup.ts
index f3a9d37f33b4..36aaf3dc4fdc 100644
--- a/code/frameworks/angular-vite/src/docgen/story-docs-markup.ts
+++ b/code/frameworks/angular-vite/src/docgen/story-docs-markup.ts
@@ -1,11 +1,16 @@
 // Reads the markup a story supplies itself - `template`, a `render` that returns one, or the CSF2
 // function form - so a snippet shows the story as written. Which members the story and its meta hold
 // is the shared CSF pass in `story-shape`, spreads and names already followed.
-import { type NodePath, types as t } from 'storybook/internal/babel';
-import type { CsfFile, ResolvedMembers } from 'storybook/internal/csf-tools';
+import type {
+  CsfFile,
+  ESTree as E,
+  ESTreeNode as Node,
+  ResolvedMembers,
+} from 'storybook/internal/csf-tools';
 import {
+  importedName,
   isCanonicalCsf2BindCall,
-  isCsfFactoryCall,
+  isStringLiteral,
   sourceOf,
   templateParts,
   type TemplateParts,
@@ -23,7 +28,7 @@ export interface StoryShape {
   /** The meta's config members, spreads and names followed. */
   metaMembers: ResolvedMembers;
   /** Meta args merged under story args, keyed by arg name. */
-  args: Record<string, t.Node>;
+  args: Record<string, Node>;
   /** Source text of everything hiding args from this pass; empty when the merged args are known. */
   unresolvedArgs: string[];
 }
@@ -196,19 +201,19 @@ const shapeTemplate = (
 };
 
 const templateFrom = (
-  node: t.Node | undefined,
+  node: Node | undefined,
   shape: StoryShape,
   bindings: Bindings | undefined,
   scope: FunctionScope
 ): TemplateResult | undefined => {
   if (
     node === undefined ||
-    t.isNullLiteral(node) ||
-    (t.isIdentifier(node) && node.name === 'undefined')
+    isNullLiteral(node) ||
+    (node.type === 'Identifier' && node.name === 'undefined')
   ) {
     return undefined;
   }
-  if (t.isStringLiteral(node)) {
+  if (isStringLiteral(node)) {
     return literalTemplate(node.value, new Set(), []);
   }
   const parts = templateParts(node);
@@ -281,7 +286,7 @@ const interpolate = (
  * read, followed the same way `template: HOISTED` is.
  */
 const substituteExpression = (
-  expression: t.Node,
+  expression: Node,
   shape: StoryShape,
   bindings: Bindings | undefined,
   scope: FunctionScope,
@@ -289,11 +294,12 @@ const substituteExpression = (
   marker: string,
   expansions: TemplateExpansion[]
 ): string | undefined => {
-  if (t.isCallExpression(expression) && isImportedArgsToTemplate(expression, shape)) {
+  if (expression.type === 'CallExpression' && isImportedArgsToTemplate(expression, shape)) {
     // Only the args parameter (whole, or as a rest binding) has a knowable expansion; a derived
     // object expands to whatever the story computes at runtime.
     const argument = expression.arguments[0];
-    const excluded = t.isIdentifier(argument) ? scope.argsExpansions.get(argument.name) : undefined;
+    const excluded =
+      argument?.type === 'Identifier' ? scope.argsExpansions.get(argument.name) : undefined;
     if (!bindings || excluded === undefined) {
       return undefined;
     }
@@ -310,7 +316,7 @@ const substituteExpression = (
     return marker;
   }
 
-  if (!t.isIdentifier(expression)) {
+  if (expression.type !== 'Identifier') {
     return undefined;
   }
   const argName = scope.argBindings.get(expression.name);
@@ -334,34 +340,32 @@ const substituteExpression = (
 
 const ARGS_TO_TEMPLATE_MODULES = new Set(['@storybook/angular', '@storybook/angular-vite']);
 
-const isImportedArgsToTemplate = (call: t.CallExpression, shape: StoryShape): boolean => {
-  if (!t.isIdentifier(call.callee)) {
-    return false;
-  }
-  const binding = shape.csf._file.path.scope.getBinding(call.callee.name);
-  if (!binding?.referencePaths.some((path) => path.node === call.callee)) {
+const isImportedArgsToTemplate = (call: E.CallExpression, shape: StoryShape): boolean => {
+  if (call.callee.type !== 'Identifier') {
     return false;
   }
-  const specifier = binding?.path.node;
-  const declaration = binding?.path.findParent((path) => t.isImportDeclaration(path.node))?.node;
-  if (!t.isImportSpecifier(specifier) || !t.isImportDeclaration(declaration)) {
+  const binding = shape.csf._editor.scopes.bindingOf(call.callee);
+  const specifier = binding?.node;
+  const declaration = binding?.declaration;
+  if (specifier?.type !== 'ImportSpecifier' || declaration?.type !== 'ImportDeclaration') {
     return false;
   }
-  const importedName = t.isIdentifier(specifier.imported)
-    ? specifier.imported.name
-    : specifier.imported.value;
   return (
-    importedName === 'argsToTemplate' && ARGS_TO_TEMPLATE_MODULES.has(declaration.source.value)
+    importedName(specifier.imported) === 'argsToTemplate' &&
+    ARGS_TO_TEMPLATE_MODULES.has(declaration.source.value)
   );
 };
 
 /** Filter for `argsToTemplate` options, or `undefined` when the options need the story to run. */
-const bindingFilterOf = (options: t.Node | undefined): BindingFilter | undefined => {
+const bindingFilterOf = (options: Node | undefined): BindingFilter | undefined => {
   if (options === undefined) {
     return {};
   }
   const unwrapped = unwrapExpression(options);
-  if (!t.isObjectExpression(unwrapped) || unwrapped.properties.some(t.isSpreadElement)) {
+  if (
+    unwrapped.type !== 'ObjectExpression' ||
+    unwrapped.properties.some((property) => property.type === 'SpreadElement')
+  ) {
     return undefined;
   }
 
@@ -383,30 +387,35 @@ const bindingFilterOf = (options: t.Node | undefined): BindingFilter | undefined
 };
 
 /** String array literal, for `argsToTemplate`'s `include` / `exclude` options. */
-const stringArray = (node: t.Node | undefined): string[] | undefined =>
-  t.isArrayExpression(node) && node.elements.every((element) => t.isStringLiteral(element))
-    ? node.elements.map((element) => (element as t.StringLiteral).value)
+const stringArray = (node: Node | undefined): string[] | undefined =>
+  node?.type === 'ArrayExpression' && node.elements.every(isStringLiteral)
+    ? node.elements.map((element) => (element as E.StringLiteral).value)
     : undefined;
 
 /** Text an interpolated arg contributes, for slot content like `<span>${footer}</span>`. */
-const literalText = (node: t.Node | undefined): string | undefined => {
+const literalText = (node: Node | undefined): string | undefined => {
   const unwrapped = node && unwrapExpression(node);
-  if (t.isStringLiteral(unwrapped)) {
-    return unwrapped.value;
+  if (unwrapped?.type !== 'Literal') {
+    return undefined;
   }
-  return t.isNumericLiteral(unwrapped) || t.isBooleanLiteral(unwrapped)
-    ? String(unwrapped.value)
-    : undefined;
+  const { value } = unwrapped;
+  if (typeof value === 'string') {
+    return value;
+  }
+  return typeof value === 'number' || typeof value === 'boolean' ? String(value) : undefined;
 };
 
+const isNullLiteral = (node: Node): boolean =>
+  node.type === 'Literal' && node.value === null && !('regex' in node) && !('bigint' in node);
+
 type AnnotationResolution =
-  | { kind: 'value'; node: t.Node }
+  | { kind: 'value'; node: Node }
   | { kind: 'missing' }
-  | { kind: 'unresolvable'; node?: t.Node };
+  | { kind: 'unresolvable'; node?: Node };
 
 type PropertyResolution =
   | Exclude<AnnotationResolution, { kind: 'unresolvable' }>
-  | { kind: 'unresolvable'; node: t.Node };
+  | { kind: 'unresolvable'; node: Node };
 
 /**
  * A named member of a resolved config record.
@@ -427,17 +436,19 @@ export const resolvedMember = (members: ResolvedMembers, key: string): Annotatio
 };
 
 /** A named property of an object literal, for options a call site writes out inline. */
-export const resolvedProperty = (object: t.ObjectExpression, key: string): PropertyResolution => {
-  let found: t.ObjectMethod | t.ObjectProperty | undefined;
-  let opaqueAfter: t.ObjectExpression['properties'][number] | undefined;
+export const resolvedProperty = (object: E.ObjectExpression, key: string): PropertyResolution => {
+  let found: E.ObjectProperty | undefined;
+  let opaqueAfter: E.ObjectExpression['properties'][number] | undefined;
   object.properties.forEach((property) => {
-    const isMember = t.isObjectProperty(property) || t.isObjectMethod(property);
-    if (isMember && keyNameOf(property) === key) {
-      found = property;
-      opaqueAfter = undefined;
+    if (property.type === 'SpreadElement') {
+      opaqueAfter = property;
       return;
     }
-    if (t.isSpreadElement(property) || (isMember && keyNameOf(property) === undefined)) {
+    const name = keyNameOf(property);
+    if (name === key) {
+      found = property;
+      opaqueAfter = undefined;
+    } else if (name === undefined) {
       opaqueAfter = property;
     }
   });
@@ -448,8 +459,8 @@ export const resolvedProperty = (object: t.ObjectExpression, key: string): Prope
   if (opaqueAfter) {
     return { kind: 'unresolvable', node: opaqueAfter };
   }
-  if (t.isObjectMethod(found)) {
-    return found.kind === 'method' && !found.generator
+  if (found.method || found.kind !== 'init') {
+    return isPlainMethod(found)
       ? { kind: 'value', node: found }
       : { kind: 'unresolvable', node: found };
   }
@@ -457,44 +468,29 @@ export const resolvedProperty = (object: t.ObjectExpression, key: string): Prope
 };
 
 // A string-literal computed key has the exact runtime semantics of a plain string key.
-export const keyNameOf = (property: t.ObjectMethod | t.ObjectProperty): string | undefined => {
-  if (t.isIdentifier(property.key) && !property.computed) {
+export const keyNameOf = (property: E.ObjectProperty | E.BindingProperty): string | undefined => {
+  if (property.key.type === 'Identifier' && !property.computed) {
     return property.key.name;
   }
-  return t.isStringLiteral(property.key) ? property.key.value : undefined;
-};
-
-/**
- * The story's own config object literal: the export's initializer, the statement a re-export
- * resolved to, or the argument of a `meta.story(...)` factory call.
- */
-export const storyConfigObject = (
-  shape: Pick<StoryShape, 'csf' | 'exportName'>
-): t.ObjectExpression | undefined => {
-  const declared = shape.csf._storyExports[shape.exportName];
-  const candidates = [
-    t.isVariableDeclarator(declared) ? declared.init : declared,
-    shape.csf._storyStatements[shape.exportName],
-  ];
-  for (const candidate of candidates) {
-    const unwrapped = candidate ? unwrapExpression(candidate) : undefined;
-    if (unwrapped && t.isObjectExpression(unwrapped)) {
-      return unwrapped;
-    }
-    if (unwrapped && isCsfFactoryCall(unwrapped)) {
-      const argument = unwrapped.arguments[0];
-      const config = argument && unwrapExpression(argument);
-      if (config && t.isObjectExpression(config)) {
-        return config;
-      }
-    }
-  }
-  return undefined;
+  return isStringLiteral(property.key) ? property.key.value : undefined;
 };
 
-export const metaConfigObject = (csf: CsfFile): t.ObjectExpression | undefined => {
-  const node = csf._metaNode;
-  return node && t.isObjectExpression(node) ? node : undefined;
+const isPlainMethod = (node: Node | undefined): node is E.ObjectProperty & { value: E.Function } =>
+  node?.type === 'Property' &&
+  node.method &&
+  node.kind === 'init' &&
+  node.value.type === 'FunctionExpression' &&
+  !node.value.generator;
+
+const functionOf = (node: Node | undefined): E.Function | E.ArrowFunctionExpression | undefined => {
+  if (isPlainMethod(node)) {
+    return node.value;
+  }
+  return node?.type === 'ArrowFunctionExpression' ||
+    node?.type === 'FunctionExpression' ||
+    node?.type === 'FunctionDeclaration'
+    ? node
+    : undefined;
 };
 
 /**
@@ -503,44 +499,43 @@ export const metaConfigObject = (csf: CsfFile): t.ObjectExpression | undefined =
  * Only a single-exit body is readable: any statement that could return earlier (a conditional, a
  * loop) means the markup depends on which branch the story takes at runtime.
  */
-const returnedObject = (fn: t.Node | undefined): t.ObjectExpression | undefined => {
-  const isPlainMethod = t.isObjectMethod(fn) && fn.kind === 'method' && !fn.generator;
-  if (
-    !t.isArrowFunctionExpression(fn) &&
-    !t.isFunctionExpression(fn) &&
-    !t.isFunctionDeclaration(fn) &&
-    !isPlainMethod
-  ) {
+const returnedObject = (node: Node | undefined): E.ObjectExpression | undefined => {
+  const fn = functionOf(node);
+  if (!fn?.body) {
     return undefined;
   }
 
-  if (!t.isBlockStatement(fn.body)) {
+  if (fn.body.type !== 'BlockStatement') {
     const unwrapped = unwrapExpression(fn.body);
-    return t.isObjectExpression(unwrapped) ? unwrapped : undefined;
+    return unwrapped.type === 'ObjectExpression' ? unwrapped : undefined;
   }
 
   const statements = fn.body.body;
   const last = statements.at(-1);
-  if (!t.isReturnStatement(last) || !last.argument) {
+  if (last?.type !== 'ReturnStatement' || !last.argument) {
     return undefined;
   }
   const singleExit = statements
     .slice(0, -1)
-    .every((statement) => t.isVariableDeclaration(statement) || t.isExpressionStatement(statement));
+    .every(
+      (statement) =>
+        statement.type === 'VariableDeclaration' || statement.type === 'ExpressionStatement'
+    );
   if (!singleExit) {
     return undefined;
   }
   const unwrapped = unwrapExpression(last.argument);
-  return t.isObjectExpression(unwrapped) ? unwrapped : undefined;
+  return unwrapped.type === 'ObjectExpression' ? unwrapped : undefined;
 };
 
 /** The CSF2 function story and the object it returns, for `export const S = () => ({ template })`. */
-const csf2Shape = (shape: StoryShape): { fn: t.Node; returned: t.ObjectExpression } | undefined => {
+const csf2Shape = (shape: StoryShape): { fn: Node; returned: E.ObjectExpression } | undefined => {
   const declared = shape.csf._storyExports[shape.exportName];
-  const candidates: (t.Node | undefined | null)[] = t.isVariableDeclarator(declared)
-    ? [declared.init]
-    : // `export { S }` records no declarator; the statement is the initializer it resolved to.
-      [declared, shape.csf._storyStatements[shape.exportName]];
+  const candidates: (Node | undefined | null)[] =
+    declared?.type === 'VariableDeclarator'
+      ? [declared.init]
+      : // `export { S }` records no declarator; the statement is the initializer it resolved to.
+        [declared, shape.csf._storyStatements[shape.exportName]];
 
   for (const candidate of candidates) {
     let fn = candidate ? unwrapExpression(candidate) : undefined;
@@ -557,38 +552,35 @@ const csf2Shape = (shape: StoryShape): { fn: t.Node; returned: t.ObjectExpressio
 };
 
 /** What a render function binds, as far as it can be enumerated statically. */
-const functionScope = (fn: t.Node | undefined): FunctionScope => {
-  if (
-    !t.isArrowFunctionExpression(fn) &&
-    !t.isFunctionExpression(fn) &&
-    !t.isFunctionDeclaration(fn) &&
-    !t.isObjectMethod(fn)
-  ) {
+const functionScope = (node: Node | undefined): FunctionScope => {
+  const fn = functionOf(node?.type === 'Property' ? node.value : node);
+  if (!fn) {
     return NO_SCOPE;
   }
 
   const [firstParam] = fn.params;
-  const argsPattern = t.isAssignmentPattern(firstParam) ? firstParam.left : firstParam;
+  const argsPattern = firstParam?.type === 'AssignmentPattern' ? firstParam.left : firstParam;
   const parameterNames = new Set<string>();
   fn.params.forEach((param) => collectPatternNames(param, parameterNames));
   const argBindings = new Map<string, string>();
-  if (t.isObjectPattern(argsPattern)) {
+  if (argsPattern?.type === 'ObjectPattern') {
     for (const property of argsPattern.properties) {
-      if (!t.isObjectProperty(property) || property.computed) {
+      if (property.type !== 'Property' || property.computed) {
         continue;
       }
       const argName = keyNameOf(property);
-      const local = t.isAssignmentPattern(property.value) ? property.value.left : property.value;
-      if (argName !== undefined && t.isIdentifier(local)) {
+      const local =
+        property.value.type === 'AssignmentPattern' ? property.value.left : property.value;
+      if (argName !== undefined && local.type === 'Identifier') {
         argBindings.set(local.name, argName);
       }
     }
   }
 
   const bodyDeclared = new Set<string>();
-  if (t.isBlockStatement(fn.body)) {
+  if (fn.body?.type === 'BlockStatement') {
     for (const statement of fn.body.body) {
-      if (t.isVariableDeclaration(statement)) {
+      if (statement.type === 'VariableDeclaration') {
         for (const declarator of statement.declarations) {
           collectPatternNames(declarator.id, bodyDeclared);
         }
@@ -597,16 +589,16 @@ const functionScope = (fn: t.Node | undefined): FunctionScope => {
   }
 
   const argsExpansions = new Map<string, readonly string[]>();
-  if (t.isIdentifier(argsPattern)) {
+  if (argsPattern?.type === 'Identifier') {
     argsExpansions.set(argsPattern.name, []);
-  } else if (t.isObjectPattern(argsPattern)) {
+  } else if (argsPattern?.type === 'ObjectPattern') {
     const destructured: string[] = [];
     let rest: string | undefined;
     let knownKeys = true;
     for (const property of argsPattern.properties) {
-      if (t.isRestElement(property) && t.isIdentifier(property.argument)) {
+      if (property.type === 'RestElement' && property.argument.type === 'Identifier') {
         rest = property.argument.name;
-      } else if (t.isObjectProperty(property)) {
+      } else if (property.type === 'Property') {
         const key = property.computed ? undefined : keyNameOf(property);
         if (key !== undefined) {
           destructured.push(key);
@@ -623,18 +615,21 @@ const functionScope = (fn: t.Node | undefined): FunctionScope => {
   return { argBindings, parameterNames, bodyDeclared, argsExpansions };
 };
 
-const collectPatternNames = (pattern: t.Node, into: Set<string>): void => {
-  if (t.isIdentifier(pattern)) {
+const collectPatternNames = (pattern: Node, into: Set<string>): void => {
+  if (pattern.type === 'Identifier') {
     into.add(pattern.name);
-  } else if (t.isObjectPattern(pattern)) {
+  } else if (pattern.type === 'ObjectPattern') {
     for (const property of pattern.properties) {
-      collectPatternNames(t.isRestElement(property) ? property.argument : property.value, into);
+      collectPatternNames(
+        property.type === 'RestElement' ? property.argument : property.value,
+        into
+      );
     }
-  } else if (t.isArrayPattern(pattern)) {
+  } else if (pattern.type === 'ArrayPattern') {
     pattern.elements.forEach((element) => element && collectPatternNames(element, into));
-  } else if (t.isAssignmentPattern(pattern)) {
+  } else if (pattern.type === 'AssignmentPattern') {
     collectPatternNames(pattern.left, into);
-  } else if (t.isRestElement(pattern)) {
+  } else if (pattern.type === 'RestElement') {
     collectPatternNames(pattern.argument, into);
   }
 };
@@ -646,19 +641,18 @@ const collectPatternNames = (pattern: t.Node, into: Set<string>): void => {
  * the name would replace it with a fabricated element. An imported name has no initializer here,
  * so it stays an identifier and no snippet is generated.
  */
-const declaredValue = (shape: StoryShape, node: t.Node | undefined): t.Node | undefined => {
-  if (!t.isIdentifier(node)) {
+const declaredValue = (shape: StoryShape, node: Node | undefined): Node | undefined => {
+  if (node?.type !== 'Identifier') {
     return node;
   }
-  const program: NodePath<t.Program> = shape.csf._file.path;
-  const binding = program.scope.getBinding(node.name);
+  const binding = shape.csf._editor.scopes.program.bindings.get(node.name);
   // A reassigned binding's value at render time is not its initializer.
   if (!binding?.constant) {
     return node;
   }
-  const declaration = binding.path.node;
-  if (t.isVariableDeclarator(declaration)) {
+  const declaration = binding.node;
+  if (declaration.type === 'VariableDeclarator') {
     return declaration.init ?? node;
   }
-  return t.isFunctionDeclaration(declaration) ? declaration : node;
+  return declaration.type === 'FunctionDeclaration' ? declaration : node;
 };
diff --git a/code/frameworks/angular-vite/src/docgen/story-docs-ng-modules.ts b/code/frameworks/angular-vite/src/docgen/story-docs-ng-modules.ts
index 28ea8b4b16b7..4e12dfc3a8d2 100644
--- a/code/frameworks/angular-vite/src/docgen/story-docs-ng-modules.ts
+++ b/code/frameworks/angular-vite/src/docgen/story-docs-ng-modules.ts
@@ -1,5 +1,4 @@
-import { types as t } from 'storybook/internal/babel';
-import type { collectImportBindings } from 'storybook/internal/csf-tools';
+import type { ESTreeNode as Node, collectImportBindings } from 'storybook/internal/csf-tools';
 import {
   buildImportStatements,
   keyOf,
@@ -23,43 +22,49 @@ export interface StoryNgModules {
 // The decorator is matched by its conventional local name: resolving the import binding would only
 // rule out a foreign function that happens to be called `moduleMetadata`, which does not arise.
 export const ngModulesFromDecorators = (
-  decorators: t.Node | undefined,
+  decorators: Node | undefined,
   componentName: string | undefined
 ): StoryNgModules => {
   const result: StoryNgModules = { names: [], declaresComponent: false };
   const list = decorators === undefined ? undefined : unwrapExpression(decorators);
-  if (!list || !t.isArrayExpression(list)) {
+  if (list?.type !== 'ArrayExpression') {
     return result;
   }
   for (const element of list.elements) {
-    if (!element || t.isSpreadElement(element)) {
+    if (!element || element.type === 'SpreadElement') {
       continue;
     }
     const call = unwrapExpression(element);
-    if (!t.isCallExpression(call) || !t.isIdentifier(call.callee, { name: 'moduleMetadata' })) {
+    if (
+      call.type !== 'CallExpression' ||
+      call.callee.type !== 'Identifier' ||
+      call.callee.name !== 'moduleMetadata'
+    ) {
       continue;
     }
     const [metadataArg] = call.arguments;
     const metadata =
-      metadataArg && t.isExpression(metadataArg) ? unwrapExpression(metadataArg) : undefined;
-    if (!metadata || !t.isObjectExpression(metadata)) {
+      metadataArg && metadataArg.type !== 'SpreadElement'
+        ? unwrapExpression(metadataArg)
+        : undefined;
+    if (metadata?.type !== 'ObjectExpression') {
       continue;
     }
     for (const property of metadata.properties) {
-      if (!t.isObjectProperty(property) || !t.isExpression(property.value)) {
+      if (property.type !== 'Property' || property.method || property.kind !== 'init') {
         continue;
       }
       const key = keyOf(property);
       const value = unwrapExpression(property.value);
-      if ((key !== 'imports' && key !== 'declarations') || !t.isArrayExpression(value)) {
+      if ((key !== 'imports' && key !== 'declarations') || value.type !== 'ArrayExpression') {
         continue;
       }
       for (const item of value.elements) {
-        if (!item || t.isSpreadElement(item)) {
+        if (!item || item.type === 'SpreadElement') {
           continue;
         }
         const entry = unwrapExpression(item);
-        if (!t.isIdentifier(entry)) {
+        if (entry.type !== 'Identifier') {
           continue;
         }
         if (key === 'imports') {
@@ -78,7 +83,7 @@ export const ngModulesFromDecorators = (
 // A story that declares the component itself wires it without a module the snippet could name, so
 // the builder's warning path stays the honest output.
 export const storyNgModules = (
-  storyDecorators: t.Node | undefined,
+  storyDecorators: Node | undefined,
   { metaNgModules, componentName, importBindings }: StoryNgModulesContext
 ): HostComponentSnippetInput['ngModules'] => {
   const story = ngModulesFromDecorators(storyDecorators, componentName);
diff --git a/code/frameworks/angular-vite/src/preset.ts b/code/frameworks/angular-vite/src/preset.ts
index b078760e064a..82ce07a1c8f2 100644
--- a/code/frameworks/angular-vite/src/preset.ts
+++ b/code/frameworks/angular-vite/src/preset.ts
@@ -1,6 +1,6 @@
 import { findConfigFile } from 'storybook/internal/common';
 import {
-  babelParser,
+  parseModuleAst,
   extractMockCalls,
   findMockRedirect,
   getAutomockCode,
@@ -555,7 +555,7 @@ function angularViteRedirectReapplyPlugin(options?: StandaloneOptions): Plugin {
       try {
         const calls = extractMockCalls(
           { previewConfigPath, configDir: options.configDir },
-          babelParser,
+          parseModuleAst,
           (viteConfig as any).root ?? process.cwd(),
           findMockRedirect
         );
@@ -608,7 +608,7 @@ function angularViteRedirectReapplyPlugin(options?: StandaloneOptions): Plugin {
           return null;
         }
         try {
-          const automocked = getAutomockCode(code, a.spy, babelParser as any);
+          const automocked = getAutomockCode(code, a.spy, parseModuleAst as any);
           return {
             code: automocked.toString(),
             map: automocked.generateMap(),

From 2f8554b50b6022e5f359569e7b7661b8f4f409d6 Mon Sep 17 00:00:00 2001
From: Easton <easton.shin@marqvision.com>
Date: Tue, 13 Oct 2026 11:52:17 +0900
Subject: [PATCH 052/326] test(docgen-harness): run the harness on the
 ESTree-based docgen

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../button-shapes/server-snippet-HoistedArgs.snapshot         | 4 +---
 .../button-shapes/server-snippet-MultiExitRender.snapshot     | 2 +-
 .../args-formatting/story-docs.payload.snapshot               | 2 +-
 ...tories-renderers-vue3-vue3-vite-default-ts-decorators.json | 2 +-
 ...ies-renderers-vue3-vue3-vite-default-ts-mount-in-play.json | 2 +-
 .../fast-attributes/server-snippet-DomNode.snapshot           | 2 +-
 .../fast-attributes/story-docs.payload.snapshot               | 2 +-
 .../lit-basic-attributes/server-snippet-DomNode.snapshot      | 2 +-
 .../lit-basic-attributes/story-docs.payload.snapshot          | 2 +-
 .../lit-events/server-snippet-DomNode.snapshot                | 2 +-
 .../__testfixtures__/lit-events/story-docs.payload.snapshot   | 2 +-
 .../lit-inheritance-mixin/server-snippet-DomNode.snapshot     | 2 +-
 .../lit-inheritance-mixin/story-docs.payload.snapshot         | 2 +-
 .../lit-property-only/server-snippet-DomNode.snapshot         | 2 +-
 .../lit-property-only/story-docs.payload.snapshot             | 2 +-
 .../lit-slots-and-css/server-snippet-DomNode.snapshot         | 2 +-
 .../lit-slots-and-css/story-docs.payload.snapshot             | 2 +-
 .../lit-toolkit-shapes/server-snippet-DomNode.snapshot        | 2 +-
 .../lit-toolkit-shapes/story-docs.payload.snapshot            | 2 +-
 .../lit-union-jsdoc/server-snippet-DomNode.snapshot           | 2 +-
 .../lit-union-jsdoc/story-docs.payload.snapshot               | 2 +-
 .../stencil-props/server-snippet-DomNode.snapshot             | 2 +-
 .../stencil-props/story-docs.payload.snapshot                 | 2 +-
 .../vanilla-basic/server-snippet-DomNode.snapshot             | 2 +-
 .../vanilla-basic/story-docs.payload.snapshot                 | 2 +-
 .../vanilla-multi-definition/server-snippet-DomNode.snapshot  | 2 +-
 .../vanilla-multi-definition/story-docs.payload.snapshot      | 2 +-
 27 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/code/lib/docgen-harness/src/angular/__storyshapes__/button-shapes/server-snippet-HoistedArgs.snapshot b/code/lib/docgen-harness/src/angular/__storyshapes__/button-shapes/server-snippet-HoistedArgs.snapshot
index 4cac6811c124..717973cf0e3c 100644
--- a/code/lib/docgen-harness/src/angular/__storyshapes__/button-shapes/server-snippet-HoistedArgs.snapshot
+++ b/code/lib/docgen-harness/src/angular/__storyshapes__/button-shapes/server-snippet-HoistedArgs.snapshot
@@ -14,8 +14,6 @@ import { ShapeButtonComponent } from './shape-button.component.ts';
 })
 export class DemoComponent {
   loadingError = new Error('Failed to load cards.');
-  items = Array.from({
-    length: 3,
-  }, (_, index) => index);
+  items = Array.from({ length: 3 }, (_, index) => index);
   clicked(event: unknown) {}
 }
\ No newline at end of file
diff --git a/code/lib/docgen-harness/src/angular/__storyshapes__/button-shapes/server-snippet-MultiExitRender.snapshot b/code/lib/docgen-harness/src/angular/__storyshapes__/button-shapes/server-snippet-MultiExitRender.snapshot
index 5b3cf54f4d79..edf41ef11e2f 100644
--- a/code/lib/docgen-harness/src/angular/__storyshapes__/button-shapes/server-snippet-MultiExitRender.snapshot
+++ b/code/lib/docgen-harness/src/angular/__storyshapes__/button-shapes/server-snippet-MultiExitRender.snapshot
@@ -10,4 +10,4 @@ export class DemoComponent {
   clicked(event: unknown) {}
 }
 
-warning: Incomplete snippet: `render: (args: { count?: number; }) => { if (args.count) { return { template: '<sb-shape-button first></sb-shape-button>' }; } return { template: '<sb-shape-button second></sb-shape-button>' }; }` could not be resolved statically.
\ No newline at end of file
+warning: Incomplete snippet: `render: (args: { count?: number }) => { if (args.count) { return { template: '<sb-shape-button first></sb-shape-button>' }; } return { template: '<sb-shape-button second></sb-shape-button>' }; }` could not be resolved statically.
\ No newline at end of file
diff --git a/code/lib/docgen-harness/src/angular/story-docs/__testfixtures__/args-formatting/story-docs.payload.snapshot b/code/lib/docgen-harness/src/angular/story-docs/__testfixtures__/args-formatting/story-docs.payload.snapshot
index 18fec4e59c2c..e754e593c19a 100644
--- a/code/lib/docgen-harness/src/angular/story-docs/__testfixtures__/args-formatting/story-docs.payload.snapshot
+++ b/code/lib/docgen-harness/src/angular/story-docs/__testfixtures__/args-formatting/story-docs.payload.snapshot
@@ -24,7 +24,7 @@ import { ArgsFormattingComponent } from './args-formatting.component.ts';
     />`,
 })
 export class DemoComponent {
-  formatter = (value) => value.replace('"', '\'');
+  formatter = (value) => value.replace('"', "'");
 }",
     },
   },
diff --git a/code/lib/docgen-harness/src/sandbox-baselines/__baselines__/vue3-vite-default-ts/stories-renderers-vue3-vue3-vite-default-ts-decorators.json b/code/lib/docgen-harness/src/sandbox-baselines/__baselines__/vue3-vite-default-ts/stories-renderers-vue3-vue3-vite-default-ts-decorators.json
index 736366995e7c..7cc1fac549fa 100644
--- a/code/lib/docgen-harness/src/sandbox-baselines/__baselines__/vue3-vite-default-ts/stories-renderers-vue3-vue3-vite-default-ts-decorators.json
+++ b/code/lib/docgen-harness/src/sandbox-baselines/__baselines__/vue3-vite-default-ts/stories-renderers-vue3-vue3-vite-default-ts-decorators.json
@@ -1,6 +1,6 @@
 {
   "error": {
-    "message": "No component file found for the component declared in meta.component.\n  10 | const { Button, Pre } = (globalThis as any).__TEMPLATE_COMPONENTS__;\n  11 |\n> 12 | const meta = {\n     | ^\n  13 |   component: Button,\n  14 | } satisfies Meta<typeof Button>;\n  15 |\n\n./src/stories/renderers/vue3_vue3-vite-default-ts/decorators.stories.ts:\nimport type { DecoratorFunction } from 'storybook/internal/types';\n\nimport { global as globalThis } from '@storybook/global';\nimport type { Meta, StoryObj, VueRenderer } from '@storybook/vue3';\n\nimport { useArgs } from 'storybook/preview-api';\nimport { h } from 'vue';\nimport { computed } from 'vue';\n\nconst { Button, Pre } = (globalThis as any).__TEMPLATE_COMPONENTS__;\n\nconst meta = {\n  component: Button,\n} satisfies Meta<typeof Button>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst ComponentTemplateWrapper = () => ({\n  components: {\n    Pre,\n  },\n  template: `\n    <Pre text=\"decorator\" />\n    <story v-bind=\"$attrs\"/>\n  `,\n});\n\nconst SimpleTemplateWrapper = () => ({\n  template: `\n    <div style=\"border: 5px solid red;\">\n      <story/>\n    </div>\n    `,\n});\n\nconst VueWrapperWrapper: DecoratorFunction<VueRenderer> = (storyFn, context) => {\n  // Call the `storyFn` to receive a component that Vue can render\n  const story = storyFn();\n  // Vue 3 \"Functional\" component as decorator\n  return () => {\n    return h('div', { style: 'border: 5px solid blue' }, h(story, context.args));\n  };\n};\n\nconst DynamicWrapperWrapper: DecoratorFunction<VueRenderer> = (storyFn, { args }) => ({\n  template: `<div :style=\"{ borderWidth: level, borderColor: 'green', borderStyle: 'solid' }\"><story /></div>`,\n  computed: { level: () => `${args.level}px` },\n});\n\nconst getCaptionForLocale = (locale: string) => {\n  switch (locale) {\n    case 'es':\n      return 'Hola!';\n    case 'kr':\n      return '안녕하세요!';\n    case 'zh':\n      return '你好!';\n    case 'en':\n      return 'Hello!';\n    default:\n      return undefined;\n  }\n};\n\nconst updateArgsDecorator: DecoratorFunction<VueRenderer> = (story, { args }) => {\n  const [, updateArgs] = useArgs();\n  return {\n    components: { story },\n    setup() {\n      return {\n        args,\n        updateArgs,\n      };\n    },\n    template: `\n      <div>\n        <button @click=\"() => updateArgs({ label: Number(args.label) + 1 })\">Add 1</button>\n        <hr />\n        <story />\n      </div>\n    `,\n  };\n};\n\nconst localeDecorator: DecoratorFunction<VueRenderer> = (story, { globals }) => {\n  return {\n    components: { story },\n    setup() {\n      const ctxGreeting = computed(() => getCaptionForLocale(globals?.locale) || 'Hello!');\n\n      return {\n        ctxGreeting,\n        globals,\n      };\n    },\n    template: `\n      <div>\n        <p>Greeting: {{ctxGreeting}}</p>\n        <p>Locale: {{globals?.locale}}</p>\n        <story />\n      </div>\n    `,\n  };\n};\n\nexport const ComponentTemplate: Story = {\n  args: { label: 'With component' },\n  decorators: [ComponentTemplateWrapper],\n};\n\nexport const SimpleTemplate: Story = {\n  args: { label: 'With border' },\n  decorators: [SimpleTemplateWrapper],\n};\n\nexport const VueWrapper: Story = {\n  args: { label: 'With Vue wrapper' },\n  decorators: [VueWrapperWrapper],\n};\n\nexport const DynamicWrapper: Story = {\n  args: { label: 'With dynamic wrapper', primary: true },\n  argTypes: {\n    // Number type is detected, but we still want to constrain the range from 1-6\n    level: { control: { type: 'range', min: 1, max: 6 } },\n  },\n  decorators: [DynamicWrapperWrapper],\n};\n\nexport const MultipleWrappers = {\n  args: { label: 'With multiple wrappers' },\n  argTypes: {\n    // Number type is detected, but we still want to constrain the range from 1-6\n    level: { control: { type: 'range', min: 1, max: 6 } },\n  },\n  decorators: [\n    ComponentTemplateWrapper,\n    SimpleTemplateWrapper,\n    VueWrapperWrapper,\n    DynamicWrapperWrapper,\n  ],\n};\n\nexport const UpdateArgs = {\n  args: { label: '0' },\n  decorators: [updateArgsDecorator],\n};\n\nexport const ReactiveGlobalDecorator = {\n  args: { label: 'With reactive global decorator' },\n  decorators: [localeDecorator],\n};\n",
+    "message": "No component file found for the component declared in meta.component. (12:0)\n\n./src/stories/renderers/vue3_vue3-vite-default-ts/decorators.stories.ts:\nimport type { DecoratorFunction } from 'storybook/internal/types';\n\nimport { global as globalThis } from '@storybook/global';\nimport type { Meta, StoryObj, VueRenderer } from '@storybook/vue3';\n\nimport { useArgs } from 'storybook/preview-api';\nimport { h } from 'vue';\nimport { computed } from 'vue';\n\nconst { Button, Pre } = (globalThis as any).__TEMPLATE_COMPONENTS__;\n\nconst meta = {\n  component: Button,\n} satisfies Meta<typeof Button>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst ComponentTemplateWrapper = () => ({\n  components: {\n    Pre,\n  },\n  template: `\n    <Pre text=\"decorator\" />\n    <story v-bind=\"$attrs\"/>\n  `,\n});\n\nconst SimpleTemplateWrapper = () => ({\n  template: `\n    <div style=\"border: 5px solid red;\">\n      <story/>\n    </div>\n    `,\n});\n\nconst VueWrapperWrapper: DecoratorFunction<VueRenderer> = (storyFn, context) => {\n  // Call the `storyFn` to receive a component that Vue can render\n  const story = storyFn();\n  // Vue 3 \"Functional\" component as decorator\n  return () => {\n    return h('div', { style: 'border: 5px solid blue' }, h(story, context.args));\n  };\n};\n\nconst DynamicWrapperWrapper: DecoratorFunction<VueRenderer> = (storyFn, { args }) => ({\n  template: `<div :style=\"{ borderWidth: level, borderColor: 'green', borderStyle: 'solid' }\"><story /></div>`,\n  computed: { level: () => `${args.level}px` },\n});\n\nconst getCaptionForLocale = (locale: string) => {\n  switch (locale) {\n    case 'es':\n      return 'Hola!';\n    case 'kr':\n      return '안녕하세요!';\n    case 'zh':\n      return '你好!';\n    case 'en':\n      return 'Hello!';\n    default:\n      return undefined;\n  }\n};\n\nconst updateArgsDecorator: DecoratorFunction<VueRenderer> = (story, { args }) => {\n  const [, updateArgs] = useArgs();\n  return {\n    components: { story },\n    setup() {\n      return {\n        args,\n        updateArgs,\n      };\n    },\n    template: `\n      <div>\n        <button @click=\"() => updateArgs({ label: Number(args.label) + 1 })\">Add 1</button>\n        <hr />\n        <story />\n      </div>\n    `,\n  };\n};\n\nconst localeDecorator: DecoratorFunction<VueRenderer> = (story, { globals }) => {\n  return {\n    components: { story },\n    setup() {\n      const ctxGreeting = computed(() => getCaptionForLocale(globals?.locale) || 'Hello!');\n\n      return {\n        ctxGreeting,\n        globals,\n      };\n    },\n    template: `\n      <div>\n        <p>Greeting: {{ctxGreeting}}</p>\n        <p>Locale: {{globals?.locale}}</p>\n        <story />\n      </div>\n    `,\n  };\n};\n\nexport const ComponentTemplate: Story = {\n  args: { label: 'With component' },\n  decorators: [ComponentTemplateWrapper],\n};\n\nexport const SimpleTemplate: Story = {\n  args: { label: 'With border' },\n  decorators: [SimpleTemplateWrapper],\n};\n\nexport const VueWrapper: Story = {\n  args: { label: 'With Vue wrapper' },\n  decorators: [VueWrapperWrapper],\n};\n\nexport const DynamicWrapper: Story = {\n  args: { label: 'With dynamic wrapper', primary: true },\n  argTypes: {\n    // Number type is detected, but we still want to constrain the range from 1-6\n    level: { control: { type: 'range', min: 1, max: 6 } },\n  },\n  decorators: [DynamicWrapperWrapper],\n};\n\nexport const MultipleWrappers = {\n  args: { label: 'With multiple wrappers' },\n  argTypes: {\n    // Number type is detected, but we still want to constrain the range from 1-6\n    level: { control: { type: 'range', min: 1, max: 6 } },\n  },\n  decorators: [\n    ComponentTemplateWrapper,\n    SimpleTemplateWrapper,\n    VueWrapperWrapper,\n    DynamicWrapperWrapper,\n  ],\n};\n\nexport const UpdateArgs = {\n  args: { label: '0' },\n  decorators: [updateArgsDecorator],\n};\n\nexport const ReactiveGlobalDecorator = {\n  args: { label: 'With reactive global decorator' },\n  decorators: [localeDecorator],\n};\n",
     "name": "No component import found"
   },
   "id": "stories-renderers-vue3-vue3-vite-default-ts-decorators",
diff --git a/code/lib/docgen-harness/src/sandbox-baselines/__baselines__/vue3-vite-default-ts/stories-renderers-vue3-vue3-vite-default-ts-mount-in-play.json b/code/lib/docgen-harness/src/sandbox-baselines/__baselines__/vue3-vite-default-ts/stories-renderers-vue3-vue3-vite-default-ts-mount-in-play.json
index f0598da21000..92c8ee94306f 100644
--- a/code/lib/docgen-harness/src/sandbox-baselines/__baselines__/vue3-vite-default-ts/stories-renderers-vue3-vue3-vite-default-ts-mount-in-play.json
+++ b/code/lib/docgen-harness/src/sandbox-baselines/__baselines__/vue3-vite-default-ts/stories-renderers-vue3-vue3-vite-default-ts-mount-in-play.json
@@ -1,6 +1,6 @@
 {
   "error": {
-    "message": "No component file found for the component declared in meta.component.\n   8 | });\n   9 |\n> 10 | export default {\n     | ^\n  11 |   component: Button,\n  12 | };\n  13 |\n\n./src/stories/renderers/vue3_vue3-vite-default-ts/mount-in-play.stories.ts:\nimport type { StoryObj } from '@storybook/vue3';\n\nimport { defineComponent } from 'vue';\n\nconst Button = defineComponent({\n  template: '<button :disabled=\"disabled\">{{label}}</button>',\n  props: ['disabled', 'label'],\n});\n\nexport default {\n  component: Button,\n};\n\nexport const Basic: StoryObj<typeof Button> = {\n  args: {\n    disabled: true,\n  },\n  async play({ mount, args }) {\n    await mount(Button, { props: { ...args, label: 'set in play' } });\n  },\n};\n",
+    "message": "No component file found for the component declared in meta.component. (10:0)\n\n./src/stories/renderers/vue3_vue3-vite-default-ts/mount-in-play.stories.ts:\nimport type { StoryObj } from '@storybook/vue3';\n\nimport { defineComponent } from 'vue';\n\nconst Button = defineComponent({\n  template: '<button :disabled=\"disabled\">{{label}}</button>',\n  props: ['disabled', 'label'],\n});\n\nexport default {\n  component: Button,\n};\n\nexport const Basic: StoryObj<typeof Button> = {\n  args: {\n    disabled: true,\n  },\n  async play({ mount, args }) {\n    await mount(Button, { props: { ...args, label: 'set in play' } });\n  },\n};\n",
     "name": "No component import found"
   },
   "id": "stories-renderers-vue3-vue3-vite-default-ts-mount-in-play",
diff --git a/code/lib/docgen-harness/src/web-components/__testfixtures__/fast-attributes/server-snippet-DomNode.snapshot b/code/lib/docgen-harness/src/web-components/__testfixtures__/fast-attributes/server-snippet-DomNode.snapshot
index 580aeb88dac6..8a784dbe5241 100644
--- a/code/lib/docgen-harness/src/web-components/__testfixtures__/fast-attributes/server-snippet-DomNode.snapshot
+++ b/code/lib/docgen-harness/src/web-components/__testfixtures__/fast-attributes/server-snippet-DomNode.snapshot
@@ -1,4 +1,4 @@
 <fast-attributes label="Count" size="large" max-count="5"></fast-attributes>
 
-warning: Incomplete snippet: `args => { const el = document.createElement('fast-attributes'); el.setAttribute('label', String(args.label)); el.setAttribute('size', String(args.size)); if (args.disabled) { el.setAttribute('disabled', ''); } el.setAttribute('max-count', String(args.maxCount)); (el as HTMLElement & { items: string[]; }).items = args.items as string[]; return el; }` could not be resolved statically.
+warning: Incomplete snippet: `(args) => { const el = document.createElement('fast-attributes'); el.setAttribute('label', String(args.label)); el.setAttribute('size', String(args.size)); if (args.disabled) { el.setAttribute('disabled', ''); } el.setAttribute('max-count', String(args.maxCount)); (el as HTMLElement & { items: string[] }).items = args.items as string[]; return el; }` could not be resolved statically.
 Incomplete snippet: properties without an attribute: `items`.
\ No newline at end of file
diff --git a/code/lib/docgen-harness/src/web-components/__testfixtures__/fast-attributes/story-docs.payload.snapshot b/code/lib/docgen-harness/src/web-components/__testfixtures__/fast-attributes/story-docs.payload.snapshot
index 99ccaebc4146..58948fcb3cf7 100644
--- a/code/lib/docgen-harness/src/web-components/__testfixtures__/fast-attributes/story-docs.payload.snapshot
+++ b/code/lib/docgen-harness/src/web-components/__testfixtures__/fast-attributes/story-docs.payload.snapshot
@@ -13,7 +13,7 @@
       "id": "webcomponentsfixtures-fast-attributes--dom-node",
       "name": "Dom Node",
       "snippet": "<fast-attributes label="Count" size="large" max-count="5"></fast-attributes>",
-      "warning": "Incomplete snippet: `args => { const el = document.createElement('fast-attributes'); el.setAttribute('label', String(args.label)); el.setAttribute('size', String(args.size)); if (args.disabled) { el.setAttribute('disabled', ''); } el.setAttribute('max-count', String(args.maxCount)); (el as HTMLElement & { items: string[]; }).items = args.items as string[]; return el; }` could not be resolved statically.
+      "warning": "Incomplete snippet: `(args) => { const el = document.createElement('fast-attributes'); el.setAttribute('label', String(args.label)); el.setAttribute('size', String(args.size)); if (args.disabled) { el.setAttribute('disabled', ''); } el.setAttribute('max-count', String(args.maxCount)); (el as HTMLElement & { items: string[] }).items = args.items as string[]; return el; }` could not be resolved statically.
 Incomplete snippet: properties without an attribute: `items`.",
     },
     "webcomponentsfixtures-fast-attributes--lit-template": {
diff --git a/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-basic-attributes/server-snippet-DomNode.snapshot b/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-basic-attributes/server-snippet-DomNode.snapshot
index d52d0c860e0b..ab873d0357e0 100644
--- a/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-basic-attributes/server-snippet-DomNode.snapshot
+++ b/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-basic-attributes/server-snippet-DomNode.snapshot
@@ -1,3 +1,3 @@
 <lit-basic-attributes label="Open panel" count="7" is-open></lit-basic-attributes>
 
-warning: Incomplete snippet: `args => { const el = document.createElement('lit-basic-attributes'); el.setAttribute('label', String(args.label)); el.setAttribute('count', String(args.count)); if (args.disabled) { el.setAttribute('disabled', ''); } if (args.isOpen) { el.setAttribute('is-open', ''); } return el; }` could not be resolved statically.
\ No newline at end of file
+warning: Incomplete snippet: `(args) => { const el = document.createElement('lit-basic-attributes'); el.setAttribute('label', String(args.label)); el.setAttribute('count', String(args.count)); if (args.disabled) { el.setAttribute('disabled', ''); } if (args.isOpen) { el.setAttribute('is-open', ''); } return el; }` could not be resolved statically.
\ No newline at end of file
diff --git a/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-basic-attributes/story-docs.payload.snapshot b/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-basic-attributes/story-docs.payload.snapshot
index d17e10d99eb0..3bda0cb5992d 100644
--- a/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-basic-attributes/story-docs.payload.snapshot
+++ b/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-basic-attributes/story-docs.payload.snapshot
@@ -12,7 +12,7 @@
       "id": "webcomponentsfixtures-lit-basic-attributes--dom-node",
       "name": "Dom Node",
       "snippet": "<lit-basic-attributes label="Open panel" count="7" is-open></lit-basic-attributes>",
-      "warning": "Incomplete snippet: `args => { const el = document.createElement('lit-basic-attributes'); el.setAttribute('label', String(args.label)); el.setAttribute('count', String(args.count)); if (args.disabled) { el.setAttribute('disabled', ''); } if (args.isOpen) { el.setAttribute('is-open', ''); } return el; }` could not be resolved statically.",
+      "warning": "Incomplete snippet: `(args) => { const el = document.createElement('lit-basic-attributes'); el.setAttribute('label', String(args.label)); el.setAttribute('count', String(args.count)); if (args.disabled) { el.setAttribute('disabled', ''); } if (args.isOpen) { el.setAttribute('is-open', ''); } return el; }` could not be resolved statically.",
     },
     "webcomponentsfixtures-lit-basic-attributes--lit-template": {
       "id": "webcomponentsfixtures-lit-basic-attributes--lit-template",
diff --git a/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-events/server-snippet-DomNode.snapshot b/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-events/server-snippet-DomNode.snapshot
index c9532f57c72a..883d209b228a 100644
--- a/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-events/server-snippet-DomNode.snapshot
+++ b/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-events/server-snippet-DomNode.snapshot
@@ -7,4 +7,4 @@
   }
 </script>
 
-warning: Incomplete snippet: `args => { const el = document.createElement('lit-events'); el.setAttribute('value', String(args.value)); el.addEventListener('my-change', args['my-change-event'] as EventListener); el.addEventListener('my-close', args['my-close-event'] as EventListener); return el; }` could not be resolved statically.
\ No newline at end of file
+warning: Incomplete snippet: `(args) => { const el = document.createElement('lit-events'); el.setAttribute('value', String(args.value)); el.addEventListener('my-change', args['my-change-event'] as EventListener); el.addEventListener('my-close', args['my-close-event'] as EventListener); return el; }` could not be resolved statically.
\ No newline at end of file
diff --git a/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-events/story-docs.payload.snapshot b/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-events/story-docs.payload.snapshot
index 877798a7fa49..458ec2f41631 100644
--- a/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-events/story-docs.payload.snapshot
+++ b/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-events/story-docs.payload.snapshot
@@ -26,7 +26,7 @@
     host.addEventListener('my-close', () => {});
   }
 </script>",
-      "warning": "Incomplete snippet: `args => { const el = document.createElement('lit-events'); el.setAttribute('value', String(args.value)); el.addEventListener('my-change', args['my-change-event'] as EventListener); el.addEventListener('my-close', args['my-close-event'] as EventListener); return el; }` could not be resolved statically.",
+      "warning": "Incomplete snippet: `(args) => { const el = document.createElement('lit-events'); el.setAttribute('value', String(args.value)); el.addEventListener('my-change', args['my-change-event'] as EventListener); el.addEventListener('my-close', args['my-close-event'] as EventListener); return el; }` could not be resolved statically.",
     },
     "webcomponentsfixtures-lit-events--lit-template": {
       "id": "webcomponentsfixtures-lit-events--lit-template",
diff --git a/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-inheritance-mixin/server-snippet-DomNode.snapshot b/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-inheritance-mixin/server-snippet-DomNode.snapshot
index 7493804adbf3..734b5c00bbcc 100644
--- a/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-inheritance-mixin/server-snippet-DomNode.snapshot
+++ b/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-inheritance-mixin/server-snippet-DomNode.snapshot
@@ -1,3 +1,3 @@
 <lit-inheritance-mixin base-label="Inherited" mixed-active count="5"></lit-inheritance-mixin>
 
-warning: Incomplete snippet: `args => { const el = document.createElement('lit-inheritance-mixin'); el.setAttribute('base-label', String(args.baseLabel)); if (args.mixedActive) { el.setAttribute('mixed-active', ''); } el.setAttribute('count', String(args.count)); return el; }` could not be resolved statically.
\ No newline at end of file
+warning: Incomplete snippet: `(args) => { const el = document.createElement('lit-inheritance-mixin'); el.setAttribute('base-label', String(args.baseLabel)); if (args.mixedActive) { el.setAttribute('mixed-active', ''); } el.setAttribute('count', String(args.count)); return el; }` could not be resolved statically.
\ No newline at end of file
diff --git a/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-inheritance-mixin/story-docs.payload.snapshot b/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-inheritance-mixin/story-docs.payload.snapshot
index b2f3e53de7aa..f9d761814c74 100644
--- a/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-inheritance-mixin/story-docs.payload.snapshot
+++ b/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-inheritance-mixin/story-docs.payload.snapshot
@@ -12,7 +12,7 @@
       "id": "webcomponentsfixtures-lit-inheritance-mixin--dom-node",
       "name": "Dom Node",
       "snippet": "<lit-inheritance-mixin base-label="Inherited" mixed-active count="5"></lit-inheritance-mixin>",
-      "warning": "Incomplete snippet: `args => { const el = document.createElement('lit-inheritance-mixin'); el.setAttribute('base-label', String(args.baseLabel)); if (args.mixedActive) { el.setAttribute('mixed-active', ''); } el.setAttribute('count', String(args.count)); return el; }` could not be resolved statically.",
+      "warning": "Incomplete snippet: `(args) => { const el = document.createElement('lit-inheritance-mixin'); el.setAttribute('base-label', String(args.baseLabel)); if (args.mixedActive) { el.setAttribute('mixed-active', ''); } el.setAttribute('count', String(args.count)); return el; }` could not be resolved statically.",
     },
     "webcomponentsfixtures-lit-inheritance-mixin--lit-template": {
       "id": "webcomponentsfixtures-lit-inheritance-mixin--lit-template",
diff --git a/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-property-only/server-snippet-DomNode.snapshot b/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-property-only/server-snippet-DomNode.snapshot
index 3e6b4118e76a..a19b50d7ed84 100644
--- a/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-property-only/server-snippet-DomNode.snapshot
+++ b/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-property-only/server-snippet-DomNode.snapshot
@@ -1,4 +1,4 @@
 <lit-property-only label="Configured"></lit-property-only>
 
-warning: Incomplete snippet: `args => { const el = document.createElement('lit-property-only') as HTMLElement & { config?: unknown; items?: unknown; }; el.setAttribute('label', String(args.label)); el.items = args.items; el.config = args.config; return el; }` could not be resolved statically.
+warning: Incomplete snippet: `(args) => { const el = document.createElement('lit-property-only') as HTMLElement & { config?: unknown; items?: unknown; }; el.setAttribute('label', String(args.label)); el.items = args.items; el.config = args.config; return el; }` could not be resolved statically.
 Incomplete snippet: properties without an attribute: `items`, `config`.
\ No newline at end of file
diff --git a/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-property-only/story-docs.payload.snapshot b/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-property-only/story-docs.payload.snapshot
index 9e95c9af2957..571b705326f3 100644
--- a/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-property-only/story-docs.payload.snapshot
+++ b/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-property-only/story-docs.payload.snapshot
@@ -13,7 +13,7 @@
       "id": "webcomponentsfixtures-lit-property-only--dom-node",
       "name": "Dom Node",
       "snippet": "<lit-property-only label="Configured"></lit-property-only>",
-      "warning": "Incomplete snippet: `args => { const el = document.createElement('lit-property-only') as HTMLElement & { config?: unknown; items?: unknown; }; el.setAttribute('label', String(args.label)); el.items = args.items; el.config = args.config; return el; }` could not be resolved statically.
+      "warning": "Incomplete snippet: `(args) => { const el = document.createElement('lit-property-only') as HTMLElement & { config?: unknown; items?: unknown; }; el.setAttribute('label', String(args.label)); el.items = args.items; el.config = args.config; return el; }` could not be resolved statically.
 Incomplete snippet: properties without an attribute: `items`, `config`.",
     },
     "webcomponentsfixtures-lit-property-only--lit-template": {
diff --git a/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-slots-and-css/server-snippet-DomNode.snapshot b/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-slots-and-css/server-snippet-DomNode.snapshot
index 5a498ce29dc4..52d0db9d3e38 100644
--- a/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-slots-and-css/server-snippet-DomNode.snapshot
+++ b/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-slots-and-css/server-snippet-DomNode.snapshot
@@ -1,3 +1,3 @@
 <lit-slots-and-css heading="Projected"></lit-slots-and-css>
 
-warning: Incomplete snippet: `args => { const el = document.createElement('lit-slots-and-css'); el.setAttribute('heading', String(args.heading)); const body = document.createElement('p'); body.textContent = 'Default slot content'; const action = document.createElement('button'); action.slot = 'actions'; action.textContent = 'Confirm'; el.append(body, action); return el; }` could not be resolved statically.
\ No newline at end of file
+warning: Incomplete snippet: `(args) => { const el = document.createElement('lit-slots-and-css'); el.setAttribute('heading', String(args.heading)); const body = document.createElement('p'); body.textContent = 'Default slot content'; const action = document.createElement('button'); action.slot = 'actions'; action.textContent = 'Confirm'; el.append(body, action); return el; }` could not be resolved statically.
\ No newline at end of file
diff --git a/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-slots-and-css/story-docs.payload.snapshot b/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-slots-and-css/story-docs.payload.snapshot
index b4399411e679..1ccaaa446773 100644
--- a/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-slots-and-css/story-docs.payload.snapshot
+++ b/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-slots-and-css/story-docs.payload.snapshot
@@ -18,7 +18,7 @@
       "id": "webcomponentsfixtures-lit-slots-and-css--dom-node",
       "name": "Dom Node",
       "snippet": "<lit-slots-and-css heading="Projected"></lit-slots-and-css>",
-      "warning": "Incomplete snippet: `args => { const el = document.createElement('lit-slots-and-css'); el.setAttribute('heading', String(args.heading)); const body = document.createElement('p'); body.textContent = 'Default slot content'; const action = document.createElement('button'); action.slot = 'actions'; action.textContent = 'Confirm'; el.append(body, action); return el; }` could not be resolved statically.",
+      "warning": "Incomplete snippet: `(args) => { const el = document.createElement('lit-slots-and-css'); el.setAttribute('heading', String(args.heading)); const body = document.createElement('p'); body.textContent = 'Default slot content'; const action = document.createElement('button'); action.slot = 'actions'; action.textContent = 'Confirm'; el.append(body, action); return el; }` could not be resolved statically.",
     },
     "webcomponentsfixtures-lit-slots-and-css--lit-template": {
       "id": "webcomponentsfixtures-lit-slots-and-css--lit-template",
diff --git a/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-toolkit-shapes/server-snippet-DomNode.snapshot b/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-toolkit-shapes/server-snippet-DomNode.snapshot
index a04744653083..74c6306155f9 100644
--- a/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-toolkit-shapes/server-snippet-DomNode.snapshot
+++ b/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-toolkit-shapes/server-snippet-DomNode.snapshot
@@ -11,4 +11,4 @@
   }
 </script>
 
-warning: Incomplete snippet: `args => { const el = document.createElement('lit-toolkit-shapes'); el.setAttribute('size', String(args.size)); el.setAttribute('level', String(args.level)); el.setAttribute('label', String(args.label)); (el as HTMLElement & { tags: string[]; }).tags = args.tags as string[]; el.addEventListener('toolkit-resize', args.onToolkitResize as EventListener); return el; }` could not be resolved statically.
\ No newline at end of file
+warning: Incomplete snippet: `(args) => { const el = document.createElement('lit-toolkit-shapes'); el.setAttribute('size', String(args.size)); el.setAttribute('level', String(args.level)); el.setAttribute('label', String(args.label)); (el as HTMLElement & { tags: string[] }).tags = args.tags as string[]; el.addEventListener('toolkit-resize', args.onToolkitResize as EventListener); return el; }` could not be resolved statically.
\ No newline at end of file
diff --git a/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-toolkit-shapes/story-docs.payload.snapshot b/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-toolkit-shapes/story-docs.payload.snapshot
index 3ccf1ddab1ef..7eeeec1a3531 100644
--- a/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-toolkit-shapes/story-docs.payload.snapshot
+++ b/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-toolkit-shapes/story-docs.payload.snapshot
@@ -34,7 +34,7 @@
     host.addEventListener('toolkit-resize', () => {});
   }
 </script>",
-      "warning": "Incomplete snippet: `args => { const el = document.createElement('lit-toolkit-shapes'); el.setAttribute('size', String(args.size)); el.setAttribute('level', String(args.level)); el.setAttribute('label', String(args.label)); (el as HTMLElement & { tags: string[]; }).tags = args.tags as string[]; el.addEventListener('toolkit-resize', args.onToolkitResize as EventListener); return el; }` could not be resolved statically.",
+      "warning": "Incomplete snippet: `(args) => { const el = document.createElement('lit-toolkit-shapes'); el.setAttribute('size', String(args.size)); el.setAttribute('level', String(args.level)); el.setAttribute('label', String(args.label)); (el as HTMLElement & { tags: string[] }).tags = args.tags as string[]; el.addEventListener('toolkit-resize', args.onToolkitResize as EventListener); return el; }` could not be resolved statically.",
     },
     "webcomponentsfixtures-lit-toolkit-shapes--lit-template": {
       "id": "webcomponentsfixtures-lit-toolkit-shapes--lit-template",
diff --git a/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-union-jsdoc/server-snippet-DomNode.snapshot b/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-union-jsdoc/server-snippet-DomNode.snapshot
index d8b79590d445..f781dfee52f9 100644
--- a/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-union-jsdoc/server-snippet-DomNode.snapshot
+++ b/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-union-jsdoc/server-snippet-DomNode.snapshot
@@ -1,3 +1,3 @@
 <lit-union-jsdoc variant="secondary" old-label="Old" label="Current"></lit-union-jsdoc>
 
-warning: Incomplete snippet: `args => { const el = document.createElement('lit-union-jsdoc'); el.setAttribute('variant', String(args.variant)); el.setAttribute('old-label', String(args.oldLabel)); el.setAttribute('label', String(args.label)); return el; }` could not be resolved statically.
\ No newline at end of file
+warning: Incomplete snippet: `(args) => { const el = document.createElement('lit-union-jsdoc'); el.setAttribute('variant', String(args.variant)); el.setAttribute('old-label', String(args.oldLabel)); el.setAttribute('label', String(args.label)); return el; }` could not be resolved statically.
\ No newline at end of file
diff --git a/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-union-jsdoc/story-docs.payload.snapshot b/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-union-jsdoc/story-docs.payload.snapshot
index 61ed91b44e95..b83c44386b70 100644
--- a/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-union-jsdoc/story-docs.payload.snapshot
+++ b/code/lib/docgen-harness/src/web-components/__testfixtures__/lit-union-jsdoc/story-docs.payload.snapshot
@@ -12,7 +12,7 @@
       "id": "webcomponentsfixtures-lit-union-jsdoc--dom-node",
       "name": "Dom Node",
       "snippet": "<lit-union-jsdoc variant="secondary" old-label="Old" label="Current"></lit-union-jsdoc>",
-      "warning": "Incomplete snippet: `args => { const el = document.createElement('lit-union-jsdoc'); el.setAttribute('variant', String(args.variant)); el.setAttribute('old-label', String(args.oldLabel)); el.setAttribute('label', String(args.label)); return el; }` could not be resolved statically.",
+      "warning": "Incomplete snippet: `(args) => { const el = document.createElement('lit-union-jsdoc'); el.setAttribute('variant', String(args.variant)); el.setAttribute('old-label', String(args.oldLabel)); el.setAttribute('label', String(args.label)); return el; }` could not be resolved statically.",
     },
     "webcomponentsfixtures-lit-union-jsdoc--lit-template": {
       "id": "webcomponentsfixtures-lit-union-jsdoc--lit-template",
diff --git a/code/lib/docgen-harness/src/web-components/__testfixtures__/stencil-props/server-snippet-DomNode.snapshot b/code/lib/docgen-harness/src/web-components/__testfixtures__/stencil-props/server-snippet-DomNode.snapshot
index 145df39a27bf..04ee2d077931 100644
--- a/code/lib/docgen-harness/src/web-components/__testfixtures__/stencil-props/server-snippet-DomNode.snapshot
+++ b/code/lib/docgen-harness/src/web-components/__testfixtures__/stencil-props/server-snippet-DomNode.snapshot
@@ -1,3 +1,3 @@
 <stencil-props value="3" max="5" variant="compact" aria-label-text="Rating"></stencil-props>
 
-warning: Incomplete snippet: `args => { const el = document.createElement('stencil-props'); el.setAttribute('value', String(args.value)); el.setAttribute('max', String(args.max)); el.setAttribute('variant', String(args.variant)); el.setAttribute('aria-label-text', String(args.labelText)); return el; }` could not be resolved statically.
\ No newline at end of file
+warning: Incomplete snippet: `(args) => { const el = document.createElement('stencil-props'); el.setAttribute('value', String(args.value)); el.setAttribute('max', String(args.max)); el.setAttribute('variant', String(args.variant)); el.setAttribute('aria-label-text', String(args.labelText)); return el; }` could not be resolved statically.
\ No newline at end of file
diff --git a/code/lib/docgen-harness/src/web-components/__testfixtures__/stencil-props/story-docs.payload.snapshot b/code/lib/docgen-harness/src/web-components/__testfixtures__/stencil-props/story-docs.payload.snapshot
index b21213cd01ba..1ffcd6f52637 100644
--- a/code/lib/docgen-harness/src/web-components/__testfixtures__/stencil-props/story-docs.payload.snapshot
+++ b/code/lib/docgen-harness/src/web-components/__testfixtures__/stencil-props/story-docs.payload.snapshot
@@ -17,7 +17,7 @@
       "id": "webcomponentsfixtures-stencil-props--dom-node",
       "name": "Dom Node",
       "snippet": "<stencil-props value="3" max="5" variant="compact" aria-label-text="Rating"></stencil-props>",
-      "warning": "Incomplete snippet: `args => { const el = document.createElement('stencil-props'); el.setAttribute('value', String(args.value)); el.setAttribute('max', String(args.max)); el.setAttribute('variant', String(args.variant)); el.setAttribute('aria-label-text', String(args.labelText)); return el; }` could not be resolved statically.",
+      "warning": "Incomplete snippet: `(args) => { const el = document.createElement('stencil-props'); el.setAttribute('value', String(args.value)); el.setAttribute('max', String(args.max)); el.setAttribute('variant', String(args.variant)); el.setAttribute('aria-label-text', String(args.labelText)); return el; }` could not be resolved statically.",
     },
     "webcomponentsfixtures-stencil-props--lit-template": {
       "id": "webcomponentsfixtures-stencil-props--lit-template",
diff --git a/code/lib/docgen-harness/src/web-components/__testfixtures__/vanilla-basic/server-snippet-DomNode.snapshot b/code/lib/docgen-harness/src/web-components/__testfixtures__/vanilla-basic/server-snippet-DomNode.snapshot
index 342fd43e06fd..56702ad86acf 100644
--- a/code/lib/docgen-harness/src/web-components/__testfixtures__/vanilla-basic/server-snippet-DomNode.snapshot
+++ b/code/lib/docgen-harness/src/web-components/__testfixtures__/vanilla-basic/server-snippet-DomNode.snapshot
@@ -1,3 +1,3 @@
 <vanilla-basic label="Vanilla" count="4" disabled></vanilla-basic>
 
-warning: Incomplete snippet: `args => { const el = document.createElement('vanilla-basic'); el.setAttribute('label', String(args.label)); el.setAttribute('count', String(args.count)); if (args.disabled) { el.setAttribute('disabled', ''); } return el; }` could not be resolved statically.
\ No newline at end of file
+warning: Incomplete snippet: `(args) => { const el = document.createElement('vanilla-basic'); el.setAttribute('label', String(args.label)); el.setAttribute('count', String(args.count)); if (args.disabled) { el.setAttribute('disabled', ''); } return el; }` could not be resolved statically.
\ No newline at end of file
diff --git a/code/lib/docgen-harness/src/web-components/__testfixtures__/vanilla-basic/story-docs.payload.snapshot b/code/lib/docgen-harness/src/web-components/__testfixtures__/vanilla-basic/story-docs.payload.snapshot
index 956792067408..9b940c03ca4b 100644
--- a/code/lib/docgen-harness/src/web-components/__testfixtures__/vanilla-basic/story-docs.payload.snapshot
+++ b/code/lib/docgen-harness/src/web-components/__testfixtures__/vanilla-basic/story-docs.payload.snapshot
@@ -12,7 +12,7 @@
       "id": "webcomponentsfixtures-vanilla-basic--dom-node",
       "name": "Dom Node",
       "snippet": "<vanilla-basic label="Vanilla" count="4" disabled></vanilla-basic>",
-      "warning": "Incomplete snippet: `args => { const el = document.createElement('vanilla-basic'); el.setAttribute('label', String(args.label)); el.setAttribute('count', String(args.count)); if (args.disabled) { el.setAttribute('disabled', ''); } return el; }` could not be resolved statically.",
+      "warning": "Incomplete snippet: `(args) => { const el = document.createElement('vanilla-basic'); el.setAttribute('label', String(args.label)); el.setAttribute('count', String(args.count)); if (args.disabled) { el.setAttribute('disabled', ''); } return el; }` could not be resolved statically.",
     },
     "webcomponentsfixtures-vanilla-basic--lit-template": {
       "id": "webcomponentsfixtures-vanilla-basic--lit-template",
diff --git a/code/lib/docgen-harness/src/web-components/__testfixtures__/vanilla-multi-definition/server-snippet-DomNode.snapshot b/code/lib/docgen-harness/src/web-components/__testfixtures__/vanilla-multi-definition/server-snippet-DomNode.snapshot
index bb068696ff11..cabd9206c2ed 100644
--- a/code/lib/docgen-harness/src/web-components/__testfixtures__/vanilla-multi-definition/server-snippet-DomNode.snapshot
+++ b/code/lib/docgen-harness/src/web-components/__testfixtures__/vanilla-multi-definition/server-snippet-DomNode.snapshot
@@ -1,4 +1,4 @@
 <multi-beta></multi-beta>
 
-warning: Incomplete snippet: `args => { const el = document.createElement('multi-beta'); el.setAttribute('beta-label', String(args.betaLabel)); return el; }` could not be resolved statically.
+warning: Incomplete snippet: `(args) => { const el = document.createElement('multi-beta'); el.setAttribute('beta-label', String(args.betaLabel)); return el; }` could not be resolved statically.
 Incomplete snippet: properties without an attribute: `betaLabel`.
\ No newline at end of file
diff --git a/code/lib/docgen-harness/src/web-components/__testfixtures__/vanilla-multi-definition/story-docs.payload.snapshot b/code/lib/docgen-harness/src/web-components/__testfixtures__/vanilla-multi-definition/story-docs.payload.snapshot
index 78273001f1f1..80dd9bd290fb 100644
--- a/code/lib/docgen-harness/src/web-components/__testfixtures__/vanilla-multi-definition/story-docs.payload.snapshot
+++ b/code/lib/docgen-harness/src/web-components/__testfixtures__/vanilla-multi-definition/story-docs.payload.snapshot
@@ -13,7 +13,7 @@
       "id": "webcomponentsfixtures-vanilla-multi-definition--dom-node",
       "name": "Dom Node",
       "snippet": "<multi-beta></multi-beta>",
-      "warning": "Incomplete snippet: `args => { const el = document.createElement('multi-beta'); el.setAttribute('beta-label', String(args.betaLabel)); return el; }` could not be resolved statically.
+      "warning": "Incomplete snippet: `(args) => { const el = document.createElement('multi-beta'); el.setAttribute('beta-label', String(args.betaLabel)); return el; }` could not be resolved statically.
 Incomplete snippet: properties without an attribute: `betaLabel`.",
     },
     "webcomponentsfixtures-vanilla-multi-definition--lit-template": {

From 258dd6a57896ba6306955258fad66f45d0c77399 Mon Sep 17 00:00:00 2001
From: Easton <easton.shin@marqvision.com>
Date: Tue, 13 Oct 2026 11:52:17 +0900
Subject: [PATCH 053/326] refactor(tanstack-react): port the router preset to
 the csf-tools ESTree API

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../plugins/server-code-elimination.test.ts   |  15 +
 .../src/plugins/server-code-elimination.ts    | 672 +++++++++---------
 .../src/plugins/server-only-stub.ts           |  57 +-
 3 files changed, 375 insertions(+), 369 deletions(-)

diff --git a/code/frameworks/tanstack-react/src/plugins/server-code-elimination.test.ts b/code/frameworks/tanstack-react/src/plugins/server-code-elimination.test.ts
index 52b81a17d8ed..33218c1738b7 100644
--- a/code/frameworks/tanstack-react/src/plugins/server-code-elimination.test.ts
+++ b/code/frameworks/tanstack-react/src/plugins/server-code-elimination.test.ts
@@ -97,6 +97,21 @@ describe('serverCodeEliminationPlugin', () => {
       expect(result!.code).not.toContain('const handler');
     });
 
+    it.each([
+      'export function handler() { return 1; }',
+      'export default function handler() { return 1; }',
+      'export class handler {}',
+    ])('keeps an exported handler declaration intact: %s', async (declaration) => {
+      const code = [
+        `import { createServerFn } from '@tanstack/react-start';`,
+        declaration,
+        `export const f = createServerFn().handler(handler);`,
+      ].join('\n');
+      const result = await transform(code);
+      expect(result!.code).toContain(declaration);
+      expect(result!.code).toContain('__sb_fn()');
+    });
+
     it('handles chained .middleware().handler()', async () => {
       const code = [
         `import { createServerFn } from '@tanstack/react-start';`,
diff --git a/code/frameworks/tanstack-react/src/plugins/server-code-elimination.ts b/code/frameworks/tanstack-react/src/plugins/server-code-elimination.ts
index 2cb268710d1a..0bc4e9338a99 100644
--- a/code/frameworks/tanstack-react/src/plugins/server-code-elimination.ts
+++ b/code/frameworks/tanstack-react/src/plugins/server-code-elimination.ts
@@ -1,12 +1,13 @@
-import { type JSXIdentifier, type JSXOpeningElement, type Statement } from '@babel/types';
-import { types as t, transformSync, type NodePath } from 'storybook/internal/babel';
+import {
+  type ESTree as E,
+  type ESTreeNode as Node,
+  type ScopeInfo,
+  SourceEditor,
+  walk,
+} from 'storybook/internal/csf-tools';
 import type { Plugin } from 'vite';
 
-interface TransformState {
-  code: string;
-  modified: boolean;
-  needsFnImport: boolean;
-}
+type Span = { start: number; end: number };
 
 // Same strategy as TanStack's `detectKindsInCode`.
 const SERVER_FN_RE = /\bcreateServerFn\b/;
@@ -59,207 +60,233 @@ export function serverCodeEliminationPlugin(options: { excludeFiles?: string[] }
           return null;
         }
 
-        const state: TransformState = { code, modified: false, needsFnImport: false };
-
-        const result = transformSync(code, {
-          filename: id,
-          sourceType: 'module',
-          parserOpts: {
-            plugins: ['typescript', 'jsx'],
-          },
-          plugins: [() => serverCodeElimination(state)],
-          sourceMaps: true,
-          configFile: false,
-          babelrc: false,
-        });
-
-        if (!state.modified || !result?.code) {
+        const editor = new SourceEditor(code, id);
+        if (!eliminateServerCode(editor)) {
           return null;
         }
 
         return {
-          code: result.code,
-          map: result.map,
+          code: editor.toString(),
+          map: editor.edits
+            .generateMap({ source: id, includeContent: true, hires: true })
+            .toString(),
         };
       },
     },
   };
 }
 
-// todo make storybook/internal/babel export PluginObj
-function serverCodeElimination(
-  state: TransformState
-): NonNullable<NonNullable<Parameters<typeof transformSync>[1]>['plugins']>[number] {
-  /** No-op spy for server-side code */
-  function sbFnCall() {
-    state.needsFnImport = true;
-    return buildFnCall();
-  }
+const FN_IMPORT = `import { fn as __sb_fn } from "storybook/test";`;
+
+// Returns whether anything changed.
+function eliminateServerCode(editor: SourceEditor): boolean {
+  const { code, program, edits } = editor;
+  const tanstackImports = collectTanstackImports(program);
+  const resolves = (name: string, factory: string) =>
+    resolvesToFactory(tanstackImports, name, factory);
+
+  // Source ranges whose original code is gone from the output.
+  const removed: Span[] = [];
+  const isGone = (node: Span) =>
+    removed.some((span) => span.start <= node.start && node.end <= span.end);
+  const replace = (span: Span, text: string) => {
+    edits.overwrite(span.start, span.end, text);
+    removed.push(span);
+  };
+  const remove = (span: Span) => {
+    if (span.end > span.start) {
+      edits.remove(span.start, span.end);
+      removed.push(span);
+    }
+  };
 
-  /** Spy wrapping the original implementation for client-side code */
-  function sbFnCallWithImpl(impl: import('@babel/types').Expression) {
-    state.needsFnImport = true;
-    return buildFnCallWithImpl(impl);
-  }
+  let modified = false;
+  let needsFnImport = false;
+  const fnCall = (span: Span) => {
+    needsFnImport = true;
+    replace(span, '__sb_fn()');
+  };
+  const fnCallWithImpl = (call: Span, impl: Span) => {
+    needsFnImport = true;
+    replace({ start: call.start, end: impl.start }, '__sb_fn(');
+    replace({ start: impl.end, end: call.end }, ')');
+  };
 
-  return {
-    visitor: {
-      Program(programPath) {
-        const tanstackImports = collectTanstackImports(programPath.node.body);
-
-        const resolves = (name: string, factory: string) =>
-          resolvesToFactory(tanstackImports, name, factory);
-
-        programPath.traverse({
-          CallExpression(path) {
-            const node = path.node;
-
-            // createFileRoute('/path')({ ..., server: {...} }) →
-            // createFileRoute('/path')({ ... })
-            // createRootRoute({ server: {...} }) → createRootRoute({})
-            // createRootRouteWithContext<...>()({ server: {...} }) → ({})
-            // createRoute({ server: {...} }) → createRoute({})
-            if (ROUTE_FACTORY_RE.test(state.code)) {
-              const routeOptionsArg = getRouteFactoryOptionsArg(node, tanstackImports);
-              if (routeOptionsArg && stripServerOption(routeOptionsArg)) {
-                state.modified = true;
-                // fall through — no `return`, the call may still match other rules
-              }
-            }
-
-            // createServerOnlyFn(fn) → fn() no-op spy
-            if (
-              t.isIdentifier(node.callee) &&
-              resolves(node.callee.name, 'createServerOnlyFn') &&
-              SERVER_ONLY_FN_RE.test(state.code)
-            ) {
-              path.replaceWith(sbFnCall());
-              state.modified = true;
-              return;
-            }
-
-            // createClientOnlyFn(fn) → fn(originalImpl) spy wrapping original
-            if (
-              t.isIdentifier(node.callee) &&
-              resolves(node.callee.name, 'createClientOnlyFn') &&
-              CLIENT_ONLY_FN_RE.test(state.code)
-            ) {
-              const innerFn = node.arguments[0];
-              if (innerFn && t.isExpression(innerFn)) {
-                path.replaceWith(sbFnCallWithImpl(innerFn));
-                state.modified = true;
-              }
-              return;
-            }
-
-            const methodName = getMethodName(node);
-            if (!methodName) {
-              return;
-            }
-
-            const root = findChainRoot(node);
-            if (!root) {
-              return;
-            }
-
-            // createServerFn()...handler(fn) → replace handler arg with fn() spy
-            if (
-              methodName === 'handler' &&
-              resolves(root.rootName, 'createServerFn') &&
-              SERVER_FN_RE.test(state.code)
-            ) {
-              const handlerArg = node.arguments[0];
-              if (handlerArg) {
-                if (t.isIdentifier(handlerArg)) {
-                  const binding = path.scope.getBinding(handlerArg.name);
-                  if (binding && binding.referencePaths.length === 1) {
-                    binding.path.remove();
-                  }
-                }
-                node.arguments[0] = sbFnCall();
-              }
-              state.modified = true;
-              return;
-            }
-
-            // createMiddleware()...server(fn) / .inputValidator(fn) → strip call
-            if (resolves(root.rootName, 'createMiddleware') && MIDDLEWARE_RE.test(state.code)) {
-              if (methodName === 'server' || methodName === 'inputValidator') {
-                if (t.isMemberExpression(path.node.callee)) {
-                  path.replaceWith(path.node.callee.object);
-                  state.modified = true;
-                }
-              }
-              return;
-            }
-
-            // createIsomorphicFn()...client(fn) → fn(originalImpl) spy wrapping original
-            // createIsomorphicFn()...server(fn) (no .client) → fn() no-op spy
-            if (
-              resolves(root.rootName, 'createIsomorphicFn') &&
-              ISOMORPHIC_FN_RE.test(state.code)
-            ) {
-              if (methodName === 'client') {
-                const innerFn = node.arguments[0];
-                if (innerFn && t.isExpression(innerFn)) {
-                  path.replaceWith(sbFnCallWithImpl(innerFn));
-                  state.modified = true;
-                }
-                return;
-              }
-
-              if (methodName === 'server') {
-                const parent = path.parent;
-                if (!t.isMemberExpression(parent) || !t.isCallExpression(path.parentPath?.parent)) {
-                  path.replaceWith(sbFnCall());
-                  state.modified = true;
-                }
-              }
-              return;
-            }
-          },
-        });
-
-        if (!state.modified) {
-          return;
+  walk(program, (node, parent) => {
+    if (isGone(node)) {
+      return false;
+    }
+    if (node.type !== 'CallExpression') {
+      return;
+    }
+
+    // createFileRoute('/path')({ ..., server: {...} }) → createFileRoute('/path')({ ... })
+    // createRootRoute({ server: {...} }) → createRootRoute({})
+    // createRootRouteWithContext<...>()({ server: {...} }) → ({})
+    // createRoute({ server: {...} }) → createRoute({})
+    if (ROUTE_FACTORY_RE.test(code)) {
+      const routeOptionsArg = getRouteFactoryOptionsArg(node, tanstackImports);
+      if (routeOptionsArg) {
+        const serverOptions = routeOptionsArg.properties.filter(isServerOption);
+        serverOptions.forEach((option) =>
+          remove(listItemRange(routeOptionsArg.properties, option))
+        );
+        modified ||= serverOptions.length > 0;
+        // fall through — the call may still match other rules
+      }
+    }
+
+    // createServerOnlyFn(fn) → fn() no-op spy
+    if (
+      node.callee.type === 'Identifier' &&
+      resolves(node.callee.name, 'createServerOnlyFn') &&
+      SERVER_ONLY_FN_RE.test(code)
+    ) {
+      fnCall(node);
+      modified = true;
+      return false;
+    }
+
+    // createClientOnlyFn(fn) → fn(originalImpl) spy wrapping original
+    if (
+      node.callee.type === 'Identifier' &&
+      resolves(node.callee.name, 'createClientOnlyFn') &&
+      CLIENT_ONLY_FN_RE.test(code)
+    ) {
+      const innerFn = node.arguments[0];
+      if (innerFn && innerFn.type !== 'SpreadElement') {
+        fnCallWithImpl(node, innerFn);
+        modified = true;
+      }
+      return;
+    }
+
+    const methodName = getMethodName(node);
+    if (!methodName) {
+      return;
+    }
+
+    const root = findChainRoot(node);
+    if (!root) {
+      return;
+    }
+
+    // createServerFn()...handler(fn) → replace handler arg with fn() spy
+    if (
+      methodName === 'handler' &&
+      resolves(root.rootName, 'createServerFn') &&
+      SERVER_FN_RE.test(code)
+    ) {
+      const handlerArg = node.arguments[0];
+      if (handlerArg) {
+        if (handlerArg.type === 'Identifier') {
+          removeSingleUseDeclaration(editor, editor.scopes.bindingOf(handlerArg), remove);
         }
+        fnCall(handlerArg);
+      }
+      modified = true;
+      return;
+    }
+
+    // createMiddleware()...server(fn) / .inputValidator(fn) → strip call
+    if (resolves(root.rootName, 'createMiddleware') && MIDDLEWARE_RE.test(code)) {
+      if (
+        (methodName === 'server' || methodName === 'inputValidator') &&
+        node.callee.type === 'MemberExpression'
+      ) {
+        remove({ start: node.callee.object.end, end: node.end });
+        modified = true;
+      }
+      return;
+    }
 
-        if (state.needsFnImport) {
-          programPath.node.body.unshift(buildFnImport());
+    // createIsomorphicFn()...client(fn) → fn(originalImpl) spy wrapping original
+    // createIsomorphicFn()...server(fn) (no .client) → fn() no-op spy
+    if (resolves(root.rootName, 'createIsomorphicFn') && ISOMORPHIC_FN_RE.test(code)) {
+      if (methodName === 'client') {
+        const innerFn = node.arguments[0];
+        if (innerFn && innerFn.type !== 'SpreadElement') {
+          fnCallWithImpl(node, innerFn);
+          modified = true;
         }
+        return;
+      }
 
-        eliminateDeadImports(programPath);
-      },
-    },
-  };
-}
+      if (methodName === 'server') {
+        const grandparent = parent && editor.parentOf(parent);
+        if (parent?.type !== 'MemberExpression' || grandparent?.type !== 'CallExpression') {
+          fnCall(node);
+          modified = true;
+          return false;
+        }
+      }
+    }
+  });
 
-/** Build `import { fn as __sb_fn } from 'storybook/test'` */
-function buildFnImport() {
-  return t.importDeclaration(
-    [t.importSpecifier(t.identifier('__sb_fn'), t.identifier('fn'))],
-    t.stringLiteral('storybook/test')
-  );
+  if (!modified) {
+    return false;
+  }
+
+  if (needsFnImport) {
+    const directives = program.body.filter(
+      (statement) => statement.type === 'ExpressionStatement' && statement.directive
+    );
+    const at = directives.at(-1)?.end ?? (code.startsWith('#!') ? code.indexOf('\n') + 1 : 0);
+    edits.appendLeft(at, `${at > 0 ? '\n' : ''}${FN_IMPORT}\n`);
+  }
+
+  eliminateDeadCode(editor, isGone, remove);
+  return true;
 }
 
-/** Build `__sb_fn()` — no-op spy for server code */
-function buildFnCall() {
-  return t.callExpression(t.identifier('__sb_fn'), []);
+// The range to remove for one item of a comma-separated list, including one adjacent comma.
+function listItemRange(items: readonly Span[], item: Span): Span {
+  const index = items.indexOf(item);
+  const next = items[index + 1];
+  const previous = items[index - 1];
+  if (next) {
+    return { start: item.start, end: next.start };
+  }
+  return previous ? { start: previous.end, end: item.end } : item;
 }
 
-/** Build `__sb_fn(impl)` — spy wrapping the original implementation for client code */
-function buildFnCallWithImpl(impl: import('@babel/types').Expression) {
-  return t.callExpression(t.identifier('__sb_fn'), [impl]);
+function removeSingleUseDeclaration(
+  editor: SourceEditor,
+  binding: ReturnType<ScopeInfo['bindingOf']>,
+  remove: (span: Span) => void
+) {
+  if (!binding || binding.references.length !== 1) {
+    return;
+  }
+  if (binding.kind === 'function' || binding.kind === 'class') {
+    remove(binding.node);
+    return;
+  }
+  const declaration = binding.declaration as E.VariableDeclaration | undefined;
+  if (
+    !['var', 'let', 'const'].includes(binding.kind) ||
+    binding.node.type !== 'VariableDeclarator' ||
+    !declaration
+  ) {
+    return;
+  }
+  if (declaration.declarations.length === 1) {
+    if (editor.parentOf(declaration)?.type !== 'ExportNamedDeclaration') {
+      remove(declaration);
+    }
+    return;
+  }
+  remove(listItemRange(declaration.declarations, binding.node));
 }
 
 /**
  * Collect import bindings from TanStack packages.
  * Returns a map from local name → original imported name.
  */
-function collectTanstackImports(body: Statement[]) {
+function collectTanstackImports(program: E.Program) {
   const imports = new Map<string, string>();
-  for (const node of body) {
-    if (!t.isImportDeclaration(node)) {
+  for (const node of program.body) {
+    if (node.type !== 'ImportDeclaration') {
       continue;
     }
     const src = node.source.value;
@@ -271,10 +298,9 @@ function collectTanstackImports(body: Statement[]) {
       continue;
     }
     for (const spec of node.specifiers) {
-      if (t.isImportSpecifier(spec)) {
-        const importedName = t.isIdentifier(spec.imported)
-          ? spec.imported.name
-          : spec.imported.value;
+      if (spec.type === 'ImportSpecifier') {
+        const importedName =
+          spec.imported.type === 'Identifier' ? spec.imported.name : String(spec.imported.value);
         imports.set(spec.local.name, importedName);
       }
     }
@@ -299,16 +325,16 @@ function resolvesToFactory(
  * e.g. `createServerFn().middleware(...).handler(fn)` → `createServerFn()`.
  */
 function findChainRoot(
-  node: ReturnType<typeof t.callExpression>
-): { rootCall: ReturnType<typeof t.callExpression>; rootName: string } | null {
-  let current: ReturnType<typeof t.callExpression> = node;
+  node: E.CallExpression
+): { rootCall: E.CallExpression; rootName: string } | null {
+  let current = node;
 
   while (true) {
     const callee = current.callee;
-    if (t.isIdentifier(callee)) {
+    if (callee.type === 'Identifier') {
       return { rootCall: current, rootName: callee.name };
     }
-    if (t.isMemberExpression(callee) && t.isCallExpression(callee.object)) {
+    if (callee.type === 'MemberExpression' && callee.object.type === 'CallExpression') {
       current = callee.object;
       continue;
     }
@@ -317,8 +343,8 @@ function findChainRoot(
 }
 
 /** Get the method name from `expr.method(...)` → `"method"` */
-function getMethodName(node: ReturnType<typeof t.callExpression>): string | null {
-  if (t.isMemberExpression(node.callee) && t.isIdentifier(node.callee.property)) {
+function getMethodName(node: E.CallExpression): string | null {
+  if (node.callee.type === 'MemberExpression' && node.callee.property.type === 'Identifier') {
     return node.callee.property.name;
   }
   return null;
@@ -337,29 +363,26 @@ function getMethodName(node: ReturnType<typeof t.callExpression>): string | null
  * match or the argument isn't an inline object literal.
  */
 function getRouteFactoryOptionsArg(
-  node: ReturnType<typeof t.callExpression>,
+  node: E.CallExpression,
   imports: Map<string, string>
-): import('@babel/types').ObjectExpression | null {
+): E.ObjectExpression | null {
   const factoryName = getRouteFactoryName(node, imports);
   if (!factoryName) {
     return null;
   }
   const optionsArg = node.arguments[0];
-  return t.isObjectExpression(optionsArg) ? optionsArg : null;
+  return optionsArg?.type === 'ObjectExpression' ? optionsArg : null;
 }
 
-function getRouteFactoryName(
-  node: ReturnType<typeof t.callExpression>,
-  imports: Map<string, string>
-): string | null {
+function getRouteFactoryName(node: E.CallExpression, imports: Map<string, string>): string | null {
   // Direct call: createRoute(...) / createRootRoute(...)
-  if (t.isIdentifier(node.callee)) {
+  if (node.callee.type === 'Identifier') {
     const resolved = imports.get(node.callee.name) ?? node.callee.name;
     return ROUTE_FACTORIES.has(resolved) ? resolved : null;
   }
   // Curried call: createFileRoute('/path')(...) /
   //               createRootRouteWithContext<...>()(...)
-  if (t.isCallExpression(node.callee) && t.isIdentifier(node.callee.callee)) {
+  if (node.callee.type === 'CallExpression' && node.callee.callee.type === 'Identifier') {
     const calleeName = node.callee.callee.name;
     const resolved = imports.get(calleeName) ?? calleeName;
     return ROUTE_FACTORIES.has(resolved) ? resolved : null;
@@ -367,155 +390,128 @@ function getRouteFactoryName(
   return null;
 }
 
-/**
- * Drop the `server` property from a route options object literal. Used to
- * strip server-only handlers (e.g. `server: { handler: ... }`) so their
- * imports become unreferenced and are removed by the dead-import pass.
- *
- * Returns true when at least one property was removed.
- */
-function stripServerOption(options: import('@babel/types').ObjectExpression): boolean {
-  const initialLength = options.properties.length;
-  options.properties = options.properties.filter((prop) => {
-    if (!t.isObjectProperty(prop) || prop.computed) {
-      return true;
-    }
-    const key = prop.key;
-    const keyName = t.isIdentifier(key) ? key.name : undefined;
-    return keyName !== 'server';
-  });
-  return options.properties.length !== initialLength;
+// Stripping `server` leaves the imports only its handlers used for the dead-code pass to remove.
+function isServerOption(prop: E.ObjectExpression['properties'][number]): boolean {
+  return (
+    prop.type === 'Property' &&
+    !prop.method &&
+    prop.kind === 'init' &&
+    !prop.computed &&
+    prop.key.type === 'Identifier' &&
+    prop.key.name === 'server'
+  );
 }
 
-function getJsxRootIdentifier(name: JSXOpeningElement['name']): JSXIdentifier | null {
-  while (t.isJSXMemberExpression(name)) {
-    name = name.object;
+// Whether an initializer has no side effects, by Babel's `scope.isPure` rules.
+function isPure(node: Node | null, scopes: ScopeInfo): boolean {
+  if (!node) {
+    return true;
+  }
+  switch (node.type) {
+    case 'Identifier':
+      return scopes.program.bindings.has(node.name);
+    case 'Literal':
+    case 'ThisExpression':
+    case 'MetaProperty':
+    case 'FunctionExpression':
+    case 'ArrowFunctionExpression':
+      return true;
+    case 'ClassExpression':
+      return (
+        (node.decorators?.length ?? 0) === 0 &&
+        isPure(node.superClass, scopes) &&
+        node.body.body.every((member) => isPure(member, scopes))
+      );
+    case 'MethodDefinition':
+      return (!node.computed || isPure(node.key, scopes)) && (node.decorators?.length ?? 0) === 0;
+    case 'PropertyDefinition':
+      return (
+        (!node.computed || isPure(node.key, scopes)) &&
+        (node.decorators?.length ?? 0) === 0 &&
+        (!node.static || isPure(node.value, scopes))
+      );
+    case 'Property':
+      return (
+        (!node.computed || isPure(node.key, scopes)) && (node.method || isPure(node.value, scopes))
+      );
+    case 'BinaryExpression':
+    case 'LogicalExpression':
+      return isPure(node.left, scopes) && isPure(node.right, scopes);
+    case 'ArrayExpression':
+      return node.elements.every((element) => isPure(element, scopes));
+    case 'ObjectExpression':
+      return node.properties.every((property) => isPure(property, scopes));
+    case 'UnaryExpression':
+      return isPure(node.argument, scopes);
+    case 'TemplateLiteral':
+      return node.expressions.every((expression) => isPure(expression, scopes));
+    default:
+      return false;
   }
-  return t.isJSXIdentifier(name) ? name : null;
-}
-
-/**
- * Collect all non-binding identifier references in the program.
- * Excludes binding sites (declarations) and import specifiers.
- */
-function collectReferencedIdentifiers(
-  programPath: NodePath<import('@babel/types').Program>
-): Set<string> {
-  const referenced = new Set<string>();
-  programPath.traverse({
-    enter(path) {
-      const { node } = path;
-      if (!t.isIdentifier(node) || path.isBindingIdentifier()) {
-        return;
-      }
-      if (path.findParent((p) => p.isImportDeclaration())) {
-        return;
-      }
-      referenced.add(node.name);
-    },
-    JSXOpeningElement(path) {
-      const root = getJsxRootIdentifier(path.node.name);
-      if (root) {
-        referenced.add(root.name);
-      }
-    },
-  });
-  return referenced;
 }
 
-/**
- * Remove top-level non-exported declarations whose bound names are never
- * referenced elsewhere. This handles hoisted helpers that become dead after
- * server code is eliminated (e.g. `function helper() { ... }` only called
- * inside a `.handler()` arg that was replaced with `__sb_fn()`).
- *
- * Returns true when at least one declaration was removed.
- */
-function removeDeadTopLevelDeclarations(
-  programPath: NodePath<import('@babel/types').Program>
-): boolean {
-  const referenced = collectReferencedIdentifiers(programPath);
-  let removed = false;
+// Loops to a fixed point: a removed declaration can leave imports dead and vice versa.
+function eliminateDeadCode(
+  editor: SourceEditor,
+  isGone: (node: Span) => boolean,
+  remove: (span: Span) => void
+) {
+  const { program, scopes, edits } = editor;
+  const isLive = (identifier: E.BindingIdentifier) =>
+    !!scopes.bindingOf(identifier)?.references.some((reference) => !isGone(reference));
+  const deadSpecifiers = new Set<Node>();
 
-  for (const stmtPath of programPath.get('body')) {
-    if (stmtPath.isImportDeclaration() || stmtPath.isExportDeclaration()) {
-      continue;
-    }
-
-    if (stmtPath.isFunctionDeclaration()) {
-      const id = stmtPath.node.id;
-      if (id && !referenced.has(id.name)) {
-        stmtPath.remove();
-        removed = true;
+  let changed = true;
+  while (changed) {
+    changed = false;
+    for (const statement of program.body) {
+      if (isGone(statement)) {
+        continue;
       }
-      continue;
-    }
-
-    if (stmtPath.isVariableDeclaration()) {
-      // Only remove when every declarator is dead: plain identifier binding,
-      // unreferenced, and initializer absent or provably side-effect-free.
-      const allDead = stmtPath.get('declarations').every((declPath) => {
-        if (!t.isIdentifier(declPath.node.id)) return false;
-        if (referenced.has(declPath.node.id.name)) return false;
-        const initPath = declPath.get('init');
-        return !declPath.node.init || initPath.isPure();
-      });
-      if (allDead) {
-        stmtPath.remove();
-        removed = true;
+      const dead =
+        statement.type === 'FunctionDeclaration'
+          ? !!statement.id && !isLive(statement.id)
+          : statement.type === 'VariableDeclaration' &&
+            statement.declarations.every(
+              (declarator) =>
+                declarator.id.type === 'Identifier' &&
+                !isLive(declarator.id) &&
+                isPure(declarator.init, scopes)
+            );
+      if (dead) {
+        remove(statement);
+        changed = true;
       }
     }
-  }
 
-  return removed;
-}
-
-/**
- * Remove import specifiers that are no longer referenced in the AST.
- * Drops entire import declarations when all specifiers are unreferenced.
- *
- * Returns true when at least one specifier was removed.
- */
-function removeDeadImportSpecifiers(
-  programPath: NodePath<import('@babel/types').Program>
-): boolean {
-  const referenced = collectReferencedIdentifiers(programPath);
-  let removed = false;
-
-  programPath.traverse({
-    ImportDeclaration(path) {
-      // Side-effect-only imports (`import './styles.css'`) have no specifiers
-      // and must never be removed by this pass.
-      if (path.node.specifiers.length === 0) {
-        return;
+    for (const statement of program.body) {
+      // Side-effect-only imports (`import './styles.css'`) have no specifiers and are always kept.
+      if (statement.type !== 'ImportDeclaration' || isGone(statement)) {
+        continue;
       }
-
-      const specifiers = path.node.specifiers.filter((spec) => referenced.has(spec.local.name));
-
-      if (specifiers.length === 0) {
-        path.remove();
-        removed = true;
-      } else if (specifiers.length !== path.node.specifiers.length) {
-        path.node.specifiers = specifiers;
-        removed = true;
+      const specifiers = statement.specifiers.filter((spec) => !deadSpecifiers.has(spec));
+      const live = specifiers.filter((spec) => isLive(spec.local));
+      if (specifiers.length === 0 || live.length === specifiers.length) {
+        continue;
       }
-    },
-  });
-
-  return removed;
-}
-
-/**
- * Iteratively eliminate dead top-level declarations and dead imports until
- * the AST reaches a fixed point. The loop is needed because removing a dead
- * declaration (e.g. a hoisted helper) may expose new dead imports, and
- * removing a dead import may expose further dead declarations.
- */
-function eliminateDeadImports(programPath: NodePath<import('@babel/types').Program>) {
-  let changed = true;
-  while (changed) {
-    const d = removeDeadTopLevelDeclarations(programPath);
-    const i = removeDeadImportSpecifiers(programPath);
-    changed = d || i;
+      specifiers.filter((spec) => !live.includes(spec)).forEach((spec) => deadSpecifiers.add(spec));
+      changed = true;
+      if (live.length === 0) {
+        remove(statement);
+        continue;
+      }
+      const named = live.filter((spec) => spec.type === 'ImportSpecifier');
+      const clause = [
+        ...live
+          .filter((spec) => spec.type !== 'ImportSpecifier')
+          .map((spec) => editor.source(spec)),
+        ...(named.length > 0 ? [`{ ${named.map((spec) => editor.source(spec)).join(', ')} }`] : []),
+      ].join(', ');
+      edits.overwrite(
+        statement.start,
+        statement.source.start,
+        `import ${statement.importKind === 'type' ? 'type ' : ''}${clause} from `
+      );
+    }
   }
 }
diff --git a/code/frameworks/tanstack-react/src/plugins/server-only-stub.ts b/code/frameworks/tanstack-react/src/plugins/server-only-stub.ts
index 05823a03f2c2..33e91b3b65ed 100644
--- a/code/frameworks/tanstack-react/src/plugins/server-only-stub.ts
+++ b/code/frameworks/tanstack-react/src/plugins/server-only-stub.ts
@@ -1,4 +1,4 @@
-import { babelParse as parse, types as t } from 'storybook/internal/babel';
+import { type ESTree as E, parseModule } from 'storybook/internal/csf-tools';
 
 import type { Plugin } from 'vite';
 
@@ -54,48 +54,43 @@ function collectExports(code: string, id: string): ExportInfo {
   const named = new Set<string>();
   let hasDefault = false;
 
-  let ast: ReturnType<typeof parse>;
+  let program: E.Program;
   try {
-    ast = parse(code);
+    ({ program } = parseModule(code, id));
   } catch {
     return { named, hasDefault };
   }
 
-  for (const node of ast.program.body) {
-    if (t.isExportDefaultDeclaration(node)) {
+  for (const node of program.body) {
+    if (node.type === 'ExportDefaultDeclaration') {
       hasDefault = true;
       continue;
     }
-    if (t.isExportAllDeclaration(node)) {
-      // `export * from '...'` — we can't enumerate; ignore to be safe.
-      // Consumers of unknown re-exports will get `undefined`, which is
-      // acceptable for server-only modules.
+    // `export * from '...'` can't be enumerated; consumers of unknown re-exports will get
+    // `undefined`, which is acceptable for server-only modules.
+    if (node.type !== 'ExportNamedDeclaration') {
       continue;
     }
-    if (t.isExportNamedDeclaration(node)) {
-      const decl = node.declaration;
-      if (decl) {
-        if (t.isVariableDeclaration(decl)) {
-          for (const declarator of decl.declarations) {
-            if (t.isIdentifier(declarator.id)) {
-              named.add(declarator.id.name);
-            }
-          }
-        } else if ((t.isFunctionDeclaration(decl) || t.isClassDeclaration(decl)) && decl.id?.name) {
-          named.add(decl.id.name);
+    const decl = node.declaration;
+    if (decl?.type === 'VariableDeclaration') {
+      for (const declarator of decl.declarations) {
+        if (declarator.id.type === 'Identifier') {
+          named.add(declarator.id.name);
         }
       }
-      for (const spec of node.specifiers) {
-        if (t.isExportSpecifier(spec)) {
-          const exportedName = t.isIdentifier(spec.exported)
-            ? spec.exported.name
-            : spec.exported.value;
-          if (exportedName !== 'default') {
-            named.add(exportedName);
-          } else {
-            hasDefault = true;
-          }
-        }
+    } else if (
+      (decl?.type === 'FunctionDeclaration' || decl?.type === 'ClassDeclaration') &&
+      decl.id?.name
+    ) {
+      named.add(decl.id.name);
+    }
+    for (const spec of node.specifiers) {
+      const exportedName =
+        spec.exported.type === 'Identifier' ? spec.exported.name : String(spec.exported.value);
+      if (exportedName !== 'default') {
+        named.add(exportedName);
+      } else {
+        hasDefault = true;
       }
     }
   }

From 8d7f854de8c803969966a98cc0220a93aee1bee4 Mon Sep 17 00:00:00 2001
From: Easton <easton.shin@marqvision.com>
Date: Tue, 13 Oct 2026 11:52:17 +0900
Subject: [PATCH 054/326] refactor(addon-vitest): update Vitest configs with
 source edits instead of Babel

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/angular-vitest-postinstall.test.ts    |   75 +-
 .../vitest/src/angular-vitest-postinstall.ts  |  185 +-
 code/addons/vitest/src/postinstall.test.ts    |   62 +-
 code/addons/vitest/src/postinstall.ts         |   69 +-
 .../src/updateVitestFile.config.4.test.ts     | 2684 +++++++++--------
 code/addons/vitest/src/updateVitestFile.ts    |  688 ++---
 6 files changed, 1827 insertions(+), 1936 deletions(-)

diff --git a/code/addons/vitest/src/angular-vitest-postinstall.test.ts b/code/addons/vitest/src/angular-vitest-postinstall.test.ts
index 4d451fdb66f7..df3b244f1aed 100644
--- a/code/addons/vitest/src/angular-vitest-postinstall.test.ts
+++ b/code/addons/vitest/src/angular-vitest-postinstall.test.ts
@@ -1,46 +1,39 @@
 import { describe, expect, it } from 'vitest';
 
-import type { types as t } from 'storybook/internal/babel';
-import { babelParse, generate, traverse } from 'storybook/internal/babel';
+import { type ESTree as E, SourceEditor, parseModule, walk } from 'storybook/internal/csf-tools';
 
 import {
   ANGULAR_VITEST_IMPORT_SOURCE,
   ANGULAR_VITEST_PLUGIN_CALL,
   collectStorybookTestLocalNames,
-  injectAngularVitestIntoAst,
   injectAngularVitestIntoConfig,
+  injectAngularVitestIntoEditor,
   isAngularVitestAlreadyWired,
 } from './angular-vitest-postinstall.ts';
 
 /** Returns the names of the elements (call callees / spread) inside the plugins array, in order. */
 function pluginCalleesInSameArray(code: string, locatorName = 'storybookTest'): string[] | null {
-  const ast = babelParse(code);
   let elements: string[] | null = null;
-  traverse(ast, {
-    CallExpression(path) {
-      if (elements) {
-        path.stop();
-        return;
-      }
-      const { callee } = path.node;
-      if (
-        callee.type === 'Identifier' &&
-        callee.name === locatorName &&
-        path.parentPath.isArrayExpression()
-      ) {
-        const array = path.parentPath.node as t.ArrayExpression;
-        elements = array.elements.map((el) => {
-          if (el?.type === 'CallExpression' && el.callee.type === 'Identifier') {
-            return el.callee.name;
-          }
-          if (el?.type === 'SpreadElement') {
-            return 'spread';
-          }
-          return el?.type ?? 'null';
-        });
-        path.stop();
-      }
-    },
+  walk(parseModule(code).program, (node, parent) => {
+    if (elements) {
+      return false;
+    }
+    if (
+      node.type === 'CallExpression' &&
+      node.callee.type === 'Identifier' &&
+      node.callee.name === locatorName &&
+      parent?.type === 'ArrayExpression'
+    ) {
+      elements = parent.elements.map((el: E.ArrayExpression['elements'][number]) => {
+        if (el?.type === 'CallExpression' && el.callee.type === 'Identifier') {
+          return el.callee.name;
+        }
+        if (el?.type === 'SpreadElement') {
+          return 'spread';
+        }
+        return el?.type ?? 'null';
+      });
+    }
   });
   return elements;
 }
@@ -92,13 +85,15 @@ describe('isAngularVitestAlreadyWired', () => {
 
 describe('collectStorybookTestLocalNames', () => {
   it('always seeds the bare storybookTest name', () => {
-    const names = collectStorybookTestLocalNames(babelParse('export default {};'));
+    const names = collectStorybookTestLocalNames(parseModule('export default {};').program);
     expect(names.has('storybookTest')).toBe(true);
   });
 
   it('collects aliased import names', () => {
     const names = collectStorybookTestLocalNames(
-      babelParse(`import { storybookTest as sbTest } from '@storybook/addon-vitest/vitest-plugin';`)
+      parseModule(
+        `import { storybookTest as sbTest } from '@storybook/addon-vitest/vitest-plugin';`
+      ).program
     );
     expect(names.has('sbTest')).toBe(true);
     expect(names.has('storybookTest')).toBe(true);
@@ -106,7 +101,7 @@ describe('collectStorybookTestLocalNames', () => {
 
   it('ignores imports from other sources', () => {
     const names = collectStorybookTestLocalNames(
-      babelParse(`import { storybookTest as other } from 'somewhere-else';`)
+      parseModule(`import { storybookTest as other } from 'somewhere-else';`).program
     );
     expect(names.has('other')).toBe(false);
   });
@@ -123,7 +118,7 @@ describe('injectAngularVitestIntoConfig', () => {
     expect(out).toContain(ANGULAR_VITEST_IMPORT_SOURCE);
   });
 
-  it('adds the scaffold comment (case 20: comments preserved through generate)', () => {
+  it('adds the scaffold comment (case 20: comments preserved)', () => {
     const out = injectAngularVitestIntoConfig(FRESH_V4)!;
     expect(out).toContain('Forwards Angular build options');
     // The template's own comment must also survive.
@@ -193,17 +188,17 @@ describe('injectAngularVitestIntoConfig', () => {
   });
 });
 
-describe('injectAngularVitestIntoAst', () => {
-  it('mutates the AST in place and returns true', () => {
-    const ast = babelParse(FRESH_V4);
-    expect(injectAngularVitestIntoAst(ast)).toBe(true);
-    const callees = pluginCalleesInSameArray(generate(ast).code);
+describe('injectAngularVitestIntoEditor', () => {
+  it('edits the source in place and returns true', () => {
+    const editor = new SourceEditor(FRESH_V4);
+    expect(injectAngularVitestIntoEditor(editor)).toBe(true);
+    const callees = pluginCalleesInSameArray(editor.toString());
     expect(callees).toEqual([ANGULAR_VITEST_PLUGIN_CALL, 'storybookTest']);
   });
 
   it('returns false for non-locatable arrays', () => {
-    const ast = babelParse('export default { test: {} };');
-    expect(injectAngularVitestIntoAst(ast)).toBe(false);
+    const editor = new SourceEditor('export default { test: {} };');
+    expect(injectAngularVitestIntoEditor(editor)).toBe(false);
   });
 
   it('co-locates in a workspace (defineWorkspace) element plugins array (case 6)', () => {
diff --git a/code/addons/vitest/src/angular-vitest-postinstall.ts b/code/addons/vitest/src/angular-vitest-postinstall.ts
index a9aae06ee8a7..c9f1dce63189 100644
--- a/code/addons/vitest/src/angular-vitest-postinstall.ts
+++ b/code/addons/vitest/src/angular-vitest-postinstall.ts
@@ -1,10 +1,10 @@
 import {
-  type BabelFile,
-  babelParse,
-  generate,
-  traverse,
-  types as t,
-} from 'storybook/internal/babel';
+  type ESTree as E,
+  SourceEditor,
+  arrayList,
+  prependToList,
+  walk,
+} from 'storybook/internal/csf-tools';
 
 /**
  * Auto-wiring for the `@storybook/angular-vite` standalone-vitest options bridge.
@@ -13,8 +13,8 @@ import {
  * `storybookTest()` call (`test.projects[].plugins` in the config templates, or a workspace entry's
  * `plugins`) — never as a top-level sibling — so that the env var it sets synchronously is in place
  * before `storybookTest`'s inline `presets.apply('viteFinal')` reads it. The generic
- * `updateConfigFile` merge only matches top-level keys, so this module performs a targeted AST
- * injection instead.
+ * `updateConfigFile` merge only matches top-level keys, so this module performs a targeted source
+ * edit instead.
  *
  * `@storybook/angular-vite/vitest` is referenced as a string literal only — there is no build-time
  * import edge from addon-vitest to the framework package.
@@ -40,152 +40,97 @@ export function isAngularVitestAlreadyWired(content: string): boolean {
 /**
  * Collects the local identifier names that `storybookTest` is imported as, so the locator can find
  * the call even when it was aliased (`import { storybookTest as sbTest }`). Always seeded with the
- * bare `storybookTest`. Mirrors the alias-collection precedent in `postinstall.ts`'s
- * `isConfigAlreadySetup`.
+ * bare `storybookTest`.
  */
-export function collectStorybookTestLocalNames(ast: BabelFile['ast']): Set<string> {
+export function collectStorybookTestLocalNames(program: E.Program): Set<string> {
   const names = new Set<string>([STORYBOOK_TEST_PLUGIN_CALL]);
-
-  traverse(ast, {
-    ImportDeclaration(path) {
-      if (path.node.source.value !== STORYBOOK_TEST_PLUGIN_SOURCE) {
-        return;
-      }
-      path.node.specifiers.forEach((specifier) => {
-        if ('local' in specifier && specifier.local?.name) {
-          names.add(specifier.local.name);
-        }
-      });
-    },
-  });
-
+  for (const node of program.body) {
+    if (node.type === 'ImportDeclaration' && node.source.value === STORYBOOK_TEST_PLUGIN_SOURCE) {
+      node.specifiers.forEach((specifier) => names.add(specifier.local.name));
+    }
+  }
   return names;
 }
 
-/** Ensures the storybookAngularVitest named import (from the angular-vite/vitest subpath) exists once. */
-function ensureImport(ast: BabelFile['ast']): void {
-  let hasImport = false;
-
-  traverse(ast, {
-    ImportDeclaration(path) {
-      if (path.node.source.value !== ANGULAR_VITEST_IMPORT_SOURCE) {
-        return;
-      }
-      const alreadyImports = path.node.specifiers.some(
+const hasAngularVitestImport = (program: E.Program) =>
+  program.body.some(
+    (node) =>
+      node.type === 'ImportDeclaration' &&
+      node.source.value === ANGULAR_VITEST_IMPORT_SOURCE &&
+      node.specifiers.some(
         (specifier) =>
           specifier.type === 'ImportSpecifier' &&
           specifier.imported.type === 'Identifier' &&
           specifier.imported.name === ANGULAR_VITEST_PLUGIN_CALL
-      );
-      if (alreadyImports) {
-        hasImport = true;
-        path.stop();
-      }
-    },
-  });
-
-  if (hasImport) {
-    return;
-  }
-
-  const importDecl = t.importDeclaration(
-    [
-      t.importSpecifier(
-        t.identifier(ANGULAR_VITEST_PLUGIN_CALL),
-        t.identifier(ANGULAR_VITEST_PLUGIN_CALL)
-      ),
-    ],
-    t.stringLiteral(ANGULAR_VITEST_IMPORT_SOURCE)
-  );
-
-  const lastImportIndex = ast.program.body.findLastIndex((n) => n.type === 'ImportDeclaration');
-  ast.program.body.splice(lastImportIndex + 1, 0, importDecl);
-}
-
-/** Builds the `storybookAngularVitest({})` call with a leading scaffold comment. */
-function buildAngularVitestCall(): t.CallExpression {
-  const call = t.callExpression(t.identifier(ANGULAR_VITEST_PLUGIN_CALL), [t.objectExpression([])]);
-  t.addComment(
-    call,
-    'leading',
-    ' Forwards Angular build options (styles, assets, zoneless, …) into standalone vitest runs',
-    true
+      )
   );
-  return call;
-}
 
-/** True if the array already contains a `storybookAngularVitest(...)` call. */
-function arrayHasAngularVitest(array: t.ArrayExpression): boolean {
-  return array.elements.some(
-    (el) =>
-      el?.type === 'CallExpression' &&
-      el.callee.type === 'Identifier' &&
-      el.callee.name === ANGULAR_VITEST_PLUGIN_CALL
-  );
-}
+const isCallTo = (node: E.Node | null, names: Set<string>) =>
+  node?.type === 'CallExpression' &&
+  node.callee.type === 'Identifier' &&
+  names.has(node.callee.name);
 
 /**
- * Locates the `plugins` ArrayExpression that contains a (possibly aliased) `storybookTest()` call
- * and, if it is not already present, unshifts `storybookAngularVitest({})` so the bridge runs before
- * the addon's plugin. Also ensures the import. Operates on the AST in place so callers can inject
- * into an already-merged target before a single `generate`.
+ * Locates the `plugins` array that contains a (possibly aliased) `storybookTest()` call and, if it
+ * is not already present, prepends `storybookAngularVitest({})` so the bridge runs before the
+ * addon's plugin. Also ensures the import. Edits are left pending on the editor so callers can
+ * inject into an already-merged config before printing it once.
  *
  * Returns `false` when no such locatable array exists (e.g. `...storybookTest()` spread or other
  * exotic shapes) — the caller then falls back to the manual-setup guidance.
  */
-export function injectAngularVitestIntoAst(ast: BabelFile['ast']): boolean {
-  const localNames = collectStorybookTestLocalNames(ast);
-
-  let pluginsArray: t.ArrayExpression | null = null;
-
-  traverse(ast, {
-    CallExpression(path) {
-      if (pluginsArray) {
-        path.stop();
-        return;
-      }
-      const { callee } = path.node;
-      if (
-        callee.type === 'Identifier' &&
-        localNames.has(callee.name) &&
-        path.parentPath.isArrayExpression()
-      ) {
-        pluginsArray = path.parentPath.node as t.ArrayExpression;
-        path.stop();
-      }
-    },
+export function injectAngularVitestIntoEditor(editor: SourceEditor): boolean {
+  const { program } = editor;
+  const localNames = collectStorybookTestLocalNames(program);
+
+  let pluginsArray: E.ArrayExpression | undefined;
+  walk(program, (node, parent) => {
+    if (pluginsArray) {
+      return false;
+    }
+    if (parent?.type === 'ArrayExpression' && isCallTo(node, localNames)) {
+      pluginsArray = parent;
+    }
   });
-
   if (!pluginsArray) {
     return false;
   }
 
-  // Cast away the narrowing TS applies inside the visitor closure above.
-  const array = pluginsArray as t.ArrayExpression;
-  if (!arrayHasAngularVitest(array)) {
-    array.elements.unshift(buildAngularVitestCall());
+  const bridge = new Set([ANGULAR_VITEST_PLUGIN_CALL]);
+  if (!pluginsArray.elements.some((element) => isCallTo(element, bridge))) {
+    prependToList(
+      editor,
+      arrayList(pluginsArray),
+      [
+        `// Forwards Angular build options (styles, assets, zoneless, …) into standalone vitest runs\n${ANGULAR_VITEST_PLUGIN_CALL}({})`,
+      ],
+      ''
+    );
   }
 
-  ensureImport(ast);
+  if (!hasAngularVitestImport(program)) {
+    const statement = `import { ${ANGULAR_VITEST_PLUGIN_CALL} } from ${editor.quote}${ANGULAR_VITEST_IMPORT_SOURCE}${editor.quote};`;
+    const lastImport = program.body.findLast((node) => node.type === 'ImportDeclaration');
+    if (lastImport) {
+      editor.edits.appendLeft(lastImport.end, `\n${statement}`);
+    } else {
+      editor.edits.appendLeft(program.body[0].start, `${statement}\n`);
+    }
+  }
   return true;
 }
 
 /**
- * String-in / string-out convenience over {@link injectAngularVitestIntoAst} for the fresh-create
+ * String-in / string-out convenience over {@link injectAngularVitestIntoEditor} for the fresh-create
  * and re-read paths. Returns `null` when the content cannot be parsed or no locatable plugins array
  * is found.
  */
 export function injectAngularVitestIntoConfig(content: string): string | null {
-  let ast: BabelFile['ast'];
+  let editor: SourceEditor;
   try {
-    ast = babelParse(content);
+    editor = new SourceEditor(content);
   } catch {
     return null;
   }
-
-  if (!injectAngularVitestIntoAst(ast)) {
-    return null;
-  }
-
-  return generate(ast).code;
+  return injectAngularVitestIntoEditor(editor) ? editor.toString() : null;
 }
diff --git a/code/addons/vitest/src/postinstall.test.ts b/code/addons/vitest/src/postinstall.test.ts
index c14a1d1e592d..06b398667d99 100644
--- a/code/addons/vitest/src/postinstall.test.ts
+++ b/code/addons/vitest/src/postinstall.test.ts
@@ -1,12 +1,11 @@
 import { describe, expect, it, vi } from 'vitest';
 
-import type { types as t } from 'storybook/internal/babel';
-import { babelParse, generate, traverse } from 'storybook/internal/babel';
+import { SourceEditor, parseModule, walk } from 'storybook/internal/csf-tools';
 
 import {
   ANGULAR_VITEST_PLUGIN_CALL,
-  injectAngularVitestIntoAst,
   injectAngularVitestIntoConfig,
+  injectAngularVitestIntoEditor,
 } from './angular-vitest-postinstall.ts';
 import { getTemplateConfigDir, isConfigAlreadySetup } from './postinstall.ts';
 import { loadTemplate, updateConfigFile } from './updateVitestFile.ts';
@@ -20,28 +19,21 @@ vi.mock('storybook/internal/node-logger', () => ({
  * call, in source order. Asserts co-location: the Angular bridge must sit in the SAME array.
  */
 function pluginCalleesInSameArray(code: string, locatorName = 'storybookTest'): string[] | null {
-  const ast = babelParse(code);
   let elements: string[] | null = null;
-  traverse(ast, {
-    CallExpression(path) {
-      if (elements) {
-        path.stop();
-        return;
-      }
-      const { callee } = path.node;
-      if (
-        callee.type === 'Identifier' &&
-        callee.name === locatorName &&
-        path.parentPath.isArrayExpression()
-      ) {
-        elements = (path.parentPath.node as t.ArrayExpression).elements.map((el) =>
-          el?.type === 'CallExpression' && el.callee.type === 'Identifier'
-            ? el.callee.name
-            : 'other'
-        );
-        path.stop();
-      }
-    },
+  walk(parseModule(code).program, (node, parent) => {
+    if (elements) {
+      return false;
+    }
+    if (
+      node.type === 'CallExpression' &&
+      node.callee.type === 'Identifier' &&
+      node.callee.name === locatorName &&
+      parent?.type === 'ArrayExpression'
+    ) {
+      elements = parent.elements.map((el) =>
+        el?.type === 'CallExpression' && el.callee.type === 'Identifier' ? el.callee.name : 'other'
+      );
+    }
   });
   return elements;
 }
@@ -119,11 +111,9 @@ describe('Angular bridge wiring (postinstall integration)', () => {
 
   it('existing-config sequencing: merge storybookTest, then co-locate the bridge (case 4)', async () => {
     // Mirrors postinstall's existing-config branch: updateConfigFile merges the template into the
-    // user's vite config, then injectAngularVitestIntoAst runs on the SAME (merged) target.
-    const source = babelParse(
-      await loadTemplate('vitest.config.4.template', { CONFIG_DIR: '.storybook' })
-    );
-    const target = babelParse(`
+    // user's vite config, then injectAngularVitestIntoEditor runs on the SAME (merged) target.
+    const source = await loadTemplate('vitest.config.4.template', { CONFIG_DIR: '.storybook' });
+    const target = new SourceEditor(`
       import { defineConfig } from 'vite'
       import react from '@vitejs/plugin-react'
       export default defineConfig({
@@ -133,9 +123,9 @@ describe('Angular bridge wiring (postinstall integration)', () => {
     `);
 
     expect(updateConfigFile(source, target)).toBe(true);
-    expect(injectAngularVitestIntoAst(target)).toBe(true);
+    expect(injectAngularVitestIntoEditor(target)).toBe(true);
 
-    const after = generate(target).code;
+    const after = target.toString();
     expect(pluginCalleesInSameArray(after)).toEqual([ANGULAR_VITEST_PLUGIN_CALL, 'storybookTest']);
     // The bridge must NOT be deposited as a top-level plugins sibling (react stays alone).
     expect(pluginCalleesInSameArray(after, 'react')).toEqual(['react']);
@@ -145,16 +135,14 @@ describe('Angular bridge wiring (postinstall integration)', () => {
     // Function-notation configs (e.g. `defineConfig(() => ({ ... }))`) are now
     // supported by updateConfigFile, so the merge succeeds and the Angular bridge
     // co-locates with storybookTest in the same plugins array.
-    const source = babelParse(
-      await loadTemplate('vitest.config.4.template', { CONFIG_DIR: '.storybook' })
-    );
-    const target = babelParse(`
+    const source = await loadTemplate('vitest.config.4.template', { CONFIG_DIR: '.storybook' });
+    const target = new SourceEditor(`
       import { defineConfig } from 'vite'
       export default defineConfig(() => ({ test: { globals: true } }))
     `);
     expect(updateConfigFile(source, target)).toBe(true);
-    expect(injectAngularVitestIntoAst(target)).toBe(true);
-    expect(pluginCalleesInSameArray(generate(target).code)).toEqual([
+    expect(injectAngularVitestIntoEditor(target)).toBe(true);
+    expect(pluginCalleesInSameArray(target.toString())).toEqual([
       ANGULAR_VITEST_PLUGIN_CALL,
       'storybookTest',
     ]);
diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index 4d2a0893374e..89457fb75dda 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -2,7 +2,6 @@ import * as fs from 'node:fs/promises';
 import { writeFile } from 'node:fs/promises';
 import os from 'node:os';
 
-import { babelParse, generate, traverse } from 'storybook/internal/babel';
 import { AddonVitestService } from 'storybook/internal/cli';
 import {
   JsPackageManagerFactory,
@@ -11,6 +10,7 @@ import {
   getStorybookInfo,
   versions,
 } from 'storybook/internal/common';
+import { type ESTree as E, SourceEditor, parseModule, walk } from 'storybook/internal/csf-tools';
 import { CLI_COLORS } from 'storybook/internal/node-logger';
 import type { StorybookError } from 'storybook/internal/server-errors';
 import {
@@ -26,7 +26,7 @@ import { dedent } from 'ts-dedent';
 
 import { type PostinstallOptions } from '../../../lib/cli-storybook/src/add.ts';
 import {
-  injectAngularVitestIntoAst,
+  injectAngularVitestIntoEditor,
   injectAngularVitestIntoConfig,
   isAngularVitestAlreadyWired,
 } from './angular-vitest-postinstall.ts';
@@ -231,9 +231,8 @@ export default async function postInstall(options: PostinstallOptions) {
         CONFIG_DIR: getTemplateConfigDir(rootConfig, options.configDir),
       });
 
-      const source = babelParse(configTemplate);
-      target = babelParse(configFile);
-      updated = updateConfigFile(source, target);
+      target = new SourceEditor(configFile, rootConfig);
+      updated = updateConfigFile(configTemplate, target);
     }
 
     if (alreadyConfigured) {
@@ -248,11 +247,11 @@ export default async function postInstall(options: PostinstallOptions) {
       logger.log(`  ${rootConfig}`);
 
       // Inject the Angular bridge into the already-merged target so it co-locates with the freshly
-      // added storybookTest call, before the single generate/format/write below. Arrow-function
+      // added storybookTest call, before the single format/write below. Arrow-function
       // configs are rejected by updateConfigFile (updated is falsy), so they never reach here and
       // defer to the manual-setup error in the else branch.
       if (isAngularVite && !isAngularVitestAlreadyWired(configFile)) {
-        if (injectAngularVitestIntoAst(target)) {
+        if (injectAngularVitestIntoEditor(target)) {
           logger.step('Added the @storybook/angular-vite standalone-vitest bridge.');
         } else {
           logger.error(dedent`
@@ -268,7 +267,7 @@ export default async function postInstall(options: PostinstallOptions) {
         }
       }
 
-      const formattedContent = await formatFileContent(rootConfig, generate(target).code);
+      const formattedContent = await formatFileContent(rootConfig, target.toString());
       // Only add triple slash reference to vite.config files, not vitest.config files
       // vitest.config files already have the vitest/config types available
       const shouldAddReference = !configFileHasTypeReference && !vitestConfigFile;
@@ -346,46 +345,32 @@ function isStorybookTestPluginSource(value: string) {
 }
 
 export function isConfigAlreadySetup(_configPath: string, configContent: string) {
-  let ast: ReturnType<typeof babelParse>;
+  let program: E.Program;
   try {
-    ast = babelParse(configContent);
-  } catch (e) {
+    ({ program } = parseModule(configContent));
+  } catch {
     return false;
   }
 
-  const pluginIdentifiers = new Set<string>();
-
-  traverse(ast, {
-    ImportDeclaration(path) {
-      const source = path.node.source.value;
-      if (typeof source === 'string' && isStorybookTestPluginSource(source)) {
-        path.node.specifiers.forEach((specifier) => {
-          if ('local' in specifier && specifier.local?.name) {
-            pluginIdentifiers.add(specifier.local.name);
-          }
-        });
-      }
-    },
-  });
+  const pluginIdentifiers = new Set<string>(['storybookTest']);
+  for (const node of program.body) {
+    if (node.type === 'ImportDeclaration' && isStorybookTestPluginSource(node.source.value)) {
+      node.specifiers.forEach((specifier) => pluginIdentifiers.add(specifier.local.name));
+    }
+  }
 
   let pluginReferenced = false;
-
-  traverse(ast, {
-    CallExpression(path) {
-      if (pluginReferenced) {
-        path.stop();
-        return;
-      }
-      const callee = path.node.callee;
-      if (
-        callee.type === 'Identifier' &&
-        (pluginIdentifiers.has(callee.name) || callee.name === 'storybookTest')
-      ) {
-        pluginReferenced = true;
-        path.stop();
-      }
-    },
+  walk(program, (node) => {
+    if (pluginReferenced) {
+      return false;
+    }
+    if (
+      node.type === 'CallExpression' &&
+      node.callee.type === 'Identifier' &&
+      pluginIdentifiers.has(node.callee.name)
+    ) {
+      pluginReferenced = true;
+    }
   });
-
   return pluginReferenced;
 }
diff --git a/code/addons/vitest/src/updateVitestFile.config.4.test.ts b/code/addons/vitest/src/updateVitestFile.config.4.test.ts
index 81b391e725f9..8de9ce954fb7 100644
--- a/code/addons/vitest/src/updateVitestFile.config.4.test.ts
+++ b/code/addons/vitest/src/updateVitestFile.config.4.test.ts
@@ -2,7 +2,7 @@ import { join } from 'node:path';
 
 import { describe, expect, it, vi } from 'vitest';
 
-import * as babel from 'storybook/internal/babel';
+import { SourceEditor } from 'storybook/internal/csf-tools';
 
 import { getDiff } from '../../../core/src/core-server/utils/save-story/getDiff.ts';
 import { loadTemplate, updateConfigFile } from './updateVitestFile.ts';
@@ -21,15 +21,13 @@ vi.mock('../../../core/src/shared/utils/module', () => ({
 
 describe('updateConfigFile', () => {
   it('updates vite config file with existing projects', async () => {
-    const source = babel.babelParse(
-      await loadTemplate('vitest.config.4.template', {
-        CONFIG_DIR: '.storybook',
-        BROWSER_CONFIG: "{ provider: 'playwright' }",
-        SETUP_FILE: '../.storybook/vitest.setup.ts',
-      })
-    );
+    const source = await loadTemplate('vitest.config.4.template', {
+      CONFIG_DIR: '.storybook',
+      BROWSER_CONFIG: "{ provider: 'playwright' }",
+      SETUP_FILE: '../.storybook/vitest.setup.ts',
+    });
     // In Vitest 4, `workspace` doesn't exist — users have `projects`
-    const target = babel.babelParse(`
+    const target = new SourceEditor(`
       /// <reference types="vitest/config" />
       import { defineConfig } from 'vite'
       import react from '@vitejs/plugin-react'
@@ -44,11 +42,11 @@ describe('updateConfigFile', () => {
       })
     `);
 
-    const before = babel.generate(target).code;
+    const before = target.code;
     const updated = updateConfigFile(source, target);
     expect(updated).toBe(true);
 
-    const after = babel.generate(target).code;
+    const after = target.toString();
 
     // check if the code was updated at all
     expect(after).not.toBe(before);
@@ -56,61 +54,62 @@ describe('updateConfigFile', () => {
     // check if the code was updated correctly — appends to existing projects array
     expect(getDiff(before, after)).toMatchInlineSnapshot(`
       "  ...
-        import react from '@vitejs/plugin-react';
-        
-        // https://vite.dev/config/
+              /// <reference types="vitest/config" />
+              import { defineConfig } from 'vite'
+              import react from '@vitejs/plugin-react'
         
       + import path from 'node:path';
       + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+      + const dirname =
+      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
+        
+        
       + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        export default defineConfig({
-          plugins: [react()],
-          test: {
-            globals: true,
+      + 
+              // https://vite.dev/config/
+              export default defineConfig({
+                plugins: [react()],
+                test: {
+                  globals: true,
         
-      -     projects: ['packages/*']
+      -           projects: ['packages/*']
       - 
-      +     projects: ['packages/*', {
-      +       extends: true,
-      +       plugins: [
-      +       // The plugin will run tests for the stories defined in your Storybook config
-      +       // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +       storybookTest({
-      +         configDir: path.join(dirname, '.storybook')
-      +       })],
-      +       test: {
-      +         name: 'storybook',
-      +         browser: {
-      +           enabled: true,
-      +           headless: true,
-      +           provider: playwright({}),
-      +           instances: [{
-      +             browser: 'chromium'
+      +           projects: ['packages/*', {
+      +             extends: true,
+      +             plugins: [
+      +               // The plugin will run tests for the stories defined in your Storybook config
+      +               // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +               storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +             ],
+      +             test: {
+      +               name: 'storybook',
+      +               browser: {
+      +                 enabled: true,
+      +                 headless: true,
+      +                 provider: playwright({}),
+      +                 instances: [{ browser: 'chromium' }],
+      +               },
+      +             },
       +           }]
-      +         }
-      +       }
-      +     }]
       + 
-          }
-        });"
+                },
+              })
+            "
     `);
   });
 
   it('supports object notation without defineConfig with existing projects', async () => {
-    const source = babel.babelParse(
-      await loadTemplate('vitest.config.4.template', {
-        CONFIG_DIR: '.storybook',
-        BROWSER_CONFIG: "{ provider: 'playwright' }",
-        SETUP_FILE: '../.storybook/vitest.setup.ts',
-      })
-    );
+    const source = await loadTemplate('vitest.config.4.template', {
+      CONFIG_DIR: '.storybook',
+      BROWSER_CONFIG: "{ provider: 'playwright' }",
+      SETUP_FILE: '../.storybook/vitest.setup.ts',
+    });
     // In Vitest 4, `workspace` doesn't exist — users have `projects`
-    const target = babel.babelParse(`
+    const target = new SourceEditor(`
       /// <reference types="vitest/config" />
       import react from '@vitejs/plugin-react'
 
@@ -124,73 +123,73 @@ describe('updateConfigFile', () => {
       }
     `);
 
-    const before = babel.generate(target).code;
+    const before = target.code;
     const updated = updateConfigFile(source, target);
     expect(updated).toBe(true);
 
-    const after = babel.generate(target).code;
+    const after = target.toString();
 
     // check if the code was updated at all
     expect(after).not.toBe(before);
 
     // check if the code was updated correctly — appends to existing projects array
     expect(getDiff(before, after)).toMatchInlineSnapshot(`
-      "  ...
-        import react from '@vitejs/plugin-react';
-        
-        // https://vite.dev/config/
+      "  
+              /// <reference types="vitest/config" />
+              import react from '@vitejs/plugin-react'
         
       + import path from 'node:path';
       + import { fileURLToPath } from 'node:url';
       + import { defineConfig } from 'vitest/config';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+      + const dirname =
+      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
+        
+        
       + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        export default {
-          plugins: [react()],
-          test: {
-            globals: true,
+      + 
+              // https://vite.dev/config/
+              export default {
+                plugins: [react()],
+                test: {
+                  globals: true,
         
-      -     projects: ['packages/*']
+      -           projects: ['packages/*']
       - 
-      +     projects: ['packages/*', {
-      +       extends: true,
-      +       plugins: [
-      +       // The plugin will run tests for the stories defined in your Storybook config
-      +       // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +       storybookTest({
-      +         configDir: path.join(dirname, '.storybook')
-      +       })],
-      +       test: {
-      +         name: 'storybook',
-      +         browser: {
-      +           enabled: true,
-      +           headless: true,
-      +           provider: playwright({}),
-      +           instances: [{
-      +             browser: 'chromium'
+      +           projects: ['packages/*', {
+      +             extends: true,
+      +             plugins: [
+      +               // The plugin will run tests for the stories defined in your Storybook config
+      +               // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +               storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +             ],
+      +             test: {
+      +               name: 'storybook',
+      +               browser: {
+      +                 enabled: true,
+      +                 headless: true,
+      +                 provider: playwright({}),
+      +                 instances: [{ browser: 'chromium' }],
+      +               },
+      +             },
       +           }]
-      +         }
-      +       }
-      +     }]
       + 
-          }
-        };"
+                },
+              }
+            "
     `);
   });
 
   it('supports function notation when defineConfig callback returns an object literal', async () => {
-    const source = babel.babelParse(
-      await loadTemplate('vitest.config.4.template', {
-        CONFIG_DIR: '.storybook',
-        BROWSER_CONFIG: "{ provider: 'playwright' }",
-        SETUP_FILE: '../.storybook/vitest.setup.ts',
-      })
-    );
-    const target = babel.babelParse(`
+    const source = await loadTemplate('vitest.config.4.template', {
+      CONFIG_DIR: '.storybook',
+      BROWSER_CONFIG: "{ provider: 'playwright' }",
+      SETUP_FILE: '../.storybook/vitest.setup.ts',
+    });
+    const target = new SourceEditor(`
       /// <reference types="vitest" />
 
       import angular from '@analogjs/vite-plugin-angular';
@@ -217,94 +216,92 @@ describe('updateConfigFile', () => {
       });
     `);
 
-    const before = babel.generate(target).code;
+    const before = target.code;
     const updated = updateConfigFile(source, target);
     expect(updated).toBe(true);
 
-    const after = babel.generate(target).code;
+    const after = target.toString();
     expect(after).not.toBe(before);
     expect(getDiff(before, after)).toMatchInlineSnapshot(`
       "  ...
-        import { defineConfig } from 'vite';
-        
-        // https://vitejs.dev/config/
+              import angular from '@analogjs/vite-plugin-angular';
+              import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+              import { defineConfig } from 'vite';
         
       + import path from 'node:path';
       + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+      + const dirname =
+      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
+        
+        
       + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        export default defineConfig(({
-          mode
-        }) => {
-          return {
-            plugins: [angular(), nxViteTsPaths()],
-        
-      -     test: {
-      -       globals: true,
-      -       environment: 'jsdom',
-      -       setupFiles: ['src/test-setup.ts'],
-      -       include: ['**/*.spec.ts'],
-      -       reporters: ['default'],
-      -       hideSkippedTests: true,
-      -       passWithNoTests: true
-      -     },
+      + 
+              // https://vitejs.dev/config/
+              export default defineConfig(({ mode }) => {
+                return {
+                  plugins: [angular(), nxViteTsPaths()],
+                  test: {
+        
+      -             globals: true,
+      -             environment: 'jsdom',
+      -             setupFiles: ['src/test-setup.ts'],
+      -             include: ['**/*.spec.ts'],
       - 
-            define: {
-              'import.meta.vitest': mode !== 'production'
-        
-      +     },
-      +     test: {
-      +       reporters: ['default'],
-      +       passWithNoTests: true,
-      +       projects: [{
-      +         extends: true,
-      +         test: {
-      +           globals: true,
-      +           environment: 'jsdom',
-      +           setupFiles: ['src/test-setup.ts'],
-      +           include: ['**/*.spec.ts'],
-      +           hideSkippedTests: true
-      +         }
-      +       }, {
-      +         extends: true,
-      +         plugins: [
-      +         // The plugin will run tests for the stories defined in your Storybook config
-      +         // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +         storybookTest({
-      +           configDir: path.join(dirname, '.storybook')
-      +         })],
-      +         test: {
-      +           name: 'storybook',
-      +           browser: {
-      +             enabled: true,
-      +             headless: true,
-      +             provider: playwright({}),
-      +             instances: [{
-      +               browser: 'chromium'
-      +             }]
-      +           }
-      +         }
-      +       }]
-      + 
-            }
-          };
-        });"
+                    reporters: ['default'],
+        
+      -             hideSkippedTests: true,
+      - 
+                    passWithNoTests: true,
+        
+      +             projects: [
+      +               {
+      +                 extends: true,
+      +                 test: {
+      +                   globals: true,
+      +                   environment: 'jsdom',
+      +                   setupFiles: ['src/test-setup.ts'],
+      +                   include: ['**/*.spec.ts'],
+      +                   hideSkippedTests: true,
+      +                 },
+      +               },
+      +               {
+      +                 extends: true,
+      +                 plugins: [
+      +                   // The plugin will run tests for the stories defined in your Storybook config
+      +                   // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +                   storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                 ],
+      +                 test: {
+      +                   name: 'storybook',
+      +                   browser: {
+      +                     enabled: true,
+      +                     headless: true,
+      +                     provider: playwright({}),
+      +                     instances: [{ browser: 'chromium' }],
+      +                   },
+      +                 },
+      +               },
+      +             ],
+      + 
+                  },
+                  define: {
+                    'import.meta.vitest': mode !== 'production',
+                  },
+        ..."
     `);
   });
 
   it('does not support complex function notation', async () => {
-    const source = babel.babelParse(
-      await loadTemplate('vitest.config.4.template', {
-        CONFIG_DIR: '.storybook',
-        BROWSER_CONFIG: "{ provider: 'playwright' }",
-        SETUP_FILE: '../.storybook/vitest.setup.ts',
-      })
-    );
-    const target = babel.babelParse(`
+    const source = await loadTemplate('vitest.config.4.template', {
+      CONFIG_DIR: '.storybook',
+      BROWSER_CONFIG: "{ provider: 'playwright' }",
+      SETUP_FILE: '../.storybook/vitest.setup.ts',
+    });
+    const target = new SourceEditor(`
       /// <reference types="vitest/config" />
       import react from '@vitejs/plugin-react'
 
@@ -330,25 +327,23 @@ describe('updateConfigFile', () => {
       })
     `);
 
-    const before = babel.generate(target).code;
+    const before = target.code;
     const updated = updateConfigFile(source, target);
     expect(updated).toBe(false);
 
-    const after = babel.generate(target).code;
+    const after = target.toString();
 
     // check if the code was NOT updated
     expect(after).toBe(before);
   });
 
   it('adds projects property to test config', async () => {
-    const source = babel.babelParse(
-      await loadTemplate('vitest.config.4.template', {
-        CONFIG_DIR: '.storybook',
-        BROWSER_CONFIG: "{ provider: 'playwright' }",
-        SETUP_FILE: '../.storybook/vitest.setup.ts',
-      })
-    );
-    const target = babel.babelParse(`
+    const source = await loadTemplate('vitest.config.4.template', {
+      CONFIG_DIR: '.storybook',
+      BROWSER_CONFIG: "{ provider: 'playwright' }",
+      SETUP_FILE: '../.storybook/vitest.setup.ts',
+    });
+    const target = new SourceEditor(`
       /// <reference types="vitest/config" />
       import { defineConfig } from 'vite'
       import react from '@vitejs/plugin-react'
@@ -362,11 +357,11 @@ describe('updateConfigFile', () => {
       })
     `);
 
-    const before = babel.generate(target).code;
+    const before = target.code;
     const updated = updateConfigFile(source, target);
     expect(updated).toBe(true);
 
-    const after = babel.generate(target).code;
+    const after = target.toString();
 
     // check if the code was updated at all
     expect(after).not.toBe(before);
@@ -374,64 +369,68 @@ describe('updateConfigFile', () => {
     // check if the code was updated correctly
     expect(getDiff(before, after)).toMatchInlineSnapshot(`
       "  ...
-        import react from '@vitejs/plugin-react';
-        
-        // https://vite.dev/config/
+              /// <reference types="vitest/config" />
+              import { defineConfig } from 'vite'
+              import react from '@vitejs/plugin-react'
         
       + import path from 'node:path';
       + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+      + const dirname =
+      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
+        
+        
       + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        export default defineConfig({
-          plugins: [react()],
-          test: {
+      + 
+              // https://vite.dev/config/
+              export default defineConfig({
+                plugins: [react()],
+                test: {
         
-      -     globals: true
+      -           globals: true,
       - 
-      +     projects: [{
-      +       extends: true,
-      +       test: {
-      +         globals: true
-      +       }
-      +     }, {
-      +       extends: true,
-      +       plugins: [
-      +       // The plugin will run tests for the stories defined in your Storybook config
-      +       // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +       storybookTest({
-      +         configDir: path.join(dirname, '.storybook')
-      +       })],
-      +       test: {
-      +         name: 'storybook',
-      +         browser: {
-      +           enabled: true,
-      +           headless: true,
-      +           provider: playwright({}),
-      +           instances: [{
-      +             browser: 'chromium'
-      +           }]
-      +         }
-      +       }
-      +     }]
-      + 
-          }
-        });"
+      +           projects: [
+      +             {
+      +               extends: true,
+      +               test: {
+      +                 globals: true,
+      +               },
+      +             },
+      +             {
+      +               extends: true,
+      +               plugins: [
+      +                 // The plugin will run tests for the stories defined in your Storybook config
+      +                 // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +                 storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +               ],
+      +               test: {
+      +                 name: 'storybook',
+      +                 browser: {
+      +                   enabled: true,
+      +                   headless: true,
+      +                   provider: playwright({}),
+      +                   instances: [{ browser: 'chromium' }],
+      +                 },
+      +               },
+      +             },
+      +           ],
+      + 
+                },
+              })
+            "
     `);
   });
 
   it('updates config which is not exported immediately', async () => {
-    const source = babel.babelParse(
-      await loadTemplate('vitest.config.4.template', {
-        CONFIG_DIR: '.storybook',
-        BROWSER_CONFIG: "{ provider: 'playwright' }",
-        SETUP_FILE: '../.storybook/vitest.setup.ts',
-      })
-    );
-    const target = babel.babelParse(`
+    const source = await loadTemplate('vitest.config.4.template', {
+      CONFIG_DIR: '.storybook',
+      BROWSER_CONFIG: "{ provider: 'playwright' }",
+      SETUP_FILE: '../.storybook/vitest.setup.ts',
+    });
+    const target = new SourceEditor(`
       import { defineConfig } from 'vite'
       import viteReact from '@vitejs/plugin-react'
       import { fileURLToPath, URL } from 'url'
@@ -451,72 +450,74 @@ describe('updateConfigFile', () => {
       export default config
     `);
 
-    const before = babel.generate(target).code;
+    const before = target.code;
     const updated = updateConfigFile(source, target);
     expect(updated).toBe(true);
 
-    const after = babel.generate(target).code;
+    const after = target.toString();
 
     expect(getDiff(before, after)).toMatchInlineSnapshot(`
-      "  import { defineConfig } from 'vite';
-        import viteReact from '@vitejs/plugin-react';
-        import { fileURLToPath, URL } from 'url';
+      "  ...
+              import { defineConfig } from 'vite'
+              import viteReact from '@vitejs/plugin-react'
+              import { fileURLToPath, URL } from 'url'
         
       + import path from 'node:path';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+      + const dirname =
+      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
+        
+        
       + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        const config = defineConfig({
-          resolve: {
-            preserveSymlinks: true,
-            alias: {
-              '@': fileURLToPath(new URL('./src', import.meta.url))
-            }
-          },
+      + 
+              const config = defineConfig({
+                resolve: {
+                  preserveSymlinks: true,
+                  alias: {
+      ...
+                plugins: [
+                  viteReact(),
+                ],
         
-      -   plugins: [viteReact()]
-      - 
-      +   plugins: [viteReact()],
-      +   test: {
-      +     projects: [{
-      +       extends: true,
-      +       plugins: [
-      +       // The plugin will run tests for the stories defined in your Storybook config
-      +       // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +       storybookTest({
-      +         configDir: path.join(dirname, '.storybook')
-      +       })],
-      +       test: {
-      +         name: 'storybook',
-      +         browser: {
-      +           enabled: true,
-      +           headless: true,
-      +           provider: playwright({}),
-      +           instances: [{
-      +             browser: 'chromium'
-      +           }]
-      +         }
-      +       }
-      +     }]
-      +   }
+      +         test: {
+      +           projects: [
+      +             {
+      +               extends: true,
+      +               plugins: [
+      +                 // The plugin will run tests for the stories defined in your Storybook config
+      +                 // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +                 storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +               ],
+      +               test: {
+      +                 name: 'storybook',
+      +                 browser: {
+      +                   enabled: true,
+      +                   headless: true,
+      +                   provider: playwright({}),
+      +                   instances: [{ browser: 'chromium' }],
+      +                 },
+      +               },
+      +             },
+      +           ],
+      +         },
       + 
-        });
-        export default config;"
+              })
+        
+              export default config
+            "
     `);
   });
 
   it('edits projects property of test config', async () => {
-    const source = babel.babelParse(
-      await loadTemplate('vitest.config.4.template', {
-        CONFIG_DIR: '.storybook',
-        BROWSER_CONFIG: "{ provider: 'playwright' }",
-        SETUP_FILE: '../.storybook/vitest.setup.ts',
-      })
-    );
-    const target = babel.babelParse(`
+    const source = await loadTemplate('vitest.config.4.template', {
+      CONFIG_DIR: '.storybook',
+      BROWSER_CONFIG: "{ provider: 'playwright' }",
+      SETUP_FILE: '../.storybook/vitest.setup.ts',
+    });
+    const target = new SourceEditor(`
       /// <reference types="vitest/config" />
       import { defineConfig } from 'vite'
       import react from '@vitejs/plugin-react'
@@ -531,11 +532,11 @@ describe('updateConfigFile', () => {
       })
     `);
 
-    const before = babel.generate(target).code;
+    const before = target.code;
     const updated = updateConfigFile(source, target);
     expect(updated).toBe(true);
 
-    const after = babel.generate(target).code;
+    const after = target.toString();
 
     // check if the code was updated at all
     expect(after).not.toBe(before);
@@ -543,60 +544,61 @@ describe('updateConfigFile', () => {
     // check if the code was updated correctly
     expect(getDiff(before, after)).toMatchInlineSnapshot(`
       "  ...
-        import react from '@vitejs/plugin-react';
-        
-        // https://vite.dev/config/
+              /// <reference types="vitest/config" />
+              import { defineConfig } from 'vite'
+              import react from '@vitejs/plugin-react'
         
       + import path from 'node:path';
       + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+      + const dirname =
+      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
+        
+        
       + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        export default defineConfig({
-          plugins: [react()],
-          test: {
-            globals: true,
-            projects: ['packages/*', {
-              some: 'config'
-        
-      +     }, {
-      +       extends: true,
-      +       plugins: [
-      +       // The plugin will run tests for the stories defined in your Storybook config
-      +       // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +       storybookTest({
-      +         configDir: path.join(dirname, '.storybook')
-      +       })],
-      +       test: {
-      +         name: 'storybook',
-      +         browser: {
-      +           enabled: true,
-      +           headless: true,
-      +           provider: playwright({}),
-      +           instances: [{
-      +             browser: 'chromium'
+      + 
+              // https://vite.dev/config/
+              export default defineConfig({
+                plugins: [react()],
+                test: {
+                  globals: true,
+        
+      -           projects: ['packages/*', {some: 'config'}]
+      - 
+      +           projects: ['packages/*', {some: 'config'}, {
+      +             extends: true,
+      +             plugins: [
+      +               // The plugin will run tests for the stories defined in your Storybook config
+      +               // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +               storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +             ],
+      +             test: {
+      +               name: 'storybook',
+      +               browser: {
+      +                 enabled: true,
+      +                 headless: true,
+      +                 provider: playwright({}),
+      +                 instances: [{ browser: 'chromium' }],
+      +               },
+      +             },
       +           }]
-      +         }
-      +       }
       + 
-            }]
-          }
-        });"
+                }
+              })
+            "
     `);
   });
 
   it('adds projects property to test config', async () => {
-    const source = babel.babelParse(
-      await loadTemplate('vitest.config.4.template', {
-        CONFIG_DIR: '.storybook',
-        BROWSER_CONFIG: "{ provider: 'playwright' }",
-        SETUP_FILE: '../.storybook/vitest.setup.ts',
-      })
-    );
-    const target = babel.babelParse(`
+    const source = await loadTemplate('vitest.config.4.template', {
+      CONFIG_DIR: '.storybook',
+      BROWSER_CONFIG: "{ provider: 'playwright' }",
+      SETUP_FILE: '../.storybook/vitest.setup.ts',
+    });
+    const target = new SourceEditor(`
       /// <reference types="vitest/config" />
       import { defineConfig } from 'vite'
       import react from '@vitejs/plugin-react'
@@ -610,11 +612,11 @@ describe('updateConfigFile', () => {
       })
     `);
 
-    const before = babel.generate(target).code;
+    const before = target.code;
     const updated = updateConfigFile(source, target);
     expect(updated).toBe(true);
 
-    const after = babel.generate(target).code;
+    const after = target.toString();
 
     // check if the code was updated at all
     expect(after).not.toBe(before);
@@ -622,64 +624,68 @@ describe('updateConfigFile', () => {
     // check if the code was updated correctly
     expect(getDiff(before, after)).toMatchInlineSnapshot(`
       "  ...
-        import react from '@vitejs/plugin-react';
-        
-        // https://vite.dev/config/
+              /// <reference types="vitest/config" />
+              import { defineConfig } from 'vite'
+              import react from '@vitejs/plugin-react'
         
       + import path from 'node:path';
       + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+      + const dirname =
+      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
+        
+        
       + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        export default defineConfig({
-          plugins: [react()],
-          test: {
+      + 
+              // https://vite.dev/config/
+              export default defineConfig({
+                plugins: [react()],
+                test: {
         
-      -     globals: true
+      -           globals: true,
       - 
-      +     projects: [{
-      +       extends: true,
-      +       test: {
-      +         globals: true
-      +       }
-      +     }, {
-      +       extends: true,
-      +       plugins: [
-      +       // The plugin will run tests for the stories defined in your Storybook config
-      +       // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +       storybookTest({
-      +         configDir: path.join(dirname, '.storybook')
-      +       })],
-      +       test: {
-      +         name: 'storybook',
-      +         browser: {
-      +           enabled: true,
-      +           headless: true,
-      +           provider: playwright({}),
-      +           instances: [{
-      +             browser: 'chromium'
-      +           }]
-      +         }
-      +       }
-      +     }]
-      + 
-          }
-        });"
+      +           projects: [
+      +             {
+      +               extends: true,
+      +               test: {
+      +                 globals: true,
+      +               },
+      +             },
+      +             {
+      +               extends: true,
+      +               plugins: [
+      +                 // The plugin will run tests for the stories defined in your Storybook config
+      +                 // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +                 storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +               ],
+      +               test: {
+      +                 name: 'storybook',
+      +                 browser: {
+      +                   enabled: true,
+      +                   headless: true,
+      +                   provider: playwright({}),
+      +                   instances: [{ browser: 'chromium' }],
+      +                 },
+      +               },
+      +             },
+      +           ],
+      + 
+                },
+              })
+            "
     `);
   });
 
   it('adds test property to vite config', async () => {
-    const source = babel.babelParse(
-      await loadTemplate('vitest.config.4.template', {
-        CONFIG_DIR: '.storybook',
-        BROWSER_CONFIG: "{ provider: 'playwright' }",
-        SETUP_FILE: '../.storybook/vitest.setup.ts',
-      })
-    );
-    const target = babel.babelParse(`
+    const source = await loadTemplate('vitest.config.4.template', {
+      CONFIG_DIR: '.storybook',
+      BROWSER_CONFIG: "{ provider: 'playwright' }",
+      SETUP_FILE: '../.storybook/vitest.setup.ts',
+    });
+    const target = new SourceEditor(`
       /// <reference types="vitest/config" />
       import { defineConfig } from 'vite'
       import react from '@vitejs/plugin-react'
@@ -690,11 +696,11 @@ describe('updateConfigFile', () => {
       })
     `);
 
-    const before = babel.generate(target).code;
+    const before = target.code;
     const updated = updateConfigFile(source, target);
     expect(updated).toBe(true);
 
-    const after = babel.generate(target).code;
+    const after = target.toString();
 
     // check if the code was updated at all
     expect(after).not.toBe(before);
@@ -702,59 +708,60 @@ describe('updateConfigFile', () => {
     // check if the code was updated correctly
     expect(getDiff(before, after)).toMatchInlineSnapshot(`
       "  ...
-        import react from '@vitejs/plugin-react';
-        
-        // https://vite.dev/config/
+              /// <reference types="vitest/config" />
+              import { defineConfig } from 'vite'
+              import react from '@vitejs/plugin-react'
         
       + import path from 'node:path';
       + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+      + const dirname =
+      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
+        
+        
       + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        export default defineConfig({
+      + 
+              // https://vite.dev/config/
+              export default defineConfig({
+                plugins: [react()],
         
-      -   plugins: [react()]
-      - 
-      +   plugins: [react()],
-      +   test: {
-      +     projects: [{
-      +       extends: true,
-      +       plugins: [
-      +       // The plugin will run tests for the stories defined in your Storybook config
-      +       // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +       storybookTest({
-      +         configDir: path.join(dirname, '.storybook')
-      +       })],
-      +       test: {
-      +         name: 'storybook',
-      +         browser: {
-      +           enabled: true,
-      +           headless: true,
-      +           provider: playwright({}),
-      +           instances: [{
-      +             browser: 'chromium'
-      +           }]
-      +         }
-      +       }
-      +     }]
-      +   }
+      +         test: {
+      +           projects: [
+      +             {
+      +               extends: true,
+      +               plugins: [
+      +                 // The plugin will run tests for the stories defined in your Storybook config
+      +                 // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +                 storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +               ],
+      +               test: {
+      +                 name: 'storybook',
+      +                 browser: {
+      +                   enabled: true,
+      +                   headless: true,
+      +                   provider: playwright({}),
+      +                   instances: [{ browser: 'chromium' }],
+      +                 },
+      +               },
+      +             },
+      +           ],
+      +         },
       + 
-        });"
+              })
+            "
     `);
   });
 
   it('supports mergeConfig with multiple defineConfig calls, finding the one with test', async () => {
-    const source = babel.babelParse(
-      await loadTemplate('vitest.config.4.template', {
-        CONFIG_DIR: '.storybook',
-        BROWSER_CONFIG: "{ provider: 'playwright' }",
-        SETUP_FILE: '../.storybook/vitest.setup.ts',
-      })
-    );
-    const target = babel.babelParse(`
+    const source = await loadTemplate('vitest.config.4.template', {
+      CONFIG_DIR: '.storybook',
+      BROWSER_CONFIG: "{ provider: 'playwright' }",
+      SETUP_FILE: '../.storybook/vitest.setup.ts',
+    });
+    const target = new SourceEditor(`
       import { mergeConfig } from 'vite'
       import { defineConfig } from 'vitest/config'
       import viteConfig from './vite.config'
@@ -772,75 +779,83 @@ describe('updateConfigFile', () => {
       )
     `);
 
-    const before = babel.generate(target).code;
+    const before = target.code;
     const updated = updateConfigFile(source, target);
     expect(updated).toBe(true);
 
-    const after = babel.generate(target).code;
+    const after = target.toString();
 
     // check if the code was updated at all
     expect(after).not.toBe(before);
 
     // check if the code was updated correctly
     expect(getDiff(before, after)).toMatchInlineSnapshot(`
-      "  import { mergeConfig } from 'vite';
-        import { defineConfig } from 'vitest/config';
-        import viteConfig from './vite.config';
+      "  ...
+              import { mergeConfig } from 'vite'
+              import { defineConfig } from 'vitest/config'
+              import viteConfig from './vite.config'
         
       + import path from 'node:path';
       + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+      + const dirname =
+      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
+        
+        
       + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        export default mergeConfig(viteConfig, defineConfig({
-          plugins: [react()]
-        }), defineConfig({
-          test: {
+      + 
+              export default mergeConfig(
+                viteConfig,
+                defineConfig({
+                  plugins: [react()],
+                }),
+                defineConfig({
+                  test: {
         
-      -     environment: 'jsdom'
+      -             environment: 'jsdom',
       - 
-      +     projects: [{
-      +       extends: true,
-      +       test: {
-      +         environment: 'jsdom'
-      +       }
-      +     }, {
-      +       extends: true,
-      +       plugins: [
-      +       // The plugin will run tests for the stories defined in your Storybook config
-      +       // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +       storybookTest({
-      +         configDir: path.join(dirname, '.storybook')
-      +       })],
-      +       test: {
-      +         name: 'storybook',
-      +         browser: {
-      +           enabled: true,
-      +           headless: true,
-      +           provider: playwright({}),
-      +           instances: [{
-      +             browser: 'chromium'
-      +           }]
-      +         }
-      +       }
-      +     }]
-      + 
-          }
-        }));"
+      +             projects: [
+      +               {
+      +                 extends: true,
+      +                 test: {
+      +                   environment: 'jsdom',
+      +                 },
+      +               },
+      +               {
+      +                 extends: true,
+      +                 plugins: [
+      +                   // The plugin will run tests for the stories defined in your Storybook config
+      +                   // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +                   storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                 ],
+      +                 test: {
+      +                   name: 'storybook',
+      +                   browser: {
+      +                     enabled: true,
+      +                     headless: true,
+      +                     provider: playwright({}),
+      +                     instances: [{ browser: 'chromium' }],
+      +                   },
+      +                 },
+      +               },
+      +             ],
+      + 
+                  }
+                })
+              )
+            "
     `);
   });
   it('supports mergeConfig without defineConfig calls', async () => {
-    const source = babel.babelParse(
-      await loadTemplate('vitest.config.4.template', {
-        CONFIG_DIR: '.storybook',
-        BROWSER_CONFIG: "{ provider: 'playwright' }",
-        SETUP_FILE: '../.storybook/vitest.setup.ts',
-      })
-    );
-    const target = babel.babelParse(`
+    const source = await loadTemplate('vitest.config.4.template', {
+      CONFIG_DIR: '.storybook',
+      BROWSER_CONFIG: "{ provider: 'playwright' }",
+      SETUP_FILE: '../.storybook/vitest.setup.ts',
+    });
+    const target = new SourceEditor(`
       import { mergeConfig } from 'vite'
       import viteConfig from './vite.config'
 
@@ -855,75 +870,82 @@ describe('updateConfigFile', () => {
       )
     `);
 
-    const before = babel.generate(target).code;
+    const before = target.code;
     const updated = updateConfigFile(source, target);
     expect(updated).toBe(true);
 
-    const after = babel.generate(target).code;
+    const after = target.toString();
 
     // check if the code was updated at all
     expect(after).not.toBe(before);
 
     // check if the code was updated correctly
     expect(getDiff(before, after)).toMatchInlineSnapshot(`
-      "  import { mergeConfig } from 'vite';
-        import viteConfig from './vite.config';
+      "  
+              import { mergeConfig } from 'vite'
+              import viteConfig from './vite.config'
         
       + import path from 'node:path';
       + import { fileURLToPath } from 'node:url';
       + import { defineConfig } from 'vitest/config';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+      + const dirname =
+      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
+        
+        
       + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        export default mergeConfig(viteConfig, {
-          plugins: [react()],
-          test: {
+      + 
+              export default mergeConfig(
+                viteConfig,
+                {
+                  plugins: [react()],
+                  test: {
         
-      -     environment: 'jsdom'
+      -             environment: 'jsdom',
       - 
-      +     projects: [{
-      +       extends: true,
-      +       test: {
-      +         environment: 'jsdom'
-      +       }
-      +     }, {
-      +       extends: true,
-      +       plugins: [
-      +       // The plugin will run tests for the stories defined in your Storybook config
-      +       // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +       storybookTest({
-      +         configDir: path.join(dirname, '.storybook')
-      +       })],
-      +       test: {
-      +         name: 'storybook',
-      +         browser: {
-      +           enabled: true,
-      +           headless: true,
-      +           provider: playwright({}),
-      +           instances: [{
-      +             browser: 'chromium'
-      +           }]
-      +         }
-      +       }
-      +     }]
-      + 
-          }
-        });"
+      +             projects: [
+      +               {
+      +                 extends: true,
+      +                 test: {
+      +                   environment: 'jsdom',
+      +                 },
+      +               },
+      +               {
+      +                 extends: true,
+      +                 plugins: [
+      +                   // The plugin will run tests for the stories defined in your Storybook config
+      +                   // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +                   storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                 ],
+      +                 test: {
+      +                   name: 'storybook',
+      +                   browser: {
+      +                     enabled: true,
+      +                     headless: true,
+      +                     provider: playwright({}),
+      +                     instances: [{ browser: 'chromium' }],
+      +                   },
+      +                 },
+      +               },
+      +             ],
+      + 
+                  }
+                }
+              )
+            "
     `);
   });
 
   it('supports mergeConfig without config containing test property', async () => {
-    const source = babel.babelParse(
-      await loadTemplate('vitest.config.4.template', {
-        CONFIG_DIR: '.storybook',
-        BROWSER_CONFIG: "{ provider: 'playwright' }",
-        SETUP_FILE: '../.storybook/vitest.setup.ts',
-      })
-    );
-    const target = babel.babelParse(`
+    const source = await loadTemplate('vitest.config.4.template', {
+      CONFIG_DIR: '.storybook',
+      BROWSER_CONFIG: "{ provider: 'playwright' }",
+      SETUP_FILE: '../.storybook/vitest.setup.ts',
+    });
+    const target = new SourceEditor(`
       import { mergeConfig } from 'vite'
       import { defineConfig } from 'vitest/config'
       import viteConfig from './vite.config'
@@ -936,70 +958,74 @@ describe('updateConfigFile', () => {
       )
     `);
 
-    const before = babel.generate(target).code;
+    const before = target.code;
     const updated = updateConfigFile(source, target);
     expect(updated).toBe(true);
 
-    const after = babel.generate(target).code;
+    const after = target.toString();
 
     // check if the code was updated at all
     expect(after).not.toBe(before);
 
     // check if the code was updated correctly
     expect(getDiff(before, after)).toMatchInlineSnapshot(`
-      "  import { mergeConfig } from 'vite';
-        import { defineConfig } from 'vitest/config';
-        import viteConfig from './vite.config';
+      "  ...
+              import { mergeConfig } from 'vite'
+              import { defineConfig } from 'vitest/config'
+              import viteConfig from './vite.config'
         
       + import path from 'node:path';
       + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+      + const dirname =
+      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
+        
+        
       + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        export default mergeConfig(viteConfig, defineConfig({
-        
-      -   plugins: [react()]
-      - 
-      +   plugins: [react()],
-      +   test: {
-      +     projects: [{
-      +       extends: true,
-      +       plugins: [
-      +       // The plugin will run tests for the stories defined in your Storybook config
-      +       // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +       storybookTest({
-      +         configDir: path.join(dirname, '.storybook')
-      +       })],
-      +       test: {
-      +         name: 'storybook',
-      +         browser: {
-      +           enabled: true,
-      +           headless: true,
-      +           provider: playwright({}),
-      +           instances: [{
-      +             browser: 'chromium'
-      +           }]
-      +         }
-      +       }
-      +     }]
-      +   }
       + 
-        }));"
+              export default mergeConfig(
+                viteConfig,
+                defineConfig({
+                  plugins: [react()],
+        
+      +           test: {
+      +             projects: [
+      +               {
+      +                 extends: true,
+      +                 plugins: [
+      +                   // The plugin will run tests for the stories defined in your Storybook config
+      +                   // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +                   storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                 ],
+      +                 test: {
+      +                   name: 'storybook',
+      +                   browser: {
+      +                     enabled: true,
+      +                     headless: true,
+      +                     provider: playwright({}),
+      +                     instances: [{ browser: 'chromium' }],
+      +                   },
+      +                 },
+      +               },
+      +             ],
+      +           },
+      + 
+                })
+              )
+            "
     `);
   });
 
   it('supports mergeConfig with defineConfig pattern using projects (Vitest 3.2+)', async () => {
-    const source = babel.babelParse(
-      await loadTemplate('vitest.config.4.template', {
-        CONFIG_DIR: '.storybook',
-        BROWSER_CONFIG: "{ provider: 'playwright' }",
-        SETUP_FILE: '../.storybook/vitest.setup.ts',
-      })
-    );
-    const target = babel.babelParse(`
+    const source = await loadTemplate('vitest.config.4.template', {
+      CONFIG_DIR: '.storybook',
+      BROWSER_CONFIG: "{ provider: 'playwright' }",
+      SETUP_FILE: '../.storybook/vitest.setup.ts',
+    });
+    const target = new SourceEditor(`
       /// <reference types="vitest/config" />
       import { mergeConfig, defineConfig } from 'vitest/config'
       import viteConfig from './vite.config'
@@ -1015,11 +1041,11 @@ describe('updateConfigFile', () => {
       )
     `);
 
-    const before = babel.generate(target).code;
+    const before = target.code;
     const updated = updateConfigFile(source, target);
     expect(updated).toBe(true);
 
-    const after = babel.generate(target).code;
+    const after = target.toString();
 
     // check if the code was updated at all
     expect(after).not.toBe(before);
@@ -1027,63 +1053,70 @@ describe('updateConfigFile', () => {
     // check if the code was updated correctly
     expect(getDiff(before, after)).toMatchInlineSnapshot(`
       "  ...
-        import viteConfig from './vite.config';
-        
-        // https://vite.dev/config/
+              /// <reference types="vitest/config" />
+              import { mergeConfig, defineConfig } from 'vitest/config'
+              import viteConfig from './vite.config'
         
       + import path from 'node:path';
       + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+      + const dirname =
+      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
+        
+        
       + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        export default mergeConfig(viteConfig, defineConfig({
-          test: {
+      + 
+              // https://vite.dev/config/
+              export default mergeConfig(
+                viteConfig,
+                defineConfig({
+                  test: {
         
-      -     globals: true
+      -             globals: true,
       - 
-      +     projects: [{
-      +       extends: true,
-      +       test: {
-      +         globals: true
-      +       }
-      +     }, {
-      +       extends: true,
-      +       plugins: [
-      +       // The plugin will run tests for the stories defined in your Storybook config
-      +       // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +       storybookTest({
-      +         configDir: path.join(dirname, '.storybook')
-      +       })],
-      +       test: {
-      +         name: 'storybook',
-      +         browser: {
-      +           enabled: true,
-      +           headless: true,
-      +           provider: playwright({}),
-      +           instances: [{
-      +             browser: 'chromium'
-      +           }]
-      +         }
-      +       }
-      +     }]
-      + 
-          }
-        }));"
+      +             projects: [
+      +               {
+      +                 extends: true,
+      +                 test: {
+      +                   globals: true,
+      +                 },
+      +               },
+      +               {
+      +                 extends: true,
+      +                 plugins: [
+      +                   // The plugin will run tests for the stories defined in your Storybook config
+      +                   // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +                   storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                 ],
+      +                 test: {
+      +                   name: 'storybook',
+      +                   browser: {
+      +                     enabled: true,
+      +                     headless: true,
+      +                     provider: playwright({}),
+      +                     instances: [{ browser: 'chromium' }],
+      +                   },
+      +                 },
+      +               },
+      +             ],
+      + 
+                  },
+                })
+              )
+            "
     `);
   });
 
   it('appends storybook project to existing test.projects array (no double nesting)', async () => {
-    const source = babel.babelParse(
-      await loadTemplate('vitest.config.4.template', {
-        CONFIG_DIR: '.storybook',
-        BROWSER_CONFIG: "{ provider: 'playwright' }",
-        SETUP_FILE: '../.storybook/vitest.setup.ts',
-      })
-    );
-    const target = babel.babelParse(`
+    const source = await loadTemplate('vitest.config.4.template', {
+      CONFIG_DIR: '.storybook',
+      BROWSER_CONFIG: "{ provider: 'playwright' }",
+      SETUP_FILE: '../.storybook/vitest.setup.ts',
+    });
+    const target = new SourceEditor(`
       import { mergeConfig, defineConfig } from 'vitest/config'
       import viteConfig from './vite.config'
 
@@ -1107,72 +1140,75 @@ describe('updateConfigFile', () => {
       )
     `);
 
-    const before = babel.generate(target).code;
+    const before = target.code;
     const updated = updateConfigFile(source, target);
     expect(updated).toBe(true);
 
-    const after = babel.generate(target).code;
+    const after = target.toString();
 
     // check if the code was updated at all
     expect(after).not.toBe(before);
 
     // check if the code was updated correctly (storybook project appended to existing projects, no double nesting)
     expect(getDiff(before, after)).toMatchInlineSnapshot(`
-      "  import { mergeConfig, defineConfig } from 'vitest/config';
-        import viteConfig from './vite.config';
+      "  
+              import { mergeConfig, defineConfig } from 'vitest/config'
+              import viteConfig from './vite.config'
         
       + import path from 'node:path';
       + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+      + const dirname =
+      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
+        
+        
       + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        export default mergeConfig(viteConfig, defineConfig({
-          test: {
-            expect: {
-              requireAssertions: true
-      ...
-              test: {
-                name: "server"
-              }
-        
-      +     }, {
-      +       extends: true,
-      +       plugins: [
-      +       // The plugin will run tests for the stories defined in your Storybook config
-      +       // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +       storybookTest({
-      +         configDir: path.join(dirname, '.storybook')
-      +       })],
-      +       test: {
-      +         name: 'storybook',
-      +         browser: {
-      +           enabled: true,
-      +           headless: true,
-      +           provider: playwright({}),
-      +           instances: [{
-      +             browser: 'chromium'
-      +           }]
-      +         }
-      +       }
       + 
-            }]
-          }
-        }));"
+              export default mergeConfig(
+                viteConfig,
+                defineConfig({
+                  test: {
+      ...
+                        extends: "./vite.config.ts",
+                        test: { name: "server" },
+                      },
+        
+      +               {
+      +                 extends: true,
+      +                 plugins: [
+      +                   // The plugin will run tests for the stories defined in your Storybook config
+      +                   // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +                   storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                 ],
+      +                 test: {
+      +                   name: 'storybook',
+      +                   browser: {
+      +                     enabled: true,
+      +                     headless: true,
+      +                     provider: playwright({}),
+      +                     instances: [{ browser: 'chromium' }],
+      +                   },
+      +                 },
+      +               },
+      + 
+                    ],
+                  },
+                })
+              )
+        ..."
     `);
   });
 
   it('extracts coverage config and keeps it at top level when using workspace', async () => {
-    const source = babel.babelParse(
-      await loadTemplate('vitest.config.4.template', {
-        CONFIG_DIR: '.storybook',
-        BROWSER_CONFIG: "{ provider: 'playwright' }",
-        SETUP_FILE: '../.storybook/vitest.setup.ts',
-      })
-    );
-    const target = babel.babelParse(`
+    const source = await loadTemplate('vitest.config.4.template', {
+      CONFIG_DIR: '.storybook',
+      BROWSER_CONFIG: "{ provider: 'playwright' }",
+      SETUP_FILE: '../.storybook/vitest.setup.ts',
+    });
+    const target = new SourceEditor(`
       import { mergeConfig, defineConfig } from 'vitest/config'
       import viteConfig from './vite.config'
 
@@ -1194,11 +1230,11 @@ describe('updateConfigFile', () => {
       )
     `);
 
-    const before = babel.generate(target).code;
+    const before = target.code;
     const updated = updateConfigFile(source, target);
     expect(updated).toBe(true);
 
-    const after = babel.generate(target).code;
+    const after = target.toString();
 
     // check if the code was updated at all
     expect(after).not.toBe(before);
@@ -1206,72 +1242,80 @@ describe('updateConfigFile', () => {
     // check if the code was updated correctly
     // Coverage should stay at the top level, not moved into the workspace
     expect(getDiff(before, after)).toMatchInlineSnapshot(`
-      "  import { mergeConfig, defineConfig } from 'vitest/config';
-        import viteConfig from './vite.config';
+      "  
+              import { mergeConfig, defineConfig } from 'vitest/config'
+              import viteConfig from './vite.config'
         
       + import path from 'node:path';
       + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+      + const dirname =
+      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
+        
+        
       + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        export default mergeConfig(viteConfig, defineConfig({
-          test: {
-        
-      -     name: 'node',
-      -     environment: 'happy-dom',
-      -     include: ['**/*.test.ts'],
-      - 
-            coverage: {
-              exclude: ['storybook.setup.ts', '**/*.stories.*']
+      + 
+              export default mergeConfig(
+                viteConfig,
+                defineConfig({
+                  test: {
         
-      -     }
+      -             name: 'node',
+      -             environment: 'happy-dom',
+      -             include: ['**/*.test.ts'],
       - 
-      +     },
-      +     projects: [{
-      +       extends: true,
-      +       test: {
-      +         name: 'node',
-      +         environment: 'happy-dom',
-      +         include: ['**/*.test.ts']
-      +       }
-      +     }, {
-      +       extends: true,
-      +       plugins: [
-      +       // The plugin will run tests for the stories defined in your Storybook config
-      +       // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +       storybookTest({
-      +         configDir: path.join(dirname, '.storybook')
-      +       })],
-      +       test: {
-      +         name: 'storybook',
-      +         browser: {
-      +           enabled: true,
-      +           headless: true,
-      +           provider: playwright({}),
-      +           instances: [{
-      +             browser: 'chromium'
-      +           }]
-      +         }
-      +       }
-      +     }]
-      + 
-          }
-        }));"
+                    coverage: {
+                      exclude: [
+                        'storybook.setup.ts',
+                        '**/*.stories.*',
+                      ],
+                    },
+        
+      +             projects: [
+      +               {
+      +                 extends: true,
+      +                 test: {
+      +                   name: 'node',
+      +                   environment: 'happy-dom',
+      +                   include: ['**/*.test.ts'],
+      +                 },
+      +               },
+      +               {
+      +                 extends: true,
+      +                 plugins: [
+      +                   // The plugin will run tests for the stories defined in your Storybook config
+      +                   // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +                   storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                 ],
+      +                 test: {
+      +                   name: 'storybook',
+      +                   browser: {
+      +                     enabled: true,
+      +                     headless: true,
+      +                     provider: playwright({}),
+      +                     instances: [{ browser: 'chromium' }],
+      +                   },
+      +                 },
+      +               },
+      +             ],
+      + 
+                  },
+                })
+              )
+            "
     `);
   });
 
   it('extracts coverage config and keeps it at top level when using projects', async () => {
-    const source = babel.babelParse(
-      await loadTemplate('vitest.config.4.template', {
-        CONFIG_DIR: '.storybook',
-        BROWSER_CONFIG: "{ provider: 'playwright' }",
-        SETUP_FILE: '../.storybook/vitest.setup.ts',
-      })
-    );
-    const target = babel.babelParse(`
+    const source = await loadTemplate('vitest.config.4.template', {
+      CONFIG_DIR: '.storybook',
+      BROWSER_CONFIG: "{ provider: 'playwright' }",
+      SETUP_FILE: '../.storybook/vitest.setup.ts',
+    });
+    const target = new SourceEditor(`
       import { mergeConfig, defineConfig } from 'vitest/config'
       import viteConfig from './vite.config'
 
@@ -1293,11 +1337,11 @@ describe('updateConfigFile', () => {
       )
     `);
 
-    const before = babel.generate(target).code;
+    const before = target.code;
     const updated = updateConfigFile(source, target);
     expect(updated).toBe(true);
 
-    const after = babel.generate(target).code;
+    const after = target.toString();
 
     // check if the code was updated at all
     expect(after).not.toBe(before);
@@ -1305,72 +1349,80 @@ describe('updateConfigFile', () => {
     // check if the code was updated correctly
     // Coverage should stay at the top level, not moved into the projects
     expect(getDiff(before, after)).toMatchInlineSnapshot(`
-      "  import { mergeConfig, defineConfig } from 'vitest/config';
-        import viteConfig from './vite.config';
+      "  
+              import { mergeConfig, defineConfig } from 'vitest/config'
+              import viteConfig from './vite.config'
         
       + import path from 'node:path';
       + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+      + const dirname =
+      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
+        
+        
       + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        export default mergeConfig(viteConfig, defineConfig({
-          test: {
-        
-      -     name: 'node',
-      -     environment: 'happy-dom',
-      -     include: ['**/*.test.ts'],
-      - 
-            coverage: {
-              exclude: ['storybook.setup.ts', '**/*.stories.*']
+      + 
+              export default mergeConfig(
+                viteConfig,
+                defineConfig({
+                  test: {
         
-      -     }
+      -             name: 'node',
+      -             environment: 'happy-dom',
+      -             include: ['**/*.test.ts'],
       - 
-      +     },
-      +     projects: [{
-      +       extends: true,
-      +       test: {
-      +         name: 'node',
-      +         environment: 'happy-dom',
-      +         include: ['**/*.test.ts']
-      +       }
-      +     }, {
-      +       extends: true,
-      +       plugins: [
-      +       // The plugin will run tests for the stories defined in your Storybook config
-      +       // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +       storybookTest({
-      +         configDir: path.join(dirname, '.storybook')
-      +       })],
-      +       test: {
-      +         name: 'storybook',
-      +         browser: {
-      +           enabled: true,
-      +           headless: true,
-      +           provider: playwright({}),
-      +           instances: [{
-      +             browser: 'chromium'
-      +           }]
-      +         }
-      +       }
-      +     }]
-      + 
-          }
-        }));"
+                    coverage: {
+                      exclude: [
+                        'storybook.setup.ts',
+                        '**/*.stories.*',
+                      ],
+                    },
+        
+      +             projects: [
+      +               {
+      +                 extends: true,
+      +                 test: {
+      +                   name: 'node',
+      +                   environment: 'happy-dom',
+      +                   include: ['**/*.test.ts'],
+      +                 },
+      +               },
+      +               {
+      +                 extends: true,
+      +                 plugins: [
+      +                   // The plugin will run tests for the stories defined in your Storybook config
+      +                   // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +                   storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                 ],
+      +                 test: {
+      +                   name: 'storybook',
+      +                   browser: {
+      +                     enabled: true,
+      +                     headless: true,
+      +                     provider: playwright({}),
+      +                     instances: [{ browser: 'chromium' }],
+      +                   },
+      +                 },
+      +               },
+      +             ],
+      + 
+                  },
+                })
+              )
+            "
     `);
   });
 
   it('supports defineConfig wrapping mergeConfig', async () => {
-    const source = babel.babelParse(
-      await loadTemplate('vitest.config.4.template', {
-        CONFIG_DIR: '.storybook',
-        BROWSER_CONFIG: "{ provider: 'playwright' }",
-        SETUP_FILE: '../.storybook/vitest.setup.ts',
-      })
-    );
-    const target = babel.babelParse(`
+    const source = await loadTemplate('vitest.config.4.template', {
+      CONFIG_DIR: '.storybook',
+      BROWSER_CONFIG: "{ provider: 'playwright' }",
+      SETUP_FILE: '../.storybook/vitest.setup.ts',
+    });
+    const target = new SourceEditor(`
       import { defineConfig, mergeConfig } from 'vitest/config'
       import viteConfig from './vite.config'
 
@@ -1383,73 +1435,77 @@ describe('updateConfigFile', () => {
       }))
     `);
 
-    const before = babel.generate(target).code;
+    const before = target.code;
     const updated = updateConfigFile(source, target);
     expect(updated).toBe(true);
 
-    const after = babel.generate(target).code;
+    const after = target.toString();
     expect(after).not.toBe(before);
     expect(getDiff(before, after)).toMatchInlineSnapshot(`
-      "  import { defineConfig, mergeConfig } from 'vitest/config';
-        import viteConfig from './vite.config';
+      "  
+              import { defineConfig, mergeConfig } from 'vitest/config'
+              import viteConfig from './vite.config'
         
       + import path from 'node:path';
       + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+      + const dirname =
+      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
+        
+        
       + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        export default defineConfig(mergeConfig(viteConfig, {
-          test: {
+      + 
+              export default defineConfig(mergeConfig(viteConfig, {
+                test: {
         
-      -     name: 'node',
-      -     environment: 'happy-dom',
-      -     include: ['**/*.test.ts']
+      -           name: 'node',
+      -           environment: 'happy-dom',
+      -           include: ['**/*.test.ts'],
       - 
-      +     projects: [{
-      +       extends: true,
-      +       test: {
-      +         name: 'node',
-      +         environment: 'happy-dom',
-      +         include: ['**/*.test.ts']
-      +       }
-      +     }, {
-      +       extends: true,
-      +       plugins: [
-      +       // The plugin will run tests for the stories defined in your Storybook config
-      +       // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +       storybookTest({
-      +         configDir: path.join(dirname, '.storybook')
-      +       })],
-      +       test: {
-      +         name: 'storybook',
-      +         browser: {
-      +           enabled: true,
-      +           headless: true,
-      +           provider: playwright({}),
-      +           instances: [{
-      +             browser: 'chromium'
-      +           }]
-      +         }
-      +       }
-      +     }]
-      + 
-          }
-        }));"
+      +           projects: [
+      +             {
+      +               extends: true,
+      +               test: {
+      +                 name: 'node',
+      +                 environment: 'happy-dom',
+      +                 include: ['**/*.test.ts'],
+      +               },
+      +             },
+      +             {
+      +               extends: true,
+      +               plugins: [
+      +                 // The plugin will run tests for the stories defined in your Storybook config
+      +                 // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +                 storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +               ],
+      +               test: {
+      +                 name: 'storybook',
+      +                 browser: {
+      +                   enabled: true,
+      +                   headless: true,
+      +                   provider: playwright({}),
+      +                   instances: [{ browser: 'chromium' }],
+      +                 },
+      +               },
+      +             },
+      +           ],
+      + 
+                },
+              }))
+            "
     `);
   });
 
   it('supports defineConfig wrapping mergeConfig with satisfies operator', async () => {
-    const source = babel.babelParse(
-      await loadTemplate('vitest.config.4.template', {
-        CONFIG_DIR: '.storybook',
-        BROWSER_CONFIG: "{ provider: 'playwright' }",
-        SETUP_FILE: '../.storybook/vitest.setup.ts',
-      })
-    );
-    const target = babel.babelParse(`
+    const source = await loadTemplate('vitest.config.4.template', {
+      CONFIG_DIR: '.storybook',
+      BROWSER_CONFIG: "{ provider: 'playwright' }",
+      SETUP_FILE: '../.storybook/vitest.setup.ts',
+    });
+    const target = new SourceEditor(`
       import { defineConfig, mergeConfig } from 'vitest/config'
       import viteConfig from './vite.config'
       import type { ViteUserConfig } from 'vitest/config'
@@ -1465,74 +1521,80 @@ describe('updateConfigFile', () => {
       )
     `);
 
-    const before = babel.generate(target).code;
+    const before = target.code;
     const updated = updateConfigFile(source, target);
     expect(updated).toBe(true);
 
-    const after = babel.generate(target).code;
+    const after = target.toString();
     expect(after).not.toBe(before);
     expect(getDiff(before, after)).toMatchInlineSnapshot(`
-      "  import { defineConfig, mergeConfig } from 'vitest/config';
-        import viteConfig from './vite.config';
-        import type { ViteUserConfig } from 'vitest/config';
+      "  ...
+              import { defineConfig, mergeConfig } from 'vitest/config'
+              import viteConfig from './vite.config'
+              import type { ViteUserConfig } from 'vitest/config'
         
       + import path from 'node:path';
       + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+      + const dirname =
+      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
+        
+        
       + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        export default defineConfig(mergeConfig(viteConfig, {
-          test: {
+      + 
+              export default defineConfig(
+                mergeConfig(viteConfig, {
+                  test: {
         
-      -     name: 'node',
-      -     environment: 'happy-dom',
-      -     include: ['**/*.test.ts']
+      -             name: 'node',
+      -             environment: 'happy-dom',
+      -             include: ['**/*.test.ts'],
       - 
-      +     projects: [{
-      +       extends: true,
-      +       test: {
-      +         name: 'node',
-      +         environment: 'happy-dom',
-      +         include: ['**/*.test.ts']
-      +       }
-      +     }, {
-      +       extends: true,
-      +       plugins: [
-      +       // The plugin will run tests for the stories defined in your Storybook config
-      +       // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +       storybookTest({
-      +         configDir: path.join(dirname, '.storybook')
-      +       })],
-      +       test: {
-      +         name: 'storybook',
-      +         browser: {
-      +           enabled: true,
-      +           headless: true,
-      +           provider: playwright({}),
-      +           instances: [{
-      +             browser: 'chromium'
-      +           }]
-      +         }
-      +       }
-      +     }]
-      + 
-          }
-        }) satisfies ViteUserConfig);"
+      +             projects: [
+      +               {
+      +                 extends: true,
+      +                 test: {
+      +                   name: 'node',
+      +                   environment: 'happy-dom',
+      +                   include: ['**/*.test.ts'],
+      +                 },
+      +               },
+      +               {
+      +                 extends: true,
+      +                 plugins: [
+      +                   // The plugin will run tests for the stories defined in your Storybook config
+      +                   // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +                   storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                 ],
+      +                 test: {
+      +                   name: 'storybook',
+      +                   browser: {
+      +                     enabled: true,
+      +                     headless: true,
+      +                     provider: playwright({}),
+      +                     instances: [{ browser: 'chromium' }],
+      +                   },
+      +                 },
+      +               },
+      +             ],
+      + 
+                  },
+                }) satisfies ViteUserConfig
+              )
+            "
     `);
   });
 
   it('supports mergeConfig with as operator (TSAsExpression)', async () => {
-    const source = babel.babelParse(
-      await loadTemplate('vitest.config.4.template', {
-        CONFIG_DIR: '.storybook',
-        BROWSER_CONFIG: "{ provider: 'playwright' }",
-        SETUP_FILE: '../.storybook/vitest.setup.ts',
-      })
-    );
-    const target = babel.babelParse(`
+    const source = await loadTemplate('vitest.config.4.template', {
+      CONFIG_DIR: '.storybook',
+      BROWSER_CONFIG: "{ provider: 'playwright' }",
+      SETUP_FILE: '../.storybook/vitest.setup.ts',
+    });
+    const target = new SourceEditor(`
       import { mergeConfig } from 'vitest/config'
       import viteConfig from './vite.config'
       import type { ViteUserConfig } from 'vitest/config'
@@ -1546,75 +1608,79 @@ describe('updateConfigFile', () => {
       }) as ViteUserConfig
     `);
 
-    const before = babel.generate(target).code;
+    const before = target.code;
     const updated = updateConfigFile(source, target);
     expect(updated).toBe(true);
 
-    const after = babel.generate(target).code;
+    const after = target.toString();
     expect(after).not.toBe(before);
     expect(getDiff(before, after)).toMatchInlineSnapshot(`
-      "  import { mergeConfig } from 'vitest/config';
-        import viteConfig from './vite.config';
-        import type { ViteUserConfig } from 'vitest/config';
+      "  ...
+              import { mergeConfig } from 'vitest/config'
+              import viteConfig from './vite.config'
+              import type { ViteUserConfig } from 'vitest/config'
         
       + import path from 'node:path';
       + import { fileURLToPath } from 'node:url';
       + import { defineConfig } from 'vitest/config';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+      + const dirname =
+      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
+        
+        
       + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        export default mergeConfig(viteConfig, {
-          test: {
+      + 
+              export default mergeConfig(viteConfig, {
+                test: {
         
-      -     name: 'node',
-      -     environment: 'happy-dom',
-      -     include: ['**/*.test.ts']
+      -           name: 'node',
+      -           environment: 'happy-dom',
+      -           include: ['**/*.test.ts'],
       - 
-      +     projects: [{
-      +       extends: true,
-      +       test: {
-      +         name: 'node',
-      +         environment: 'happy-dom',
-      +         include: ['**/*.test.ts']
-      +       }
-      +     }, {
-      +       extends: true,
-      +       plugins: [
-      +       // The plugin will run tests for the stories defined in your Storybook config
-      +       // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +       storybookTest({
-      +         configDir: path.join(dirname, '.storybook')
-      +       })],
-      +       test: {
-      +         name: 'storybook',
-      +         browser: {
-      +           enabled: true,
-      +           headless: true,
-      +           provider: playwright({}),
-      +           instances: [{
-      +             browser: 'chromium'
-      +           }]
-      +         }
-      +       }
-      +     }]
-      + 
-          }
-        }) as ViteUserConfig;"
+      +           projects: [
+      +             {
+      +               extends: true,
+      +               test: {
+      +                 name: 'node',
+      +                 environment: 'happy-dom',
+      +                 include: ['**/*.test.ts'],
+      +               },
+      +             },
+      +             {
+      +               extends: true,
+      +               plugins: [
+      +                 // The plugin will run tests for the stories defined in your Storybook config
+      +                 // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +                 storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +               ],
+      +               test: {
+      +                 name: 'storybook',
+      +                 browser: {
+      +                   enabled: true,
+      +                   headless: true,
+      +                   provider: playwright({}),
+      +                   instances: [{ browser: 'chromium' }],
+      +                 },
+      +               },
+      +             },
+      +           ],
+      + 
+                },
+              }) as ViteUserConfig
+            "
     `);
   });
 
   it('supports mergeConfig with test defined as a constant (shorthand property)', async () => {
-    const source = babel.babelParse(
-      await loadTemplate('vitest.config.4.template', {
-        CONFIG_DIR: '.storybook',
-        BROWSER_CONFIG: "{ provider: 'playwright' }",
-        SETUP_FILE: '../.storybook/vitest.setup.ts',
-      })
-    );
-    const target = babel.babelParse(`
+    const source = await loadTemplate('vitest.config.4.template', {
+      CONFIG_DIR: '.storybook',
+      BROWSER_CONFIG: "{ provider: 'playwright' }",
+      SETUP_FILE: '../.storybook/vitest.setup.ts',
+    });
+    const target = new SourceEditor(`
       import { mergeConfig } from 'vitest/config'
       import viteConfig from './vite.config'
 
@@ -1627,77 +1693,80 @@ describe('updateConfigFile', () => {
       export default mergeConfig(viteConfig, { test })
     `);
 
-    const before = babel.generate(target).code;
+    const before = target.code;
     const updated = updateConfigFile(source, target);
     expect(updated).toBe(true);
 
-    const after = babel.generate(target).code;
+    const after = target.toString();
     expect(after).not.toBe(before);
     expect(getDiff(before, after)).toMatchInlineSnapshot(`
-      "  import { mergeConfig } from 'vitest/config';
-        import viteConfig from './vite.config';
+      "  
+              import { mergeConfig } from 'vitest/config'
+              import viteConfig from './vite.config'
         
       + import path from 'node:path';
       + import { fileURLToPath } from 'node:url';
       + import { defineConfig } from 'vitest/config';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+      + const dirname =
+      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
+        
+        
       + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        const test = {
-          name: 'node',
-          environment: 'happy-dom',
-          include: ['**/*.test.ts']
-        };
-        export default mergeConfig(viteConfig, {
+      + 
+              const test = {
+                name: 'node',
+                environment: 'happy-dom',
+                include: ['**/*.test.ts'],
+              }
         
-      -   test
+        
+      -       export default mergeConfig(viteConfig, { test })
       - 
-      +   test: {
-      +     projects: [{
-      +       extends: true,
-      +       test: {
-      +         name: 'node',
-      +         environment: 'happy-dom',
-      +         include: ['**/*.test.ts']
-      +       }
-      +     }, {
-      +       extends: true,
-      +       plugins: [
-      +       // The plugin will run tests for the stories defined in your Storybook config
-      +       // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +       storybookTest({
-      +         configDir: path.join(dirname, '.storybook')
-      +       })],
-      +       test: {
-      +         name: 'storybook',
-      +         browser: {
-      +           enabled: true,
-      +           headless: true,
-      +           provider: playwright({}),
-      +           instances: [{
-      +             browser: 'chromium'
-      +           }]
-      +         }
-      +       }
-      +     }]
-      +   }
-      + 
-        });"
+      +       export default mergeConfig(viteConfig, { test: {
+      +         projects: [
+      +           {
+      +             extends: true,
+      +             test: {
+      +               name: 'node',
+      +               environment: 'happy-dom',
+      +               include: ['**/*.test.ts'],
+      +             },
+      +           },
+      +           {
+      +             extends: true,
+      +             plugins: [
+      +               // The plugin will run tests for the stories defined in your Storybook config
+      +               // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +               storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +             ],
+      +             test: {
+      +               name: 'storybook',
+      +               browser: {
+      +                 enabled: true,
+      +                 headless: true,
+      +                 provider: playwright({}),
+      +                 instances: [{ browser: 'chromium' }],
+      +               },
+      +             },
+      +           },
+      +         ],
+      +       } })
+      + 
+            "
     `);
   });
 
   it('supports const defined config re-exported (export default config)', async () => {
-    const source = babel.babelParse(
-      await loadTemplate('vitest.config.4.template', {
-        CONFIG_DIR: '.storybook',
-        BROWSER_CONFIG: "{ provider: 'playwright' }",
-        SETUP_FILE: '../.storybook/vitest.setup.ts',
-      })
-    );
-    const target = babel.babelParse(`
+    const source = await loadTemplate('vitest.config.4.template', {
+      CONFIG_DIR: '.storybook',
+      BROWSER_CONFIG: "{ provider: 'playwright' }",
+      SETUP_FILE: '../.storybook/vitest.setup.ts',
+    });
+    const target = new SourceEditor(`
       import { defineConfig, mergeConfig } from 'vitest/config'
       import viteConfig from './vite.config'
 
@@ -1715,74 +1784,81 @@ describe('updateConfigFile', () => {
       export default config
     `);
 
-    const before = babel.generate(target).code;
+    const before = target.code;
     const updated = updateConfigFile(source, target);
     expect(updated).toBe(true);
 
-    const after = babel.generate(target).code;
+    const after = target.toString();
     expect(after).not.toBe(before);
     expect(getDiff(before, after)).toMatchInlineSnapshot(`
-      "  import { defineConfig, mergeConfig } from 'vitest/config';
-        import viteConfig from './vite.config';
+      "  
+              import { defineConfig, mergeConfig } from 'vitest/config'
+              import viteConfig from './vite.config'
         
       + import path from 'node:path';
       + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+      + const dirname =
+      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
+        
+        
       + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        const config = mergeConfig(viteConfig, defineConfig({
-          test: {
+      + 
+              const config = mergeConfig(
+                viteConfig,
+                defineConfig({
+                  test: {
         
-      -     name: 'node',
-      -     environment: 'happy-dom',
-      -     include: ['**/*.test.ts']
+      -             name: 'node',
+      -             environment: 'happy-dom',
+      -             include: ['**/*.test.ts'],
       - 
-      +     projects: [{
-      +       extends: true,
-      +       test: {
-      +         name: 'node',
-      +         environment: 'happy-dom',
-      +         include: ['**/*.test.ts']
-      +       }
-      +     }, {
-      +       extends: true,
-      +       plugins: [
-      +       // The plugin will run tests for the stories defined in your Storybook config
-      +       // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +       storybookTest({
-      +         configDir: path.join(dirname, '.storybook')
-      +       })],
-      +       test: {
-      +         name: 'storybook',
-      +         browser: {
-      +           enabled: true,
-      +           headless: true,
-      +           provider: playwright({}),
-      +           instances: [{
-      +             browser: 'chromium'
-      +           }]
-      +         }
-      +       }
-      +     }]
-      + 
-          }
-        }));
-        export default config;"
+      +             projects: [
+      +               {
+      +                 extends: true,
+      +                 test: {
+      +                   name: 'node',
+      +                   environment: 'happy-dom',
+      +                   include: ['**/*.test.ts'],
+      +                 },
+      +               },
+      +               {
+      +                 extends: true,
+      +                 plugins: [
+      +                   // The plugin will run tests for the stories defined in your Storybook config
+      +                   // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +                   storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                 ],
+      +                 test: {
+      +                   name: 'storybook',
+      +                   browser: {
+      +                     enabled: true,
+      +                     headless: true,
+      +                     provider: playwright({}),
+      +                     instances: [{ browser: 'chromium' }],
+      +                   },
+      +                 },
+      +               },
+      +             ],
+      + 
+                  },
+                })
+              )
+        
+        ..."
     `);
   });
 
   it('supports defineProject instead of defineConfig', async () => {
-    const source = babel.babelParse(
-      await loadTemplate('vitest.config.4.template', {
-        CONFIG_DIR: '.storybook',
-        BROWSER_CONFIG: "{ provider: 'playwright' }",
-        SETUP_FILE: '../.storybook/vitest.setup.ts',
-      })
-    );
-    const target = babel.babelParse(`
+    const source = await loadTemplate('vitest.config.4.template', {
+      CONFIG_DIR: '.storybook',
+      BROWSER_CONFIG: "{ provider: 'playwright' }",
+      SETUP_FILE: '../.storybook/vitest.setup.ts',
+    });
+    const target = new SourceEditor(`
       import { defineProject } from 'vitest/config'
 
       export default defineProject({
@@ -1794,73 +1870,77 @@ describe('updateConfigFile', () => {
       })
     `);
 
-    const before = babel.generate(target).code;
+    const before = target.code;
     const updated = updateConfigFile(source, target);
     expect(updated).toBe(true);
 
-    const after = babel.generate(target).code;
+    const after = target.toString();
     expect(after).not.toBe(before);
     expect(getDiff(before, after)).toMatchInlineSnapshot(`
-      "  import { defineProject } from 'vitest/config';
+      "  
+              import { defineProject } from 'vitest/config'
         
       + import path from 'node:path';
       + import { fileURLToPath } from 'node:url';
       + import { defineConfig } from 'vitest/config';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+      + const dirname =
+      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
+        
+        
       + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        export default defineProject({
-          test: {
+      + 
+              export default defineProject({
+                test: {
         
-      -     name: 'node',
-      -     environment: 'happy-dom',
-      -     include: ['**/*.test.ts']
+      -           name: 'node',
+      -           environment: 'happy-dom',
+      -           include: ['**/*.test.ts'],
       - 
-      +     projects: [{
-      +       extends: true,
-      +       test: {
-      +         name: 'node',
-      +         environment: 'happy-dom',
-      +         include: ['**/*.test.ts']
-      +       }
-      +     }, {
-      +       extends: true,
-      +       plugins: [
-      +       // The plugin will run tests for the stories defined in your Storybook config
-      +       // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +       storybookTest({
-      +         configDir: path.join(dirname, '.storybook')
-      +       })],
-      +       test: {
-      +         name: 'storybook',
-      +         browser: {
-      +           enabled: true,
-      +           headless: true,
-      +           provider: playwright({}),
-      +           instances: [{
-      +             browser: 'chromium'
-      +           }]
-      +         }
-      +       }
-      +     }]
-      + 
-          }
-        });"
+      +           projects: [
+      +             {
+      +               extends: true,
+      +               test: {
+      +                 name: 'node',
+      +                 environment: 'happy-dom',
+      +                 include: ['**/*.test.ts'],
+      +               },
+      +             },
+      +             {
+      +               extends: true,
+      +               plugins: [
+      +                 // The plugin will run tests for the stories defined in your Storybook config
+      +                 // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +                 storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +               ],
+      +               test: {
+      +                 name: 'storybook',
+      +                 browser: {
+      +                   enabled: true,
+      +                   headless: true,
+      +                   provider: playwright({}),
+      +                   instances: [{ browser: 'chromium' }],
+      +                 },
+      +               },
+      +             },
+      +           ],
+      + 
+                },
+              })
+            "
     `);
   });
 
   it('supports export const config re-exported as default (ExportNamedDeclaration)', async () => {
-    const source = babel.babelParse(
-      await loadTemplate('vitest.config.4.template', {
-        CONFIG_DIR: '.storybook',
-        BROWSER_CONFIG: "{ provider: 'playwright' }",
-        SETUP_FILE: '../.storybook/vitest.setup.ts',
-      })
-    );
-    const target = babel.babelParse(`
+    const source = await loadTemplate('vitest.config.4.template', {
+      CONFIG_DIR: '.storybook',
+      BROWSER_CONFIG: "{ provider: 'playwright' }",
+      SETUP_FILE: '../.storybook/vitest.setup.ts',
+    });
+    const target = new SourceEditor(`
         import { defineConfig, mergeConfig } from 'vitest/config'
         import viteConfig from './vite.config'
   
@@ -1878,74 +1958,79 @@ describe('updateConfigFile', () => {
         export default config
       `);
 
-    const before = babel.generate(target).code;
+    const before = target.code;
     const updated = updateConfigFile(source, target);
     expect(updated).toBe(true);
 
-    const after = babel.generate(target).code;
+    const after = target.toString();
     expect(after).not.toBe(before);
     expect(getDiff(before, after)).toMatchInlineSnapshot(`
-      "  import { defineConfig, mergeConfig } from 'vitest/config';
-        import viteConfig from './vite.config';
+      "  
+                import { defineConfig, mergeConfig } from 'vitest/config'
+                import viteConfig from './vite.config'
         
       + import path from 'node:path';
       + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+      + const dirname =
+      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
       + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        export const config = mergeConfig(viteConfig, defineConfig({
-          test: {
+          
+                export const config = mergeConfig(
+                  viteConfig,
+                  defineConfig({
+                    test: {
         
-      -     name: 'node',
-      -     environment: 'happy-dom',
-      -     include: ['**/*.test.ts']
+      -               name: 'node',
+      -               environment: 'happy-dom',
+      -               include: ['**/*.test.ts'],
       - 
-      +     projects: [{
-      +       extends: true,
-      +       test: {
-      +         name: 'node',
-      +         environment: 'happy-dom',
-      +         include: ['**/*.test.ts']
-      +       }
-      +     }, {
-      +       extends: true,
-      +       plugins: [
-      +       // The plugin will run tests for the stories defined in your Storybook config
-      +       // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +       storybookTest({
-      +         configDir: path.join(dirname, '.storybook')
-      +       })],
-      +       test: {
-      +         name: 'storybook',
-      +         browser: {
-      +           enabled: true,
-      +           headless: true,
-      +           provider: playwright({}),
-      +           instances: [{
-      +             browser: 'chromium'
-      +           }]
-      +         }
-      +       }
-      +     }]
-      + 
-          }
-        }));
-        export default config;"
+      +               projects: [
+      +                 {
+      +                   extends: true,
+      +                   test: {
+      +                     name: 'node',
+      +                     environment: 'happy-dom',
+      +                     include: ['**/*.test.ts'],
+      +                   },
+      +                 },
+      +                 {
+      +                   extends: true,
+      +                   plugins: [
+      +                     // The plugin will run tests for the stories defined in your Storybook config
+      +                     // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +                     storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                   ],
+      +                   test: {
+      +                     name: 'storybook',
+      +                     browser: {
+      +                       enabled: true,
+      +                       headless: true,
+      +                       provider: playwright({}),
+      +                       instances: [{ browser: 'chromium' }],
+      +                     },
+      +                   },
+      +                 },
+      +               ],
+      + 
+                    },
+                  })
+                )
+          
+        ..."
     `);
   });
 
   it('supports mergeConfig with config object as an exported constant (ExportNamedDeclaration)', async () => {
-    const source = babel.babelParse(
-      await loadTemplate('vitest.config.4.template', {
-        CONFIG_DIR: '.storybook',
-        BROWSER_CONFIG: "{ provider: 'playwright' }",
-        SETUP_FILE: '../.storybook/vitest.setup.ts',
-      })
-    );
-    const target = babel.babelParse(`
+    const source = await loadTemplate('vitest.config.4.template', {
+      CONFIG_DIR: '.storybook',
+      BROWSER_CONFIG: "{ provider: 'playwright' }",
+      SETUP_FILE: '../.storybook/vitest.setup.ts',
+    });
+    const target = new SourceEditor(`
         import { mergeConfig } from 'vitest/config'
         import viteConfig from './vite.config'
   
@@ -1960,75 +2045,78 @@ describe('updateConfigFile', () => {
         export default mergeConfig(viteConfig, vitestConfig)
       `);
 
-    const before = babel.generate(target).code;
+    const before = target.code;
     const updated = updateConfigFile(source, target);
     expect(updated).toBe(true);
 
-    const after = babel.generate(target).code;
+    const after = target.toString();
     expect(after).not.toBe(before);
     expect(getDiff(before, after)).toMatchInlineSnapshot(`
-      "  import { mergeConfig } from 'vitest/config';
-        import viteConfig from './vite.config';
+      "  
+                import { mergeConfig } from 'vitest/config'
+                import viteConfig from './vite.config'
         
       + import path from 'node:path';
       + import { fileURLToPath } from 'node:url';
       + import { defineConfig } from 'vitest/config';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+      + const dirname =
+      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
       + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        export const vitestConfig = {
-          test: {
+          
+                export const vitestConfig = {
+                  test: {
         
-      -     name: 'node',
-      -     environment: 'happy-dom',
-      -     include: ['**/*.test.ts']
+      -             name: 'node',
+      -             environment: 'happy-dom',
+      -             include: ['**/*.test.ts'],
       - 
-      +     projects: [{
-      +       extends: true,
-      +       test: {
-      +         name: 'node',
-      +         environment: 'happy-dom',
-      +         include: ['**/*.test.ts']
-      +       }
-      +     }, {
-      +       extends: true,
-      +       plugins: [
-      +       // The plugin will run tests for the stories defined in your Storybook config
-      +       // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +       storybookTest({
-      +         configDir: path.join(dirname, '.storybook')
-      +       })],
-      +       test: {
-      +         name: 'storybook',
-      +         browser: {
-      +           enabled: true,
-      +           headless: true,
-      +           provider: playwright({}),
-      +           instances: [{
-      +             browser: 'chromium'
-      +           }]
-      +         }
-      +       }
-      +     }]
-      + 
-          }
-        };
-        export default mergeConfig(viteConfig, vitestConfig);"
+      +             projects: [
+      +               {
+      +                 extends: true,
+      +                 test: {
+      +                   name: 'node',
+      +                   environment: 'happy-dom',
+      +                   include: ['**/*.test.ts'],
+      +                 },
+      +               },
+      +               {
+      +                 extends: true,
+      +                 plugins: [
+      +                   // The plugin will run tests for the stories defined in your Storybook config
+      +                   // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +                   storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                 ],
+      +                 test: {
+      +                   name: 'storybook',
+      +                   browser: {
+      +                     enabled: true,
+      +                     headless: true,
+      +                     provider: playwright({}),
+      +                     instances: [{ browser: 'chromium' }],
+      +                   },
+      +                 },
+      +               },
+      +             ],
+      + 
+                  }
+                }
+          
+                export default mergeConfig(viteConfig, vitestConfig)
+        ..."
     `);
   });
 
   it('supports mergeConfig with config object as a constant variable', async () => {
-    const source = babel.babelParse(
-      await loadTemplate('vitest.config.4.template', {
-        CONFIG_DIR: '.storybook',
-        BROWSER_CONFIG: "{ provider: 'playwright' }",
-        SETUP_FILE: '../.storybook/vitest.setup.ts',
-      })
-    );
-    const target = babel.babelParse(`
+    const source = await loadTemplate('vitest.config.4.template', {
+      CONFIG_DIR: '.storybook',
+      BROWSER_CONFIG: "{ provider: 'playwright' }",
+      SETUP_FILE: '../.storybook/vitest.setup.ts',
+    });
+    const target = new SourceEditor(`
       import { mergeConfig } from 'vitest/config'
       import viteConfig from './vite.config'
 
@@ -2043,75 +2131,80 @@ describe('updateConfigFile', () => {
       export default mergeConfig(viteConfig, vitestConfig)
     `);
 
-    const before = babel.generate(target).code;
+    const before = target.code;
     const updated = updateConfigFile(source, target);
     expect(updated).toBe(true);
 
-    const after = babel.generate(target).code;
+    const after = target.toString();
     expect(after).not.toBe(before);
     expect(getDiff(before, after)).toMatchInlineSnapshot(`
-      "  import { mergeConfig } from 'vitest/config';
-        import viteConfig from './vite.config';
+      "  
+              import { mergeConfig } from 'vitest/config'
+              import viteConfig from './vite.config'
         
       + import path from 'node:path';
       + import { fileURLToPath } from 'node:url';
       + import { defineConfig } from 'vitest/config';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+      + const dirname =
+      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
+        
+        
       + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        const vitestConfig = {
-          test: {
+      + 
+              const vitestConfig = {
+                test: {
         
-      -     name: 'node',
-      -     environment: 'happy-dom',
-      -     include: ['**/*.test.ts']
+      -           name: 'node',
+      -           environment: 'happy-dom',
+      -           include: ['**/*.test.ts'],
       - 
-      +     projects: [{
-      +       extends: true,
-      +       test: {
-      +         name: 'node',
-      +         environment: 'happy-dom',
-      +         include: ['**/*.test.ts']
-      +       }
-      +     }, {
-      +       extends: true,
-      +       plugins: [
-      +       // The plugin will run tests for the stories defined in your Storybook config
-      +       // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +       storybookTest({
-      +         configDir: path.join(dirname, '.storybook')
-      +       })],
-      +       test: {
-      +         name: 'storybook',
-      +         browser: {
-      +           enabled: true,
-      +           headless: true,
-      +           provider: playwright({}),
-      +           instances: [{
-      +             browser: 'chromium'
-      +           }]
-      +         }
-      +       }
-      +     }]
-      + 
-          }
-        };
-        export default mergeConfig(viteConfig, vitestConfig);"
+      +           projects: [
+      +             {
+      +               extends: true,
+      +               test: {
+      +                 name: 'node',
+      +                 environment: 'happy-dom',
+      +                 include: ['**/*.test.ts'],
+      +               },
+      +             },
+      +             {
+      +               extends: true,
+      +               plugins: [
+      +                 // The plugin will run tests for the stories defined in your Storybook config
+      +                 // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +                 storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +               ],
+      +               test: {
+      +                 name: 'storybook',
+      +                 browser: {
+      +                   enabled: true,
+      +                   headless: true,
+      +                   provider: playwright({}),
+      +                   instances: [{ browser: 'chromium' }],
+      +                 },
+      +               },
+      +             },
+      +           ],
+      + 
+                }
+              }
+        
+              export default mergeConfig(viteConfig, vitestConfig)
+        ..."
     `);
   });
 
   it('supports mergeConfig with aliased defineConfig and updates the config that contains test', async () => {
-    const source = babel.babelParse(
-      await loadTemplate('vitest.config.4.template', {
-        CONFIG_DIR: '.storybook',
-        BROWSER_CONFIG: "{ provider: 'playwright' }",
-        SETUP_FILE: '../.storybook/vitest.setup.ts',
-      })
-    );
-    const target = babel.babelParse(`
+    const source = await loadTemplate('vitest.config.4.template', {
+      CONFIG_DIR: '.storybook',
+      BROWSER_CONFIG: "{ provider: 'playwright' }",
+      SETUP_FILE: '../.storybook/vitest.setup.ts',
+    });
+    const target = new SourceEditor(`
       import react from "@vitejs/plugin-react";
       import { playwright } from "@vitest/browser-playwright";
       import { defineConfig, mergeConfig } from "vite";
@@ -2152,96 +2245,106 @@ describe('updateConfigFile', () => {
       export default mergeConfig(viteConfig, vitestConfig);
     `);
 
-    const before = babel.generate(target).code;
+    const before = target.code;
     const updated = updateConfigFile(source, target);
     expect(updated).toBe(true);
 
-    const after = babel.generate(target).code;
+    const after = target.toString();
     expect(after).not.toBe(before);
 
     expect(getDiff(before, after)).toMatchInlineSnapshot(`
       "  ...
-        import { defineConfig as defineVitestConfig } from "vitest/config";
-        
-        // https://vitejs.dev/config/
+              import { defineConfig, mergeConfig } from "vite";
+              import tsconfigPaths from "vite-tsconfig-paths";
+              import { defineConfig as defineVitestConfig } from "vitest/config";
         
       + import path from 'node:path';
       + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
-      + const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+      + const dirname =
+      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
+        
+        
       + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        const viteConfig = defineConfig({
-          plugins: [tsconfigPaths(), react()],
-          optimizeDeps: {
-            exclude: ["@xmtp/wasm-bindings"]
+      + 
+              // https://vitejs.dev/config/
+              const viteConfig = defineConfig({
+                plugins: [tsconfigPaths(), react()],
+                optimizeDeps: {
       ...
-        });
-        const vitestConfig = defineVitestConfig({
-          test: {
         
-      -     browser: {
-      -       provider: playwright(),
-      -       enabled: true,
-      -       headless: true,
-      -       screenshotFailures: false,
-      -       instances: [{
-      -         browser: "chromium"
-      -       }]
-      -     },
-      -     testTimeout: 120000
+              const vitestConfig = defineVitestConfig({
+                test: {
+        
+      -           browser: {
+      -             provider: playwright(),
+      -             enabled: true,
+      -             headless: true,
+      -             screenshotFailures: false,
+      -             instances: [
+      -               {
+      -                 browser: "chromium",
       - 
-      +     projects: [{
-      +       extends: true,
-      +       test: {
-      +         browser: {
-      +           provider: playwright(),
-      +           enabled: true,
-      +           headless: true,
-      +           screenshotFailures: false,
-      +           instances: [{
-      +             browser: "chromium"
-      +           }]
-      +         },
-      +         testTimeout: 120000
-      +       }
-      +     }, {
-      +       extends: true,
-      +       plugins: [
-      +       // The plugin will run tests for the stories defined in your Storybook config
-      +       // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +       storybookTest({
-      +         configDir: path.join(dirname, '.storybook')
-      +       })],
-      +       test: {
-      +         name: 'storybook',
-      +         browser: {
-      +           enabled: true,
-      +           headless: true,
-      +           provider: playwright({}),
-      +           instances: [{
-      +             browser: 'chromium'
-      +           }]
-      +         }
-      +       }
-      +     }]
-      + 
-          }
-        });
-        export default mergeConfig(viteConfig, vitestConfig);"
+      +           projects: [
+      +             {
+      +               extends: true,
+      +               test: {
+      +                 browser: {
+      +                   provider: playwright(),
+      +                   enabled: true,
+      +                   headless: true,
+      +                   screenshotFailures: false,
+      +                   instances: [
+      +                     {
+      +                       browser: "chromium",
+      +                     },
+      +                   ],
+      +                 },
+      +                 testTimeout: 120000,
+      + 
+                      },
+        
+      -             ],
+      -           },
+      -           testTimeout: 120000,
+      - 
+      +             },
+      +             {
+      +               extends: true,
+      +               plugins: [
+      +                 // The plugin will run tests for the stories defined in your Storybook config
+      +                 // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +                 storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +               ],
+      +               test: {
+      +                 name: 'storybook',
+      +                 browser: {
+      +                   enabled: true,
+      +                   headless: true,
+      +                   provider: playwright({}),
+      +                   instances: [{ browser: 'chromium' }],
+      +                 },
+      +               },
+      +             },
+      +           ],
+      + 
+                },
+              });
+        
+              export default mergeConfig(viteConfig, vitestConfig);
+        ..."
     `);
   });
 
   it('keeps coverage at top level instead of moving into projects', async () => {
-    const source = babel.babelParse(
-      await loadTemplate('vitest.config.4.template', {
-        CONFIG_DIR: '.storybook',
-        BROWSER_CONFIG: "{ provider: 'playwright' }",
-        SETUP_FILE: '../.storybook/vitest.setup.ts',
-      })
-    );
-    const target = babel.babelParse(`
+    const source = await loadTemplate('vitest.config.4.template', {
+      CONFIG_DIR: '.storybook',
+      BROWSER_CONFIG: "{ provider: 'playwright' }",
+      SETUP_FILE: '../.storybook/vitest.setup.ts',
+    });
+    const target = new SourceEditor(`
       import { mergeConfig, defineConfig } from 'vitest/config'
       import viteConfig from './vite.config'
 
@@ -2264,79 +2367,82 @@ describe('updateConfigFile', () => {
       )
     `);
 
-    const before = babel.generate(target).code;
+    const before = target.code;
     const updated = updateConfigFile(source, target);
     expect(updated).toBe(true);
 
-    const after = babel.generate(target).code;
+    const after = target.toString();
     expect(after).not.toBe(before);
 
     expect(getDiff(before, after)).toMatchInlineSnapshot(`
-      "  import { mergeConfig, defineConfig } from 'vitest/config';
-        import viteConfig from './vite.config';
+      "  
+              import { mergeConfig, defineConfig } from 'vitest/config'
+              import viteConfig from './vite.config'
         
       + import path from 'node:path';
       + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+      + const dirname =
+      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
+        
+        
       + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        export default mergeConfig(viteConfig, defineConfig({
-          test: {
-        
-      -     name: 'unit',
-      -     environment: 'happy-dom',
-      -     include: ['**/*.test.ts'],
-      -     env: {
-      -       CI: 'true'
-      -     },
-      -     pool: 'forks',
-      -     maxWorkers: 4,
-      - 
-            coverage: {
-              provider: 'v8',
-              exclude: ['**/*.stories.*']
+      + 
+              export default mergeConfig(
+                viteConfig,
+                defineConfig({
+                  test: {
         
-      -     }
+      -             name: 'unit',
+      -             environment: 'happy-dom',
+      -             include: ['**/*.test.ts'],
+      -             env: { CI: 'true' },
+      -             pool: 'forks',
+      -             maxWorkers: 4,
       - 
-      +     },
-      +     projects: [{
-      +       extends: true,
-      +       test: {
-      +         name: 'unit',
-      +         environment: 'happy-dom',
-      +         include: ['**/*.test.ts'],
-      +         env: {
-      +           CI: 'true'
-      +         },
-      +         pool: 'forks',
-      +         maxWorkers: 4
-      +       }
-      +     }, {
-      +       extends: true,
-      +       plugins: [
-      +       // The plugin will run tests for the stories defined in your Storybook config
-      +       // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +       storybookTest({
-      +         configDir: path.join(dirname, '.storybook')
-      +       })],
-      +       test: {
-      +         name: 'storybook',
-      +         browser: {
-      +           enabled: true,
-      +           headless: true,
-      +           provider: playwright({}),
-      +           instances: [{
-      +             browser: 'chromium'
-      +           }]
-      +         }
-      +       }
-      +     }]
-      + 
-          }
-        }));"
+                    coverage: {
+                      provider: 'v8',
+                      exclude: ['**/*.stories.*'],
+                    },
+        
+      +             projects: [
+      +               {
+      +                 extends: true,
+      +                 test: {
+      +                   name: 'unit',
+      +                   environment: 'happy-dom',
+      +                   include: ['**/*.test.ts'],
+      +                   env: { CI: 'true' },
+      +                   pool: 'forks',
+      +                   maxWorkers: 4,
+      +                 },
+      +               },
+      +               {
+      +                 extends: true,
+      +                 plugins: [
+      +                   // The plugin will run tests for the stories defined in your Storybook config
+      +                   // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +                   storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                 ],
+      +                 test: {
+      +                   name: 'storybook',
+      +                   browser: {
+      +                     enabled: true,
+      +                     headless: true,
+      +                     provider: playwright({}),
+      +                     instances: [{ browser: 'chromium' }],
+      +                   },
+      +                 },
+      +               },
+      +             ],
+      + 
+                  },
+                })
+              )
+            "
     `);
   });
 });
diff --git a/code/addons/vitest/src/updateVitestFile.ts b/code/addons/vitest/src/updateVitestFile.ts
index 08c7e5bca693..2579f7524e0e 100644
--- a/code/addons/vitest/src/updateVitestFile.ts
+++ b/code/addons/vitest/src/updateVitestFile.ts
@@ -1,11 +1,19 @@
 import {
+  findExportDefault,
   getConfigObjectFromMergeArg,
   getEffectiveMergeConfigCall,
   getTargetConfigObject,
-  isDefineConfigLike,
   resolveExpression,
-} from 'storybook/internal/babel';
-import type { BabelFile, types as t } from 'storybook/internal/babel';
+} from 'storybook/internal/cli';
+import {
+  type ESTree as E,
+  SourceEditor,
+  appendToList,
+  arrayList,
+  itemText,
+  objectList,
+  prependToList,
+} from 'storybook/internal/csf-tools';
 
 import { normalize } from 'pathe';
 
@@ -28,458 +36,322 @@ export const loadTemplate = async (name: string, replacements: Record<string, st
   return template;
 };
 
-// Recursively merge object properties from source into target
-// Handles nested objects and shallowly merging of arrays
+type Member = E.ObjectExpression['properties'][number];
+
+// The template is merged from `source` into the user's config in `target`.
+interface Merge {
+  source: SourceEditor;
+  target: SourceEditor;
+}
+
+const keyName = (member: Member) =>
+  member.type === 'Property' &&
+  !member.method &&
+  member.kind === 'init' &&
+  member.key.type === 'Identifier'
+    ? member.key.name
+    : undefined;
+
+const findNamedProp = (members: Member[], name: string) =>
+  members.find((member): member is E.ObjectProperty => keyName(member) === name);
+
+const isProjectsArrayProp = (
+  member: Member
+): member is E.ObjectProperty & { value: E.ArrayExpression } =>
+  keyName(member) === 'projects' && (member as E.ObjectProperty).value.type === 'ArrayExpression';
+
+const memberTexts = (editor: SourceEditor, object: E.ObjectExpression, members: Member[]) =>
+  members.map((member) => itemText(editor, objectList(object), member));
+
+const elementTexts = (editor: SourceEditor, array: E.ArrayExpression) =>
+  arrayList(array).items.map((element) => itemText(editor, arrayList(array), element));
+
+const indent = (text: string, prefix: string) => prefix + text.replaceAll('\n', `\n${prefix}`);
+
+const lineIndentAt = (code: string, index: number) =>
+  /^[ \t]*/.exec(code.slice(code.lastIndexOf('\n', index - 1) + 1))![0];
+
+// `appendToList` re-indents multi-line items only when the list itself spans lines.
+const appendItems = (
+  editor: SourceEditor,
+  list: ReturnType<typeof arrayList>,
+  texts: string[],
+  padding?: string
+) => {
+  const inline = list.items.length > 0 && !editor.code.slice(list.open, list.close).includes('\n');
+  const continuation = `\n${lineIndentAt(editor.code, list.open)}`;
+  appendToList(
+    editor,
+    list,
+    inline ? texts.map((text) => text.replaceAll('\n', continuation)) : texts,
+    padding
+  );
+};
+
+// Nested objects are merged, arrays concatenated, other values overwritten.
 const mergeProperties = (
-  source: t.ObjectExpression['properties'],
-  target: t.ObjectExpression['properties']
+  { source, target }: Merge,
+  from: E.ObjectExpression,
+  into: E.ObjectExpression,
+  fromMembers: Member[] = from.properties
 ) => {
-  for (const sourceProp of source) {
-    if (sourceProp.type === 'ObjectProperty') {
-      const targetProp = target.find(
-        (p) =>
-          sourceProp.key.type === 'Identifier' &&
-          p.type === 'ObjectProperty' &&
-          p.key.type === 'Identifier' &&
-          p.key.name === sourceProp.key.name
+  const appended: string[] = [];
+  for (const sourceProp of fromMembers) {
+    const name = keyName(sourceProp);
+    if (!name) {
+      continue;
+    }
+    const targetProp = findNamedProp(into.properties, name);
+    if (!targetProp) {
+      appended.push(...memberTexts(source, from, [sourceProp]));
+      continue;
+    }
+    const { value: sourceValue } = sourceProp as E.ObjectProperty;
+    const { value: targetValue } = targetProp;
+    if (sourceValue.type === 'ObjectExpression' && targetValue.type === 'ObjectExpression') {
+      mergeProperties({ source, target }, sourceValue, targetValue);
+    } else if (sourceValue.type === 'ArrayExpression' && targetValue.type === 'ArrayExpression') {
+      appendItems(target, arrayList(targetValue), elementTexts(source, sourceValue), '');
+    } else if (targetProp.shorthand) {
+      target.edits.overwrite(
+        targetProp.start,
+        targetProp.end,
+        `${name}: ${source.source(sourceValue)}`
       );
-      if (targetProp && targetProp.type === 'ObjectProperty') {
-        if (
-          sourceProp.value.type === 'ObjectExpression' &&
-          targetProp.value.type === 'ObjectExpression'
-        ) {
-          mergeProperties(sourceProp.value.properties, targetProp.value.properties);
-        } else if (
-          sourceProp.value.type === 'ArrayExpression' &&
-          targetProp.value.type === 'ArrayExpression'
-        ) {
-          targetProp.value.elements.push(...sourceProp.value.elements);
-        } else {
-          targetProp.value = sourceProp.value;
-        }
-      } else {
-        target.push(sourceProp);
-      }
+    } else {
+      target.edits.overwrite(targetValue.start, targetValue.end, source.source(sourceValue));
     }
   }
-};
-
-/**
- * Resolves the value of a `test` ObjectProperty to an ObjectExpression. Handles both inline objects
- * and shorthand identifier references, e.g.: `{ test: { ... } }` → returns the inline
- * ObjectExpression `const test = {...}; { test }` → resolves the identifier to its initializer
- */
-const resolveTestPropValue = (
-  testProp: t.ObjectProperty,
-  ast: BabelFile['ast']
-): t.ObjectExpression | null => {
-  if (testProp.value.type === 'ObjectExpression') {
-    return testProp.value;
+  if (appended.length > 0) {
+    appendItems(target, objectList(into), appended);
   }
-  const resolved = resolveExpression(testProp.value as t.Expression, ast);
-  return resolved?.type === 'ObjectExpression' ? resolved : null;
 };
 
-/** Finds a named ObjectProperty in an object expression's properties. */
-const findNamedProp = (
-  properties: t.ObjectExpression['properties'],
-  name: string
-): t.ObjectProperty | undefined =>
-  properties.find(
-    (p): p is t.ObjectProperty =>
-      p.type === 'ObjectProperty' && p.key.type === 'Identifier' && p.key.name === name
-  );
-
-/** Type guard for a property that is a `projects` key with an array value. */
-const isProjectsArrayProp = (
-  p: t.ObjectMethod | t.ObjectProperty | t.SpreadElement
-): p is t.ObjectProperty =>
-  p.type === 'ObjectProperty' &&
-  p.key.type === 'Identifier' &&
-  p.key.name === 'projects' &&
-  p.value.type === 'ArrayExpression';
-
-/**
- * Appends storybook project(s) from template into an existing `test.projects` array, then merges
- * any additional test-level options (e.g. coverage) that don't already exist.
- */
-const appendToExistingProjectRefs = (
-  existingProjectRefsProp: t.ObjectProperty,
-  resolvedTestValue: t.ObjectExpression,
-  templateTestProp: t.ObjectProperty | undefined,
-  properties: t.ObjectExpression['properties'],
-  targetConfigObject: t.ObjectExpression
+const appendToExistingProjects = (
+  merge: Merge,
+  existingProjects: E.ArrayExpression,
+  testObject: E.ObjectExpression,
+  templateConfig: E.ObjectExpression,
+  targetConfig: E.ObjectExpression
 ) => {
-  if (templateTestProp && templateTestProp.value.type === 'ObjectExpression') {
-    // Append template projects entries to the existing projects array
-    const templateProjectRefsProp = templateTestProp.value.properties.find(
-      (p): p is t.ObjectProperty => isProjectsArrayProp(p)
-    );
-    if (templateProjectRefsProp && templateProjectRefsProp.value.type === 'ArrayExpression') {
-      (existingProjectRefsProp.value as t.ArrayExpression).elements.push(
-        ...(templateProjectRefsProp.value as t.ArrayExpression).elements
+  const templateTest = findNamedProp(templateConfig.properties, 'test');
+  if (templateTest?.value.type === 'ObjectExpression') {
+    const templateTestObject = templateTest.value;
+    const templateProjects = templateTestObject.properties.find(isProjectsArrayProp);
+    if (templateProjects) {
+      appendItems(
+        merge.target,
+        arrayList(existingProjects),
+        elementTexts(merge.source, templateProjects.value),
+        ''
       );
     }
-
-    // Merge other test-level options from template (e.g. coverage) that don't already exist
-    const existingTestPropNames = new Set(
-      resolvedTestValue.properties
-        .filter(
-          (p): p is t.ObjectProperty => p.type === 'ObjectProperty' && p.key.type === 'Identifier'
-        )
-        .map((p) => (p.key as t.Identifier).name)
-    );
-    for (const templateProp of templateTestProp.value.properties) {
-      if (
-        templateProp.type === 'ObjectProperty' &&
-        templateProp.key.type === 'Identifier' &&
-        (templateProp.key as t.Identifier).name !== 'projects' &&
-        !existingTestPropNames.has((templateProp.key as t.Identifier).name)
-      ) {
-        resolvedTestValue.properties.push(templateProp);
-      }
+    const existingNames = new Set(testObject.properties.map(keyName));
+    const added = templateTestObject.properties.filter((member) => {
+      const name = keyName(member);
+      return name !== undefined && name !== 'projects' && !existingNames.has(name);
+    });
+    if (added.length > 0) {
+      appendItems(
+        merge.target,
+        objectList(testObject),
+        memberTexts(merge.source, templateTestObject, added)
+      );
     }
   }
 
-  // Merge only non-test properties from template
-  const otherTemplateProps = properties.filter(
-    (p) => !(p.type === 'ObjectProperty' && p.key.type === 'Identifier' && p.key.name === 'test')
+  mergeProperties(
+    merge,
+    templateConfig,
+    targetConfig,
+    templateConfig.properties.filter((member) => keyName(member) !== 'test')
   );
-  if (otherTemplateProps.length > 0) {
-    mergeProperties(otherTemplateProps, targetConfigObject.properties);
-  }
 };
 
-/**
- * Wraps the existing test config as one project entry inside the template's projects array,
- * hoisting shared properties (coverage, env, pool, maxWorkers) to the top-level test
- * object.
- */
+// Run-wide test options, which stay on the top-level test object instead of moving into a project.
+const TOP_LEVEL_TEST_PROPERTIES = [
+  'shard',
+  'watch',
+  'run',
+  'cache',
+  'update',
+  'reporters',
+  'outputFile',
+  'teardownTimeout',
+  'silent',
+  'forceRerunTriggers',
+  'testNamePattern',
+  'ui',
+  'open',
+  'uiBase',
+  'snapshotFormat',
+  'resolveSnapshotPath',
+  'passWithNoTests',
+  'onConsoleLog',
+  'onStackTrace',
+  'dangerouslyIgnoreUnhandledErrors',
+  'slowTestThreshold',
+  'inspect',
+  'inspectBrk',
+  'coverage',
+  'watchTriggerPatterns',
+];
+
+// Moves the user's test config into the template's projects array as `{ extends: true, test }`.
 const wrapTestConfigAsProject = (
-  resolvedTestValue: t.ObjectExpression,
-  existingTestProp: t.ObjectProperty,
-  templateTestProp: t.ObjectProperty,
-  properties: t.ObjectExpression['properties'],
-  targetConfigObject: t.ObjectExpression
+  merge: Merge,
+  existingTest: E.ObjectProperty,
+  testObject: E.ObjectExpression,
+  templateConfig: () => E.ObjectExpression,
+  targetConfig: E.ObjectExpression
 ) => {
-  const projectsProp =
-    templateTestProp.value.type === 'ObjectExpression'
-      ? templateTestProp.value.properties.find((p): p is t.ObjectProperty => isProjectsArrayProp(p))
-      : undefined;
-
-  if (!projectsProp || projectsProp.value.type !== 'ArrayExpression') {
-    mergeProperties(properties, targetConfigObject.properties);
+  const { source, target } = merge;
+  const templateTestObject = findNamedProp(templateConfig().properties, 'test')!
+    .value as E.ObjectExpression;
+  const templateProjects = templateTestObject.properties.find(isProjectsArrayProp);
+  if (!templateProjects) {
+    mergeProperties(merge, templateConfig(), targetConfig);
     return;
   }
 
-  // Properties that should stay at the top-level test object (shared across all projects)
-  const TOP_LEVEL_TEST_PROPERTIES = [
-    'shard',
-    'watch',
-    'run',
-    'cache',
-    'update',
-    'reporters',
-    'outputFile',
-    'teardownTimeout',
-    'silent',
-    'forceRerunTriggers',
-    'testNamePattern',
-    'ui',
-    'open',
-    'uiBase',
-    'snapshotFormat',
-    'resolveSnapshotPath',
-    'passWithNoTests',
-    'onConsoleLog',
-    'onStackTrace',
-    'dangerouslyIgnoreUnhandledErrors',
-    'slowTestThreshold',
-    'inspect',
-    'inspectBrk',
-    'coverage',
-    'watchTriggerPatterns',
-  ];
-
-  const topLevelProps = TOP_LEVEL_TEST_PROPERTIES.map((name) =>
-    findNamedProp(resolvedTestValue.properties, name)
-  ).filter(Boolean) as t.ObjectProperty[];
-
-  const topLevelPropSet = new Set(topLevelProps);
-  const projectTestProps = resolvedTestValue.properties.filter(
-    (p) => !topLevelPropSet.has(p as any)
+  const hoisted = TOP_LEVEL_TEST_PROPERTIES.map((name) =>
+    findNamedProp(testObject.properties, name)
+  ).filter((member) => member !== undefined);
+  const projectMembers = testObject.properties.filter(
+    (member) => !hoisted.includes(member as E.ObjectProperty)
   );
-
-  // Create the existing test project: { extends: true, test: { ...projectTestProps } }
-  const existingTestProject: t.ObjectExpression = {
-    type: 'ObjectExpression',
-    properties: [
-      {
-        type: 'ObjectProperty',
-        key: { type: 'Identifier', name: 'extends' } as t.Identifier,
-        value: { type: 'BooleanLiteral', value: true } as t.BooleanLiteral,
-        computed: false,
-        shorthand: false,
-      } as t.ObjectProperty,
-      {
-        type: 'ObjectProperty',
-        key: { type: 'Identifier', name: 'test' } as t.Identifier,
-        value: {
-          type: 'ObjectExpression',
-          properties: projectTestProps,
-        } as t.ObjectExpression,
-        computed: false,
-        shorthand: false,
-      } as t.ObjectProperty,
-    ],
-  };
-
-  // Add the existing test project to the template's array
-  projectsProp.value.elements.unshift(existingTestProject);
-
-  // Remove the existing test property from the target config (it's now in the array)
-  targetConfigObject.properties = targetConfigObject.properties.filter(
-    (p) => p !== existingTestProp
-  );
-
-  // Hoist top-level properties to the test object so they apply to all projects
-  if (topLevelProps.length > 0 && templateTestProp.value.type === 'ObjectExpression') {
-    templateTestProp.value.properties.unshift(...topLevelProps);
+  const projectTest = memberTexts(target, testObject, projectMembers)
+    .map((text) => `\n${indent(text, '    ')},`)
+    .join('');
+  const project = `{\n  extends: true,\n  test: {${projectTest}${projectTest ? '\n  ' : ''}},\n}`;
+
+  prependToList(source, arrayList(templateProjects.value), [project], '');
+  if (hoisted.length > 0) {
+    prependToList(source, objectList(templateTestObject), memberTexts(target, testObject, hoisted));
   }
-
-  mergeProperties(properties, targetConfigObject.properties);
+  source.commit();
+
+  const config = templateConfig();
+  const templateTest = findNamedProp(config.properties, 'test')!;
+  const lineIndent = lineIndentAt(target.code, existingTest.start);
+  target.edits.overwrite(
+    existingTest.start,
+    existingTest.end,
+    itemText(source, objectList(config), templateTest).replaceAll('\n', `\n${lineIndent}`)
+  );
+  mergeProperties(
+    merge,
+    config,
+    targetConfig,
+    config.properties.filter((member) => member !== templateTest)
+  );
 };
 
-/**
- * Merges template properties into a config object, handling Vitest `test.projects` migration
- * semantics:
- *
- * - Append when projects already exists
- * - Wrap existing test config as a project when template introduces projects
- * - Otherwise perform a regular merge
- */
 const mergeTemplateIntoConfigObject = (
-  targetConfigObject: t.ObjectExpression,
-  properties: t.ObjectExpression['properties'],
-  target: BabelFile['ast']
+  merge: Merge,
+  targetConfig: E.ObjectExpression,
+  templateConfig: () => E.ObjectExpression
 ) => {
-  const existingTestProp = findNamedProp(targetConfigObject.properties, 'test');
-  const resolvedTestValue = existingTestProp
-    ? resolveTestPropValue(existingTestProp, target)
+  const existingTest = findNamedProp(targetConfig.properties, 'test');
+  const testObject = existingTest
+    ? resolveExpression(existingTest.value, merge.target.program)
     : null;
-  const templateTestProp = findNamedProp(properties, 'test');
-
-  if (existingTestProp && resolvedTestValue !== null) {
-    const existingProjectRefsProp = resolvedTestValue.properties.find(isProjectsArrayProp);
-
-    if (existingProjectRefsProp) {
-      appendToExistingProjectRefs(
-        existingProjectRefsProp,
-        resolvedTestValue,
-        templateTestProp,
-        properties,
-        targetConfigObject
+  if (existingTest && testObject?.type === 'ObjectExpression') {
+    const existingProjects = testObject.properties.find(isProjectsArrayProp);
+    if (existingProjects) {
+      appendToExistingProjects(
+        merge,
+        existingProjects.value,
+        testObject,
+        templateConfig(),
+        targetConfig
       );
       return;
     }
-
-    if (templateTestProp && templateTestProp.value.type === 'ObjectExpression') {
-      wrapTestConfigAsProject(
-        resolvedTestValue,
-        existingTestProp,
-        templateTestProp,
-        properties,
-        targetConfigObject
-      );
+    if (findNamedProp(templateConfig().properties, 'test')?.value.type === 'ObjectExpression') {
+      wrapTestConfigAsProject(merge, existingTest, testObject, templateConfig, targetConfig);
       return;
     }
   }
-
-  mergeProperties(properties, targetConfigObject.properties);
+  mergeProperties(merge, templateConfig(), targetConfig);
 };
 
-/**
- * Finds the writable target config object in `export default ...`, including
- * callback-based defineConfig patterns like `defineConfig(({ mode }) => ({ ... }))`
- * and `defineConfig(() => { return { ... }; })`.
- */
-const getWritableTargetConfigObject = (
-  target: BabelFile['ast'],
-  exportDefault: t.ExportDefaultDeclaration
-): t.ObjectExpression | null => {
-  const directConfigObject = getTargetConfigObject(target, exportDefault);
-  if (directConfigObject) {
-    return directConfigObject;
-  }
-
-  const resolvedDecl = resolveExpression(exportDefault.declaration, target);
-  if (resolvedDecl?.type !== 'CallExpression' || !isDefineConfigLike(resolvedDecl, target)) {
-    return null;
+const findWritableConfigObject = (
+  program: E.Program,
+  exportDefault: E.ExportDefaultDeclaration
+) => {
+  const configObject = getTargetConfigObject(program, exportDefault);
+  if (configObject) {
+    return configObject;
   }
-
-  const callbackArg = resolvedDecl.arguments[0];
-  if (
-    !callbackArg ||
-    (callbackArg.type !== 'ArrowFunctionExpression' && callbackArg.type !== 'FunctionExpression')
-  ) {
+  const mergeConfigCall = getEffectiveMergeConfigCall(exportDefault.declaration, program);
+  if (!mergeConfigCall || mergeConfigCall.arguments.length < 2) {
     return null;
   }
+  const candidates = mergeConfigCall.arguments
+    .map((arg) => getConfigObjectFromMergeArg(arg, program))
+    .filter((object) => object !== null);
+  return (
+    candidates.find((object) => findNamedProp(object.properties, 'test')) ?? candidates[0] ?? null
+  );
+};
 
-  if (callbackArg.body.type === 'ObjectExpression') {
-    return callbackArg.body;
-  }
-
-  if (
-    callbackArg.body.type === 'BlockStatement' &&
-    callbackArg.body.body.length === 1 &&
-    callbackArg.body.body[0]?.type === 'ReturnStatement'
-  ) {
-    const returnedExpr = resolveExpression(callbackArg.body.body[0].argument, target);
-    if (returnedExpr?.type === 'ObjectExpression') {
-      return returnedExpr;
+// Template imports and variables the target lacks, each with the comments that follow it.
+const missingStatements = (source: SourceEditor, target: E.Program) => {
+  const { body } = source.program;
+  const declaresImport = (name: string) =>
+    target.body.some(
+      (node) =>
+        node.type === 'ImportDeclaration' &&
+        node.specifiers.some((specifier) => specifier.local.name === name)
+    );
+  const declaresVariable = (name: string) =>
+    target.body.some(
+      (node) =>
+        node.type === 'VariableDeclaration' &&
+        node.declarations.some((d) => d.id.type === 'Identifier' && d.id.name === name)
+    );
+  return body.flatMap((node, index) => {
+    const text = source.code.slice(node.start, body[index + 1]?.start ?? source.code.length).trim();
+    if (node.type === 'ImportDeclaration') {
+      const name = node.specifiers[0]?.local.name;
+      return name && !declaresImport(name) ? [text] : [];
     }
-  }
-
-  return null;
+    if (node.type === 'VariableDeclaration') {
+      const id = node.declarations[0]?.id;
+      return id?.type === 'Identifier' && !declaresVariable(id.name) ? [text] : [];
+    }
+    return [];
+  });
 };
 
-/**
- * Merges a source Vitest configuration AST into a target configuration AST.
- *
- * This function intelligently combines configuration elements from a source file (typically a
- * template) into an existing target configuration file, avoiding duplicates and preserving the
- * structure of both files.
- *
- * The function performs the following operations:
- *
- * 1. **Import Merging**: Adds new import statements from source that don't exist in target (determined
- *    by local specifier name). Imports are inserted after existing imports.
- * 2. **Variable Declaration Merging**: Copies variable declarations from source to target if they
- *    don't already exist (determined by variable name). Variables are inserted after imports.
- * 3. **Configuration Object Merging**: Merges the configuration object properties from source into
- *    target's default export. Supports both direct object exports and function-wrapped exports
- *    (e.g., `defineConfig({})`). The merging is recursive:
- *
- *    - Nested objects are merged deeply
- *    - Arrays are concatenated (shallow merge)
- *    - Primitive values are overwritten
- *
- * @param source - The source Babel AST (template configuration to merge from)
- * @param target - The target Babel AST (existing configuration to merge into)
- * @returns {boolean} - True if the target was modified, false otherwise
- */
-export const updateConfigFile = (source: BabelFile['ast'], target: BabelFile['ast']) => {
-  let updated = false;
-
-  // First, check if we can actually modify the configuration
-  const sourceExportDefault = source.program.body.find(
-    (n) => n.type === 'ExportDefaultDeclaration'
-  );
-  if (!sourceExportDefault || sourceExportDefault.declaration.type !== 'CallExpression') {
-    return false;
-  }
-
-  const targetExportDefault = target.program.body.find(
-    (n) => n.type === 'ExportDefaultDeclaration'
-  );
-  if (!targetExportDefault) {
-    return false;
-  }
-
-  // Check if we can handle the config pattern (direct object, defineConfig/defineProject,
-  // mergeConfig, or any of these wrapped in TS type annotations / variable references)
-  let canHandleConfig = false;
-  if (getWritableTargetConfigObject(target, targetExportDefault) !== null) {
-    canHandleConfig = true;
-  } else if (getEffectiveMergeConfigCall(targetExportDefault.declaration, target) !== null) {
-    canHandleConfig = true;
-  }
-
-  if (!canHandleConfig) {
+// Returns whether the config was updated; the edits are committed to `target` only when it was.
+export const updateConfigFile = (sourceCode: string, target: SourceEditor): boolean => {
+  const source = new SourceEditor(sourceCode);
+  const templateConfig = () => {
+    const declaration = findExportDefault(source.program)?.declaration;
+    return declaration?.type === 'CallExpression' &&
+      declaration.arguments[0]?.type === 'ObjectExpression'
+      ? declaration.arguments[0]
+      : null;
+  };
+  const exportDefault = findExportDefault(target.program);
+  const targetConfig = exportDefault && findWritableConfigObject(target.program, exportDefault);
+  if (!templateConfig() || !targetConfig) {
     return false;
   }
 
-  // If we get here, we can modify the configuration, so add imports and variables first
-  for (const sourceNode of source.program.body) {
-    if (sourceNode.type === 'ImportDeclaration') {
-      // Insert imports that don't already exist (according to their local specifier name)
-      if (
-        !target.program.body.some(
-          (targetNode) =>
-            targetNode.type === sourceNode.type &&
-            targetNode.specifiers.some((s) => s.local.name === sourceNode.specifiers[0].local.name)
-        )
-      ) {
-        const lastImport = target.program.body.findLastIndex((n) => n.type === 'ImportDeclaration');
-        target.program.body.splice(lastImport + 1, 0, sourceNode);
-      }
-    } else if (sourceNode.type === 'VariableDeclaration') {
-      // Copy over variable declarations, making sure they're inserted after any imports
-      if (
-        !target.program.body.some(
-          (targetNode) =>
-            targetNode.type === sourceNode.type &&
-            targetNode.declarations.some(
-              (d) =>
-                'name' in d.id &&
-                'name' in sourceNode.declarations[0].id &&
-                d.id.name === sourceNode.declarations[0].id.name
-            )
-        )
-      ) {
-        const lastImport = target.program.body.findLastIndex((n) => n.type === 'ImportDeclaration');
-        target.program.body.splice(lastImport + 1, 0, sourceNode);
-      }
-    } else if (sourceNode.type === 'ExportDefaultDeclaration') {
-      const exportDefault = target.program.body.find((n) => n.type === 'ExportDefaultDeclaration');
-      if (
-        exportDefault &&
-        sourceNode.declaration.type === 'CallExpression' &&
-        sourceNode.declaration.arguments.length > 0 &&
-        sourceNode.declaration.arguments[0].type === 'ObjectExpression'
-      ) {
-        const { properties } = sourceNode.declaration.arguments[0];
-        const targetConfigObject = getWritableTargetConfigObject(target, exportDefault);
-        if (targetConfigObject !== null) {
-          mergeTemplateIntoConfigObject(targetConfigObject, properties, target);
-          updated = true;
-        } else {
-          const mergeConfigCall = getEffectiveMergeConfigCall(exportDefault.declaration, target);
-          if (mergeConfigCall && mergeConfigCall.arguments.length >= 2) {
-            // Collect all potential config object nodes from mergeConfig arguments.
-            // Each argument may be a plain object, a wrapper call with object argument,
-            // an Identifier (variable reference), or wrapped in a TS type annotation.
-            const configObjectNodes: t.ObjectExpression[] = [];
-
-            for (const arg of mergeConfigCall.arguments) {
-              const configObject = getConfigObjectFromMergeArg(arg as t.Expression, target);
-              if (configObject) {
-                configObjectNodes.push(configObject);
-              }
-            }
-
-            // Prefer the config object that already has an immediate `test` property.
-            const configObjectWithTest = configObjectNodes.find((obj) =>
-              obj.properties.some(
-                (p) =>
-                  p.type === 'ObjectProperty' &&
-                  p.key.type === 'Identifier' &&
-                  p.key.name === 'test'
-              )
-            );
-
-            const targetConfigObject = configObjectWithTest || configObjectNodes[0];
-
-            if (!targetConfigObject) {
-              return false;
-            }
-
-            mergeTemplateIntoConfigObject(targetConfigObject, properties, target);
-            updated = true;
-          }
-        }
-      }
+  const statements = missingStatements(source, target.program);
+  if (statements.length > 0) {
+    const lastImport = target.program.body.findLast((node) => node.type === 'ImportDeclaration');
+    if (lastImport) {
+      target.edits.appendLeft(lastImport.end, `\n${statements.join('\n')}`);
+    } else {
+      target.edits.appendLeft(target.program.body[0].start, `${statements.join('\n')}\n\n`);
     }
   }
-  return updated;
+
+  mergeTemplateIntoConfigObject({ source, target }, targetConfig, () => templateConfig()!);
+  target.commit();
+  return true;
 };

From 9e89405796838f7204d7dcc7decec889ef5e7ff5 Mon Sep 17 00:00:00 2001
From: Easton <easton.shin@marqvision.com>
Date: Tue, 13 Oct 2026 11:52:17 +0900
Subject: [PATCH 055/326] refactor(cli): run automigrations and codemods on
 source edits instead of Babel

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/automigrate/fix-files.test.ts         |   5 +-
 .../fixes/addon-svelte-csf-to-core.ts         |  83 ++-
 .../fixes/angular-to-angular-vite.ts          |   5 +-
 .../angular-vite-remove-compodoc.test.ts      |   4 +-
 .../fixes/angular-vite-remove-compodoc.ts     |  60 +-
 .../fixes/argtypes-default-value.ts           |  13 +-
 .../fixes/component-subtitle.test.ts          |  23 +-
 .../automigrate/fixes/csf-next-mocked-args.ts |   2 +-
 .../automigrate/fixes/docgen-server.test.ts   |   6 +-
 .../fixes/experimental-features.test.ts       |   6 +-
 .../remove-change-detection-flag.test.ts      |   7 +-
 .../fixes/remove-experimental-review.test.ts  |  21 +-
 .../fixes/set-config-layout.test.ts           |  41 +-
 .../automigrate/fixes/tag-filter-api.test.ts  |   6 +-
 .../src/automigrate/fixes/tag-filter-api.ts   |  86 +--
 .../fixes/vitest-setup-file.test.ts           |   2 -
 .../automigrate/fixes/vitest-setup-file.ts    | 141 ++--
 .../web-components-runtime-manifest.test.ts   |  30 +-
 .../fixes/web-components-runtime-manifest.ts  |  96 +--
 .../fixes/wrap-getAbsolutePath.test.ts        |  31 +-
 .../automigrate/fixes/wrap-getAbsolutePath.ts |   8 +-
 .../src/automigrate/helpers/preview-call.ts   | 140 ++--
 .../src/automigrate/helpers/source-edits.ts   |  55 ++
 .../src/automigrate/pipeline.test.ts          |  16 +-
 .../helpers/config-to-csf-factory.test.ts     |  20 +-
 .../codemod/helpers/config-to-csf-factory.ts  | 269 +++-----
 .../helpers/csf-factories-utils.test.ts       | 151 ++---
 .../codemod/helpers/csf-factories-utils.ts    | 182 +++--
 .../src/codemod/helpers/custom-args-type.ts   | 104 +--
 .../helpers/remove-unused-types.test.ts       |   2 +-
 .../codemod/helpers/remove-unused-types.ts    | 213 ++----
 .../helpers/story-to-csf-factory.test.ts      |  31 +-
 .../codemod/helpers/story-to-csf-factory.ts   | 638 ++++++++----------
 .../codemod/helpers/wrap-args-mocks.test.ts   |  24 +-
 .../src/codemod/helpers/wrap-args-mocks.ts    | 203 +++---
 35 files changed, 1264 insertions(+), 1460 deletions(-)
 create mode 100644 code/lib/cli-storybook/src/automigrate/helpers/source-edits.ts

diff --git a/code/lib/cli-storybook/src/automigrate/fix-files.test.ts b/code/lib/cli-storybook/src/automigrate/fix-files.test.ts
index becaa5479e79..b43ded69bbb9 100644
--- a/code/lib/cli-storybook/src/automigrate/fix-files.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fix-files.test.ts
@@ -39,10 +39,7 @@ describe('createFixFiles', () => {
     await commit();
     expect(fs.readFileSync(main, 'utf8')).toMatchInlineSnapshot(`
       "// banner
-      export default {
-        addons: ['a'],
-        framework: 'x'
-      };"
+      export default { addons: ['a'], framework: 'x' };"
     `);
     expect(fs.readFileSync(resolve('.storybook/new.ts'), 'utf8')).toBe('export {};');
   });
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/addon-svelte-csf-to-core.ts b/code/lib/cli-storybook/src/automigrate/fixes/addon-svelte-csf-to-core.ts
index 4fde96f69454..9d13bc03eaa9 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/addon-svelte-csf-to-core.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/addon-svelte-csf-to-core.ts
@@ -1,7 +1,12 @@
 import { relative, resolve } from 'node:path';
 
-import { parser, traverse, types as t } from 'storybook/internal/babel';
 import { getProjectRoot, normalizeAddonName, removeAddon } from 'storybook/internal/common';
+import {
+  type ESTree as E,
+  type ESTreeNode as Node,
+  parseModule,
+  walk,
+} from 'storybook/internal/csf-tools';
 import type { StorybookConfigRaw } from 'storybook/internal/types';
 
 import picocolors from 'picocolors';
@@ -117,9 +122,9 @@ const legacyStorySyntax = (code: string) => {
 
 const parse = (code: string) => {
   // A `.ts` file with `<T>(x: T) => x` or `<T>value` only parses without JSX.
-  for (const plugins of [['typescript', 'jsx'], ['typescript']] as const) {
+  for (const fileName of ['file.tsx', 'file.ts']) {
     try {
-      return parser.parse(code, { sourceType: 'module', plugins: [...plugins] });
+      return parseModule(code, fileName);
     } catch {}
   }
   return undefined;
@@ -132,34 +137,32 @@ const renameImports = (code: string, framework: string) => {
     return code.replace(ADDON_IMPORT, `$1$2${framework}$2`);
   }
   const ranges: { start: number; end: number }[] = [];
-  const addSource = (node: t.Node | null | undefined) => {
-    const name = t.isStringLiteral(node)
-      ? node.value
-      : t.isTemplateLiteral(node) && node.expressions.length === 0
-        ? node.quasis[0].value.cooked
-        : undefined;
+  const addSource = (node: Node | null | undefined) => {
+    const name =
+      node?.type === 'Literal'
+        ? node.value
+        : node?.type === 'TemplateLiteral' && node.expressions.length === 0
+          ? node.quasis[0].value.cooked
+          : undefined;
     if (node && name === ADDON_SVELTE_CSF) {
-      ranges.push({ start: node.start! + 1, end: node.end! - 1 });
+      ranges.push({ start: node.start + 1, end: node.end - 1 });
     }
   };
-  traverse(ast, {
-    ImportDeclaration: ({ node }) => addSource(node.source),
-    ExportNamedDeclaration: ({ node }) => addSource(node.source),
-    ExportAllDeclaration: ({ node }) => addSource(node.source),
-    CallExpression: ({ node }) => {
-      if (t.isImport(node.callee)) {
-        addSource(node.arguments[0]);
-      }
-    },
-    TSImportType: ({ node }) => {
-      const argument = node.argument as t.Node;
-      addSource(t.isTSLiteralType(argument) ? argument.literal : argument);
-    },
+  walk(ast.program, (node) => {
+    if (
+      node.type === 'ImportDeclaration' ||
+      node.type === 'ExportNamedDeclaration' ||
+      node.type === 'ExportAllDeclaration' ||
+      node.type === 'ImportExpression' ||
+      node.type === 'TSImportType'
+    ) {
+      addSource(node.source);
+    }
   });
   for (const comment of ast.comments ?? []) {
     for (const match of comment.value.matchAll(COMMENT_IMPORT)) {
       // Comment values start after `//` or `/*`.
-      const start = comment.start! + 2 + match.index + match[1].length + 1;
+      const start = comment.start + 2 + match.index + match[1].length + 1;
       ranges.push({ start, end: start + ADDON_SVELTE_CSF.length });
     }
   }
@@ -178,13 +181,13 @@ const mergeImports = (code: string, source: string) => {
     return code;
   }
 
-  const groups = new Map<string, t.ImportDeclaration[]>();
+  const groups = new Map<string, E.ImportDeclaration[]>();
   for (const node of ast.program.body) {
     if (
-      t.isImportDeclaration(node) &&
+      node.type === 'ImportDeclaration' &&
       node.source.value === source &&
       node.specifiers.length > 0 &&
-      node.specifiers.every((specifier) => t.isImportSpecifier(specifier))
+      node.specifiers.every((specifier) => specifier.type === 'ImportSpecifier')
     ) {
       const kind = node.importKind ?? 'value';
       groups.set(kind, [...(groups.get(kind) ?? []), node]);
@@ -197,21 +200,21 @@ const mergeImports = (code: string, source: string) => {
       continue;
     }
     const specifiers = [first, ...rest].flatMap(({ specifiers }) =>
-      specifiers.map((specifier) => code.slice(specifier.start!, specifier.end!))
+      specifiers.map((specifier) => code.slice(specifier.start, specifier.end))
     );
     edits.push({
-      start: first.specifiers[0].start!,
-      end: first.specifiers.at(-1)!.end!,
+      start: first.specifiers[0].start,
+      end: first.specifiers.at(-1)!.end,
       text: [...new Set(specifiers)].join(', '),
     });
     for (const node of rest) {
-      const lineStart = code.lastIndexOf('\n', node.start! - 1) + 1;
-      const lineEnd = code.startsWith('\r\n', node.end!) ? 2 : code[node.end!] === '\n' ? 1 : 0;
-      const ownLine = code.slice(lineStart, node.start!).trim() === '' && lineEnd > 0;
+      const lineStart = code.lastIndexOf('\n', node.start - 1) + 1;
+      const lineEnd = code.startsWith('\r\n', node.end) ? 2 : code[node.end] === '\n' ? 1 : 0;
+      const ownLine = code.slice(lineStart, node.start).trim() === '' && lineEnd > 0;
       edits.push(
         ownLine
-          ? { start: lineStart, end: node.end! + lineEnd, text: '' }
-          : { start: node.start!, end: node.end!, text: '' }
+          ? { start: lineStart, end: node.end + lineEnd, text: '' }
+          : { start: node.start, end: node.end, text: '' }
       );
     }
   }
@@ -252,13 +255,9 @@ const usesDefineMeta = (code: string) =>
       return /\bdefineMeta\b/.test(content);
     }
     let found = false;
-    traverse(ast, {
-      Identifier: (path) => {
-        if (path.node.name === 'defineMeta') {
-          found = true;
-          path.stop();
-        }
-      },
+    walk(ast.program, (node) => {
+      found ||= node.type === 'Identifier' && node.name === 'defineMeta';
+      return !found;
     });
     return found;
   });
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/angular-to-angular-vite.ts b/code/lib/cli-storybook/src/automigrate/fixes/angular-to-angular-vite.ts
index 0b42990a0391..3d31c70264ba 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/angular-to-angular-vite.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/angular-to-angular-vite.ts
@@ -1,4 +1,3 @@
-import { types as t } from 'storybook/internal/babel';
 import {
   ANALOG_VITE_PLUGIN_ANGULAR_VERSION,
   editJsonText,
@@ -216,9 +215,9 @@ const rewriteWorkspaceJson = (files: FixFiles, paths: string[]) =>
 const addZoneJsImport: FixTransform = {
   filter: { kind: ['preview'] },
   editConfig: (preview, { id }) => {
-    const hasZoneJsImport = preview._ast.program.body.some(
+    const hasZoneJsImport = preview._program.body.some(
       (node) =>
-        t.isImportDeclaration(node) &&
+        node.type === 'ImportDeclaration' &&
         (node.source.value === 'zone.js' || node.source.value.startsWith('zone.js/'))
     );
     if (hasZoneJsImport) {
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/angular-vite-remove-compodoc.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/angular-vite-remove-compodoc.test.ts
index 165894bff5d3..4b1e2b233e7f 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/angular-vite-remove-compodoc.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/angular-vite-remove-compodoc.test.ts
@@ -523,9 +523,7 @@ describe('run', () => {
       export default {
         framework: {
           name: '@storybook/angular-vite',
-          options: {
-            zoneless: true
-          },
+          options: { zoneless: true },
         },
       };
     `);
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/angular-vite-remove-compodoc.ts b/code/lib/cli-storybook/src/automigrate/fixes/angular-vite-remove-compodoc.ts
index 8f39f5121a3b..5e97128b3a71 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/angular-vite-remove-compodoc.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/angular-vite-remove-compodoc.ts
@@ -1,7 +1,12 @@
-import { babelParse, traverse, types as t } from 'storybook/internal/babel';
 import { editJsonText, isStorybookTarget, type JSONEditPath } from 'storybook/internal/cli';
 import type { JsPackageManager } from 'storybook/internal/common';
-import type { ConfigFile } from 'storybook/internal/csf-tools';
+import {
+  type ConfigFile,
+  type ESTree as E,
+  type ESTreeNode as Node,
+  parseModule,
+  walk,
+} from 'storybook/internal/csf-tools';
 import { logger } from 'storybook/internal/node-logger';
 import type { StorybookConfigRaw } from 'storybook/internal/types';
 
@@ -112,13 +117,15 @@ const compodocOptionPaths = (
 
 const DOCUMENTATION_JSON = /(^|[/\\])documentation\.json$/;
 
-const isModuleSource = (literal: t.StringLiteral, parent: t.Node): boolean =>
-  t.isImportDeclaration(parent) ||
-  t.isExportNamedDeclaration(parent) ||
-  t.isExportAllDeclaration(parent) ||
-  (t.isCallExpression(parent) &&
+const isModuleSource = (literal: E.StringLiteral, parent: Node | null): boolean =>
+  parent?.type === 'ImportDeclaration' ||
+  parent?.type === 'ExportNamedDeclaration' ||
+  parent?.type === 'ExportAllDeclaration' ||
+  (parent?.type === 'ImportExpression' && parent.source === literal) ||
+  (parent?.type === 'CallExpression' &&
     parent.arguments[0] === literal &&
-    (t.isImport(parent.callee) || t.isIdentifier(parent.callee, { name: 'require' })));
+    parent.callee.type === 'Identifier' &&
+    parent.callee.name === 'require');
 
 /**
  * A preview counts as wired without a visible `setCompodocJson` call, which projects route through
@@ -128,22 +135,23 @@ const isModuleSource = (literal: t.StringLiteral, parent: t.Node): boolean =>
  * Both markers are ordinary words in a comment or a string, so they are read off the syntax tree
  * rather than the source text.
  */
-const wiresCompodoc = (ast: t.File): boolean => {
+const wiresCompodoc = (program: E.Program): boolean => {
   let wired = false;
 
-  traverse(ast, {
-    Identifier(path) {
-      if (path.node.name === SET_COMPODOC_JSON) {
-        wired = true;
-        path.stop();
-      }
-    },
-    StringLiteral(path) {
-      if (DOCUMENTATION_JSON.test(path.node.value) && isModuleSource(path.node, path.parent)) {
-        wired = true;
-        path.stop();
-      }
-    },
+  walk(program, (node, parent) => {
+    if (wired) {
+      return false;
+    }
+    if (node.type === 'Identifier' && node.name === SET_COMPODOC_JSON) {
+      wired = true;
+    } else if (
+      node.type === 'Literal' &&
+      typeof node.value === 'string' &&
+      DOCUMENTATION_JSON.test(node.value) &&
+      isModuleSource(node as E.StringLiteral, parent)
+    ) {
+      wired = true;
+    }
   });
 
   return wired;
@@ -151,7 +159,7 @@ const wiresCompodoc = (ast: t.File): boolean => {
 
 const previewWiresCompodoc = (source: string): boolean => {
   try {
-    return wiresCompodoc(babelParse(source));
+    return wiresCompodoc(parseModule(source).program);
   } catch {
     return false;
   }
@@ -270,7 +278,7 @@ export function compodocTransforms(): FixTransform[] {
     {
       filter: { kind: ['preview'], code: /setCompodocJson|documentation\.json/ },
       editConfig: (preview, { id }) => {
-        if (wiresCompodoc(preview._ast)) {
+        if (wiresCompodoc(preview._program)) {
           removePreviewWiring(preview, id);
         }
       },
@@ -412,14 +420,14 @@ const manualRemovalHint = (previewConfigPath: string, reason: string): void =>
   );
 
 const removePreviewWiring = (preview: ConfigFile, previewConfigPath: string): void => {
-  const result = removeTopLevelCall(preview._ast.program, {
+  const result = removeTopLevelCall(preview, {
     callee: SET_COMPODOC_JSON,
     calleeSources: new Set([ADDON_DOCS_ANGULAR]),
   });
   if (!result.removed) {
     manualRemovalHint(
       previewConfigPath,
-      countReferences(preview._ast.program, SET_COMPODOC_JSON) > 0
+      countReferences(preview._editorSource, SET_COMPODOC_JSON) > 0
         ? result.reason
         : `no ${SET_COMPODOC_JSON} call is visible here, only a documentation.json import`
     );
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/argtypes-default-value.ts b/code/lib/cli-storybook/src/automigrate/fixes/argtypes-default-value.ts
index e39d48deaf31..969d16ec3992 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/argtypes-default-value.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/argtypes-default-value.ts
@@ -1,15 +1,14 @@
-import { types as t } from 'storybook/internal/babel';
-import type { CsfObject } from 'storybook/internal/csf-tools';
+import type { CsfObject, ESTree as E } from 'storybook/internal/csf-tools';
 
 import picocolors from 'picocolors';
 
 import type { Fix } from '../types.ts';
 
-const argName = (property: t.ObjectProperty): string | undefined => {
-  if (t.isIdentifier(property.key) && !property.computed) {
+const argName = (property: E.ObjectProperty): string | undefined => {
+  if (property.key.type === 'Identifier' && !property.computed) {
     return property.key.name;
   }
-  if (t.isStringLiteral(property.key)) {
+  if (property.key.type === 'Literal' && typeof property.key.value === 'string') {
     return property.key.value;
   }
   return undefined;
@@ -17,11 +16,11 @@ const argName = (property: t.ObjectProperty): string | undefined => {
 
 const strip = (object: CsfObject) => {
   const argTypes = object.get(['argTypes']);
-  if (!t.isObjectExpression(argTypes)) {
+  if (argTypes?.type !== 'ObjectExpression') {
     return;
   }
   for (const property of argTypes.properties) {
-    if (!t.isObjectProperty(property)) {
+    if (property.type !== 'Property') {
       continue;
     }
     const name = argName(property);
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/component-subtitle.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/component-subtitle.test.ts
index 9c5dc6aee415..6530374e5c83 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/component-subtitle.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/component-subtitle.test.ts
@@ -76,18 +76,11 @@ describe('component-subtitle', () => {
     });
 
     expect(failures).toEqual([]);
-    expect(preview).toMatchInlineSnapshot(`
-      "export default { parameters: { docs: {
-        subtitle: 'Preview'
-      } } };"
-    `);
+    expect(preview).toMatchInlineSnapshot(
+      `"export default { parameters: { docs: { subtitle: 'Preview' } } };"`
+    );
     expect(story).toMatchInlineSnapshot(`
-      "export default { parameters: {
-        docs: {
-          source: { type: 'code' },
-          subtitle: 'Meta'
-        }
-      } };
+      "export default { parameters: { docs: { source: { type: 'code' }, subtitle: 'Meta' } } };
       export const Primary = { parameters: { componentSubtitle: 'Story' } };"
     `);
   });
@@ -98,11 +91,9 @@ describe('component-subtitle', () => {
         "export default { parameters: { componentSubtitle: 'Legacy', docs: { subtitle: 'Current' } } };",
     });
 
-    expect(story).toMatchInlineSnapshot(`
-      "export default { parameters: {
-        docs: { subtitle: 'Current' }
-      } };"
-    `);
+    expect(story).toMatchInlineSnapshot(
+      `"export default { parameters: { docs: { subtitle: 'Current' } } };"`
+    );
   });
 
   it('skips a file it cannot migrate safely and reports it', async () => {
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/csf-next-mocked-args.ts b/code/lib/cli-storybook/src/automigrate/fixes/csf-next-mocked-args.ts
index 6ecf1c839a69..73aeba26c228 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/csf-next-mocked-args.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/csf-next-mocked-args.ts
@@ -28,7 +28,7 @@ export const csfNextMockedArgs: Fix = {
       filter: { kind: ['story'], code: /mock|withImplementation/i },
       editCsf: (csf) => {
         if (csf._metaIsFactory) {
-          wrapArgsMocks(csf._ast);
+          wrapArgsMocks(csf._editor);
         }
       },
     },
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/docgen-server.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/docgen-server.test.ts
index f3f5a4881b87..1596f5793022 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/docgen-server.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/docgen-server.test.ts
@@ -61,11 +61,7 @@ describe('docgen-server', () => {
       await migrate(
         'export default { features: { docgenServer: true, experimentalDocgenServer: false } };'
       )
-    ).toMatchInlineSnapshot(`
-      "export default { features: {
-        docgenServer: true
-      } };"
-    `);
+    ).toMatchInlineSnapshot(`"export default { features: { docgenServer: true } };"`);
   });
 
   it.each([
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/experimental-features.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/experimental-features.test.ts
index d05609d0e39c..17687304db82 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/experimental-features.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/experimental-features.test.ts
@@ -185,15 +185,11 @@ describe('experimental feature flag automigrations', () => {
         const config: StorybookConfig = {
           stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
           addons: ['@storybook/addon-docs'],
-
           framework: {
             name: '@storybook/react-vite',
             options: {},
           },
-
-          features: {
-            experimentalCodeExamples: true
-          }
+          features: { experimentalCodeExamples: true },
         };
         export default config;
         "
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/remove-change-detection-flag.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/remove-change-detection-flag.test.ts
index da097e39b3d8..da4b66f191d7 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/remove-change-detection-flag.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/remove-change-detection-flag.test.ts
@@ -113,10 +113,7 @@ describe('remove-change-detection-flag', () => {
         const config: StorybookConfig = {
           stories: ['../src/**/*.stories.@(ts|tsx)'],
           framework: '@storybook/react-vite',
-          features: {
-            controls: true,
-            experimentalTestSyntax: true
-          },
+          features: { controls: true, experimentalTestSyntax: true },
         };
         export default config;"
       `);
@@ -129,7 +126,7 @@ describe('remove-change-detection-flag', () => {
 
       const config: StorybookConfig = {
         stories: ['../src/**/*.stories.@(ts|tsx)'],
-        framework: '@storybook/react-vite'
+        framework: '@storybook/react-vite',
       };
       export default config;"
     `);
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/remove-experimental-review.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/remove-experimental-review.test.ts
index 32fb00313152..a0283089053a 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/remove-experimental-review.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/remove-experimental-review.test.ts
@@ -98,10 +98,7 @@ describe('remove-experimental-review', () => {
         const config: StorybookConfig = {
           stories: ['../src/**/*.stories.@(ts|tsx)'],
           framework: '@storybook/react-vite',
-          features: {
-            controls: true,
-            experimentalTestSyntax: true
-          },
+          features: { controls: true, experimentalTestSyntax: true },
         };
         export default config;"
       `);
@@ -111,14 +108,14 @@ describe('remove-experimental-review', () => {
   it('removes the features object when the flag was its only entry', async () => {
     expect(await migrate(mainWith('features: { experimentalReview: true },')))
       .toMatchInlineSnapshot(`
-      "import type { StorybookConfig } from '@storybook/react-vite';
-
-      const config: StorybookConfig = {
-        stories: ['../src/**/*.stories.@(ts|tsx)'],
-        framework: '@storybook/react-vite'
-      };
-      export default config;"
-    `);
+        "import type { StorybookConfig } from '@storybook/react-vite';
+
+        const config: StorybookConfig = {
+          stories: ['../src/**/*.stories.@(ts|tsx)'],
+          framework: '@storybook/react-vite',
+        };
+        export default config;"
+      `);
   });
 
   it('fails on a features object with a spread, which it cannot edit', async () => {
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/set-config-layout.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/set-config-layout.test.ts
index 8dc3e2f3ba48..6da69b14f874 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/set-config-layout.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/set-config-layout.test.ts
@@ -73,18 +73,7 @@ describe('set-config-layout transform', () => {
     expect(await migrate(source)).toMatchInlineSnapshot(`
       "import { addons } from 'storybook/manager-api';
 
-      addons.setConfig({
-        layout: {
-          showNav: false,
-          panelPosition: 'right'
-        },
-
-        ui: {
-          enableShortcuts: false
-        },
-
-        theme
-      });"
+      addons.setConfig({ layout: { showNav: false, panelPosition: 'right' }, ui: { enableShortcuts: false }, theme });"
     `);
   });
 
@@ -125,9 +114,7 @@ describe('set-config-layout transform', () => {
 
     expect(await migrate(source)).toMatchInlineSnapshot(`
       "import { addons } from 'storybook/manager-api';
-      addons.setConfig({ layout: {
-        showNav: false
-      } } satisfies Addon_Config);"
+      addons.setConfig({ layout: { showNav: false } } satisfies Addon_Config);"
     `);
   });
 
@@ -139,9 +126,7 @@ describe('set-config-layout transform', () => {
 
     expect(await migrate(source)).toMatchInlineSnapshot(`
       "import { addons } from 'storybook/manager-api';
-      addons.setConfig({ layout: {
-        showNav: false
-      } } as Addon_Config);"
+      addons.setConfig({ layout: { showNav: false } } as Addon_Config);"
     `);
   });
 
@@ -153,9 +138,7 @@ describe('set-config-layout transform', () => {
 
     expect(await migrate(source)).toMatchInlineSnapshot(`
       "import { addons } from 'storybook/manager-api';
-      addons.setConfig({ layout: {
-        showNav: false
-      } }!);"
+      addons.setConfig({ layout: { showNav: false } }!);"
     `);
   });
 
@@ -171,9 +154,7 @@ describe('set-config-layout transform', () => {
     expect(await migrate(source)).toMatchInlineSnapshot(`
       "import { addons } from 'storybook/manager-api';
       addons.setConfig({
-        layout: {
-          showNav: false as const
-        } satisfies Partial<Addon_Config['layout']>
+        layout: { showNav: false as const } satisfies Partial<Addon_Config['layout']>,
       });"
     `);
   });
@@ -211,9 +192,7 @@ describe('set-config-layout transform', () => {
 
     expect(await migrate(source)).toMatchInlineSnapshot(`
       "const { addons } = require('storybook/manager-api');
-      addons.setConfig({ layout: {
-        showNav: false
-      } });"
+      addons.setConfig({ layout: { showNav: false } });"
     `);
   });
 
@@ -227,9 +206,7 @@ describe('set-config-layout transform', () => {
     expect(await migrate(source)).toMatchInlineSnapshot(`
       "import { addons } from 'storybook/manager-api';
       addons.setConfig({ layout: { showNav: false } });
-      addons.setConfig({ layout: {
-        showPanel: false
-      } });"
+      addons.setConfig({ layout: { showPanel: false } });"
     `);
   });
 
@@ -442,9 +419,7 @@ describe('setConfigLayout', () => {
 
     await expect(fsp.readFile(managerConfigPath, 'utf8')).resolves.toMatchInlineSnapshot(`
       "import { addons } from 'storybook/manager-api';
-      addons.setConfig({ layout: {
-        showToolbar: false
-      } });"
+      addons.setConfig({ layout: { showToolbar: false } });"
     `);
   });
 
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/tag-filter-api.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/tag-filter-api.test.ts
index 3cbdd7e50591..ae1ec83eeae2 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/tag-filter-api.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/tag-filter-api.test.ts
@@ -100,6 +100,8 @@ describe('tag-filter-api', () => {
         'api.experimental_setFilter("x", () => true);',
         'api?.experimental_setFilters({});',
         'const { experimental_setFilter } = api;',
+        'experimental_setFilter("y", () => true);',
+        'const { experimental_setFilters = fallback } = api;',
       ].join('\n'),
     });
 
@@ -109,7 +111,9 @@ describe('tag-filter-api', () => {
     expect(story).toContain('const config = { experimental_setFilter: 1, setFilter: 2 };');
     expect(story).toContain('api.setFilter("x", () => true);');
     expect(story).toContain('api?.setFilters({});');
-    expect(story).toContain('const { setFilter } = api;');
+    expect(story).toContain('const { setFilter: experimental_setFilter } = api;');
+    expect(story).toContain('experimental_setFilter("y", () => true);');
+    expect(story).toContain('const { setFilters: experimental_setFilters = fallback } = api;');
   });
 
   it('keeps a story hidden when only the deprecated alias is true', async () => {
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/tag-filter-api.ts b/code/lib/cli-storybook/src/automigrate/fixes/tag-filter-api.ts
index 0978437305b3..12d509e32eaa 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/tag-filter-api.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/tag-filter-api.ts
@@ -1,10 +1,4 @@
-import {
-  babelParse,
-  babelPrint,
-  traverse,
-  types as t,
-  type NodePath,
-} from 'storybook/internal/babel';
+import { type ESTree as E, SourceEditor, walk } from 'storybook/internal/csf-tools';
 
 import picocolors from 'picocolors';
 
@@ -15,15 +9,15 @@ const tagOptionRenames = {
   excludeFromDocsStories: 'hideFromAutodocs',
 } as const;
 
-const objectKeys = (node: t.ObjectExpression) =>
+const objectKeys = (node: E.ObjectExpression) =>
   node.properties.flatMap((property) => {
-    if (!t.isObjectProperty(property) || property.computed) {
+    if (property.type !== 'Property' || property.computed) {
       return [];
     }
-    if (t.isIdentifier(property.key)) {
+    if (property.key.type === 'Identifier') {
       return [property.key.name];
     }
-    if (t.isStringLiteral(property.key)) {
+    if (property.key.type === 'Literal' && typeof property.key.value === 'string') {
       return [property.key.value];
     }
     return [];
@@ -34,50 +28,45 @@ const setFilterRenames: Record<string, string> = Object.assign(Object.create(nul
   experimental_setFilter: 'setFilter',
 });
 
-const isSetFilterApiReference = (path: NodePath<t.Identifier>) => {
-  const { parent, parentPath } = path;
-  const isMemberProperty =
-    (t.isMemberExpression(parent) || t.isOptionalMemberExpression(parent)) &&
-    !parent.computed &&
-    parent.property === path.node;
-  const isDestructuredApiKey =
-    t.isObjectProperty(parent) &&
-    !parent.computed &&
-    parent.key === path.node &&
-    parentPath.parentPath?.isObjectPattern() === true;
-  return isMemberProperty || isDestructuredApiKey;
-};
-
 const renameSetFilterIdentifiers = (code: string) => {
   if (!code.includes('experimental_setFilter')) {
     return undefined;
   }
-  let ast;
+  let editor;
   try {
-    ast = babelParse(code);
+    editor = new SourceEditor(code);
   } catch {
     return undefined;
   }
-  let changed = false;
-  traverse(ast, {
-    Identifier(path) {
-      if (!isSetFilterApiReference(path)) {
-        return;
-      }
-      const next = Object.hasOwn(setFilterRenames, path.node.name)
-        ? setFilterRenames[path.node.name]
-        : undefined;
-      if (!next) {
-        return;
+  const keys: { key: E.Node; shorthand: boolean }[] = [];
+  walk(editor.program, (node) => {
+    if (node.type === 'MemberExpression' && !node.computed) {
+      keys.push({ key: node.property, shorthand: false });
+    }
+    if (node.type === 'ObjectPattern') {
+      for (const property of node.properties) {
+        if (property.type === 'Property' && !property.computed) {
+          keys.push({ key: property.key, shorthand: property.shorthand });
+        }
       }
-      path.node.name = next;
-      changed = true;
-    },
+    }
   });
-  if (!changed) {
-    return undefined;
+  for (const { key, shorthand } of keys) {
+    const next =
+      key.type === 'Identifier' && Object.hasOwn(setFilterRenames, key.name)
+        ? setFilterRenames[key.name]
+        : undefined;
+    if (!next) {
+      continue;
+    }
+    // A shorthand key is also the local binding, so keep its name and spell out the key.
+    if (shorthand) {
+      editor.edits.appendLeft(key.start, `${next}: `);
+    } else {
+      editor.edits.overwrite(key.start, key.end, next);
+    }
   }
-  const printed = babelPrint(ast);
+  const printed = editor.toString();
   return printed === code ? undefined : printed;
 };
 
@@ -93,12 +82,12 @@ export const tagFilterApi: Fix = {
       filter: { kind: ['main'], code: /excludeFromSidebar|excludeFromDocsStories/ },
       editConfig: (main) => {
         const tags = main.get(['tags']);
-        if (!tags || !t.isObjectExpression(tags)) {
+        if (tags?.type !== 'ObjectExpression') {
           return;
         }
         for (const tagName of objectKeys(tags)) {
           const option = main.get(['tags', tagName]);
-          if (!option || !t.isObjectExpression(option)) {
+          if (option?.type !== 'ObjectExpression') {
             continue;
           }
           const keys = new Set(objectKeys(option));
@@ -109,9 +98,8 @@ export const tagFilterApi: Fix = {
             if (keys.has(to)) {
               const fromNode = main.get(['tags', tagName, from]);
               const toNode = main.get(['tags', tagName, to]);
-              const fromTrue =
-                !!fromNode && t.isBooleanLiteral(fromNode) && fromNode.value === true;
-              const toTrue = !!toNode && t.isBooleanLiteral(toNode) && toNode.value === true;
+              const fromTrue = fromNode?.type === 'Literal' && fromNode.value === true;
+              const toTrue = toNode?.type === 'Literal' && toNode.value === true;
               if (fromTrue && !toTrue) {
                 main.set(['tags', tagName, to], true);
               }
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/vitest-setup-file.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/vitest-setup-file.test.ts
index f531eebdb81e..0ae516bce8a3 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/vitest-setup-file.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/vitest-setup-file.test.ts
@@ -1037,7 +1037,6 @@ describe('transformSetupFile', () => {
       //
 
       import { setupTests } from './setup';
-
       setupTests();"
     `);
   });
@@ -1062,7 +1061,6 @@ describe('transformSetupFile', () => {
       "// Copyright Example
 
       import { setupTests } from './setup';
-
       setupTests();"
     `);
   });
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/vitest-setup-file.ts b/code/lib/cli-storybook/src/automigrate/fixes/vitest-setup-file.ts
index 9374dce93d7c..8bb08ac52b3b 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/vitest-setup-file.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/vitest-setup-file.ts
@@ -6,6 +6,13 @@ import {
   getAddonNames,
   rendererPackages,
 } from 'storybook/internal/common';
+import {
+  type ESTree as E,
+  type ESTreeNode as Node,
+  SourceEditor,
+  headerComments,
+  walk,
+} from 'storybook/internal/csf-tools';
 
 import jscodeshift from 'jscodeshift';
 import path from 'path';
@@ -13,10 +20,8 @@ import picocolors from 'picocolors';
 import semver from 'semver';
 import { dedent } from 'ts-dedent';
 
-import type { types as t } from 'storybook/internal/babel';
-import { getHeaderComments } from 'storybook/internal/csf-tools';
-
 import { findFilesUp } from '../../util.ts';
+import { removeStatements, setImportSpecifiers } from '../helpers/source-edits.ts';
 import type { Fix } from '../types.ts';
 
 const VITEST_ADDON_NAME = '@storybook/addon-vitest';
@@ -322,20 +327,19 @@ export function transformSetupFile(
   source: string,
   options: TransformOptions
 ): VitestSetupFileInfo['transform'] {
-  const j = jscodeshift.withParser(/\.[jt]sx$/.test(options.setupFilePath) ? 'tsx' : 'ts');
-  let root: jscodeshift.Collection;
+  let editor: SourceEditor;
 
   try {
-    root = j(source);
+    editor = new SourceEditor(source, options.setupFilePath);
   } catch {
     return { kind: 'manual', reason: 'it could not be parsed' };
   }
 
-  const program: t.Program = root.get().node.program;
+  const { program } = editor;
 
   const bindings = new Map<
     string,
-    { declaration: t.ImportDeclaration; specifier: t.ImportDeclaration['specifiers'][number] }
+    { declaration: E.ImportDeclaration; specifier: E.ImportDeclaration['specifiers'][number] }
   >();
 
   for (const statement of program.body) {
@@ -363,13 +367,13 @@ export function transformSetupFile(
     };
   }
 
-  const unsupportedAnnotation = (node: t.Node | null) => ({
+  const unsupportedAnnotation = (node: Node) => ({
     kind: 'manual' as const,
-    reason: `it passes annotations that are neither your ".storybook/preview" nor "${A11Y_PREVIEW_MODULE}": ${j(node as unknown as jscodeshift.ASTNode).toSource()}`,
+    reason: `it passes annotations that are neither your ".storybook/preview" nor "${A11Y_PREVIEW_MODULE}": ${editor.source(node)}`,
   });
 
   const annotationName = (
-    node: t.Expression | t.SpreadElement | t.ArgumentPlaceholder | null
+    node: E.ArrayExpressionElement
   ): string | { kind: 'manual'; reason: string } => {
     const identifier =
       node?.type === 'MemberExpression' &&
@@ -383,7 +387,7 @@ export function transformSetupFile(
       binding?.specifier.type !== 'ImportNamespaceSpecifier' &&
       binding?.specifier.type !== 'ImportDefaultSpecifier'
     ) {
-      return unsupportedAnnotation(node);
+      return unsupportedAnnotation(node!);
     }
 
     const importSource = String(binding.declaration.source.value);
@@ -398,11 +402,10 @@ export function transformSetupFile(
             reason: `it passes "${A11Y_PREVIEW_MODULE}" annotations, but ${A11Y_ADDON_NAME} is not registered in the "addons" field of your .storybook/main`,
           };
     }
-    return unsupportedAnnotation(node);
+    return unsupportedAnnotation(node!);
   };
 
-  const [firstStatement] = program.body;
-  const removedStatements = new Set<t.Statement>();
+  const removedStatements = new Set<Node>();
   const capturedNames = new Set<string>();
   const annotationNames = new Set<string>();
 
@@ -442,11 +445,11 @@ export function transformSetupFile(
 
     removedStatements.add(statement);
     if (statement.type === 'VariableDeclaration') {
-      capturedNames.add((statement.declarations[0].id as t.Identifier).name);
+      capturedNames.add((statement.declarations[0].id as E.BindingIdentifier).name);
     }
   }
 
-  if (countReferences(j, root, callBinding[0]) !== removedStatements.size) {
+  if (countReferences(program, callBinding[0]) !== removedStatements.size) {
     return {
       kind: 'manual',
       reason:
@@ -457,7 +460,7 @@ export function transformSetupFile(
   for (const name of capturedNames) {
     const forwardings = program.body.filter((statement) => isBeforeAllForwarding(statement, name));
 
-    if (countReferences(j, root, name) !== forwardings.length) {
+    if (countReferences(program, name) !== forwardings.length) {
       return {
         kind: 'manual',
         reason:
@@ -468,39 +471,48 @@ export function transformSetupFile(
     forwardings.forEach((statement) => removedStatements.add(statement));
   }
 
-  program.body = program.body.filter((statement) => !removedStatements.has(statement));
+  const keptSpecifiers = new Map<E.ImportDeclaration, E.ImportDeclaration['specifiers']>();
 
   for (const name of [callBinding[0], ...annotationNames, 'beforeAll']) {
     const binding = bindings.get(name);
 
-    if (!binding || countReferences(j, root, name) > 0) {
+    if (!binding || countReferences(program, name, removedStatements) > 0) {
       continue;
     }
 
-    binding.declaration.specifiers = binding.declaration.specifiers.filter(
+    const kept = (keptSpecifiers.get(binding.declaration) ?? binding.declaration.specifiers).filter(
       (specifier) => specifier !== binding.specifier
     );
+    keptSpecifiers.set(binding.declaration, kept);
 
-    if (binding.declaration.specifiers.length === 0) {
-      program.body = program.body.filter((statement) => statement !== binding.declaration);
+    if (kept.length === 0) {
+      removedStatements.add(binding.declaration);
     }
   }
 
-  if (program.body.length === 0) {
+  if (program.body.every((statement) => removedStatements.has(statement))) {
     return { kind: 'empty' };
   }
 
-  keepHeader(firstStatement, program.body[0]);
-  return { kind: 'rewritten', code: root.toSource(PRINT_OPTIONS) };
-}
-
-function keepHeader(removed: t.Statement | undefined, first: t.Statement) {
-  const header = getHeaderComments(removed);
-  if (removed === first || !header.length) {
-    return;
+  for (const [declaration, kept] of keptSpecifiers) {
+    if (kept.length > 0) {
+      setImportSpecifiers(editor, declaration, kept);
+    }
   }
-  const commented = first as { comments?: t.Comment[] };
-  commented.comments = [...header, ...(commented.comments ?? [])];
+  const [first] = program.body;
+  if (removedStatements.has(first)) {
+    // Comments below the file header, such as `eslint-disable-next-line`, apply to the removed statement
+    const header = new Set(headerComments(editor));
+    const leading = editor.comments.find(
+      (comment) => comment.end <= first.start && !header.has(comment)
+    );
+    if (leading) {
+      editor.edits.remove(leading.start, first.start);
+    }
+  }
+  removeStatements(editor, removedStatements);
+
+  return { kind: 'rewritten', code: editor.toString() };
 }
 
 function resolvesToPreview(importSource: string, options: TransformOptions) {
@@ -513,7 +525,7 @@ function resolvesToPreview(importSource: string, options: TransformOptions) {
   return resolved === path.resolve(options.configDir, 'preview');
 }
 
-function isCallOf(node: t.Node | null | undefined, calleeName: string): node is t.CallExpression {
+function isCallOf(node: Node | null | undefined, calleeName: string): node is E.CallExpression {
   return (
     node?.type === 'CallExpression' &&
     node.callee.type === 'Identifier' &&
@@ -521,7 +533,7 @@ function isCallOf(node: t.Node | null | undefined, calleeName: string): node is
   );
 }
 
-function isBeforeAllForwarding(statement: t.Statement, resultName: string) {
+function isBeforeAllForwarding(statement: Node, resultName: string) {
   if (statement.type !== 'ExpressionStatement' || !isCallOf(statement.expression, 'beforeAll')) {
     return false;
   }
@@ -538,28 +550,41 @@ function isBeforeAllForwarding(statement: t.Statement, resultName: string) {
 }
 
 /** Counts uses of a binding, ignoring its declaration, member property names and object keys. */
-function countReferences(j: jscodeshift.JSCodeshift, root: jscodeshift.Collection, name: string) {
-  return root
-    .find(j.Identifier, { name })
-    .filter((identifierPath) => {
-      const parent = identifierPath.parent.node;
-      if (
-        parent.type === 'ImportSpecifier' ||
-        parent.type === 'ImportDefaultSpecifier' ||
-        parent.type === 'ImportNamespaceSpecifier' ||
-        (parent.type === 'VariableDeclarator' && parent.id === identifierPath.node)
-      ) {
-        return false;
-      }
-      if (parent.type === 'MemberExpression' && !parent.computed) {
-        return parent.property !== identifierPath.node;
-      }
-      if ((parent.type === 'ObjectProperty' || parent.type === 'Property') && !parent.computed) {
-        return parent.key !== identifierPath.node || parent.shorthand === true;
-      }
-      return true;
-    })
-    .size();
+function countReferences(
+  program: E.Program,
+  name: string,
+  excluded: ReadonlySet<Node> = new Set()
+) {
+  let references = 0;
+  walk(program, (node, parent) => {
+    if (excluded.has(node)) {
+      return false;
+    }
+    if (node.type !== 'Identifier' || node.name !== name || !parent) {
+      return;
+    }
+    if (
+      parent.type === 'ImportSpecifier' ||
+      parent.type === 'ImportDefaultSpecifier' ||
+      parent.type === 'ImportNamespaceSpecifier' ||
+      (parent.type === 'VariableDeclarator' && parent.id === node)
+    ) {
+      return;
+    }
+    if (parent.type === 'MemberExpression' && !parent.computed && parent.property === node) {
+      return;
+    }
+    if (
+      parent.type === 'Property' &&
+      !parent.computed &&
+      parent.key === node &&
+      !parent.shorthand
+    ) {
+      return;
+    }
+    references += 1;
+  });
+  return references;
 }
 
 /**
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/web-components-runtime-manifest.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/web-components-runtime-manifest.test.ts
index abdd7e4f9fce..3396ffd5e46d 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/web-components-runtime-manifest.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/web-components-runtime-manifest.test.ts
@@ -458,10 +458,7 @@ describe('run', (): void => {
       "export default {
         framework: {
           name: '@storybook/web-components-vite',
-          options: {
-            builder: { viteConfigPath: 'vite.config.ts' },
-            customElementsManifest: '../custom-elements.json'
-          },
+          options: { builder: { viteConfigPath: 'vite.config.ts' }, customElementsManifest: '../custom-elements.json' },
         },
       };"
     `);
@@ -475,13 +472,7 @@ describe('run', (): void => {
     await runWith();
 
     expect(vol.readFileSync(MAIN, 'utf8')).toMatchInlineSnapshot(`
-      "export default { framework: {
-        name: '@storybook/web-components-vite',
-
-        options: {
-          customElementsManifest: '../custom-elements.json'
-        }
-      } };"
+      "export default { framework: { name: '@storybook/web-components-vite', options: { customElementsManifest: '../custom-elements.json' } } };"
     `);
   });
 
@@ -493,13 +484,7 @@ describe('run', (): void => {
     await runWith();
 
     expect(vol.readFileSync(MAIN, 'utf8')).toMatchInlineSnapshot(`
-      "export default { framework: {
-        name: '@storybook/web-components-vite',
-
-        options: {
-          customElementsManifest: '../custom-elements.json'
-        }
-      } };"
+      "export default { framework: { name: '@storybook/web-components-vite', options: { customElementsManifest: '../custom-elements.json' } } };"
     `);
   });
 
@@ -629,7 +614,6 @@ describe('run', (): void => {
     expect(vol.readFileSync(PREVIEW, 'utf8')).toMatchInlineSnapshot(`
       "import { setCustomElements } from "@storybook/web-components";
       import customElements from "../custom-elements.json";
-
       setCustomElements(customElements);
 
       export const configure = setCustomElements;"
@@ -658,13 +642,7 @@ describe('run', (): void => {
 
     expect(vol.readFileSync(PREVIEW, 'utf8')).toBe(preview);
     expect(vol.readFileSync(MAIN, 'utf8')).toMatchInlineSnapshot(`
-      "export default { framework: {
-        name: '@storybook/web-components-vite',
-
-        options: {
-          customElementsManifest: '../custom-elements.json'
-        }
-      } };"
+      "export default { framework: { name: '@storybook/web-components-vite', options: { customElementsManifest: '../custom-elements.json' } } };"
     `);
     expect(logger.warn).toHaveBeenCalledWith(
       expect.stringContaining('is not called at the top level')
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/web-components-runtime-manifest.ts b/code/lib/cli-storybook/src/automigrate/fixes/web-components-runtime-manifest.ts
index ddd6ae04c687..819a56daf19c 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/web-components-runtime-manifest.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/web-components-runtime-manifest.ts
@@ -1,6 +1,10 @@
-import { babelParse, generate, types as t } from 'storybook/internal/babel';
 import { findFilesUp } from 'storybook/internal/common';
-import type { ConfigFile } from 'storybook/internal/csf-tools';
+import {
+  type ConfigFile,
+  type ESTree as E,
+  type ESTreeNode as Node,
+  SourceEditor,
+} from 'storybook/internal/csf-tools';
 import { logger } from 'storybook/internal/node-logger';
 import { SupportedRenderer } from 'storybook/internal/types';
 
@@ -16,6 +20,7 @@ import {
   topLevelCalls,
   topLevelReaders,
 } from '../helpers/preview-call.ts';
+import { removeStatements, setImportSpecifiers } from '../helpers/source-edits.ts';
 import { findWorkspaceFiles, readJsonFile } from '../helpers/workspace-files.ts';
 import type { FixTransform } from '../pipeline.ts';
 import type { Fix } from '../types.ts';
@@ -60,19 +65,19 @@ export const webComponentsRuntimeManifest: Fix<WebComponentsRuntimeManifestOptio
       return null;
     }
 
-    const program = parsePreview(await files.read(previewConfigPath));
-    if (!program) {
+    const preview = parsePreview(await files.read(previewConfigPath), previewConfigPath);
+    if (!preview) {
       return null;
     }
 
-    const setterNames = findReferencedSetterNames(program);
+    const setterNames = findReferencedSetterNames(preview);
     if (setterNames.length === 0) {
       return null;
     }
 
     const configDir = dirname(mainConfigPath);
     const source =
-      findPreviewImportManifest(program, setterNames, dirname(previewConfigPath)) ??
+      findPreviewImportManifest(preview.program, setterNames, dirname(previewConfigPath)) ??
       (await findPackageJsonManifest(files, configDir)) ??
       (await findWorkspaceManifest());
     if (!source) {
@@ -122,30 +127,30 @@ export const webComponentsRuntimeManifest: Fix<WebComponentsRuntimeManifestOptio
   ],
 };
 
-const parsePreview = (source: string): t.Program | null => {
+const parsePreview = (source: string, fileName: string): SourceEditor | null => {
   try {
-    return babelParse(source).program;
+    return new SourceEditor(source, fileName);
   } catch {
     return null;
   }
 };
 
-const findReferencedSetterNames = (program: t.Program): SetterName[] =>
-  SETTER_NAMES.filter((name) => countReferences(program, name) > 0);
+const findReferencedSetterNames = (preview: SourceEditor): SetterName[] =>
+  SETTER_NAMES.filter((name) => countReferences(preview, name) > 0);
 
 const findPreviewImportManifest = (
-  program: t.Program,
+  program: E.Program,
   setterNames: SetterName[],
   previewDir: string
 ): ManifestSource | null => {
   for (const setterName of setterNames) {
     for (const node of topLevelCalls(program, setterName)) {
-      const { arguments: args } = node.expression as t.CallExpression;
+      const { arguments: args } = node.expression as E.CallExpression;
       if (args.length !== 1) {
         continue;
       }
       const [argument] = args;
-      if (!t.isIdentifier(argument)) {
+      if (argument.type !== 'Identifier') {
         continue;
       }
       const specifier = findDefaultJsonImportSpecifier(program, argument.name);
@@ -214,14 +219,14 @@ const logInvalidManifestWarning = (
     Generate one with @custom-elements-manifest/analyzer, then rerun "${AUTOMIGRATE_COMMAND}".
   `);
 
-const findDefaultJsonImportSpecifier = (program: t.Program, name: string): string | null => {
+const findDefaultJsonImportSpecifier = (program: E.Program, name: string): string | null => {
   for (const node of program.body) {
-    if (!t.isImportDeclaration(node) || !isRelativeJsonSpecifier(node.source.value)) {
+    if (node.type !== 'ImportDeclaration' || !isRelativeJsonSpecifier(node.source.value)) {
       continue;
     }
     if (
       node.specifiers.some(
-        (specifier) => t.isImportDefaultSpecifier(specifier) && specifier.local.name === name
+        (specifier) => specifier.type === 'ImportDefaultSpecifier' && specifier.local.name === name
       )
     ) {
       return node.source.value;
@@ -243,39 +248,40 @@ const logManualRemovalHint = (
     Remove the runtime call by hand when convenient.
   `);
 
-const printStatement = (node: t.Statement): string => {
-  const [firstLine] = generate(node, { comments: false }).code.split('\n');
+const printStatement = (editor: SourceEditor, node: Node): string => {
+  const [firstLine] = editor.source(node).split('\n');
   const line = firstLine.replace(/;$/, '');
   return line.length > MAX_STATEMENT_LENGTH ? `${line.slice(0, MAX_STATEMENT_LENGTH)}...` : line;
 };
 
 const logSurvivingManifestImport = (
+  editor: SourceEditor,
   previewConfigPath: string,
   specifier: string,
-  readers: t.Statement[]
+  readers: Node[]
 ): void =>
   logger.warn(dedent`
-    ${previewConfigPath} still imports ${specifier} for: ${readers.map((node) => `\`${printStatement(node)}\``).join(', ')}.
+    ${previewConfigPath} still imports ${specifier} for: ${readers.map((node) => `\`${printStatement(editor, node)}\``).join(', ')}.
     Docgen now reads the manifest from disk, so changes made to it in the preview no longer apply, and the import makes the preview build fail when the manifest is invalid.
     Move manifest transforms into your manifest generator (for example an analyzer plugin), then remove the import.
   `);
 
 const findManifestImports = (
-  program: t.Program,
+  program: E.Program,
   previewDir: string,
   manifestFiles: string[]
 ): Map<string, string> => {
   const imports = new Map<string, string>();
   for (const node of program.body) {
     if (
-      !t.isImportDeclaration(node) ||
+      node.type !== 'ImportDeclaration' ||
       !isRelativeJsonSpecifier(node.source.value) ||
       !manifestFiles.includes(resolve(previewDir, node.source.value))
     ) {
       continue;
     }
     for (const specifier of node.specifiers) {
-      if (t.isImportDefaultSpecifier(specifier)) {
+      if (specifier.type === 'ImportDefaultSpecifier') {
         imports.set(specifier.local.name, node.source.value);
       }
     }
@@ -283,16 +289,24 @@ const findManifestImports = (
   return imports;
 };
 
-const removeDefaultImport = (program: t.Program, name: string): void => {
-  program.body = program.body.filter((node) => {
-    if (!t.isImportDeclaration(node)) {
-      return true;
+const removeDefaultImport = (preview: ConfigFile, name: string): void => {
+  const editor = preview._editorSource;
+  const statementsToDrop = new Set<Node>();
+  for (const node of editor.program.body) {
+    if (node.type !== 'ImportDeclaration') {
+      continue;
     }
-    node.specifiers = node.specifiers.filter(
-      (specifier) => !(t.isImportDefaultSpecifier(specifier) && specifier.local.name === name)
+    const kept = node.specifiers.filter(
+      (specifier) => !(specifier.type === 'ImportDefaultSpecifier' && specifier.local.name === name)
     );
-    return node.specifiers.length > 0;
-  });
+    if (kept.length === 0 && node.specifiers.length > 0) {
+      statementsToDrop.add(node);
+    } else if (kept.length < node.specifiers.length) {
+      setImportSpecifiers(editor, node, kept);
+    }
+  }
+  removeStatements(editor, statementsToDrop);
+  preview._commit();
 };
 
 const removePreviewWiring = (
@@ -300,12 +314,15 @@ const removePreviewWiring = (
   previewConfigPath: string,
   { setterNames, manifestFiles }: WebComponentsRuntimeManifestOptions
 ): void => {
-  const { program } = preview._ast;
-  const manifestImports = findManifestImports(program, dirname(previewConfigPath), manifestFiles);
+  const manifestImports = findManifestImports(
+    preview._program,
+    dirname(previewConfigPath),
+    manifestFiles
+  );
   const keptImports = new Map(manifestImports);
   let removedAnySetter = false;
   for (const setterName of setterNames) {
-    const result = removeTopLevelCall(program, {
+    const result = removeTopLevelCall(preview, {
       callee: setterName,
       calleeSources: WEB_COMPONENTS_PACKAGES,
     });
@@ -316,7 +333,7 @@ const removePreviewWiring = (
     removedAnySetter = true;
     logger.debug(`Removed the ${setterName} wiring from ${previewConfigPath}`);
     for (const name of result.keptArguments) {
-      const specifier = findDefaultJsonImportSpecifier(program, name);
+      const specifier = findDefaultJsonImportSpecifier(preview._program, name);
       if (specifier) {
         keptImports.set(name, specifier);
       }
@@ -327,14 +344,15 @@ const removePreviewWiring = (
   }
 
   for (const [name, specifier] of keptImports) {
+    const editor = preview._editorSource;
     // A setter call left in place already got the manual-removal hint.
-    const readers = topLevelReaders(program, name).filter(
+    const readers = topLevelReaders(editor, name).filter(
       (node) => !SETTER_NAMES.some((setterName) => isTopLevelCall(node, setterName))
     );
     if (readers.length > 0) {
-      logSurvivingManifestImport(previewConfigPath, specifier, readers);
-    } else if (manifestImports.has(name) && countReferences(program, name) === 0) {
-      removeDefaultImport(program, name);
+      logSurvivingManifestImport(editor, previewConfigPath, specifier, readers);
+    } else if (manifestImports.has(name) && countReferences(editor, name) === 0) {
+      removeDefaultImport(preview, name);
     }
   }
 };
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.test.ts
index 14c66f75f7e2..175929621744 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.test.ts
@@ -1,7 +1,7 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { babelParse } from 'storybook/internal/babel';
 import { formatExistingFile } from 'storybook/internal/common';
+import { parseModule } from 'storybook/internal/csf-tools';
 
 import { checkFix, runFix } from '../helpers/fix-test-utils.ts';
 import type { CheckOptions, RunOptions } from '../types.ts';
@@ -93,7 +93,10 @@ describe('wrapGetAbsolutePath', () => {
           },
         };
         export default config;
-
+        /**
+         * This function is used to resolve the absolute path of a package.
+         * It is needed in projects that are set up within a monorepo.
+         */
         function getAbsolutePath(value) {
           return dirname(fileURLToPath(import.meta.resolve(\`\${value}/package.json\`)));
         }
@@ -111,7 +114,7 @@ describe('wrapGetAbsolutePath', () => {
       const writeFile = vi.mocked((await import('node:fs/promises')).writeFile);
       const output = String(writeFile.mock.calls.at(-1)?.[1]);
 
-      expect(() => babelParse(output)).not.toThrow();
+      expect(() => parseModule(output, 'main.js')).not.toThrow();
       expect(output).toMatchInlineSnapshot(`
         "import { dirname as pathDirname } from 'node:path';
         import path from 'node:path';
@@ -126,7 +129,10 @@ describe('wrapGetAbsolutePath', () => {
           viteFinal: (viteConfig) => ({ ...viteConfig, root: path.resolve(dirname, '..') }),
         };
         export default config;
-
+        /**
+         * This function is used to resolve the absolute path of a package.
+         * It is needed in projects that are set up within a monorepo.
+         */
         function getAbsolutePath(value) {
           return pathDirname(fileURLToPath(import.meta.resolve(\`\${value}/package.json\`)));
         }
@@ -154,7 +160,10 @@ describe('wrapGetAbsolutePath', () => {
           viteFinal: (viteConfig) => ({ ...viteConfig, root: value(import.meta.url) }),
         };
         export default config;
-
+        /**
+         * This function is used to resolve the absolute path of a package.
+         * It is needed in projects that are set up within a monorepo.
+         */
         function getAbsolutePath(_value) {
           return value(fileURLToPath(import.meta.resolve(\`\${_value}/package.json\`)));
         }
@@ -172,7 +181,7 @@ describe('wrapGetAbsolutePath', () => {
       const writeFile = vi.mocked((await import('node:fs/promises')).writeFile);
       const output = String(writeFile.mock.calls.at(-1)?.[1]);
 
-      expect(() => babelParse(output)).not.toThrow();
+      expect(() => parseModule(output, 'main.js')).not.toThrow();
       expect(output).toMatchInlineSnapshot(`
         "import { fileURLToPath } from 'node:url';
         import { dirname as pathDirname } from 'node:path';
@@ -186,7 +195,10 @@ describe('wrapGetAbsolutePath', () => {
           viteFinal: (viteConfig) => ({ ...viteConfig, root: dirname(import.meta.url) }),
         };
         export default config;
-
+        /**
+         * This function is used to resolve the absolute path of a package.
+         * It is needed in projects that are set up within a monorepo.
+         */
         function getAbsolutePath(value) {
           return pathDirname(fileURLToPath(import.meta.resolve(\`\${value}/package.json\`)));
         }
@@ -214,7 +226,10 @@ describe('wrapGetAbsolutePath', () => {
           viteFinal: (viteConfig) => ({ ...viteConfig, root: pathDirname(import.meta.url) }),
         };
         export default config;
-
+        /**
+         * This function is used to resolve the absolute path of a package.
+         * It is needed in projects that are set up within a monorepo.
+         */
         function getAbsolutePath(value) {
           return pathDirname(fileURLToPath(import.meta.resolve(\`\${value}/package.json\`)));
         }
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.ts b/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.ts
index 1171d67d8d63..c3e27ba9b4db 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.ts
@@ -1,10 +1,10 @@
 import {
   ensureNamedImport,
-  getAbsolutePathWrapperAsCallExpression,
+  getAbsolutePathWrapperDeclaration,
   getAbsolutePathWrapperName,
   getFieldsForGetAbsolutePathWrapper,
   isGetAbsolutePathWrapperNecessary,
-  wrapValueWithGetAbsolutePathWrapper,
+  wrapValuesWithGetAbsolutePathWrapper,
 } from 'storybook/internal/common';
 import { CommonJsConfigNotSupportedError } from 'storybook/internal/server-errors';
 
@@ -30,7 +30,7 @@ export const wrapGetAbsolutePath: Fix = {
         if (!fields.some((node) => isGetAbsolutePathWrapperNecessary(node))) {
           return;
         }
-        fields.forEach((node) => wrapValueWithGetAbsolutePathWrapper(mainConfig, node));
+        wrapValuesWithGetAbsolutePathWrapper(mainConfig, fields);
 
         if (getAbsolutePathWrapperName(mainConfig) === null) {
           if (/\.c[jt]sx?$/.test(id) || mainConfig._code.includes('module.exports')) {
@@ -41,7 +41,7 @@ export const wrapGetAbsolutePath: Fix = {
             fileURLToPath: ensureNamedImport(mainConfig, 'fileURLToPath', 'node:url'),
           };
           mainConfig.setBodyDeclaration(
-            getAbsolutePathWrapperAsCallExpression(/\.tsx?$/.test(id), names)
+            getAbsolutePathWrapperDeclaration(/\.tsx?$/.test(id), names)
           );
         }
       },
diff --git a/code/lib/cli-storybook/src/automigrate/helpers/preview-call.ts b/code/lib/cli-storybook/src/automigrate/helpers/preview-call.ts
index d74c51a001c6..81b59532c867 100644
--- a/code/lib/cli-storybook/src/automigrate/helpers/preview-call.ts
+++ b/code/lib/cli-storybook/src/automigrate/helpers/preview-call.ts
@@ -1,49 +1,70 @@
-import { type NodePath, traverse, types as t } from 'storybook/internal/babel';
+import {
+  type ConfigFile,
+  type ESTree as E,
+  type ESTreeNode as Node,
+  type SourceEditor,
+  walk,
+} from 'storybook/internal/csf-tools';
+
+import { removeStatements, setImportSpecifiers } from './source-edits.ts';
 
 export type RemoveTopLevelCallResult =
   | { removed: false; reason: string }
   | { removed: true; keptArguments: string[] };
 
-export const isTopLevelCall = (node: t.Statement, callee: string): node is t.ExpressionStatement =>
-  t.isExpressionStatement(node) &&
-  t.isCallExpression(node.expression) &&
-  t.isIdentifier(node.expression.callee, { name: callee });
+export const isTopLevelCall = (node: Node, callee: string): node is E.ExpressionStatement =>
+  node.type === 'ExpressionStatement' &&
+  node.expression.type === 'CallExpression' &&
+  node.expression.callee.type === 'Identifier' &&
+  node.expression.callee.name === callee;
+
+export const topLevelCalls = (program: E.Program, callee: string): E.ExpressionStatement[] =>
+  program.body.filter((node): node is E.ExpressionStatement => isTopLevelCall(node, callee));
 
-export const topLevelCalls = (program: t.Program, callee: string): t.ExpressionStatement[] =>
-  program.body.filter((node): node is t.ExpressionStatement => isTopLevelCall(node, callee));
+const isWithin = (node: Node, statements: readonly Node[]) =>
+  statements.some((statement) => statement.start <= node.start && node.end <= statement.end);
 
-/** Reads of `name` that resolve to the program-level binding or to a global, skipping shadowed ones. */
-export const referencePaths = (program: t.Program, name: string): NodePath<t.Identifier>[] => {
-  const paths: NodePath<t.Identifier>[] = [];
-  traverse(t.file(program), {
-    Identifier(path): void {
-      if (path.node.name !== name || path.parentPath?.isImportDefaultSpecifier()) {
-        return;
-      }
-      if (!path.isReferencedIdentifier()) {
-        return;
-      }
-      const binding = path.scope.getBinding(name);
-      if (binding && binding.scope !== path.scope.getProgramParent()) {
-        return;
-      }
-      paths.push(path);
-    },
+/**
+ * Reads of `name` outside `excluded` that resolve to the program-level binding or to a global,
+ * skipping shadowed ones.
+ */
+export const referenceNodes = (
+  editor: SourceEditor,
+  name: string,
+  excluded: readonly Node[] = []
+): Node[] => {
+  const { scopes } = editor;
+  const binding = scopes.program.bindings.get(name);
+  if (binding) {
+    return binding.references.filter((reference) => !isWithin(reference, excluded));
+  }
+  const references: Node[] = [];
+  walk(editor.program, (node, parent) => {
+    if (isWithin(node, excluded)) {
+      return false;
+    }
+    const isKey =
+      (parent?.type === 'MemberExpression' && parent.property === node && !parent.computed) ||
+      (parent?.type === 'Property' && parent.key === node && !parent.computed && !parent.shorthand);
+    if (node.type === 'Identifier' && node.name === name && !isKey && !scopes.bindingOf(node)) {
+      references.push(node);
+    }
   });
-  return paths;
+  return references;
 };
 
-export const countReferences = (program: t.Program, name: string): number =>
-  referencePaths(program, name).length;
+export const countReferences = (
+  editor: SourceEditor,
+  name: string,
+  excluded: readonly Node[] = []
+): number => referenceNodes(editor, name, excluded).length;
 
-export const topLevelReaders = (program: t.Program, name: string): t.Statement[] => {
-  const readers = new Set<t.Node>(
-    referencePaths(program, name).flatMap((path): t.Node[] => {
-      const statement = path.find((parent) => parent.parentPath?.isProgram() ?? false);
-      return statement ? [statement.node] : [];
-    })
+/** Top-level statements that read `name`, in source order. */
+export const topLevelReaders = (editor: SourceEditor, name: string): Node[] => {
+  const references = referenceNodes(editor, name);
+  return editor.program.body.filter((statement) =>
+    references.some((reference) => isWithin(reference, [statement]))
   );
-  return program.body.filter((node) => readers.has(node));
 };
 
 /**
@@ -54,48 +75,49 @@ export const topLevelReaders = (program: t.Program, name: string): t.Statement[]
  * is not worth the risk, so anything that is not a plain top-level call is reported instead.
  */
 export const removeTopLevelCall = (
-  program: t.Program,
+  preview: ConfigFile,
   { callee, calleeSources }: { callee: string; calleeSources: ReadonlySet<string> }
 ): RemoveTopLevelCallResult => {
-  const callsToDrop = topLevelCalls(program, callee);
+  const editor = preview._editorSource;
+  const callsToDrop = topLevelCalls(editor.program, callee);
   if (callsToDrop.length === 0) {
     return { removed: false, reason: `${callee} is not called at the top level` };
   }
 
-  const dropped = new Set<t.Statement>(callsToDrop);
-  const withoutCalls = t.program(program.body.filter((node) => !dropped.has(node)));
-  if (countReferences(withoutCalls, callee) > 0) {
+  if (countReferences(editor, callee, callsToDrop) > 0) {
     return { removed: false, reason: `${callee} is still used elsewhere` };
   }
 
   const argumentNames = new Set(
     callsToDrop.flatMap((node): string[] => {
-      const [argument] = (node.expression as t.CallExpression).arguments;
-      return t.isIdentifier(argument) ? [argument.name] : [];
+      const [argument] = (node.expression as E.CallExpression).arguments;
+      return argument?.type === 'Identifier' ? [argument.name] : [];
     })
   );
   const keptArguments = [...argumentNames].filter(
-    (name) => countReferences(withoutCalls, name) > 0
+    (name) => countReferences(editor, name, callsToDrop) > 0
   );
 
-  const remaining: t.Statement[] = [];
-  for (const node of withoutCalls.body) {
-    if (t.isImportDeclaration(node) && node.specifiers.length > 0) {
-      node.specifiers = node.specifiers.filter(
-        (specifier) =>
-          !(
-            (calleeSources.has(node.source.value) && specifier.local.name === callee) ||
-            (argumentNames.has(specifier.local.name) &&
-              !keptArguments.includes(specifier.local.name))
-          )
-      );
-      if (node.specifiers.length === 0) {
-        continue;
-      }
+  const statementsToDrop = new Set<Node>(callsToDrop);
+  for (const node of editor.program.body) {
+    // A declaration without specifiers is imported for its side effects, so it stays as it is.
+    if (node.type !== 'ImportDeclaration' || node.specifiers.length === 0) {
+      continue;
+    }
+    const kept = node.specifiers.filter(
+      (specifier) =>
+        !(
+          (calleeSources.has(node.source.value) && specifier.local.name === callee) ||
+          (argumentNames.has(specifier.local.name) && !keptArguments.includes(specifier.local.name))
+        )
+    );
+    if (kept.length === 0) {
+      statementsToDrop.add(node);
+    } else if (kept.length < node.specifiers.length) {
+      setImportSpecifiers(editor, node, kept);
     }
-    remaining.push(node);
   }
-
-  program.body = remaining;
+  removeStatements(editor, statementsToDrop);
+  preview._commit();
   return { removed: true, keptArguments };
 };
diff --git a/code/lib/cli-storybook/src/automigrate/helpers/source-edits.ts b/code/lib/cli-storybook/src/automigrate/helpers/source-edits.ts
new file mode 100644
index 000000000000..0f6904a8773e
--- /dev/null
+++ b/code/lib/cli-storybook/src/automigrate/helpers/source-edits.ts
@@ -0,0 +1,55 @@
+import type { ESTree as E, ESTreeNode as Node, SourceEditor } from 'storybook/internal/csf-tools';
+
+// Each statement takes the whitespace before it, or after it when nothing before it is kept, so no
+// blank lines are left behind. A `;` right after a removed statement goes with it.
+export function removeStatements(editor: SourceEditor, statements: ReadonlySet<Node>) {
+  const { code, program } = editor;
+  const removed = new Set(statements);
+  program.body.forEach((statement, index) => {
+    const next = program.body[index + 1];
+    if (removed.has(statement) && next?.type === 'EmptyStatement' && next.start === statement.end) {
+      removed.add(next);
+    }
+  });
+  program.body.forEach((statement, index) => {
+    if (!removed.has(statement)) {
+      return;
+    }
+    if (program.body.slice(0, index).every((previous) => removed.has(previous))) {
+      const next = /\S/.exec(code.slice(statement.end));
+      editor.edits.remove(statement.start, next ? statement.end + next.index : code.length);
+      return;
+    }
+    const previousEnd = program.body[index - 1].end;
+    const lineEnd = code.indexOf('\n', previousEnd);
+    const hasTrailingComment =
+      lineEnd !== -1 &&
+      lineEnd < statement.start &&
+      /^[ \t]*\/[/*]/.test(code.slice(previousEnd, lineEnd));
+    editor.edits.remove(hasTrailingComment ? lineEnd : previousEnd, statement.end);
+  });
+}
+
+export function setImportSpecifiers(
+  editor: SourceEditor,
+  declaration: E.ImportDeclaration,
+  specifiers: readonly E.ImportDeclaration['specifiers'][number][],
+  added: { default?: string; named?: string[] } = {}
+) {
+  const source = (specifier: Node) => editor.source(specifier);
+  const named = [
+    ...specifiers.filter((specifier) => specifier.type === 'ImportSpecifier').map(source),
+    ...(added.named ?? []),
+  ];
+  const parts = [
+    ...(added.default ? [added.default] : []),
+    ...specifiers.filter((specifier) => specifier.type !== 'ImportSpecifier').map(source),
+    ...(named.length > 0 ? [`{ ${named.join(', ')} }`] : []),
+  ];
+  const kind = declaration.importKind === 'type' ? 'import type' : 'import';
+  editor.edits.overwrite(
+    declaration.start,
+    declaration.source.start,
+    `${kind} ${parts.join(', ')} from `
+  );
+}
diff --git a/code/lib/cli-storybook/src/automigrate/pipeline.test.ts b/code/lib/cli-storybook/src/automigrate/pipeline.test.ts
index 03b09097b882..72e23a42dac0 100644
--- a/code/lib/cli-storybook/src/automigrate/pipeline.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/pipeline.test.ts
@@ -222,9 +222,7 @@ describe('runTransforms', () => {
     expect(fs.readFileSync(managerConfigPath, 'utf8')).toMatchInlineSnapshot(`
       "import { addons } from 'storybook/manager-api';
       import { theme } from '@storybook/tanstack-react';
-      addons.setConfig({ layout: {
-        showNav: false
-      }, theme });"
+      addons.setConfig({ layout: { showNav: false }, theme });"
     `);
     expect(fs.readFileSync(storyInConfigDir, 'utf8')).toBe(
       "import type { Meta } from '@storybook/tanstack-react';"
@@ -341,10 +339,7 @@ describe('edit hooks', () => {
     expect(loadConfig).toHaveBeenCalledTimes(1);
     expect(formatExistingFile).toHaveBeenCalledTimes(1);
     expect(fs.readFileSync(mainConfigPath, 'utf8')).toMatchInlineSnapshot(`
-      "export default { features: {
-        a: true,
-        b: true
-      } };
+      "export default { features: { a: true, b: true } };
       // formatted"
     `);
     expect(outcomes.get('b')).toEqual({ changed: [mainConfigPath], errors: [] });
@@ -361,7 +356,7 @@ describe('edit hooks', () => {
 
     expect(detection.get('noop')).toEqual({ changed: [], errors: [] });
     expect(fs.readFileSync(mainConfigPath, 'utf8')).toBe(
-      'export default {\r\n  features: {\r\n    a: true\r\n  },\r\n};\r\n\r\n// formatted'
+      'export default {\r\n  features: { a: true },\r\n};\r\n\r\n// formatted'
     );
   });
 
@@ -418,10 +413,7 @@ describe('edit hooks', () => {
     );
 
     expect(fs.readFileSync(mainConfigPath, 'utf8')).toMatchInlineSnapshot(`
-      "export default { features: {
-        a: true,
-        c: true
-      } };
+      "export default { features: { a: true, c: true } };
       // formatted"
     `);
     expect(outcomes.get('broken')).toEqual({
diff --git a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.test.ts b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.test.ts
index d467f99e26c1..8d8d27c81448 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.test.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.test.ts
@@ -36,7 +36,7 @@ describe('main/preview codemod: general parsing functionality', () => {
       export default defineMain({
         stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
         addons: ['@storybook/addon-essentials'],
-        framework: '@storybook/react-vite'
+        framework: '@storybook/react-vite',
       });
     `);
   });
@@ -53,7 +53,6 @@ describe('main/preview codemod: general parsing functionality', () => {
       `)
     ).resolves.toMatchInlineSnapshot(`
       import { defineMain } from '@storybook/react-vite/node';
-
       export default defineMain({
         stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
         addons: ['@storybook/addon-essentials'],
@@ -76,10 +75,9 @@ describe('main/preview codemod: general parsing functionality', () => {
       // @ts-check
       /** @license MIT */
       import { defineMain } from '@storybook/react-vite/node';
-
       export default defineMain({
         stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
-        framework: '@storybook/react-vite'
+        framework: '@storybook/react-vite',
       });
     `);
   });
@@ -104,7 +102,6 @@ describe('main/preview codemod: general parsing functionality', () => {
         `)
       ).resolves.toMatchInlineSnapshot(`
         import { defineMain } from '@storybook/react-vite/node';
-
         export default defineMain({
           stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
           addons: ['@storybook/addon-essentials'],
@@ -127,11 +124,10 @@ describe('main/preview codemod: general parsing functionality', () => {
       `)
     ).resolves.toMatchInlineSnapshot(`
       import { defineMain } from '@storybook/react-vite/node';
-
       export default defineMain({
         tags: [],
         viteFinal: () => { return config },
-        framework: '@storybook/react-vite'
+        framework: '@storybook/react-vite',
       });
     `);
   });
@@ -145,7 +141,6 @@ describe('main/preview codemod: general parsing functionality', () => {
       `)
     ).resolves.toMatchInlineSnapshot(`
       import { defineMain } from '@storybook/react-vite/node';
-
       export default defineMain({
         stories: () => { return ['../src/**/*.stories.@(js|jsx|ts|tsx)'] },
         addons: ['@storybook/addon-essentials'],
@@ -268,7 +263,7 @@ describe('preview specific functionality', () => {
     ).resolves.toMatchInlineSnapshot(`
       import { definePreview } from '@storybook/react-vite';
       export default definePreview({
-        tags: ['test']
+        tags: ['test'],
       });
     `);
   });
@@ -307,7 +302,6 @@ describe('preview specific functionality', () => {
       import { definePreview } from '@storybook/react-vite';
 
       export const withStore: Decorator = () => {}
-
       export default definePreview({
         tags: []
       });
@@ -325,8 +319,8 @@ describe('preview specific functionality', () => {
       import { definePreview } from "@storybook/react-vite";
       export default definePreview({
         decorators: [1],
-        parameters: {}
-      });
+        parameters: {},
+      })
     `);
   });
 
@@ -378,8 +372,8 @@ describe('preview specific functionality', () => {
       import { definePreview } from '@storybook/react-vite';
 
       export default definePreview({
-        decorators: [],
 
+        decorators: [],
         parameters: {
           options: {}
         }
diff --git a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts
index 52d0081de3bd..453378ac1b39 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts
@@ -1,11 +1,16 @@
-import { types as t } from 'storybook/internal/babel';
 import { formatFileContent } from 'storybook/internal/common';
-import { loadConfig, printConfig } from 'storybook/internal/csf-tools';
+import {
+  type ESTree as E,
+  type ESTreeNode as Node,
+  loadConfig,
+  printConfig,
+} from 'storybook/internal/csf-tools';
 import { logger } from 'storybook/internal/node-logger';
 
 import picocolors from 'picocolors';
 
 import type { FileInfo } from '../../automigrate/codemod.ts';
+import { removeStatements, setImportSpecifiers } from '../../automigrate/helpers/source-edits.ts';
 import {
   addImportToTop,
   cleanupTypeImports,
@@ -13,6 +18,19 @@ import {
   removeExportDeclarations,
 } from './csf-factories-utils.ts';
 
+// Inserts members at the start of an object, one per line when the object spans several lines.
+function prependMembers(code: string, object: E.ObjectExpression, members: string[]) {
+  const [first] = object.properties;
+  if (!first) {
+    return { at: object.start + 1, text: ` ${members.join(', ')} ` };
+  }
+  const lineStart = code.lastIndexOf('\n', first.start - 1) + 1;
+  const indent = code.slice(lineStart, first.start);
+  return code.slice(object.start, first.start).includes('\n') && !indent.trim()
+    ? { at: first.start, text: members.map((member) => `${member},\n${indent}`).join('') }
+    : { at: first.start, text: members.map((member) => `${member}, `).join('') };
+}
+
 export async function configToCsfFactory(
   info: FileInfo,
   { configType, frameworkPackage }: { configType: 'main' | 'preview'; frameworkPackage: string },
@@ -27,43 +45,43 @@ export async function configToCsfFactory(
   }
 
   const methodName = configType === 'main' ? 'defineMain' : 'definePreview';
-  const programNode = config._ast.program;
+  const editor = config._editorSource;
   const exportDecls = config._exportDecls;
+  const quote = config._quote;
 
-  const defineConfigProps = getConfigProperties(exportDecls, { configType });
+  const defineConfigProps = getConfigProperties(editor, exportDecls, { configType });
   const hasNamedExports = defineConfigProps.length > 0;
 
   // Early return if the code is already transformed (default export is already defineMain/definePreview)
-  const isAlreadyTransformed = programNode.body.some((node) => {
-    if (!t.isExportDefaultDeclaration(node)) return false;
-
-    // Unwrap TS syntax (e.g. `as`, `satisfies`) around the default export expression
-    const declaration =
-      typeof (config as any)._unwrap === 'function'
-        ? (config as any)._unwrap(node.declaration)
-        : node.declaration;
-
+  const isAlreadyTransformed = config._program.body.some((node) => {
+    if (node.type !== 'ExportDefaultDeclaration') {
+      return false;
+    }
+    const declaration = config._unwrap(node.declaration);
     return (
-      t.isCallExpression(declaration) &&
-      t.isIdentifier(declaration.callee) &&
+      declaration?.type === 'CallExpression' &&
+      declaration.callee.type === 'Identifier' &&
       declaration.callee.name === methodName
     );
   });
 
   // Check whether the required framework import (e.g. defineMain from '@storybook/react-vite/node') is already present
   const expectedImportSource = frameworkPackage + (configType === 'main' ? '/node' : '');
-  const hasCorrectImport = programNode.body.some(
-    (node) =>
-      t.isImportDeclaration(node) &&
-      node.importKind !== 'type' &&
-      node.source.value === expectedImportSource &&
-      node.specifiers.some(
-        (spec) =>
-          t.isImportSpecifier(spec) &&
-          t.isIdentifier(spec.imported) &&
-          spec.imported.name === methodName
-      )
-  );
+  const findFrameworkImport = () =>
+    config._program.body.find(
+      (node): node is E.ImportDeclaration =>
+        node.type === 'ImportDeclaration' &&
+        node.importKind !== 'type' &&
+        node.source.value === expectedImportSource
+    );
+  const importsMethod = (node: E.ImportDeclaration | undefined) =>
+    !!node?.specifiers.some(
+      (spec) =>
+        spec.type === 'ImportSpecifier' &&
+        spec.imported.type === 'Identifier' &&
+        spec.imported.name === methodName
+    );
+  const hasCorrectImport = importsMethod(findFrameworkImport());
 
   // For main configs, always return early when already transformed and imports are valid.
   // For preview configs, only return early when there are no named exports to merge.
@@ -74,24 +92,47 @@ export async function configToCsfFactory(
     return info.source;
   }
 
-  function findDeclarationNodeIndex(declarationName: string): number {
-    return programNode.body.findIndex(
-      (n) =>
-        t.isVariableDeclaration(n) &&
-        n.declarations.some((d) => {
-          let declaration = d.init;
-          // unwrap TS type annotations
-          if (t.isTSAsExpression(declaration) || t.isTSSatisfiesExpression(declaration)) {
-            declaration = declaration.expression;
-          }
-          return (
-            t.isIdentifier(d.id) &&
+  const findObjectDeclaration = (declarationName: string) =>
+    config._program.body.find(
+      (n): n is E.VariableDeclaration =>
+        n.type === 'VariableDeclaration' &&
+        n.declarations.some(
+          (d) =>
+            d.id.type === 'Identifier' &&
             d.id.name === declarationName &&
-            t.isObjectExpression(declaration)
-          );
-        })
+            config._unwrap(d.init)?.type === 'ObjectExpression'
+        )
     );
-  }
+
+  // Wraps the default export in `defineMain`/`definePreview`, moving a const declared config into it.
+  const wrapDefaultExport = (unwrapIdentifier: boolean) => {
+    const exportsObject = config._exportsObject;
+    if (!exportsObject) {
+      return;
+    }
+    const removed = new Set<Node>();
+    for (const node of config._program.body) {
+      if (node.type !== 'ExportDefaultDeclaration') {
+        continue;
+      }
+      const declaration = unwrapIdentifier ? config._unwrap(node.declaration) : node.declaration;
+      if (declaration?.type === 'Identifier') {
+        const declarationNode = findObjectDeclaration(declaration.name);
+        if (!declarationNode) {
+          continue;
+        }
+        removed.add(declarationNode);
+      } else if (declaration?.type !== 'ObjectExpression') {
+        continue;
+      }
+      editor.edits.overwrite(
+        node.declaration.start,
+        node.declaration.end,
+        `${methodName}(${editor.source(exportsObject)})`
+      );
+    }
+    removeStatements(editor, removed);
+  };
 
   if (shouldSkipTransform) {
     // already transformed — skip transformation but still run import fixup below
@@ -109,44 +150,11 @@ export async function configToCsfFactory(
      * Transform into: `export default defineMain({ tags: [], parameters: {} })`
      */
     // when merging named exports with default exports, add the named exports first in the list
-    config._exportsObject.properties = [...defineConfigProps, ...config._exportsObject.properties];
-    programNode.body = removeExportDeclarations(programNode, exportDecls);
-
-    // After merging, ensure the default export is wrapped with defineMain/definePreview
-    const defineConfigCall = t.callExpression(t.identifier(methodName), [config._exportsObject]);
-
-    let exportDefaultNode = null as unknown as t.ExportDefaultDeclaration;
-    let declarationNodeIndex = -1;
-
-    programNode.body.forEach((node) => {
-      // Detect Syntax 1: export default <identifier>
-      if (t.isExportDefaultDeclaration(node) && t.isIdentifier(node.declaration)) {
-        const declarationName = node.declaration.name;
-
-        declarationNodeIndex = findDeclarationNodeIndex(declarationName);
-
-        if (declarationNodeIndex !== -1) {
-          exportDefaultNode = node;
-          // remove the original declaration as it will become a default export
-          const declarationNode = programNode.body[declarationNodeIndex];
-          if (t.isVariableDeclaration(declarationNode)) {
-            const id = declarationNode.declarations[0].id;
-            const variableName = t.isIdentifier(id) && id.name;
-
-            if (variableName) {
-              programNode.body.splice(declarationNodeIndex, 1);
-            }
-          }
-        }
-      } else if (t.isExportDefaultDeclaration(node) && t.isObjectExpression(node.declaration)) {
-        // Detect Syntax 2: export default { ... }
-        exportDefaultNode = node;
-      }
-    });
-
-    if (exportDefaultNode !== null) {
-      exportDefaultNode.declaration = defineConfigCall;
-    }
+    const { at, text } = prependMembers(editor.code, config._exportsObject, defineConfigProps);
+    editor.edits.appendRight(at, text);
+    removeExportDeclarations(editor, exportDecls);
+    config._commit();
+    wrapDefaultExport(false);
   } else if (config._exportsObject) {
     /**
      * Scenario 2: Default exports
@@ -156,59 +164,17 @@ export async function configToCsfFactory(
      *
      * Transform into: `export default defineMain({})`
      */
-    const defineConfigCall = t.callExpression(t.identifier(methodName), [config._exportsObject]);
-
-    let exportDefaultNode = null as any as t.ExportDefaultDeclaration;
-    let declarationNodeIndex = -1;
-
-    programNode.body.forEach((node) => {
-      // Detect Syntax 1
-      const declaration =
-        t.isExportDefaultDeclaration(node) && config._unwrap(node.declaration as t.Node);
-
-      if (t.isExportDefaultDeclaration(node) && t.isIdentifier(declaration)) {
-        const declarationName = declaration.name;
-
-        declarationNodeIndex = findDeclarationNodeIndex(declarationName);
-
-        if (declarationNodeIndex !== -1) {
-          exportDefaultNode = node;
-          // remove the original declaration as it will become a default export
-          const declarationNode = programNode.body[declarationNodeIndex];
-          if (t.isVariableDeclaration(declarationNode)) {
-            const id = declarationNode.declarations[0].id;
-            const variableName = t.isIdentifier(id) && id.name;
-
-            if (variableName) {
-              programNode.body.splice(declarationNodeIndex, 1);
-            }
-          }
-        }
-      } else if (t.isExportDefaultDeclaration(node) && t.isObjectExpression(node.declaration)) {
-        // Detect Syntax 2
-        exportDefaultNode = node;
-      }
-    });
-
-    if (exportDefaultNode !== null) {
-      exportDefaultNode.declaration = defineConfigCall;
-    }
+    wrapDefaultExport(true);
   } else if (hasNamedExports) {
     /**
      * Scenario 3: Named exports export const foo = {}; export bar = '';
      *
      * Transform into: export default defineMain({ foo: {}, bar: '' });
      */
-    // Construct the `define` call
-    const defineConfigCall = t.callExpression(t.identifier(methodName), [
-      t.objectExpression(defineConfigProps),
-    ]);
-
-    // Remove all related named exports
-    programNode.body = removeExportDeclarations(programNode, exportDecls);
-
-    // Add the new export default declaration
-    programNode.body.push(t.exportDefaultDeclaration(defineConfigCall));
+    removeExportDeclarations(editor, exportDecls);
+    editor.edits.append(
+      `\nexport default ${methodName}({\n${defineConfigProps.map((prop) => `  ${prop}`).join(',\n')}\n});`
+    );
   } else if (configType === 'preview') {
     /**
      * Scenario 4: No exports (empty file or only side-effect imports)
@@ -222,46 +188,33 @@ export async function configToCsfFactory(
      * This is needed because story files using CSF factories import from preview, so the preview
      * file must have a default export.
      */
-    const defineConfigCall = t.callExpression(t.identifier(methodName), [t.objectExpression([])]);
-    programNode.body.push(t.exportDefaultDeclaration(defineConfigCall));
+    editor.edits.append(
+      `${editor.code && !editor.code.endsWith('\n') ? '\n' : ''}export default ${methodName}({});`
+    );
   }
-
-  const configImport = t.importDeclaration(
-    [t.importSpecifier(t.identifier(methodName), t.identifier(methodName))],
-    t.stringLiteral(frameworkPackage + `${configType === 'main' ? '/node' : ''}`)
-  );
+  config._commit();
 
   // Check whether @storybook/framework import already exists
-  const existingImport = programNode.body.find(
-    (node) =>
-      t.isImportDeclaration(node) &&
-      node.importKind !== 'type' &&
-      node.source.value === configImport.source.value
-  );
-
-  if (existingImport && t.isImportDeclaration(existingImport)) {
-    // If it does, check whether defineMain/definePreview is already imported
-    // and only add it if it's not
-    const hasMethodName = existingImport.specifiers.some(
-      (specifier) =>
-        t.isImportSpecifier(specifier) &&
-        t.isIdentifier(specifier.imported) &&
-        specifier.imported.name === methodName
-    );
-
-    if (!hasMethodName) {
-      existingImport.specifiers.push(
-        t.importSpecifier(t.identifier(methodName), t.identifier(methodName))
-      );
+  const existingImport = findFrameworkImport();
+  if (existingImport) {
+    // If it does, only add defineMain/definePreview if it's not imported yet
+    if (!importsMethod(existingImport)) {
+      setImportSpecifiers(editor, existingImport, existingImport.specifiers, {
+        named: [methodName],
+      });
     }
   } else {
     // if not, add import { defineMain } from '@storybook/framework'
-    addImportToTop(programNode, configImport);
+    addImportToTop(
+      editor,
+      `import { ${methodName} } from ${quote}${expectedImportSource}${quote};`
+    );
   }
+  config._commit();
 
   // Remove type imports – now inferred – from @storybook/* packages
   const disallowList = ['StorybookConfig', 'Preview'];
-  programNode.body = cleanupTypeImports(programNode, disallowList);
+  cleanupTypeImports(editor, disallowList);
 
   const output = printConfig(config).code;
 
diff --git a/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.test.ts b/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.test.ts
index af09ba0b9e01..769c023e94b8 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.test.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.test.ts
@@ -1,10 +1,12 @@
 import { describe, expect, it } from 'vitest';
 
-import { types as t } from 'storybook/internal/babel';
-import { generate, parser } from 'storybook/internal/babel';
+import { SourceEditor } from 'storybook/internal/csf-tools';
+
+import { dedent } from 'ts-dedent';
 
 import {
   cleanupTypeImports,
+  type ExportDeclarations,
   getConfigProperties,
   removeExportDeclarations,
 } from './csf-factories-utils.ts';
@@ -22,13 +24,30 @@ expect.addSnapshotSerializer({
   test: (_val) => true,
 });
 
-function parseCodeToProgramNode(code: string): t.Program {
-  return parser.parse(code, { sourceType: 'unambiguous', plugins: ['typescript'] }).program;
-}
-
-function generateCodeFromAST(node: t.Program) {
-  return generate(node).code;
-}
+const edit = (code: string, change: (editor: SourceEditor) => void) => {
+  const editor = new SourceEditor(dedent(code));
+  change(editor);
+  return editor.toString();
+};
+
+const exportedDeclarations = (editor: SourceEditor, names: string[]): ExportDeclarations =>
+  Object.fromEntries(
+    editor.program.body.flatMap((node) => {
+      if (node.type !== 'ExportNamedDeclaration' || !node.declaration) {
+        return [];
+      }
+      const { declaration } = node;
+      const decls =
+        declaration.type === 'VariableDeclaration'
+          ? declaration.declarations
+          : declaration.type === 'FunctionDeclaration'
+            ? [declaration]
+            : [];
+      return decls.flatMap((decl) =>
+        decl.id?.type === 'Identifier' && names.includes(decl.id.name) ? [[decl.id.name, decl]] : []
+      );
+    })
+  );
 
 describe('cleanupTypeImports', () => {
   it('removes disallowed imports from @storybook/*', () => {
@@ -37,10 +56,7 @@ describe('cleanupTypeImports', () => {
       import { Other } from 'some-other-package';
     `;
 
-    const programNode = parseCodeToProgramNode(code);
-    const cleanedNodes = cleanupTypeImports(programNode, ['Story']);
-
-    expect(generateCodeFromAST({ ...programNode, body: cleanedNodes })).toMatchInlineSnapshot(`
+    expect(edit(code, (editor) => cleanupTypeImports(editor, ['Story']))).toMatchInlineSnapshot(`
       import { SomethingElse } from '@storybook/react';
       import { Other } from 'some-other-package';
     `);
@@ -51,10 +67,9 @@ describe('cleanupTypeImports', () => {
       import { Story, Meta } from '@storybook/react';
     `;
 
-    const programNode = parseCodeToProgramNode(code);
-    const cleanedNodes = cleanupTypeImports(programNode, ['Story', 'Meta']);
-
-    expect(generateCodeFromAST({ ...programNode, body: cleanedNodes })).toMatchInlineSnapshot(``);
+    expect(
+      edit(code, (editor) => cleanupTypeImports(editor, ['Story', 'Meta']))
+    ).toMatchInlineSnapshot(``);
   });
 
   it('retains non storybook imports', () => {
@@ -62,10 +77,7 @@ describe('cleanupTypeImports', () => {
       import { Preview } from 'internal-types';
     `;
 
-    const programNode = parseCodeToProgramNode(code);
-    const cleanedNodes = cleanupTypeImports(programNode, ['Preview']);
-
-    expect(generateCodeFromAST({ ...programNode, body: cleanedNodes })).toMatchInlineSnapshot(
+    expect(edit(code, (editor) => cleanupTypeImports(editor, ['Preview']))).toMatchInlineSnapshot(
       `import { Preview } from 'internal-types';`
     );
   });
@@ -75,10 +87,7 @@ describe('cleanupTypeImports', () => {
       import * as Storybook from '@storybook/react';
     `;
 
-    const programNode = parseCodeToProgramNode(code);
-    const cleanedNodes = cleanupTypeImports(programNode, ['Preview']);
-
-    expect(generateCodeFromAST({ ...programNode, body: cleanedNodes })).toMatchInlineSnapshot(
+    expect(edit(code, (editor) => cleanupTypeImports(editor, ['Preview']))).toMatchInlineSnapshot(
       `import * as Storybook from '@storybook/react';`
     );
   });
@@ -96,20 +105,14 @@ describe('cleanupTypeImports', () => {
       };
     `;
 
-    const programNode = parseCodeToProgramNode(code);
-    const cleanedNodes = cleanupTypeImports(programNode, [
-      'Type1',
-      'Type2',
-      'Type3',
-      'Type4',
-      'ShouldBeRemoved',
-    ]);
-
-    const result = generateCodeFromAST({ ...programNode, body: cleanedNodes });
+    const result = edit(code, (editor) =>
+      cleanupTypeImports(editor, ['Type1', 'Type2', 'Type3', 'Type4', 'ShouldBeRemoved'])
+    );
 
     expect(result).toMatchInlineSnapshot(`
       import { Type1, type Type2 } from '@storybook/react';
       import type { Type3, Type4 } from '@storybook/react';
+
       const example: Type1 = {};
       const example2 = {} as Type2;
       const example3 = {} satisfies Type3;
@@ -130,16 +133,11 @@ describe('removeExportDeclarations', () => {
       export const baz = 'baz';
     `;
 
-    const programNode = parseCodeToProgramNode(code);
-    const exportDecls = {
-      foo: t.variableDeclarator(t.identifier('foo')),
-      baz: t.variableDeclarator(t.identifier('baz')),
-    };
-
-    const cleanedNodes = removeExportDeclarations(programNode, exportDecls);
-    const cleanedCode = generateCodeFromAST({ ...programNode, body: cleanedNodes });
-
-    expect(cleanedCode).toMatchInlineSnapshot(`export const bar = 'bar';`);
+    expect(
+      edit(code, (editor) =>
+        removeExportDeclarations(editor, exportedDeclarations(editor, ['foo', 'baz']))
+      )
+    ).toMatchInlineSnapshot(`export const bar = 'bar';`);
   });
 
   it('removes specified function export declarations', () => {
@@ -148,19 +146,11 @@ describe('removeExportDeclarations', () => {
       export function bar() { return 'bar'; }
     `;
 
-    const programNode = parseCodeToProgramNode(code);
-    const exportDecls = {
-      foo: t.functionDeclaration(t.identifier('foo'), [], t.blockStatement([])),
-    };
-
-    const cleanedNodes = removeExportDeclarations(programNode, exportDecls);
-    const cleanedCode = generateCodeFromAST({ ...programNode, body: cleanedNodes });
-
-    expect(cleanedCode).toMatchInlineSnapshot(`
-      export function bar() {
-        return 'bar';
-      }
-    `);
+    expect(
+      edit(code, (editor) =>
+        removeExportDeclarations(editor, exportedDeclarations(editor, ['foo']))
+      )
+    ).toMatchInlineSnapshot(`export function bar() { return 'bar'; }`);
   });
 
   it('retains exports not in the disallow list', () => {
@@ -169,15 +159,11 @@ describe('removeExportDeclarations', () => {
       export const bar = 'bar';
     `;
 
-    const programNode = parseCodeToProgramNode(code);
-    const exportDecls = {
-      nonExistent: t.variableDeclarator(t.identifier('nonExistent')),
-    };
-
-    const cleanedNodes = removeExportDeclarations(programNode, exportDecls);
-    const cleanedCode = generateCodeFromAST({ ...programNode, body: cleanedNodes });
-
-    expect(cleanedCode).toMatchInlineSnapshot(`
+    expect(
+      edit(code, (editor) =>
+        removeExportDeclarations(editor, exportedDeclarations(editor, ['nonExistent']))
+      )
+    ).toMatchInlineSnapshot(`
       export const foo = 'foo';
       export const bar = 'bar';
     `);
@@ -186,29 +172,20 @@ describe('removeExportDeclarations', () => {
 
 describe('getConfigProperties', () => {
   it('returns object properties from variable declarations', () => {
-    const exportDecls = {
-      foo: t.variableDeclarator(t.identifier('foo'), t.stringLiteral('fooValue')),
-      bar: t.variableDeclarator(t.identifier('bar'), t.numericLiteral(42)),
-    };
-
-    const properties = getConfigProperties(exportDecls, { configType: 'main' });
-
-    expect(properties).toHaveLength(2);
-    expect(properties[0].key.name).toBe('foo');
-    expect(properties[0].value.value).toBe('fooValue');
-    expect(properties[1].key.name).toBe('bar');
-    expect(properties[1].value.value).toBe(42);
+    const editor = new SourceEditor(`export const foo = 'fooValue';\nexport const bar = 42;`);
+
+    expect(
+      getConfigProperties(editor, exportedDeclarations(editor, ['foo', 'bar']), {
+        configType: 'main',
+      })
+    ).toEqual(["foo: 'fooValue'", 'bar: 42']);
   });
 
   it('returns object properties from function declarations', () => {
-    const exportDecls = {
-      foo: t.functionDeclaration(t.identifier('foo'), [], t.blockStatement([])),
-    };
-
-    const properties = getConfigProperties(exportDecls, { configType: 'main' });
+    const editor = new SourceEditor(`export function foo() {}`);
 
-    expect(properties).toHaveLength(1);
-    expect(properties[0].key.name).toBe('foo');
-    expect(properties[0].value.type).toBe('ArrowFunctionExpression');
+    expect(
+      getConfigProperties(editor, exportedDeclarations(editor, ['foo']), { configType: 'main' })
+    ).toEqual(['foo: () => {}']);
   });
 });
diff --git a/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.ts b/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.ts
index 46864f464091..e04839f1e51f 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.ts
@@ -1,4 +1,11 @@
-import { types as t, traverse } from 'storybook/internal/babel';
+import {
+  type ESTree as E,
+  type ESTreeNode as Node,
+  type SourceEditor,
+  walk,
+} from 'storybook/internal/csf-tools';
+
+import { removeStatements, setImportSpecifiers } from '../../automigrate/helpers/source-edits.ts';
 
 const projectAnnotationNames = [
   'decorators',
@@ -20,128 +27,105 @@ const projectAnnotationNames = [
   'runStep',
 ];
 
-export function cleanupTypeImports(programNode: t.Program, disallowList: string[]) {
+// Removes disallowed specifiers that the code no longer uses from `@storybook/*` imports.
+export function cleanupTypeImports(editor: SourceEditor, disallowList: string[]) {
   const usedIdentifiers = new Set<string>();
+  walk(editor.program, (node) => {
+    if (node.type === 'ImportDeclaration') {
+      return false;
+    }
+    if (node.type === 'Identifier') {
+      usedIdentifiers.add(node.name);
+    }
+  });
 
-  try {
-    // Collect all identifiers used in the program
-    traverse(programNode, {
-      Identifier(path) {
-        // Ensure we're not counting identifiers within import declarations
-        if (!path.findParent((p) => p.isImportDeclaration())) {
-          usedIdentifiers.add(path.node.name);
-        }
-      },
-      noScope: true,
-    });
-  } catch (err) {
-    // traversing could fail if the code isn't supported by
-    // our babel parse plugins, so we ignore
+  const removed = new Set<Node>();
+  for (const node of editor.program.body) {
+    if (node.type !== 'ImportDeclaration' || !node.source.value.startsWith('@storybook/')) {
+      continue;
+    }
+    const allowedSpecifiers = node.specifiers.filter(
+      (specifier) =>
+        specifier.type !== 'ImportSpecifier' ||
+        specifier.imported.type !== 'Identifier' ||
+        !disallowList.includes(specifier.imported.name) ||
+        usedIdentifiers.has(specifier.imported.name)
+    );
+    if (allowedSpecifiers.length === 0) {
+      removed.add(node);
+    } else if (allowedSpecifiers.length < node.specifiers.length) {
+      setImportSpecifiers(editor, node, allowedSpecifiers);
+    }
   }
+  removeStatements(editor, removed);
+}
 
-  return programNode.body.filter((node) => {
-    if (t.isImportDeclaration(node)) {
-      const { source, specifiers } = node;
-
-      if (source.value.startsWith('@storybook/')) {
-        const allowedSpecifiers = specifiers.filter((specifier) => {
-          if (t.isImportSpecifier(specifier) && t.isIdentifier(specifier.imported)) {
-            const name = specifier.imported.name;
-            // Only remove if disallowed AND unused
-            return !disallowList.includes(name) || usedIdentifiers.has(name);
-          }
-          // Retain namespace imports and non-specifiers
-          return true;
-        });
+export type ExportDeclarations = Record<string, E.VariableDeclarator | E.Function>;
 
-        // Remove the entire import if no valid specifiers remain
-        if (allowedSpecifiers.length > 0) {
-          node.specifiers = allowedSpecifiers;
-          return true;
-        }
-        return false;
-      }
+// Removes the given named export declarations, and declarators that are not plain identifiers.
+export function removeExportDeclarations(editor: SourceEditor, exportDecls: ExportDeclarations) {
+  const removed = new Set<Node>();
+  for (const node of editor.program.body) {
+    if (node.type !== 'ExportNamedDeclaration' || !node.declaration) {
+      continue;
     }
-
-    // Retain all other nodes
-    return true;
-    // @TODO adding any for now, unsure how to fix the following error:
-    // error TS4058: Return type of exported function has or is using name 'BlockStatement' from external module "/code/core/dist/babel/index" but cannot be named
-  }) as any;
-}
-
-export function removeExportDeclarations(
-  programNode: t.Program,
-  exportDecls: Record<string, t.VariableDeclarator | t.FunctionDeclaration>
-) {
-  return programNode.body.filter((node) => {
-    if (t.isExportNamedDeclaration(node) && node.declaration) {
-      if (t.isVariableDeclaration(node.declaration)) {
-        // Handle variable declarations
-        node.declaration.declarations = node.declaration.declarations.filter(
-          (decl) => t.isIdentifier(decl.id) && !exportDecls[decl.id.name]
+    const { declaration } = node;
+    if (declaration.type === 'VariableDeclaration') {
+      const { declarations } = declaration;
+      const kept = declarations.filter(
+        (decl) => decl.id.type === 'Identifier' && !exportDecls[decl.id.name]
+      );
+      if (kept.length === 0) {
+        removed.add(node);
+      } else if (kept.length < declarations.length) {
+        editor.edits.overwrite(
+          declarations[0].start,
+          declarations.at(-1)!.end,
+          kept.map((decl) => editor.source(decl)).join(', ')
         );
-        return node.declaration.declarations.length > 0;
-      } else if (t.isFunctionDeclaration(node.declaration)) {
-        // Handle function declarations
-        const funcDecl = node.declaration;
-        return t.isIdentifier(funcDecl.id) && !exportDecls[funcDecl.id.name];
       }
+    } else if (
+      declaration.type === 'FunctionDeclaration' &&
+      (!declaration.id || exportDecls[declaration.id.name])
+    ) {
+      removed.add(node);
     }
-    return true;
-    // @TODO adding any for now, unsure how to fix the following error:
-    // error TS4058: Return type of exported function has or is using name 'ObjectProperty' from external module "/tmp/storybook/code/core/dist/babel/index" but cannot be named.
-  }) as any;
+  }
+  removeStatements(editor, removed);
 }
 
+// Source of the `name: value` members a `defineMain`/`definePreview` call gets from named exports.
 export function getConfigProperties(
-  exportDecls: Record<string, t.VariableDeclarator | t.FunctionDeclaration>,
+  editor: SourceEditor,
+  exportDecls: ExportDeclarations,
   options: { configType: 'main' | 'preview' }
 ) {
-  const properties = [];
+  const properties: string[] = [];
 
-  // Collect properties from named exports
   for (const [name, decl] of Object.entries(exportDecls)) {
     // only include real preview exports to definePreview factory
     if (options.configType === 'preview' && !projectAnnotationNames.includes(name)) {
       continue;
     }
-    if (t.isVariableDeclarator(decl) && decl.init) {
-      properties.push(t.objectProperty(t.identifier(name), decl.init));
-    } else if (t.isFunctionDeclaration(decl)) {
-      properties.push(
-        t.objectProperty(t.identifier(name), t.arrowFunctionExpression([], decl.body))
-      );
+    if (decl.type === 'VariableDeclarator' && decl.init) {
+      properties.push(`${name}: ${editor.source(decl.init)}`);
+    } else if (decl.type === 'FunctionDeclaration' && decl.body) {
+      properties.push(`${name}: () => ${editor.source(decl.body)}`);
     }
   }
 
-  // @TODO adding any for now, unsure how to fix the following error:
-  // error TS4058: Return type of exported function has or is using name 'ObjectProperty' from external module "/tmp/storybook/code/core/dist/babel/index" but cannot be named.
-  return properties as any;
+  return properties;
 }
 
-/**
- * Adds an import declaration to the beginning of the program while preserving any leading comments
- * (like license headers or @ts-check directives).
- *
- * When using `programNode.body.unshift()`, the import would be placed before any leading comments
- * attached to the first node. This function transfers those comments to the new import so they
- * remain at the top of the file.
- *
- * Note: We use the `comments` property (used by recast for printing) rather than `leadingComments`
- * (used by babel internally) to ensure proper output formatting.
- */
-export function addImportToTop(programNode: t.Program, importDecl: t.ImportDeclaration): void {
-  const firstNode = programNode.body[0] as t.Node & { comments?: t.Comment[] };
-
-  if (firstNode && firstNode.leadingComments && firstNode.leadingComments.length > 0) {
-    // Transfer leading comments from the first node to the import using 'comments' property
-    // which is what recast uses for printing (not 'leadingComments')
-    (importDecl as t.Node & { comments?: t.Comment[] }).comments = firstNode.leadingComments;
-    // Clear comments from the original first node to avoid duplication
-    firstNode.leadingComments = [];
-    firstNode.comments = [];
+// Leading file comments, such as license headers or `@ts-check`, stay above the import.
+export function addImportToTop(editor: SourceEditor, importDeclaration: string): void {
+  const first = editor.program.body.find(
+    (node) => !(node.type === 'ExpressionStatement' && node.directive)
+  );
+  if (first) {
+    editor.edits.appendLeft(first.start, `${importDeclaration}\n`);
+  } else {
+    const { code } = editor;
+    editor.edits.append(`${code && !code.endsWith('\n') ? '\n' : ''}${importDeclaration}\n`);
   }
-
-  programNode.body.unshift(importDecl);
 }
diff --git a/code/lib/cli-storybook/src/codemod/helpers/custom-args-type.ts b/code/lib/cli-storybook/src/codemod/helpers/custom-args-type.ts
index e11b7964b86f..98c9e5d350f8 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/custom-args-type.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/custom-args-type.ts
@@ -1,19 +1,19 @@
-import { babelParse, generate, types as t } from 'storybook/internal/babel';
+import type { ESTree as E, ESTreeNode as Node, SourceEditor } from 'storybook/internal/csf-tools';
 
 // `ComponentMeta` and `ComponentStory` are left out: their type argument is always a component.
 const argsTypeNames = new Set(['Meta', 'MetaObj', 'Story', 'StoryFn', 'StoryObj']);
 
 // The component is never a custom args type: `preview.meta()` infers its args from `component`.
-export function customArgsTypes(program: t.Program, component: t.Node | undefined) {
+export function customArgsTypes(editor: SourceEditor, component: Node | undefined) {
   const argsTypeLocalNames = new Set<string>();
-  const typeAliases = new Map<string, t.TSType>();
+  const typeAliases = new Map<string, E.TSType>();
 
-  for (const node of program.body) {
-    if (t.isImportDeclaration(node)) {
+  for (const node of editor.program.body) {
+    if (node.type === 'ImportDeclaration') {
       for (const specifier of node.specifiers) {
         if (
-          t.isImportSpecifier(specifier) &&
-          t.isIdentifier(specifier.imported) &&
+          specifier.type === 'ImportSpecifier' &&
+          specifier.imported.type === 'Identifier' &&
           argsTypeNames.has(specifier.imported.name)
         ) {
           argsTypeLocalNames.add(specifier.local.name);
@@ -21,96 +21,96 @@ export function customArgsTypes(program: t.Program, component: t.Node | undefine
       }
     }
 
-    const declaration = t.isExportNamedDeclaration(node) ? node.declaration : node;
-    if (t.isTSTypeAliasDeclaration(declaration) && !declaration.typeParameters) {
+    const declaration = node.type === 'ExportNamedDeclaration' ? node.declaration : node;
+    if (declaration?.type === 'TSTypeAliasDeclaration' && !declaration.typeParameters) {
       typeAliases.set(declaration.id.name, declaration.typeAnnotation);
     }
   }
 
-  const componentCode = component && generate(component).code;
+  // Whitespace and comments do not make two types different.
+  const code = (type: Node) =>
+    editor
+      .source(type)
+      .replace(/\/\*[\s\S]*?\*\/|\/\/.*$/gm, '')
+      .replace(/\s+/g, ' ')
+      .trim();
 
-  const isComponentClass = (type: t.Node | null | undefined): type is t.TSTypeReference =>
-    t.isTSTypeReference(type) && generate(type.typeName).code === componentCode;
+  const componentCode = component && code(component);
 
-  const isComponent = (type: t.Node | null | undefined) =>
-    t.isTSTypeQuery(type) || isComponentClass(type);
+  const isComponentClass = (type: Node | null | undefined): type is E.TSTypeReference =>
+    type?.type === 'TSTypeReference' && code(type.typeName) === componentCode;
 
-  const aliasedType = (type: t.Node | null | undefined) =>
-    t.isTSTypeReference(type) && !type.typeParameters && t.isIdentifier(type.typeName)
+  const isComponent = (type: Node | null | undefined) =>
+    type?.type === 'TSTypeQuery' || isComponentClass(type);
+
+  const aliasedType = (type: Node | null | undefined) =>
+    type?.type === 'TSTypeReference' && !type.typeArguments && type.typeName.type === 'Identifier'
       ? typeAliases.get(type.typeName.name)
       : undefined;
 
-  const isArgsType = (type: t.Node | null | undefined): type is t.TSTypeReference =>
-    t.isTSTypeReference(type) &&
-    t.isIdentifier(type.typeName) &&
+  const isArgsType = (type: Node | null | undefined): type is E.TSTypeReference =>
+    type?.type === 'TSTypeReference' &&
+    type.typeName.type === 'Identifier' &&
     argsTypeLocalNames.has(type.typeName.name);
 
-  const argsType = (type: t.Node | null | undefined) => [type, aliasedType(type)].find(isArgsType);
+  const argsType = (type: Node | null | undefined) => [type, aliasedType(type)].find(isArgsType);
 
-  const customArgs = (type: t.TSType | undefined): t.TSType[] =>
-    (t.isTSIntersectionType(type) ? type.types : type ? [type] : []).flatMap((member) => {
-      if (t.isTSParenthesizedType(member)) {
+  const customArgs = (type: E.TSType | undefined): E.TSType[] =>
+    (type?.type === 'TSIntersectionType' ? type.types : type ? [type] : []).flatMap((member) => {
+      if (member.type === 'TSParenthesizedType') {
         return customArgs(member.typeAnnotation);
       }
       // `StoryObj<Meta<T>>` has the args of `Meta<T>`.
       const nested = argsType(member);
       if (nested) {
-        return customArgs(nested.typeParameters?.params[0]);
+        return customArgs(nested.typeArguments?.params[0]);
       }
       const alias = aliasedType(member);
       // An alias that includes the component class is dropped: carried over, it would make every
       // member of that class a required arg.
       const includesComponent =
-        isComponent(alias) || (t.isTSIntersectionType(alias) && alias.types.some(isComponent));
+        isComponent(alias) ||
+        (alias?.type === 'TSIntersectionType' && alias.types.some(isComponent));
       return isComponent(member) || includesComponent ? [] : [member];
     });
 
-  const code = (type: t.TSType) => generate(type, { comments: false }).code;
-
   return {
-    read(annotation: t.Node | null | undefined): t.TSType[] {
-      const type = t.isTSTypeAnnotation(annotation) ? annotation.typeAnnotation : annotation;
-      return customArgs(argsType(type)?.typeParameters?.params[0]);
+    read(annotation: Node | null | undefined): E.TSType[] {
+      const type = annotation?.type === 'TSTypeAnnotation' ? annotation.typeAnnotation : annotation;
+      return customArgs(argsType(type)?.typeArguments?.params[0]);
     },
 
-    shared([first = [], ...rest]: t.TSType[][]): t.TSType[] {
+    shared([first = [], ...rest]: E.TSType[][]): E.TSType[] {
       return first.filter((type) =>
         rest.every((types) => types.some((other) => code(other) === code(type)))
       );
     },
 
-    typed(receiver: string, argsTypes: t.TSType[], metaArgsTypes: t.TSType[] = []): t.Expression {
+    // Source of `receiver`, or of `receiver.type<{ args: … }>()` for args types the meta lacks.
+    typed(receiver: string, argsTypes: E.TSType[], metaArgsTypes: E.TSType[] = []): string {
       const metaCodes = new Set(metaArgsTypes.map(code));
-      const distinctTypes = new Map<string, t.TSType>();
+      const distinctTypes = new Map<string, E.TSType>();
       for (const type of argsTypes) {
         if (!metaCodes.has(code(type))) {
           distinctTypes.set(code(type), type);
         }
       }
       if (distinctTypes.size === 0) {
-        return t.identifier(receiver);
+        return receiver;
       }
 
-      // Parsed rather than built, as recast prints a type literal it did not parse over multiple lines.
-      const [statement] = babelParse(`${receiver}.type<{ args: Args }>()`).program.body;
-      t.assertExpressionStatement(statement);
-      const typed = statement.expression;
-      t.assertCallExpression(typed);
-      const typeLiteral = typed.typeParameters?.params[0];
-      t.assertTSTypeLiteral(typeLiteral);
-      const [args] = typeLiteral.members;
-      t.assertTSPropertySignature(args);
-
       const types = [...distinctTypes.values()];
-      args.typeAnnotation = t.tsTypeAnnotation(
+      const args =
         types.length > 1
-          ? t.tsIntersectionType(
-              types.map((type) => (t.isTSUnionType(type) ? t.tsParenthesizedType(type) : type))
-            )
-          : types[0]
-      );
-
-      return typed;
+          ? types
+              .map((type) =>
+                type.type === 'TSUnionType' || type.type === 'TSFunctionType'
+                  ? `(${editor.source(type)})`
+                  : editor.source(type)
+              )
+              .join(' & ')
+          : editor.source(types[0]);
+      return `${receiver}.type<{ args: ${args} }>()`;
     },
   };
 }
diff --git a/code/lib/cli-storybook/src/codemod/helpers/remove-unused-types.test.ts b/code/lib/cli-storybook/src/codemod/helpers/remove-unused-types.test.ts
index 82acbcdea2ab..767446ebf315 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/remove-unused-types.test.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/remove-unused-types.test.ts
@@ -17,7 +17,7 @@ const unescape = (str: string) => str.replace(/\r\n/g, '\n');
 describe('removeUnusedTypes', () => {
   const getTransformed = (source: string) => {
     const csf = loadCsf(source, { makeTitle: () => 'FIXME' }).parse();
-    removeUnusedTypes(csf._ast.program, csf._ast);
+    removeUnusedTypes(csf._editor);
     return printCsf(csf).code;
   };
 
diff --git a/code/lib/cli-storybook/src/codemod/helpers/remove-unused-types.ts b/code/lib/cli-storybook/src/codemod/helpers/remove-unused-types.ts
index 9697d455fa6a..a5202bc308bb 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/remove-unused-types.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/remove-unused-types.ts
@@ -1,5 +1,11 @@
-import { types as t, traverse } from 'storybook/internal/babel';
-
+import {
+  type ESTree as E,
+  type ESTreeNode as Node,
+  type SourceEditor,
+  walk,
+} from 'storybook/internal/csf-tools';
+
+import { removeStatements } from '../../automigrate/helpers/source-edits.ts';
 import { cleanupTypeImports } from './csf-factories-utils.ts';
 
 // Name of types that should be removed from the import list
@@ -15,8 +21,14 @@ const typesDisallowList = [
 
 const disallowedTypesSet = new Set(typesDisallowList);
 
+type TypeDeclaration = E.TSTypeAliasDeclaration | E.TSInterfaceDeclaration;
+
+const isTypeDeclaration = (node: Node | null | undefined): node is TypeDeclaration =>
+  node?.type === 'TSTypeAliasDeclaration' || node?.type === 'TSInterfaceDeclaration';
+
 /**
- * Remove unused Storybook-specific type aliases from the program.
+ * Remove unused Storybook-specific type aliases from the program, then the Storybook type imports
+ * nothing uses anymore. Commits the editor after each removal pass.
  *
  * Conditions to remove a declared type/interface:
  *
@@ -24,153 +36,72 @@ const disallowedTypesSet = new Set(typesDisallowList);
  * - It is not referenced anywhere in the file,
  * - AND it (the declaration) references at least one Storybook type from typesDisallowList.
  *
- * Each pass performs one traversal of `ast`. During a pass we:
- *
- * - Collect declared type names,
- * - Record references to declared types (including handling references that appear before
- *   declarations),
- * - Detect per-declaration whether it references any disallowed Storybook type, and then filter
- *   program.body. The pass repeats while it removes a type.
+ * A removed type can have held the only reference to another one, such as `type Story =
+ * StoryObj<StoryMeta>` to `StoryMeta`, so passes repeat while they remove a type.
  */
-export function removeUnusedTypes(programNode: t.Program, ast: t.File): void {
-  // Declared type/interface names seen in this file
-  const declaredTypes = new Set<string>();
-
-  // Names of declared types that are referenced somewhere in the file
-  const referencedTypes = new Set<string>();
-
-  // Temporary: identifier names seen before we encountered their declaration
-  // This lets us count forward references (identifier appears before type is declared).
-  const pendingIdentifierNames = new Set<string>();
-
-  // Names of type declarations that (somewhere in their AST) reference a disallowed Storybook type
-  const typeDeclReferencesDisallowed = new Set<string>();
-
-  traverse(ast, {
-    enter(path) {
-      const node = path.node;
-
-      // 1) When we encounter a type/interface declaration, register it.
-      if (path.isTSTypeAliasDeclaration() || path.isTSInterfaceDeclaration()) {
-        // These always have an `id` property that's an Identifier
-        const idNode = (node as t.TSTypeAliasDeclaration | t.TSInterfaceDeclaration).id;
-        const name = idNode && t.isIdentifier(idNode) ? idNode.name : undefined;
-        if (name) {
-          declaredTypes.add(name);
-
-          // If we previously saw identifiers with this name before the declaration,
-          // count them now as references (handles reference-before-declaration).
-          if (pendingIdentifierNames.has(name)) {
-            referencedTypes.add(name);
-          }
-        }
-
-        // No need to traverse into the id itself here; we still want to traverse the
-        // declaration body so that disallowed-type references inside are detected
-        // by the TSTypeReference/TSExpressionWithTypeArguments handlers below.
-        return;
+export function removeUnusedTypes(editor: SourceEditor): void {
+  for (;;) {
+    const declaredTypes = new Set<string>();
+    const referencedTypes = new Set<string>();
+    // Identifier names seen before their declaration, so forward references count.
+    const pendingIdentifierNames = new Set<string>();
+    const typeDeclReferencesDisallowed = new Set<string>();
+
+    const markOwner = (node: Node) => {
+      let owner = editor.parentOf(node);
+      while (owner && !isTypeDeclaration(owner)) {
+        owner = editor.parentOf(owner);
       }
-
-      // 2) Track identifier references to declared types.
-      if (path.isIdentifier()) {
-        const identifierNode = node as t.Identifier;
-        const name = identifierNode.name;
-
-        // Skip the identifier that *is* the declaration id itself:
-        // parent is TSTypeAliasDeclaration or TSInterfaceDeclaration and its id is this node
-        const parentPath = path.parentPath;
-        if (
-          parentPath &&
-          (parentPath.isTSTypeAliasDeclaration() || parentPath.isTSInterfaceDeclaration())
-        ) {
-          const parentIdNode = (
-            parentPath.node as t.TSTypeAliasDeclaration | t.TSInterfaceDeclaration
-          ).id;
-          if (parentIdNode === node) {
-            return;
-          }
-        }
-
-        // If we've already seen the declaration, mark as referenced.
-        if (declaredTypes.has(name)) {
-          referencedTypes.add(name);
-        } else {
-          // Otherwise record as pending — if the declaration appears later, we'll promote it.
-          pendingIdentifierNames.add(name);
-        }
-
-        return;
+      if (owner) {
+        typeDeclReferencesDisallowed.add(owner.id.name);
       }
+    };
 
-      // 3) Detect references to disallowed Storybook types inside type declarations.
-      // If we find one, record which type declaration (owner) contains it.
-      if (path.isTSTypeReference()) {
-        const typeRefNode = node as t.TSTypeReference;
-        const typeNameNode = typeRefNode.typeName;
-
-        if (t.isIdentifier(typeNameNode) && disallowedTypesSet.has(typeNameNode.name)) {
-          // Find the nearest enclosing type declaration (alias or interface)
-          const owner = path.findParent(
-            (p) => p.isTSTypeAliasDeclaration() || p.isTSInterfaceDeclaration()
-          );
-          if (owner && (owner.isTSTypeAliasDeclaration() || owner.isTSInterfaceDeclaration())) {
-            const ownerId = (owner.node as t.TSTypeAliasDeclaration | t.TSInterfaceDeclaration).id;
-            const ownerName = t.isIdentifier(ownerId) ? ownerId.name : undefined;
-            if (ownerName) {
-              typeDeclReferencesDisallowed.add(ownerName);
-            }
-          }
+    walk(editor.program, (node, parent) => {
+      if (isTypeDeclaration(node)) {
+        declaredTypes.add(node.id.name);
+        if (pendingIdentifierNames.has(node.id.name)) {
+          referencedTypes.add(node.id.name);
         }
-
-        return;
-      }
-
-      if (path.isTSExpressionWithTypeArguments()) {
-        const tsExprNode = node as t.TSExpressionWithTypeArguments;
-        const expr = tsExprNode.expression;
-        if (t.isIdentifier(expr) && disallowedTypesSet.has(expr.name)) {
-          const owner = path.findParent(
-            (p) => p.isTSTypeAliasDeclaration() || p.isTSInterfaceDeclaration()
-          );
-          if (owner && (owner.isTSTypeAliasDeclaration() || owner.isTSInterfaceDeclaration())) {
-            const ownerId = (owner.node as t.TSTypeAliasDeclaration | t.TSInterfaceDeclaration).id;
-            const ownerName = t.isIdentifier(ownerId) ? ownerId.name : undefined;
-            if (ownerName) {
-              typeDeclReferencesDisallowed.add(ownerName);
-            }
-          }
+      } else if (node.type === 'Identifier') {
+        if (isTypeDeclaration(parent) && parent.id === node) {
+          return;
         }
-        return;
-      }
-    },
-  });
-
-  // Final pass: remove unused declared types that reference disallowed types
-  const body = programNode.body.filter((node) => {
-    if (t.isTSTypeAliasDeclaration(node) || t.isTSInterfaceDeclaration(node)) {
-      const name = node.id.name;
-
-      // If it's a declared type, unused, and references a disallowed Storybook type — remove it.
-      if (
-        declaredTypes.has(name) &&
-        !referencedTypes.has(name) &&
-        typeDeclReferencesDisallowed.has(name)
+        if (declaredTypes.has(node.name)) {
+          referencedTypes.add(node.name);
+        } else {
+          pendingIdentifierNames.add(node.name);
+        }
+      } else if (
+        node.type === 'TSTypeReference' &&
+        node.typeName.type === 'Identifier' &&
+        disallowedTypesSet.has(node.typeName.name)
       ) {
-        return false; // filter out (remove)
+        markOwner(node);
+      } else if (
+        (node.type === 'TSInterfaceHeritage' || node.type === 'TSClassImplements') &&
+        node.expression.type === 'Identifier' &&
+        disallowedTypesSet.has(node.expression.name)
+      ) {
+        markOwner(node);
       }
+    });
+
+    const removed = new Set<Node>(
+      editor.program.body.filter(
+        (node) =>
+          isTypeDeclaration(node) &&
+          declaredTypes.has(node.id.name) &&
+          !referencedTypes.has(node.id.name) &&
+          typeDeclReferencesDisallowed.has(node.id.name)
+      )
+    );
+    if (removed.size === 0) {
+      break;
     }
-
-    return true; // keep everything else
-  });
-
-  // A removed type can have held the only reference to another one, such as
-  // `type Story = StoryObj<StoryMeta>` to `StoryMeta`.
-  if (body.length < programNode.body.length) {
-    programNode.body = body;
-    removeUnusedTypes(programNode, ast);
-    return;
+    removeStatements(editor, removed);
+    editor.commit();
   }
 
-  // Cleanup any now-unused Storybook type imports (keeps original API: pass array)
-  programNode.body = cleanupTypeImports(programNode, typesDisallowList);
+  cleanupTypeImports(editor, typesDisallowList);
 }
diff --git a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
index ce64615e6c6d..d6772773ff4f 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
@@ -63,7 +63,6 @@ describe('stories codemod', () => {
          * Copyright 2024
          */
         import preview from "#.storybook/preview";
-
         const meta = preview.meta({ title: "Component" });
         export const A = meta.story();
       `);
@@ -77,11 +76,7 @@ describe('stories codemod', () => {
           `)
       ).resolves.toMatchInlineSnapshot(`
         import preview from "#.storybook/preview";
-
-        const meta = preview.meta({
-          title: "Component",
-        });
-
+        const meta = preview.meta({ title: "Component" });
         export const A = meta.story();
       `);
     });
@@ -210,11 +205,7 @@ describe('stories codemod', () => {
           `)
       ).resolves.toMatchInlineSnapshot(`
         import preview from "#.storybook/preview";
-
-        const meta = preview.meta({
-          title: "Component",
-        });
-
+        const meta = preview.meta({ title: "Component" });
         const someData = {};
 
         export const A = meta.story();
@@ -324,9 +315,7 @@ describe('stories codemod', () => {
         import * as BaseStories from "./Button.stories";
         import { Primary as ImportedPrimary } from "./Card.stories";
 
-        const meta = preview.meta({
-          title: "Component",
-        });
+        const meta = preview.meta({ title: "Component" });
 
         export const A = meta.story({
           args: BaseStories.Primary.input.args,
@@ -487,7 +476,7 @@ describe('stories codemod', () => {
           )
         )
       ).resolves.toMatchInlineSnapshot(`
-        import preview from "../.rnstorybook/preview";
+        import preview from '../.rnstorybook/preview';
         const meta = preview.meta({});
         export const A = meta.story();
       `);
@@ -1234,9 +1223,7 @@ describe('stories codemod', () => {
           name: string;
         }
 
-        const meta = preview.meta({
-          title: "Table",
-        });
+        const meta = preview.meta({ title: "Table" });
 
         export const A = meta.story({
           render: () => {
@@ -1267,14 +1254,10 @@ describe('stories codemod', () => {
         import preview from "#.storybook/preview";
         import { Meta } from "@storybook/react";
         import { Button } from "./Button";
-
         type ThisShouldNotBeRemoved = Meta<typeof Button>;
         const something: ThisShouldNotBeRemoved = {};
 
-        const meta = preview.meta({
-          title: "Button",
-        });
-
+        const meta = preview.meta({ title: "Button" });
         export const A = meta.story();
       `);
     });
@@ -1453,11 +1436,9 @@ describe('stories codemod', () => {
         const meta = preview.meta({
           component: Component,
           args: { getUsers: fn(), onClick: fn() },
-
           beforeEach: ({ args }) => {
             mocked(args.getUsers).mockResolvedValue([]);
           },
-
           loaders: [
             async ({ args }) => {
               mocked(args.getUsers).mockClear();
diff --git a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
index 34e034f0c312..c90f2242e102 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
@@ -1,11 +1,18 @@
-import { types as t, traverse } from 'storybook/internal/babel';
-import { isValidPreviewPath, loadCsf, printCsf } from 'storybook/internal/csf-tools';
+import {
+  type ESTree as E,
+  type ESTreeNode as Node,
+  isValidPreviewPath,
+  loadCsf,
+  printCsf,
+  walk,
+} from 'storybook/internal/csf-tools';
 import { logger } from 'storybook/internal/node-logger';
 
 import path from 'path';
 
 import { DOCUMENTED_PREVIEW_IMPORT } from '../../../../../core/src/shared/constants/config-folder.ts';
 import type { FileInfo } from '../../automigrate/codemod.ts';
+import { removeStatements, setImportSpecifiers } from '../../automigrate/helpers/source-edits.ts';
 import { addImportToTop } from './csf-factories-utils.ts';
 import { customArgsTypes } from './custom-args-type.ts';
 import { removeUnusedTypes } from './remove-unused-types.ts';
@@ -14,6 +21,61 @@ import { wrapArgsMocks } from './wrap-args-mocks.ts';
 // Name of properties that should not be renamed to `Story.input.xyz`
 const reuseDisallowList = ['play', 'run', 'extends', 'story'];
 
+const TYPE_CASTS = new Set([
+  'TSAsExpression',
+  'TSSatisfiesExpression',
+  'TSNonNullExpression',
+  'TSTypeAssertion',
+  'TSInstantiationExpression',
+]);
+
+function isExpressionPosition(node: Node, parent: Node, grandparent: Node | null) {
+  switch (parent.type) {
+    case 'VariableDeclarator':
+      return parent.id !== node;
+    case 'ImportSpecifier':
+    case 'ImportDefaultSpecifier':
+    case 'ImportNamespaceSpecifier':
+    case 'ExportSpecifier':
+    case 'ExportDefaultDeclaration':
+    case 'MetaProperty':
+    case 'LabeledStatement':
+    case 'BreakStatement':
+    case 'ContinueStatement':
+    case 'CatchClause':
+    case 'ArrayPattern':
+    case 'RestElement':
+    case 'ClassDeclaration':
+    case 'ClassExpression':
+      return false;
+    case 'AssignmentPattern':
+      return parent.right === node;
+    case 'MemberExpression':
+      return parent.object === node || parent.computed;
+    case 'Property':
+      return (
+        grandparent?.type !== 'ObjectPattern' &&
+        (parent.value === node || (parent.computed && parent.key === node))
+      );
+    case 'MethodDefinition':
+    case 'PropertyDefinition':
+      return parent.computed && parent.key === node;
+    case 'FunctionDeclaration':
+    case 'FunctionExpression':
+    case 'ArrowFunctionExpression':
+      return parent.body === node;
+    default:
+      return !parent.type.startsWith('TS') || TYPE_CASTS.has(parent.type);
+  }
+}
+
+const isTypeWrapped = (node: Node): node is E.TSAsExpression | E.TSSatisfiesExpression =>
+  node.type === 'TSSatisfiesExpression' || node.type === 'TSAsExpression';
+
+// OXC types declare no annotation on binding identifiers, but TypeScript sources have them.
+const typeAnnotationOf = (id: Node) =>
+  (id as { typeAnnotation?: E.TSTypeAnnotation | null }).typeAnnotation;
+
 type Options =
   | { useSubPathImports: true; previewConfigPath?: string }
   | { useSubPathImports: false; previewConfigPath: string };
@@ -43,19 +105,19 @@ export async function storyToCsfFactory(
 
   const metaVariableName = csf._metaVariableName ?? 'meta';
 
-  /**
-   * Add the preview import if it doesn't exist yet:
-   *
-   * `import preview from '#.storybook/preview'`;
-   */
-  const programNode = csf._ast.program;
-  let previewImport: t.ImportDeclaration | undefined;
+  const editor = csf._editor;
+  const { program, scopes } = editor;
+  const quote = editor.quote;
+  // Registers every node with its parent, which the reference rewrite below asks for.
+  editor.parentOf(program);
 
   // Check if a root-level constant named 'preview' exists
-  const hasRootLevelConfig = programNode.body.some(
+  const hasRootLevelConfig = program.body.some(
     (n) =>
-      t.isVariableDeclaration(n) &&
-      n.declarations.some((declaration) => t.isIdentifier(declaration.id, { name: 'preview' }))
+      n.type === 'VariableDeclaration' &&
+      n.declarations.some(
+        (declaration) => declaration.id.type === 'Identifier' && declaration.id.name === 'preview'
+      )
   );
 
   let previewPath = DOCUMENTED_PREVIEW_IMPORT;
@@ -77,8 +139,8 @@ export async function storyToCsfFactory(
   }
 
   let sbConfigImportName = hasRootLevelConfig ? 'storybookPreview' : 'preview';
-
-  const sbConfigImportSpecifier = t.importDefaultSpecifier(t.identifier(sbConfigImportName));
+  let previewImport: E.ImportDeclaration | undefined;
+  let previewImportNeedsDefault = false;
 
   /**
    * Collect imports from other .stories files.
@@ -100,41 +162,33 @@ export async function storyToCsfFactory(
   const namespaceStoryImports = new Set<string>(); // import * as X
   const namedStoryImports = new Set<string>(); // import { X } or import X
 
-  programNode.body.forEach((node) => {
-    if (t.isImportDeclaration(node)) {
-      const importPath = node.source.value;
-
-      // Check if this import is from a .stories file
-      // Matches: ./Button.stories, ../components/Card.stories.tsx, etc.
-      const isStoryFileImport = /\.stories(\.(ts|tsx|js|jsx|mjs|mts))?$/.test(importPath);
-
-      if (isStoryFileImport) {
-        // Collect all imported names from this story file
-        node.specifiers.forEach((specifier) => {
-          if (t.isImportNamespaceSpecifier(specifier)) {
-            // import * as BaseStories from './Button.stories'
-            // BaseStories.Primary is a story, so we need: BaseStories.Primary.input
-            namespaceStoryImports.add(specifier.local.name);
-          } else if (t.isImportSpecifier(specifier)) {
-            // import { Primary } from './Button.stories'
-            // Primary itself is a story, so we need: Primary.input
-            namedStoryImports.add(specifier.local.name);
-          } else if (t.isImportDefaultSpecifier(specifier)) {
-            // import ButtonStories from './Button.stories'
-            // This typically imports the meta, not stories, so we treat it like namespace
-            namespaceStoryImports.add(specifier.local.name);
-          }
-        });
-      }
+  program.body.forEach((node) => {
+    if (node.type !== 'ImportDeclaration') {
+      return;
+    }
+    const importPath = node.source.value;
+
+    // Matches: ./Button.stories, ../components/Card.stories.tsx, etc.
+    if (/\.stories(\.(ts|tsx|js|jsx|mjs|mts))?$/.test(importPath)) {
+      node.specifiers.forEach((specifier) => {
+        if (specifier.type === 'ImportSpecifier') {
+          // import { Primary } from './Button.stories': Primary itself is a story
+          namedStoryImports.add(specifier.local.name);
+        } else {
+          // import * as BaseStories from './Button.stories': BaseStories.Primary is a story.
+          // A default import typically imports the meta, so it is treated like a namespace.
+          namespaceStoryImports.add(specifier.local.name);
+        }
+      });
     }
 
-    if (t.isImportDeclaration(node) && isValidPreviewPath(node.source.value)) {
-      const defaultImportSpecifier = node.specifiers.find((specifier) =>
-        t.isImportDefaultSpecifier(specifier)
+    if (isValidPreviewPath(importPath)) {
+      const defaultImportSpecifier = node.specifiers.find(
+        (specifier) => specifier.type === 'ImportDefaultSpecifier'
       );
 
       if (!defaultImportSpecifier) {
-        node.specifiers.push(sbConfigImportSpecifier);
+        previewImportNeedsDefault = true;
       } else if (defaultImportSpecifier.local.name !== sbConfigImportName) {
         sbConfigImportName = defaultImportSpecifier.local.name;
       }
@@ -145,9 +199,10 @@ export async function storyToCsfFactory(
 
   const hasMeta = !!csf._meta;
 
-  const customArgs = customArgsTypes(programNode, csf._metaAnnotations.component);
-  const metaArgsTypes: t.TSType[] = [];
-  const storyCallees: { callee: t.MemberExpression; argsTypes: t.TSType[] }[] = [];
+  const customArgs = customArgsTypes(editor, csf._metaAnnotations.component);
+  const metaArgsTypes: E.TSType[] = [];
+  const storyInits: { init: E.Expression; story: E.Expression; argsTypes: E.TSType[] }[] = [];
+  const functionStories: { statement: Node; fn: E.Function }[] = [];
 
   // Combined set for quick lookup
   const storyFileImports = new Set([...namespaceStoryImports, ...namedStoryImports]);
@@ -156,272 +211,37 @@ export async function storyToCsfFactory(
   // `export function Story() { };` and `export { Story };
   // These are not part of csf._storyExports but rather csf._storyStatements and are tricky to support.
   Object.entries(csf._storyExports).forEach(([exportName, decl]) => {
-    const id = decl.id;
-    const declarator = decl as t.VariableDeclarator;
-    let init = t.isVariableDeclarator(declarator) ? declarator.init : undefined;
-
-    if (t.isIdentifier(id) && init) {
-      const argsTypes: t.TSType[] = [];
-
-      // Remove type annotations e.g. A<B> in `const Story: A<B> = {};`
-      if (id.typeAnnotation) {
-        argsTypes.push(...customArgs.read(id.typeAnnotation));
-        id.typeAnnotation = null;
-      }
-
-      // Remove type annotations e.g. A<B> in `const Story = {} satisfies A<B>;`
-      if (t.isTSSatisfiesExpression(init) || t.isTSAsExpression(init)) {
-        argsTypes.push(...customArgs.read(init.typeAnnotation));
-        init = init.expression;
-      }
-
-      if (t.isObjectExpression(init) || t.isArrowFunctionExpression(init)) {
-        // Wrap the object in `meta.story()`, or transform CSF1 to `meta.story(<originalFn>)`
-        const callee = t.memberExpression(t.identifier(metaVariableName), t.identifier('story'));
-        declarator.init = t.callExpression(
-          callee,
-          t.isObjectExpression(init) && init.properties.length === 0 ? [] : [init]
-        );
-        storyCallees.push({ callee, argsTypes });
+    if (decl.type === 'FunctionDeclaration') {
+      const statement = csf._storyStatements[exportName];
+      if (decl.id && statement?.type === 'ExportNamedDeclaration') {
+        functionStories.push({ statement, fn: decl });
         transformedStoryExports.add(exportName);
       }
+      return;
     }
-  });
-
-  // Support function-declared stories
-  Object.entries(csf._storyExports).forEach(([exportName, decl]) => {
-    if (t.isFunctionDeclaration(decl) && decl.id) {
-      const arrowFn = t.arrowFunctionExpression(decl.params, decl.body);
-      arrowFn.async = !!decl.async;
-
-      const wrappedCall = t.callExpression(
-        t.memberExpression(t.identifier(metaVariableName), t.identifier('story')),
-        [arrowFn]
-      );
-
-      const replacement = t.exportNamedDeclaration(
-        t.variableDeclaration('const', [
-          t.variableDeclarator(t.identifier(exportName), wrappedCall),
-        ])
-      );
-
-      const pathForExport = (
-        csf as unknown as {
-          _storyPaths?: Record<string, { replaceWith?: (node: t.Node) => void }>;
-        }
-      )._storyPaths?.[exportName];
-      if (pathForExport && pathForExport.replaceWith) {
-        pathForExport.replaceWith(replacement);
-        transformedStoryExports.add(exportName);
-      }
+    if (decl.type !== 'VariableDeclarator' || decl.id.type !== 'Identifier' || !decl.init) {
+      return;
     }
-  });
-
-  const storyExportDecls = new Map(
-    Object.entries(csf._storyExports).filter(
-      (
-        entry
-      ): entry is [string, Exclude<(typeof csf._storyExports)[string], t.FunctionDeclaration>] =>
-        !t.isFunctionDeclaration(entry[1])
-    )
-  );
-
-  // For each story, replace any reference of story reuse e.g.
-  // Story.args -> Story.input.args
-  // meta.args -> meta.input.args
-  // BaseStories.Primary.args -> BaseStories.Primary.input.args (cross-file)
-  traverse(csf._ast, {
-    /**
-     * Handle SAME-FILE story references.
-     *
-     * Examples: Primary.args → Primary.input.args meta.args → meta.input.args
-     */
-    Identifier(nodePath) {
-      const identifierName = nodePath.node.name;
-      const binding = nodePath.scope.getBinding(identifierName);
-
-      // Check if the identifier corresponds to a story export or the meta variable
-      const isStoryExport = binding && storyExportDecls.has(binding.identifier.name);
-      const isMetaVariable = identifierName === metaVariableName;
-
-      if (isStoryExport || isMetaVariable) {
-        const parent = nodePath.parent;
-
-        // Skip declarations (e.g., `const Story = {};`)
-        if (t.isVariableDeclarator(parent) && parent.id === nodePath.node) {
-          return;
-        }
-
-        // Skip import statements e.g.`import { X as Story }`
-        if (t.isImportSpecifier(parent)) {
-          return;
-        }
-
-        // Skip export statements e.g.`export const Story` or `export { Story }`
-        if (t.isExportSpecifier(parent) || t.isExportDefaultDeclaration(parent)) {
-          return;
-        }
-
-        // Skip if it's already `Story.input` or `meta.input`
-        if (t.isMemberExpression(parent) && t.isIdentifier(parent.property, { name: 'input' })) {
-          return;
-        }
-
-        // Check if the property name is in the disallow list
-        if (
-          t.isMemberExpression(parent) &&
-          t.isIdentifier(parent.property) &&
-          reuseDisallowList.includes(parent.property.name)
-        ) {
-          return;
-        }
-
-        try {
-          // Replace the identifier with `Story.input` or `meta.input`
-          nodePath.replaceWith(
-            t.memberExpression(t.identifier(identifierName), t.identifier('input'))
-          );
-        } catch (err: any) {
-          // This error occurs for cross-file references like `Stories.Story.args`
-          // which are handled by the MemberExpression visitor below.
-          if (err.message.includes(`instead got "MemberExpression"`)) {
-            return;
-          } else {
-            throw err;
-          }
-        }
-      }
-    },
-
-    /**
-     * Handle CROSS-FILE story references.
-     *
-     * When we import stories from another file: import * as BaseStories from './Button.stories';
-     *
-     * And use them like: BaseStories.Primary.args
-     *
-     * We need to transform to: BaseStories.Primary.input.args
-     *
-     * Why? Because the imported file will ALSO be transformed to CSF4, where story properties are
-     * accessed via `.input`.
-     */
-    MemberExpression(nodePath) {
-      const node = nodePath.node;
-
-      // We're looking for patterns like: BaseStories.Primary.args
-      // Which is: MemberExpression { object: MemberExpression { object: Identifier, property }, property }
-      //
-      // We want to find the inner MemberExpression (BaseStories.Primary)
-      // and check if its object (BaseStories) is from a story file import.
-
-      // Check if this is a nested member expression (e.g., BaseStories.Primary.args)
-      // We want to transform BaseStories.Primary → BaseStories.Primary.input
-      // So we look for MemberExpression where object is also a MemberExpression
-
-      const innerObject = node.object;
-
-      // Check if the object is a MemberExpression like BaseStories.Primary
-      if (t.isMemberExpression(innerObject)) {
-        const importName = innerObject.object; // BaseStories
-        const storyName = innerObject.property; // Primary
-        const accessedProperty = node.property; // args
-
-        // Verify: importName is an Identifier that's in our storyFileImports set
-        if (
-          t.isIdentifier(importName) &&
-          storyFileImports.has(importName.name) &&
-          t.isIdentifier(storyName)
-        ) {
-          // Skip if already transformed: BaseStories.Primary.input.args
-          // This check prevents infinite loops when the traverser revisits modified nodes
-          if (t.isIdentifier(storyName, { name: 'input' })) {
-            return;
-          }
-
-          // Only process if the accessed property is an Identifier
-          if (!t.isIdentifier(accessedProperty)) {
-            return;
-          }
-
-          // Skip if the current property being accessed is 'input'
-          // This means we're looking at something like: BaseStories.Primary.input
-          // which was already transformed in a previous iteration
-          if (accessedProperty.name === 'input') {
-            return;
-          }
-
-          // Skip if accessing a property in the disallow list
-          if (reuseDisallowList.includes(accessedProperty.name)) {
-            return;
-          }
-
-          // Transform: BaseStories.Primary.args → BaseStories.Primary.input.args
-          // We do this by replacing the inner object (BaseStories.Primary)
-          // with (BaseStories.Primary.input)
-          nodePath.node.object = t.memberExpression(innerObject, t.identifier('input'));
-
-          // Skip traversing into the newly created node to prevent infinite loops
-          nodePath.skip();
-        }
-      }
-
-      // Handle NAMED IMPORTS: import { Primary } from './Button.stories'
-      // Usage: Primary.args → Primary.input.args
-      //
-      // Pattern: MemberExpression { object: Identifier("Primary"), property: Identifier("args") }
-      // Where "Primary" is in our namedStoryImports set (NOT namespace imports)
-      if (t.isIdentifier(innerObject) && namedStoryImports.has(innerObject.name)) {
-        const accessedProperty = node.property;
+    const argsTypes: E.TSType[] = [];
 
-        // Only process if the property is an Identifier
-        if (!t.isIdentifier(accessedProperty)) {
-          return;
-        }
-
-        // Skip if this is already accessing .input
-        if (accessedProperty.name === 'input') {
-          return;
-        }
-
-        // Skip if accessing a property in the disallow list
-        if (reuseDisallowList.includes(accessedProperty.name)) {
-          return;
-        }
-
-        // Transform: Primary.args → Primary.input.args
-        nodePath.replaceWith(
-          t.memberExpression(
-            t.memberExpression(innerObject, t.identifier('input')),
-            accessedProperty
-          )
-        );
-        nodePath.skip();
-        return;
-      }
-
-      // Handle NAMESPACE IMPORTS spread: import * as BaseStories from './Button.stories'
-      // Usage: ...BaseStories.Secondary → ...BaseStories.Secondary.input
-      //
-      // Pattern: SpreadElement containing MemberExpression { object: Identifier("BaseStories"), property: Identifier("Secondary") }
-      if (t.isIdentifier(innerObject) && namespaceStoryImports.has(innerObject.name)) {
-        const storyName = node.property;
+    // Remove type annotations e.g. A<B> in `const Story: A<B> = {};`
+    const typeAnnotation = typeAnnotationOf(decl.id);
+    if (typeAnnotation) {
+      argsTypes.push(...customArgs.read(typeAnnotation));
+      editor.edits.remove(typeAnnotation.start, typeAnnotation.end);
+    }
 
-        // Skip if this is already .input
-        if (t.isIdentifier(storyName, { name: 'input' })) {
-          return;
-        }
+    // Remove type annotations e.g. A<B> in `const Story = {} satisfies A<B>;`
+    let story: E.Expression = decl.init;
+    if (isTypeWrapped(story)) {
+      argsTypes.push(...customArgs.read(story.typeAnnotation));
+      story = story.expression;
+    }
 
-        // Check if parent is a SpreadElement (...BaseStories.Secondary)
-        const parent = nodePath.parent;
-        if (t.isSpreadElement(parent)) {
-          // Transform: ...BaseStories.Secondary → ...BaseStories.Secondary.input
-          nodePath.replaceWith(t.memberExpression(node, t.identifier('input')));
-          nodePath.skip();
-        }
-        // Note: For non-spread namespace access like BaseStories.Primary.args,
-        // it's handled by the nested MemberExpression case above
-      }
-    },
+    if (story.type === 'ObjectExpression' || story.type === 'ArrowFunctionExpression') {
+      storyInits.push({ init: decl.init, story, argsTypes });
+      transformedStoryExports.add(exportName);
+    }
   });
 
   // If no stories were transformed, bail early to avoid having a mixed CSF syntax and therefore a broken indexer.
@@ -442,35 +262,127 @@ export async function storyToCsfFactory(
     return info.source;
   }
 
+  const storyExportNames = new Set(
+    Object.entries(csf._storyExports)
+      .filter(([, decl]) => decl.type !== 'FunctionDeclaration')
+      .map(([name]) => name)
+  );
+
+  const isIdentifierNamed = (node: Node, names: Set<string>): node is E.IdentifierReference =>
+    node.type === 'Identifier' && names.has(node.name);
+  const isAllowedAccess = (property: Node) =>
+    property.type === 'Identifier' &&
+    property.name !== 'input' &&
+    !reuseDisallowList.includes(property.name);
+
+  // For each story, replace any reference of story reuse e.g.
+  // Story.args -> Story.input.args
+  // meta.args -> meta.input.args
+  // BaseStories.Primary.args -> BaseStories.Primary.input.args (cross-file)
+  walk(program, (node, parent) => {
+    if (node.type === 'MemberExpression') {
+      const innerObject = node.object;
+
+      // Cross-file namespace access: BaseStories.Primary.args → BaseStories.Primary.input.args
+      if (
+        innerObject.type === 'MemberExpression' &&
+        isIdentifierNamed(innerObject.object, storyFileImports) &&
+        innerObject.property.type === 'Identifier'
+      ) {
+        if (innerObject.property.name === 'input' || !isAllowedAccess(node.property)) {
+          return;
+        }
+        editor.edits.appendLeft(innerObject.end, '.input');
+        return false;
+      }
+
+      // Named story imports: Primary.args → Primary.input.args
+      if (isIdentifierNamed(innerObject, namedStoryImports)) {
+        if (!isAllowedAccess(node.property)) {
+          return;
+        }
+        editor.edits.appendLeft(innerObject.end, '.input');
+        return false;
+      }
+
+      // Namespace spreads: ...BaseStories.Secondary → ...BaseStories.Secondary.input
+      if (
+        isIdentifierNamed(innerObject, namespaceStoryImports) &&
+        !(node.property.type === 'Identifier' && node.property.name === 'input') &&
+        parent?.type === 'SpreadElement'
+      ) {
+        editor.edits.appendLeft(node.end, '.input');
+        return false;
+      }
+      return;
+    }
+
+    // Same-file story references: Primary.args → Primary.input.args, meta.args → meta.input.args
+    if (node.type !== 'Identifier' || !parent) {
+      return;
+    }
+    const isStoryExport = storyExportNames.has(node.name) && !!scopes.bindingOf(node);
+    if (!isStoryExport && node.name !== metaVariableName) {
+      return;
+    }
+    if (
+      parent.type === 'MemberExpression' &&
+      parent.property.type === 'Identifier' &&
+      (parent.property.name === 'input' || reuseDisallowList.includes(parent.property.name))
+    ) {
+      return;
+    }
+    if (!isExpressionPosition(node, parent, editor.parentOf(parent))) {
+      return;
+    }
+    if (parent.type === 'Property' && parent.shorthand) {
+      editor.edits.overwrite(parent.start, parent.end, `${node.name}: ${node.name}.input`);
+    } else {
+      editor.edits.appendLeft(node.end, '.input');
+    }
+  });
+
   // A custom args type that every story has is written once, on the meta.
   const sharedArgsTypes =
-    storyCallees.length === transformedStoryExports.size
-      ? customArgs.shared(storyCallees.map(({ argsTypes }) => argsTypes))
+    storyInits.length === transformedStoryExports.size
+      ? customArgs.shared(storyInits.map(({ argsTypes }) => argsTypes))
       : [];
 
+  // Wraps `inner` in `before…after`, dropping the type cast of `outer` around it.
+  const wrap = (outer: Node, inner: Node, before: string, after: string) => {
+    if (inner.end < outer.end) {
+      editor.edits.remove(inner.end, outer.end);
+    }
+    editor.edits.appendRight(inner.start, before);
+    editor.edits.appendLeft(inner.end, after);
+  };
+
   // modify meta
-  if (csf._metaPath) {
-    const previewMeta = (input: t.ObjectExpression) =>
-      t.callExpression(
-        t.memberExpression(
-          customArgs.typed(sbConfigImportName, [...metaArgsTypes, ...sharedArgsTypes]),
-          t.identifier('meta')
-        ),
-        [input]
-      );
+  const metaExport = program.body.find(
+    (node): node is E.ExportDefaultDeclaration => node.type === 'ExportDefaultDeclaration'
+  );
+  if (hasMeta && metaExport) {
+    const previewMeta = () =>
+      `${customArgs.typed(sbConfigImportName, [...metaArgsTypes, ...sharedArgsTypes])}.meta(`;
 
-    let declaration = csf._metaPath.node.declaration;
-    if (t.isTSSatisfiesExpression(declaration) || t.isTSAsExpression(declaration)) {
+    let declaration = metaExport.declaration as Node;
+    if (isTypeWrapped(declaration)) {
       metaArgsTypes.push(...customArgs.read(declaration.typeAnnotation));
       declaration = declaration.expression;
     }
 
-    if (t.isObjectExpression(declaration)) {
-      const metaVariable = t.variableDeclaration('const', [
-        t.variableDeclarator(t.identifier(metaVariableName), previewMeta(declaration)),
-      ]);
-      csf._metaPath.replaceWith(metaVariable);
-    } else if (t.isIdentifier(declaration)) {
+    if (declaration.type === 'ObjectExpression') {
+      editor.edits.overwrite(
+        metaExport.start,
+        declaration.start,
+        `const ${metaVariableName} = ${previewMeta()}`
+      );
+      if (declaration.end < metaExport.end) {
+        editor.edits.overwrite(declaration.end, metaExport.end, ');');
+      } else {
+        editor.edits.appendLeft(declaration.end, ');');
+      }
+    } else if (declaration.type === 'Identifier') {
       /**
        * Transform const declared metas:
        *
@@ -480,59 +392,75 @@ export async function storyToCsfFactory(
        *
        * `const meta = preview.meta({ title: 'A' });`
        */
-      const binding = csf._metaPath.scope.getBinding(declaration.name);
-      if (binding && binding.path.isVariableDeclarator()) {
-        const originalName = declaration.name;
-
-        if (t.isIdentifier(binding.path.node.id)) {
-          metaArgsTypes.push(...customArgs.read(binding.path.node.id.typeAnnotation));
+      const binding = scopes.program.bindings.get(declaration.name);
+      if (binding?.node.type === 'VariableDeclarator') {
+        const declarator = binding.node;
+        const typeAnnotation = typeAnnotationOf(declarator.id);
+        if (typeAnnotation) {
+          metaArgsTypes.push(...customArgs.read(typeAnnotation));
+          editor.edits.remove(typeAnnotation.start, typeAnnotation.end);
         }
 
-        // Always rename the meta variable to 'meta'
-        binding.path.node.id = t.identifier(metaVariableName);
-
-        let init = binding.path.node.init;
-        if (t.isTSSatisfiesExpression(init) || t.isTSAsExpression(init)) {
+        let init = declarator.init as Node | null;
+        if (init && isTypeWrapped(init)) {
           metaArgsTypes.push(...customArgs.read(init.typeAnnotation));
           init = init.expression;
         }
-        if (t.isObjectExpression(init)) {
-          binding.path.node.init = previewMeta(init);
+        if (init?.type === 'ObjectExpression') {
+          wrap(declarator.init!, init, previewMeta(), ')');
         }
-
-        // Update all references to the original name
-        csf._metaPath.scope.rename(originalName, metaVariableName);
       }
 
       // Remove the default export, it's not needed anymore
-      csf._metaPath.remove();
+      removeStatements(editor, new Set([metaExport]));
     }
   }
 
-  for (const { callee, argsTypes } of storyCallees) {
-    callee.object = customArgs.typed(metaVariableName, argsTypes, [
+  for (const { init, story, argsTypes } of storyInits) {
+    const callee = `${customArgs.typed(metaVariableName, argsTypes, [
       ...metaArgsTypes,
       ...sharedArgsTypes,
-    ]);
+    ])}.story`;
+    if (story.type === 'ObjectExpression' && story.properties.length === 0) {
+      editor.edits.overwrite(init.start, init.end, `${callee}()`);
+    } else {
+      wrap(init, story, `${callee}(`, ')');
+    }
+  }
+
+  for (const { statement, fn } of functionStories) {
+    const params = fn.params.map((param) => editor.source(param)).join(', ');
+    editor.edits.overwrite(
+      statement.start,
+      fn.body!.start,
+      `export const ${fn.id!.name} = ${metaVariableName}.story(${fn.async ? 'async ' : ''}(${params}) => `
+    );
+    editor.edits.appendLeft(fn.body!.end, ');');
   }
 
   if (previewImport) {
-    // If there is alerady an import, just update the path. This is useful for users
+    if (previewImportNeedsDefault) {
+      setImportSpecifiers(editor, previewImport, previewImport.specifiers, {
+        default: sbConfigImportName,
+      });
+    }
+    // If there is already an import, just update the path. This is useful for users
     // who rerun the codemod to change the preview import to use (or not) subpaths
     if (previewImport.source.value !== previewPath) {
-      previewImport.source = t.stringLiteral(previewPath);
+      editor.edits.overwrite(
+        previewImport.source.start,
+        previewImport.source.end,
+        `${quote}${previewPath}${quote}`
+      );
     }
   } else if (hasMeta) {
-    // If the import doesn't exist, create a new one
-    const configImport = t.importDeclaration(
-      [t.importDefaultSpecifier(t.identifier(sbConfigImportName))],
-      t.stringLiteral(previewPath)
-    );
-    addImportToTop(programNode, configImport);
+    addImportToTop(editor, `import ${sbConfigImportName} from ${quote}${previewPath}${quote};`);
   }
 
-  wrapArgsMocks(csf._ast);
-  removeUnusedTypes(programNode, csf._ast);
+  editor.commit();
+  wrapArgsMocks(editor);
+  editor.commit();
+  removeUnusedTypes(editor);
 
   return printCsf(csf).code;
 }
diff --git a/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.test.ts b/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.test.ts
index 2e79893ec2e8..d45b653500bb 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.test.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.test.ts
@@ -13,7 +13,7 @@ expect.addSnapshotSerializer({
 
 const transform = (source: string) => {
   const csf = loadCsf(source, { makeTitle: () => 'FIXME' }).parse();
-  wrapArgsMocks(csf._ast);
+  wrapArgsMocks(csf._editor);
   return printCsf(csf).code;
 };
 
@@ -143,8 +143,7 @@ describe('wrapArgsMocks', () => {
       `)
     ).toMatchInlineSnapshot(`
       import preview from '#.storybook/preview';
-
-      import { mocked } from "storybook/test";
+      import { mocked } from 'storybook/test';
 
       const sharedPlay = async (context) => {
         const { getUsers } = context.args;
@@ -337,18 +336,17 @@ describe('wrapArgsMocks', () => {
 
     it('adds a new import after the last import', () => {
       expect(transform(story)).toMatchInlineSnapshot(`
-          import preview from '#.storybook/preview';
-
-          import { mocked } from "storybook/test";
+        import preview from '#.storybook/preview';
+        import { mocked } from 'storybook/test';
 
-          const meta = preview.meta({ component: Button });
+        const meta = preview.meta({ component: Button });
 
-          export const A = meta.story({
-            play: async ({ args }) => {
-              mocked(args.onClick).mockClear();
-            },
-          });
-        `);
+        export const A = meta.story({
+          play: async ({ args }) => {
+            mocked(args.onClick).mockClear();
+          },
+        });
+      `);
     });
 
     it('adds a value import next to a type-only one', () => {
diff --git a/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.ts b/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.ts
index a9b96b4948b9..63ac30e0f016 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.ts
@@ -1,7 +1,13 @@
-import { types as t, traverse } from 'storybook/internal/babel';
-import type { NodePath } from 'storybook/internal/babel';
+import {
+  type Binding,
+  type ESTree as E,
+  type ESTreeNode as Node,
+  type SourceEditor,
+  generateUid,
+  walk,
+} from 'storybook/internal/csf-tools';
 
-type Binding = NonNullable<ReturnType<NodePath['scope']['getBinding']>>;
+import { setImportSpecifiers } from '../../automigrate/helpers/source-edits.ts';
 
 const mockMembers = [
   'mock',
@@ -23,189 +29,194 @@ const mockMembers = [
   'mockRejectedValueOnce',
 ];
 
-function keyName(node: t.Node) {
-  if (t.isIdentifier(node)) {
+function keyName(node: Node) {
+  if (node.type === 'Identifier') {
     return node.name;
   }
-  return t.isStringLiteral(node) ? node.value : undefined;
+  return node.type === 'Literal' && typeof node.value === 'string' ? node.value : undefined;
 }
 
-function withoutDefault(node: t.Node) {
-  return t.isAssignmentPattern(node) ? node.left : node;
+function withoutDefault(node: Node) {
+  return node.type === 'AssignmentPattern' ? node.left : node;
 }
 
-function withoutTypeCast(node: t.Node): t.Node {
-  return t.isTSNonNullExpression(node) ||
-    t.isTSAsExpression(node) ||
-    t.isTSSatisfiesExpression(node)
+function withoutTypeCast(node: Node): Node {
+  return node.type === 'TSNonNullExpression' ||
+    node.type === 'TSAsExpression' ||
+    node.type === 'TSSatisfiesExpression'
     ? withoutTypeCast(node.expression)
     : node;
 }
 
-function isRender(path: NodePath<t.Function>) {
-  if (path.isObjectMethod()) {
-    return keyName(path.node.key) === 'render';
+const isTypeCast = (node: Node) =>
+  node.type === 'TSAsExpression' ||
+  node.type === 'TSSatisfiesExpression' ||
+  node.type === 'TSNonNullExpression';
+
+function isRender(editor: SourceEditor, fn: Node) {
+  let value = fn;
+  let owner = editor.parentOf(fn);
+  while (owner && isTypeCast(owner)) {
+    value = owner;
+    owner = editor.parentOf(owner);
   }
-  const owner = path.findParent(
-    (parent) =>
-      !parent.isTSAsExpression() &&
-      !parent.isTSSatisfiesExpression() &&
-      !parent.isTSNonNullExpression()
-  );
-  return !!owner?.isObjectProperty() && keyName(owner.node.key) === 'render';
+  return owner?.type === 'Property' && owner.value === value && keyName(owner.key) === 'render';
 }
 
-function isMember(node: t.Node): node is t.MemberExpression | t.OptionalMemberExpression {
+function isMember(node: Node): node is E.MemberExpression {
   return (
-    (t.isMemberExpression(node) || t.isOptionalMemberExpression(node)) &&
-    (!node.computed || t.isStringLiteral(node.property))
+    node.type === 'MemberExpression' &&
+    (!node.computed ||
+      (node.property.type === 'Literal' && typeof node.property.value === 'string'))
   );
 }
 
 // Wraps mock API access on args in `mocked()`, so `args.onClick.mockClear()` becomes
 // `mocked(args.onClick).mockClear()`. CSF factories type args as the component declares them.
-export function wrapArgsMocks(ast: t.File) {
+// Leaves the edits pending on `editor`.
+export function wrapArgsMocks(editor: SourceEditor) {
+  const { scopes, program } = editor;
   const argsObjects = new Set<Binding>();
   const argValues = new Set<Binding>();
-  const targets: NodePath<t.Expression>[] = [];
+  const targets: Node[] = [];
 
-  const bindingOf = (path: NodePath, node: t.Node | undefined) =>
-    t.isIdentifier(node) ? path.scope.getBinding(node.name) : undefined;
+  const bindingOf = (node: Node | undefined) =>
+    node?.type === 'Identifier' ? scopes.bindingOf(node) : undefined;
 
-  const isBoundIn = (bindings: Set<Binding>, path: NodePath, node: t.Node) => {
-    const binding = bindingOf(path, node);
+  const isBoundIn = (bindings: Set<Binding>, node: Node) => {
+    const binding = bindingOf(node);
     return !!binding && bindings.has(binding);
   };
 
-  const bind = (bindings: Set<Binding>, path: NodePath, node: t.Node | undefined) => {
-    const binding = bindingOf(path, node);
+  const bind = (bindings: Set<Binding>, node: Node | undefined) => {
+    const binding = bindingOf(node);
     if (binding) {
       bindings.add(binding);
     }
   };
 
-  const isArgsObject = (path: NodePath, expression: t.Node) => {
+  const isArgsObject = (expression: Node) => {
     const node = withoutTypeCast(expression);
-    return (
-      isBoundIn(argsObjects, path, node) || (isMember(node) && keyName(node.property) === 'args')
-    );
+    return isBoundIn(argsObjects, node) || (isMember(node) && keyName(node.property) === 'args');
   };
 
-  const addArgs = (path: NodePath, pattern: t.Node) => {
+  const addArgs = (pattern: Node) => {
     const target = withoutDefault(pattern);
-    bind(argsObjects, path, target);
-    if (t.isObjectPattern(target)) {
+    bind(argsObjects, target);
+    if (target.type === 'ObjectPattern') {
       for (const property of target.properties) {
-        if (t.isObjectProperty(property)) {
-          bind(argValues, path, withoutDefault(property.value));
+        if (property.type === 'Property') {
+          bind(argValues, withoutDefault(property.value));
         }
       }
     }
   };
 
-  const addContext = (path: NodePath, pattern: t.Node | undefined) => {
+  const addContext = (pattern: Node | undefined) => {
     const target = pattern && withoutDefault(pattern);
-    if (!t.isObjectPattern(target)) {
+    if (target?.type !== 'ObjectPattern') {
       return;
     }
     for (const property of target.properties) {
-      if (t.isObjectProperty(property) && keyName(property.key) === 'args') {
-        addArgs(path, property.value);
+      if (property.type === 'Property' && keyName(property.key) === 'args') {
+        addArgs(property.value);
       }
     }
   };
 
-  const collectTarget = (path: NodePath<t.MemberExpression | t.OptionalMemberExpression>) => {
-    if (!isMember(path.node) || !mockMembers.includes(keyName(path.node.property) ?? '')) {
+  const collectTarget = (node: E.MemberExpression) => {
+    if (!isMember(node) || !mockMembers.includes(keyName(node.property) ?? '')) {
       return;
     }
-    if (t.isTSAsExpression(path.node.object)) {
+    if (node.object.type === 'TSAsExpression') {
       return;
     }
-    const object = withoutTypeCast(path.node.object);
-    if (
-      isBoundIn(argValues, path, object) ||
-      (isMember(object) && isArgsObject(path, object.object))
-    ) {
-      targets.push(path.get('object'));
+    const object = withoutTypeCast(node.object);
+    if (isBoundIn(argValues, object) || (isMember(object) && isArgsObject(object.object))) {
+      targets.push(node.object);
     }
   };
 
-  traverse(ast, {
-    Function(path) {
-      path.node.params.forEach((param, index) => {
-        if (index === 0 && isRender(path)) {
-          addArgs(path, param);
+  walk(program, (node) => {
+    if (
+      node.type === 'FunctionDeclaration' ||
+      node.type === 'FunctionExpression' ||
+      node.type === 'ArrowFunctionExpression'
+    ) {
+      node.params.forEach((param, index) => {
+        if (index === 0 && isRender(editor, node)) {
+          addArgs(param);
         } else {
-          addContext(path, param);
+          addContext(param);
         }
       });
-    },
-    VariableDeclarator(path) {
-      const { id, init } = path.node;
+    } else if (node.type === 'VariableDeclarator') {
+      const { id, init } = node;
       const value = init && withoutTypeCast(init);
-      if (init && isArgsObject(path, init)) {
-        addArgs(path, id);
-      } else if (value && isMember(value) && isArgsObject(path, value.object)) {
-        bind(argValues, path, id);
+      if (init && isArgsObject(init)) {
+        addArgs(id);
+      } else if (value && isMember(value) && isArgsObject(value.object)) {
+        bind(argValues, id);
       } else {
-        addContext(path, id);
+        addContext(id);
       }
-    },
-    MemberExpression: collectTarget,
-    OptionalMemberExpression: collectTarget,
+    } else if (node.type === 'MemberExpression') {
+      collectTarget(node);
+    }
   });
 
   if (targets.length === 0) {
     return;
   }
-  const programScope = targets[0].scope.getProgramParent();
 
-  const testImports = ast.program.body.filter(
-    (node): node is t.ImportDeclaration =>
-      t.isImportDeclaration(node) &&
+  const testImports = program.body.filter(
+    (node): node is E.ImportDeclaration =>
+      node.type === 'ImportDeclaration' &&
       node.source.value === 'storybook/test' &&
       node.importKind !== 'type'
   );
   const specifiers = testImports.flatMap((node) => node.specifiers);
   const existing = specifiers.find(
-    (specifier) =>
-      t.isImportSpecifier(specifier) &&
+    (specifier): specifier is E.ImportSpecifier =>
+      specifier.type === 'ImportSpecifier' &&
       specifier.importKind !== 'type' &&
       keyName(specifier.imported) === 'mocked'
   );
-  const namespace = specifiers.find((specifier) => t.isImportNamespaceSpecifier(specifier));
+  const namespace = specifiers.find((specifier) => specifier.type === 'ImportNamespaceSpecifier');
 
+  const lookup = (target: Node, name: string) => scopes.scopeOf(target).lookup(name);
   const isUnshadowed = (name: string) =>
-    targets.every((target) => target.scope.getBinding(name) === programScope.getBinding(name));
+    targets.every((target) => lookup(target, name) === scopes.program.bindings.get(name));
 
-  let callee: t.Expression;
+  let callee: string;
   if (existing && isUnshadowed(existing.local.name)) {
-    callee = t.identifier(existing.local.name);
+    callee = existing.local.name;
   } else if (namespace && isUnshadowed(namespace.local.name)) {
-    callee = t.memberExpression(t.identifier(namespace.local.name), t.identifier('mocked'));
+    callee = `${namespace.local.name}.mocked`;
   } else {
-    const name = targets.some((target) => target.scope.getBinding('mocked'))
-      ? programScope.generateUidIdentifier('mocked').name
+    const name = targets.some((target) => lookup(target, 'mocked'))
+      ? generateUid(scopes, 'mocked')
       : 'mocked';
-    callee = t.identifier(name);
-    const specifier = t.importSpecifier(t.identifier(name), t.identifier('mocked'));
+    callee = name;
+    const specifier = name === 'mocked' ? 'mocked' : `mocked as ${name}`;
     const namedImport = testImports.find((node) =>
-      node.specifiers.every((s) => !t.isImportNamespaceSpecifier(s))
+      node.specifiers.every((s) => s.type !== 'ImportNamespaceSpecifier')
     );
     if (namedImport) {
-      namedImport.specifiers.push(specifier);
+      setImportSpecifiers(editor, namedImport, namedImport.specifiers, { named: [specifier] });
     } else {
-      const lastImport = ast.program.body.findLastIndex((node) => t.isImportDeclaration(node));
-      ast.program.body.splice(
-        lastImport + 1,
-        0,
-        t.importDeclaration([specifier], t.stringLiteral('storybook/test'))
-      );
+      const lastImport = program.body.findLast((node) => node.type === 'ImportDeclaration');
+      const declaration = `import { ${specifier} } from ${editor.quote}storybook/test${editor.quote};`;
+      if (lastImport) {
+        editor.edits.appendLeft(lastImport.end, `\n${declaration}`);
+      } else {
+        editor.edits.prepend(`${declaration}\n`);
+      }
     }
   }
 
   for (const target of targets) {
-    target.replaceWith(t.callExpression(t.cloneNode(callee), [target.node]));
+    editor.edits.appendRight(target.start, `${callee}(`);
+    editor.edits.appendLeft(target.end, ')');
   }
 }

From 406b80cd4bbdf3f4c5c8c44ef325ecddea9b5459 Mon Sep 17 00:00:00 2001
From: Easton <easton.shin@marqvision.com>
Date: Tue, 13 Oct 2026 11:52:17 +0900
Subject: [PATCH 056/326] refactor(codemod): port codemods and create-storybook
 to the csf-tools ESTree API

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../upgrade-deprecated-types.test.ts.snap     |   7 +-
 .../transforms/__tests__/csf-2-to-3.test.ts   |  38 +-
 .../__tests__/find-implicit-spies.test.ts     |  18 +-
 code/lib/codemod/src/transforms/csf-2-to-3.ts | 423 +++++++-----------
 .../src/transforms/find-implicit-spies.ts     | 208 ++++-----
 .../transforms/upgrade-deprecated-types.ts    | 199 ++++----
 .../REACT_NATIVE/metroConfig.test.ts          |   6 +-
 .../generators/REACT_NATIVE/metroConfig.ts    | 384 ++++++----------
 8 files changed, 531 insertions(+), 752 deletions(-)

diff --git a/code/lib/codemod/src/transforms/__tests__/__snapshots__/upgrade-deprecated-types.test.ts.snap b/code/lib/codemod/src/transforms/__tests__/__snapshots__/upgrade-deprecated-types.test.ts.snap
index a7744d638370..fe07af36e948 100644
--- a/code/lib/codemod/src/transforms/__tests__/__snapshots__/upgrade-deprecated-types.test.ts.snap
+++ b/code/lib/codemod/src/transforms/__tests__/__snapshots__/upgrade-deprecated-types.test.ts.snap
@@ -2,12 +2,7 @@
 
 exports[`upgrade-deprecated-types > typescript > upgrade imports with conflicting local names 1`] = `
 SyntaxError: This codemod does not support local imports that are called the same as a storybook import.
-Rename this local import and try again.
-> 1 |  import { ComponentMeta as Meta, ComponentStory as StoryFn } from '@storybook/react';
-    |           ^^^^^^^^^^^^^^^^^^^^^
-  2 |  import { Cat } from './Cat';
-  3 |    
-  4 |  const meta = { title: 'Cat', component: Cat } satisfies Meta<typeof Cat>
+Rename this local import and try again. (1:10)
 `;
 
 exports[`upgrade-deprecated-types > typescript > upgrade imports with local names 1`] = `
diff --git a/code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts b/code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts
index ae17188cfc2a..564946f2f3ae 100644
--- a/code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts
+++ b/code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts
@@ -22,6 +22,16 @@ const tsTransform = async (source: string) =>
 
 describe('csf-2-to-3', () => {
   describe('javascript', () => {
+    it('keeps the annotations of a story whose export it cannot rewrite', async () => {
+      const output = await jsTransform(dedent`
+        export default { title: 'Cat' };
+        const Template = (args) => <Cat {...args} />;
+        export const A = Template.bind({}), B = Template.bind({});
+        A.args = { name: 'Fluffy' };
+      `);
+      expect(output).toContain(`A.args = { name: "Fluffy" };`);
+    });
+
     it('should replace non-simple function exports with objects', async () => {
       await expect(
         jsTransform(dedent`
@@ -143,7 +153,6 @@ describe('csf-2-to-3', () => {
       ).resolves.toMatchInlineSnapshot(`
         export default { title: "Cat" };
         const Template = (args) => <Cat {...args} />;
-
         export const A = {
           render: Template,
           args: { isPrimary: false },
@@ -227,6 +236,31 @@ describe('csf-2-to-3', () => {
       `);
     });
 
+    it('keeps a template that is still rendered as a JSX element', async () => {
+      await expect(
+        jsTransform(dedent`
+          export default { title: 'Cat', component: Cat };
+
+          const Template = (args) => <Cat {...args} />;
+
+          export const A = Template.bind({});
+          A.args = { isPrimary: false };
+
+          export const B = () => <Template isPrimary />;
+        `)
+      ).resolves.toMatchInlineSnapshot(`
+        export default { title: "Cat", component: Cat };
+
+        const Template = (args) => <Cat {...args} />;
+
+        export const A = {
+          args: { isPrimary: false },
+        };
+
+        export const B = () => <Template isPrimary />;
+      `);
+    });
+
     it('should ignore no-arg stories without annotations', async () => {
       await expect(
         jsTransform(dedent`
@@ -242,7 +276,6 @@ describe('csf-2-to-3', () => {
 
         export const A = {};
         export const B = () => <Cat name="frisky" />;
-
         export const C = {
           render: () => <Cat name="fluffy" />,
           parameters: { foo: 2 },
@@ -261,7 +294,6 @@ describe('csf-2-to-3', () => {
         `)
       ).resolves.toMatchInlineSnapshot(`
         export default { title: "Cat" };
-
         export const A = {
           render: (args) => <Cat {...args} />,
           parameters: { foo: 2 },
diff --git a/code/lib/codemod/src/transforms/__tests__/find-implicit-spies.test.ts b/code/lib/codemod/src/transforms/__tests__/find-implicit-spies.test.ts
index d3e83091c1a6..d9a5203aa3f4 100644
--- a/code/lib/codemod/src/transforms/__tests__/find-implicit-spies.test.ts
+++ b/code/lib/codemod/src/transforms/__tests__/find-implicit-spies.test.ts
@@ -49,24 +49,10 @@ test('Warn for possible implicit actions', async () => {
   expect(warn.mock.calls).toMatchInlineSnapshot(`
     [
       [
-        "Component.stories.tsx Possible implicit spy found
-       5 | A.play = async ({ args }) => {
-       6 |   await userEvent.click(screen.getByRole("button"));
-    >  7 |   await expect(args.onImplicit).toHaveBeenCalled();
-         |                     ^^^^^^^^^^
-       8 |   await expect(args.onClick).toHaveBeenCalled();
-       9 |   await expect(args.onHover).toHaveBeenCalled();
-      10 |   await expect(args.onBla).toHaveBeenCalled();",
+        "Component.stories.tsx Possible implicit spy found (7:20)",
       ],
       [
-        "Component.stories.tsx Possible implicit spy found
-      15 |   play: async ({ args }) => {
-      16 |     await userEvent.click(screen.getByRole("button"));
-    > 17 |     await expect(args.onImplicit).toHaveBeenCalled();
-         |                       ^^^^^^^^^^
-      18 |     await expect(args.onClick).toHaveBeenCalled();
-      19 |     await expect(args.onHover).toHaveBeenCalled();
-      20 |     await expect(args.onBla).toHaveBeenCalled();",
+        "Component.stories.tsx Possible implicit spy found (17:22)",
       ],
     ]
   `);
diff --git a/code/lib/codemod/src/transforms/csf-2-to-3.ts b/code/lib/codemod/src/transforms/csf-2-to-3.ts
index 4fd671098a5f..8779b6aa14d4 100644
--- a/code/lib/codemod/src/transforms/csf-2-to-3.ts
+++ b/code/lib/codemod/src/transforms/csf-2-to-3.ts
@@ -1,7 +1,12 @@
-import type { BabelFile, NodePath } from 'storybook/internal/babel';
-import { core as babel, types as t } from 'storybook/internal/babel';
-import type { CsfFile } from 'storybook/internal/csf-tools';
-import { loadCsf, printCsf } from 'storybook/internal/csf-tools';
+import {
+  type CsfFile,
+  type ESTree as E,
+  type ESTreeNode as Node,
+  type SourceEditor,
+  loadCsf,
+  printCsf,
+  walk,
+} from 'storybook/internal/csf-tools';
 import { logger } from 'storybook/internal/node-logger';
 
 import type { API, FileInfo } from 'jscodeshift';
@@ -10,19 +15,17 @@ import invariant from 'tiny-invariant';
 
 import { upgradeDeprecatedTypes } from './upgrade-deprecated-types.ts';
 
-const { isIdentifier, isTSTypeAnnotation, isTSTypeReference } = t;
-
 const renameAnnotation = (annotation: string) => {
   return annotation === 'storyName' ? 'name' : annotation;
 };
 
 // `Story.story = { parameters }` is one assignment. The fields inside it are the annotations.
-const annotationProperties = (annotations: Record<string, t.Node>): t.ObjectProperty[] => {
-  const fields = new Map<string, t.Node>();
+const annotationProperties = (editor: SourceEditor, annotations: Record<string, Node>) => {
+  const fields = new Map<string, Node>();
   for (const [annotation, value] of Object.entries(annotations)) {
-    if (annotation === 'story' && t.isObjectExpression(value)) {
+    if (annotation === 'story' && value.type === 'ObjectExpression') {
       for (const prop of value.properties) {
-        if (t.isObjectProperty(prop) && t.isIdentifier(prop.key)) {
+        if (prop.type === 'Property' && prop.key.type === 'Identifier') {
           fields.set(prop.key.name, prop.value);
         }
       }
@@ -30,69 +33,60 @@ const annotationProperties = (annotations: Record<string, t.Node>): t.ObjectProp
     }
     fields.set(annotation, value);
   }
-  return [...fields].map(([annotation, value]) =>
-    t.objectProperty(t.identifier(renameAnnotation(annotation)), value as t.Expression)
+  return [...fields].map(
+    ([annotation, value]) => `${renameAnnotation(annotation)}: ${editor.source(value)}`
   );
 };
 
-const getTemplateBindVariable = (init: t.Expression | undefined) =>
-  t.isCallExpression(init) &&
-  t.isMemberExpression(init.callee) &&
-  t.isIdentifier(init.callee.object) &&
-  t.isIdentifier(init.callee.property) &&
+const getTemplateBindVariable = (init: Node) =>
+  init.type === 'CallExpression' &&
+  init.callee.type === 'MemberExpression' &&
+  init.callee.object.type === 'Identifier' &&
+  init.callee.property.type === 'Identifier' &&
   init.callee.property.name === 'bind' &&
   (init.arguments.length === 0 ||
     (init.arguments.length === 1 &&
-      t.isObjectExpression(init.arguments[0]) &&
+      init.arguments[0].type === 'ObjectExpression' &&
       init.arguments[0].properties.length === 0))
     ? init.callee.object.name
     : null;
 
 // export const A = ...
 // A.parameters = { ... }; <===
-const isStoryAnnotation = (stmt: t.Statement, objectExports: Record<string, any>) =>
-  t.isExpressionStatement(stmt) &&
-  t.isAssignmentExpression(stmt.expression) &&
-  t.isMemberExpression(stmt.expression.left) &&
-  t.isIdentifier(stmt.expression.left.object) &&
-  objectExports[stmt.expression.left.object.name];
-
-const getNewExport = (stmt: t.Statement, objectExports: Record<string, any>) => {
-  if (
-    t.isExportNamedDeclaration(stmt) &&
-    t.isVariableDeclaration(stmt.declaration) &&
-    stmt.declaration.declarations.length === 1
-  ) {
-    const decl = stmt.declaration.declarations[0];
-    if (t.isVariableDeclarator(decl) && t.isIdentifier(decl.id)) {
-      return objectExports[decl.id.name];
-    }
-  }
-  return null;
-};
+const isStoryAnnotation = (stmt: Node, objectExports: Set<string>) =>
+  stmt.type === 'ExpressionStatement' &&
+  stmt.expression.type === 'AssignmentExpression' &&
+  stmt.expression.left.type === 'MemberExpression' &&
+  stmt.expression.left.object.type === 'Identifier' &&
+  objectExports.has(stmt.expression.left.object.name);
+
+const isSingleConstExport = (stmt: Node | undefined) =>
+  stmt?.type === 'ExportNamedDeclaration' &&
+  stmt.declaration?.type === 'VariableDeclaration' &&
+  stmt.declaration.declarations.length === 1;
 
 // Remove render function when it matches the global render function in react
 // export default { component: Cat };
 // export const A = (args) => <Cat {...args} />;
-const isReactGlobalRenderFn = (csf: CsfFile, storyFn: t.Expression) => {
+const isReactGlobalRenderFn = (csf: CsfFile, storyFn: Node | undefined) => {
   if (
     csf._meta?.component &&
-    t.isArrowFunctionExpression(storyFn) &&
+    storyFn?.type === 'ArrowFunctionExpression' &&
     storyFn.params.length === 1 &&
-    t.isJSXElement(storyFn.body)
+    storyFn.body.type === 'JSXElement'
   ) {
     const { openingElement } = storyFn.body;
     if (
       openingElement.selfClosing &&
-      t.isJSXIdentifier(openingElement.name) &&
+      openingElement.name.type === 'JSXIdentifier' &&
       openingElement.attributes.length === 1
     ) {
       const attr = openingElement.attributes[0];
       const param = storyFn.params[0];
       if (
-        t.isJSXSpreadAttribute(attr) &&
-        t.isIdentifier(attr.argument) &&
-        t.isIdentifier(param) &&
+        attr.type === 'JSXSpreadAttribute' &&
+        attr.argument.type === 'Identifier' &&
+        param.type === 'Identifier' &&
         param.name === attr.argument.name &&
         csf._meta.component === openingElement.name.name
       ) {
@@ -104,31 +98,41 @@ const isReactGlobalRenderFn = (csf: CsfFile, storyFn: t.Expression) => {
 };
 
 // A simple CSF story is a no-arg story without any extra annotations (params, args, etc.)
-const isSimpleCSFStory = (init: t.Expression, annotations: t.ObjectProperty[]) =>
-  annotations.length === 0 && t.isArrowFunctionExpression(init) && init.params.length === 0;
-
-function removeUnusedTemplates(csf: CsfFile) {
-  Object.entries(csf._templates).forEach(([template, templateExpression]) => {
-    const references: NodePath[] = [];
-    babel.traverse(csf._ast, {
-      Identifier: (path) => {
-        if (path.node.name === template) {
-          references.push(path as NodePath);
-        }
-      },
+const isSimpleCSFStory = (init: Node, annotations: string[]) =>
+  annotations.length === 0 && init.type === 'ArrowFunctionExpression' && init.params.length === 0;
+
+function removeUnusedTemplates(editor: SourceEditor, templates: string[]) {
+  templates.forEach((template) => {
+    const references: { node: Node; parent: Node | null }[] = [];
+    walk(editor.program, (node, parent) => {
+      if ((node.type === 'Identifier' || node.type === 'JSXIdentifier') && node.name === template) {
+        references.push({ node, parent });
+      }
     });
     // if there is only one reference and this reference is the variable declaration initializing the template
     // then we are sure the template is unused
-    if (references.length === 1) {
-      const reference = references[0];
-      if (
-        reference.parentPath?.isVariableDeclarator() &&
-        reference.parentPath.node.init === templateExpression
-      ) {
-        reference.parentPath.remove();
-      }
+    const [reference] = references;
+    if (
+      references.length !== 1 ||
+      reference.parent?.type !== 'VariableDeclarator' ||
+      reference.parent.id !== reference.node ||
+      !reference.parent.init
+    ) {
+      return;
+    }
+    const declarator = reference.parent;
+    const declaration = editor.parentOf(declarator) as E.VariableDeclaration;
+    const { declarations } = declaration;
+    const index = declarations.indexOf(declarator);
+    if (declarations.length === 1) {
+      editor.edits.remove(declaration.start, declaration.end);
+    } else if (index < declarations.length - 1) {
+      editor.edits.remove(declarator.start, declarations[index + 1].start);
+    } else {
+      editor.edits.remove(declarations[index - 1].end, declarator.end);
     }
   });
+  editor.commit();
 }
 
 export default async function transform(info: FileInfo, api: API, options: { parser?: string }) {
@@ -144,85 +148,61 @@ export default async function transform(info: FileInfo, api: API, options: { par
     return info.source;
   }
 
-  // This allows for showing buildCodeFrameError messages
-  // @ts-expect-error File is not yet exposed, see https://github.com/babel/babel/issues/11350#issuecomment-644118606
+  const editor = csf._editor;
+  const importHelper = new StorybookImportHelper(editor);
 
-  const file: BabelFile = new babel.File(
-    { filename: info.path },
-    { code: info.source, ast: csf._ast }
-  );
-
-  const importHelper = new StorybookImportHelper(file, info);
-
-  const objectExports: Record<string, t.Statement> = {};
+  const objectExports = new Set<string>();
   Object.entries(csf._storyExports).forEach(([key, decl]) => {
-    const annotations = annotationProperties(csf._storyAnnotations[key]);
+    const annotations = annotationProperties(editor, csf._storyAnnotations[key]);
 
-    if (t.isVariableDeclarator(decl as t.Node)) {
-      const { init, id } = decl as any;
-      invariant(init, 'Inital value should be declared');
-      // only replace arrow function expressions && template
-      const template = getTemplateBindVariable(init);
+    if (decl.type !== 'VariableDeclarator') {
+      return;
+    }
+    const { init, id } = decl;
+    invariant(init, 'Inital value should be declared');
+    // only replace arrow function expressions && template
+    const template = getTemplateBindVariable(init);
 
-      if (!t.isArrowFunctionExpression(init) && !template) {
-        return;
-      }
-      // Do change the type of no-arg stories without annotations to StoryFn when applicable
-      // Do change the type of no-arg stories without annotations to StoryFn when applicable
-      if (isSimpleCSFStory(init, annotations)) {
-        objectExports[key] = t.exportNamedDeclaration(
-          t.variableDeclaration('const', [
-            t.variableDeclarator(importHelper.updateTypeTo(id, 'StoryFn'), init),
-          ])
-        );
-        return;
-      }
+    if (init.type !== 'ArrowFunctionExpression' && !template) {
+      return;
+    }
+    const replaceExport = isSingleConstExport(csf._storyStatements[key]);
 
-      const storyFn: t.Expression = template ? t.identifier(template) : init;
-
-      // Remove the render function when we can hoist the template
-      // const Template = (args) => <Cat {...args} />;
-      // export const A = Template.bind({});
-      const renderAnnotation = isReactGlobalRenderFn(
-        csf,
-        template ? csf._templates[template] : storyFn
-      )
-        ? []
-        : [t.objectProperty(t.identifier('render'), storyFn)];
-
-      objectExports[key] = t.exportNamedDeclaration(
-        t.variableDeclaration('const', [
-          t.variableDeclarator(
-            importHelper.updateTypeTo(id, 'StoryObj'),
-            t.objectExpression([...renderAnnotation, ...annotations])
-          ),
-        ])
-      );
+    // Do change the type of no-arg stories without annotations to StoryFn when applicable
+    if (isSimpleCSFStory(init, annotations)) {
+      importHelper.updateTypeTo(id, 'StoryFn', replaceExport);
+      return;
     }
+    importHelper.updateTypeTo(id, 'StoryObj', replaceExport);
+    if (!replaceExport) {
+      return;
+    }
+    objectExports.add(key);
+
+    // Remove the render function when we can hoist the template
+    // const Template = (args) => <Cat {...args} />;
+    // export const A = Template.bind({});
+    const renderAnnotation = isReactGlobalRenderFn(csf, template ? csf._templates[template] : init)
+      ? []
+      : [`render: ${template ?? editor.source(init)}`];
+
+    const properties = [...renderAnnotation, ...annotations];
+    editor.edits.overwrite(
+      init.start,
+      init.end,
+      properties.length === 0 ? '{}' : `{\n${properties.map((it) => `  ${it},\n`).join('')}}`
+    );
   });
 
-  csf._ast.program.body = csf._ast.program.body.reduce((acc: t.Statement[], stmt: t.Statement) => {
-    const statement = stmt;
-    // remove story annotations & template declarations
+  for (const statement of editor.program.body) {
     if (isStoryAnnotation(statement, objectExports)) {
-      return acc;
-    }
-
-    // replace story exports with new object exports
-    const newExport = getNewExport(statement, objectExports);
-    if (newExport) {
-      acc.push(newExport);
-      return acc;
+      editor.edits.remove(statement.start, statement.end);
     }
+  }
+  editor.commit();
 
-    // include unknown statements
-    acc.push(statement);
-    return acc;
-  }, []);
-
-  upgradeDeprecatedTypes(file);
-  importHelper.removeDeprecatedStoryImport();
-  removeUnusedTemplates(csf);
+  upgradeDeprecatedTypes(editor);
+  removeUnusedTemplates(editor, Object.keys(csf._templates));
 
   let output = printCsf(csf).code;
 
@@ -238,155 +218,100 @@ export default async function transform(info: FileInfo, api: API, options: { par
   return output;
 }
 
-class StorybookImportHelper {
-  constructor(file: BabelFile, info: FileInfo) {
-    this.sbImportDeclarations = this.getAllSbImportDeclarations(file);
-  }
-
-  private sbImportDeclarations: NodePath<t.ImportDeclaration>[];
+const storyTypes = [
+  'Story',
+  'StoryFn',
+  'StoryObj',
+  'Meta',
+  'ComponentStory',
+  'ComponentStoryFn',
+  'ComponentStoryObj',
+  'ComponentMeta',
+];
 
-  private getAllSbImportDeclarations = (file: BabelFile) => {
-    const found: NodePath<t.ImportDeclaration>[] = [];
+class StorybookImportHelper {
+  private sbImportDeclarations: E.ImportDeclaration[];
 
-    file.path.traverse({
-      ImportDeclaration: (path) => {
-        const source = path.node.source.value;
+  private addedImports: string[] = [];
 
+  constructor(private editor: SourceEditor) {
+    this.sbImportDeclarations = editor.program.body.filter(
+      (statement): statement is E.ImportDeclaration => {
+        if (statement.type !== 'ImportDeclaration') {
+          return false;
+        }
+        const source = statement.source.value;
         if (source.startsWith('@storybook/csf') || !source.startsWith('@storybook')) {
-          return;
+          return false;
         }
-        const isRendererImport = path.get('specifiers').some((specifier) => {
-          if (specifier.isImportNamespaceSpecifier()) {
-            // throw path.buildCodeFrameError(
-            //   `This codemod does not support namespace imports for a ${path.node.source.value} package.\n` +
-            //     'Replace the namespace import with named imports and try again.'
-            // );
+        return statement.specifiers.some((specifier) => {
+          if (specifier.type === 'ImportNamespaceSpecifier') {
             throw new Error(
-              `This codemod does not support namespace imports for a ${path.node.source.value} package.\n` +
+              `This codemod does not support namespace imports for a ${source} package.\n` +
                 'Replace the namespace import with named imports and try again.'
             );
           }
-
-          if (!specifier.isImportSpecifier()) {
-            return false;
-          }
-          const imported = specifier.get('imported');
-
-          if (Array.isArray(imported)) {
-            return imported.some((importedSpecifier) => {
-              if (!importedSpecifier.isIdentifier()) {
-                return false;
-              }
-              return [
-                'Story',
-                'StoryFn',
-                'StoryObj',
-                'Meta',
-                'ComponentStory',
-                'ComponentStoryFn',
-                'ComponentStoryObj',
-                'ComponentMeta',
-              ].includes(importedSpecifier.node.name);
-            });
-          }
-
-          if (!imported.isIdentifier()) {
-            return false;
-          }
-          return [
-            'Story',
-            'StoryFn',
-            'StoryObj',
-            'Meta',
-            'ComponentStory',
-            'ComponentStoryFn',
-            'ComponentStoryObj',
-            'ComponentMeta',
-          ].includes(imported.node.name);
+          return (
+            specifier.type === 'ImportSpecifier' &&
+            specifier.imported.type === 'Identifier' &&
+            storyTypes.includes(specifier.imported.name)
+          );
         });
-
-        if (isRendererImport) {
-          found.push(path);
-        }
-      },
-    });
-    return found;
-  };
+      }
+    );
+  }
 
   getOrAddImport = (type: string): string | undefined => {
     // prefer type import
     const sbImport =
-      this.sbImportDeclarations.find((path) => path.node.importKind === 'type') ??
+      this.sbImportDeclarations.find((it) => it.importKind === 'type') ??
       this.sbImportDeclarations[0];
 
     if (sbImport == null) {
       return undefined;
     }
 
-    const specifiers = sbImport.get('specifiers');
-    const importSpecifier = specifiers.find((specifier) => {
-      if (!specifier.isImportSpecifier()) {
-        return false;
-      }
-      const imported = specifier.get('imported');
-
-      if (!imported.isIdentifier()) {
-        return false;
-      }
-      return imported.node.name === type;
-    });
+    const importSpecifier = sbImport.specifiers.find(
+      (specifier) =>
+        specifier.type === 'ImportSpecifier' &&
+        specifier.imported.type === 'Identifier' &&
+        specifier.imported.name === type
+    );
 
     if (importSpecifier) {
-      return importSpecifier.node.local.name;
+      return importSpecifier.local.name;
+    }
+    if (!this.addedImports.includes(type)) {
+      this.addedImports.push(type);
+      this.editor.edits.appendLeft(sbImport.specifiers[0].start, `${type}, `);
     }
-    specifiers[0].insertBefore(t.importSpecifier(t.identifier(type), t.identifier(type)));
     return type;
   };
 
-  removeDeprecatedStoryImport = () => {
-    const specifiers = this.sbImportDeclarations.flatMap((it) => it.get('specifiers'));
-    const storyImports = specifiers.filter((specifier) => {
-      if (!specifier.isImportSpecifier()) {
-        return false;
-      }
-      const imported = specifier.get('imported');
-
-      if (!imported.isIdentifier()) {
-        return false;
-      }
-      return imported.node.name === 'Story';
-    });
-    storyImports.forEach((path) => path.remove());
-  };
-
   getAllLocalImports = () => {
-    return this.sbImportDeclarations
-      .flatMap((it) => it.get('specifiers'))
-      .map((it) => it.node.local.name);
+    return [
+      ...this.sbImportDeclarations.flatMap((it) => it.specifiers).map((it) => it.local.name),
+      ...this.addedImports,
+    ];
   };
 
-  updateTypeTo = (id: t.LVal, type: string): t.LVal => {
+  updateTypeTo = (id: E.BindingPattern, type: string, apply: boolean) => {
+    if (id.type !== 'Identifier') {
+      return;
+    }
+    const annotation = (id as { typeAnnotation?: E.TSTypeAnnotation | null }).typeAnnotation
+      ?.typeAnnotation;
     if (
-      isIdentifier(id) &&
-      isTSTypeAnnotation(id.typeAnnotation) &&
-      isTSTypeReference(id.typeAnnotation.typeAnnotation) &&
-      isIdentifier(id.typeAnnotation.typeAnnotation.typeName)
+      annotation?.type === 'TSTypeReference' &&
+      annotation.typeName.type === 'Identifier' &&
+      this.getAllLocalImports().includes(annotation.typeName.name)
     ) {
-      const { name } = id.typeAnnotation.typeAnnotation.typeName;
-      if (this.getAllLocalImports().includes(name)) {
-        const localTypeImport = this.getOrAddImport(type);
-        return {
-          ...id,
-          typeAnnotation: t.tsTypeAnnotation(
-            t.tsTypeReference(
-              t.identifier(localTypeImport ?? ''),
-              id.typeAnnotation.typeAnnotation.typeParameters
-            )
-          ),
-        };
+      const localTypeImport = this.getOrAddImport(type);
+      if (apply) {
+        const { typeName } = annotation;
+        this.editor.edits.overwrite(typeName.start, typeName.end, localTypeImport ?? '');
       }
     }
-    return id;
   };
 }
 
diff --git a/code/lib/codemod/src/transforms/find-implicit-spies.ts b/code/lib/codemod/src/transforms/find-implicit-spies.ts
index c573f460da92..0ca47ae80579 100644
--- a/code/lib/codemod/src/transforms/find-implicit-spies.ts
+++ b/code/lib/codemod/src/transforms/find-implicit-spies.ts
@@ -1,104 +1,77 @@
-import type { BabelFile } from 'storybook/internal/babel';
-import { core as babel, types as t } from 'storybook/internal/babel';
-import { loadCsf } from 'storybook/internal/csf-tools';
+import {
+  type ESTree as E,
+  type ESTreeNode as Node,
+  type SourceEditor,
+  loadCsf,
+  storyShapeError,
+  walk,
+} from 'storybook/internal/csf-tools';
 
 import type { FileInfo } from 'jscodeshift';
 
-function findImplicitSpies(path: babel.NodePath, file: string, keys: string[]) {
-  path.traverse({
-    Identifier: (identifier) => {
-      if (!keys.includes(identifier.node.name) && /^on[A-Z].*/.test(identifier.node.name)) {
-        console.warn(identifier.buildCodeFrameError(`${file} Possible implicit spy found`).message);
-      }
-    },
-  });
-}
-
-function getAnnotationKeys(file: BabelFile, storyName: string, annotationName: string) {
-  const argKeys: string[] = [];
-
-  file.path.traverse({
-    // CSF2 play function Story.args =
-    AssignmentExpression: (path) => {
-      const left = path.get('left');
-
-      if (!left.isMemberExpression()) {
-        return;
-      }
-      const object = left.get('object');
-
-      if (!(object.isIdentifier() && object.node.name === storyName)) {
-        return;
-      }
-
-      const property = left.get('property');
-      const right = path.get('right');
-      if (
-        property.isIdentifier() &&
-        property.node.name === annotationName &&
-        right.isObjectExpression()
-      ) {
-        argKeys.push(
-          ...right.node.properties.flatMap((value) =>
-            t.isObjectProperty(value) && t.isIdentifier(value.key) ? [value.key.name] : []
-          )
-        );
-      }
-    },
-    // CSF3 const Story = {args: () => {} };
-    VariableDeclarator: (path) => {
-      const id = path.get('id');
-      const init = path.get('init');
-
-      if (!(id.isIdentifier() && id.node.name === storyName) || !init.isObjectExpression()) {
-        return;
-      }
-
-      const args = init
-        .get('properties')
-        .flatMap((it) => (it.isObjectProperty() ? [it] : []))
-        .find((it) => {
-          const argKey = it.get('key');
-          return argKey.isIdentifier() && argKey.node.name === annotationName;
-        });
-
-      if (!args) {
-        return;
-      }
-      const argsValue = args.get('value');
-
-      if (!argsValue || !argsValue.isObjectExpression()) {
-        return;
-      }
-      argKeys.push(
-        ...argsValue.node.properties.flatMap((value) =>
-          t.isObjectProperty(value) && t.isIdentifier(value.key) ? [value.key.name] : []
-        )
+function findImplicitSpies(editor: SourceEditor, node: Node, file: string, keys: string[]) {
+  walk(node, (identifier) => {
+    if (
+      identifier.type === 'Identifier' &&
+      !keys.includes(identifier.name) &&
+      /^on[A-Z].*/.test(identifier.name)
+    ) {
+      console.warn(
+        storyShapeError(`${file} Possible implicit spy found`, identifier, editor).message
       );
-    },
+    }
   });
-
-  return argKeys;
 }
 
-const getObjectExpressionKeys = (node: babel.Node | undefined) => {
-  return t.isObjectExpression(node)
+const getObjectExpressionKeys = (node: Node | undefined) => {
+  return node?.type === 'ObjectExpression'
     ? node.properties.flatMap((value) =>
-        t.isObjectProperty(value) && t.isIdentifier(value.key) ? [value.key.name] : []
+        value.type === 'Property' && !value.method && value.key.type === 'Identifier'
+          ? [value.key.name]
+          : []
       )
     : [];
 };
 
-export default async function transform(info: FileInfo) {
-  const csf = loadCsf(info.source, { makeTitle: (title) => title });
-  const fileNode = csf._ast;
-  // @ts-expect-error File is not yet exposed, see https://github.com/babel/babel/issues/11350#issuecomment-644118606
-  const file: BabelFile = new babel.File(
-    { filename: info.path },
-    { code: info.source, ast: fileNode }
+const findProperty = (object: E.ObjectExpression, name: string) =>
+  object.properties.find(
+    (it): it is E.ObjectProperty =>
+      it.type === 'Property' && !it.method && it.key.type === 'Identifier' && it.key.name === name
   );
 
+// CSF2 `Story.annotation = value` and CSF3 `const Story = { annotation: value }`
+function findAnnotations(program: E.Program, storyName: string, annotationName: string) {
+  const values: Node[] = [];
+  walk(program, (node) => {
+    if (
+      node.type === 'AssignmentExpression' &&
+      node.left.type === 'MemberExpression' &&
+      node.left.object.type === 'Identifier' &&
+      node.left.object.name === storyName &&
+      node.left.property.type === 'Identifier' &&
+      node.left.property.name === annotationName
+    ) {
+      values.push(node.right);
+    }
+    if (
+      node.type === 'VariableDeclarator' &&
+      node.id.type === 'Identifier' &&
+      node.id.name === storyName &&
+      node.init?.type === 'ObjectExpression'
+    ) {
+      const property = findProperty(node.init, annotationName);
+      if (property) {
+        values.push(property.value);
+      }
+    }
+  });
+  return values;
+}
+
+export default async function transform(info: FileInfo) {
+  const csf = loadCsf(info.source, { makeTitle: (title) => title });
   csf.parse();
+  const editor = csf._editor;
 
   const metaKeys = [
     ...getObjectExpressionKeys(csf._metaAnnotations.args),
@@ -111,55 +84,36 @@ export default async function transform(info: FileInfo) {
     }
     const allKeys = [
       ...metaKeys,
-      ...getAnnotationKeys(file, name, 'args'),
-      ...getAnnotationKeys(file, name, 'argTypes'),
+      ...findAnnotations(editor.program, name, 'args').flatMap(getObjectExpressionKeys),
+      ...findAnnotations(editor.program, name, 'argTypes').flatMap(getObjectExpressionKeys),
     ];
 
-    file.path.traverse({
+    walk(editor.program, (node) => {
       // CSF2 play function Story.play =
-      AssignmentExpression: (path) => {
-        const left = path.get('left');
-
-        if (!left.isMemberExpression()) {
-          return;
-        }
-        const object = left.get('object');
-
-        if (!(object.isIdentifier() && object.node.name === name)) {
-          return;
-        }
-
-        const property = left.get('property');
-        if (property.isIdentifier() && property.node.name === 'play') {
-          findImplicitSpies(path, info.path, allKeys);
-        }
-      },
-
+      if (
+        node.type === 'AssignmentExpression' &&
+        node.left.type === 'MemberExpression' &&
+        node.left.object.type === 'Identifier' &&
+        node.left.object.name === name &&
+        node.left.property.type === 'Identifier' &&
+        node.left.property.name === 'play'
+      ) {
+        findImplicitSpies(editor, node, info.path, allKeys);
+      }
       // CSF3 play function: const Story = {play: () => {} };
-      VariableDeclarator: (path) => {
-        const id = path.get('id');
-        const init = path.get('init');
-
-        if (!(id.isIdentifier() && id.node.name === name) || !init.isObjectExpression()) {
-          return;
-        }
-
-        const play = init
-          .get('properties')
-          .flatMap((it) => (it.isObjectProperty() ? [it] : []))
-          .find((it) => {
-            const argKey = it.get('key');
-            return argKey.isIdentifier() && argKey.node.name === 'play';
-          });
-
+      if (
+        node.type === 'VariableDeclarator' &&
+        node.id.type === 'Identifier' &&
+        node.id.name === name &&
+        node.init?.type === 'ObjectExpression'
+      ) {
+        const play = findProperty(node.init, 'play');
         if (play) {
-          findImplicitSpies(play, info.path, allKeys);
+          findImplicitSpies(editor, play, info.path, allKeys);
         }
-      },
+      }
     });
   });
-
-  return;
 }
 
 export const parser = 'tsx';
diff --git a/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts b/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts
index 00736b90f39c..4fe013d3f9e9 100644
--- a/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts
+++ b/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts
@@ -1,5 +1,11 @@
-import { type BabelFile, type NodePath, core as babel, types as t } from 'storybook/internal/babel';
-import { loadCsf, printCsf } from 'storybook/internal/csf-tools';
+import {
+  type ESTree as E,
+  type SourceEditor,
+  loadCsf,
+  printCsf,
+  storyShapeError,
+  walk,
+} from 'storybook/internal/csf-tools';
 import { logger } from 'storybook/internal/node-logger';
 
 import type { API, FileInfo } from 'jscodeshift';
@@ -23,14 +29,8 @@ function migrateType(oldType: string) {
 export default async function transform(info: FileInfo, api: API, options: { parser?: string }) {
   // TODO what do I need to with the title?
   const csf = loadCsf(info.source, { makeTitle: (title) => title });
-  const fileNode = csf._ast;
-  // @ts-expect-error File is not yet exposed, see https://github.com/babel/babel/issues/11350#issuecomment-644118606
-  const file: BabelFile = new babel.File(
-    { filename: info.path },
-    { code: info.source, ast: fileNode }
-  );
 
-  upgradeDeprecatedTypes(file);
+  upgradeDeprecatedTypes(csf._editor);
 
   let output = printCsf(csf).code;
 
@@ -48,100 +48,107 @@ export default async function transform(info: FileInfo, api: API, options: { par
 
 export const parser = 'tsx';
 
-export function upgradeDeprecatedTypes(file: BabelFile) {
+const importedName = (specifier: E.ImportDeclarationSpecifier) =>
+  specifier.type === 'ImportSpecifier' && specifier.imported.type === 'Identifier'
+    ? specifier.imported.name
+    : undefined;
+
+/** Rename deprecated Storybook type imports and their references, then commit the edits. */
+export function upgradeDeprecatedTypes(editor: SourceEditor) {
   const importedNamespaces: Set<string> = new Set();
   const typeReferencesToUpdate: Set<string> = new Set();
-  const existingImports: { name: string; isAlias: boolean; path: NodePath }[] = [];
-
-  file.path.traverse({
-    ImportDeclaration: (path) => {
-      existingImports.push(
-        ...path.get('specifiers').map((specifier) => ({
-          name: specifier.node.local.name,
-          isAlias: !(
-            specifier.isImportSpecifier() &&
-            t.isIdentifier(specifier.node.imported) &&
-            specifier.node.local.name === specifier.node.imported.name
-          ),
-          path: specifier,
-        }))
-      );
+  const existingImports: { name: string; isAlias: boolean; node: E.Node }[] = [];
+
+  for (const statement of editor.program.body) {
+    if (statement.type !== 'ImportDeclaration') {
+      continue;
+    }
+    const { specifiers } = statement;
+    existingImports.push(
+      ...specifiers.map((specifier) => ({
+        name: specifier.local.name,
+        isAlias: importedName(specifier) !== specifier.local.name,
+        node: specifier as E.Node,
+      }))
+    );
+
+    if (!statement.source.value.startsWith('@storybook')) {
+      continue;
+    }
+
+    let changed = false;
+    const texts = specifiers.flatMap((specifier) => {
+      const text = editor.source(specifier);
+      if (specifier.type === 'ImportNamespaceSpecifier') {
+        importedNamespaces.add(specifier.local.name);
+      }
+      const imported = importedName(specifier);
+      if (
+        specifier.type !== 'ImportSpecifier' ||
+        !imported ||
+        !deprecatedTypes.includes(imported)
+      ) {
+        return [text];
+      }
+      const isShorthand = imported === specifier.local.name;
+      // we don't have to rewrite type references for aliased imports
+      if (isShorthand) {
+        typeReferencesToUpdate.add(specifier.local.name);
+      }
 
-      const source = path.node.source.value;
+      const newType = migrateType(imported);
+      changed = true;
 
-      if (!source.startsWith('@storybook')) {
-        return;
+      // replace the deprecated import type when the new type isn't yet imported
+      // note that we don't replace the local name of the specifier
+      if (!existingImports.some((it) => it.name === newType)) {
+        existingImports.push({ name: newType, isAlias: false, node: specifier });
+        return [isShorthand ? newType : `${newType} as ${specifier.local.name}`];
+      }
+      // if the existing import has the same local name but is an alias we throw
+      // we could have imported the type with an alias, but seems to much effort
+      const existingImport = existingImports.find((it) => it.name === newType && it.isAlias);
+      if (existingImport) {
+        throw storyShapeError(
+          'This codemod does not support local imports that are called the same as a storybook import.\n' +
+            'Rename this local import and try again.',
+          existingImport.node,
+          editor
+        );
       }
+      // if the type already exists, without being aliased
+      // we can safely remove the deprecated import now
+      return [];
+    });
 
-      path.get('specifiers').forEach((specifier) => {
-        if (specifier.isImportNamespaceSpecifier()) {
-          importedNamespaces.add(specifier.node.local.name);
-        }
-
-        if (!specifier.isImportSpecifier()) {
-          return;
-        }
-        const imported = specifier.get('imported');
-
-        if (!imported.isIdentifier()) {
-          return;
-        }
-
-        // if we find a deprecated import
-
-        // if we find a deprecated import
-        if (deprecatedTypes.includes(imported.node.name)) {
-          // we don't have to rewrite type references for aliased imports
-          if (imported.node.name === specifier.node.local.name) {
-            typeReferencesToUpdate.add(specifier.node.local.name);
-          }
-
-          const newType = migrateType(imported.node.name);
-
-          // replace the deprecated import type when the new type isn't yet imported
-          // note that we don't replace the local name of the specifier
-          if (!existingImports.some((it) => it.name === newType)) {
-            imported.replaceWith(t.identifier(newType));
-            existingImports.push({ name: newType, isAlias: false, path: specifier });
-          } else {
-            // if the existing import has the same local name but is an alias we throw
-            // we could have imported the type with an alias, but seems to much effort
-            const existingImport = existingImports.find((it) => it.name === newType && it.isAlias);
-            if (existingImport) {
-              throw existingImport.path.buildCodeFrameError(
-                'This codemod does not support local imports that are called the same as a storybook import.\n' +
-                  'Rename this local import and try again.'
-              );
-            } else {
-              // if the type already exists, without being aliased
-              // we can safely remove the deprecated import now
-              specifier.remove();
-            }
-          }
-        }
-      });
-    },
-  });
+    if (changed) {
+      editor.edits.overwrite(specifiers[0].start, specifiers.at(-1)!.end, texts.join(', '));
+    }
+  }
 
-  file.path.traverse({
-    TSTypeReference: (path) => {
-      const typeName = path.get('typeName');
-      if (typeName.isIdentifier()) {
-        if (typeReferencesToUpdate.has(typeName.node.name)) {
-          typeName.replaceWith(t.identifier(migrateType(typeName.node.name)));
-        }
-      } else if (typeName.isTSQualifiedName()) {
-        // For example SB.StoryObj
-        const namespace = typeName.get('left');
-        if (namespace.isIdentifier()) {
-          if (importedNamespaces.has(namespace.node.name)) {
-            const right = typeName.get('right');
-            if (deprecatedTypes.includes(right.node.name)) {
-              right.replaceWith(t.identifier(migrateType(right.node.name)));
-            }
-          }
-        }
+  walk(editor.program, (node) => {
+    if (node.type !== 'TSTypeReference') {
+      return;
+    }
+    const { typeName } = node;
+    if (typeName.type === 'Identifier') {
+      if (typeReferencesToUpdate.has(typeName.name)) {
+        editor.edits.overwrite(typeName.start, typeName.end, migrateType(typeName.name));
       }
-    },
+    } else if (
+      // For example SB.StoryObj
+      typeName.type === 'TSQualifiedName' &&
+      typeName.left.type === 'Identifier' &&
+      importedNamespaces.has(typeName.left.name) &&
+      deprecatedTypes.includes(typeName.right.name)
+    ) {
+      editor.edits.overwrite(
+        typeName.right.start,
+        typeName.right.end,
+        migrateType(typeName.right.name)
+      );
+    }
   });
+
+  editor.commit();
 }
diff --git a/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.test.ts b/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.test.ts
index 5d904e53c84b..a06481c010ff 100644
--- a/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.test.ts
+++ b/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.test.ts
@@ -117,6 +117,7 @@ export default async function makeMetroConfig() {
         "- export default async function makeMetroConfig() {
         - 
         + import { withStorybook } from '@storybook/react-native/withStorybook';
+        + 
         + export default withStorybook(async function makeMetroConfig() {
         + 
             return { resolver: {} };
@@ -246,11 +247,12 @@ export default async function makeMetroConfig<T = string>(): Promise<MetroConfig
       expect(await getFormattedDiff(before, transformed.code, filePath)).toMatchInlineSnapshot(`
         "  import type { MetroConfig } from 'metro-config';
           
+        + import { withStorybook } from '@storybook/react-native/withStorybook';
+        + 
+          
           
         - export default async function makeMetroConfig<T = string>(): Promise<MetroConfig> {
         - 
-        + import { withStorybook } from '@storybook/react-native/withStorybook';
-        + 
         + export default withStorybook(async function makeMetroConfig<T = string>(): Promise<MetroConfig> {
         + 
             return {} as MetroConfig;
diff --git a/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.ts b/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.ts
index 8af586c63b0f..ea4e7da9d2e0 100644
--- a/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.ts
+++ b/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.ts
@@ -1,8 +1,15 @@
 import { access, readFile, writeFile } from 'node:fs/promises';
 import path from 'node:path';
 
-import { parser, recast, types as t } from 'storybook/internal/babel';
 import type { JsPackageManager } from 'storybook/internal/common';
+import {
+  type ESTree as E,
+  type ESTreeNode as Node,
+  SourceEditor,
+  isStringLiteral,
+  parseModule,
+  walk,
+} from 'storybook/internal/csf-tools';
 import { logger, prompt } from 'storybook/internal/node-logger';
 
 export const METRO_CONFIG_CANDIDATES = ['metro.config.ts', 'metro.config.js', 'metro.config.cjs'];
@@ -49,113 +56,61 @@ const hasStorybookPackage = (value: string) => {
   return value === 'storybook' || value.startsWith('@storybook/') || value.startsWith('storybook/');
 };
 
-const isAstNode = (value: unknown): value is t.Node => {
-  return !!value && typeof value === 'object' && 'type' in value;
-};
-
-const getRequirePackageFromCallExpression = (callExpression: t.CallExpression) => {
-  if (t.isIdentifier(callExpression.callee, { name: 'require' })) {
-    const [firstArgument] = callExpression.arguments;
-    return t.isStringLiteral(firstArgument) ? firstArgument.value : null;
-  }
-
-  if (
-    t.isMemberExpression(callExpression.callee) &&
-    t.isCallExpression(callExpression.callee.object)
-  ) {
-    const objectCall = callExpression.callee.object;
-    if (!t.isIdentifier(objectCall.callee, { name: 'require' })) {
-      return null;
-    }
-
-    const [firstArgument] = objectCall.arguments;
-    return t.isStringLiteral(firstArgument) ? firstArgument.value : null;
-  }
-
-  return null;
-};
-
-const statementContainsStorybookCall = (statement: t.Statement) => {
-  const visited = new WeakSet<object>();
-  const queue: unknown[] = [statement];
-
-  while (queue.length > 0) {
-    const current = queue.pop();
-    if (!current || typeof current !== 'object') {
-      continue;
-    }
-
-    if (visited.has(current)) {
-      continue;
-    }
-    visited.add(current);
-
-    if (isAstNode(current) && t.isCallExpression(current)) {
-      const packageName = getRequirePackageFromCallExpression(current);
-      if (packageName && hasStorybookPackage(packageName)) {
-        return true;
-      }
-    }
-
-    if (Array.isArray(current)) {
-      queue.push(...current);
-      continue;
-    }
-
-    for (const value of Object.values(current as Record<string, unknown>)) {
-      if (value && (typeof value === 'object' || Array.isArray(value))) {
-        queue.push(value);
-      }
+const isRequireOfStorybook = (node: Node) =>
+  node.type === 'CallExpression' &&
+  node.callee.type === 'Identifier' &&
+  node.callee.name === 'require' &&
+  isStringLiteral(node.arguments[0]) &&
+  hasStorybookPackage(node.arguments[0].value);
+
+const statementContainsStorybookCall = (statement: Node) => {
+  let found = false;
+  walk(statement, (node) => {
+    if (found || isRequireOfStorybook(node)) {
+      found = true;
+      return false;
     }
-  }
-
-  return false;
+  });
+  return found;
 };
 
-const isModuleExportsTarget = (left: t.LVal | t.OptionalMemberExpression) => {
+const isModuleExportsTarget = (left: Node) => {
   return (
-    t.isMemberExpression(left) &&
-    t.isIdentifier(left.object, { name: 'module' }) &&
-    t.isIdentifier(left.property, { name: 'exports' })
+    left.type === 'MemberExpression' &&
+    left.object.type === 'Identifier' &&
+    left.object.name === 'module' &&
+    left.property.type === 'Identifier' &&
+    left.property.name === 'exports'
   );
 };
 
-const isWithStorybookCall = (node: t.Node | null | undefined, withStorybookLocalName: string) => {
-  return t.isCallExpression(node) && t.isIdentifier(node.callee, { name: withStorybookLocalName });
-};
-
-const parseConfig = (source: string) => {
-  return recast.parse(source, {
-    parser: {
-      parse(code: string) {
-        return parser.parse(code, {
-          sourceType: 'unambiguous',
-          plugins: ['jsx', 'typescript', 'decorators-legacy', 'classProperties'],
-        });
-      },
-    },
-  }) as t.File;
+const isWithStorybookCall = (node: Node, withStorybookLocalName: string) => {
+  return (
+    node.type === 'CallExpression' &&
+    node.callee.type === 'Identifier' &&
+    node.callee.name === withStorybookLocalName
+  );
 };
 
-const usesEsmSyntax = (program: t.Program) => {
+const usesEsmSyntax = (program: E.Program) => {
   return program.body.some(
     (node) =>
-      t.isImportDeclaration(node) ||
-      t.isExportDefaultDeclaration(node) ||
-      t.isExportNamedDeclaration(node) ||
-      t.isExportAllDeclaration(node)
+      node.type === 'ImportDeclaration' ||
+      node.type === 'ExportDefaultDeclaration' ||
+      node.type === 'ExportNamedDeclaration' ||
+      node.type === 'ExportAllDeclaration'
   );
 };
 
 export const containsStorybookImport = (source: string) => {
   try {
-    const ast = parseConfig(source);
-    for (const statement of ast.program.body) {
-      if (t.isImportDeclaration(statement) && hasStorybookPackage(statement.source.value)) {
+    const { program } = parseModule(source);
+    for (const statement of program.body) {
+      if (statement.type === 'ImportDeclaration' && hasStorybookPackage(statement.source.value)) {
         return true;
       }
 
-      if (t.isExportNamedDeclaration(statement) && statement.source) {
+      if (statement.type === 'ExportNamedDeclaration' && statement.source) {
         if (hasStorybookPackage(statement.source.value)) {
           return true;
         }
@@ -172,58 +127,55 @@ export const containsStorybookImport = (source: string) => {
   return false;
 };
 
-const hasWithStorybookBinding = (program: t.Program) => {
+const hasWithStorybookBinding = (program: E.Program) => {
   for (const statement of program.body) {
     if (
-      t.isImportDeclaration(statement) &&
+      statement.type === 'ImportDeclaration' &&
       statement.source.value === '@storybook/react-native/withStorybook'
     ) {
       const withStorybookSpecifier = statement.specifiers.find(
         (specifier) =>
-          t.isImportSpecifier(specifier) &&
-          t.isIdentifier(specifier.imported, { name: 'withStorybook' })
+          specifier.type === 'ImportSpecifier' &&
+          specifier.imported.type === 'Identifier' &&
+          specifier.imported.name === 'withStorybook'
       );
-      if (withStorybookSpecifier && t.isImportSpecifier(withStorybookSpecifier)) {
+      if (withStorybookSpecifier) {
         return withStorybookSpecifier.local.name;
       }
     }
 
-    if (!t.isVariableDeclaration(statement)) {
+    if (statement.type !== 'VariableDeclaration') {
       continue;
     }
 
     for (const declaration of statement.declarations) {
-      if (!t.isObjectPattern(declaration.id) || !t.isCallExpression(declaration.init)) {
+      const { id, init } = declaration;
+      if (
+        id.type !== 'ObjectPattern' ||
+        init?.type !== 'CallExpression' ||
+        init.callee.type !== 'Identifier' ||
+        init.callee.name !== 'require'
+      ) {
         continue;
       }
 
-      if (!t.isIdentifier(declaration.init.callee, { name: 'require' })) {
+      const [firstArgument] = init.arguments;
+      if (
+        !isStringLiteral(firstArgument) ||
+        firstArgument.value !== '@storybook/react-native/withStorybook'
+      ) {
         continue;
       }
 
-      const [firstArgument] = declaration.init.arguments;
-      if (!t.isStringLiteral(firstArgument)) {
-        continue;
-      }
-
-      if (firstArgument.value !== '@storybook/react-native/withStorybook') {
-        continue;
-      }
-
-      for (const property of declaration.id.properties) {
-        if (!t.isObjectProperty(property)) {
-          continue;
-        }
-
-        if (!t.isIdentifier(property.key, { name: 'withStorybook' })) {
-          continue;
-        }
-
-        if (!t.isIdentifier(property.value)) {
-          continue;
+      for (const property of id.properties) {
+        if (
+          property.type === 'Property' &&
+          property.key.type === 'Identifier' &&
+          property.key.name === 'withStorybook' &&
+          property.value.type === 'Identifier'
+        ) {
+          return property.value.name;
         }
-
-        return property.value.name;
       }
     }
   }
@@ -231,110 +183,47 @@ const hasWithStorybookBinding = (program: t.Program) => {
   return undefined;
 };
 
-// Returns the index in program.body after any directive-prologue statements
-// (ExpressionStatement nodes whose expression is a StringLiteral, e.g. 'use strict',
-// 'use client') so that injected imports are never inserted before them.
-// Babel normally stores these in program.directives rather than program.body, but
-// we guard defensively for configurations that leave them as body nodes.
-const getBodyInsertionIndex = (program: t.Program): number => {
-  for (let i = 0; i < program.body.length; i++) {
-    const statement = program.body[i];
-    if (t.isExpressionStatement(statement) && t.isStringLiteral(statement.expression)) {
-      continue;
-    }
-    return i;
-  }
-  return program.body.length;
-};
-
-// Babel nodes don't expose comment arrays in their public types; define a minimal
-// shape for the two comment storage formats used by Babel and recast respectively.
-interface ASTComment {
-  start?: number;
-  leading?: boolean;
-}
-
-interface NodeWithComments {
-  /** recast: comment objects with {leading, trailing} boolean flags */
-  comments?: ASTComment[];
-  /** Babel: leading-only comments (no {leading} flag needed) */
-  leadingComments?: ASTComment[];
-}
-
-// Move file-level leading comments (those that start at source position 0) from
-// `fromNode` to `toNode` so that pragmas like // @ts-nocheck, /* eslint-disable */,
-// and // @flow remain the very first content in the printed file even after a new
-// import/require statement is inserted before them.
-// recast stores comments in both node.comments (with {leading, trailing} flags) and
-// node.leadingComments; we update both so the printer sees the change.
-const shiftFileLeadingComments = (fromNode: t.Node, toNode: t.Node) => {
-  const from = fromNode as unknown as NodeWithComments;
-  const to = toNode as unknown as NodeWithComments;
-
-  const isFileLeading = (c: ASTComment) => typeof c.start === 'number' && c.start === 0;
-
-  // recast-style: node.comments[{leading: true, ...}]
-  if (Array.isArray(from.comments)) {
-    const fileLeading = from.comments.filter((c) => c.leading && isFileLeading(c));
-    if (fileLeading.length > 0) {
-      to.comments = [...fileLeading, ...(to.comments ?? [])];
-      from.comments = from.comments.filter((c) => !(c.leading && isFileLeading(c)));
-    }
-  }
-
-  // Babel-style: node.leadingComments[]
-  if (Array.isArray(from.leadingComments)) {
-    const fileLeading = from.leadingComments.filter(isFileLeading);
-    if (fileLeading.length > 0) {
-      to.leadingComments = [...fileLeading, ...(to.leadingComments ?? [])];
-      from.leadingComments = from.leadingComments.filter((c) => !isFileLeading(c));
-    }
+// After directives and a pragma comment at the very start of the file (`// @ts-nocheck`), but above
+// the first statement's other leading comments.
+const getTopInsertionPosition = (editor: SourceEditor) => {
+  const { body } = editor.program;
+  const firstStatement = body.find(
+    (statement) =>
+      !(statement.type === 'ExpressionStatement' && isStringLiteral(statement.expression))
+  );
+  if (!firstStatement) {
+    return undefined;
   }
+  const previousEnd = body[body.indexOf(firstStatement) - 1]?.end ?? 0;
+  const leadingComment = editor.comments.find(
+    (comment) =>
+      comment.start > 0 && comment.start >= previousEnd && comment.end <= firstStatement.start
+  );
+  return leadingComment?.start ?? firstStatement.start;
 };
 
-const injectWithStorybookImport = (program: t.Program, useEsmImport: boolean) => {
-  if (useEsmImport) {
-    const importDeclaration = t.importDeclaration(
-      [t.importSpecifier(t.identifier('withStorybook'), t.identifier('withStorybook'))],
-      t.stringLiteral('@storybook/react-native/withStorybook')
-    );
-    const lastImportIndex = [...program.body]
-      .reverse()
-      .findIndex((statement) => t.isImportDeclaration(statement));
-
-    if (lastImportIndex === -1) {
-      const insertAt = getBodyInsertionIndex(program);
-      const nodeAtInsert = program.body[insertAt];
-      if (nodeAtInsert) {
-        shiftFileLeadingComments(nodeAtInsert, importDeclaration);
-      }
-      program.body.splice(insertAt, 0, importDeclaration);
-      return;
-    }
-
-    const insertAfter = program.body.length - lastImportIndex;
-    program.body.splice(insertAfter, 0, importDeclaration);
+const injectWithStorybookImport = (editor: SourceEditor, useEsmImport: boolean) => {
+  const { body } = editor.program;
+  const lastImport = body.findLast((statement) => statement.type === 'ImportDeclaration');
+  if (useEsmImport && lastImport) {
+    editor.edits.appendLeft(lastImport.end, `\n${WITH_STORYBOOK_IMPORT}`);
     return;
   }
 
-  const requireDeclaration = t.variableDeclaration('const', [
-    t.variableDeclarator(
-      t.objectPattern([
-        t.objectProperty(t.identifier('withStorybook'), t.identifier('withStorybook'), false, true),
-      ]),
-      t.callExpression(t.identifier('require'), [
-        t.stringLiteral('@storybook/react-native/withStorybook'),
-      ])
-    ),
-  ]);
-  const insertAt = getBodyInsertionIndex(program);
-  const nodeAtInsert = program.body[insertAt];
-  if (nodeAtInsert) {
-    shiftFileLeadingComments(nodeAtInsert, requireDeclaration);
+  const statement = useEsmImport ? WITH_STORYBOOK_IMPORT : WITH_STORYBOOK_REQUIRE;
+  const position = getTopInsertionPosition(editor);
+  if (position === undefined) {
+    editor.edits.append(`\n${statement}\n`);
+    return;
   }
-  program.body.splice(insertAt, 0, requireDeclaration);
+  editor.edits.appendRight(position, `${statement}\n\n`);
 };
 
+const WITH_STORYBOOK_IMPORT =
+  "import { withStorybook } from '@storybook/react-native/withStorybook';";
+const WITH_STORYBOOK_REQUIRE =
+  "const { withStorybook } = require('@storybook/react-native/withStorybook');";
+
 export const prependMetroFallbackComment = (source: string) => {
   if (source.includes(METRO_FALLBACK_COMMENT_MARKER)) {
     return source;
@@ -344,14 +233,23 @@ export const prependMetroFallbackComment = (source: string) => {
 };
 
 export const transformMetroConfigSource = (source: string, filePath: string): TransformResult => {
-  const ast = parseConfig(source);
-  const program = ast.program;
+  const editor = new SourceEditor(source);
+  const { program } = editor;
   const withStorybookLocalName = hasWithStorybookBinding(program) ?? 'withStorybook';
   let matchedExport = false;
   let changed = false;
 
+  const wrap = (node: Node) => {
+    editor.edits.appendRight(node.start, `${withStorybookLocalName}(`);
+    editor.edits.appendLeft(node.end, ')');
+    changed = true;
+  };
+
   for (const statement of program.body) {
-    if (t.isExpressionStatement(statement) && t.isAssignmentExpression(statement.expression)) {
+    if (
+      statement.type === 'ExpressionStatement' &&
+      statement.expression.type === 'AssignmentExpression'
+    ) {
       if (!isModuleExportsTarget(statement.expression.left)) {
         continue;
       }
@@ -361,49 +259,37 @@ export const transformMetroConfigSource = (source: string, filePath: string): Tr
         return { action: 'already-configured' };
       }
 
-      statement.expression.right = t.callExpression(t.identifier(withStorybookLocalName), [
-        statement.expression.right as t.Expression,
-      ]);
-      changed = true;
+      wrap(statement.expression.right);
       continue;
     }
 
-    if (!t.isExportDefaultDeclaration(statement)) {
+    if (statement.type !== 'ExportDefaultDeclaration') {
       continue;
     }
 
     matchedExport = true;
+    const { declaration } = statement;
 
-    if (t.isFunctionDeclaration(statement.declaration)) {
-      const functionExpression = t.functionExpression(
-        statement.declaration.id,
-        statement.declaration.params,
-        statement.declaration.body,
-        statement.declaration.generator,
-        statement.declaration.async
-      );
-      // Preserve TypeScript/Flow function metadata when converting declaration -> expression.
-      functionExpression.returnType = statement.declaration.returnType ?? null;
-      functionExpression.typeParameters = statement.declaration.typeParameters ?? null;
-      statement.declaration = t.callExpression(t.identifier(withStorybookLocalName), [
-        functionExpression,
-      ]);
-      changed = true;
+    // A function declaration's source is also a valid function expression.
+    if (declaration.type === 'FunctionDeclaration' && declaration.body) {
+      wrap(declaration);
       continue;
     }
 
-    if (!t.isExpression(statement.declaration)) {
+    if (
+      declaration.type === 'FunctionDeclaration' ||
+      declaration.type === 'ClassDeclaration' ||
+      declaration.type === 'TSInterfaceDeclaration' ||
+      declaration.type === 'TSDeclareFunction'
+    ) {
       return { action: 'unsupported' };
     }
 
-    if (isWithStorybookCall(statement.declaration, withStorybookLocalName)) {
+    if (isWithStorybookCall(declaration, withStorybookLocalName)) {
       return { action: 'already-configured' };
     }
 
-    statement.declaration = t.callExpression(t.identifier(withStorybookLocalName), [
-      statement.declaration,
-    ]);
-    changed = true;
+    wrap(declaration);
   }
 
   if (!matchedExport) {
@@ -416,18 +302,10 @@ export const transformMetroConfigSource = (source: string, filePath: string): Tr
 
   if (!hasWithStorybookBinding(program)) {
     const shouldUseEsmImport = usesEsmSyntax(program) || filePath.endsWith('.mjs');
-    injectWithStorybookImport(program, shouldUseEsmImport);
+    injectWithStorybookImport(editor, shouldUseEsmImport);
   }
 
-  return {
-    action: 'updated',
-    code: recast.print(ast, {
-      quote: 'single',
-      trailingComma: true,
-      tabWidth: 2,
-      wrapColumn: 100,
-    }).code,
-  };
+  return { action: 'updated', code: editor.toString() };
 };
 
 const pathExists = async (value: string) => {

From ba29e6e5345564f9ead3db7e4d185eba5979adb0 Mon Sep 17 00:00:00 2001
From: Easton <easton.shin@marqvision.com>
Date: Tue, 13 Oct 2026 11:52:17 +0900
Subject: [PATCH 057/326] refactor(scripts): edit sandbox configs with the
 csf-tools ESTree API

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 scripts/tasks/sandbox-parts.test.ts |  64 +++++-----
 scripts/tasks/sandbox-parts.ts      | 183 +++++++++++++++-------------
 2 files changed, 133 insertions(+), 114 deletions(-)

diff --git a/scripts/tasks/sandbox-parts.test.ts b/scripts/tasks/sandbox-parts.test.ts
index cef514065c4a..1b54c41dadfd 100644
--- a/scripts/tasks/sandbox-parts.test.ts
+++ b/scripts/tasks/sandbox-parts.test.ts
@@ -4,7 +4,7 @@ import { readFile, writeFile } from 'node:fs/promises';
 import { vol } from 'memfs';
 import { afterEach, beforeEach, expect, it, vi } from 'vitest';
 
-import { babelParse, types as t, traverse } from '../../code/core/src/babel/index.ts';
+import { isStringLiteral, parseModule, walk } from '../../code/core/src/csf-tools/estree/ast.ts';
 import type { PassedOptionValues, TemplateDetails } from '../task.ts';
 import { extendPreview } from './sandbox-parts.ts';
 
@@ -38,34 +38,36 @@ const angularViteTemplate = {
 function mockedModules(source: string) {
   const mocks: { module: string; spy: boolean }[] = [];
 
-  traverse(babelParse(source), {
-    CallExpression({ node }) {
-      const isSbMock =
-        t.isMemberExpression(node.callee) &&
-        t.isIdentifier(node.callee.object, { name: 'sb' }) &&
-        t.isIdentifier(node.callee.property, { name: 'mock' });
-
-      if (!isSbMock) {
-        return;
-      }
-
-      const [target, options] = node.arguments;
-      // `sb.mock('./path')` for local files, `sb.mock(import('pkg'))` for packages.
-      const specifier =
-        t.isCallExpression(target) && t.isImport(target.callee) ? target.arguments[0] : target;
-
-      mocks.push({
-        module: t.isStringLiteral(specifier) ? specifier.value : `<unresolved>`,
-        spy:
-          t.isObjectExpression(options) &&
-          options.properties.some(
-            (property) =>
-              t.isObjectProperty(property) &&
-              t.isIdentifier(property.key, { name: 'spy' }) &&
-              t.isBooleanLiteral(property.value, { value: true })
-          ),
-      });
-    },
+  walk(parseModule(source).program, (node) => {
+    const isSbMock =
+      node.type === 'CallExpression' &&
+      node.callee.type === 'MemberExpression' &&
+      node.callee.object.type === 'Identifier' &&
+      node.callee.object.name === 'sb' &&
+      node.callee.property.type === 'Identifier' &&
+      node.callee.property.name === 'mock';
+
+    if (!isSbMock) {
+      return;
+    }
+
+    const [target, options] = node.arguments;
+    // `sb.mock('./path')` for local files, `sb.mock(import('pkg'))` for packages.
+    const specifier = target?.type === 'ImportExpression' ? target.source : target;
+
+    mocks.push({
+      module: isStringLiteral(specifier) ? specifier.value : `<unresolved>`,
+      spy:
+        options?.type === 'ObjectExpression' &&
+        options.properties.some(
+          (property) =>
+            property.type === 'Property' &&
+            property.key.type === 'Identifier' &&
+            property.key.name === 'spy' &&
+            property.value.type === 'Literal' &&
+            property.value.value === true
+        ),
+    });
   });
 
   return mocks;
@@ -146,9 +148,7 @@ it('wires Compodoc into an Angular Vite preview that opts out of server docgen',
     sb.mock(import('lodash-es/add'));
     sb.mock(import('lodash-es/sum'));
     sb.mock(import('uuid'));
-    export default {
-      tags: [\"vitest\"]
-    };
+    export default { tags: [\"vitest\"] };
     setCompodocJson(docJson);
     "
   `);
diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts
index 4a590c405273..5fd2c467424b 100644
--- a/scripts/tasks/sandbox-parts.ts
+++ b/scripts/tasks/sandbox-parts.ts
@@ -14,11 +14,19 @@ import slash from 'slash';
 import { dedent } from 'ts-dedent';
 
 import { SupportedLanguage } from 'storybook/internal/types';
-import { babelParse, types as t, traverse } from '../../code/core/src/babel/index.ts';
 import { JsPackageManagerFactory } from '../../code/core/src/common/js-package-manager/index.ts';
 import storybookPackages from '../../code/core/src/common/versions.ts';
-import type { ConfigFile } from '../../code/core/src/csf-tools/index.ts';
-import { readConfig as csfReadConfig, writeConfig } from '../../code/core/src/csf-tools/index.ts';
+import {
+  type ConfigFile,
+  type CsfValue,
+  type ESTree as E,
+  type ESTreeNode as Node,
+  readConfig as csfReadConfig,
+  parseExpression,
+  printExpression,
+  walk,
+  writeConfig,
+} from '../../code/core/src/csf-tools/index.ts';
 
 import type { TemplateKey } from '../../code/lib/cli-storybook/src/sandbox-templates.ts';
 import { ProjectTypeService } from '../../code/lib/create-storybook/src/services/ProjectTypeService.ts';
@@ -96,66 +104,71 @@ async function pathExists(path: string) {
   }
 }
 
-const propKey = (p: t.ObjectProperty) => {
-  if (t.isIdentifier(p.key)) {
+const propKey = (p: E.ObjectPropertyKind) => {
+  if (p.type !== 'Property') {
+    return null;
+  }
+
+  if (p.key.type === 'Identifier') {
     return p.key.name;
   }
 
-  if (t.isStringLiteral(p.key)) {
+  if (p.key.type === 'Literal' && typeof p.key.value === 'string') {
     return p.key.value;
   }
 
   return null;
 };
 
-const makeObjectExpression = (path: string[], value: t.Expression): t.Expression => {
-  if (path.length === 0) {
-    return value;
-  }
-
-  const [first, ...rest] = path;
-  return t.objectExpression([
-    t.objectProperty(t.identifier(first), makeObjectExpression(rest, value)),
-  ]);
-};
+const makeObjectSource = (path: string[], value: string) =>
+  path.reduceRight((inner, key) => `{ ${key}: ${inner} }`, value);
 
 const updateObjectExpression = (
+  config: ConfigFile,
   path: string[],
-  expr: t.Expression,
-  existing: t.ObjectExpression
+  value: string,
+  existing: E.ObjectExpression
 ) => {
+  const { edits } = config._editorSource;
   const [first, ...rest] = path;
-  const existingField = (existing.properties as t.ObjectProperty[]).find(
-    (p) => propKey(p) === first
-  ) as t.ObjectProperty;
+  const existingField = existing.properties.find((p) => propKey(p) === first) as
+    | E.ObjectProperty
+    | undefined;
 
   if (!existingField) {
-    existing.properties.push(
-      t.objectProperty(t.identifier(first), makeObjectExpression(rest, expr))
-    );
-  } else if (t.isObjectExpression(existingField.value) && rest.length > 0) {
-    updateObjectExpression(rest, expr, existingField.value);
+    const member = `${first}: ${makeObjectSource(rest, value)}`;
+    const last = existing.properties.at(-1);
+    if (last) {
+      edits.appendLeft(last.end, `, ${member}`);
+    } else {
+      edits.overwrite(existing.start, existing.end, `{ ${member} }`);
+    }
+  } else if (existingField.value.type === 'ObjectExpression' && rest.length > 0) {
+    updateObjectExpression(config, rest, value, existingField.value);
   } else {
-    existingField.value = makeObjectExpression(rest, expr);
+    edits.overwrite(
+      existingField.value.start,
+      existingField.value.end,
+      makeObjectSource(rest, value)
+    );
   }
 };
 
-const findPluginCall = (name: string, ast: t.File): t.CallExpression | undefined => {
-  let call: t.CallExpression | undefined;
-  traverse(ast, {
-    CallExpression: {
-      enter(path) {
-        if (call) {
-          return;
-        }
-
-        const { callee } = path.node;
-        if (t.isIdentifier(callee) && callee.name === name) {
-          call = path.node;
-          path.stop();
-        }
-      },
-    },
+const findPluginCall = (name: string, program: E.Program): E.CallExpression | undefined => {
+  let call: E.CallExpression | undefined;
+  walk(program, (node: Node) => {
+    if (call) {
+      return false;
+    }
+    if (
+      node.type === 'CallExpression' &&
+      node.callee.type === 'Identifier' &&
+      node.callee.name === name
+    ) {
+      call = node;
+      return false;
+    }
+    return undefined;
   });
   return call;
 };
@@ -174,7 +187,7 @@ function setPluginParam(
     paramValue: unknown;
   }
 ) {
-  const call = findPluginCall(pluginName, config._ast);
+  const call = findPluginCall(pluginName, config._program);
   if (!call) {
     throw new Error(`Could not find a call to the "${pluginName}" plugin in this file.`);
   }
@@ -185,23 +198,33 @@ function setPluginParam(
     );
   }
 
+  const valueNode = config.valueToNode(paramValue);
+  if (!valueNode) {
+    throw new Error(`Unexpected value ${JSON.stringify(paramValue)}`);
+  }
+  const value = printExpression(valueNode);
+
   if (paramPos === call.arguments.length) {
-    call.arguments.push(t.objectExpression([]));
+    const lastArgument = call.arguments.at(-1);
+    const argument = makeObjectSource(paramPath, value);
+    if (lastArgument) {
+      config._editorSource.edits.appendLeft(lastArgument.end, `, ${argument}`);
+    } else {
+      config._editorSource.edits.appendLeft(call.end - 1, argument);
+    }
+    config._commit();
+    return;
   }
 
   const param = call.arguments[paramPos];
-  if (!t.isObjectExpression(param)) {
+  if (param.type !== 'ObjectExpression') {
     throw new Error(
       `Expected argument ${paramPos} of "${pluginName}" to be an object, got '${param.type}'.`
     );
   }
 
-  const valueNode = config.valueToNode(paramValue);
-  if (!valueNode) {
-    throw new Error(`Unexpected value ${JSON.stringify(paramValue)}`);
-  }
-
-  updateObjectExpression(paramPath, valueNode, param);
+  updateObjectExpression(config, paramPath, value, param);
+  config._commit();
 }
 
 const logger = console;
@@ -411,11 +434,7 @@ function addEsbuildLoaderToStories(mainConfig: ConfigFile) {
       ],
     },
   })`;
-  mainConfig.set(
-    ['webpackFinal'],
-    // @ts-expect-error (Property 'expression' does not exist on type 'BlockStatement')
-    babelParse(webpackFinalCode).program.body[0].expression
-  );
+  mainConfig.set(['webpackFinal'], parseExpression(webpackFinalCode.trim()));
 }
 
 /*
@@ -450,8 +469,7 @@ function setSandboxViteFinal(mainConfig: ConfigFile, template: TemplateKey) {
     },
     ${temporaryAliasWorkaround}
   })`;
-  // @ts-expect-error (Property 'expression' does not exist on type 'BlockStatement')
-  mainConfig.set(['viteFinal'], babelParse(viteFinalCode).program.body[0].expression);
+  mainConfig.set(['viteFinal'], parseExpression(viteFinalCode.trim()));
 }
 
 // Update the stories field to ensure that no TS files
@@ -914,7 +932,7 @@ export const extendMain: Task['run'] = async ({ template, sandboxDir, key }, { d
   };
 
   Object.entries(configToAdd).forEach(([field, value]) =>
-    mainConfig.set([field], t.valueToNode(value))
+    mainConfig.set([field], value as CsfValue)
   );
 
   const previewHeadCode = `
@@ -941,8 +959,7 @@ export const extendMain: Task['run'] = async ({ template, sandboxDir, key }, { d
         }
       </style>
     \``;
-  // @ts-expect-error (Property 'expression' does not exist on type 'BlockStatement')
-  mainConfig.set(['previewHead'], babelParse(previewHeadCode).program.body[0].expression);
+  mainConfig.set(['previewHead'], parseExpression(previewHeadCode.trim()));
 
   // Simulate Storybook Lite
   if (disableDocs) {
@@ -1005,11 +1022,7 @@ export const extendPreview: Task['run'] = async ({ template, sandboxDir }) => {
     if (mainConfig.getValue(['features', 'docgenServer']) === false) {
       previewConfig.setImport(['setCompodocJson'], '@storybook/addon-docs/angular');
       previewConfig.setImport('docJson', '../documentation.json');
-      previewConfig._ast.program.body.push(
-        t.expressionStatement(
-          t.callExpression(t.identifier('setCompodocJson'), [t.identifier('docJson')])
-        )
-      );
+      previewConfig.setBodyDeclaration('setCompodocJson(docJson);');
     }
   }
 
@@ -1025,7 +1038,7 @@ export const extendPreview: Task['run'] = async ({ template, sandboxDir }) => {
       { namespace: 'templateAnnotations' },
       '../template-stories/core/preview'
     );
-    previewConfig.appendNodeToArray(['addons'], t.identifier('templateAnnotations'));
+    previewConfig.appendNodeToArray(['addons'], parseExpression('templateAnnotations'));
   }
 
   if (template.expected.builder.includes('vite')) {
@@ -1043,20 +1056,26 @@ export const extendPreview: Task['run'] = async ({ template, sandboxDir }) => {
 
   previewConfig.setImport(['sb'], 'storybook/test');
 
-  const mockStatements = babelParse(`
-    sb.mock('../template-stories/core/test/ModuleMocking.utils.ts');
-    sb.mock('../template-stories/core/test/ModuleSpyMocking.utils.ts', { spy: true });
-    sb.mock('../template-stories/core/test/ModuleAutoMocking.utils.ts');
-    sb.mock('../template-stories/core/test/ClearModuleMocksMocking.api.ts', { spy: true });
-    sb.mock(import('lodash-es'));
-    sb.mock(import('lodash-es/add'));
-    sb.mock(import('lodash-es/sum'));
-    sb.mock(import('uuid'));
-  `).program.body;
-
-  const body = previewConfig._ast.program.body;
-  const lastImportIndex = body.findLastIndex((node) => t.isImportDeclaration(node));
-  body.splice(lastImportIndex + 1, 0, ...mockStatements);
+  const mockStatements = [
+    "sb.mock('../template-stories/core/test/ModuleMocking.utils.ts');",
+    "sb.mock('../template-stories/core/test/ModuleSpyMocking.utils.ts', { spy: true });",
+    "sb.mock('../template-stories/core/test/ModuleAutoMocking.utils.ts');",
+    "sb.mock('../template-stories/core/test/ClearModuleMocksMocking.api.ts', { spy: true });",
+    "sb.mock(import('lodash-es'));",
+    "sb.mock(import('lodash-es/add'));",
+    "sb.mock(import('lodash-es/sum'));",
+    "sb.mock(import('uuid'));",
+  ].join('\n');
+
+  const lastImport = previewConfig._program.body.findLast(
+    (node) => node.type === 'ImportDeclaration'
+  );
+  if (lastImport) {
+    previewConfig._editorSource.edits.appendLeft(lastImport.end, `\n${mockStatements}`);
+  } else {
+    previewConfig._editorSource.edits.prepend(`${mockStatements}\n`);
+  }
+  previewConfig._commit();
 
   await writeConfig(previewConfig);
 };

From 3cc9d4f0a9f316c6b758b4df24ddd7d9774d9331 Mon Sep 17 00:00:00 2001
From: Easton <easton.shin@marqvision.com>
Date: Tue, 13 Oct 2026 11:52:23 +0900
Subject: [PATCH 058/326] refactor(core)!: remove Babel and recast from
 storybook core

Drops the storybook/internal/babel entry and the @babel/generator, @babel/parser,
@babel/traverse, @babel/types and recast dependencies, which nothing uses after
the move to the csf-tools ESTree API.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 MIGRATION.md                                  |  14 +
 code/core/build-config.ts                     |   4 -
 code/core/package.json                        |  10 -
 code/core/src/babel/babelParse.ts             |  56 ----
 .../src/babel/expression-resolver.test.ts     | 150 ---------
 code/core/src/babel/expression-resolver.ts    |  60 ----
 code/core/src/babel/index.ts                  |  50 ---
 .../src/babel/vitest-config-helpers.test.ts   | 292 ------------------
 code/core/src/babel/vitest-config-helpers.ts  | 208 -------------
 code/frameworks/angular-vite/package.json     |   1 -
 yarn.lock                                     |   8 +-
 11 files changed, 15 insertions(+), 838 deletions(-)
 delete mode 100644 code/core/src/babel/babelParse.ts
 delete mode 100644 code/core/src/babel/expression-resolver.test.ts
 delete mode 100644 code/core/src/babel/expression-resolver.ts
 delete mode 100644 code/core/src/babel/index.ts
 delete mode 100644 code/core/src/babel/vitest-config-helpers.test.ts
 delete mode 100644 code/core/src/babel/vitest-config-helpers.ts

diff --git a/MIGRATION.md b/MIGRATION.md
index 074af543fa15..7cb7aa7f4843 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -39,6 +39,7 @@
   - [Angular: requires Angular 21 or higher](#angular-requires-angular-21-or-higher)
   - [Next.js: `@storybook/nextjs` is deprecated](#nextjs-storybooknextjs-is-deprecated)
   - [Create React App support removed](#create-react-app-support-removed)
+  - [`storybook/internal/babel` removed; `csf-tools` uses ESTree](#storybookinternalbabel-removed-csf-tools-uses-estree)
   - [`@storybook/angular-vite`: legacy animation modules are no longer auto-converted](#storybookangular-vite-legacy-animation-modules-are-no-longer-auto-converted)
   - [Internal CSF tools use the unified mutation API](#internal-csf-tools-use-the-unified-mutation-api)
   - [Internal WebSocket heartbeat controls removed](#internal-websocket-heartbeat-controls-removed)
@@ -1312,6 +1313,19 @@ The webpack-based `@storybook/nextjs` framework is deprecated and will be remove
 
 Migrate to [`@storybook/nextjs-vite`](https://www.npmjs.com/package/@storybook/nextjs-vite), which builds with Vite instead of webpack. The `nextjs-to-nextjs-vite` automigration does the work for you: run `storybook upgrade` and accept the fix, or run `storybook automigrate nextjs-to-nextjs-vite` directly.
 
+### `storybook/internal/babel` removed; `csf-tools` uses ESTree
+
+Storybook no longer bundles Babel or recast to read and write story and config files. Both are parsed with OXC, and edits are applied to the source text, so code a migration does not touch keeps its formatting.
+
+This only affects tooling that imports Storybook's internal entry points:
+
+- `storybook/internal/babel` is removed. Import Babel from your own `@babel/*` dependencies if you still need it.
+- The nodes exposed by `storybook/internal/csf-tools` are ESTree (OXC) nodes instead of Babel nodes, for example `Literal` instead of `StringLiteral` and `Property` instead of `ObjectProperty`/`ObjectMethod`. `CsfFile._ast` and the `NodePath` fields are removed; use `CsfFile._program` and `CsfFile._editor`.
+- `CsfObject#get` returns an ESTree expression, and `set`/`transform` accept expressions from `get()` or `parseExpression(code)`. Use `printExpression(node)` to read an expression's source.
+- An `experimental_enrichCsf` function receives the new `CsfFile`. Add code with `csf._appendStatement(code)` instead of pushing Babel nodes onto `csf._ast`.
+
+Babel itself is still used where it compiles your code, for example by `@storybook/nextjs` and the webpack Babel compiler addon.
+
 ### Create React App support removed
 
 Storybook 11 no longer publishes `@storybook/preset-create-react-app`, so Storybook setups that render Create React App projects through the CRA preset stop working, and `storybook upgrade` blocks upgrading while `@storybook/preset-create-react-app` is installed.
diff --git a/code/core/build-config.ts b/code/core/build-config.ts
index 82617eb0ee9d..423dd98b3bc5 100644
--- a/code/core/build-config.ts
+++ b/code/core/build-config.ts
@@ -66,10 +66,6 @@ const config: BuildEntries = {
         exportEntries: ['./internal/csf-tools'],
         entryPoint: './src/csf-tools/index.ts',
       },
-      {
-        exportEntries: ['./internal/babel'],
-        entryPoint: './src/babel/index.ts',
-      },
       {
         exportEntries: ['./internal/bin/dispatcher'],
         entryPoint: './src/bin/dispatcher.ts',
diff --git a/code/core/package.json b/code/core/package.json
index 5de700eb624b..157d1cb1484d 100644
--- a/code/core/package.json
+++ b/code/core/package.json
@@ -66,11 +66,6 @@
       "code": "./src/highlight/index.ts",
       "default": "./dist/highlight/index.js"
     },
-    "./internal/babel": {
-      "types": "./dist/babel/index.d.ts",
-      "code": "./src/babel/index.ts",
-      "default": "./dist/babel/index.js"
-    },
     "./internal/bin/dispatcher": "./dist/bin/dispatcher.js",
     "./internal/bin/loader": "./dist/bin/loader.js",
     "./internal/channels": {
@@ -288,7 +283,6 @@
     "open": "^10.2.0",
     "oxc-parser": "^0.127.0",
     "oxc-resolver": "11.21.2",
-    "recast": "^0.23.5",
     "semver": "^7.7.3",
     "use-sync-external-store": "^1.5.0",
     "ws": "^8.21.1"
@@ -296,10 +290,6 @@
   "devDependencies": {
     "@aw-web-design/x-default-browser": "1.4.126",
     "@babel/core": "^7.28.5",
-    "@babel/generator": "^7.28.5",
-    "@babel/parser": "^7.28.5",
-    "@babel/traverse": "^7.28.5",
-    "@babel/types": "^7.28.5",
     "@clack/prompts": "1.0.0-alpha.7",
     "@devtools-ds/object-inspector": "^1.1.2",
     "@discoveryjs/json-ext": "^0.5.3",
diff --git a/code/core/src/babel/babelParse.ts b/code/core/src/babel/babelParse.ts
deleted file mode 100644
index 9ff94d8d55ac..000000000000
--- a/code/core/src/babel/babelParse.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as parser from '@babel/parser';
-import type { ParserOptions } from '@babel/parser';
-import type * as t from '@babel/types';
-import * as recast from 'recast';
-
-function parseWithFlowOrTypescript(source: string, parserOptions: parser.ParserOptions) {
-  const flowCommentPattern = /^\s*\/\/\s*@flow/;
-  const useFlowPlugin = flowCommentPattern.test(source);
-
-  const parserPlugins: parser.ParserOptions['plugins'] = useFlowPlugin ? ['flow'] : ['typescript'];
-
-  // Merge the provided parserOptions with the custom parser plugins
-  const mergedParserOptions = {
-    ...parserOptions,
-    plugins: [...(parserOptions.plugins ?? []), ...parserPlugins],
-  };
-
-  return parser.parse(source, mergedParserOptions);
-}
-
-export const parserOptions: ParserOptions = {
-  sourceType: 'module',
-  // FIXME: we should get this from the project config somehow?
-  plugins: ['jsx', 'decorators-legacy', 'classProperties'],
-  tokens: true,
-};
-
-export const babelParse = (code: string): t.File => {
-  return recast.parse(code, {
-    parser: {
-      parse(source: string) {
-        return parseWithFlowOrTypescript(source, parserOptions);
-      },
-    },
-  });
-};
-
-interface ASTNode {
-  type: string;
-}
-
-export const babelPrint = (ast: ASTNode): string => {
-  return recast.print(ast, {
-    quote: 'single',
-    trailingComma: true,
-    tabWidth: 2,
-    wrapColumn: 80,
-    arrowParensAlways: true,
-    // Recast defaults this to `os.EOL`, which would carriage-return printed snippets on Windows.
-    lineTerminator: '\n',
-  }).code;
-};
-
-export const babelParseExpression = (code: string): parser.ParseResult<t.Expression> => {
-  return parser.parseExpression(code, parserOptions);
-};
diff --git a/code/core/src/babel/expression-resolver.test.ts b/code/core/src/babel/expression-resolver.test.ts
deleted file mode 100644
index ff870880b539..000000000000
--- a/code/core/src/babel/expression-resolver.test.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import * as parser from '@babel/parser';
-
-import { resolveExpression, unwrapTSExpression } from './expression-resolver.ts';
-
-const parse = (code: string) =>
-  parser.parse(code, {
-    sourceType: 'module',
-    plugins: ['typescript'],
-  });
-
-describe('unwrapTSExpression', () => {
-  it('returns non-TS-wrapped expressions unchanged', () => {
-    const ast = parse('42');
-    const numLiteral = (ast.program.body[0] as any).expression;
-    expect(unwrapTSExpression(numLiteral)).toBe(numLiteral);
-  });
-
-  it('unwraps TSAsExpression', () => {
-    const ast = parse('foo as string');
-    const asExpr = (ast.program.body[0] as any).expression;
-    const result = unwrapTSExpression(asExpr);
-    expect(result.type).toBe('Identifier');
-    expect((result as any).name).toBe('foo');
-  });
-
-  it('unwraps TSSatisfiesExpression', () => {
-    const ast = parse('foo satisfies string');
-    const satisfiesExpr = (ast.program.body[0] as any).expression;
-    const result = unwrapTSExpression(satisfiesExpr);
-    expect(result.type).toBe('Identifier');
-    expect((result as any).name).toBe('foo');
-  });
-
-  it('unwraps TSTypeAssertion (<string>foo)', () => {
-    const ast = parser.parse('<string>foo', {
-      sourceType: 'module',
-      plugins: [['typescript', { dts: false }]],
-    });
-    const typeAssertion = (ast.program.body[0] as any).expression;
-    const result = unwrapTSExpression(typeAssertion);
-    expect(result.type).toBe('Identifier');
-    expect((result as any).name).toBe('foo');
-  });
-
-  it('unwraps nested TS wrappers', () => {
-    const ast = parse('(foo as any) satisfies string');
-    const outer = (ast.program.body[0] as any).expression;
-    const result = unwrapTSExpression(outer);
-    expect(result.type).toBe('Identifier');
-    expect((result as any).name).toBe('foo');
-  });
-});
-
-describe('resolveExpression', () => {
-  it('returns null for null/undefined input', () => {
-    const ast = parse('');
-    expect(resolveExpression(null, ast)).toBeNull();
-    expect(resolveExpression(undefined, ast)).toBeNull();
-  });
-
-  it('returns non-Identifier expressions directly', () => {
-    const ast = parse('42');
-    const numLiteral = (ast.program.body[0] as any).expression;
-    expect(resolveExpression(numLiteral, ast)).toBe(numLiteral);
-  });
-
-  it('resolves a bare VariableDeclaration', () => {
-    const ast = parse(`
-      const foo = { a: 1 };
-      export default foo;
-    `);
-    const defaultExport = ast.program.body[1] as any;
-    const result = resolveExpression(defaultExport.declaration, ast);
-    expect(result?.type).toBe('ObjectExpression');
-  });
-
-  it('resolves an exported const (ExportNamedDeclaration)', () => {
-    const ast = parse(`
-      export const config = { a: 1 };
-      export default config;
-    `);
-    const defaultExport = ast.program.body[1] as any;
-    const result = resolveExpression(defaultExport.declaration, ast);
-    expect(result?.type).toBe('ObjectExpression');
-  });
-
-  it('resolves a chain of variable references', () => {
-    const ast = parse(`
-      const inner = { a: 1 };
-      const outer = inner;
-      export default outer;
-    `);
-    const defaultExport = ast.program.body[2] as any;
-    const result = resolveExpression(defaultExport.declaration, ast);
-    expect(result?.type).toBe('ObjectExpression');
-  });
-
-  it('resolves through TSAsExpression', () => {
-    const ast = parse(`
-      const foo = { a: 1 };
-      export default foo as any;
-    `);
-    const defaultExport = ast.program.body[1] as any;
-    const result = resolveExpression(defaultExport.declaration, ast);
-    expect(result?.type).toBe('ObjectExpression');
-  });
-
-  it('resolves through TSSatisfiesExpression', () => {
-    const ast = parse(`
-      const foo = { a: 1 };
-      export default foo satisfies object;
-    `);
-    const defaultExport = ast.program.body[1] as any;
-    const result = resolveExpression(defaultExport.declaration, ast);
-    expect(result?.type).toBe('ObjectExpression');
-  });
-
-  it('returns the Identifier node when variable is not found', () => {
-    const ast = parse(`export default unknown;`);
-    const defaultExport = ast.program.body[0] as any;
-    const result = resolveExpression(defaultExport.declaration, ast);
-    expect(result?.type).toBe('Identifier');
-    expect((result as any).name).toBe('unknown');
-  });
-
-  it('returns the Identifier node when variable has no initializer', () => {
-    const ast = parse(`
-      let foo;
-      export default foo;
-    `);
-    const defaultExport = ast.program.body[1] as any;
-    const result = resolveExpression(defaultExport.declaration, ast);
-    expect(result?.type).toBe('Identifier');
-    expect((result as any).name).toBe('foo');
-  });
-
-  it('returns null when maxDepth is exceeded', () => {
-    // Create a chain longer than maxDepth (default 10)
-    const lines = Array.from({ length: 12 }, (_, i) =>
-      i === 0 ? `const v0 = { a: 1 };` : `const v${i} = v${i - 1};`
-    ).join('\n');
-    const ast = parse(`${lines}\nexport default v11;`);
-    const defaultExport = ast.program.body[ast.program.body.length - 1] as any;
-    const result = resolveExpression(defaultExport.declaration, ast);
-    // Depth exceeded — returns null
-    expect(result).toBeNull();
-  });
-});
diff --git a/code/core/src/babel/expression-resolver.ts b/code/core/src/babel/expression-resolver.ts
deleted file mode 100644
index 3b2ab1d4ca80..000000000000
--- a/code/core/src/babel/expression-resolver.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import type * as t from '@babel/types';
-
-/** Recursively unwraps TypeScript type annotation expressions (as X, satisfies X, <X>expr). */
-export const unwrapTSExpression = (expr: t.Expression | t.Declaration): t.Expression => {
-  if (
-    expr.type === 'TSAsExpression' ||
-    expr.type === 'TSSatisfiesExpression' ||
-    expr.type === 'TSTypeAssertion'
-  ) {
-    return unwrapTSExpression(
-      (expr as t.TSAsExpression | t.TSSatisfiesExpression | t.TSTypeAssertion).expression
-    );
-  }
-  return expr as t.Expression;
-};
-
-/**
- * Resolves an expression through variable references and TypeScript type annotations. Handles:
- * Identifier (variable lookup), TSAsExpression, TSSatisfiesExpression, TSTypeAssertion. Limits
- * recursion depth to prevent infinite loops on circular variable references.
- */
-export const resolveExpression = (
-  expr: t.Expression | t.Declaration | null | undefined,
-  ast: t.File,
-  depth = 0,
-  maxDepth = 10
-): t.Expression | null => {
-  if (!expr || depth > maxDepth) {
-    return null;
-  }
-  const unwrapped = unwrapTSExpression(expr as t.Expression | t.Declaration);
-  if (unwrapped.type !== 'Identifier') {
-    return unwrapped;
-  }
-  const varName = (unwrapped as t.Identifier).name;
-  let declarator: t.VariableDeclarator | undefined;
-  for (const node of ast.program.body) {
-    let declarations: t.VariableDeclarator[] | undefined;
-    if (node.type === 'VariableDeclaration') {
-      declarations = node.declarations;
-    } else if (
-      node.type === 'ExportNamedDeclaration' &&
-      node.declaration?.type === 'VariableDeclaration'
-    ) {
-      declarations = node.declaration.declarations;
-    }
-    if (declarations) {
-      declarator = declarations.find(
-        (d) => d.id.type === 'Identifier' && (d.id as t.Identifier).name === varName
-      );
-      if (declarator) {
-        break;
-      }
-    }
-  }
-  if (!declarator?.init) {
-    return unwrapped;
-  }
-  return resolveExpression(declarator.init, ast, depth + 1, maxDepth);
-};
diff --git a/code/core/src/babel/index.ts b/code/core/src/babel/index.ts
deleted file mode 100644
index 771dcede8ca8..000000000000
--- a/code/core/src/babel/index.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * This entry is to ensure we use a single version of Babel across the codebase. This is to prevent
- * issues with multiple versions of Babel being used in the same project. It also prevents us from
- * bundling babel multiple times in the final bundles.
- */
-import { transformSync } from '@babel/core';
-import * as core from '@babel/core';
-// @ts-expect-error File is not yet exposed, see https://github.com/babel/babel/issues/11350#issuecomment-644118606
-import { File } from '@babel/core';
-import bg from '@babel/generator';
-import * as parser from '@babel/parser';
-import bt from '@babel/traverse';
-import * as types from '@babel/types';
-import * as recast from 'recast';
-
-export * from './babelParse.ts';
-export { unwrapTSExpression, resolveExpression } from './expression-resolver.ts';
-export {
-  isImportedDefineConfigLikeIdentifier,
-  isDefineConfigLike,
-  getConfigObjectFromMergeArg,
-  getEffectiveMergeConfigCall,
-  getTargetConfigObject,
-  canUpdateVitestConfigFile,
-} from './vitest-config-helpers.ts';
-
-// @ts-expect-error (needed due to it's use of `exports.default`)
-const traverse = (bt.default || bt) as typeof bt;
-// @ts-expect-error (needed due to it's use of `exports.default`)
-const generate = (bg.default || bg) as typeof bg;
-
-const BabelFileClass = File as any;
-
-export {
-  // main
-  core,
-  generate,
-  traverse,
-  types,
-  parser,
-  transformSync,
-  BabelFileClass,
-
-  // other
-  recast,
-};
-
-export type { BabelFile, NodePath } from '@babel/core';
-export type { GeneratorOptions } from '@babel/generator';
-export type { Options as RecastOptions } from 'recast';
diff --git a/code/core/src/babel/vitest-config-helpers.test.ts b/code/core/src/babel/vitest-config-helpers.test.ts
deleted file mode 100644
index 5a0a8bcd2d09..000000000000
--- a/code/core/src/babel/vitest-config-helpers.test.ts
+++ /dev/null
@@ -1,292 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { canUpdateVitestConfigFile } from './vitest-config-helpers.ts';
-
-describe('canUpdateVitestConfigFile', () => {
-  it('returns true for plain export default object literal', () => {
-    expect(canUpdateVitestConfigFile('export default { test: { name: "node" } }')).toBe(true);
-  });
-
-  it('returns true for bare export default {}', () => {
-    expect(canUpdateVitestConfigFile('export default {}')).toBe(true);
-  });
-
-  it('returns true for defineConfig({}) pattern', () => {
-    expect(
-      canUpdateVitestConfigFile(
-        `
-        import { defineConfig } from 'vitest/config';
-        export default defineConfig({ test: { environment: 'happy-dom' } });`
-      )
-    ).toBe(true);
-  });
-
-  it('returns true for defineProject({}) pattern', () => {
-    expect(
-      canUpdateVitestConfigFile(
-        `
-        import { defineProject } from 'vitest/config';
-        export default defineProject({ test: { environment: 'happy-dom' } });`
-      )
-    ).toBe(true);
-  });
-
-  it('returns true for defineProject from vitest/config', () => {
-    expect(
-      canUpdateVitestConfigFile(
-        `
-        import { defineProject } from 'vitest/config';
-
-        export default defineProject({
-          test: {
-            name: 'node',
-            environment: 'happy-dom',
-            include: ['**/*.test.ts'],
-          },
-        })
-        `
-      )
-    ).toBe(true);
-  });
-
-  it('returns true for simple mergeConfig({}, {}) pattern', () => {
-    expect(
-      canUpdateVitestConfigFile(
-        `
-        import { mergeConfig } from 'vitest/config';
-        import viteConfig from './vite.config';
-        export default mergeConfig(viteConfig, { test: { name: 'node' } });`
-      )
-    ).toBe(true);
-  });
-
-  it('returns true for defineConfig(mergeConfig(...)) pattern', () => {
-    expect(
-      canUpdateVitestConfigFile(
-        `
-        import { defineConfig, mergeConfig } from 'vitest/config';
-        import viteConfig from './vite.config';
-
-        export default defineConfig(
-          mergeConfig(viteConfig, {
-            test: {
-              name: 'node',
-              environment: 'happy-dom',
-              include: ['**/*.test.ts'],
-            },
-          })
-        )
-        `
-      )
-    ).toBe(true);
-  });
-
-  it('returns true for defineConfig(mergeConfig(...) satisfies ViteUserConfig) pattern', () => {
-    expect(
-      canUpdateVitestConfigFile(
-        `
-        import { defineConfig, mergeConfig } from 'vitest/config';
-        import type { ViteUserConfig } from 'vitest/config';
-        import viteConfig from './vite.config';
-
-        export default defineConfig(
-          mergeConfig(viteConfig, {
-            test: {
-              name: 'node',
-              environment: 'happy-dom',
-              include: ['**/*.test.ts'],
-            },
-          }) satisfies ViteUserConfig
-        )
-        `
-      )
-    ).toBe(true);
-  });
-
-  it('returns true for mergeConfig(...) as ViteUserConfig pattern', () => {
-    expect(
-      canUpdateVitestConfigFile(
-        `
-        import { mergeConfig } from 'vitest/config';
-        import type { ViteUserConfig } from 'vitest/config';
-        import viteConfig from './vite.config';
-
-        export default mergeConfig(viteConfig, {
-          test: {
-            name: 'node',
-            environment: 'happy-dom',
-            include: ['**/*.test.ts'],
-          },
-        }) as ViteUserConfig
-        `
-      )
-    ).toBe(true);
-  });
-
-  it('returns true for mergeConfig with shorthand test property (const test = {...})', () => {
-    expect(
-      canUpdateVitestConfigFile(
-        `
-        import { mergeConfig } from 'vitest/config';
-        import viteConfig from './vite.config';
-
-        const test = {
-          name: 'node',
-          environment: 'happy-dom',
-          include: ['**/*.test.ts'],
-        };
-
-        export default mergeConfig(viteConfig, {
-          test,
-        })
-        `
-      )
-    ).toBe(true);
-  });
-
-  it('returns true for mergeConfig with external vitestConfig variable', () => {
-    expect(
-      canUpdateVitestConfigFile(
-        `
-        import { mergeConfig } from 'vitest/config';
-        import viteConfig from './vite.config';
-
-        const vitestConfig = {
-          test: {
-            name: 'node',
-            environment: 'happy-dom',
-            include: ['**/*.test.ts'],
-          },
-        };
-
-        export default mergeConfig(viteConfig, vitestConfig)
-        `
-      )
-    ).toBe(true);
-  });
-
-  it('returns true for const config = mergeConfig(...); export default config pattern', () => {
-    expect(
-      canUpdateVitestConfigFile(
-        `
-        import { defineConfig, mergeConfig } from 'vitest/config';
-        import viteConfig from './vite.config';
-
-        const config = mergeConfig(
-          viteConfig,
-          defineConfig({
-            test: {
-              name: 'node',
-              environment: 'happy-dom',
-              include: ['**/*.test.ts'],
-            },
-          })
-        );
-
-        export default config
-      `
-      )
-    ).toBe(true);
-  });
-
-  it('returns true for export default config where config = defineConfig({...})', () => {
-    expect(
-      canUpdateVitestConfigFile(
-        `
-        import { defineConfig } from 'vitest/config';
-
-        const config = defineConfig({ test: { name: 'node' } });
-        export default config
-        `
-      )
-    ).toBe(true);
-  });
-
-  it('returns true for defineConfig({}) as UserWorkspaceConfig', () => {
-    expect(
-      canUpdateVitestConfigFile(
-        `
-        import { defineConfig } from 'vitest/config';
-        import type { UserWorkspaceConfig } from 'vitest/config';
-
-        export default defineConfig({ test: {} }) as UserWorkspaceConfig
-        `
-      )
-    ).toBe(true);
-  });
-
-  it('returns true for defineConfig({}) satisfies UserWorkspaceConfig', () => {
-    expect(
-      canUpdateVitestConfigFile(
-        `
-        import { defineConfig } from 'vitest/config';
-        import type { UserWorkspaceConfig } from 'vitest/config';
-
-        export default defineConfig({ test: {} }) satisfies UserWorkspaceConfig
-        `
-      )
-    ).toBe(true);
-  });
-
-  it('returns true for defineConfig aliased to a custom name', () => {
-    expect(
-      canUpdateVitestConfigFile(
-        `
-        import { defineConfig as dc } from 'vitest/config';
-        export default dc({ test: {} })
-        `
-      )
-    ).toBe(true);
-  });
-
-  // ----- Unsupported patterns (should return false) -----
-
-  it('returns false when there is no export default', () => {
-    expect(canUpdateVitestConfigFile('const x = 1;')).toBe(false);
-  });
-
-  it('returns true for arrow function pattern: defineConfig(({ mode }) => ({}))', () => {
-    expect(
-      canUpdateVitestConfigFile(
-        `
-        import { defineConfig } from 'vitest/config';
-        export default defineConfig(({ mode }) => ({
-          test: {
-            globals: mode !== 'production',
-          },
-        }))
-        `
-      )
-    ).toBe(true);
-  });
-
-  it('returns false for callback pattern with dynamic control flow', () => {
-    expect(
-      canUpdateVitestConfigFile(
-        `
-        import { defineConfig } from 'vitest/config';
-        export default defineConfig(({ mode }) => {
-          if (mode === 'production') {
-            return { test: { name: 'prod' } };
-          }
-          return { test: { name: 'dev' } };
-        })
-        `
-      )
-    ).toBe(false);
-  });
-
-  it('returns false for unrecognizable export (string literal)', () => {
-    expect(canUpdateVitestConfigFile("export default 'something'")).toBe(false);
-  });
-
-  it('returns false for syntax errors', () => {
-    expect(canUpdateVitestConfigFile('this is not valid syntax !!!')).toBe(false);
-  });
-
-  it('returns false for export default function declaration', () => {
-    expect(canUpdateVitestConfigFile('export default function config() { return {}; }')).toBe(
-      false
-    );
-  });
-});
diff --git a/code/core/src/babel/vitest-config-helpers.ts b/code/core/src/babel/vitest-config-helpers.ts
deleted file mode 100644
index d131fd419620..000000000000
--- a/code/core/src/babel/vitest-config-helpers.ts
+++ /dev/null
@@ -1,208 +0,0 @@
-/**
- * Shared AST helpers for analyzing and determining whether a Vitest/Vite config file can be
- * auto-updated by Storybook. Extracted from the addon-vitest postinstall logic so the same
- * capability checks are used during `storybook init` (AddonVitestService) and during the actual
- * config update (updateVitestFile).
- */
-import type * as t from '@babel/types';
-
-import { babelParse } from './babelParse.ts';
-import { resolveExpression } from './expression-resolver.ts';
-
-type AST = t.File;
-
-/**
- * Returns true if the identifier `localName` is a local alias for `defineConfig` or `defineProject`
- * imported from either `vitest/config` or `vite`.
- */
-export const isImportedDefineConfigLikeIdentifier = (localName: string, ast: AST): boolean =>
-  ast.program.body.some(
-    (node): boolean =>
-      node.type === 'ImportDeclaration' &&
-      (node.source.value === 'vitest/config' || node.source.value === 'vite') &&
-      node.specifiers.some(
-        (specifier) =>
-          specifier.type === 'ImportSpecifier' &&
-          specifier.local.type === 'Identifier' &&
-          specifier.local.name === localName &&
-          specifier.imported.type === 'Identifier' &&
-          (specifier.imported.name === 'defineConfig' ||
-            specifier.imported.name === 'defineProject')
-      )
-  );
-
-/** Returns true if a CallExpression is a call to defineConfig or defineProject (or an alias). */
-export const isDefineConfigLike = (node: t.CallExpression, ast: AST): boolean =>
-  node.callee.type === 'Identifier' &&
-  (node.callee.name === 'defineConfig' ||
-    node.callee.name === 'defineProject' ||
-    isImportedDefineConfigLikeIdentifier(node.callee.name, ast));
-
-/**
- * Resolves a `mergeConfig` argument to an ObjectExpression when possible. Handles:
- *
- * - Plain object literals: `{ test: {...} }`
- * - Variable references: `const vitestConfig = {...}; mergeConfig(viteConfig, vitestConfig)`
- * - Wrapped calls (e.g. `defineConfig({ ... })`): returns the inner ObjectExpression
- * - TypeScript type annotations: `mergeConfig(...) as ViteUserConfig`
- */
-export const getConfigObjectFromMergeArg = (
-  arg: t.Expression,
-  ast: AST
-): t.ObjectExpression | null => {
-  const resolved = resolveExpression(arg, ast);
-  if (!resolved) {
-    return null;
-  }
-
-  if (resolved.type === 'ObjectExpression') {
-    return resolved;
-  }
-
-  if (resolved.type === 'CallExpression' && resolved.arguments[0]?.type === 'ObjectExpression') {
-    return resolved.arguments[0] as t.ObjectExpression;
-  }
-
-  return null;
-};
-
-/**
- * Extracts the effective `mergeConfig(...)` call from a declaration, unwrapping:
- *
- * - TypeScript type annotations (`as X`, `satisfies X`)
- * - `defineConfig(mergeConfig(...))` outer wrapper
- * - Variable references (`export default config` where `config = mergeConfig(...)`)
- *
- * Returns null when the declaration is not or does not contain a `mergeConfig` call.
- */
-export const getEffectiveMergeConfigCall = (
-  decl: t.Expression | t.Declaration,
-  ast: AST
-): t.CallExpression | null => {
-  const resolved = resolveExpression(decl, ast);
-  if (!resolved || resolved.type !== 'CallExpression') {
-    return null;
-  }
-
-  // Handle defineConfig(mergeConfig(...)) – inner arg may itself be TS-wrapped
-  if (isDefineConfigLike(resolved, ast) && resolved.arguments.length > 0) {
-    const innerArg = resolveExpression(resolved.arguments[0] as t.Expression, ast);
-    if (
-      innerArg?.type === 'CallExpression' &&
-      innerArg.callee.type === 'Identifier' &&
-      innerArg.callee.name === 'mergeConfig'
-    ) {
-      return innerArg;
-    }
-  }
-
-  // Handle mergeConfig(...) directly
-  if (resolved.callee.type === 'Identifier' && resolved.callee.name === 'mergeConfig') {
-    return resolved;
-  }
-
-  return null;
-};
-
-/**
- * Resolves the default export to the actual config ObjectExpression we can merge into. Handles:
- *
- * - `export default { ... }` — plain object
- * - `export default defineConfig({ ... })` — defineConfig with object
- * - `export default defineProject({ ... })` — defineProject with object
- * - `export default config` — variable reference to any of the above
- * - Any of the above wrapped in TypeScript type annotations
- *
- * Returns null when a writable ObjectExpression cannot be located.
- */
-export const getTargetConfigObject = (
-  target: AST,
-  exportDefault: t.ExportDefaultDeclaration
-): t.ObjectExpression | null => {
-  const resolved = resolveExpression(exportDefault.declaration, target);
-  if (!resolved) {
-    return null;
-  }
-  if (resolved.type === 'ObjectExpression') {
-    return resolved;
-  }
-  if (
-    resolved.type === 'CallExpression' &&
-    isDefineConfigLike(resolved, target) &&
-    resolved.arguments[0]?.type === 'ObjectExpression'
-  ) {
-    return resolved.arguments[0] as t.ObjectExpression;
-  }
-
-  if (
-    resolved.type === 'CallExpression' &&
-    isDefineConfigLike(resolved, target) &&
-    (resolved.arguments[0]?.type === 'ArrowFunctionExpression' ||
-      resolved.arguments[0]?.type === 'FunctionExpression')
-  ) {
-    const callbackArg = resolved.arguments[0];
-
-    // Support simple callbacks that directly return an object literal, e.g.
-    // defineConfig(({ mode }) => ({ ... })) or defineConfig(function () { return { ... }; })
-    if (callbackArg.body.type === 'ObjectExpression') {
-      return callbackArg.body;
-    }
-
-    if (callbackArg.body.type === 'BlockStatement') {
-      // Keep this conservative: only support callbacks that are exactly
-      // `{ return { ... } }` with no additional control flow or statements.
-      if (
-        callbackArg.body.body.length === 1 &&
-        callbackArg.body.body[0]?.type === 'ReturnStatement'
-      ) {
-        const returnedExpr = resolveExpression(callbackArg.body.body[0].argument, target);
-        if (returnedExpr?.type === 'ObjectExpression') {
-          return returnedExpr;
-        }
-      }
-    }
-  }
-
-  return null;
-};
-
-/**
- * Returns `true` when a Vitest/Vite config file's default export uses a pattern that
- * `updateConfigFile` (from addon-vitest) can auto-update.
- *
- * Supported patterns:
- *
- * - `export default { test: {...} }`
- * - `export default defineConfig({ ... })` / `defineProject({ ... })`
- * - `export default mergeConfig(viteConfig, { ... })`
- * - `export default mergeConfig(viteConfig, defineConfig({ ... }))`
- * - `export default defineConfig(mergeConfig(...))`
- * - `export default config` (variable referencing any of the above)
- * - Any of the above wrapped in `as X` or `satisfies X` TypeScript annotations
- *
- * Unsupported patterns (returns `false`):
- *
- * - Callback-based defineConfig with non-literal/dynamic returns that cannot be safely resolved
- * - Completely unrecognizable export shapes
- * - No `export default` declaration at all
- */
-export const canUpdateVitestConfigFile = (fileContent: string): boolean => {
-  let parsedAst: AST;
-  try {
-    parsedAst = babelParse(fileContent);
-  } catch {
-    return false;
-  }
-
-  const exportDefault = parsedAst.program.body.find(
-    (n): n is t.ExportDefaultDeclaration => n.type === 'ExportDefaultDeclaration'
-  );
-  if (!exportDefault) {
-    return false;
-  }
-
-  return (
-    getTargetConfigObject(parsedAst, exportDefault) !== null ||
-    getEffectiveMergeConfigCall(exportDefault.declaration, parsedAst) !== null
-  );
-};
diff --git a/code/frameworks/angular-vite/package.json b/code/frameworks/angular-vite/package.json
index edd7df8e6592..63768721db0a 100644
--- a/code/frameworks/angular-vite/package.json
+++ b/code/frameworks/angular-vite/package.json
@@ -81,7 +81,6 @@
     "@angular/forms": "^21.2.14",
     "@angular/platform-browser": "^21.2.14",
     "@angular/platform-browser-dynamic": "^21.2.14",
-    "@babel/types": "^7.28.5",
     "@storybook/angular-cm": "workspace:*",
     "@storybook/angular-compodoc": "workspace:*",
     "@types/node": "^22.19.1",
diff --git a/yarn.lock b/yarn.lock
index e701781d71b7..f08065ec4c95 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10151,7 +10151,6 @@ __metadata:
     "@angular/forms": "npm:^21.2.14"
     "@angular/platform-browser": "npm:^21.2.14"
     "@angular/platform-browser-dynamic": "npm:^21.2.14"
-    "@babel/types": "npm:^7.28.5"
     "@storybook/angular-cm": "workspace:*"
     "@storybook/angular-compodoc": "workspace:*"
     "@storybook/builder-vite": "workspace:*"
@@ -31227,7 +31226,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"recast@npm:^0.23.1, recast@npm:^0.23.11, recast@npm:^0.23.5, recast@npm:^0.23.9":
+"recast@npm:^0.23.1, recast@npm:^0.23.11, recast@npm:^0.23.9":
   version: 0.23.11
   resolution: "recast@npm:0.23.11"
   dependencies:
@@ -33547,10 +33546,6 @@ __metadata:
   dependencies:
     "@aw-web-design/x-default-browser": "npm:1.4.126"
     "@babel/core": "npm:^7.28.5"
-    "@babel/generator": "npm:^7.28.5"
-    "@babel/parser": "npm:^7.28.5"
-    "@babel/traverse": "npm:^7.28.5"
-    "@babel/types": "npm:^7.28.5"
     "@clack/prompts": "npm:1.0.0-alpha.7"
     "@devtools-ds/object-inspector": "npm:^1.1.2"
     "@discoveryjs/json-ext": "npm:^0.5.3"
@@ -33677,7 +33672,6 @@ __metadata:
     react-syntax-highlighter: "npm:^15.4.5"
     react-textarea-autosize: "npm:^8.3.0"
     react-transition-state: "npm:^2.3.1"
-    recast: "npm:^0.23.5"
     require-from-string: "npm:^2.0.2"
     rolldown: "npm:^1.1.4"
     semver: "npm:^7.7.3"

From e8a4ee3ed88106afc7a2bcec66703d8de99cb6e8 Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 09:50:08 +0900
Subject: [PATCH 059/326] fix(csf-tools): try the TS grammar for unnamed code
 and report semantic errors

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/ast.ts | 78 ++++++++++++++++++---------
 1 file changed, 53 insertions(+), 25 deletions(-)

diff --git a/code/core/src/csf-tools/estree/ast.ts b/code/core/src/csf-tools/estree/ast.ts
index 3039ba732a61..e81bfafb0afb 100644
--- a/code/core/src/csf-tools/estree/ast.ts
+++ b/code/core/src/csf-tools/estree/ast.ts
@@ -33,7 +33,9 @@ export class EstreeParseError extends SyntaxError {
   }
 }
 
-const langFor = (fileName = ''): 'js' | 'jsx' | 'ts' | 'tsx' => {
+type Lang = 'js' | 'jsx' | 'ts' | 'tsx';
+
+const langFor = (fileName: string): Lang => {
   if (/\.(c|m)?tsx?$/.test(fileName)) {
     return /x$/.test(fileName) ? 'tsx' : 'ts';
   }
@@ -41,22 +43,60 @@ const langFor = (fileName = ''): 'js' | 'jsx' | 'ts' | 'tsx' => {
   return 'tsx';
 };
 
-export const parseModule = (code: string, fileName?: string): ParsedModule => {
-  const result = parseSync(fileName ?? 'file.tsx', code, {
-    lang: langFor(fileName),
+type ParseAttempt = { module: ParsedModule } | { error: EstreeParseError; offset: number };
+
+const parseWith = (code: string, fileName: string | undefined, lang: Lang): ParseAttempt => {
+  const result = parseSync(fileName ?? `file.${lang}`, code, {
+    lang,
     sourceType: 'module',
     preserveParens: false,
+    // Duplicate declarations and legacy octals are reported like Babel did, instead of parsing
+    // into a program that silently keeps the last declaration.
+    showSemanticErrors: true,
   });
   const error = result.errors.find((diagnostic) => diagnostic.severity === 'Error');
   if (error) {
-    const offset = error.labels?.[0]?.start;
-    throw new EstreeParseError(
-      error.message,
-      fileName,
-      offset === undefined ? undefined : locationOf(code, offset, offset)
-    );
+    const offset = error.labels?.[0]?.start ?? 0;
+    return {
+      error: new EstreeParseError(
+        error.message,
+        fileName,
+        error.labels?.[0] ? locationOf(code, offset, offset) : undefined
+      ),
+      offset,
+    };
   }
-  return { code, program: result.program, comments: result.comments };
+  return { module: { code, program: result.program, comments: result.comments } };
+};
+
+/**
+ * Parse a module. Without a file name there is no grammar to pick: TSX accepts the most, but
+ * rejects generic arrows and `<T>value` assertions that `.ts` allows, so TS is tried next and the
+ * error of the parse that got further is reported.
+ */
+export const parseModule = (code: string, fileName?: string): ParsedModule => {
+  const attempt = fileName ? parseWith(code, fileName, langFor(fileName)) : parseUnnamed(code);
+  if ('module' in attempt) {
+    return attempt.module;
+  }
+  throw FLOW_PRAGMA.test(code)
+    ? new EstreeParseError(
+        `Flow syntax is no longer supported, parse failed with: ${attempt.error.message}`,
+        fileName,
+        undefined
+      )
+    : attempt.error;
+};
+
+const FLOW_PRAGMA = /^\s*(?:\/\/|\/\*)\s*@flow\b/;
+
+const parseUnnamed = (code: string): ParseAttempt => {
+  const tsx = parseWith(code, undefined, 'tsx');
+  if ('module' in tsx) {
+    return tsx;
+  }
+  const ts = parseWith(code, undefined, 'ts');
+  return 'module' in ts || ts.offset > tsx.offset ? ts : tsx;
 };
 
 const lineStartsCache = new Map<string, number[]>();
@@ -240,20 +280,8 @@ export const textOf = (node: Node): string | undefined => {
   return code === undefined ? undefined : code.slice(span.start, span.end);
 };
 
-/** Parse an expression from source; it and every node inside it print as the text they came from. */
-// A fragment has no file name to pick its grammar. TSX accepts the most, but rejects generic
-// arrows and `<T>value` assertions that a `.ts` file allows.
-export const parseFragment = (code: string): ParsedModule => {
-  try {
-    return parseModule(code);
-  } catch (error) {
-    try {
-      return parseModule(code, 'fragment.ts');
-    } catch {
-      throw error;
-    }
-  }
-};
+/** Parse an expression fragment, which has no file name to pick its grammar. */
+export const parseFragment = (code: string): ParsedModule => parseModule(code);
 
 export const expressionFromSource = (code: string): E.Expression => {
   const wrapped = `(${code}\n)`;

From ee058a15ccd031ddb218962c9d2083c0ddbf2d3c Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 09:50:08 +0900
Subject: [PATCH 060/326] fix(csf-tools): keep multi-line values, parentheses,
 comments and CRLF intact when editing

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../vitest/src/angular-vitest-postinstall.ts  |   2 +-
 code/addons/vitest/src/updateVitestFile.ts    |  10 +-
 code/core/src/cli/eslintPlugin.ts             |   2 +-
 code/core/src/csf-tools/ConfigFile.ts         |   9 +-
 code/core/src/csf-tools/estree/editor.test.ts | 180 ++++++++++++++++++
 code/core/src/csf-tools/estree/editor.ts      | 174 ++++++++++++++---
 6 files changed, 342 insertions(+), 35 deletions(-)
 create mode 100644 code/core/src/csf-tools/estree/editor.test.ts

diff --git a/code/addons/vitest/src/angular-vitest-postinstall.ts b/code/addons/vitest/src/angular-vitest-postinstall.ts
index c9f1dce63189..d3deec7e6ffd 100644
--- a/code/addons/vitest/src/angular-vitest-postinstall.ts
+++ b/code/addons/vitest/src/angular-vitest-postinstall.ts
@@ -100,7 +100,7 @@ export function injectAngularVitestIntoEditor(editor: SourceEditor): boolean {
   if (!pluginsArray.elements.some((element) => isCallTo(element, bridge))) {
     prependToList(
       editor,
-      arrayList(pluginsArray),
+      arrayList(editor, pluginsArray),
       [
         `// Forwards Angular build options (styles, assets, zoneless, …) into standalone vitest runs\n${ANGULAR_VITEST_PLUGIN_CALL}({})`,
       ],
diff --git a/code/addons/vitest/src/updateVitestFile.ts b/code/addons/vitest/src/updateVitestFile.ts
index 2579f7524e0e..3c71e38a1b47 100644
--- a/code/addons/vitest/src/updateVitestFile.ts
+++ b/code/addons/vitest/src/updateVitestFile.ts
@@ -64,7 +64,9 @@ const memberTexts = (editor: SourceEditor, object: E.ObjectExpression, members:
   members.map((member) => itemText(editor, objectList(object), member));
 
 const elementTexts = (editor: SourceEditor, array: E.ArrayExpression) =>
-  arrayList(array).items.map((element) => itemText(editor, arrayList(array), element));
+  arrayList(editor, array).items.map((element) =>
+    itemText(editor, arrayList(editor, array), element)
+  );
 
 const indent = (text: string, prefix: string) => prefix + text.replaceAll('\n', `\n${prefix}`);
 
@@ -111,7 +113,7 @@ const mergeProperties = (
     if (sourceValue.type === 'ObjectExpression' && targetValue.type === 'ObjectExpression') {
       mergeProperties({ source, target }, sourceValue, targetValue);
     } else if (sourceValue.type === 'ArrayExpression' && targetValue.type === 'ArrayExpression') {
-      appendItems(target, arrayList(targetValue), elementTexts(source, sourceValue), '');
+      appendItems(target, arrayList(target, targetValue), elementTexts(source, sourceValue), '');
     } else if (targetProp.shorthand) {
       target.edits.overwrite(
         targetProp.start,
@@ -141,7 +143,7 @@ const appendToExistingProjects = (
     if (templateProjects) {
       appendItems(
         merge.target,
-        arrayList(existingProjects),
+        arrayList(merge.target, existingProjects),
         elementTexts(merge.source, templateProjects.value),
         ''
       );
@@ -225,7 +227,7 @@ const wrapTestConfigAsProject = (
     .join('');
   const project = `{\n  extends: true,\n  test: {${projectTest}${projectTest ? '\n  ' : ''}},\n}`;
 
-  prependToList(source, arrayList(templateProjects.value), [project], '');
+  prependToList(source, arrayList(source, templateProjects.value), [project], '');
   if (hoisted.length > 0) {
     prependToList(source, objectList(templateTestObject), memberTexts(target, testObject, hoisted));
   }
diff --git a/code/core/src/cli/eslintPlugin.ts b/code/core/src/cli/eslintPlugin.ts
index d22e47b7d679..72edb80d1002 100644
--- a/code/core/src/cli/eslintPlugin.ts
+++ b/code/core/src/cli/eslintPlugin.ts
@@ -166,7 +166,7 @@ function findConfigTarget(
 function addStorybookConfig(editor: SourceEditor, target: ConfigTarget, localName: string) {
   const storybookConfig = `${localName}.configs["flat/recommended"]`;
   if (target.type === 'ArrayExpression') {
-    appendToList(editor, arrayList(target), [`...${storybookConfig}`], '');
+    appendToList(editor, arrayList(editor, target), [`...${storybookConfig}`], '');
   } else {
     const open = editor.code.indexOf('(', target.callee.end) + 1;
     appendToList(editor, { open, close: target.end - 1, items: target.arguments }, [
diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index cb8f8faf899f..425f40cea62c 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -751,7 +751,12 @@ export class ConfigFile implements CsfObject {
     if (!current) {
       this.set(path, parseExpression(`[${printExpression(node)}]`));
     } else if (current.type === 'ArrayExpression') {
-      appendToList(this._editorSource, arrayList(current), [printExpression(node)], '');
+      appendToList(
+        this._editorSource,
+        arrayList(this._editorSource, current),
+        [printExpression(node)],
+        ''
+      );
       this._commit();
     } else {
       throw new Error(`Expected array at '${path.join('.')}', got '${current.type}'`);
@@ -780,7 +785,7 @@ export class ConfigFile implements CsfObject {
         return element ? this._getWrappedValue(element) === value : false;
       });
       if (element) {
-        removeFromList(this._editorSource, arrayList(current), [element]);
+        removeFromList(this._editorSource, arrayList(this._editorSource, current), [element]);
         this._commit();
       } else {
         throw new Error(`Could not find '${value}' in array at '${path.join('.')}'`);
diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
new file mode 100644
index 000000000000..db2d1a8bf32b
--- /dev/null
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -0,0 +1,180 @@
+import { describe, expect, it } from 'vitest';
+
+import { dedent } from 'ts-dedent';
+
+import { loadCsf, printCsf } from '../CsfFile.ts';
+import type { E } from './ast.ts';
+import { parseModule } from './ast.ts';
+import {
+  SourceEditor,
+  appendToList,
+  arrayList,
+  reindent,
+  removeFromList,
+  removeStatement,
+  withParentheses,
+} from './editor.ts';
+
+const parse = (source: string, fileName?: string) =>
+  loadCsf(source, { fileName, makeTitle: (title) => title ?? 'title' }).parse();
+
+const defaultExportArray = (editor: SourceEditor) => {
+  const statement = editor.program.body[0] as E.ExportDefaultDeclaration;
+  const object = statement.declaration as E.ObjectExpression;
+  return (object.properties[0] as E.ObjectProperty).value as E.ArrayExpression;
+};
+
+describe('parseModule', () => {
+  it('parses .ts-only syntax when no file name picks the grammar', () => {
+    expect(() => parseModule('const id = <T>(x: T) => x;')).not.toThrow();
+    expect(() => parseModule('const size = <number>value;')).not.toThrow();
+  });
+
+  it('reports the error of the parse that got further', () => {
+    expect(() => parseModule('const id = <T>(x: T) => x;\nconst z = ;')).toThrow('(2:10)');
+  });
+
+  it('rejects duplicate declarations like Babel did', () => {
+    expect(() => parseModule('export const A = {};\nexport const A = { args: {} };')).toThrow(
+      'already been declared'
+    );
+  });
+
+  it('names Flow when a @flow file fails to parse', () => {
+    expect(() => parseModule('// @flow\nconst x: { +readOnly: number } = {};')).toThrow(
+      'Flow syntax is no longer supported'
+    );
+  });
+});
+
+describe('reindent', () => {
+  it('re-indents code lines only', () => {
+    expect(reindent('{\n  a: 1,\n}', '', '    ')).toBe('{\n      a: 1,\n    }');
+    expect(reindent('{\n    a: 1,\n  }', '  ', '')).toBe('{\n  a: 1,\n}');
+  });
+
+  it('leaves the lines of template literals and continued strings alone', () => {
+    expect(reindent('{\n  code: `line1\nline2`,\n}', '', '  ')).toBe(
+      '{\n    code: `line1\nline2`,\n  }'
+    );
+    expect(reindent('{\n  code: `${a}\nb`,\n}', '', '  ')).toBe('{\n    code: `${a}\nb`,\n  }');
+    expect(reindent("{\n  text: 'first\\\nsecond',\n}", '', '  ')).toBe(
+      "{\n    text: 'first\\\nsecond',\n  }"
+    );
+  });
+
+  it('re-indents code inside template expressions', () => {
+    expect(reindent('`${\nfn()\n}`', '', '  ')).toBe('`${\n  fn()\n  }`');
+  });
+});
+
+describe('withParentheses', () => {
+  it('widens a span over the parentheses wrapped around it', () => {
+    const code = '[ ((a ? 1 : 2)) ]';
+    expect(withParentheses(code, { start: 4, end: 13 })).toEqual({ start: 2, end: 15 });
+    expect(withParentheses(code, { start: 4, end: 13 }, 3, 14)).toEqual({ start: 3, end: 14 });
+    expect(withParentheses(code, { start: 6, end: 7 })).toEqual({ start: 6, end: 7 });
+  });
+
+  it('appends after a parenthesized last element and removes it whole', () => {
+    const editor = new SourceEditor(`export default { addons: [(cond ? 'a' : 'c')] };`);
+    appendToList(editor, arrayList(editor, defaultExportArray(editor)), [`'b'`], '');
+    expect(editor.toString()).toBe(`export default { addons: [(cond ? 'a' : 'c'), 'b'] };`);
+
+    const removal = new SourceEditor(`export default { addons: ['b', (cond ? 'a' : 'c')] };`);
+    const array = defaultExportArray(removal);
+    removeFromList(removal, arrayList(removal, array), [array.elements[1]!]);
+    expect(removal.toString()).toBe(`export default { addons: ['b'] };`);
+  });
+});
+
+describe('removeStatement', () => {
+  it('removes the leading comments with the statement', () => {
+    const editor = new SourceEditor(dedent`
+      import a from 'a';
+
+      /** Shared template */
+      const Template = () => null;
+      // @ts-expect-error
+      export const A = Template;
+    `);
+    removeStatement(editor, editor.program.body[1]);
+    removeStatement(editor, editor.program.body[2]);
+    expect(editor.toString()).toBe(`import a from 'a';\n\n`);
+  });
+
+  it('keeps the file header when the first statement is removed', () => {
+    const editor = new SourceEditor(dedent`
+      /* license */
+      // @ts-expect-error
+      const a = 1;
+      const b = 2;
+    `);
+    removeStatement(editor, editor.program.body[0]);
+    expect(editor.toString()).toBe(`/* license */\nconst b = 2;`);
+  });
+});
+
+describe('line endings', () => {
+  it('writes inserted text with the line ending of the file', () => {
+    const csf = parse('export default {\r\n  title: "A",\r\n};\r\n');
+    const [meta] = csf.objects({ stories: false });
+    meta.set(['parameters', 'layout'], 'centered');
+    expect(csf._editor.toString()).toBe(
+      'export default {\r\n  title: "A",\r\n  parameters: { layout: "centered" },\r\n};\r\n'
+    );
+  });
+});
+
+describe('multi-line members', () => {
+  it('moves a member that spans several lines without touching its value', () => {
+    const csf = parse(dedent`
+      export default {
+        parameters: {
+          a11y: {
+            test: 'todo',
+          },
+        },
+      };
+    `);
+    const [meta] = csf.objects({ stories: false });
+    expect(meta.move(['parameters', 'a11y'], ['globals', 'a11y'])).toEqual({
+      ok: true,
+      changed: true,
+    });
+    expect(printCsf(csf).code).toBe(dedent`
+      export default {
+        globals: {
+          a11y: {
+            test: 'todo',
+          },
+        },
+      };
+    `);
+  });
+
+  it('groups multi-line members into an existing object', () => {
+    const csf = parse(dedent`
+      export default {
+        layout: {
+          existing: true,
+        },
+        showNav: {
+          value: false,
+        },
+      };
+    `);
+    const [meta] = csf.objects({ stories: false });
+    expect(meta.group(['layout'], ['showNav'])).toEqual({ ok: true, changed: true });
+    expect(meta.getValue(['layout', 'showNav', 'value'])).toBe(false);
+    expect(printCsf(csf).code).toContain(`showNav: {\n      value: false,\n    },`);
+  });
+
+  it('keeps the value of a template literal set into a multi-line object', () => {
+    const csf = parse('export default {\n  parameters: {\n    a: 1,\n  },\n};');
+    const [meta] = csf.objects({ stories: false });
+    meta.set(['parameters', 'code'], { code: 'line1\nline2' });
+    const [again] = parse(printCsf(csf).code).objects({ stories: false });
+    expect(again.getValue(['parameters', 'code', 'code'])).toBe('line1\nline2');
+  });
+});
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index ade6a2daa022..3f895ab2d324 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -104,8 +104,14 @@ export class SourceEditor {
     this._edits = new MagicString(code, { filename: this.fileName });
   }
 
+  /** Line ending of the file; inserted text is written with `\n` and converted on output. */
+  get eol(): '\n' | '\r\n' {
+    return this.code.includes('\r\n') ? '\r\n' : '\n';
+  }
+
   toString() {
-    return this._edits.toString();
+    const code = this._edits.toString();
+    return this.eol === '\r\n' ? code.replace(/\r?\n/g, '\r\n') : code;
   }
 
   /** Quote for generated strings, overriding the inferred one. */
@@ -212,12 +218,36 @@ export const objectList = (object: E.ObjectExpression | E.ObjectPattern): List =
   items: object.properties,
 });
 
-export const arrayList = (array: E.ArrayExpression): List => ({
+// Nodes are parsed without parentheses, so an element's span may sit inside `( )`.
+export const arrayList = (editor: SourceEditor, array: E.ArrayExpression): List => ({
   open: array.start + 1,
   close: array.end - 1,
-  items: array.elements.filter((element): element is NonNullable<typeof element> => !!element),
+  items: array.elements
+    .filter((element): element is NonNullable<typeof element> => !!element)
+    .map((element) => withParentheses(editor.code, element, array.start + 1, array.end - 1)),
 });
 
+/** Widen a span to the balanced parentheses wrapped directly around it, within `lower..upper`. */
+export const withParentheses = (code: string, span: Span, lower = 0, upper = code.length): Span => {
+  let { start, end } = span;
+  while (true) {
+    let before = start;
+    while (before > lower && /\s/.test(code[before - 1])) {
+      before--;
+    }
+    let after = end;
+    while (after < upper && /\s/.test(code[after])) {
+      after++;
+    }
+    if (before > lower && after < upper && code[before - 1] === '(' && code[after] === ')') {
+      start = before - 1;
+      end = after + 1;
+    } else {
+      return start === span.start && end === span.end ? span : { start, end };
+    }
+  }
+};
+
 // Position right after the token that precedes an item: the comma or the opening token.
 export const separatorBefore = (code: string, list: List | E.ObjectExpression, index: number) => {
   const { open, items } = 'open' in list ? list : objectList(list);
@@ -242,15 +272,84 @@ export const lineIndent = (code: string, index: number) => {
 
 const isMultiline = (code: string, list: List) => code.slice(list.open, list.close).includes('\n');
 
-export const reindent = (text: string, from: string, to: string) =>
-  from === to
-    ? text
-    : text
-        .split('\n')
-        .map((line, index) =>
-          index === 0 ? line : line.startsWith(from) ? to + line.slice(from.length) : line
-        )
-        .join('\n');
+// Offsets of the line breaks in `text` that separate code, excluding those inside string and
+// template literals, whose line breaks are part of the value.
+const codeLineBreaks = (text: string) => {
+  const breaks: number[] = [];
+  type Context = 'template' | { depth: number };
+  const stack: Context[] = [{ depth: 0 }];
+  let quote: string | undefined;
+  let comment: 'line' | 'block' | undefined;
+  for (let index = 0; index < text.length; index++) {
+    const char = text[index];
+    const top = stack.at(-1)!;
+    if (quote) {
+      if (char === '\\') {
+        index++;
+      } else if (char === quote || char === '\n') {
+        quote = undefined;
+      }
+    } else if (comment === 'line') {
+      if (char === '\n') {
+        comment = undefined;
+        breaks.push(index);
+      }
+    } else if (comment === 'block') {
+      if (char === '\n') {
+        breaks.push(index);
+      } else if (text.startsWith('*/', index)) {
+        comment = undefined;
+        index++;
+      }
+    } else if (top === 'template') {
+      if (char === '\\') {
+        index++;
+      } else if (char === '`') {
+        stack.pop();
+      } else if (text.startsWith('${', index)) {
+        stack.push({ depth: 0 });
+        index++;
+      }
+    } else if (char === '\n') {
+      breaks.push(index);
+    } else if (char === "'" || char === '"') {
+      quote = char;
+    } else if (char === '`') {
+      stack.push('template');
+    } else if (text.startsWith('//', index)) {
+      comment = 'line';
+    } else if (text.startsWith('/*', index)) {
+      comment = 'block';
+    } else if (char === '{') {
+      top.depth++;
+    } else if (char === '}') {
+      if (top.depth === 0 && stack.length > 1) {
+        stack.pop();
+      } else {
+        top.depth--;
+      }
+    }
+  }
+  return breaks;
+};
+
+/** Re-indent the continuation lines of `text`, leaving string and template literal values alone. */
+export const reindent = (text: string, from: string, to: string) => {
+  if (from === to || !text.includes('\n')) {
+    return text;
+  }
+  let result = '';
+  let cursor = 0;
+  for (const lineBreak of codeLineBreaks(text)) {
+    result += text.slice(cursor, lineBreak + 1);
+    cursor = lineBreak + 1;
+    if (text.startsWith(from, cursor)) {
+      result += to;
+      cursor += from.length;
+    }
+  }
+  return result + text.slice(cursor);
+};
 
 /** Text of an item including the comments that lead it, with continuation lines dedented. */
 export const itemText = (editor: SourceEditor, list: List, item: Span) => {
@@ -339,7 +438,12 @@ export const prependToList = (editor: SourceEditor, list: List, texts: string[],
 export const removeFromList = (editor: SourceEditor, list: List, removedItems: readonly Span[]) => {
   const { code, edits } = editor;
   const { items } = list;
-  const removed = new Set(removedItems);
+  // A list item may be a widened span, so an item is removed when it contains a removed span.
+  const removed = new Set(
+    items.filter((item) =>
+      removedItems.some((span) => item.start <= span.start && span.end <= item.end)
+    )
+  );
   if (items.every((item) => removed.has(item))) {
     if (list.close > list.open) {
       edits.remove(list.open, list.close);
@@ -441,17 +545,33 @@ export const appendStatement = (editor: SourceEditor, text: string) => {
   editor.edits.appendLeft(last.end, `\n${text}`);
 };
 
-/** Remove a statement together with its line when nothing else shares the line. */
+/**
+ * Comments that lead a statement on their own lines, above it. The file header stays when the
+ * first statement is removed.
+ */
+export const leadingComments = (editor: SourceEditor, statement: Span): E.Comment[] => {
+  const { code, comments } = editor;
+  const previous = editor.program.body.filter((node) => node.end <= statement.start).at(-1);
+  const previousLineEnd = previous ? code.indexOf('\n', previous.end) : -1;
+  const from = previousLineEnd === -1 && previous ? previous.end : previousLineEnd + 1;
+  const header = new Set(previous ? [] : headerComments(editor));
+  return comments.filter(
+    (comment) => comment.start >= from && comment.end <= statement.start && !header.has(comment)
+  );
+};
+
+/** Remove a statement with its leading comments, and its line when nothing else shares it. */
 export const removeStatement = (editor: SourceEditor, statement: Span) => {
   const { code } = editor;
-  const lineStart = code.lastIndexOf('\n', statement.start - 1) + 1;
+  const first = leadingComments(editor, statement)[0];
+  const lineStart = code.lastIndexOf('\n', (first ?? statement).start - 1) + 1;
   const lineEnd = code.indexOf('\n', statement.end);
-  const before = code.slice(lineStart, statement.start);
+  const before = code.slice(lineStart, (first ?? statement).start);
   const after = code.slice(statement.end, lineEnd === -1 ? code.length : lineEnd);
   if (!before.trim() && !after.trim()) {
     editor.edits.remove(lineStart, lineEnd === -1 ? code.length : lineEnd + 1);
   } else {
-    editor.edits.remove(statement.start, statement.end);
+    editor.edits.remove((first ?? statement).start, statement.end);
   }
 };
 
@@ -501,22 +621,22 @@ export const renameKey = (editor: SourceEditor, member: Property, key: string) =
   editor.edits.overwrite(range.start, range.end, key);
 };
 
+// The member's text with its key renamed, as `memberText` would print it.
 export const renamedMemberText = (
   editor: SourceEditor,
   object: E.ObjectExpression,
   member: Property,
   key: string
 ) => {
-  const text = memberText(editor, object, member);
-  if (member.shorthand) {
-    return (
-      text.slice(0, text.length - (member.end - member.start)) +
-      `${key}: ${editor.source(member.value)}`
-    );
-  }
-  const range = keyRange(editor, member);
-  const offset = text.length - (member.end - range.start);
-  return text.slice(0, offset) + key + text.slice(offset + (range.end - range.start));
+  const list = objectList(object);
+  const start = separatorBefore(editor.code, list, list.items.indexOf(member));
+  const { code } = editor;
+  const renamed = member.shorthand
+    ? code.slice(start, member.start) + `${key}: ${editor.source(member.value)}`
+    : code.slice(start, keyRange(editor, member).start) +
+      key +
+      code.slice(keyRange(editor, member).end, member.end);
+  return reindent(renamed.replace(/^\s+/, ''), lineIndent(code, member.start), '');
 };
 
 // Function expression source for a method, so reads and transforms of `play() {}` see a value.

From f61fe735d30b865c03a8583fc95267fa98ba3f97 Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 09:56:51 +0900
Subject: [PATCH 061/326] fix(core): parse automocked modules with their file
 name and drop empty mock-loader maps

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../src/plugins/vite-mock/plugin.ts           |  6 +++--
 .../storybook-mock-transform-loader.ts        |  9 +++++--
 .../src/loaders/webpack-automock-loader.ts    |  2 +-
 code/core/src/mocking-utils/automock.ts       |  3 ++-
 code/core/src/mocking-utils/extract.test.ts   | 21 +++++++++++++++
 code/core/src/mocking-utils/extract.ts        | 27 ++++++++++---------
 code/frameworks/angular-vite/src/preset.ts    |  2 +-
 7 files changed, 50 insertions(+), 20 deletions(-)

diff --git a/code/builders/builder-vite/src/plugins/vite-mock/plugin.ts b/code/builders/builder-vite/src/plugins/vite-mock/plugin.ts
index 01a234216556..e5ad8a1b9a71 100644
--- a/code/builders/builder-vite/src/plugins/vite-mock/plugin.ts
+++ b/code/builders/builder-vite/src/plugins/vite-mock/plugin.ts
@@ -149,7 +149,9 @@ export function viteMockPlugin(options: MockPluginOptions): Plugin[] {
 
             try {
               if (!call.redirectPath) {
-                const automockedCode = getAutomockCode(code, call.spy, parseModuleAst as any);
+                const automockedCode = getAutomockCode(code, call.spy, (source) =>
+                  parseModuleAst(source, id)
+                );
 
                 return {
                   code: automockedCode.toString(),
@@ -172,7 +174,7 @@ export function viteMockPlugin(options: MockPluginOptions): Plugin[] {
         handler(code, id) {
           if (id === normalizedPreviewConfigPath) {
             try {
-              return rewriteSbMockImportCalls(code);
+              return rewriteSbMockImportCalls(code, id);
             } catch (e) {
               logger.debug(`Could not transform sb.mock(import(...)) calls in ${id}: ${e}`);
               return null;
diff --git a/code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.ts b/code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.ts
index 33f5b2196c7e..fe86a89b7ed6 100644
--- a/code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.ts
+++ b/code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.ts
@@ -17,8 +17,13 @@ const storybookMockTransformLoader: LoaderDefinition = function mockTransformLoa
   const callback = this.async();
 
   try {
-    const result = rewriteSbMockImportCalls(source);
-    callback(null, result.code, { ...result.map, file: this.resourcePath }, meta);
+    const result = rewriteSbMockImportCalls(source, this.resourcePath);
+    callback(
+      null,
+      result.code,
+      result.map ? { ...result.map, file: this.resourcePath } : sourceMap,
+      meta
+    );
   } catch (error) {
     const filePath = this.resourcePath;
     logger.debug(`Could not transform sb.mock(import(...)) calls in ${filePath}: ${error}`);
diff --git a/code/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts b/code/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts
index 84fba0984b0d..7493e52bf1a0 100644
--- a/code/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts
+++ b/code/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts
@@ -31,7 +31,7 @@ export default function webpackAutomockLoader(
   const isSpy = options.spy === 'true';
 
   // Generate the mocked source code using the utility from @vitest/mocker.
-  const mocked = getAutomockCode(source, isSpy, parseModuleAst as any);
+  const mocked = getAutomockCode(source, isSpy, (code) => parseModuleAst(code, this.resourcePath));
 
   // Return the transformed code to Webpack for further processing.
   return mocked.toString();
diff --git a/code/core/src/mocking-utils/automock.ts b/code/core/src/mocking-utils/automock.ts
index c176fce49272..245788e70e24 100644
--- a/code/core/src/mocking-utils/automock.ts
+++ b/code/core/src/mocking-utils/automock.ts
@@ -10,7 +10,8 @@ import MagicString from 'magic-string';
 
 import { type Positioned, getArbitraryModuleIdentifier } from './esmWalker.ts';
 
-type ParseFn = (code: string) => Program;
+// An ESTree program; OXC's own `Program` type is structurally compatible with what is read here.
+type ParseFn = (code: string) => unknown;
 
 export const __STORYBOOK_GLOBAL_THIS_ACCESSOR__ = '__vitest_mocker__';
 
diff --git a/code/core/src/mocking-utils/extract.test.ts b/code/core/src/mocking-utils/extract.test.ts
index 33c474fa245a..56e744be4e82 100644
--- a/code/core/src/mocking-utils/extract.test.ts
+++ b/code/core/src/mocking-utils/extract.test.ts
@@ -224,6 +224,27 @@ describe('extractMockCalls', () => {
       `);
     });
 
+    it('names the file in the map and returns no map when nothing changed', () => {
+      const changed = extractModule.rewriteSbMockImportCalls(
+        `sb.mock(import('./bar/baz'));`,
+        '/project/.storybook/preview.ts'
+      );
+      expect(changed.map?.sources).toEqual(['/project/.storybook/preview.ts']);
+
+      const unchanged = extractModule.rewriteSbMockImportCalls(
+        `export default {};`,
+        '/project/.storybook/preview.ts'
+      );
+      expect(unchanged).toEqual({ code: `export default {};`, map: null });
+    });
+
+    it('parses .ts modules with the TS grammar and fails on syntax errors', () => {
+      const code = `export const identity = <T>(value: T) => value;`;
+      expect(extractModule.parseModuleAst(code, '/project/util.ts').body).toHaveLength(1);
+      expect(extractModule.parseModuleAst(code).body).toHaveLength(1);
+      expect(() => extractModule.parseModuleAst('export const = ;', '/project/util.ts')).toThrow();
+    });
+
     it('rewrites sb.mock(import("<xyz>")) to sb.mock("<xyz>")', () => {
       const code = `
         sb.mock(import('./bar/baz'));
diff --git a/code/core/src/mocking-utils/extract.ts b/code/core/src/mocking-utils/extract.ts
index 7c6326b0f2f7..9a7a41648e15 100644
--- a/code/core/src/mocking-utils/extract.ts
+++ b/code/core/src/mocking-utils/extract.ts
@@ -7,9 +7,9 @@ import type { CoreConfig } from 'storybook/internal/types';
 import { transformSync } from 'esbuild';
 import { walk } from 'estree-walker';
 import MagicString from 'magic-string';
-import { parseSync } from 'oxc-parser';
 import { basename, normalize } from 'pathe';
 
+import { parseModule } from '../csf-tools/estree/ast.ts';
 import { resolveMock } from './resolve.ts';
 
 const DEFAULT_MODULE_DIRECTORIES = ['/node_modules/'];
@@ -35,8 +35,12 @@ interface ExtractMockCallsOptions {
   configDir: string;
 }
 
-/** Parse a module, TSX included, into an ESTree program without throwing on syntax errors. */
-export const parseModuleAst = (code: string) => parseSync('file.tsx', code).program;
+/**
+ * Parse a module into an ESTree program. The file name picks the grammar, so a `.ts` module keeps
+ * its generic arrows; without one the TSX and TS grammars are both tried. Throws on syntax errors.
+ */
+export const parseModuleAst = (code: string, fileName?: string) =>
+  parseModule(code, fileName).program;
 
 /** @deprecated Use `parseModuleAst`. It returns an ESTree program, no longer a Babel AST. */
 export const babelParser = parseModuleAst;
@@ -49,8 +53,8 @@ const isStaticImport = (node: any): boolean =>
   node?.type === 'ImportExpression' && isStringLiteral(node.source);
 
 /** Utility to rewrite sb.mock(import('...'), ...) to sb.mock('...', ...) */
-export function rewriteSbMockImportCalls(code: string) {
-  const ast = parseModuleAst(code);
+export function rewriteSbMockImportCalls(code: string, fileName?: string) {
+  const ast = parseModuleAst(code, fileName);
   const edits = new MagicString(code);
 
   walk(ast as any, {
@@ -71,8 +75,11 @@ export function rewriteSbMockImportCalls(code: string) {
       }
     },
   });
+  if (!edits.hasChanged()) {
+    return { code, map: null };
+  }
   // Spread into a plain object: babel-loader, next in the webpack chain, rejects a string map.
-  const map = { ...edits.generateMap({ hires: true, includeContent: true }) };
+  const map = { ...edits.generateMap({ hires: true, includeContent: true, source: fileName }) };
   return {
     code: edits.toString(),
     map: { ...map, sourcesContent: map.sourcesContent as string[] },
@@ -86,13 +93,7 @@ export function rewriteSbMockImportCalls(code: string) {
  */
 export function extractMockCalls(
   options: ExtractMockCallsOptions,
-  parse: (
-    input: string,
-    options?: {
-      allowReturnOutsideFunction?: boolean;
-      jsx?: boolean;
-    }
-  ) => unknown,
+  parse: (input: string) => unknown,
   root: string,
   findMockRedirect: (
     root: string,
diff --git a/code/frameworks/angular-vite/src/preset.ts b/code/frameworks/angular-vite/src/preset.ts
index 82ce07a1c8f2..4a2f617ad891 100644
--- a/code/frameworks/angular-vite/src/preset.ts
+++ b/code/frameworks/angular-vite/src/preset.ts
@@ -608,7 +608,7 @@ function angularViteRedirectReapplyPlugin(options?: StandaloneOptions): Plugin {
           return null;
         }
         try {
-          const automocked = getAutomockCode(code, a.spy, parseModuleAst as any);
+          const automocked = getAutomockCode(code, a.spy, (source) => parseModuleAst(source, id));
           return {
             code: automocked.toString(),
             map: automocked.generateMap(),

From 485da0c60463031bac15e8781b8b4c7ac1ded57c Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 10:04:38 +0900
Subject: [PATCH 062/326] fix(csf-tools): keep source maps accurate across
 commits and incoming maps

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../csf-plugin/rollup-based-plugin.test.ts    |  21 ++++
 .../src/csf-plugin/webpack-loader.test.ts     | 109 ++++++++++++------
 .../docs/src/csf-plugin/webpack-loader.ts     |   4 +-
 code/core/package.json                        |   1 +
 code/core/src/csf-tools/CsfFile.ts            |  11 +-
 code/core/src/csf-tools/estree/editor.ts      |  58 +++++++++-
 yarn.lock                                     |   1 +
 7 files changed, 160 insertions(+), 45 deletions(-)

diff --git a/code/addons/docs/src/csf-plugin/rollup-based-plugin.test.ts b/code/addons/docs/src/csf-plugin/rollup-based-plugin.test.ts
index d73ebc0101c5..a24b2b556718 100644
--- a/code/addons/docs/src/csf-plugin/rollup-based-plugin.test.ts
+++ b/code/addons/docs/src/csf-plugin/rollup-based-plugin.test.ts
@@ -157,6 +157,27 @@ export const Primary = { args: { label: 'Primary' } };
     expect(code).toContain(`originalSource: "{ args: { label: 'Primary' } }"`);
   });
 
+  it('keeps original positions when a hook commits edits before formatting', async () => {
+    enrichCsf.mockImplementation(async (csf) => {
+      const [primary] = csf.objects({ meta: false });
+      primary.set(['parameters', 'docs', 'extra'], true);
+    });
+
+    const result = await transformCsf(source, storyId, { enrichCsf });
+    if (typeof result !== 'object') {
+      throw new Error('expected a transform result with a sourcemap');
+    }
+
+    expect(result.code).toContain('extra: true');
+    const output = positionOf(result.code, 'export const Primary');
+    const entry = new SourceMap(result.map as unknown as SourceMapPayload).findEntry(
+      output.line,
+      output.column
+    );
+    expect(entry).toMatchObject({ originalLine: positionOf(source, 'export const Primary').line });
+    expect(result.map.sourcesContent).toEqual([source]);
+  });
+
   it('leaves the source passed to enrichCsf hooks unenriched', async () => {
     expect.assertions(3);
     enrichCsf.mockImplementation(async (csf, csfSource) => {
diff --git a/code/addons/docs/src/csf-plugin/webpack-loader.test.ts b/code/addons/docs/src/csf-plugin/webpack-loader.test.ts
index 468c73b9be3d..9455efe3daaa 100644
--- a/code/addons/docs/src/csf-plugin/webpack-loader.test.ts
+++ b/code/addons/docs/src/csf-plugin/webpack-loader.test.ts
@@ -1,56 +1,91 @@
-import { mkdtemp, rm, writeFile } from 'node:fs/promises';
-import { tmpdir } from 'node:os';
-import { join } from 'node:path';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { readFile } from 'node:fs/promises';
+import { SourceMap, type SourceMapPayload } from 'node:module';
+import { resolve } from 'node:path';
+
+import MagicString from 'magic-string';
+import { vol } from 'memfs';
+import { dedent } from 'ts-dedent';
 
 import loader from './webpack-loader.ts';
 
-const STORY = `export default { title: 'Example' };
-export const Primary = { args: { label: 'Button' } };
+vi.mock('node:fs/promises', { spy: true });
+
+const id = resolve('/src/Button.stories.tsx');
+
+const originalCode = dedent`
+  import type { Meta } from '@storybook/react';
+
+  export default { title: 'Button' } satisfies Meta;
+
+  export const Primary = {
+    play: async () => {},
+  };
 `;
 
-function runLoader(resourcePath: string, content: string) {
-  return new Promise<{ err: Error | null; result?: string }>((resolve, reject) => {
-    loader
-      .call(
-        {
-          async: () => (err, result) => resolve({ err, result }),
-          getOptions: () => ({}),
-          resourcePath,
-        },
-        content,
-        undefined
-      )
-      .catch(reject);
-  });
-}
+// What an earlier loader such as swc-loader hands over: transpiled code plus its map.
+const transpile = (code: string) => {
+  const edited = new MagicString(code)
+    .remove(0, code.indexOf('\n') + 2)
+    .replace(' satisfies Meta', '');
+  return {
+    code: edited.toString(),
+    map: edited.generateMap({ hires: 'boundary', source: id, includeContent: true }),
+  };
+};
 
-describe('csf-plugin webpack loader', () => {
-  let dir: string;
+const positionOf = (code: string, token: string) => {
+  const line = code.split('\n').findIndex((text) => text.includes(token));
+  return { line, column: code.split('\n')[line].indexOf(token) };
+};
 
-  beforeEach(async () => {
-    dir = await mkdtemp(join(tmpdir(), 'csf-plugin-'));
+const run = (content: string, map: unknown) =>
+  new Promise<{ code: string; map: SourceMapPayload }>((done, fail) => {
+    loader.call(
+      {
+        async: () => (error, code, result) =>
+          error ? fail(error) : done({ code: code!, map: result }),
+        getOptions: () => ({}),
+        resourcePath: id,
+      },
+      content,
+      map
+    );
   });
 
-  afterEach(async () => {
-    await rm(dir, { recursive: true, force: true });
+describe('webpack loader', () => {
+  beforeEach(async () => {
+    const memfs = await vi.importActual<typeof import('memfs')>('memfs');
+    vi.mocked(readFile).mockImplementation(
+      memfs.fs.promises.readFile as unknown as typeof import('node:fs/promises').readFile
+    );
+    vol.reset();
+    vol.fromJSON({ [id]: originalCode });
   });
 
-  it('adds the original source to stories', async () => {
-    const file = join(dir, 'Button.stories.ts');
-    await writeFile(file, STORY);
+  it('maps the enriched output through the incoming source map', async () => {
+    const transpiled = transpile(originalCode);
+    expect(positionOf(transpiled.code, 'play:').line).not.toBe(
+      positionOf(originalCode, 'play:').line
+    );
 
-    const { err, result } = await runLoader(file, STORY);
+    const result = await run(transpiled.code, transpiled.map);
 
-    expect(err).toBeNull();
-    expect(result).toContain('originalSource');
+    expect(result.code).toContain('originalSource');
+    const output = positionOf(result.code, 'play:');
+    const entry = new SourceMap(result.map).findEntry(output.line, output.column);
+    expect(entry).toMatchObject({ originalLine: positionOf(originalCode, 'play:').line });
+    // Windows paths come back with forward slashes.
+    expect((entry as { originalSource?: string }).originalSource).toMatch(/Button\.stories\.tsx$/);
+    expect(result.map.sourcesContent).toEqual([originalCode]);
   });
 
-  it('passes the content through when the story file was deleted during the build', async () => {
-    const { err, result } = await runLoader(join(dir, 'Deleted.stories.ts'), STORY);
+  it('maps to the loaded code when no earlier loader ran', async () => {
+    const result = await run(originalCode, undefined);
 
-    expect(err).toBeNull();
-    expect(result).toBe(STORY);
+    const output = positionOf(result.code, 'play:');
+    const entry = new SourceMap(result.map).findEntry(output.line, output.column);
+    expect(entry).toMatchObject({ originalLine: positionOf(originalCode, 'play:').line });
   });
 });
diff --git a/code/addons/docs/src/csf-plugin/webpack-loader.ts b/code/addons/docs/src/csf-plugin/webpack-loader.ts
index 5751458a28da..1ead56eaf43c 100644
--- a/code/addons/docs/src/csf-plugin/webpack-loader.ts
+++ b/code/addons/docs/src/csf-plugin/webpack-loader.ts
@@ -20,9 +20,9 @@ async function loader(this: LoaderContext, content: string, map: any) {
     const sourceCode = await readFile(id, 'utf-8');
     const makeTitle = (userTitle: string) => userTitle || 'default';
     const csf = loadCsf(content, { makeTitle, fileName: id }).parse();
-    const csfSource = loadCsf(sourceCode, { makeTitle }).parse();
+    const csfSource = loadCsf(sourceCode, { makeTitle, fileName: id }).parse();
     await enrichCsf(csf, csfSource, options);
-    const formattedCsf = formatCsf(csf, { sourceMaps: true });
+    const formattedCsf = formatCsf(csf, { sourceMaps: true, inputSourceMap: map ?? undefined });
 
     if (typeof formattedCsf === 'string') {
       return callback(null, formattedCsf, map);
diff --git a/code/core/package.json b/code/core/package.json
index 157d1cb1484d..27114376ff8b 100644
--- a/code/core/package.json
+++ b/code/core/package.json
@@ -299,6 +299,7 @@
     "@emotion/styled": "^11.14.0",
     "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
     "@happy-dom/global-registrator": "^20.0.11",
+    "@jridgewell/remapping": "^2.3.5",
     "@jridgewell/sourcemap-codec": "^1.5.5",
     "@ngard/tiny-isequal": "^1.1.0",
     "@polka/compression": "^1.0.0-next.28",
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index a8a6eb136976..5624e051cac0 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -33,7 +33,7 @@ import {
   locationOf,
   unwrapExpression,
 } from './estree/ast.ts';
-import { SourceEditor, appendStatement } from './estree/editor.ts';
+import { type InputSourceMap, SourceEditor, appendStatement } from './estree/editor.ts';
 import { generateUid } from './estree/scope.ts';
 import { findVarInitialization } from './findVarInitialization.ts';
 
@@ -1185,6 +1185,8 @@ export interface FormatCsfOptions {
   sourceMaps?: boolean;
   /** Source name the map refers to; defaults to the file name the CSF was loaded with. */
   sourceFileName?: string;
+  /** Map of the loaded code to its original, when it came from an earlier transform. */
+  inputSourceMap?: InputSourceMap;
 }
 
 /**
@@ -1201,11 +1203,10 @@ export const formatCsf = (
   }
   return {
     code,
-    map: csf._editor.edits.generateMap({
-      hires: true,
+    map: csf._editor.generateMap({
       source: options.sourceFileName ?? csf._options.fileName,
-      includeContent: true,
-    }) as CsfSourceMap,
+      inputSourceMap: options.inputSourceMap,
+    }) as unknown as CsfSourceMap,
   };
 };
 
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 3f895ab2d324..6c1dbcc7c1f2 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -1,4 +1,5 @@
-import MagicString from 'magic-string';
+import remapping, { type SourceMapInput } from '@jridgewell/remapping';
+import MagicString, { SourceMap } from 'magic-string';
 
 import {
   type E,
@@ -15,6 +16,23 @@ import { type ScopeInfo, analyzeScopes } from './scope.ts';
 
 type Span = { start: number; end: number };
 
+// Maps in a chain are matched by source name, so every map of an editor uses the same one. A
+// private member would make the class nominal and break assignability between `src` and `dist`.
+const mapSource = (editor: { fileName: string | undefined }) => editor.fileName ?? 'source';
+
+/** A source map from an earlier transform, as the object or the JSON string it was handed over as. */
+export type InputSourceMap =
+  | string
+  | {
+      version: number | string;
+      mappings: string;
+      sources: (string | null)[];
+      sourcesContent?: (string | null)[];
+      names?: string[];
+      file?: string;
+      sourceRoot?: string;
+    };
+
 /**
  * Source text plus its OXC AST. Edits accumulate in `edits`, so untouched code stays
  * byte-identical; `commit()` applies them and parses the result again.
@@ -28,6 +46,10 @@ export class SourceEditor {
 
   _edits: MagicString;
 
+  // Maps of the edits applied by earlier commits, oldest first, so the output still maps to the
+  // code the editor was created with.
+  _committed: SourceMap[] = [];
+
   readonly fileName: string | undefined;
 
   constructor(code: string, fileName?: string) {
@@ -93,6 +115,9 @@ export class SourceEditor {
     if (!this.pending) {
       return false;
     }
+    this._committed.push(
+      this._edits.generateMap({ hires: true, includeContent: true, source: mapSource(this) })
+    );
     this.replaceSource(this._edits.toString());
     return true;
   }
@@ -104,6 +129,37 @@ export class SourceEditor {
     this._edits = new MagicString(code, { filename: this.fileName });
   }
 
+  /**
+   * Hi-res map from the code the editor was created with to `toString()`, through every commit,
+   * and through `inputSourceMap` when the code came from an earlier transform.
+   */
+  generateMap(options: { source?: string; inputSourceMap?: InputSourceMap } = {}): SourceMap {
+    const source = options.source ?? this.fileName ?? '';
+    const current = this._edits.generateMap({
+      hires: true,
+      includeContent: true,
+      source: mapSource(this),
+    });
+    const chain = [current, ...this._committed.slice().reverse()];
+    if (chain.length === 1 && !options.inputSourceMap) {
+      current.sources = [source];
+      return current;
+    }
+    const maps = chain.map((map) => map as unknown as SourceMapInput);
+    if (options.inputSourceMap) {
+      maps.push(options.inputSourceMap as SourceMapInput);
+    }
+    const composed = remapping(maps, () => null);
+    return new SourceMap({
+      file: composed.file ?? '',
+      sources: composed.sources.map((name) => (options.inputSourceMap ? (name ?? '') : source)),
+      sourcesContent: composed.sourcesContent?.map((content) => content ?? ''),
+      names: composed.names,
+      // Encoded, since `decodedMappings` was not requested.
+      mappings: composed.mappings as string,
+    });
+  }
+
   /** Line ending of the file; inserted text is written with `\n` and converted on output. */
   get eol(): '\n' | '\r\n' {
     return this.code.includes('\r\n') ? '\r\n' : '\n';
diff --git a/yarn.lock b/yarn.lock
index f08065ec4c95..4544c40af691 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -33555,6 +33555,7 @@ __metadata:
     "@emotion/styled": "npm:^11.14.0"
     "@fal-works/esbuild-plugin-global-externals": "npm:^2.1.2"
     "@happy-dom/global-registrator": "npm:^20.0.11"
+    "@jridgewell/remapping": "npm:^2.3.5"
     "@jridgewell/sourcemap-codec": "npm:^1.5.5"
     "@ngard/tiny-isequal": "npm:^1.1.0"
     "@polka/compression": "npm:^1.0.0-next.28"

From c49c7b7e57142b3a481ac0d1af87a77f3355b20d Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 10:09:44 +0900
Subject: [PATCH 063/326] fix(codemod): remove leading comments with CSF2
 statements and add type imports only when used

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../transforms/__tests__/csf-2-to-3.test.ts   | 40 +++++++++++++++++++
 code/lib/codemod/src/transforms/csf-2-to-3.ts |  7 ++--
 2 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts b/code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts
index 564946f2f3ae..15e5c99c0ef9 100644
--- a/code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts
+++ b/code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts
@@ -236,6 +236,31 @@ describe('csf-2-to-3', () => {
       `);
     });
 
+    it('drops the comments that led a removed template or annotation', async () => {
+      await expect(
+        jsTransform(dedent`
+          export default { title: 'Button', component: Button };
+
+          /** Shared template */
+          const Template = (args) => <Button {...args} />;
+
+          export const Primary = Template.bind({});
+          // @ts-expect-error
+          Primary.args = { label: 'A' };
+
+          export const Next = () => <Cat />;
+        `)
+      ).resolves.toMatchInlineSnapshot(`
+        export default { title: "Button", component: Button };
+
+        export const Primary = {
+          args: { label: "A" },
+        };
+
+        export const Next = () => <Cat />;
+      `);
+    });
+
     it('keeps a template that is still rendered as a JSX element', async () => {
       await expect(
         jsTransform(dedent`
@@ -303,6 +328,21 @@ describe('csf-2-to-3', () => {
   });
 
   describe('typescript', () => {
+    it('adds a type import only when it rewrites the annotation', async () => {
+      await expect(
+        tsTransform(dedent`
+          import type { StoryObj } from '@storybook/react';
+          export default { title: 'Cat' };
+          export const A: StoryObj = () => <Cat />, B: StoryObj = () => <Cat />;
+        `)
+      ).resolves.toMatchInlineSnapshot(`
+        import type { StoryObj } from "@storybook/react";
+        export default { title: "Cat" };
+        export const A: StoryObj = () => <Cat />,
+          B: StoryObj = () => <Cat />;
+      `);
+    });
+
     it('should error with namespace imports', async () => {
       await expect.addSnapshotSerializer({
         serialize: (value) => {
diff --git a/code/lib/codemod/src/transforms/csf-2-to-3.ts b/code/lib/codemod/src/transforms/csf-2-to-3.ts
index 8779b6aa14d4..a1628406b5e7 100644
--- a/code/lib/codemod/src/transforms/csf-2-to-3.ts
+++ b/code/lib/codemod/src/transforms/csf-2-to-3.ts
@@ -5,6 +5,7 @@ import {
   type SourceEditor,
   loadCsf,
   printCsf,
+  removeStatement,
   walk,
 } from 'storybook/internal/csf-tools';
 import { logger } from 'storybook/internal/node-logger';
@@ -125,7 +126,7 @@ function removeUnusedTemplates(editor: SourceEditor, templates: string[]) {
     const { declarations } = declaration;
     const index = declarations.indexOf(declarator);
     if (declarations.length === 1) {
-      editor.edits.remove(declaration.start, declaration.end);
+      removeStatement(editor, declaration);
     } else if (index < declarations.length - 1) {
       editor.edits.remove(declarator.start, declarations[index + 1].start);
     } else {
@@ -196,7 +197,7 @@ export default async function transform(info: FileInfo, api: API, options: { par
 
   for (const statement of editor.program.body) {
     if (isStoryAnnotation(statement, objectExports)) {
-      editor.edits.remove(statement.start, statement.end);
+      removeStatement(editor, statement);
     }
   }
   editor.commit();
@@ -306,8 +307,8 @@ class StorybookImportHelper {
       annotation.typeName.type === 'Identifier' &&
       this.getAllLocalImports().includes(annotation.typeName.name)
     ) {
-      const localTypeImport = this.getOrAddImport(type);
       if (apply) {
+        const localTypeImport = this.getOrAddImport(type);
         const { typeName } = annotation;
         this.editor.edits.overwrite(typeName.start, typeName.end, localTypeImport ?? '');
       }

From 102b492caef658a13779b6ab1d77f13eac7f878c Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 10:11:48 +0900
Subject: [PATCH 064/326] fix(codemod): rename deprecated type imports in place

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../upgrade-deprecated-types.test.ts          | 16 ++++++++++++
 .../transforms/upgrade-deprecated-types.ts    | 26 ++++++++++---------
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/code/lib/codemod/src/transforms/__tests__/upgrade-deprecated-types.test.ts b/code/lib/codemod/src/transforms/__tests__/upgrade-deprecated-types.test.ts
index f5942cb93999..029b113c3d7f 100644
--- a/code/lib/codemod/src/transforms/__tests__/upgrade-deprecated-types.test.ts
+++ b/code/lib/codemod/src/transforms/__tests__/upgrade-deprecated-types.test.ts
@@ -89,6 +89,22 @@ describe('upgrade-deprecated-types', () => {
       ).rejects.toThrowErrorMatchingSnapshot();
     });
 
+    it('keeps inline type modifiers, default imports and comments between specifiers', async () => {
+      await expect(
+        tsTransform(dedent`
+          import React, { type ComponentStory, /* keep */ type ComponentMeta, Meta } from '@storybook/react';
+
+          export default { title: 'Cat' } satisfies ComponentMeta<typeof Cat>;
+          export const A: ComponentStory<typeof Cat> = () => <Cat />;
+        `)
+      ).resolves.toMatchInlineSnapshot(`
+        import React, { type StoryFn, Meta } from "@storybook/react";
+
+        export default { title: "Cat" } satisfies Meta<typeof Cat>;
+        export const A: StoryFn<typeof Cat> = () => <Cat />;
+      `);
+    });
+
     it('upgrade namespaces', async () => {
       await expect(
         tsTransform(dedent`
diff --git a/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts b/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts
index 4fe013d3f9e9..b7932e6de2b6 100644
--- a/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts
+++ b/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts
@@ -3,6 +3,7 @@ import {
   type SourceEditor,
   loadCsf,
   printCsf,
+  removeFromList,
   storyShapeError,
   walk,
 } from 'storybook/internal/csf-tools';
@@ -76,9 +77,9 @@ export function upgradeDeprecatedTypes(editor: SourceEditor) {
       continue;
     }
 
-    let changed = false;
-    const texts = specifiers.flatMap((specifier) => {
-      const text = editor.source(specifier);
+    const named = specifiers.filter((specifier) => specifier.type === 'ImportSpecifier');
+    const removed: E.ImportSpecifier[] = [];
+    for (const specifier of specifiers) {
       if (specifier.type === 'ImportNamespaceSpecifier') {
         importedNamespaces.add(specifier.local.name);
       }
@@ -88,7 +89,7 @@ export function upgradeDeprecatedTypes(editor: SourceEditor) {
         !imported ||
         !deprecatedTypes.includes(imported)
       ) {
-        return [text];
+        continue;
       }
       const isShorthand = imported === specifier.local.name;
       // we don't have to rewrite type references for aliased imports
@@ -97,13 +98,12 @@ export function upgradeDeprecatedTypes(editor: SourceEditor) {
       }
 
       const newType = migrateType(imported);
-      changed = true;
 
-      // replace the deprecated import type when the new type isn't yet imported
-      // note that we don't replace the local name of the specifier
+      // Rename only the imported name, so `type` modifiers, aliases and comments stay as written.
       if (!existingImports.some((it) => it.name === newType)) {
         existingImports.push({ name: newType, isAlias: false, node: specifier });
-        return [isShorthand ? newType : `${newType} as ${specifier.local.name}`];
+        editor.edits.overwrite(specifier.imported.start, specifier.imported.end, newType);
+        continue;
       }
       // if the existing import has the same local name but is an alias we throw
       // we could have imported the type with an alias, but seems to much effort
@@ -118,11 +118,13 @@ export function upgradeDeprecatedTypes(editor: SourceEditor) {
       }
       // if the type already exists, without being aliased
       // we can safely remove the deprecated import now
-      return [];
-    });
+      removed.push(specifier);
+    }
 
-    if (changed) {
-      editor.edits.overwrite(specifiers[0].start, specifiers.at(-1)!.end, texts.join(', '));
+    if (removed.length > 0) {
+      const open = editor.code.lastIndexOf('{', named[0].start) + 1;
+      const close = editor.code.indexOf('}', named.at(-1)!.end);
+      removeFromList(editor, { open, close, items: named }, removed);
     }
   }
 

From ee2478c36b9322c0cd82ae84c2362960e2edb8fb Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 10:13:37 +0900
Subject: [PATCH 065/326] fix(react): print async render snippets and keep
 template literal lines

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/index.ts              |  1 +
 .../generateCodeSnippet.test.tsx              | 38 +++++++++++++++++++
 .../componentManifest/generateCodeSnippet.ts  | 15 +++-----
 3 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/code/core/src/csf-tools/index.ts b/code/core/src/csf-tools/index.ts
index f0aec9600c75..c0c926f40127 100644
--- a/code/core/src/csf-tools/index.ts
+++ b/code/core/src/csf-tools/index.ts
@@ -44,6 +44,7 @@ export {
   printKey,
   printString,
   printValue,
+  reindent,
   removeFromList,
   removeMembers,
   removeStatement,
diff --git a/code/renderers/react/src/componentManifest/generateCodeSnippet.test.tsx b/code/renderers/react/src/componentManifest/generateCodeSnippet.test.tsx
index 4e0c72537cdc..22eb5554343d 100644
--- a/code/renderers/react/src/componentManifest/generateCodeSnippet.test.tsx
+++ b/code/renderers/react/src/componentManifest/generateCodeSnippet.test.tsx
@@ -426,6 +426,44 @@ test('CustomRenderBlockBody only', async () => {
   );
 });
 
+test('async render with a block body', async () => {
+  const input = withCSF3(
+    `export const AsyncRender = {
+      render: async (args) => {
+        const data = await load();
+        return <Button {...args} data={data}>Render</Button>;
+      },
+      args: { foo: 'bar' }
+    };`
+  );
+  expect(generateExample(input)).toMatchInlineSnapshot(`
+    "const AsyncRender = async () => {
+      const data = await load();
+      return <Button foo="bar" data={data}>Render</Button>;
+    };"
+  `);
+});
+
+test('template literal inside a render body keeps its lines', async () => {
+  const input = withCSF3(
+    `export const Template = {
+      render: (args) => {
+        const code = \`line1
+line2\`;
+        return <Button {...args}>{code}</Button>;
+      },
+      args: { foo: 'bar' }
+    };`
+  );
+  expect(generateExample(input)).toMatchInlineSnapshot(`
+    "const Template = () => {
+      const code = \`line1
+    line2\`;
+      return <Button foo="bar">{code}</Button>;
+    };"
+  `);
+});
+
 test('ObjectFalsyArgs only', async () => {
   const input = withCSF3(
     `export const ObjectFalsyArgs = {
diff --git a/code/renderers/react/src/componentManifest/generateCodeSnippet.ts b/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
index 68c15e6847bc..208326d75c7e 100644
--- a/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
+++ b/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
@@ -14,6 +14,7 @@ import {
   metaObject,
   normalizeStoryDeclaration,
   parseModule,
+  reindent,
   resolveRenderFunction,
   storyShapeError,
   walk,
@@ -184,7 +185,7 @@ function functionSnippet(
   if (fn.type === 'ArrowFunctionExpression' && isJsx(fn.body)) {
     if (rewriteJsx(code, fn.body, merged, edits)) {
       const body = printRange(code, fn.body, edits);
-      const kept = readsArgs(`(${body});`) ? params : '';
+      const kept = readsArgs(`${asyncPrefix}() => (${body});`) ? params : '';
       return `const ${storyName} = ${asyncPrefix}(${kept}) => ${body};`;
     }
   } else if (fn.body?.type === 'BlockStatement') {
@@ -196,7 +197,8 @@ function functionSnippet(
     }
     if (changed) {
       const body = printRange(code, fn.body, edits);
-      const kept = readsArgs(`function f() ${body}`) ? params : '';
+      const head = `${asyncPrefix}function${fn.generator ? '*' : ''}`;
+      const kept = readsArgs(`${head} f() ${body}`) ? params : '';
       return fn.type === 'FunctionDeclaration'
         ? `${asyncPrefix}function${fn.generator ? '*' : ''} ${storyName}(${kept}) ${body}`
         : `const ${storyName} = ${asyncPrefix}(${kept}) => ${body};`;
@@ -227,14 +229,7 @@ function printRange(code: string, range: { start: number; end: number }, edits:
 
   const lineStart = code.lastIndexOf('\n', range.start - 1) + 1;
   const indent = /^[ \t]*/.exec(code.slice(lineStart))?.[0] ?? '';
-  return indent
-    ? text
-        .split('\n')
-        .map((line, index) =>
-          index > 0 && line.startsWith(indent) ? line.slice(indent.length) : line
-        )
-        .join('\n')
-    : text;
+  return reindent(text, indent, '');
 }
 
 // Whether code still reads the `args` parameter, so the snippet has to keep declaring it.

From 33392441389f9e385d20437a1ebf76acd09772ab Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 10:15:27 +0900
Subject: [PATCH 066/326] fix(web-components): keep listener handlers as
 written in story snippets

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../story-docs/build-story-docs.test.ts       | 28 +++++++++++++++++++
 .../src/docgen/story-docs/build-story-docs.ts | 14 ++++++++--
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/code/renderers/web-components/src/docgen/story-docs/build-story-docs.test.ts b/code/renderers/web-components/src/docgen/story-docs/build-story-docs.test.ts
index 991333980f76..99bc0c17de57 100644
--- a/code/renderers/web-components/src/docgen/story-docs/build-story-docs.test.ts
+++ b/code/renderers/web-components/src/docgen/story-docs/build-story-docs.test.ts
@@ -329,6 +329,34 @@ describe('buildStoryDocsPayload', () => {
     const host = document.currentScript.previousElementSibling;
     host.addEventListener('shape-change', (event) => event.preventDefault());
   }
+</script>`,
+      },
+    },
+    {
+      name: 'keeps the lines and comments of a multi-line listener',
+      source: `
+        export default { title: 'Example/TestElement', component: 'test-element' };
+        export const Primary = {
+          args: {
+            onShapeChange: (e) => {
+              // log the event
+              console.log(e);
+            },
+          },
+        };
+      `,
+      expected: {
+        id: 'example-testelement--primary',
+        name: 'Primary',
+        snippet: `<test-element></test-element>
+<script>
+  {
+    const host = document.currentScript.previousElementSibling;
+    host.addEventListener('shape-change', (e) => {
+      // log the event
+      console.log(e);
+    });
+  }
 </script>`,
       },
     },
diff --git a/code/renderers/web-components/src/docgen/story-docs/build-story-docs.ts b/code/renderers/web-components/src/docgen/story-docs/build-story-docs.ts
index 1a28992b3f76..19927dc82e3e 100644
--- a/code/renderers/web-components/src/docgen/story-docs/build-story-docs.ts
+++ b/code/renderers/web-components/src/docgen/story-docs/build-story-docs.ts
@@ -8,10 +8,12 @@ import type {
 } from 'storybook/internal/csf-tools';
 import {
   authoredSource,
+  codeOf,
   createStoryArgsResolver,
   createStoryReferenceResolver,
   extractStoryJSDocInfo,
   noSnippetWarning,
+  reindent,
   resolveEffectiveRender,
   sourceOf,
   unwrapExpression,
@@ -434,8 +436,16 @@ const hasSnippetContent = (snippet: ElementSnippet): boolean =>
   snippet.slots.length > 0 ||
   snippet.styleRules.length > 0;
 
-const listenerHandler = (node: Node): string =>
-  isFunctionNode(unwrapExpression(node)) ? sourceOf(node) : '() => {}';
+// The handler runs inside the snippet's `<script>`, so it keeps its lines and comments, re-indented
+// from the story file to the snippet.
+const listenerHandler = (node: Node): string => {
+  if (!isFunctionNode(unwrapExpression(node))) {
+    return '() => {}';
+  }
+  const code = codeOf(node);
+  const closingIndent = /^[ \t]*/.exec(code.slice(code.lastIndexOf('\n') + 1))![0];
+  return reindent(code, closingIndent, '    ');
+};
 
 const incompleteList = (names: string[], suffix: string): string | undefined =>
   names.length === 0

From c5ee2bbaa97984f49bf9286838c149592353c7a3 Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 10:18:06 +0900
Subject: [PATCH 067/326] fix(vue3): keep snippets for template expressions
 with whitespace or outer parentheses

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../transform-template.test.ts                | 35 +++++++++++++++++++
 .../transform-template/transform-template.ts  |  5 +--
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.test.ts b/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.test.ts
index 2d83492a28b4..0a39809e8954 100644
--- a/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.test.ts
+++ b/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.test.ts
@@ -498,6 +498,41 @@ export const Primary = {
     `);
   });
 
+  it('resolves bindings with leading whitespace, line breaks and outer parentheses', async () => {
+    expect(
+      await primarySnippet(`
+export const Primary = {
+  args: { label: 'Hi', active: true },
+  render: (args) => ({
+    components: { MyButton },
+    setup: () => ({ args }),
+    template: \`<MyButton
+      :label="
+        args.label
+      "
+      :active="(args.active)"
+      :class="(args.active ? 'on' : 'off')"
+      v-if=" args.active "
+    >{{ (args.label) }}</MyButton>\`,
+  }),
+};
+`)
+    ).toMatchInlineSnapshot(`
+      "<script lang="ts" setup>
+      import MyButton from './MyButton.vue';
+      </script>
+
+      <template>
+        <MyButton
+              label="Hi"
+              :active="(true)"
+              :class="(true ? 'on' : 'off')"
+              v-if=" true "
+            >{{ ('Hi') }}</MyButton>
+      </template>"
+    `);
+  });
+
   it('bails when a bound arg is missing from the story args altogether', async () => {
     const payload = await buildPayload(`
 export const Primary = {
diff --git a/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.ts b/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.ts
index 63eb60179cf8..ca2c89f8ffca 100644
--- a/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.ts
+++ b/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.ts
@@ -768,11 +768,12 @@ function parseTemplateExpression(code: string): E.Expression | undefined {
     return undefined;
   }
   const [statement, ...rest] = program.body;
-  // Starting anywhere but right after the opening paren means `code` closed it, as in `a) + (b`.
+  // An expression that closed the wrapping paren, as in `a) + (b`, starts at the paren itself.
+  // Whitespace and outer parentheses (which the parser drops) make a valid expression start later.
   if (
     rest.length > 0 ||
     statement?.type !== 'ExpressionStatement' ||
-    (statement.expression as E.Expression & { start: number }).start !== 1
+    (statement.expression as E.Expression & { start: number }).start === 0
   ) {
     return undefined;
   }

From 4b2f24bc217d7d520f322ef591e70cdb4ef0bfee Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 10:25:23 +0900
Subject: [PATCH 068/326] fix(angular-vite): strip comments from template
 bindings and keep template literal lines

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../src/docgen/story-docs-args.test.ts        | 30 ++++++++++
 .../src/docgen/story-docs-args.ts             | 60 +++++++++++++------
 2 files changed, 72 insertions(+), 18 deletions(-)
 create mode 100644 code/frameworks/angular-vite/src/docgen/story-docs-args.test.ts

diff --git a/code/frameworks/angular-vite/src/docgen/story-docs-args.test.ts b/code/frameworks/angular-vite/src/docgen/story-docs-args.test.ts
new file mode 100644
index 000000000000..ee61a7736da2
--- /dev/null
+++ b/code/frameworks/angular-vite/src/docgen/story-docs-args.test.ts
@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest';
+
+import { expressionFromSource } from 'storybook/internal/csf-tools';
+
+import { argFieldValue, evaluateArgExpression } from './story-docs-args.ts';
+
+describe('evaluateArgExpression', () => {
+  it('strips comments from an unevaluable arg, which Angular templates cannot parse', () => {
+    expect(evaluateArgExpression(expressionFromSource(`helper(/* note */ 'x')`), [])).toBe(
+      `helper('x')`
+    );
+    expect(
+      evaluateArgExpression(
+        expressionFromSource(`helper(\n      'x', // trailing\n      2,\n    )`),
+        []
+      )
+    ).toBe(`helper(\n  'x',\n  2,\n)`);
+  });
+});
+
+describe('argFieldValue', () => {
+  it('keeps comments and dedents continuation lines, but not template literal values', () => {
+    expect(argFieldValue(expressionFromSource(`(value) => /* why */ value.trim()`))).toBe(
+      `(value) => /* why */ value.trim()`
+    );
+    expect(argFieldValue(expressionFromSource('helper({\n      code: `a\n  b`,\n    })'))).toBe(
+      'helper({\n  code: `a\n  b`,\n})'
+    );
+  });
+});
diff --git a/code/frameworks/angular-vite/src/docgen/story-docs-args.ts b/code/frameworks/angular-vite/src/docgen/story-docs-args.ts
index 9dc66be6286f..3084e8c16da4 100644
--- a/code/frameworks/angular-vite/src/docgen/story-docs-args.ts
+++ b/code/frameworks/angular-vite/src/docgen/story-docs-args.ts
@@ -5,6 +5,8 @@ import {
   codeOf,
   expressionFromSource,
   keyOf,
+  parseModule,
+  reindent,
   unwrapExpression,
 } from 'storybook/internal/csf-tools';
 
@@ -28,14 +30,6 @@ export const createArgExternalizer =
       : expressionFromSource(printExpressionValue(value, new Set()));
   };
 
-// An arg no static evaluation could reduce to a value falls back to its source text. Every
-// expression is escaped for the attribute position it lands in: the double-quote delimiter and
-// text Angular's lexer would decode as a character reference survive the round-trip unchanged.
-export const evaluateArgExpression = (node: Node, enums: SnippetEnum[]): string => {
-  const literal = evaluateArgLiteral(node, enums);
-  return escapeAttributeExpression(literal ?? printArgSource(unwrapExpression(node)));
-};
-
 /**
  * The arg's value as a standalone expression, or `undefined` when it needs the story to run.
  *
@@ -48,18 +42,48 @@ export const evaluateArgLiteral = (node: Node, enums: SnippetEnum[]): string | u
   return value === EVAL_FAILED ? undefined : printExpressionValue(value, new Set());
 };
 
-export const argFieldValue = (node: Node): string => printArgSource(unwrapExpression(node));
+export const argFieldValue = (node: Node): string => printArgSource(codeOf(unwrapExpression(node)));
 
-// Continuation lines keep the story file's indentation, which the snippet replaces with its own.
-const printArgSource = (node: Node): string => {
-  const [first, ...rest] = codeOf(node).split(/\r?\n/);
-  const indent = Math.min(
-    ...rest.filter((line) => line.trim()).map((line) => /^[ \t]*/.exec(line)![0].length)
-  );
-  const dedented = rest.map((line) =>
-    line.slice(Math.min(indent, line.length)).replace(/^\t+/, (tabs) => '  '.repeat(tabs.length))
+// An arg no static evaluation could reduce to a value falls back to its source text, without the
+// comments a template expression cannot take (a class field keeps them). Every expression is
+// escaped for the attribute position it lands in: the double-quote delimiter and text Angular's
+// lexer would decode as a character reference survive the round-trip unchanged.
+export const evaluateArgExpression = (node: Node, enums: SnippetEnum[]): string => {
+  const literal = evaluateArgLiteral(node, enums);
+  return escapeAttributeExpression(
+    literal ?? printArgSource(withoutComments(codeOf(unwrapExpression(node))))
   );
-  return [first, ...dedented].join('\n');
+};
+
+// Continuation lines keep the story file's indentation, which the snippet replaces with its own.
+// Lines inside template literals are values and keep theirs.
+const printArgSource = (source: string): string => {
+  const code = source.replace(/\r\n/g, '\n');
+  const lines = code.split('\n').slice(1);
+  const last = lines.at(-1);
+  const indents = lines.filter((line) => line.trim()).map((line) => /^[ \t]*/.exec(line)![0]);
+  // A closing bracket sits at the expression's own indentation; otherwise the shallowest line does.
+  const indent =
+    last && /^[ \t]*[)\]}]/.test(last)
+      ? /^[ \t]*/.exec(last)![0]
+      : indents.reduce(
+          (shortest, current) => (current.length < shortest.length ? current : shortest),
+          indents[0] ?? ''
+        );
+  return reindent(code, indent, '').replace(/^\t+/gm, (tabs) => '  '.repeat(tabs.length));
+};
+
+const withoutComments = (code: string): string => {
+  const wrapped = `(${code}\n)`;
+  const { comments } = parseModule(wrapped);
+  let result = '';
+  let cursor = 0;
+  for (const comment of comments) {
+    result += wrapped.slice(cursor, comment.start);
+    cursor = comment.end + /^[ \t]*/.exec(wrapped.slice(comment.end))![0].length;
+  }
+  result += wrapped.slice(cursor);
+  return result.slice(1, -2).replace(/[ \t]+\n/g, '\n');
 };
 
 // Angular expression strings support backslash escapes, so quoting stays lossless.

From 9648cae18be5fa5dd50a9e6d6572f38e5b80a5eb Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 10:28:43 +0900
Subject: [PATCH 069/326] fix(addon-vitest): insert template statements on
 their own lines and skip imported names

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../src/updateVitestFile.statements.test.ts   | 47 +++++++++++++++++++
 code/addons/vitest/src/updateVitestFile.ts    | 13 ++++-
 2 files changed, 58 insertions(+), 2 deletions(-)
 create mode 100644 code/addons/vitest/src/updateVitestFile.statements.test.ts

diff --git a/code/addons/vitest/src/updateVitestFile.statements.test.ts b/code/addons/vitest/src/updateVitestFile.statements.test.ts
new file mode 100644
index 000000000000..cea521cc64f8
--- /dev/null
+++ b/code/addons/vitest/src/updateVitestFile.statements.test.ts
@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest';
+
+import { SourceEditor } from 'storybook/internal/csf-tools';
+
+import { dedent } from 'ts-dedent';
+
+import { updateConfigFile } from './updateVitestFile.ts';
+
+const template = dedent`
+  import { fileURLToPath } from 'node:url';
+  import { dirname } from 'node:path';
+  // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+  const dirname = fileURLToPath(new URL('.', import.meta.url));
+
+  export default defineConfig({
+    test: {
+      projects: [{ extends: true, test: { name: 'storybook' } }],
+    },
+  });
+`;
+
+describe('updateConfigFile statements', () => {
+  it('inserts the template statements on their own lines after the last import', () => {
+    const target = new SourceEditor(
+      `import react from '@vitejs/plugin-react'; const x = 1\nexport default defineConfig({ test: {} })\n`
+    );
+
+    expect(updateConfigFile(template, target)).toBe(true);
+
+    const code = target.toString();
+    expect(code).toMatch(/^import react from '@vitejs\/plugin-react'; const x = 1$/m);
+    expect(code).toMatch(/^\/\/ More info at: .*\nconst dirname = /m);
+    expect(() => new SourceEditor(code)).not.toThrow();
+  });
+
+  it('does not declare a name the config already imports', () => {
+    const target = new SourceEditor(dedent`
+      import { dirname } from 'node:path';
+      import { fileURLToPath } from 'node:url';
+      export default defineConfig({ test: {} });
+    `);
+
+    expect(updateConfigFile(template, target)).toBe(true);
+    expect(target.toString()).not.toContain('const dirname');
+    expect(() => new SourceEditor(target.toString())).not.toThrow();
+  });
+});
diff --git a/code/addons/vitest/src/updateVitestFile.ts b/code/addons/vitest/src/updateVitestFile.ts
index 3c71e38a1b47..1e327f1957de 100644
--- a/code/addons/vitest/src/updateVitestFile.ts
+++ b/code/addons/vitest/src/updateVitestFile.ts
@@ -11,6 +11,7 @@ import {
   appendToList,
   arrayList,
   itemText,
+  reindent,
   objectList,
   prependToList,
 } from 'storybook/internal/csf-tools';
@@ -68,7 +69,7 @@ const elementTexts = (editor: SourceEditor, array: E.ArrayExpression) =>
     itemText(editor, arrayList(editor, array), element)
   );
 
-const indent = (text: string, prefix: string) => prefix + text.replaceAll('\n', `\n${prefix}`);
+const indent = (text: string, prefix: string) => prefix + reindent(text, '', prefix);
 
 const lineIndentAt = (code: string, index: number) =>
   /^[ \t]*/.exec(code.slice(code.lastIndexOf('\n', index - 1) + 1))![0];
@@ -307,7 +308,9 @@ const missingStatements = (source: SourceEditor, target: E.Program) => {
         node.type === 'ImportDeclaration' &&
         node.specifiers.some((specifier) => specifier.local.name === name)
     );
+  // Any top-level binding counts, so a name the config imports is not declared a second time.
   const declaresVariable = (name: string) =>
+    declaresImport(name) ||
     target.body.some(
       (node) =>
         node.type === 'VariableDeclaration' &&
@@ -347,7 +350,13 @@ export const updateConfigFile = (sourceCode: string, target: SourceEditor): bool
   if (statements.length > 0) {
     const lastImport = target.program.body.findLast((node) => node.type === 'ImportDeclaration');
     if (lastImport) {
-      target.edits.appendLeft(lastImport.end, `\n${statements.join('\n')}`);
+      // On the line after the import, so code and comments sharing its line stay where they are.
+      const lineEnd = target.code.indexOf('\n', lastImport.end);
+      if (lineEnd === -1) {
+        target.edits.append(`\n${statements.join('\n')}`);
+      } else {
+        target.edits.appendLeft(lineEnd + 1, `${statements.join('\n')}\n`);
+      }
     } else {
       target.edits.appendLeft(target.program.body[0].start, `${statements.join('\n')}\n\n`);
     }

From fa393abafcb8b3e877268fe4c560b5c989ab0757 Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 10:31:23 +0900
Subject: [PATCH 070/326] fix(csf-tools): hoist parenthesized default exports
 without dropping their parentheses

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/CsfFile.ts                   | 11 +++++++++--
 code/core/src/csf-tools/estree/editor.test.ts        | 12 ++++++++++++
 code/core/src/csf-tools/estree/editor.ts             |  4 ++++
 .../vitest-plugin/component-transformer.test.ts      |  7 +++++++
 .../csf-tools/vitest-plugin/component-transformer.ts |  5 +++--
 5 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index 5624e051cac0..caadc519943a 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -33,7 +33,12 @@ import {
   locationOf,
   unwrapExpression,
 } from './estree/ast.ts';
-import { type InputSourceMap, SourceEditor, appendStatement } from './estree/editor.ts';
+import {
+  type InputSourceMap,
+  SourceEditor,
+  appendStatement,
+  exportDefaultKeywords,
+} from './estree/editor.ts';
 import { generateUid } from './estree/scope.ts';
 import { findVarInitialization } from './findVarInitialization.ts';
 
@@ -607,7 +612,9 @@ export class CsfFile {
       const metaName = generateUid(this._editor.scopes, 'meta');
       this._metaVariableName = metaName;
       const declaration = node.declaration as Node & { start: number; end: number };
-      this._editor.edits.overwrite(node.start, declaration.start, `const ${metaName} = `);
+      // Only the keywords: the declaration's span may sit inside parentheses the parser dropped.
+      const keywords = exportDefaultKeywords(this._editor.code, node.start);
+      this._editor.edits.overwrite(node.start, node.start + keywords, `const ${metaName} = `);
       this._editor.edits.appendLeft(node.end, `\nexport default ${metaName};`);
       this._metaStatement = node;
       decl = declaration;
diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index db2d1a8bf32b..9900ee5b6311 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -115,6 +115,18 @@ describe('removeStatement', () => {
   });
 });
 
+describe('parenthesized default exports', () => {
+  it('hoists an inline meta without breaking its parentheses', () => {
+    const csf = loadCsf(`export default ({ title: 'X' } satisfies Meta);\nexport const A = {};`, {
+      transformInlineMeta: true,
+      makeTitle: (title) => title ?? 'title',
+    }).parse();
+    expect(printCsf(csf).code).toBe(
+      `const _meta = ({ title: 'X' } satisfies Meta);\nexport default _meta;\nexport const A = {};`
+    );
+  });
+});
+
 describe('line endings', () => {
   it('writes inserted text with the line ending of the file', () => {
     const csf = parse('export default {\r\n  title: "A",\r\n};\r\n');
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 6c1dbcc7c1f2..891b3a7cce8d 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -711,6 +711,10 @@ const methodFromFunction = (text: string, key: string) => {
     : undefined;
 };
 
+// Length of `export default` and the whitespace after it at `start`.
+export const exportDefaultKeywords = (code: string, start: number) =>
+  /^export\s+default\s*/.exec(code.slice(start))![0].length;
+
 export const isSpan = (value: unknown): value is Span =>
   isNode(value) && typeof (value as unknown as Span).start === 'number';
 
diff --git a/code/core/src/csf-tools/vitest-plugin/component-transformer.test.ts b/code/core/src/csf-tools/vitest-plugin/component-transformer.test.ts
index d7468cfdd1e6..6e20a8891e5a 100644
--- a/code/core/src/csf-tools/vitest-plugin/component-transformer.test.ts
+++ b/code/core/src/csf-tools/vitest-plugin/component-transformer.test.ts
@@ -114,6 +114,13 @@ describe('component transformer', () => {
 
     expect(result.code).toContain('const _Spinner = someWrapper(Component);');
     expect(result.code).toContain('export default _Spinner;');
+
+    const parenthesized = await transform({
+      code: `import { memo } from 'react';\nfunction Inner() {}\nexport default (memo(Inner));`,
+      fileName: 'src/components/Button.tsx',
+    });
+    expect(parenthesized.code).toContain('const _Button = (memo(Inner));');
+    expect(result.code).toContain('export default _Spinner;');
     expect(result.code).toContain('_test("Spinner", _testStory({');
 
     expect(result.code).toMatchInlineSnapshot(`
diff --git a/code/core/src/csf-tools/vitest-plugin/component-transformer.ts b/code/core/src/csf-tools/vitest-plugin/component-transformer.ts
index 290375e310d6..36f7707a335e 100644
--- a/code/core/src/csf-tools/vitest-plugin/component-transformer.ts
+++ b/code/core/src/csf-tools/vitest-plugin/component-transformer.ts
@@ -13,6 +13,7 @@ import {
   prependStatement,
   printKey,
   printValue,
+  exportDefaultKeywords,
 } from '../estree/editor.ts';
 import { generateUid } from '../estree/scope.ts';
 import { GeneratedTail, createTestGuardDeclaration, printWithTail } from './transformer.ts';
@@ -163,8 +164,8 @@ const collectComponentExports = (editor: SourceEditor, fileName: string) => {
       ) {
         const identifierName = createComponentNameFromFileName(fileName);
         const identifier = generateUid(scopes, identifierName);
-        const span = declaration as Node & { start: number };
-        editor.edits.overwrite(node.start, span.start, `const ${identifier} = `);
+        const keywords = exportDefaultKeywords(editor.code, node.start);
+        editor.edits.overwrite(node.start, node.start + keywords, `const ${identifier} = `);
         editor.edits.appendLeft(node.end, `\nexport default ${identifier};`);
 
         if (declaration.type === 'CallExpression') {

From 55518486cd9cd6a79e254ad0e8366279ab6c28fa Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 10:33:12 +0900
Subject: [PATCH 071/326] fix(cli): keep parentheses when the CSF factory
 codemod drops a type cast

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/index.ts              |  1 +
 .../helpers/story-to-csf-factory.test.ts      | 25 +++++++++++++++++++
 .../codemod/helpers/story-to-csf-factory.ts   | 13 ++++++----
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/code/core/src/csf-tools/index.ts b/code/core/src/csf-tools/index.ts
index c0c926f40127..928b7c806c4e 100644
--- a/code/core/src/csf-tools/index.ts
+++ b/code/core/src/csf-tools/index.ts
@@ -46,6 +46,7 @@ export {
   printValue,
   reindent,
   removeFromList,
+  withParentheses,
   removeMembers,
   removeStatement,
 } from './estree/editor.ts';
diff --git a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
index d6772773ff4f..2aa7de49e83d 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
@@ -923,6 +923,31 @@ describe('stories codemod', () => {
         `);
       });
 
+      it('migrates parenthesized expressions before satisfies and as', async () => {
+        await expect(
+          transform(dedent`
+            import type { StoryFn, StoryObj } from '@storybook/react';
+            import { Button } from './Button';
+
+            export default { component: Button };
+
+            export const P = ((args) => <Button {...args} />) satisfies
+              StoryFn<typeof Button>;
+            export const O = ({ args: { a: 1 } }) satisfies StoryObj;
+            export const A = ({ args: { a: 2 } }) as StoryObj;
+          `)
+        ).resolves.toMatchInlineSnapshot(`
+          import preview from "#.storybook/preview";
+          import { Button } from "./Button";
+
+          const meta = preview.meta({ component: Button });
+
+          export const P = meta.story((args) => <Button {...args} />);
+          export const O = meta.story({ args: { a: 1 } });
+          export const A = meta.story({ args: { a: 2 } });
+        `);
+      });
+
       it('keeps the custom args type of a story on that story', async () => {
         await expect(
           transform(dedent`
diff --git a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
index c90f2242e102..76e14578ad4d 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
@@ -5,6 +5,7 @@ import {
   loadCsf,
   printCsf,
   walk,
+  withParentheses,
 } from 'storybook/internal/csf-tools';
 import { logger } from 'storybook/internal/node-logger';
 
@@ -348,13 +349,15 @@ export async function storyToCsfFactory(
       ? customArgs.shared(storyInits.map(({ argsTypes }) => argsTypes))
       : [];
 
-  // Wraps `inner` in `before…after`, dropping the type cast of `outer` around it.
+  // Wraps `inner` in `before…after`, dropping the type cast of `outer` around it. The parser drops
+  // parentheses from spans, so `(inner) satisfies T` keeps its own.
   const wrap = (outer: Node, inner: Node, before: string, after: string) => {
-    if (inner.end < outer.end) {
-      editor.edits.remove(inner.end, outer.end);
+    const span = withParentheses(editor.code, inner, outer.start, outer.end);
+    if (span.end < outer.end) {
+      editor.edits.remove(span.end, outer.end);
     }
-    editor.edits.appendRight(inner.start, before);
-    editor.edits.appendLeft(inner.end, after);
+    editor.edits.appendRight(span.start, before);
+    editor.edits.appendLeft(span.end, after);
   };
 
   // modify meta

From 5ed211eb4ba12b48b1f1c66d8c21d1c2a03b8119 Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 10:34:53 +0900
Subject: [PATCH 072/326] fix(csf-tools): reject foreign AST nodes and keep
 copied expressions placeable

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/CsfObject.test.ts | 27 +++++++++++++++++
 code/core/src/csf-tools/CsfObject.ts      | 35 +++++++++++++++++++----
 2 files changed, 57 insertions(+), 5 deletions(-)

diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index 619cfba06d4f..a1418d09d8b7 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -134,6 +134,33 @@ describe('CsfObject', () => {
     expect(csf.changed).toBe(false);
   });
 
+  it('rejects AST-like nodes that did not come from this API and prints plain data', () => {
+    const csf = parse(`export default { title: 'X' };`);
+    const [meta] = csf.objects({ stories: false });
+
+    expect(() => meta.set(['framework'], { type: 'StringLiteral', value: 'x' } as any)).toThrow(
+      'StringLiteral node'
+    );
+    expect(meta.set(['control'], { type: 'button', label: 'Save' })).toEqual({
+      ok: true,
+      changed: true,
+    });
+    expect(printCsf(csf).code).toContain(`control: { type: 'button', label: 'Save' }`);
+  });
+
+  it('places copied expressions so the surrounding code survives', () => {
+    const csf = parse(`export default { a: (1, 2) };\nexport const B = { b: 0 };`);
+    const [meta, story] = csf.objects();
+
+    story.set(['b'], meta.get(['a'])!);
+    expect(story.set(['c'], parseExpression('1 //x'))).toEqual({ ok: true, changed: true });
+
+    const [, again] = parse(printCsf(csf).code).objects();
+    expect(printExpression(again.get(['b'])!)).toBe('1, 2');
+    expect(again.getValue(['c'])).toBe(1);
+    expect(csf.mutationDiagnostics).toEqual([]);
+  });
+
   it('edits a local object referenced by a story and cleans up the empty parent', () => {
     const csf = parse(
       `const a11y = { element: '#root' }; export default {}; export const Story = { parameters: { a11y } };`
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index b1f5b0ffe299..0364963f379c 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -4,9 +4,11 @@ import {
   type Property,
   type SourceLocation,
   isIdentifier,
+  isNode,
   isNumericLiteral,
   locationOf,
   expressionFromSource,
+  parseModule,
   staticKey,
   textOf,
   unwrapExpression,
@@ -28,6 +30,8 @@ import {
   separatorBefore,
 } from './estree/editor.ts';
 
+import { visitorKeys } from 'oxc-parser';
+
 export type CsfObjectTarget =
   | { kind: 'config' }
   | { kind: 'call-argument'; importedName: string; methodName: string }
@@ -90,6 +94,21 @@ export type CsfExpression = E.Expression;
  */
 export const parseExpression = (code: string): CsfExpression => expressionFromSource(code);
 
+// An object that looks like an AST node rather than data: a node type Babel or ESTree would produce.
+const AST_TYPE =
+  /^(?:TS|JSX)?[A-Z]\w*(?:Expression|Literal|Statement|Declaration|Identifier|Pattern|Property|Specifier|Element|Fragment|Template|Block)$/;
+
+const isAstLike = (value: unknown): value is Node =>
+  isNode(value) && (value.type in visitorKeys || AST_TYPE.test(value.type));
+
+// Source text ready to be placed as a value: a comma expression keeps its parentheses, and a
+// trailing line comment ends its line so the code after it survives.
+const placeableSource = (source: string, type: string) => {
+  const text = type === 'SequenceExpression' && !source.startsWith('(') ? `(${source})` : source;
+  const lastComment = parseModule(`(${text}\n)`).comments.at(-1);
+  return lastComment?.type === 'Line' && lastComment.end === text.length + 1 ? `${text}\n` : text;
+};
+
 /** Source of an expression returned by `get` or `parseExpression`, or of any node inside one. */
 export const printExpression = (node: Node): string => {
   const source = textOf(node);
@@ -508,12 +527,18 @@ class CsfObjectEditor implements CsfObject {
   }
 
   private sourceFor(value: CsfValue | CsfExpression) {
-    if (!isSpan(value)) {
-      return printValue(value, this.editor.quote);
+    if (isSpan(value)) {
+      // Registers the source of this file's nodes, so a node read from the file prints as written.
+      const node = value as Node;
+      this.editor.parentOf(node);
+      return placeableSource(printExpression(node), node.type);
+    }
+    if (isAstLike(value)) {
+      throw new Error(
+        `CsfObject: expressions must come from \`get\`, \`transform\` or \`parseExpression\`, not a ${value.type} node`
+      );
     }
-    // Registers the source of this file's nodes, so a node read from the file prints as written.
-    this.editor.parentOf(value as Node);
-    return printExpression(value as Node);
+    return printValue(value, this.editor.quote);
   }
 
   set(path: readonly string[], value: CsfValue | CsfExpression): CsfMutationResult {

From 6532929f8893bc9395ece212bf1fb4312c9f3991 Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 10:36:06 +0900
Subject: [PATCH 073/326] fix(csf-tools): normalize line endings in
 originalSource and descriptions

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/enrichCsf.test.ts | 19 +++++++++++++++++++
 code/core/src/csf-tools/enrichCsf.ts      |  7 ++++---
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/code/core/src/csf-tools/enrichCsf.test.ts b/code/core/src/csf-tools/enrichCsf.test.ts
index 382f9ad6fb89..17b032872177 100644
--- a/code/core/src/csf-tools/enrichCsf.test.ts
+++ b/code/core/src/csf-tools/enrichCsf.test.ts
@@ -759,6 +759,25 @@ const source = (csfExport: string) => {
 };
 
 describe('extractSource', () => {
+  it('normalizes CRLF line endings in the source and descriptions', async () => {
+    const code = [
+      "export default { title: 'Button' };",
+      '/**',
+      ' * Line one',
+      ' *',
+      ' * Line two',
+      ' */',
+      'export const Basic = {',
+      '  args: { a: 1 },',
+      '};',
+    ].join('\r\n');
+
+    const result = await enrich(code, code);
+
+    expect(result).toContain(`originalSource: "{\\n  args: { a: 1 },\\n}"`);
+    expect(result).toContain(`story: "Line one\\n\\nLine two"`);
+  });
+
   it('csf1', () => {
     expect(
       source(dedent`
diff --git a/code/core/src/csf-tools/enrichCsf.ts b/code/core/src/csf-tools/enrichCsf.ts
index 9a09628cd570..c875eb0de0e9 100644
--- a/code/core/src/csf-tools/enrichCsf.ts
+++ b/code/core/src/csf-tools/enrichCsf.ts
@@ -117,13 +117,14 @@ export const enrichCsf = async (csf: CsfFile, csfSource: CsfFile, options?: Enri
   });
 };
 
-// The story's own source text: the initializer of `const X = …`, or the function itself.
+// The story's own source text: the initializer of `const X = …`, or the function itself. Line
+// endings are normalized, so a CRLF checkout documents the same source as an LF one.
 export const extractSource = (node: Node, code: string) => {
   const src = (node?.type === 'VariableDeclarator' ? node.init : node) as
     | { start: number; end: number }
     | null
     | undefined;
-  return src ? code.slice(src.start, src.end) : '';
+  return src ? code.slice(src.start, src.end).replace(/\r\n/g, '\n') : '';
 };
 
 export const leadingComments = (node: Node | undefined, editor: SourceEditor) => {
@@ -155,7 +156,7 @@ export const extractDescription = (node: Node | undefined, editor: SourceEditor)
       }
       return (
         comment.value
-          .split('\n')
+          .split(/\r?\n/)
           // remove leading *'s and spaces from the beginning of each line
           .map((line) => line.replace(/^(\s+)?(\*+)?(\s)?/, ''))
           .join('\n')

From 669d42fca27113bbc71ad1f2c48f32a87abde126 Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 10:38:48 +0900
Subject: [PATCH 074/326] fix(core): report re-exported stories as unsupported
 when saving args

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../save-story/update-args-in-csf-file.test.ts      | 13 ++++++++++++-
 .../utils/save-story/update-args-in-csf-file.ts     | 10 +++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/code/core/src/core-server/utils/save-story/update-args-in-csf-file.test.ts b/code/core/src/core-server/utils/save-story/update-args-in-csf-file.test.ts
index dc15d6fb8046..c577b82d4925 100644
--- a/code/core/src/core-server/utils/save-story/update-args-in-csf-file.test.ts
+++ b/code/core/src/core-server/utils/save-story/update-args-in-csf-file.test.ts
@@ -3,12 +3,13 @@ import { join } from 'node:path';
 
 import { describe, expect, test } from 'vitest';
 
-import { printCsf, readCsf } from 'storybook/internal/csf-tools';
+import { loadCsf, printCsf, readCsf } from 'storybook/internal/csf-tools';
 
 import { format } from 'prettier';
 
 import { getDiff } from './getDiff.ts';
 import { updateArgsInCsfFile } from './update-args-in-csf-file.ts';
+import { SaveStoryError } from './utils.ts';
 
 const makeTitle = (userTitle: string) => userTitle;
 
@@ -95,6 +96,16 @@ describe('success', () => {
         "
     `);
   });
+  test('re-exported story', async () => {
+    const parsed = loadCsf(
+      `export default { title: 'X' };\nconst Local = { args: { a: 1 } };\nexport { Local as Alias };`,
+      { makeTitle }
+    ).parse();
+
+    await expect(() =>
+      updateArgsInCsfFile(parsed, parsed.getStoryExport('Alias'), { a: 2 })
+    ).rejects.toThrow(SaveStoryError);
+  });
   test('Unsupported CSF Variances', async () => {
     const newArgs = { bordered: true, initial: 'test1' };
 
diff --git a/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts b/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts
index 45848274f87c..d39b08beede6 100644
--- a/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts
+++ b/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts
@@ -12,7 +12,15 @@ import { SaveStoryError } from './utils.ts';
 import { objectSource, valueToSource } from './valueToSource.ts';
 
 // Edits accumulate on `csf`; print them with `printCsf`.
-export const updateArgsInCsfFile = async (csf: CsfFile, node: Node, input: Record<string, any>) => {
+export const updateArgsInCsfFile = async (
+  csf: CsfFile,
+  node: Node | undefined,
+  input: Record<string, any>
+) => {
+  // A story exported through `export { Local as Alias }` has no export of its own to edit.
+  if (!node) {
+    throw new SaveStoryError(`Updating a re-exported story is not supported`);
+  }
   const editor = csf._editor;
   const args = Object.fromEntries(
     Object.entries(input).map(([k, v]) => {

From 87214877cc66b23c8b2f604e11ce79a20bad045c Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 10:42:34 +0900
Subject: [PATCH 075/326] fix(core): automock destructured exports with default
 values

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/mocking-utils/automock.test.ts | 23 ++++++++++++++++++++
 code/core/src/mocking-utils/automock.ts      |  5 ++---
 2 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 code/core/src/mocking-utils/automock.test.ts

diff --git a/code/core/src/mocking-utils/automock.test.ts b/code/core/src/mocking-utils/automock.test.ts
new file mode 100644
index 000000000000..4afc93dfc612
--- /dev/null
+++ b/code/core/src/mocking-utils/automock.test.ts
@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest';
+
+import { getAutomockCode } from './automock.ts';
+import { parseModuleAst } from './extract.ts';
+
+describe('getAutomockCode', () => {
+  it('mocks destructured exports, including ones with defaults', () => {
+    const code = `
+      const obj = { a: 1, b: 2 };
+      export const { a = 1, b: renamed } = obj;
+      export const [first = 0] = [1];
+      export async function getUser() {}
+    `;
+
+    const mocked = getAutomockCode(code, false, (source) =>
+      parseModuleAst(source, '/mod.ts')
+    ).toString();
+
+    for (const name of ['a', 'renamed', 'first', 'getUser']) {
+      expect(mocked).toContain(`["${name}"]: ${name},`);
+    }
+  });
+});
diff --git a/code/core/src/mocking-utils/automock.ts b/code/core/src/mocking-utils/automock.ts
index 245788e70e24..1ea4da39c6fe 100644
--- a/code/core/src/mocking-utils/automock.ts
+++ b/code/core/src/mocking-utils/automock.ts
@@ -99,10 +99,9 @@ export function automockModule(
         } else if (expression.type === 'RestElement') {
           traversePattern(expression.argument);
         }
-        // const [name[1], name[2]] = []
-        // cannot be used in export
+        // export const { a = 1 } = {}
         else if (expression.type === 'AssignmentPattern') {
-          throw new Error(`AssignmentPattern is not supported. Please open a new bug report.`);
+          traversePattern(expression.left);
         }
         // const test = thing.func()
         // cannot be used in export

From 702e189eb6822997f418f85665bb6fce1dbda10f Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 10:44:55 +0900
Subject: [PATCH 076/326] fix(csf-tools): import repeated names once and keep
 array holes in place

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/ConfigFile.test.ts    |  8 ++++++
 code/core/src/csf-tools/ConfigFile.ts         |  5 ++--
 code/core/src/csf-tools/estree/editor.test.ts | 13 +++++++++
 code/core/src/csf-tools/estree/editor.ts      | 27 +++++++++++++------
 4 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/code/core/src/csf-tools/ConfigFile.test.ts b/code/core/src/csf-tools/ConfigFile.test.ts
index 3c624b24fd06..aae4a02711b2 100644
--- a/code/core/src/csf-tools/ConfigFile.test.ts
+++ b/code/core/src/csf-tools/ConfigFile.test.ts
@@ -1354,6 +1354,14 @@ describe('ConfigFile', () => {
   });
 
   describe('setImport', () => {
+    it('imports a repeated name once', () => {
+      const config = loadConfig(`export default {};`).parse();
+      config.setImport(['a', 'a'], 'x');
+      config.setImport(['a', 'b', 'b'], 'x');
+
+      expect(formatConfig(config)).toBe(`import { a, b } from "x";\nexport default {};`);
+    });
+
     it('keeps a license header above the imports it adds', () => {
       const source = dedent`
         /*
diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index 425f40cea62c..a29b2d695a94 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -999,10 +999,11 @@ export class ConfigFile implements CsfObject {
       }
       // Handle named imports e.g. import { foo } from 'bar'
     } else if (Array.isArray(importSpecifier)) {
+      const names = [...new Set(importSpecifier)];
       if (!importDeclaration) {
-        prependStatement(editor, `import { ${importSpecifier.join(', ')} } from ${source};`);
+        prependStatement(editor, `import { ${names.join(', ')} } from ${source};`);
       } else {
-        const missing = importSpecifier.filter((name) => !has('ImportSpecifier', name));
+        const missing = names.filter((name) => !has('ImportSpecifier', name));
         if (missing.length > 0) {
           this._addSpecifiers(importDeclaration, { named: missing });
         }
diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index 9900ee5b6311..682445b17538 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -88,6 +88,19 @@ describe('withParentheses', () => {
   });
 });
 
+describe('array holes', () => {
+  it('keeps leading holes when appending to and emptying an array', () => {
+    const editor = new SourceEditor(`export default { addons: [, 'a'] };`);
+    appendToList(editor, arrayList(editor, defaultExportArray(editor)), [`'b'`], '');
+    expect(editor.toString()).toBe(`export default { addons: [, 'a', 'b'] };`);
+
+    const removal = new SourceEditor(`export default { addons: [, 'a'] };`);
+    const array = defaultExportArray(removal);
+    removeFromList(removal, arrayList(removal, array), [array.elements[1]!]);
+    expect(removal.toString()).toBe(`export default { addons: [,] };`);
+  });
+});
+
 describe('removeStatement', () => {
   it('removes the leading comments with the statement', () => {
     const editor = new SourceEditor(dedent`
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 891b3a7cce8d..eaf9e0f1df0b 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -274,14 +274,25 @@ export const objectList = (object: E.ObjectExpression | E.ObjectPattern): List =
   items: object.properties,
 });
 
-// Nodes are parsed without parentheses, so an element's span may sit inside `( )`.
-export const arrayList = (editor: SourceEditor, array: E.ArrayExpression): List => ({
-  open: array.start + 1,
-  close: array.end - 1,
-  items: array.elements
-    .filter((element): element is NonNullable<typeof element> => !!element)
-    .map((element) => withParentheses(editor.code, element, array.start + 1, array.end - 1)),
-});
+// Nodes are parsed without parentheses, so an element's span may sit inside `( )`. Leading holes
+// (`[, a]`) stay in place: the list opens after their commas.
+export const arrayList = (editor: SourceEditor, array: E.ArrayExpression): List => {
+  const { code } = editor;
+  let open = array.start + 1;
+  for (const element of array.elements) {
+    if (element) {
+      break;
+    }
+    open = scanFor(code, open, array.end - 1, ',') ?? open;
+  }
+  return {
+    open,
+    close: array.end - 1,
+    items: array.elements
+      .filter((element): element is NonNullable<typeof element> => !!element)
+      .map((element) => withParentheses(code, element, open, array.end - 1)),
+  };
+};
 
 /** Widen a span to the balanced parentheses wrapped directly around it, within `lower..upper`. */
 export const withParentheses = (code: string, span: Span, lower = 0, upper = code.length): Span => {

From 01a758c4cfaa3524d0908c909e7afc977d020eea Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 10:54:24 +0900
Subject: [PATCH 077/326] fix(csf-tools): print a code frame in story shape
 errors

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../core-server/utils/warnWhenUsingArgTypesRegex.ts    |  9 +--------
 code/core/src/csf-tools/estree/ast.ts                  |  8 ++++++++
 code/core/src/csf-tools/story-shape/normalize-story.ts |  7 ++-----
 ...renderers-vue3-vue3-vite-default-ts-decorators.json |  2 +-
 ...derers-vue3-vue3-vite-default-ts-mount-in-play.json |  2 +-
 .../src/componentManifest/generateCodeSnippet.test.tsx |  7 ++++++-
 .../react/src/componentManifest/generator.test.ts      | 10 ++++++++--
 7 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts b/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts
index e45958608fa3..1b931a9160d4 100644
--- a/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts
+++ b/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts
@@ -5,7 +5,7 @@ import type { StorybookConfig } from 'storybook/internal/types';
 import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
 
-import { locationOf, parseModule, walk } from '../../csf-tools/estree/ast.ts';
+import { codeFrame, parseModule, walk } from '../../csf-tools/estree/ast.ts';
 
 export async function warnWhenUsingArgTypesRegex(
   previewConfigPath: string | undefined,
@@ -47,10 +47,3 @@ export async function warnWhenUsingArgTypesRegex(
     });
   }
 }
-
-// `file (line:column)` and the offending line with a marker under the identifier.
-const codeFrame = (fileName: string, code: string, index: number) => {
-  const { line, column } = locationOf(code, index, index).start;
-  const text = code.split('\n')[line - 1] ?? '';
-  return `${fileName}: (${line}:${column})\n> ${line} | ${text}\n  ${' '.repeat(String(line).length)} | ${' '.repeat(column)}^`;
-};
diff --git a/code/core/src/csf-tools/estree/ast.ts b/code/core/src/csf-tools/estree/ast.ts
index e81bfafb0afb..061de550cf69 100644
--- a/code/core/src/csf-tools/estree/ast.ts
+++ b/code/core/src/csf-tools/estree/ast.ts
@@ -137,6 +137,14 @@ export const locationOf = (code: string, start: number, end: number): SourceLoca
   end: position(code, end),
 });
 
+/** `file: (line:column)` and the offending line with a marker under `index`, as Babel printed it. */
+export const codeFrame = (fileName: string | undefined, code: string, index: number) => {
+  const { line, column } = locationOf(code, index, index).start;
+  const text = code.split('\n')[line - 1] ?? '';
+  const gutter = ' '.repeat(String(line).length);
+  return `${fileName ? `${fileName}: ` : ''}(${line}:${column})\n> ${line} | ${text}\n  ${gutter} | ${' '.repeat(column)}^`;
+};
+
 export const isNode = (value: unknown): value is Node =>
   !!value && typeof value === 'object' && typeof (value as Node).type === 'string';
 
diff --git a/code/core/src/csf-tools/story-shape/normalize-story.ts b/code/core/src/csf-tools/story-shape/normalize-story.ts
index 4488d4e5edee..becda4a66e76 100644
--- a/code/core/src/csf-tools/story-shape/normalize-story.ts
+++ b/code/core/src/csf-tools/story-shape/normalize-story.ts
@@ -1,4 +1,4 @@
-import { type E, type Node, locationOf } from '../estree/ast.ts';
+import { type E, type Node, codeFrame } from '../estree/ast.ts';
 import type { SourceEditor } from '../estree/editor.ts';
 import { isCanonicalCsf2BindCall, isCsfFactoryCall, resolveIdentifierInit } from './utils.ts';
 
@@ -12,10 +12,7 @@ type StoryDeclarationExpression = E.Function | E.Expression;
 /** An error pointing at the node a story file got wrong. */
 export const storyShapeError = (message: string, node: Node, editor: SourceEditor) => {
   const span = node as Node & { start: number; end: number };
-  const { start } = locationOf(editor.code, span.start, span.end);
-  return new SyntaxError(
-    `${editor.fileName ? `${editor.fileName}: ` : ''}${message} (${start.line}:${start.column})`
-  );
+  return new SyntaxError(`${message}\n${codeFrame(editor.fileName, editor.code, span.start)}`);
 };
 
 /**
diff --git a/code/lib/docgen-harness/src/sandbox-baselines/__baselines__/vue3-vite-default-ts/stories-renderers-vue3-vue3-vite-default-ts-decorators.json b/code/lib/docgen-harness/src/sandbox-baselines/__baselines__/vue3-vite-default-ts/stories-renderers-vue3-vue3-vite-default-ts-decorators.json
index 7cc1fac549fa..5baac7e13bcd 100644
--- a/code/lib/docgen-harness/src/sandbox-baselines/__baselines__/vue3-vite-default-ts/stories-renderers-vue3-vue3-vite-default-ts-decorators.json
+++ b/code/lib/docgen-harness/src/sandbox-baselines/__baselines__/vue3-vite-default-ts/stories-renderers-vue3-vue3-vite-default-ts-decorators.json
@@ -1,6 +1,6 @@
 {
   "error": {
-    "message": "No component file found for the component declared in meta.component. (12:0)\n\n./src/stories/renderers/vue3_vue3-vite-default-ts/decorators.stories.ts:\nimport type { DecoratorFunction } from 'storybook/internal/types';\n\nimport { global as globalThis } from '@storybook/global';\nimport type { Meta, StoryObj, VueRenderer } from '@storybook/vue3';\n\nimport { useArgs } from 'storybook/preview-api';\nimport { h } from 'vue';\nimport { computed } from 'vue';\n\nconst { Button, Pre } = (globalThis as any).__TEMPLATE_COMPONENTS__;\n\nconst meta = {\n  component: Button,\n} satisfies Meta<typeof Button>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst ComponentTemplateWrapper = () => ({\n  components: {\n    Pre,\n  },\n  template: `\n    <Pre text=\"decorator\" />\n    <story v-bind=\"$attrs\"/>\n  `,\n});\n\nconst SimpleTemplateWrapper = () => ({\n  template: `\n    <div style=\"border: 5px solid red;\">\n      <story/>\n    </div>\n    `,\n});\n\nconst VueWrapperWrapper: DecoratorFunction<VueRenderer> = (storyFn, context) => {\n  // Call the `storyFn` to receive a component that Vue can render\n  const story = storyFn();\n  // Vue 3 \"Functional\" component as decorator\n  return () => {\n    return h('div', { style: 'border: 5px solid blue' }, h(story, context.args));\n  };\n};\n\nconst DynamicWrapperWrapper: DecoratorFunction<VueRenderer> = (storyFn, { args }) => ({\n  template: `<div :style=\"{ borderWidth: level, borderColor: 'green', borderStyle: 'solid' }\"><story /></div>`,\n  computed: { level: () => `${args.level}px` },\n});\n\nconst getCaptionForLocale = (locale: string) => {\n  switch (locale) {\n    case 'es':\n      return 'Hola!';\n    case 'kr':\n      return '안녕하세요!';\n    case 'zh':\n      return '你好!';\n    case 'en':\n      return 'Hello!';\n    default:\n      return undefined;\n  }\n};\n\nconst updateArgsDecorator: DecoratorFunction<VueRenderer> = (story, { args }) => {\n  const [, updateArgs] = useArgs();\n  return {\n    components: { story },\n    setup() {\n      return {\n        args,\n        updateArgs,\n      };\n    },\n    template: `\n      <div>\n        <button @click=\"() => updateArgs({ label: Number(args.label) + 1 })\">Add 1</button>\n        <hr />\n        <story />\n      </div>\n    `,\n  };\n};\n\nconst localeDecorator: DecoratorFunction<VueRenderer> = (story, { globals }) => {\n  return {\n    components: { story },\n    setup() {\n      const ctxGreeting = computed(() => getCaptionForLocale(globals?.locale) || 'Hello!');\n\n      return {\n        ctxGreeting,\n        globals,\n      };\n    },\n    template: `\n      <div>\n        <p>Greeting: {{ctxGreeting}}</p>\n        <p>Locale: {{globals?.locale}}</p>\n        <story />\n      </div>\n    `,\n  };\n};\n\nexport const ComponentTemplate: Story = {\n  args: { label: 'With component' },\n  decorators: [ComponentTemplateWrapper],\n};\n\nexport const SimpleTemplate: Story = {\n  args: { label: 'With border' },\n  decorators: [SimpleTemplateWrapper],\n};\n\nexport const VueWrapper: Story = {\n  args: { label: 'With Vue wrapper' },\n  decorators: [VueWrapperWrapper],\n};\n\nexport const DynamicWrapper: Story = {\n  args: { label: 'With dynamic wrapper', primary: true },\n  argTypes: {\n    // Number type is detected, but we still want to constrain the range from 1-6\n    level: { control: { type: 'range', min: 1, max: 6 } },\n  },\n  decorators: [DynamicWrapperWrapper],\n};\n\nexport const MultipleWrappers = {\n  args: { label: 'With multiple wrappers' },\n  argTypes: {\n    // Number type is detected, but we still want to constrain the range from 1-6\n    level: { control: { type: 'range', min: 1, max: 6 } },\n  },\n  decorators: [\n    ComponentTemplateWrapper,\n    SimpleTemplateWrapper,\n    VueWrapperWrapper,\n    DynamicWrapperWrapper,\n  ],\n};\n\nexport const UpdateArgs = {\n  args: { label: '0' },\n  decorators: [updateArgsDecorator],\n};\n\nexport const ReactiveGlobalDecorator = {\n  args: { label: 'With reactive global decorator' },\n  decorators: [localeDecorator],\n};\n",
+    "message": "No component file found for the component declared in meta.component.\n(12:0)\n> 12 | const meta = {\n     | ^\n\n./src/stories/renderers/vue3_vue3-vite-default-ts/decorators.stories.ts:\nimport type { DecoratorFunction } from 'storybook/internal/types';\n\nimport { global as globalThis } from '@storybook/global';\nimport type { Meta, StoryObj, VueRenderer } from '@storybook/vue3';\n\nimport { useArgs } from 'storybook/preview-api';\nimport { h } from 'vue';\nimport { computed } from 'vue';\n\nconst { Button, Pre } = (globalThis as any).__TEMPLATE_COMPONENTS__;\n\nconst meta = {\n  component: Button,\n} satisfies Meta<typeof Button>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst ComponentTemplateWrapper = () => ({\n  components: {\n    Pre,\n  },\n  template: `\n    <Pre text=\"decorator\" />\n    <story v-bind=\"$attrs\"/>\n  `,\n});\n\nconst SimpleTemplateWrapper = () => ({\n  template: `\n    <div style=\"border: 5px solid red;\">\n      <story/>\n    </div>\n    `,\n});\n\nconst VueWrapperWrapper: DecoratorFunction<VueRenderer> = (storyFn, context) => {\n  // Call the `storyFn` to receive a component that Vue can render\n  const story = storyFn();\n  // Vue 3 \"Functional\" component as decorator\n  return () => {\n    return h('div', { style: 'border: 5px solid blue' }, h(story, context.args));\n  };\n};\n\nconst DynamicWrapperWrapper: DecoratorFunction<VueRenderer> = (storyFn, { args }) => ({\n  template: `<div :style=\"{ borderWidth: level, borderColor: 'green', borderStyle: 'solid' }\"><story /></div>`,\n  computed: { level: () => `${args.level}px` },\n});\n\nconst getCaptionForLocale = (locale: string) => {\n  switch (locale) {\n    case 'es':\n      return 'Hola!';\n    case 'kr':\n      return '안녕하세요!';\n    case 'zh':\n      return '你好!';\n    case 'en':\n      return 'Hello!';\n    default:\n      return undefined;\n  }\n};\n\nconst updateArgsDecorator: DecoratorFunction<VueRenderer> = (story, { args }) => {\n  const [, updateArgs] = useArgs();\n  return {\n    components: { story },\n    setup() {\n      return {\n        args,\n        updateArgs,\n      };\n    },\n    template: `\n      <div>\n        <button @click=\"() => updateArgs({ label: Number(args.label) + 1 })\">Add 1</button>\n        <hr />\n        <story />\n      </div>\n    `,\n  };\n};\n\nconst localeDecorator: DecoratorFunction<VueRenderer> = (story, { globals }) => {\n  return {\n    components: { story },\n    setup() {\n      const ctxGreeting = computed(() => getCaptionForLocale(globals?.locale) || 'Hello!');\n\n      return {\n        ctxGreeting,\n        globals,\n      };\n    },\n    template: `\n      <div>\n        <p>Greeting: {{ctxGreeting}}</p>\n        <p>Locale: {{globals?.locale}}</p>\n        <story />\n      </div>\n    `,\n  };\n};\n\nexport const ComponentTemplate: Story = {\n  args: { label: 'With component' },\n  decorators: [ComponentTemplateWrapper],\n};\n\nexport const SimpleTemplate: Story = {\n  args: { label: 'With border' },\n  decorators: [SimpleTemplateWrapper],\n};\n\nexport const VueWrapper: Story = {\n  args: { label: 'With Vue wrapper' },\n  decorators: [VueWrapperWrapper],\n};\n\nexport const DynamicWrapper: Story = {\n  args: { label: 'With dynamic wrapper', primary: true },\n  argTypes: {\n    // Number type is detected, but we still want to constrain the range from 1-6\n    level: { control: { type: 'range', min: 1, max: 6 } },\n  },\n  decorators: [DynamicWrapperWrapper],\n};\n\nexport const MultipleWrappers = {\n  args: { label: 'With multiple wrappers' },\n  argTypes: {\n    // Number type is detected, but we still want to constrain the range from 1-6\n    level: { control: { type: 'range', min: 1, max: 6 } },\n  },\n  decorators: [\n    ComponentTemplateWrapper,\n    SimpleTemplateWrapper,\n    VueWrapperWrapper,\n    DynamicWrapperWrapper,\n  ],\n};\n\nexport const UpdateArgs = {\n  args: { label: '0' },\n  decorators: [updateArgsDecorator],\n};\n\nexport const ReactiveGlobalDecorator = {\n  args: { label: 'With reactive global decorator' },\n  decorators: [localeDecorator],\n};\n",
     "name": "No component import found"
   },
   "id": "stories-renderers-vue3-vue3-vite-default-ts-decorators",
diff --git a/code/lib/docgen-harness/src/sandbox-baselines/__baselines__/vue3-vite-default-ts/stories-renderers-vue3-vue3-vite-default-ts-mount-in-play.json b/code/lib/docgen-harness/src/sandbox-baselines/__baselines__/vue3-vite-default-ts/stories-renderers-vue3-vue3-vite-default-ts-mount-in-play.json
index 92c8ee94306f..8b124278c677 100644
--- a/code/lib/docgen-harness/src/sandbox-baselines/__baselines__/vue3-vite-default-ts/stories-renderers-vue3-vue3-vite-default-ts-mount-in-play.json
+++ b/code/lib/docgen-harness/src/sandbox-baselines/__baselines__/vue3-vite-default-ts/stories-renderers-vue3-vue3-vite-default-ts-mount-in-play.json
@@ -1,6 +1,6 @@
 {
   "error": {
-    "message": "No component file found for the component declared in meta.component. (10:0)\n\n./src/stories/renderers/vue3_vue3-vite-default-ts/mount-in-play.stories.ts:\nimport type { StoryObj } from '@storybook/vue3';\n\nimport { defineComponent } from 'vue';\n\nconst Button = defineComponent({\n  template: '<button :disabled=\"disabled\">{{label}}</button>',\n  props: ['disabled', 'label'],\n});\n\nexport default {\n  component: Button,\n};\n\nexport const Basic: StoryObj<typeof Button> = {\n  args: {\n    disabled: true,\n  },\n  async play({ mount, args }) {\n    await mount(Button, { props: { ...args, label: 'set in play' } });\n  },\n};\n",
+    "message": "No component file found for the component declared in meta.component.\n(10:0)\n> 10 | export default {\n     | ^\n\n./src/stories/renderers/vue3_vue3-vite-default-ts/mount-in-play.stories.ts:\nimport type { StoryObj } from '@storybook/vue3';\n\nimport { defineComponent } from 'vue';\n\nconst Button = defineComponent({\n  template: '<button :disabled=\"disabled\">{{label}}</button>',\n  props: ['disabled', 'label'],\n});\n\nexport default {\n  component: Button,\n};\n\nexport const Basic: StoryObj<typeof Button> = {\n  args: {\n    disabled: true,\n  },\n  async play({ mount, args }) {\n    await mount(Button, { props: { ...args, label: 'set in play' } });\n  },\n};\n",
     "name": "No component import found"
   },
   "id": "stories-renderers-vue3-vue3-vite-default-ts-mount-in-play",
diff --git a/code/renderers/react/src/componentManifest/generateCodeSnippet.test.tsx b/code/renderers/react/src/componentManifest/generateCodeSnippet.test.tsx
index 22eb5554343d..6906abe9a2d5 100644
--- a/code/renderers/react/src/componentManifest/generateCodeSnippet.test.tsx
+++ b/code/renderers/react/src/componentManifest/generateCodeSnippet.test.tsx
@@ -105,7 +105,12 @@ test('Edge case identifier we can not find', () => {
     export const Default = someImportOrWhatever;
   `);
   expect(() => generateExample(input)).toThrowErrorMatchingInlineSnapshot(
-    `[SyntaxError: Expected story to be csf factory, function or an object expression (13:27)]`
+    `
+    [SyntaxError: Expected story to be csf factory, function or an object expression
+    (13:27)
+    > 13 |     export const Default = someImportOrWhatever;
+         |                            ^]
+  `
   );
 });
 
diff --git a/code/renderers/react/src/componentManifest/generator.test.ts b/code/renderers/react/src/componentManifest/generator.test.ts
index 8e3d02d6d85d..67b4a1502021 100644
--- a/code/renderers/react/src/componentManifest/generator.test.ts
+++ b/code/renderers/react/src/componentManifest/generator.test.ts
@@ -491,7 +491,10 @@ test('component exported from other file', async () => {
       "stories": [
         {
           "error": {
-            "message": "Expected story to be a function or variable declaration (11:0)",
+            "message": "Expected story to be a function or variable declaration
+    (11:0)
+    > 11 | export { Primary } from './other-file';
+         | ^",
             "name": "SyntaxError",
           },
           "id": "example-button--primary",
@@ -542,7 +545,10 @@ test('unknown expressions', async () => {
       "stories": [
         {
           "error": {
-            "message": "Expected story to be csf factory, function or an object expression (11:23)",
+            "message": "Expected story to be csf factory, function or an object expression
+    (11:23)
+    > 11 | export const Primary = someWeirdExpression;
+         |                        ^",
             "name": "SyntaxError",
           },
           "id": "example-button--primary",

From c618c1af25e4110a801283e778eccd8365419ed0 Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 11:11:06 +0900
Subject: [PATCH 078/326] refactor(cli): reuse the core editor for statement
 removal and import rewrites

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/editor.test.ts |  2 +-
 code/core/src/csf-tools/estree/editor.ts      | 96 +++++++++++++++++--
 code/core/src/csf-tools/index.ts              |  4 +-
 .../fixes/vitest-setup-file.test.ts           |  3 +-
 .../automigrate/fixes/vitest-setup-file.ts    |  3 +-
 .../web-components-runtime-manifest.test.ts   |  6 +-
 .../fixes/web-components-runtime-manifest.ts  |  3 +-
 .../src/automigrate/helpers/preview-call.ts   |  4 +-
 .../src/automigrate/helpers/source-edits.ts   | 55 -----------
 .../helpers/config-to-csf-factory.test.ts     |  1 +
 .../codemod/helpers/config-to-csf-factory.ts  |  7 +-
 .../codemod/helpers/csf-factories-utils.ts    | 15 +--
 .../codemod/helpers/remove-unused-types.ts    |  2 +-
 .../helpers/story-to-csf-factory.test.ts      |  1 +
 .../codemod/helpers/story-to-csf-factory.ts   |  7 +-
 .../src/codemod/helpers/wrap-args-mocks.ts    |  3 +-
 .../upgrade-deprecated-types.test.ts.snap     |  5 +-
 .../__tests__/find-implicit-spies.test.ts     | 10 +-
 18 files changed, 130 insertions(+), 97 deletions(-)
 delete mode 100644 code/lib/cli-storybook/src/automigrate/helpers/source-edits.ts

diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index 682445b17538..a078a4e15515 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -113,7 +113,7 @@ describe('removeStatement', () => {
     `);
     removeStatement(editor, editor.program.body[1]);
     removeStatement(editor, editor.program.body[2]);
-    expect(editor.toString()).toBe(`import a from 'a';\n\n`);
+    expect(editor.toString()).toBe(`import a from 'a';\n`);
   });
 
   it('keeps the file header when the first statement is removed', () => {
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index eaf9e0f1df0b..bf840e19ed0f 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -627,19 +627,99 @@ export const leadingComments = (editor: SourceEditor, statement: Span): E.Commen
   );
 };
 
-/** Remove a statement with its leading comments, and its line when nothing else shares it. */
-export const removeStatement = (editor: SourceEditor, statement: Span) => {
+/**
+ * Remove a statement with the comments that lead it and the comment that trails it on its line,
+ * and the line itself when nothing else shares it.
+ */
+export const removeStatement = (editor: SourceEditor, statement: Span, atTop?: boolean) => {
   const { code } = editor;
   const first = leadingComments(editor, statement)[0];
-  const lineStart = code.lastIndexOf('\n', (first ?? statement).start - 1) + 1;
+  const start = (first ?? statement).start;
+  const lineStart = code.lastIndexOf('\n', start - 1) + 1;
   const lineEnd = code.indexOf('\n', statement.end);
-  const before = code.slice(lineStart, (first ?? statement).start);
-  const after = code.slice(statement.end, lineEnd === -1 ? code.length : lineEnd);
-  if (!before.trim() && !after.trim()) {
-    editor.edits.remove(lineStart, lineEnd === -1 ? code.length : lineEnd + 1);
+  const trailing = editor.comments.find(
+    (comment) =>
+      comment.start >= statement.end &&
+      (lineEnd === -1 || comment.start < lineEnd) &&
+      !code.slice(statement.end, comment.start).trim()
+  );
+  const end =
+    trailing && (lineEnd === -1 || trailing.end <= lineEnd) ? trailing.end : statement.end;
+  const before = code.slice(lineStart, start);
+  const after = code.slice(end, lineEnd === -1 ? code.length : lineEnd);
+  if (before.trim() || after.trim()) {
+    editor.edits.remove(start, end);
+    return;
+  }
+  // The statement takes the blank lines above it, so none are left behind; at the top of the
+  // file it takes the ones below instead.
+  const top = atTop ?? lineStart === 0;
+  let from = lineStart;
+  let to = lineEnd === -1 ? code.length : lineEnd + 1;
+  if (top) {
+    to += /^\s*/.exec(code.slice(to))![0].length;
   } else {
-    editor.edits.remove((first ?? statement).start, statement.end);
+    while (from > 0 && /^[ \t]*\n$/.test(code.slice(code.lastIndexOf('\n', from - 2) + 1, from))) {
+      from = code.lastIndexOf('\n', from - 2) + 1;
+    }
   }
+  editor.edits.remove(from, to);
+};
+
+/** Remove top-level statements, each with a `;` that directly follows it. */
+export const removeStatements = (editor: SourceEditor, statements: ReadonlySet<Node>) => {
+  const { body } = editor.program;
+  let keptBefore = false;
+  body.forEach((statement, index) => {
+    const next = body[index + 1];
+    if (!statements.has(statement)) {
+      keptBefore = keptBefore || statement.type !== 'EmptyStatement';
+      return;
+    }
+    const empty = next?.type === 'EmptyStatement' && next.start === statement.end;
+    const span = empty ? { start: statement.start, end: next.end } : statement;
+    // Nothing kept above: the statement takes the whitespace below it instead.
+    removeStatement(editor, span, !keptBefore);
+  });
+};
+
+/**
+ * Rewrite an import's specifiers to `kept` plus `added`, keeping each kept specifier as written,
+ * comments included.
+ */
+export const setImportSpecifiers = (
+  editor: SourceEditor,
+  declaration: E.ImportDeclaration,
+  kept: readonly E.ImportDeclaration['specifiers'][number][],
+  added: { default?: string; named?: string[] } = {}
+) => {
+  const { code } = editor;
+  const { specifiers } = declaration;
+  const named = specifiers.filter((specifier) => specifier.type === 'ImportSpecifier');
+  const list: List | undefined = named.length
+    ? {
+        open: code.lastIndexOf('{', named[0].start) + 1,
+        close: code.indexOf('}', named.at(-1)!.end),
+        items: named,
+      }
+    : undefined;
+  const namedTexts = [
+    ...named.filter((specifier) => kept.includes(specifier)).map((s) => itemText(editor, list!, s)),
+    ...(added.named ?? []),
+  ];
+  const parts = [
+    ...(added.default ? [added.default] : []),
+    ...specifiers
+      .filter((specifier) => specifier.type !== 'ImportSpecifier' && kept.includes(specifier))
+      .map((specifier) => editor.source(specifier)),
+    ...(namedTexts.length > 0 ? [`{ ${namedTexts.join(', ')} }`] : []),
+  ];
+  const kind = declaration.importKind === 'type' ? 'import type' : 'import';
+  editor.edits.overwrite(
+    declaration.start,
+    declaration.source.start,
+    `${kind} ${parts.join(', ')} from `
+  );
 };
 
 export const replaceValue = (editor: SourceEditor, member: Property, text: string) => {
diff --git a/code/core/src/csf-tools/index.ts b/code/core/src/csf-tools/index.ts
index 928b7c806c4e..ef3ffc9dfed1 100644
--- a/code/core/src/csf-tools/index.ts
+++ b/code/core/src/csf-tools/index.ts
@@ -46,7 +46,9 @@ export {
   printValue,
   reindent,
   removeFromList,
-  withParentheses,
   removeMembers,
   removeStatement,
+  removeStatements,
+  setImportSpecifiers,
+  withParentheses,
 } from './estree/editor.ts';
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/vitest-setup-file.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/vitest-setup-file.test.ts
index 0ae516bce8a3..da7d7f533b0e 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/vitest-setup-file.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/vitest-setup-file.test.ts
@@ -413,7 +413,8 @@ describe('vitestSetupFile', () => {
         "import { MotionGlobalConfig } from 'framer-motion';
 
         // Skip animations
-        MotionGlobalConfig.skipAnimations = true;"
+        MotionGlobalConfig.skipAnimations = true;
+        "
       `);
       expect(readFixture('vitest.config.ts')).toBe(STANDARD_VITEST_CONFIG);
     });
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/vitest-setup-file.ts b/code/lib/cli-storybook/src/automigrate/fixes/vitest-setup-file.ts
index 8bb08ac52b3b..6b6acf7968cc 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/vitest-setup-file.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/vitest-setup-file.ts
@@ -12,6 +12,8 @@ import {
   SourceEditor,
   headerComments,
   walk,
+  removeStatements,
+  setImportSpecifiers,
 } from 'storybook/internal/csf-tools';
 
 import jscodeshift from 'jscodeshift';
@@ -21,7 +23,6 @@ import semver from 'semver';
 import { dedent } from 'ts-dedent';
 
 import { findFilesUp } from '../../util.ts';
-import { removeStatements, setImportSpecifiers } from '../helpers/source-edits.ts';
 import type { Fix } from '../types.ts';
 
 const VITEST_ADDON_NAME = '@storybook/addon-vitest';
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/web-components-runtime-manifest.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/web-components-runtime-manifest.test.ts
index 3396ffd5e46d..e734d7853ecb 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/web-components-runtime-manifest.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/web-components-runtime-manifest.test.ts
@@ -816,7 +816,8 @@ describe('run', (): void => {
     expect(vol.readFileSync(PREVIEW, 'utf8')).toMatchInlineSnapshot(`
       "import customElements from "../custom-elements.json";
 
-      const m = format(customElements);"
+      const m = format(customElements);
+      "
     `);
     expect(vi.mocked(logger.warn).mock.calls).toMatchInlineSnapshot(`
       [
@@ -842,7 +843,8 @@ describe('run', (): void => {
     await runWith({ manifestPath: null });
 
     expect(vol.readFileSync(PREVIEW, 'utf8')).toMatchInlineSnapshot(`
-      "import tokens from "../tokens.json";"
+      "import tokens from "../tokens.json";
+      "
     `);
     expect(logger.warn).not.toHaveBeenCalled();
   });
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/web-components-runtime-manifest.ts b/code/lib/cli-storybook/src/automigrate/fixes/web-components-runtime-manifest.ts
index 819a56daf19c..25e661b4de73 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/web-components-runtime-manifest.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/web-components-runtime-manifest.ts
@@ -4,6 +4,8 @@ import {
   type ESTree as E,
   type ESTreeNode as Node,
   SourceEditor,
+  removeStatements,
+  setImportSpecifiers,
 } from 'storybook/internal/csf-tools';
 import { logger } from 'storybook/internal/node-logger';
 import { SupportedRenderer } from 'storybook/internal/types';
@@ -20,7 +22,6 @@ import {
   topLevelCalls,
   topLevelReaders,
 } from '../helpers/preview-call.ts';
-import { removeStatements, setImportSpecifiers } from '../helpers/source-edits.ts';
 import { findWorkspaceFiles, readJsonFile } from '../helpers/workspace-files.ts';
 import type { FixTransform } from '../pipeline.ts';
 import type { Fix } from '../types.ts';
diff --git a/code/lib/cli-storybook/src/automigrate/helpers/preview-call.ts b/code/lib/cli-storybook/src/automigrate/helpers/preview-call.ts
index 81b59532c867..ceb2bdf53965 100644
--- a/code/lib/cli-storybook/src/automigrate/helpers/preview-call.ts
+++ b/code/lib/cli-storybook/src/automigrate/helpers/preview-call.ts
@@ -4,10 +4,10 @@ import {
   type ESTreeNode as Node,
   type SourceEditor,
   walk,
+  removeStatements,
+  setImportSpecifiers,
 } from 'storybook/internal/csf-tools';
 
-import { removeStatements, setImportSpecifiers } from './source-edits.ts';
-
 export type RemoveTopLevelCallResult =
   | { removed: false; reason: string }
   | { removed: true; keptArguments: string[] };
diff --git a/code/lib/cli-storybook/src/automigrate/helpers/source-edits.ts b/code/lib/cli-storybook/src/automigrate/helpers/source-edits.ts
deleted file mode 100644
index 0f6904a8773e..000000000000
--- a/code/lib/cli-storybook/src/automigrate/helpers/source-edits.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import type { ESTree as E, ESTreeNode as Node, SourceEditor } from 'storybook/internal/csf-tools';
-
-// Each statement takes the whitespace before it, or after it when nothing before it is kept, so no
-// blank lines are left behind. A `;` right after a removed statement goes with it.
-export function removeStatements(editor: SourceEditor, statements: ReadonlySet<Node>) {
-  const { code, program } = editor;
-  const removed = new Set(statements);
-  program.body.forEach((statement, index) => {
-    const next = program.body[index + 1];
-    if (removed.has(statement) && next?.type === 'EmptyStatement' && next.start === statement.end) {
-      removed.add(next);
-    }
-  });
-  program.body.forEach((statement, index) => {
-    if (!removed.has(statement)) {
-      return;
-    }
-    if (program.body.slice(0, index).every((previous) => removed.has(previous))) {
-      const next = /\S/.exec(code.slice(statement.end));
-      editor.edits.remove(statement.start, next ? statement.end + next.index : code.length);
-      return;
-    }
-    const previousEnd = program.body[index - 1].end;
-    const lineEnd = code.indexOf('\n', previousEnd);
-    const hasTrailingComment =
-      lineEnd !== -1 &&
-      lineEnd < statement.start &&
-      /^[ \t]*\/[/*]/.test(code.slice(previousEnd, lineEnd));
-    editor.edits.remove(hasTrailingComment ? lineEnd : previousEnd, statement.end);
-  });
-}
-
-export function setImportSpecifiers(
-  editor: SourceEditor,
-  declaration: E.ImportDeclaration,
-  specifiers: readonly E.ImportDeclaration['specifiers'][number][],
-  added: { default?: string; named?: string[] } = {}
-) {
-  const source = (specifier: Node) => editor.source(specifier);
-  const named = [
-    ...specifiers.filter((specifier) => specifier.type === 'ImportSpecifier').map(source),
-    ...(added.named ?? []),
-  ];
-  const parts = [
-    ...(added.default ? [added.default] : []),
-    ...specifiers.filter((specifier) => specifier.type !== 'ImportSpecifier').map(source),
-    ...(named.length > 0 ? [`{ ${named.join(', ')} }`] : []),
-  ];
-  const kind = declaration.importKind === 'type' ? 'import type' : 'import';
-  editor.edits.overwrite(
-    declaration.start,
-    declaration.source.start,
-    `${kind} ${parts.join(', ')} from `
-  );
-}
diff --git a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.test.ts b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.test.ts
index 8d8d27c81448..2ce762c3fd65 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.test.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.test.ts
@@ -75,6 +75,7 @@ describe('main/preview codemod: general parsing functionality', () => {
       // @ts-check
       /** @license MIT */
       import { defineMain } from '@storybook/react-vite/node';
+
       export default defineMain({
         stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
         framework: '@storybook/react-vite',
diff --git a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts
index 453378ac1b39..00da57a4a1f6 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts
@@ -4,15 +4,16 @@ import {
   type ESTreeNode as Node,
   loadConfig,
   printConfig,
+  removeStatements,
+  setImportSpecifiers,
+  prependStatement,
 } from 'storybook/internal/csf-tools';
 import { logger } from 'storybook/internal/node-logger';
 
 import picocolors from 'picocolors';
 
 import type { FileInfo } from '../../automigrate/codemod.ts';
-import { removeStatements, setImportSpecifiers } from '../../automigrate/helpers/source-edits.ts';
 import {
-  addImportToTop,
   cleanupTypeImports,
   getConfigProperties,
   removeExportDeclarations,
@@ -205,7 +206,7 @@ export async function configToCsfFactory(
     }
   } else {
     // if not, add import { defineMain } from '@storybook/framework'
-    addImportToTop(
+    prependStatement(
       editor,
       `import { ${methodName} } from ${quote}${expectedImportSource}${quote};`
     );
diff --git a/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.ts b/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.ts
index e04839f1e51f..b6d588689850 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.ts
@@ -3,10 +3,10 @@ import {
   type ESTreeNode as Node,
   type SourceEditor,
   walk,
+  removeStatements,
+  setImportSpecifiers,
 } from 'storybook/internal/csf-tools';
 
-import { removeStatements, setImportSpecifiers } from '../../automigrate/helpers/source-edits.ts';
-
 const projectAnnotationNames = [
   'decorators',
   'parameters',
@@ -118,14 +118,3 @@ export function getConfigProperties(
 }
 
 // Leading file comments, such as license headers or `@ts-check`, stay above the import.
-export function addImportToTop(editor: SourceEditor, importDeclaration: string): void {
-  const first = editor.program.body.find(
-    (node) => !(node.type === 'ExpressionStatement' && node.directive)
-  );
-  if (first) {
-    editor.edits.appendLeft(first.start, `${importDeclaration}\n`);
-  } else {
-    const { code } = editor;
-    editor.edits.append(`${code && !code.endsWith('\n') ? '\n' : ''}${importDeclaration}\n`);
-  }
-}
diff --git a/code/lib/cli-storybook/src/codemod/helpers/remove-unused-types.ts b/code/lib/cli-storybook/src/codemod/helpers/remove-unused-types.ts
index a5202bc308bb..d396c532fdb1 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/remove-unused-types.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/remove-unused-types.ts
@@ -3,9 +3,9 @@ import {
   type ESTreeNode as Node,
   type SourceEditor,
   walk,
+  removeStatements,
 } from 'storybook/internal/csf-tools';
 
-import { removeStatements } from '../../automigrate/helpers/source-edits.ts';
 import { cleanupTypeImports } from './csf-factories-utils.ts';
 
 // Name of types that should be removed from the import list
diff --git a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
index 2aa7de49e83d..f986d8c2b756 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
@@ -63,6 +63,7 @@ describe('stories codemod', () => {
          * Copyright 2024
          */
         import preview from "#.storybook/preview";
+
         const meta = preview.meta({ title: "Component" });
         export const A = meta.story();
       `);
diff --git a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
index 76e14578ad4d..4fd082b94ce7 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
@@ -6,6 +6,9 @@ import {
   printCsf,
   walk,
   withParentheses,
+  removeStatements,
+  setImportSpecifiers,
+  prependStatement,
 } from 'storybook/internal/csf-tools';
 import { logger } from 'storybook/internal/node-logger';
 
@@ -13,8 +16,6 @@ import path from 'path';
 
 import { DOCUMENTED_PREVIEW_IMPORT } from '../../../../../core/src/shared/constants/config-folder.ts';
 import type { FileInfo } from '../../automigrate/codemod.ts';
-import { removeStatements, setImportSpecifiers } from '../../automigrate/helpers/source-edits.ts';
-import { addImportToTop } from './csf-factories-utils.ts';
 import { customArgsTypes } from './custom-args-type.ts';
 import { removeUnusedTypes } from './remove-unused-types.ts';
 import { wrapArgsMocks } from './wrap-args-mocks.ts';
@@ -457,7 +458,7 @@ export async function storyToCsfFactory(
       );
     }
   } else if (hasMeta) {
-    addImportToTop(editor, `import ${sbConfigImportName} from ${quote}${previewPath}${quote};`);
+    prependStatement(editor, `import ${sbConfigImportName} from ${quote}${previewPath}${quote};`);
   }
 
   editor.commit();
diff --git a/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.ts b/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.ts
index 63ac30e0f016..5c7ee5a195a1 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.ts
@@ -5,10 +5,9 @@ import {
   type SourceEditor,
   generateUid,
   walk,
+  setImportSpecifiers,
 } from 'storybook/internal/csf-tools';
 
-import { setImportSpecifiers } from '../../automigrate/helpers/source-edits.ts';
-
 const mockMembers = [
   'mock',
   'mockClear',
diff --git a/code/lib/codemod/src/transforms/__tests__/__snapshots__/upgrade-deprecated-types.test.ts.snap b/code/lib/codemod/src/transforms/__tests__/__snapshots__/upgrade-deprecated-types.test.ts.snap
index fe07af36e948..a4fce765b917 100644
--- a/code/lib/codemod/src/transforms/__tests__/__snapshots__/upgrade-deprecated-types.test.ts.snap
+++ b/code/lib/codemod/src/transforms/__tests__/__snapshots__/upgrade-deprecated-types.test.ts.snap
@@ -2,7 +2,10 @@
 
 exports[`upgrade-deprecated-types > typescript > upgrade imports with conflicting local names 1`] = `
 SyntaxError: This codemod does not support local imports that are called the same as a storybook import.
-Rename this local import and try again. (1:10)
+Rename this local import and try again.
+(1:10)
+> 1 |  import { ComponentMeta as Meta, ComponentStory as StoryFn } from '@storybook/react';
+    |           ^
 `;
 
 exports[`upgrade-deprecated-types > typescript > upgrade imports with local names 1`] = `
diff --git a/code/lib/codemod/src/transforms/__tests__/find-implicit-spies.test.ts b/code/lib/codemod/src/transforms/__tests__/find-implicit-spies.test.ts
index d9a5203aa3f4..ac119aad1637 100644
--- a/code/lib/codemod/src/transforms/__tests__/find-implicit-spies.test.ts
+++ b/code/lib/codemod/src/transforms/__tests__/find-implicit-spies.test.ts
@@ -49,10 +49,16 @@ test('Warn for possible implicit actions', async () => {
   expect(warn.mock.calls).toMatchInlineSnapshot(`
     [
       [
-        "Component.stories.tsx Possible implicit spy found (7:20)",
+        "Component.stories.tsx Possible implicit spy found
+    (7:20)
+    > 7 |   await expect(args.onImplicit).toHaveBeenCalled();
+        |                     ^",
       ],
       [
-        "Component.stories.tsx Possible implicit spy found (17:22)",
+        "Component.stories.tsx Possible implicit spy found
+    (17:22)
+    > 17 |     await expect(args.onImplicit).toHaveBeenCalled();
+         |                       ^",
       ],
     ]
   `);

From d10498d45971bd7b37a8dd9c604bf6828661a254 Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 11:18:26 +0900
Subject: [PATCH 079/326] fix(csf-tools): close the scope analysis gaps that
 could delete live code

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/scope.test.ts  |  54 +++++++-
 code/core/src/csf-tools/estree/scope.ts       | 118 ++++++++++++++++--
 .../plugins/server-code-elimination.test.ts   |  15 +++
 3 files changed, 177 insertions(+), 10 deletions(-)

diff --git a/code/core/src/csf-tools/estree/scope.test.ts b/code/core/src/csf-tools/estree/scope.test.ts
index e3a17b495fc9..3017e1a41f3f 100644
--- a/code/core/src/csf-tools/estree/scope.test.ts
+++ b/code/core/src/csf-tools/estree/scope.test.ts
@@ -16,7 +16,11 @@ const programBindings = (code: string) => {
 describe('analyzeScopes', () => {
   it.each([
     ['a const read once', 'const a = 1; a;', { a: { constant: true, references: 1 } }],
-    ['a reassigned let', 'let a = 1; a = 2;', { a: { constant: false, references: 0 } }],
+    [
+      'a reassigned let, whose write is a use',
+      'let a = 1; a = 2;',
+      { a: { constant: false, references: 1 } },
+    ],
     [
       'an update, which reads and writes',
       'let a = 1; a++;',
@@ -69,6 +73,54 @@ describe('analyzeScopes', () => {
     expect(first.references).toBe(references);
   });
 
+  it('resolves parameter defaults outside the function body', () => {
+    expect(
+      programBindings('const q = 1; function f(a = q) { const q = 2; return a; }')
+    ).toMatchObject({ q: { references: 1 } });
+  });
+
+  it('resolves the switch discriminant outside the switch scope', () => {
+    expect(
+      programBindings('const x = 1; switch (x) { case 1: { const x = 2; x; } }')
+    ).toMatchObject({ x: { references: 1 } });
+  });
+
+  it('visits decorators on parameters and abstract members', () => {
+    expect(programBindings('const dec = () => {}; class A { m(@dec p: string) {} }')).toMatchObject(
+      { dec: { references: 1 } }
+    );
+    expect(
+      programBindings('const dec = () => {}; abstract class A { @dec abstract p: string; }')
+    ).toMatchObject({ dec: { references: 1 } });
+  });
+
+  it('counts the namespace an import-equals declaration reads', () => {
+    expect(programBindings("import NS from 'x'; import Y = NS.Y; Y;")).toMatchObject({
+      NS: { references: 1 },
+    });
+  });
+
+  it('binds a var declared in a class static block to the block', () => {
+    const { program } = parseModule('class A { static { var v = 1; v; } }', 'file.ts');
+    const info = analyzeScopes(program);
+    expect(info.program.bindings.has('v')).toBe(false);
+    expect(info.unbound.has('v')).toBe(false);
+  });
+
+  it('keeps a binding alive through a write inside a function', () => {
+    expect(
+      programBindings('let token; export function setSession(s) { token = s.token; }')
+    ).toMatchObject({ token: { constant: false, references: 1 } });
+  });
+
+  it('refuses TS node types it does not know instead of treating them as types', () => {
+    const program = {
+      type: 'Program',
+      body: [{ type: 'ExpressionStatement', expression: { type: 'TSNewThing' } }],
+    } as unknown as E.Program;
+    expect(() => analyzeScopes(program)).toThrow('TSNewThing');
+  });
+
   it('counts overload signatures as references to the implementation', () => {
     expect(programBindings('function f(): void; function f(a?: unknown) {} f();')).toEqual({
       f: { constant: true, references: 2 },
diff --git a/code/core/src/csf-tools/estree/scope.ts b/code/core/src/csf-tools/estree/scope.ts
index 78719fa8f55f..295350e5254e 100644
--- a/code/core/src/csf-tools/estree/scope.ts
+++ b/code/core/src/csf-tools/estree/scope.ts
@@ -85,7 +85,7 @@ const BLOCK_SCOPE_TYPES = new Set([
   'ClassDeclaration',
 ]);
 
-// TS wrappers that hold a runtime expression; every other `TS*` node is type-only.
+// TS nodes that hold runtime code and are visited like any other expression or declaration.
 const TS_EXPRESSIONS = new Set([
   'TSModuleDeclaration',
   'TSModuleBlock',
@@ -99,6 +99,73 @@ const TS_EXPRESSIONS = new Set([
   'TSEnumDeclaration',
   'TSEnumBody',
   'TSEnumMember',
+  'TSImportEqualsDeclaration',
+  'TSAbstractMethodDefinition',
+  'TSAbstractPropertyDefinition',
+  'TSAbstractAccessorProperty',
+]);
+
+// TS nodes that only describe types. A `TS*` node in neither set is an error rather than a guess:
+// treating a renamed runtime node as a type would silently drop references.
+const TS_TYPES = new Set([
+  'TSAnyKeyword',
+  'TSArrayType',
+  'TSBigIntKeyword',
+  'TSBooleanKeyword',
+  'TSCallSignatureDeclaration',
+  'TSClassImplements',
+  'TSConditionalType',
+  'TSConstructSignatureDeclaration',
+  'TSConstructorType',
+  'TSDeclareFunction',
+  'TSEmptyBodyFunctionExpression',
+  'TSExternalModuleReference',
+  'TSFunctionType',
+  'TSImportType',
+  'TSIndexSignature',
+  'TSIndexedAccessType',
+  'TSInferType',
+  'TSInterfaceBody',
+  'TSInterfaceDeclaration',
+  'TSInterfaceHeritage',
+  'TSIntersectionType',
+  'TSIntrinsicKeyword',
+  'TSJSDocNonNullableType',
+  'TSJSDocNullableType',
+  'TSJSDocUnknownType',
+  'TSLiteralType',
+  'TSMappedType',
+  'TSMethodSignature',
+  'TSNamedTupleMember',
+  'TSNamespaceExportDeclaration',
+  'TSNeverKeyword',
+  'TSNullKeyword',
+  'TSNumberKeyword',
+  'TSObjectKeyword',
+  'TSOptionalType',
+  'TSParenthesizedType',
+  'TSPropertySignature',
+  'TSQualifiedName',
+  'TSRestType',
+  'TSStringKeyword',
+  'TSSymbolKeyword',
+  'TSTemplateLiteralType',
+  'TSThisType',
+  'TSTupleType',
+  'TSTypeAliasDeclaration',
+  'TSTypeAnnotation',
+  'TSTypeLiteral',
+  'TSTypeOperator',
+  'TSTypeParameter',
+  'TSTypeParameterDeclaration',
+  'TSTypeParameterInstantiation',
+  'TSTypePredicate',
+  'TSTypeQuery',
+  'TSTypeReference',
+  'TSUndefinedKeyword',
+  'TSUnionType',
+  'TSUnknownKeyword',
+  'TSVoidKeyword',
 ]);
 
 const TYPE_KEYS = new Set([
@@ -112,12 +179,16 @@ const TYPE_KEYS = new Set([
 
 const isCompatTag = (name: string) => /^[a-z]/.test(name) || name.includes('-');
 
-// Identifiers a binding pattern declares, plus the expressions nested in it (defaults, keys).
+// Identifiers a binding pattern declares, plus the expressions nested in it (defaults, keys,
+// decorators).
 const patternParts = (pattern: Node, ids: E.BindingIdentifier[], expressions: Node[]) => {
   const annotation = (pattern as { typeAnnotation?: Node | null }).typeAnnotation;
   if (annotation) {
     expressions.push(annotation);
   }
+  for (const decorator of (pattern as { decorators?: Node[] }).decorators ?? []) {
+    expressions.push(decorator);
+  }
   switch (pattern.type) {
     case 'Identifier':
       ids.push(pattern as E.BindingIdentifier);
@@ -282,9 +353,12 @@ export const analyzeScopes = (program: E.Program): ScopeInfo => {
           declare(scope, id, 'param', param);
         }
       }
+      // The body declares into its own scope, so a parameter default cannot see a body binding.
       if (fn.body?.type === 'BlockStatement') {
-        hoistVars(scope, fn.body);
-        declareLexical(scope, fn.body);
+        const body = new Scope(fn.body, scope, false);
+        nodeScopes.set(fn.body, body);
+        hoistVars(body, fn.body);
+        declareLexical(body, fn.body);
       }
     } else if (node.type === 'ClassExpression' && node.id) {
       declare(scope, node.id, 'class', node);
@@ -306,7 +380,7 @@ export const analyzeScopes = (program: E.Program): ScopeInfo => {
         declareVariable(scope, declaration);
       }
     } else {
-      if (node.type === 'TSModuleBlock') {
+      if (node.type === 'TSModuleBlock' || node.type === 'StaticBlock') {
         hoistVars(scope, node);
       }
       declareLexical(scope, node);
@@ -328,6 +402,8 @@ export const analyzeScopes = (program: E.Program): ScopeInfo => {
     patternParts(target, ids, expressions);
     for (const id of ids) {
       names.add(id.name);
+      // A write keeps the binding alive as much as a read does.
+      references.push({ scope, identifier: id, name: id.name });
       violations.push({ scope, identifier: id as unknown as E.IdentifierReference });
     }
     for (const expression of expressions) {
@@ -422,6 +498,9 @@ export const analyzeScopes = (program: E.Program): ScopeInfo => {
 
   const visitNode = (node: Node, scope: Scope): void => {
     if (node.type.startsWith('TS') && !TS_EXPRESSIONS.has(node.type)) {
+      if (!TS_TYPES.has(node.type)) {
+        throw new Error(`Scope analysis does not know the ${node.type} node type`);
+      }
       visitType(node, scope);
       return;
     }
@@ -534,9 +613,9 @@ export const analyzeScopes = (program: E.Program): ScopeInfo => {
         }
         if (node.body) {
           if (node.body.type === 'BlockStatement') {
-            nodeScopes.set(node.body, current);
+            const body = nodeScopes.get(node.body) ?? current;
             for (const statement of node.body.body) {
-              visit(statement, current);
+              visit(statement, body);
             }
           } else {
             visit(node.body, current);
@@ -569,8 +648,6 @@ export const analyzeScopes = (program: E.Program): ScopeInfo => {
         return;
       case 'UpdateExpression':
         if (node.argument.type === 'Identifier') {
-          // `x++` both reads and writes `x`.
-          references.push({ scope: current, identifier: node.argument, name: node.argument.name });
           markWrites(node.argument, current);
         } else {
           visit(node.argument, current);
@@ -589,6 +666,29 @@ export const analyzeScopes = (program: E.Program): ScopeInfo => {
       case 'TSParameterProperty':
         visitPattern(node.parameter, current);
         return;
+      case 'SwitchStatement':
+        // The discriminant is evaluated before the switch's own scope exists.
+        visit(node.discriminant, scope);
+        for (const switchCase of node.cases) {
+          visit(switchCase, current);
+        }
+        return;
+      case 'TSAbstractMethodDefinition':
+      case 'TSAbstractPropertyDefinition':
+      case 'TSAbstractAccessorProperty':
+        for (const decorator of node.decorators ?? []) {
+          visit(decorator, current);
+        }
+        if (node.computed) {
+          visit(node.key, current);
+        }
+        return;
+      case 'TSImportEqualsDeclaration':
+        // `import X = NS.Y` reads `NS`; `import X = require('y')` reads nothing.
+        if (node.moduleReference.type !== 'TSExternalModuleReference') {
+          reference(node.moduleReference, current);
+        }
+        return;
       case 'TSEnumDeclaration':
         visit(node.body, current);
         return;
diff --git a/code/frameworks/tanstack-react/src/plugins/server-code-elimination.test.ts b/code/frameworks/tanstack-react/src/plugins/server-code-elimination.test.ts
index 33218c1738b7..ee64dca44828 100644
--- a/code/frameworks/tanstack-react/src/plugins/server-code-elimination.test.ts
+++ b/code/frameworks/tanstack-react/src/plugins/server-code-elimination.test.ts
@@ -112,6 +112,21 @@ describe('serverCodeEliminationPlugin', () => {
       expect(result!.code).toContain('__sb_fn()');
     });
 
+    it('keeps declarations that live code writes or reads through tricky scopes', async () => {
+      const code = [
+        `import { createServerFn } from '@tanstack/react-start';`,
+        `import { config } from './config';`,
+        `let token;`,
+        `export function setSession(s) { token = s.token; }`,
+        `export function useThing(c = config) { const config = 1; return c + config; }`,
+        `export const getData = createServerFn().handler(async () => token + config);`,
+      ].join('\n');
+      const result = await transform(code);
+      expect(result!.code).toContain('let token;');
+      expect(result!.code).toContain(`import { config } from './config';`);
+      expect(result!.code).toContain('__sb_fn()');
+    });
+
     it('handles chained .middleware().handler()', async () => {
       const code = [
         `import { createServerFn } from '@tanstack/react-start';`,

From cad8a194fe6301d9bc628cfba836019ac46e7b7a Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 11:19:31 +0900
Subject: [PATCH 080/326] docs: list the breaking changes of the OXC-based
 csf-tools

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 MIGRATION.md | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/MIGRATION.md b/MIGRATION.md
index 7cb7aa7f4843..8f22923f9778 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1324,6 +1324,23 @@ This only affects tooling that imports Storybook's internal entry points:
 - `CsfObject#get` returns an ESTree expression, and `set`/`transform` accept expressions from `get()` or `parseExpression(code)`. Use `printExpression(node)` to read an expression's source.
 - An `experimental_enrichCsf` function receives the new `CsfFile`. Add code with `csf._appendStatement(code)` instead of pushing Babel nodes onto `csf._ast`.
 
+Behavior that changes for every project:
+
+- **Flow syntax is no longer supported in story files.** Babel parsed `// @flow` files with its Flow plugin; OXC does not parse Flow, so such files fail to index with an error that names Flow. Convert them to TypeScript or plain JavaScript.
+- `parameters.docs.source.originalSource` is now the story's source text exactly as written, where Babel reprinted it with its own formatting. "Show code" and `docs.source.transform` functions receive the authored text, with line endings normalized to `\n`.
+- Parse errors use OXC's wording, and end with ` in <file>` when the file name is known. Duplicate declarations and legacy octal literals are still rejected.
+
+Internal exports that are removed or changed, for tooling built on `storybook/internal/csf-tools`:
+
+- `babelParse` and `babelParseFile` are removed; use `loadCsf(code, options)` and `readCsf(fileName, options)`.
+- `getHeaderComments(statement)` is replaced by `headerComments(editor)`.
+- The story-shape helpers no longer take Babel paths: `jsDocTagsForPath` is `jsDocTagsForNode`, `metaObjectPath` is `metaObject`, and `pathForNode` and `returnedExpressionPath` are removed in favor of `returnedExpression` and plain nodes.
+- The `getAbsolutePath` wrapper helpers in `storybook/internal/common` work on nodes: `getAbsolutePathWrapperAsCallExpression` is replaced by `getAbsolutePathCall`, and `wrapValueWithGetAbsolutePathWrapper` by `wrapValuesWithGetAbsolutePathWrapper`.
+- `new CsfFile(code, options)` and `new ConfigFile(code, fileName)` take source code instead of a Babel AST.
+- `formatCsf(csf, { sourceMaps, sourceFileName, inputSourceMap })` replaces the Babel generator options; `printCsf` and `printConfig` take no options and always print with `\n` line endings.
+- `ConfigFile#setBodyDeclaration(code)` takes the declaration's source text instead of a Babel node.
+- The Vitest config helpers (`canUpdateVitestConfigFile`, `getTargetConfigObject`, ...) moved from `storybook/internal/babel` to `storybook/internal/cli`.
+
 Babel itself is still used where it compiles your code, for example by `@storybook/nextjs` and the webpack Babel compiler addon.
 
 ### Create React App support removed

From d1ea90bb79c05360990b0958a1dcf95ac824dd5b Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 11:23:25 +0900
Subject: [PATCH 081/326] refactor(csf-tools): register node sources when
 parsing instead of on first parent lookup

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/ConfigFile.test.ts     |  7 +++----
 code/core/src/csf-tools/CsfObject.ts           |  2 --
 code/core/src/csf-tools/estree/editor.ts       |  6 ++++--
 .../src/csf-tools/story-shape/utils.test.ts    | 18 +++++++++++-------
 4 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/code/core/src/csf-tools/ConfigFile.test.ts b/code/core/src/csf-tools/ConfigFile.test.ts
index aae4a02711b2..1cfe06a6d777 100644
--- a/code/core/src/csf-tools/ConfigFile.test.ts
+++ b/code/core/src/csf-tools/ConfigFile.test.ts
@@ -454,12 +454,11 @@ describe('ConfigFile', () => {
       );
     });
 
-    it('rejects a node whose source is unknown', () => {
+    it('copies a node from another file by its source', () => {
       const other = loadConfig(`export const a = 1;`).parse();
       const config = loadConfig(`export const c = {};`).parse();
-      expect(() => config.set(['c', 'd'], other.getFieldNode(['a']) as CsfExpression)).toThrow(
-        /expressions must come from/
-      );
+      config.set(['c', 'd'], other.getFieldNode(['a']) as CsfExpression);
+      expect(formatConfig(config)).toBe(`export const c = { d: 1 };`);
     });
 
     describe('named exports', () => {
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index 0364963f379c..b00d49441443 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -528,9 +528,7 @@ class CsfObjectEditor implements CsfObject {
 
   private sourceFor(value: CsfValue | CsfExpression) {
     if (isSpan(value)) {
-      // Registers the source of this file's nodes, so a node read from the file prints as written.
       const node = value as Node;
-      this.editor.parentOf(node);
       return placeableSource(printExpression(node), node.type);
     }
     if (isAstLike(value)) {
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index bf840e19ed0f..00e3d14a1080 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -55,6 +55,8 @@ export class SourceEditor {
   constructor(code: string, fileName?: string) {
     this.fileName = fileName;
     this._module = parseModule(code, fileName);
+    // Every node prints as the text it was parsed from, wherever it is used.
+    registerSource(this._module.program, code);
     this._edits = new MagicString(code, { filename: fileName });
   }
 
@@ -75,14 +77,13 @@ export class SourceEditor {
     return this._scopes;
   }
 
-  /** Parent of a node in this source; building the map also registers every node's source text. */
+  /** Parent of a node in this source. */
   parentOf(node: Node): Node | null {
     if (!this._parents) {
       const parents = new Map<Node, Node | null>();
       walk(this._module.program, (child, parent) => {
         parents.set(child, parent);
       });
-      registerSource(this._module.program, this._module.code);
       this._parents = parents;
     }
     return this._parents.get(node) ?? null;
@@ -124,6 +125,7 @@ export class SourceEditor {
 
   replaceSource(code: string) {
     this._module = parseModule(code, this.fileName);
+    registerSource(this._module.program, code);
     this._scopes = undefined;
     this._parents = undefined;
     this._edits = new MagicString(code, { filename: this.fileName });
diff --git a/code/core/src/csf-tools/story-shape/utils.test.ts b/code/core/src/csf-tools/story-shape/utils.test.ts
index fb9c8ffef545..e6e2a813811b 100644
--- a/code/core/src/csf-tools/story-shape/utils.test.ts
+++ b/code/core/src/csf-tools/story-shape/utils.test.ts
@@ -136,13 +136,17 @@ describe('keyOf', () => {
 });
 
 describe('unwrapExpression', () => {
-  it.each(['{} as Story', '{} satisfies Story', '{}!', '({})', '(({} as Story)!) satisfies Story'])(
-    'unwraps %s',
-    (code) => {
-      const wrapped = expressionFromSource(code);
-      expect(unwrapExpression(wrapped).type).toBe('ObjectExpression');
-    }
-  );
+  it.each([
+    '{} as Story',
+    '{} satisfies Story',
+    '{}!',
+    '({})',
+    '<Story>{}',
+    '(({} as Story)!) satisfies Story',
+  ])('unwraps %s', (code) => {
+    const wrapped = expressionFromSource(code);
+    expect(unwrapExpression(wrapped).type).toBe('ObjectExpression');
+  });
 
   it('returns other nodes untouched', () => {
     const value = expressionFromSource("'Save'");

From 79403c70061c7ad75ffc047d6fc117f4744868a9 Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 11:30:20 +0900
Subject: [PATCH 082/326] test(csf-tools): compare indexing against outputs
 recorded from the Babel implementation

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/.oxlintrc.json                           |    1 +
 code/core/src/csf-tools/__corpus__/README.md  |   11 +
 .../core/src/csf-tools/__corpus__/golden.json | 4393 +++++++++++++++++
 .../inputs/core-argMapping.stories.ts         |   72 +
 .../__corpus__/inputs/core-args.stories.ts    |   98 +
 .../inputs/core-autotitle.stories.ts          |   16 +
 .../__corpus__/inputs/core-basics.stories.ts  |   99 +
 .../inputs/core-before-each.stories.ts        |   43 +
 .../core-component-test.basics.stories.ts     |  132 +
 .../inputs/core-exportOrder.stories.ts        |   11 +
 .../__corpus__/inputs/core-globals.stories.ts |   89 +
 .../__corpus__/inputs/core-indexer.stories.ts |   26 +
 .../inputs/core-interleavedExports.stories.ts |   12 +
 .../inputs/core-moduleMocking.stories.ts      |   28 +
 .../inputs/core-mount-in-play.stories.ts      |   25 +
 .../__corpus__/inputs/core-names.stories.ts   |   25 +
 .../inputs/core-parameters.stories.ts         |   48 +
 .../inputs/core-tags-add.stories.ts           |   41 +
 .../inputs/core-tags-config.stories.ts        |   45 +
 .../__corpus__/inputs/edge-legacy.stories.tsx |   38 +
 .../inputs/edge-typescript.stories.ts         |   30 +
 .../inputs/errors-NoStories.stories.ts        |    5 +
 .../__corpus__/inputs/react-csf1.stories.tsx  |   11 +
 .../__corpus__/inputs/react-csf2.stories.tsx  |   17 +
 .../__corpus__/inputs/react-csf4.stories.tsx  |   13 +
 .../inputs/react-decorators.stories.tsx       |   80 +
 .../inputs/react-js-argtypes.stories.jsx      |   83 +
 .../inputs/react-mount-in-play.stories.tsx    |   21 +
 .../inputs/react-test-fn.stories.tsx          |   92 +
 .../inputs/shapes-angular-button.stories.ts   |  142 +
 code/core/src/csf-tools/__corpus__/record.mjs |   68 +
 code/core/src/csf-tools/corpus.test.ts        |   79 +
 code/core/tsconfig.json                       |    3 +-
 33 files changed, 5896 insertions(+), 1 deletion(-)
 create mode 100644 code/core/src/csf-tools/__corpus__/README.md
 create mode 100644 code/core/src/csf-tools/__corpus__/golden.json
 create mode 100644 code/core/src/csf-tools/__corpus__/inputs/core-argMapping.stories.ts
 create mode 100644 code/core/src/csf-tools/__corpus__/inputs/core-args.stories.ts
 create mode 100644 code/core/src/csf-tools/__corpus__/inputs/core-autotitle.stories.ts
 create mode 100644 code/core/src/csf-tools/__corpus__/inputs/core-basics.stories.ts
 create mode 100644 code/core/src/csf-tools/__corpus__/inputs/core-before-each.stories.ts
 create mode 100644 code/core/src/csf-tools/__corpus__/inputs/core-component-test.basics.stories.ts
 create mode 100644 code/core/src/csf-tools/__corpus__/inputs/core-exportOrder.stories.ts
 create mode 100644 code/core/src/csf-tools/__corpus__/inputs/core-globals.stories.ts
 create mode 100644 code/core/src/csf-tools/__corpus__/inputs/core-indexer.stories.ts
 create mode 100644 code/core/src/csf-tools/__corpus__/inputs/core-interleavedExports.stories.ts
 create mode 100644 code/core/src/csf-tools/__corpus__/inputs/core-moduleMocking.stories.ts
 create mode 100644 code/core/src/csf-tools/__corpus__/inputs/core-mount-in-play.stories.ts
 create mode 100644 code/core/src/csf-tools/__corpus__/inputs/core-names.stories.ts
 create mode 100644 code/core/src/csf-tools/__corpus__/inputs/core-parameters.stories.ts
 create mode 100644 code/core/src/csf-tools/__corpus__/inputs/core-tags-add.stories.ts
 create mode 100644 code/core/src/csf-tools/__corpus__/inputs/core-tags-config.stories.ts
 create mode 100644 code/core/src/csf-tools/__corpus__/inputs/edge-legacy.stories.tsx
 create mode 100644 code/core/src/csf-tools/__corpus__/inputs/edge-typescript.stories.ts
 create mode 100644 code/core/src/csf-tools/__corpus__/inputs/errors-NoStories.stories.ts
 create mode 100644 code/core/src/csf-tools/__corpus__/inputs/react-csf1.stories.tsx
 create mode 100644 code/core/src/csf-tools/__corpus__/inputs/react-csf2.stories.tsx
 create mode 100644 code/core/src/csf-tools/__corpus__/inputs/react-csf4.stories.tsx
 create mode 100644 code/core/src/csf-tools/__corpus__/inputs/react-decorators.stories.tsx
 create mode 100644 code/core/src/csf-tools/__corpus__/inputs/react-js-argtypes.stories.jsx
 create mode 100644 code/core/src/csf-tools/__corpus__/inputs/react-mount-in-play.stories.tsx
 create mode 100644 code/core/src/csf-tools/__corpus__/inputs/react-test-fn.stories.tsx
 create mode 100644 code/core/src/csf-tools/__corpus__/inputs/shapes-angular-button.stories.ts
 create mode 100644 code/core/src/csf-tools/__corpus__/record.mjs
 create mode 100644 code/core/src/csf-tools/corpus.test.ts

diff --git a/code/.oxlintrc.json b/code/.oxlintrc.json
index b465c093f2d9..b37a9751ad60 100644
--- a/code/.oxlintrc.json
+++ b/code/.oxlintrc.json
@@ -20,6 +20,7 @@
     "ember-output",
     "**/__testfixtures__",
     "**/__mockdata__",
+    "**/__corpus__/inputs",
     "renderers/svelte/src/svelte-csf/__tests__/__compiled__",
     "core/assets",
     "core/report",
diff --git a/code/core/src/csf-tools/__corpus__/README.md b/code/core/src/csf-tools/__corpus__/README.md
new file mode 100644
index 000000000000..10cb80a8a68f
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/README.md
@@ -0,0 +1,11 @@
+# CSF corpus
+
+Frozen story files and the outputs the Babel-based `CsfFile` produced for them, recorded once from
+the last `next` commit that still indexed with Babel. `corpus.test.ts` runs the OXC implementation
+over the same inputs and compares with `toEqual`, so `vitest -u` cannot re-baseline the outputs.
+
+Rerun on an OXC upgrade. To extend the corpus, add inputs and record again from a Babel checkout:
+
+```sh
+node code/core/src/csf-tools/__corpus__/record.mjs <babel-checkout>/code
+```
diff --git a/code/core/src/csf-tools/__corpus__/golden.json b/code/core/src/csf-tools/__corpus__/golden.json
new file mode 100644
index 000000000000..891227215aa9
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/golden.json
@@ -0,0 +1,4393 @@
+{
+  "core-argMapping.stories.ts": {
+    "indexInputs": [
+      {
+        "exportName": "Single",
+        "title": "Untitled",
+        "tags": ["play-fn"],
+        "__id": "untitled--single",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Single"
+      },
+      {
+        "exportName": "Multiple",
+        "title": "Untitled",
+        "tags": ["play-fn"],
+        "__id": "untitled--multiple",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Multiple"
+      }
+    ],
+    "meta": {
+      "title": "Untitled",
+      "id": null,
+      "tags": null,
+      "component": "globalThis.__TEMPLATE_COMPONENTS__.Pre",
+      "includeStories": null,
+      "excludeStories": null,
+      "isFactory": false
+    },
+    "stories": {
+      "Single": {
+        "id": "untitled--single",
+        "name": "Single",
+        "tags": ["play-fn"],
+        "localName": null
+      },
+      "Multiple": {
+        "id": "untitled--multiple",
+        "name": "Multiple",
+        "tags": ["play-fn"],
+        "localName": null
+      }
+    },
+    "namedExportsOrder": null,
+    "bindings": {
+      "PartialStoryFn": {
+        "constant": true,
+        "uses": 0
+      },
+      "PlayFunctionContext": {
+        "constant": true,
+        "uses": 0
+      },
+      "StoryContext": {
+        "constant": true,
+        "uses": 0
+      },
+      "globalThis": {
+        "constant": true,
+        "uses": 1
+      },
+      "expect": {
+        "constant": true,
+        "uses": 2
+      },
+      "within": {
+        "constant": true,
+        "uses": 2
+      },
+      "arrows": {
+        "constant": true,
+        "uses": 4
+      },
+      "labels": {
+        "constant": true,
+        "uses": 2
+      },
+      "Single": {
+        "constant": true,
+        "uses": 1
+      },
+      "Multiple": {
+        "constant": true,
+        "uses": 1
+      }
+    }
+  },
+  "core-args.stories.ts": {
+    "indexInputs": [
+      {
+        "exportName": "Inheritance",
+        "title": "Untitled",
+        "tags": ["play-fn"],
+        "__id": "untitled--inheritance",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Inheritance"
+      },
+      {
+        "exportName": "Targets",
+        "title": "Untitled",
+        "tags": ["!vitest", "play-fn"],
+        "__id": "untitled--targets",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Targets"
+      },
+      {
+        "exportName": "Events",
+        "title": "Untitled",
+        "tags": ["!vitest", "!test", "play-fn"],
+        "__id": "untitled--events",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Events"
+      }
+    ],
+    "meta": {
+      "title": "Untitled",
+      "id": null,
+      "tags": null,
+      "component": "globalThis.__TEMPLATE_COMPONENTS__.Pre",
+      "includeStories": null,
+      "excludeStories": null,
+      "isFactory": false
+    },
+    "stories": {
+      "Inheritance": {
+        "id": "untitled--inheritance",
+        "name": "Inheritance",
+        "tags": ["play-fn"],
+        "localName": null
+      },
+      "Targets": {
+        "id": "untitled--targets",
+        "name": "Targets",
+        "tags": ["!vitest", "play-fn"],
+        "localName": null
+      },
+      "Events": {
+        "id": "untitled--events",
+        "name": "Events",
+        "tags": ["!vitest", "!test", "play-fn"],
+        "localName": null
+      }
+    },
+    "namedExportsOrder": null,
+    "bindings": {
+      "RESET_STORY_ARGS": {
+        "constant": true,
+        "uses": 1
+      },
+      "STORY_ARGS_UPDATED": {
+        "constant": true,
+        "uses": 2
+      },
+      "UPDATE_STORY_ARGS": {
+        "constant": true,
+        "uses": 1
+      },
+      "PartialStoryFn": {
+        "constant": true,
+        "uses": 0
+      },
+      "PlayFunctionContext": {
+        "constant": true,
+        "uses": 0
+      },
+      "StoryContext": {
+        "constant": true,
+        "uses": 0
+      },
+      "globalThis": {
+        "constant": true,
+        "uses": 2
+      },
+      "expect": {
+        "constant": true,
+        "uses": 2
+      },
+      "within": {
+        "constant": true,
+        "uses": 4
+      },
+      "pick": {
+        "constant": true,
+        "uses": 1
+      },
+      "Inheritance": {
+        "constant": true,
+        "uses": 1
+      },
+      "Targets": {
+        "constant": true,
+        "uses": 1
+      },
+      "Events": {
+        "constant": true,
+        "uses": 1
+      }
+    }
+  },
+  "core-autotitle.stories.ts": {
+    "indexInputs": [
+      {
+        "exportName": "Default",
+        "title": "Untitled",
+        "tags": ["play-fn"],
+        "__id": "untitled--default",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Default"
+      }
+    ],
+    "meta": {
+      "title": "Untitled",
+      "id": null,
+      "tags": null,
+      "component": "globalThis.__TEMPLATE_COMPONENTS__.Pre",
+      "includeStories": null,
+      "excludeStories": null,
+      "isFactory": false
+    },
+    "stories": {
+      "Default": {
+        "id": "untitled--default",
+        "name": "Default",
+        "tags": ["play-fn"],
+        "localName": null
+      }
+    },
+    "namedExportsOrder": null,
+    "bindings": {
+      "PlayFunctionContext": {
+        "constant": true,
+        "uses": 0
+      },
+      "globalThis": {
+        "constant": true,
+        "uses": 1
+      },
+      "expect": {
+        "constant": true,
+        "uses": 1
+      },
+      "Default": {
+        "constant": true,
+        "uses": 1
+      }
+    }
+  },
+  "core-basics.stories.ts": {
+    "indexInputs": [
+      {
+        "exportName": "Basic",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--basic",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Basic"
+      },
+      {
+        "exportName": "TypeString",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--type-string",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Type String"
+      },
+      {
+        "exportName": "TypeBoolean",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--type-boolean",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Type Boolean"
+      },
+      {
+        "exportName": "TypeObject",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--type-object",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Type Object"
+      },
+      {
+        "exportName": "TypeNull",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--type-null",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Type Null"
+      },
+      {
+        "exportName": "TypeUndefined",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--type-undefined",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Type Undefined"
+      },
+      {
+        "exportName": "TypeNaN",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--type-na-n",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Type Na N"
+      },
+      {
+        "exportName": "TypeInfinity",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--type-infinity",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Type Infinity"
+      },
+      {
+        "exportName": "TypeMinusInfinity",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--type-minus-infinity",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Type Minus Infinity"
+      },
+      {
+        "exportName": "TypeNumber",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--type-number",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Type Number"
+      },
+      {
+        "exportName": "TypeGlobal",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--type-global",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Type Global"
+      },
+      {
+        "exportName": "TypeSymbol",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--type-symbol",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Type Symbol"
+      },
+      {
+        "exportName": "TypeRegExp",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--type-reg-exp",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Type Reg Exp"
+      },
+      {
+        "exportName": "TypeArray",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--type-array",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Type Array"
+      },
+      {
+        "exportName": "TypeClass",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--type-class",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Type Class"
+      },
+      {
+        "exportName": "TypeFunction",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--type-function",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Type Function"
+      },
+      {
+        "exportName": "TypeMultiple",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--type-multiple",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Type Multiple"
+      },
+      {
+        "exportName": "Cyclical",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--cyclical",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Cyclical"
+      },
+      {
+        "exportName": "Reserved",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--reserved",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Reserved"
+      },
+      {
+        "exportName": "OptionPersist",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--option-persist",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Option Persist"
+      },
+      {
+        "exportName": "OptionDepth",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--option-depth",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Option Depth"
+      },
+      {
+        "exportName": "Disabled",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--disabled",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Disabled"
+      }
+    ],
+    "meta": {
+      "title": "Untitled",
+      "id": null,
+      "tags": null,
+      "component": "globalThis.__TEMPLATE_COMPONENTS__.Button",
+      "includeStories": null,
+      "excludeStories": null,
+      "isFactory": false
+    },
+    "stories": {
+      "Basic": {
+        "id": "untitled--basic",
+        "name": "Basic",
+        "localName": null
+      },
+      "TypeString": {
+        "id": "untitled--type-string",
+        "name": "Type String",
+        "localName": null
+      },
+      "TypeBoolean": {
+        "id": "untitled--type-boolean",
+        "name": "Type Boolean",
+        "localName": null
+      },
+      "TypeObject": {
+        "id": "untitled--type-object",
+        "name": "Type Object",
+        "localName": null
+      },
+      "TypeNull": {
+        "id": "untitled--type-null",
+        "name": "Type Null",
+        "localName": null
+      },
+      "TypeUndefined": {
+        "id": "untitled--type-undefined",
+        "name": "Type Undefined",
+        "localName": null
+      },
+      "TypeNaN": {
+        "id": "untitled--type-na-n",
+        "name": "Type Na N",
+        "localName": null
+      },
+      "TypeInfinity": {
+        "id": "untitled--type-infinity",
+        "name": "Type Infinity",
+        "localName": null
+      },
+      "TypeMinusInfinity": {
+        "id": "untitled--type-minus-infinity",
+        "name": "Type Minus Infinity",
+        "localName": null
+      },
+      "TypeNumber": {
+        "id": "untitled--type-number",
+        "name": "Type Number",
+        "localName": null
+      },
+      "TypeGlobal": {
+        "id": "untitled--type-global",
+        "name": "Type Global",
+        "localName": null
+      },
+      "TypeSymbol": {
+        "id": "untitled--type-symbol",
+        "name": "Type Symbol",
+        "localName": null
+      },
+      "TypeRegExp": {
+        "id": "untitled--type-reg-exp",
+        "name": "Type Reg Exp",
+        "localName": null
+      },
+      "TypeArray": {
+        "id": "untitled--type-array",
+        "name": "Type Array",
+        "localName": null
+      },
+      "TypeClass": {
+        "id": "untitled--type-class",
+        "name": "Type Class",
+        "localName": null
+      },
+      "TypeFunction": {
+        "id": "untitled--type-function",
+        "name": "Type Function",
+        "localName": null
+      },
+      "TypeMultiple": {
+        "id": "untitled--type-multiple",
+        "name": "Type Multiple",
+        "localName": null
+      },
+      "Cyclical": {
+        "id": "untitled--cyclical",
+        "name": "Cyclical",
+        "localName": null
+      },
+      "Reserved": {
+        "id": "untitled--reserved",
+        "name": "Reserved",
+        "localName": null
+      },
+      "OptionPersist": {
+        "id": "untitled--option-persist",
+        "name": "Option Persist",
+        "localName": null
+      },
+      "OptionDepth": {
+        "id": "untitled--option-depth",
+        "name": "Option Depth",
+        "localName": null
+      },
+      "Disabled": {
+        "id": "untitled--disabled",
+        "name": "Disabled",
+        "localName": null
+      }
+    },
+    "namedExportsOrder": null,
+    "bindings": {
+      "globalThis": {
+        "constant": true,
+        "uses": 2
+      },
+      "action": {
+        "constant": true,
+        "uses": 22
+      },
+      "Basic": {
+        "constant": true,
+        "uses": 1
+      },
+      "TypeString": {
+        "constant": true,
+        "uses": 1
+      },
+      "TypeBoolean": {
+        "constant": true,
+        "uses": 1
+      },
+      "TypeObject": {
+        "constant": true,
+        "uses": 1
+      },
+      "TypeNull": {
+        "constant": true,
+        "uses": 1
+      },
+      "TypeUndefined": {
+        "constant": true,
+        "uses": 1
+      },
+      "TypeNaN": {
+        "constant": true,
+        "uses": 1
+      },
+      "TypeInfinity": {
+        "constant": true,
+        "uses": 1
+      },
+      "TypeMinusInfinity": {
+        "constant": true,
+        "uses": 1
+      },
+      "TypeNumber": {
+        "constant": true,
+        "uses": 1
+      },
+      "TypeGlobal": {
+        "constant": true,
+        "uses": 1
+      },
+      "TypeSymbol": {
+        "constant": true,
+        "uses": 1
+      },
+      "TypeRegExp": {
+        "constant": true,
+        "uses": 1
+      },
+      "TypeArray": {
+        "constant": true,
+        "uses": 1
+      },
+      "TypeClass": {
+        "constant": true,
+        "uses": 1
+      },
+      "TypeFunction": {
+        "constant": true,
+        "uses": 1
+      },
+      "TypeMultiple": {
+        "constant": true,
+        "uses": 1
+      },
+      "Cyclical": {
+        "constant": true,
+        "uses": 1
+      },
+      "Reserved": {
+        "constant": true,
+        "uses": 1
+      },
+      "OptionPersist": {
+        "constant": true,
+        "uses": 1
+      },
+      "OptionDepth": {
+        "constant": true,
+        "uses": 1
+      },
+      "Disabled": {
+        "constant": true,
+        "uses": 1
+      }
+    }
+  },
+  "core-before-each.stories.ts": {
+    "indexInputs": [
+      {
+        "exportName": "before_each_and_loaders_can_extend_context",
+        "title": "Untitled",
+        "tags": ["play-fn"],
+        "__id": "untitled--before-each-and-loaders-can-extend-context",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": false,
+          "loaders": true,
+          "beforeEach": true,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Before Each And Loaders Can Extend Context"
+      },
+      {
+        "exportName": "context_prop_is_available",
+        "title": "Untitled",
+        "tags": ["play-fn"],
+        "__id": "untitled--context-prop-is-available",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Context Prop Is Available"
+      },
+      {
+        "exportName": "step_and_canvas_element_can_be_used_in_loaders_and_before_each",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--step-and-canvas-element-can-be-used-in-loaders-and-before-each",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": true,
+          "beforeEach": true,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Step And Canvas Element Can Be Used In Loaders And Before Each"
+      }
+    ],
+    "meta": {
+      "title": "Untitled",
+      "id": null,
+      "tags": null,
+      "component": "globalThis.__TEMPLATE_COMPONENTS__.Button",
+      "includeStories": null,
+      "excludeStories": null,
+      "isFactory": false
+    },
+    "stories": {
+      "before_each_and_loaders_can_extend_context": {
+        "id": "untitled--before-each-and-loaders-can-extend-context",
+        "name": "Before Each And Loaders Can Extend Context",
+        "tags": ["play-fn"],
+        "localName": null
+      },
+      "context_prop_is_available": {
+        "id": "untitled--context-prop-is-available",
+        "name": "Context Prop Is Available",
+        "tags": ["play-fn"],
+        "localName": null
+      },
+      "step_and_canvas_element_can_be_used_in_loaders_and_before_each": {
+        "id": "untitled--step-and-canvas-element-can-be-used-in-loaders-and-before-each",
+        "name": "Step And Canvas Element Can Be Used In Loaders And Before Each",
+        "localName": null
+      }
+    },
+    "namedExportsOrder": null,
+    "bindings": {
+      "expect": {
+        "constant": true,
+        "uses": 4
+      },
+      "meta": {
+        "constant": true,
+        "uses": 1
+      },
+      "before_each_and_loaders_can_extend_context": {
+        "constant": true,
+        "uses": 1
+      },
+      "context_prop_is_available": {
+        "constant": true,
+        "uses": 1
+      },
+      "step_and_canvas_element_can_be_used_in_loaders_and_before_each": {
+        "constant": true,
+        "uses": 1
+      }
+    }
+  },
+  "core-component-test.basics.stories.ts": {
+    "indexInputs": [
+      {
+        "exportName": "Validation",
+        "title": "Untitled",
+        "tags": ["!vitest", "play-fn"],
+        "__id": "untitled--validation",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": true,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Validation"
+      },
+      {
+        "exportName": "Type",
+        "title": "Untitled",
+        "tags": ["!vitest", "play-fn"],
+        "__id": "untitled--type",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": true,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Type"
+      },
+      {
+        "exportName": "Step",
+        "title": "Untitled",
+        "tags": ["!vitest", "play-fn"],
+        "__id": "untitled--step",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": true,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Step"
+      },
+      {
+        "exportName": "TypeAndClear",
+        "title": "Untitled",
+        "tags": ["!vitest", "play-fn"],
+        "__id": "untitled--type-and-clear",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": true,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Type And Clear"
+      },
+      {
+        "exportName": "Callback",
+        "title": "Untitled",
+        "tags": ["!vitest", "play-fn"],
+        "__id": "untitled--callback",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": true,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Callback"
+      },
+      {
+        "exportName": "SyncWaitFor",
+        "title": "Untitled",
+        "tags": ["!vitest", "play-fn"],
+        "__id": "untitled--sync-wait-for",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": true,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Sync Wait For"
+      },
+      {
+        "exportName": "AsyncWaitFor",
+        "title": "Untitled",
+        "tags": ["!vitest", "play-fn"],
+        "__id": "untitled--async-wait-for",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": true,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Async Wait For"
+      },
+      {
+        "exportName": "WithLoaders",
+        "title": "Untitled",
+        "tags": ["!vitest", "play-fn"],
+        "__id": "untitled--with-loaders",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": false,
+          "loaders": true,
+          "beforeEach": false,
+          "globals": true,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "With Loaders"
+      },
+      {
+        "exportName": "UserEventSetup",
+        "title": "Untitled",
+        "tags": ["!vitest", "play-fn"],
+        "__id": "untitled--user-event-setup",
+        "__stats": {
+          "play": true,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": true,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "UserEventSetup"
+      }
+    ],
+    "meta": {
+      "title": "Untitled",
+      "id": null,
+      "tags": ["!vitest"],
+      "component": "globalThis.__TEMPLATE_COMPONENTS__.Form",
+      "includeStories": null,
+      "excludeStories": null,
+      "isFactory": false
+    },
+    "stories": {
+      "Validation": {
+        "id": "untitled--validation",
+        "name": "Validation",
+        "tags": ["play-fn"],
+        "localName": null
+      },
+      "Type": {
+        "id": "untitled--type",
+        "name": "Type",
+        "tags": ["play-fn"],
+        "localName": null
+      },
+      "Step": {
+        "id": "untitled--step",
+        "name": "Step",
+        "tags": ["play-fn"],
+        "localName": null
+      },
+      "TypeAndClear": {
+        "id": "untitled--type-and-clear",
+        "name": "Type And Clear",
+        "tags": ["play-fn"],
+        "localName": null
+      },
+      "Callback": {
+        "id": "untitled--callback",
+        "name": "Callback",
+        "tags": ["play-fn"],
+        "localName": null
+      },
+      "SyncWaitFor": {
+        "id": "untitled--sync-wait-for",
+        "name": "Sync Wait For",
+        "tags": ["play-fn"],
+        "localName": null
+      },
+      "AsyncWaitFor": {
+        "id": "untitled--async-wait-for",
+        "name": "Async Wait For",
+        "tags": ["play-fn"],
+        "localName": null
+      },
+      "WithLoaders": {
+        "id": "untitled--with-loaders",
+        "name": "With Loaders",
+        "tags": ["play-fn"],
+        "localName": null
+      },
+      "UserEventSetup": {
+        "id": "untitled--user-event-setup",
+        "name": "UserEventSetup",
+        "tags": ["play-fn"],
+        "localName": "UserEventSetup"
+      }
+    },
+    "namedExportsOrder": null,
+    "bindings": {
+      "globalThis": {
+        "constant": true,
+        "uses": 1
+      },
+      "expect": {
+        "constant": true,
+        "uses": 4
+      },
+      "fireEvent": {
+        "constant": true,
+        "uses": 3
+      },
+      "fn": {
+        "constant": true,
+        "uses": 1
+      },
+      "testUserEvent": {
+        "constant": true,
+        "uses": 1
+      },
+      "waitFor": {
+        "constant": true,
+        "uses": 2
+      },
+      "waitForElementToBeRemoved": {
+        "constant": true,
+        "uses": 2
+      },
+      "within": {
+        "constant": true,
+        "uses": 7
+      },
+      "Validation": {
+        "constant": true,
+        "uses": 1
+      },
+      "Type": {
+        "constant": true,
+        "uses": 3
+      },
+      "Step": {
+        "constant": true,
+        "uses": 1
+      },
+      "TypeAndClear": {
+        "constant": true,
+        "uses": 1
+      },
+      "Callback": {
+        "constant": true,
+        "uses": 4
+      },
+      "SyncWaitFor": {
+        "constant": true,
+        "uses": 1
+      },
+      "AsyncWaitFor": {
+        "constant": true,
+        "uses": 1
+      },
+      "WithLoaders": {
+        "constant": true,
+        "uses": 1
+      },
+      "UserEventSetup": {
+        "constant": true,
+        "uses": 1
+      }
+    }
+  },
+  "core-exportOrder.stories.ts": {
+    "indexInputs": [
+      {
+        "exportName": "Story2",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--story-2",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Story 2"
+      },
+      {
+        "exportName": "Story1",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--story-1",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Story 1"
+      }
+    ],
+    "meta": {
+      "title": "Untitled",
+      "id": null,
+      "tags": null,
+      "component": "globalThis.__TEMPLATE_COMPONENTS__.Pre",
+      "includeStories": null,
+      "excludeStories": null,
+      "isFactory": false
+    },
+    "stories": {
+      "Story2": {
+        "id": "untitled--story-2",
+        "name": "Story 2",
+        "localName": null
+      },
+      "Story1": {
+        "id": "untitled--story-1",
+        "name": "Story 1",
+        "localName": null
+      }
+    },
+    "namedExportsOrder": ["Story2", "Story1"],
+    "bindings": {
+      "globalThis": {
+        "constant": true,
+        "uses": 1
+      },
+      "Story1": {
+        "constant": true,
+        "uses": 1
+      },
+      "Story2": {
+        "constant": true,
+        "uses": 1
+      },
+      "__namedExportsOrder": {
+        "constant": true,
+        "uses": 1
+      }
+    }
+  },
+  "core-globals.stories.ts": {
+    "indexInputs": [
+      {
+        "exportName": "Inheritance",
+        "title": "Untitled",
+        "tags": ["autodocs", "play-fn"],
+        "__id": "untitled--inheritance",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": true,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Inheritance"
+      },
+      {
+        "exportName": "Events",
+        "title": "Untitled",
+        "tags": ["autodocs", "!vitest", "!test", "play-fn"],
+        "__id": "untitled--events",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": true,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Events"
+      },
+      {
+        "exportName": "Overrides1",
+        "title": "Untitled",
+        "tags": ["autodocs", "play-fn"],
+        "__id": "untitled--overrides-1",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": true,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Overrides 1"
+      },
+      {
+        "exportName": "Overrides2",
+        "title": "Untitled",
+        "tags": ["autodocs", "play-fn"],
+        "__id": "untitled--overrides-2",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": true,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Overrides 2"
+      }
+    ],
+    "meta": {
+      "title": "Untitled",
+      "id": null,
+      "tags": ["autodocs"],
+      "component": "globalThis.__TEMPLATE_COMPONENTS__.Pre",
+      "includeStories": null,
+      "excludeStories": null,
+      "isFactory": false
+    },
+    "stories": {
+      "Inheritance": {
+        "id": "untitled--inheritance",
+        "name": "Inheritance",
+        "tags": ["play-fn"],
+        "localName": null
+      },
+      "Events": {
+        "id": "untitled--events",
+        "name": "Events",
+        "tags": ["!vitest", "!test", "play-fn"],
+        "localName": null
+      },
+      "Overrides1": {
+        "id": "untitled--overrides-1",
+        "name": "Overrides 1",
+        "tags": ["play-fn"],
+        "localName": null
+      },
+      "Overrides2": {
+        "id": "untitled--overrides-2",
+        "name": "Overrides 2",
+        "tags": ["play-fn"],
+        "localName": null
+      }
+    },
+    "namedExportsOrder": null,
+    "bindings": {
+      "PartialStoryFn": {
+        "constant": true,
+        "uses": 0
+      },
+      "PlayFunctionContext": {
+        "constant": true,
+        "uses": 0
+      },
+      "StoryContext": {
+        "constant": true,
+        "uses": 0
+      },
+      "globalThis": {
+        "constant": true,
+        "uses": 2
+      },
+      "expect": {
+        "constant": true,
+        "uses": 3
+      },
+      "within": {
+        "constant": true,
+        "uses": 6
+      },
+      "Inheritance": {
+        "constant": true,
+        "uses": 1
+      },
+      "Events": {
+        "constant": true,
+        "uses": 1
+      },
+      "Overrides1": {
+        "constant": true,
+        "uses": 1
+      },
+      "Overrides2": {
+        "constant": true,
+        "uses": 1
+      }
+    }
+  },
+  "core-indexer.stories.ts": {
+    "indexInputs": [
+      {
+        "exportName": "Default",
+        "title": "Untitled",
+        "metaId": "indexer-custom-meta-id",
+        "tags": ["play-fn"],
+        "__id": "indexer-custom-meta-id--default",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Default"
+      },
+      {
+        "exportName": "CustomParametersId",
+        "title": "Untitled",
+        "metaId": "indexer-custom-meta-id",
+        "tags": ["play-fn"],
+        "__id": "custom-id",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Custom Parameters Id"
+      }
+    ],
+    "meta": {
+      "title": "Untitled",
+      "id": "indexer-custom-meta-id",
+      "tags": null,
+      "component": "globalThis.__TEMPLATE_COMPONENTS__.Pre",
+      "includeStories": null,
+      "excludeStories": null,
+      "isFactory": false
+    },
+    "stories": {
+      "Default": {
+        "id": "indexer-custom-meta-id--default",
+        "name": "Default",
+        "tags": ["play-fn"],
+        "localName": null
+      },
+      "CustomParametersId": {
+        "id": "custom-id",
+        "name": "Custom Parameters Id",
+        "tags": ["play-fn"],
+        "localName": null
+      }
+    },
+    "namedExportsOrder": null,
+    "bindings": {
+      "PlayFunctionContext": {
+        "constant": true,
+        "uses": 0
+      },
+      "globalThis": {
+        "constant": true,
+        "uses": 1
+      },
+      "expect": {
+        "constant": true,
+        "uses": 2
+      },
+      "Default": {
+        "constant": true,
+        "uses": 1
+      },
+      "CustomParametersId": {
+        "constant": true,
+        "uses": 1
+      }
+    }
+  },
+  "core-interleavedExports.stories.ts": {
+    "indexInputs": [
+      {
+        "exportName": "Story1",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--story-1",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Story 1"
+      },
+      {
+        "exportName": "Story2",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--story-2",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Story 2"
+      }
+    ],
+    "meta": {
+      "title": "Untitled",
+      "id": null,
+      "tags": null,
+      "component": "globalThis.__TEMPLATE_COMPONENTS__.Pre",
+      "includeStories": null,
+      "excludeStories": null,
+      "isFactory": false
+    },
+    "stories": {
+      "Story1": {
+        "id": "untitled--story-1",
+        "name": "Story 1",
+        "localName": null
+      },
+      "Story2": {
+        "id": "untitled--story-2",
+        "name": "Story 2",
+        "localName": null
+      }
+    },
+    "namedExportsOrder": null,
+    "bindings": {
+      "globalThis": {
+        "constant": true,
+        "uses": 1
+      },
+      "Story1": {
+        "constant": true,
+        "uses": 1
+      },
+      "Story2": {
+        "constant": true,
+        "uses": 1
+      }
+    }
+  },
+  "core-moduleMocking.stories.ts": {
+    "indexInputs": [
+      {
+        "exportName": "Basic",
+        "title": "Untitled",
+        "tags": ["play-fn"],
+        "__id": "untitled--basic",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": false,
+          "loaders": false,
+          "beforeEach": true,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Basic"
+      }
+    ],
+    "meta": {
+      "title": "Untitled",
+      "id": null,
+      "tags": ["play-fn"],
+      "component": "globalThis.__TEMPLATE_COMPONENTS__.Button",
+      "includeStories": null,
+      "excludeStories": null,
+      "isFactory": false
+    },
+    "stories": {
+      "Basic": {
+        "id": "untitled--basic",
+        "name": "Basic",
+        "localName": null
+      }
+    },
+    "namedExportsOrder": null,
+    "bindings": {
+      "globalThis": {
+        "constant": true,
+        "uses": 1
+      },
+      "foo": {
+        "constant": true,
+        "uses": 3
+      },
+      "expect": {
+        "constant": true,
+        "uses": 2
+      },
+      "fn": {
+        "constant": true,
+        "uses": 1
+      },
+      "isMockFunction": {
+        "constant": true,
+        "uses": 1
+      },
+      "mocked": {
+        "constant": true,
+        "uses": 1
+      },
+      "Basic": {
+        "constant": true,
+        "uses": 1
+      }
+    }
+  },
+  "core-mount-in-play.stories.ts": {
+    "indexInputs": [
+      {
+        "exportName": "MountShouldBeDestructured",
+        "title": "Untitled",
+        "tags": ["play-fn"],
+        "__id": "untitled--mount-should-be-destructured",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Mount Should Be Destructured"
+      }
+    ],
+    "meta": {
+      "title": "Untitled",
+      "id": null,
+      "tags": null,
+      "component": "globalThis.__TEMPLATE_COMPONENTS__.Button",
+      "includeStories": null,
+      "excludeStories": null,
+      "isFactory": false
+    },
+    "stories": {
+      "MountShouldBeDestructured": {
+        "id": "untitled--mount-should-be-destructured",
+        "name": "Mount Should Be Destructured",
+        "tags": ["play-fn"],
+        "localName": null
+      }
+    },
+    "namedExportsOrder": null,
+    "bindings": {
+      "expect": {
+        "constant": true,
+        "uses": 1
+      },
+      "fn": {
+        "constant": true,
+        "uses": 1
+      },
+      "meta": {
+        "constant": true,
+        "uses": 1
+      },
+      "MountShouldBeDestructured": {
+        "constant": true,
+        "uses": 1
+      }
+    }
+  },
+  "core-names.stories.ts": {
+    "indexInputs": [
+      {
+        "exportName": "PrefixAndName",
+        "title": "Untitled",
+        "tags": ["play-fn"],
+        "__id": "untitled--prefix-and-name",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Prefix And Name"
+      },
+      {
+        "exportName": "Prefix",
+        "title": "Untitled",
+        "tags": ["play-fn"],
+        "__id": "untitled--prefix",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Prefix"
+      }
+    ],
+    "meta": {
+      "title": "Untitled",
+      "id": null,
+      "tags": null,
+      "component": "globalThis.__TEMPLATE_COMPONENTS__.Pre",
+      "includeStories": null,
+      "excludeStories": null,
+      "isFactory": false
+    },
+    "stories": {
+      "PrefixAndName": {
+        "id": "untitled--prefix-and-name",
+        "name": "Prefix And Name",
+        "tags": ["play-fn"],
+        "localName": null
+      },
+      "Prefix": {
+        "id": "untitled--prefix",
+        "name": "Prefix",
+        "tags": ["play-fn"],
+        "localName": null
+      }
+    },
+    "namedExportsOrder": null,
+    "bindings": {
+      "PlayFunctionContext": {
+        "constant": true,
+        "uses": 0
+      },
+      "globalThis": {
+        "constant": true,
+        "uses": 1
+      },
+      "expect": {
+        "constant": true,
+        "uses": 2
+      },
+      "PrefixAndName": {
+        "constant": true,
+        "uses": 1
+      },
+      "Prefix": {
+        "constant": true,
+        "uses": 1
+      }
+    }
+  },
+  "core-parameters.stories.ts": {
+    "indexInputs": [
+      {
+        "exportName": "Inheritance",
+        "title": "Untitled",
+        "tags": ["play-fn"],
+        "__id": "untitled--inheritance",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Inheritance"
+      }
+    ],
+    "meta": {
+      "title": "Untitled",
+      "id": null,
+      "tags": null,
+      "component": "globalThis.__TEMPLATE_COMPONENTS__.Pre",
+      "includeStories": null,
+      "excludeStories": null,
+      "isFactory": false
+    },
+    "stories": {
+      "Inheritance": {
+        "id": "untitled--inheritance",
+        "name": "Inheritance",
+        "tags": ["play-fn"],
+        "localName": null
+      }
+    },
+    "namedExportsOrder": null,
+    "bindings": {
+      "PartialStoryFn": {
+        "constant": true,
+        "uses": 0
+      },
+      "PlayFunctionContext": {
+        "constant": true,
+        "uses": 0
+      },
+      "StoryContext": {
+        "constant": true,
+        "uses": 0
+      },
+      "globalThis": {
+        "constant": true,
+        "uses": 1
+      },
+      "expect": {
+        "constant": true,
+        "uses": 1
+      },
+      "within": {
+        "constant": true,
+        "uses": 1
+      },
+      "Inheritance": {
+        "constant": true,
+        "uses": 1
+      }
+    }
+  },
+  "core-tags-add.stories.ts": {
+    "indexInputs": [
+      {
+        "exportName": "Inheritance",
+        "title": "Untitled",
+        "tags": ["!dev", "!autodocs", "!test", "story-one", "!vitest", "play-fn"],
+        "__id": "untitled--inheritance",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Inheritance"
+      },
+      {
+        "exportName": "Dev",
+        "title": "Untitled",
+        "tags": ["!dev", "!autodocs", "!test", "dev"],
+        "__id": "untitled--dev",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Dev"
+      },
+      {
+        "exportName": "Autodocs",
+        "title": "Untitled",
+        "tags": ["!dev", "!autodocs", "!test", "autodocs"],
+        "__id": "untitled--autodocs",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Autodocs"
+      },
+      {
+        "exportName": "Test",
+        "title": "Untitled",
+        "tags": ["!dev", "!autodocs", "!test", "test"],
+        "__id": "untitled--test",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Test"
+      }
+    ],
+    "meta": {
+      "title": "Untitled",
+      "id": null,
+      "tags": ["!dev", "!autodocs", "!test"],
+      "component": "globalThis.__TEMPLATE_COMPONENTS__.Pre",
+      "includeStories": null,
+      "excludeStories": null,
+      "isFactory": false
+    },
+    "stories": {
+      "Inheritance": {
+        "id": "untitled--inheritance",
+        "name": "Inheritance",
+        "tags": ["story-one", "!vitest", "play-fn"],
+        "localName": null
+      },
+      "Dev": {
+        "id": "untitled--dev",
+        "name": "Dev",
+        "tags": ["dev"],
+        "localName": null
+      },
+      "Autodocs": {
+        "id": "untitled--autodocs",
+        "name": "Autodocs",
+        "tags": ["autodocs"],
+        "localName": null
+      },
+      "Test": {
+        "id": "untitled--test",
+        "name": "Test",
+        "tags": ["test"],
+        "localName": null
+      }
+    },
+    "namedExportsOrder": null,
+    "bindings": {
+      "PartialStoryFn": {
+        "constant": true,
+        "uses": 0
+      },
+      "PlayFunctionContext": {
+        "constant": true,
+        "uses": 0
+      },
+      "StoryContext": {
+        "constant": true,
+        "uses": 0
+      },
+      "globalThis": {
+        "constant": true,
+        "uses": 1
+      },
+      "expect": {
+        "constant": true,
+        "uses": 1
+      },
+      "within": {
+        "constant": true,
+        "uses": 1
+      },
+      "Inheritance": {
+        "constant": true,
+        "uses": 1
+      },
+      "Dev": {
+        "constant": true,
+        "uses": 1
+      },
+      "Autodocs": {
+        "constant": true,
+        "uses": 1
+      },
+      "Test": {
+        "constant": true,
+        "uses": 1
+      }
+    }
+  },
+  "core-tags-config.stories.ts": {
+    "indexInputs": [
+      {
+        "exportName": "Inheritance",
+        "title": "Untitled",
+        "tags": ["component-one", "component-two", "autodocs", "story-one", "!vitest", "play-fn"],
+        "__id": "untitled--inheritance",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Inheritance"
+      },
+      {
+        "exportName": "DocsOnly",
+        "title": "Untitled",
+        "tags": ["component-one", "component-two", "autodocs", "docs-only"],
+        "__id": "untitled--docs-only",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Docs Only"
+      },
+      {
+        "exportName": "TestOnly",
+        "title": "Untitled",
+        "tags": ["component-one", "component-two", "autodocs", "test-only"],
+        "__id": "untitled--test-only",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Test Only"
+      },
+      {
+        "exportName": "DevOnly",
+        "title": "Untitled",
+        "tags": ["component-one", "component-two", "autodocs", "dev-only"],
+        "__id": "untitled--dev-only",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Dev Only"
+      },
+      {
+        "exportName": "TagRemoval",
+        "title": "Untitled",
+        "tags": ["component-one", "component-two", "autodocs", "!component-two"],
+        "__id": "untitled--tag-removal",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Tag Removal"
+      }
+    ],
+    "meta": {
+      "title": "Untitled",
+      "id": null,
+      "tags": ["component-one", "component-two", "autodocs"],
+      "component": "globalThis.__TEMPLATE_COMPONENTS__.Pre",
+      "includeStories": null,
+      "excludeStories": null,
+      "isFactory": false
+    },
+    "stories": {
+      "Inheritance": {
+        "id": "untitled--inheritance",
+        "name": "Inheritance",
+        "tags": ["story-one", "!vitest", "play-fn"],
+        "localName": null
+      },
+      "DocsOnly": {
+        "id": "untitled--docs-only",
+        "name": "Docs Only",
+        "tags": ["docs-only"],
+        "localName": null
+      },
+      "TestOnly": {
+        "id": "untitled--test-only",
+        "name": "Test Only",
+        "tags": ["test-only"],
+        "localName": null
+      },
+      "DevOnly": {
+        "id": "untitled--dev-only",
+        "name": "Dev Only",
+        "tags": ["dev-only"],
+        "localName": null
+      },
+      "TagRemoval": {
+        "id": "untitled--tag-removal",
+        "name": "Tag Removal",
+        "tags": ["!component-two"],
+        "localName": null
+      }
+    },
+    "namedExportsOrder": null,
+    "bindings": {
+      "PartialStoryFn": {
+        "constant": true,
+        "uses": 0
+      },
+      "PlayFunctionContext": {
+        "constant": true,
+        "uses": 0
+      },
+      "StoryContext": {
+        "constant": true,
+        "uses": 0
+      },
+      "globalThis": {
+        "constant": true,
+        "uses": 1
+      },
+      "expect": {
+        "constant": true,
+        "uses": 1
+      },
+      "within": {
+        "constant": true,
+        "uses": 1
+      },
+      "Inheritance": {
+        "constant": true,
+        "uses": 1
+      },
+      "DocsOnly": {
+        "constant": true,
+        "uses": 1
+      },
+      "TestOnly": {
+        "constant": true,
+        "uses": 1
+      },
+      "DevOnly": {
+        "constant": true,
+        "uses": 1
+      },
+      "TagRemoval": {
+        "constant": true,
+        "uses": 1
+      }
+    }
+  },
+  "edge-legacy.stories.tsx": {
+    "indexInputs": [
+      {
+        "rawComponentPath": "./Button",
+        "exportName": "Bound",
+        "title": "Edge/Legacy",
+        "tags": ["autodocs"],
+        "__id": "edge-legacy--bound",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": true,
+          "storyFn": true,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Bound story"
+      },
+      {
+        "rawComponentPath": "./Button",
+        "exportName": "Cast",
+        "title": "Edge/Legacy",
+        "tags": ["autodocs"],
+        "__id": "edge-legacy--cast",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Cast"
+      },
+      {
+        "rawComponentPath": "./Button",
+        "exportName": "WithPlay",
+        "title": "Edge/Legacy",
+        "tags": ["autodocs", "play-fn"],
+        "__id": "edge-legacy--with-play",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": true,
+          "storyFn": false,
+          "mount": true,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "With Play"
+      },
+      {
+        "rawComponentPath": "./Button",
+        "exportName": "Declared",
+        "title": "Edge/Legacy",
+        "tags": ["autodocs"],
+        "__id": "edge-legacy--declared",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": true,
+          "storyFn": true,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Declared"
+      },
+      {
+        "rawComponentPath": "./Button",
+        "exportName": "Alias",
+        "title": "Edge/Legacy",
+        "tags": ["autodocs"],
+        "__id": "edge-legacy--alias",
+        "__stats": {
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Alias"
+      }
+    ],
+    "meta": {
+      "title": "Edge/Legacy",
+      "id": null,
+      "tags": ["autodocs"],
+      "component": "Button",
+      "includeStories": {
+        "regex": "^[A-Z]",
+        "flags": ""
+      },
+      "excludeStories": ["Helper"],
+      "isFactory": false
+    },
+    "stories": {
+      "Bound": {
+        "id": "edge-legacy--bound",
+        "name": "Bound story",
+        "localName": null
+      },
+      "Cast": {
+        "id": "edge-legacy--cast",
+        "name": "Cast",
+        "localName": null
+      },
+      "WithPlay": {
+        "id": "edge-legacy--with-play",
+        "name": "With Play",
+        "tags": ["play-fn"],
+        "localName": null
+      },
+      "Declared": {
+        "id": "edge-legacy--declared",
+        "name": "Declared",
+        "localName": null
+      },
+      "Alias": {
+        "id": "edge-legacy--alias",
+        "name": "Alias",
+        "localName": "Local"
+      }
+    },
+    "namedExportsOrder": null,
+    "bindings": {
+      "Meta": {
+        "constant": true,
+        "uses": 1
+      },
+      "StoryFn": {
+        "constant": true,
+        "uses": 0
+      },
+      "StoryObj": {
+        "constant": true,
+        "uses": 1
+      },
+      "Button": {
+        "constant": true,
+        "uses": 4
+      },
+      "meta": {
+        "constant": true,
+        "uses": 1
+      },
+      "Helper": {
+        "constant": true,
+        "uses": 1
+      },
+      "Template": {
+        "constant": true,
+        "uses": 3
+      },
+      "Bound": {
+        "constant": true,
+        "uses": 4
+      },
+      "Cast": {
+        "constant": true,
+        "uses": 2
+      },
+      "WithPlay": {
+        "constant": true,
+        "uses": 1
+      },
+      "Declared": {
+        "constant": true,
+        "uses": 1
+      },
+      "Local": {
+        "constant": true,
+        "uses": 1
+      }
+    }
+  },
+  "edge-typescript.stories.ts": {
+    "error": true
+  },
+  "errors-NoStories.stories.ts": {
+    "indexInputs": [],
+    "meta": {
+      "title": "Untitled",
+      "id": null,
+      "tags": null,
+      "component": "component",
+      "includeStories": null,
+      "excludeStories": null,
+      "isFactory": false
+    },
+    "stories": {},
+    "namedExportsOrder": null,
+    "bindings": {
+      "component": {
+        "constant": true,
+        "uses": 1
+      }
+    }
+  },
+  "react-csf1.stories.tsx": {
+    "indexInputs": [
+      {
+        "exportName": "Hello1",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--hello-1",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": true,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Hello 1"
+      },
+      {
+        "exportName": "Hello2",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--hello-2",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": true,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Hello 2"
+      }
+    ],
+    "meta": {
+      "title": "Untitled",
+      "id": null,
+      "tags": null,
+      "component": "{}",
+      "includeStories": null,
+      "excludeStories": null,
+      "isFactory": false
+    },
+    "stories": {
+      "Hello1": {
+        "id": "untitled--hello-1",
+        "name": "Hello 1",
+        "localName": null
+      },
+      "Hello2": {
+        "id": "untitled--hello-2",
+        "name": "Hello 2",
+        "localName": null
+      }
+    },
+    "namedExportsOrder": null,
+    "bindings": {
+      "React": {
+        "constant": true,
+        "uses": 0
+      },
+      "Hello1": {
+        "constant": true,
+        "uses": 1
+      },
+      "Hello2": {
+        "constant": true,
+        "uses": 1
+      }
+    }
+  },
+  "react-csf2.stories.tsx": {
+    "indexInputs": [
+      {
+        "exportName": "Hello1",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--hello-1",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": true,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Hello 1"
+      },
+      {
+        "exportName": "Hello2",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--hello-2",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": true,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Hello 2"
+      },
+      {
+        "exportName": "Hello3",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--hello-3",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": true,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Hello 3"
+      }
+    ],
+    "meta": {
+      "title": "Untitled",
+      "id": null,
+      "tags": null,
+      "component": "{}",
+      "includeStories": null,
+      "excludeStories": null,
+      "isFactory": false
+    },
+    "stories": {
+      "Hello1": {
+        "id": "untitled--hello-1",
+        "name": "Hello 1",
+        "localName": null
+      },
+      "Hello2": {
+        "id": "untitled--hello-2",
+        "name": "Hello 2",
+        "localName": null
+      },
+      "Hello3": {
+        "id": "untitled--hello-3",
+        "name": "Hello 3",
+        "localName": null
+      }
+    },
+    "namedExportsOrder": null,
+    "bindings": {
+      "React": {
+        "constant": true,
+        "uses": 0
+      },
+      "Template": {
+        "constant": true,
+        "uses": 4
+      },
+      "Hello1": {
+        "constant": true,
+        "uses": 1
+      },
+      "Hello2": {
+        "constant": true,
+        "uses": 1
+      },
+      "Hello3": {
+        "constant": true,
+        "uses": 1
+      }
+    }
+  },
+  "react-csf4.stories.tsx": {
+    "indexInputs": [
+      {
+        "exportName": "Story",
+        "title": "Untitled",
+        "tags": [],
+        "__id": "untitled--story",
+        "__stats": {
+          "factory": true,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Story"
+      }
+    ],
+    "meta": {
+      "title": "Untitled",
+      "id": null,
+      "tags": null,
+      "component": "globalThis.__TEMPLATE_COMPONENTS__.Button",
+      "includeStories": null,
+      "excludeStories": null,
+      "isFactory": true
+    },
+    "stories": {
+      "Story": {
+        "id": "untitled--story",
+        "name": "Story",
+        "localName": null
+      }
+    },
+    "namedExportsOrder": null,
+    "bindings": {
+      "preview": {
+        "constant": true,
+        "uses": 1
+      },
+      "meta": {
+        "constant": true,
+        "uses": 1
+      },
+      "Story": {
+        "constant": true,
+        "uses": 1
+      }
+    }
+  },
+  "react-decorators.stories.tsx": {
+    "indexInputs": [
+      {
+        "exportName": "All",
+        "title": "Untitled",
+        "tags": ["autodocs"],
+        "__id": "untitled--all",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "All"
+      },
+      {
+        "exportName": "Context",
+        "title": "Untitled",
+        "tags": ["autodocs"],
+        "__id": "untitled--context",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": true,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Context"
+      },
+      {
+        "exportName": "AllowUseStateInRender",
+        "title": "Untitled",
+        "tags": ["autodocs", "!vitest", "play-fn"],
+        "__id": "untitled--allow-use-state-in-render",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": true,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Allow Use State In Render"
+      }
+    ],
+    "meta": {
+      "title": "Untitled",
+      "id": null,
+      "tags": ["autodocs"],
+      "component": "Component",
+      "includeStories": null,
+      "excludeStories": null,
+      "isFactory": false
+    },
+    "stories": {
+      "All": {
+        "id": "untitled--all",
+        "name": "All",
+        "localName": null
+      },
+      "Context": {
+        "id": "untitled--context",
+        "name": "Context",
+        "localName": null
+      },
+      "AllowUseStateInRender": {
+        "id": "untitled--allow-use-state-in-render",
+        "name": "Allow Use State In Render",
+        "tags": ["!vitest", "play-fn"],
+        "localName": null
+      }
+    },
+    "namedExportsOrder": null,
+    "bindings": {
+      "FC": {
+        "constant": true,
+        "uses": 0
+      },
+      "React": {
+        "constant": true,
+        "uses": 0
+      },
+      "createContext": {
+        "constant": true,
+        "uses": 1
+      },
+      "useContext": {
+        "constant": true,
+        "uses": 1
+      },
+      "useState": {
+        "constant": true,
+        "uses": 1
+      },
+      "Meta": {
+        "constant": true,
+        "uses": 1
+      },
+      "StoryObj": {
+        "constant": true,
+        "uses": 0
+      },
+      "useParameter": {
+        "constant": true,
+        "uses": 1
+      },
+      "Component": {
+        "constant": true,
+        "uses": 2
+      },
+      "All": {
+        "constant": true,
+        "uses": 1
+      },
+      "TestContext": {
+        "constant": true,
+        "uses": 3
+      },
+      "Context": {
+        "constant": true,
+        "uses": 1
+      },
+      "AllowUseStateInRender": {
+        "constant": true,
+        "uses": 1
+      }
+    }
+  },
+  "react-js-argtypes.stories.jsx": {
+    "indexInputs": [
+      {
+        "rawComponentPath": "./docgen-components/js-function-component-inline-defaults/input.jsx",
+        "exportName": "JsFunctionComponentInlineDefaults",
+        "title": "Untitled",
+        "tags": ["!vitest"],
+        "__id": "untitled--js-function-component-inline-defaults",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": true,
+          "loaders": true,
+          "beforeEach": false,
+          "globals": false,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Js Function Component Inline Defaults"
+      },
+      {
+        "rawComponentPath": "./docgen-components/js-function-component-inline-defaults/input.jsx",
+        "exportName": "JsFunctionComponentInlineDefaultsNoPropTypes",
+        "title": "Untitled",
+        "tags": ["!vitest"],
+        "__id": "untitled--js-function-component-inline-defaults-no-prop-types",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": true,
+          "loaders": true,
+          "beforeEach": false,
+          "globals": false,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Js Function Component Inline Defaults No Prop Types"
+      },
+      {
+        "rawComponentPath": "./docgen-components/js-function-component-inline-defaults/input.jsx",
+        "exportName": "JsDefaultValues",
+        "title": "Untitled",
+        "tags": ["!vitest"],
+        "__id": "untitled--js-default-values",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": true,
+          "loaders": true,
+          "beforeEach": false,
+          "globals": false,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Js Default Values"
+      },
+      {
+        "rawComponentPath": "./docgen-components/js-function-component-inline-defaults/input.jsx",
+        "exportName": "JsReactMemo",
+        "title": "Untitled",
+        "tags": ["!vitest"],
+        "__id": "untitled--js-react-memo",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": true,
+          "loaders": true,
+          "beforeEach": false,
+          "globals": false,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Js React Memo"
+      }
+    ],
+    "meta": {
+      "title": "Untitled",
+      "id": null,
+      "tags": ["!vitest"],
+      "component": "JsFunctionComponentInlineDefaultsComponent",
+      "includeStories": null,
+      "excludeStories": null,
+      "isFactory": false
+    },
+    "stories": {
+      "JsFunctionComponentInlineDefaults": {
+        "id": "untitled--js-function-component-inline-defaults",
+        "name": "Js Function Component Inline Defaults",
+        "localName": null
+      },
+      "JsFunctionComponentInlineDefaultsNoPropTypes": {
+        "id": "untitled--js-function-component-inline-defaults-no-prop-types",
+        "name": "Js Function Component Inline Defaults No Prop Types",
+        "localName": null
+      },
+      "JsDefaultValues": {
+        "id": "untitled--js-default-values",
+        "name": "Js Default Values",
+        "localName": null
+      },
+      "JsReactMemo": {
+        "id": "untitled--js-react-memo",
+        "name": "Js React Memo",
+        "localName": null
+      }
+    },
+    "namedExportsOrder": null,
+    "bindings": {
+      "React": {
+        "constant": true,
+        "uses": 0
+      },
+      "useState": {
+        "constant": true,
+        "uses": 1
+      },
+      "ArgsTable": {
+        "constant": true,
+        "uses": 1
+      },
+      "PropTypes": {
+        "constant": true,
+        "uses": 1
+      },
+      "storyNameFromExport": {
+        "constant": true,
+        "uses": 1
+      },
+      "getService": {
+        "constant": true,
+        "uses": 1
+      },
+      "inferControls": {
+        "constant": true,
+        "uses": 1
+      },
+      "ThemeProvider": {
+        "constant": true,
+        "uses": 2
+      },
+      "convert": {
+        "constant": true,
+        "uses": 1
+      },
+      "themes": {
+        "constant": true,
+        "uses": 1
+      },
+      "JsReactMemoComponent": {
+        "constant": true,
+        "uses": 2
+      },
+      "JsDefaultValuesComponent": {
+        "constant": true,
+        "uses": 2
+      },
+      "JsFunctionComponentInlineDefaultsNoPropTypesComponent": {
+        "constant": true,
+        "uses": 2
+      },
+      "JsFunctionComponentInlineDefaultsComponent": {
+        "constant": true,
+        "uses": 3
+      },
+      "isVite": {
+        "constant": true,
+        "uses": 1
+      },
+      "ArgsStory": {
+        "constant": true,
+        "uses": 2
+      },
+      "JsFunctionComponentInlineDefaults": {
+        "constant": true,
+        "uses": 1
+      },
+      "JsFunctionComponentInlineDefaultsNoPropTypes": {
+        "constant": true,
+        "uses": 1
+      },
+      "JsDefaultValues": {
+        "constant": true,
+        "uses": 1
+      },
+      "JsReactMemo": {
+        "constant": true,
+        "uses": 1
+      }
+    }
+  },
+  "react-mount-in-play.stories.tsx": {
+    "indexInputs": [
+      {
+        "exportName": "Basic",
+        "title": "Untitled",
+        "tags": ["play-fn"],
+        "__id": "untitled--basic",
+        "__stats": {
+          "factory": false,
+          "play": true,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": true,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Basic"
+      }
+    ],
+    "meta": {
+      "title": "Untitled",
+      "id": null,
+      "tags": null,
+      "component": "Button",
+      "includeStories": null,
+      "excludeStories": null,
+      "isFactory": false
+    },
+    "stories": {
+      "Basic": {
+        "id": "untitled--basic",
+        "name": "Basic",
+        "tags": ["play-fn"],
+        "localName": null
+      }
+    },
+    "namedExportsOrder": null,
+    "bindings": {
+      "FC": {
+        "constant": true,
+        "uses": 0
+      },
+      "React": {
+        "constant": true,
+        "uses": 0
+      },
+      "StoryObj": {
+        "constant": true,
+        "uses": 0
+      },
+      "Button": {
+        "constant": true,
+        "uses": 2
+      },
+      "Basic": {
+        "constant": true,
+        "uses": 1
+      }
+    }
+  },
+  "react-test-fn.stories.tsx": {
+    "indexInputs": [
+      {
+        "exportName": "Default",
+        "title": "Untitled",
+        "tags": ["some-tag"],
+        "__id": "untitled--default",
+        "__stats": {
+          "factory": true,
+          "tests": true,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Default"
+      },
+      {
+        "exportName": "Default",
+        "title": "Untitled",
+        "tags": ["some-tag", "!autodocs", "test-fn"],
+        "__id": "untitled--default:simple",
+        "__stats": {
+          "factory": true,
+          "tests": true,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "test",
+        "name": "simple",
+        "parent": "untitled--default",
+        "parentName": "Default"
+      },
+      {
+        "exportName": "Default",
+        "title": "Untitled",
+        "tags": ["some-tag", "!autodocs", "test-fn"],
+        "__id": "untitled--default:referring-to-function-in-file",
+        "__stats": {
+          "factory": true,
+          "tests": true,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "test",
+        "name": "referring to function in file",
+        "parent": "untitled--default",
+        "parentName": "Default"
+      },
+      {
+        "exportName": "Default",
+        "title": "Untitled",
+        "tags": ["some-tag", "!autodocs", "!test", "test-fn"],
+        "__id": "untitled--default:with-overrides",
+        "__stats": {
+          "factory": true,
+          "tests": true,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "test",
+        "name": "with overrides",
+        "parent": "untitled--default",
+        "parentName": "Default"
+      },
+      {
+        "exportName": "Default",
+        "title": "Untitled",
+        "tags": ["some-tag", "!autodocs", "test-fn"],
+        "__id": "untitled--default:with-play-function",
+        "__stats": {
+          "factory": true,
+          "tests": true,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "test",
+        "name": "with play function",
+        "parent": "untitled--default",
+        "parentName": "Default"
+      },
+      {
+        "exportName": "Extended",
+        "title": "Untitled",
+        "tags": ["some-tag"],
+        "__id": "untitled--extended",
+        "__stats": {
+          "factory": true,
+          "tests": true,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Extended"
+      },
+      {
+        "exportName": "Extended",
+        "title": "Untitled",
+        "tags": ["some-tag", "!autodocs", "test-fn"],
+        "__id": "untitled--extended:should-have-extended-args",
+        "__stats": {
+          "factory": true,
+          "tests": true,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": true,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "test",
+        "name": "should have extended args",
+        "parent": "untitled--extended",
+        "parentName": "Extended"
+      }
+    ],
+    "meta": {
+      "title": "Untitled",
+      "id": null,
+      "tags": ["some-tag"],
+      "component": "Button",
+      "includeStories": null,
+      "excludeStories": null,
+      "isFactory": true
+    },
+    "stories": {
+      "Default": {
+        "id": "untitled--default",
+        "name": "Default",
+        "localName": null
+      },
+      "Extended": {
+        "id": "untitled--extended",
+        "name": "Extended",
+        "localName": null
+      }
+    },
+    "namedExportsOrder": null,
+    "bindings": {
+      "React": {
+        "constant": true,
+        "uses": 0
+      },
+      "StoryContext": {
+        "constant": true,
+        "uses": 0
+      },
+      "expect": {
+        "constant": true,
+        "uses": 7
+      },
+      "fn": {
+        "constant": true,
+        "uses": 1
+      },
+      "preview": {
+        "constant": true,
+        "uses": 1
+      },
+      "Button": {
+        "constant": true,
+        "uses": 1
+      },
+      "meta": {
+        "constant": true,
+        "uses": 1
+      },
+      "Default": {
+        "constant": true,
+        "uses": 6
+      },
+      "doTest": {
+        "constant": true,
+        "uses": 1
+      },
+      "Extended": {
+        "constant": true,
+        "uses": 2
+      }
+    }
+  },
+  "shapes-angular-button.stories.ts": {
+    "indexInputs": [
+      {
+        "rawComponentPath": "./shape-button.component.ts",
+        "exportName": "OwnTemplate",
+        "title": "AngularShapes/button-shapes",
+        "tags": [],
+        "__id": "angularshapes-button-shapes--own-template",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Own Template"
+      },
+      {
+        "rawComponentPath": "./shape-button.component.ts",
+        "exportName": "RenderTemplate",
+        "title": "AngularShapes/button-shapes",
+        "tags": [],
+        "__id": "angularshapes-button-shapes--render-template",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": true,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Render Template"
+      },
+      {
+        "rawComponentPath": "./shape-button.component.ts",
+        "exportName": "MethodRender",
+        "title": "AngularShapes/button-shapes",
+        "tags": [],
+        "__id": "angularshapes-button-shapes--method-render",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": true,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Method Render"
+      },
+      {
+        "rawComponentPath": "./shape-button.component.ts",
+        "exportName": "ArgsToTemplateWrapper",
+        "title": "AngularShapes/button-shapes",
+        "tags": [],
+        "__id": "angularshapes-button-shapes--args-to-template-wrapper",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": true,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Args To Template Wrapper"
+      },
+      {
+        "rawComponentPath": "./shape-button.component.ts",
+        "exportName": "ArgsToTemplateInclude",
+        "title": "AngularShapes/button-shapes",
+        "tags": [],
+        "__id": "angularshapes-button-shapes--args-to-template-include",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": true,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Args To Template Include"
+      },
+      {
+        "rawComponentPath": "./shape-button.component.ts",
+        "exportName": "SlotInterpolation",
+        "title": "AngularShapes/button-shapes",
+        "tags": [],
+        "__id": "angularshapes-button-shapes--slot-interpolation",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": true,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Slot Interpolation"
+      },
+      {
+        "rawComponentPath": "./shape-button.component.ts",
+        "exportName": "ModuleConstant",
+        "title": "AngularShapes/button-shapes",
+        "tags": [],
+        "__id": "angularshapes-button-shapes--module-constant",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": true,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Module Constant"
+      },
+      {
+        "rawComponentPath": "./shape-button.component.ts",
+        "exportName": "HoistedTemplate",
+        "title": "AngularShapes/button-shapes",
+        "tags": [],
+        "__id": "angularshapes-button-shapes--hoisted-template",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Hoisted Template"
+      },
+      {
+        "rawComponentPath": "./shape-button.component.ts",
+        "exportName": "QuotedArgs",
+        "title": "AngularShapes/button-shapes",
+        "tags": [],
+        "__id": "angularshapes-button-shapes--quoted-args",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Quoted Args"
+      },
+      {
+        "rawComponentPath": "./shape-button.component.ts",
+        "exportName": "ImportedTemplate",
+        "title": "AngularShapes/button-shapes",
+        "tags": [],
+        "__id": "angularshapes-button-shapes--imported-template",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Imported Template"
+      },
+      {
+        "rawComponentPath": "./shape-button.component.ts",
+        "exportName": "SpreadShadowedRender",
+        "title": "AngularShapes/button-shapes",
+        "tags": [],
+        "__id": "angularshapes-button-shapes--spread-shadowed-render",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": true,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Spread Shadowed Render"
+      },
+      {
+        "rawComponentPath": "./shape-button.component.ts",
+        "exportName": "SpreadArgs",
+        "title": "AngularShapes/button-shapes",
+        "tags": [],
+        "__id": "angularshapes-button-shapes--spread-args",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Spread Args"
+      },
+      {
+        "rawComponentPath": "./shape-button.component.ts",
+        "exportName": "AccessorRender",
+        "title": "AngularShapes/button-shapes",
+        "tags": [],
+        "__id": "angularshapes-button-shapes--accessor-render",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": true,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Accessor Render"
+      },
+      {
+        "rawComponentPath": "./shape-button.component.ts",
+        "exportName": "MultiExitRender",
+        "title": "AngularShapes/button-shapes",
+        "tags": [],
+        "__id": "angularshapes-button-shapes--multi-exit-render",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": true,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Multi Exit Render"
+      },
+      {
+        "rawComponentPath": "./shape-button.component.ts",
+        "exportName": "DynamicOptions",
+        "title": "AngularShapes/button-shapes",
+        "tags": [],
+        "__id": "angularshapes-button-shapes--dynamic-options",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": true,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Dynamic Options"
+      },
+      {
+        "rawComponentPath": "./shape-button.component.ts",
+        "exportName": "TemplateBind",
+        "title": "AngularShapes/button-shapes",
+        "tags": [],
+        "__id": "angularshapes-button-shapes--template-bind",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Template Bind"
+      },
+      {
+        "rawComponentPath": "./shape-button.component.ts",
+        "exportName": "MemberAssignedRender",
+        "title": "AngularShapes/button-shapes",
+        "tags": [],
+        "__id": "angularshapes-button-shapes--member-assigned-render",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": true,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Member Assigned Render"
+      },
+      {
+        "rawComponentPath": "./shape-button.component.ts",
+        "exportName": "ReassignedTemplate",
+        "title": "AngularShapes/button-shapes",
+        "tags": [],
+        "__id": "angularshapes-button-shapes--reassigned-template",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Reassigned Template"
+      },
+      {
+        "rawComponentPath": "./shape-button.component.ts",
+        "exportName": "SpreadStoryArgs",
+        "title": "AngularShapes/button-shapes",
+        "tags": [],
+        "__id": "angularshapes-button-shapes--spread-story-args",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Spread Story Args"
+      },
+      {
+        "rawComponentPath": "./shape-button.component.ts",
+        "exportName": "HoistedArgs",
+        "title": "AngularShapes/button-shapes",
+        "tags": [],
+        "__id": "angularshapes-button-shapes--hoisted-args",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Hoisted Args"
+      },
+      {
+        "rawComponentPath": "./shape-button.component.ts",
+        "exportName": "SpreadCrossFileArgs",
+        "title": "AngularShapes/button-shapes",
+        "tags": [],
+        "__id": "angularshapes-button-shapes--spread-cross-file-args",
+        "__stats": {
+          "factory": false,
+          "play": false,
+          "render": false,
+          "loaders": false,
+          "beforeEach": false,
+          "globals": false,
+          "tags": false,
+          "storyFn": false,
+          "mount": false,
+          "moduleMock": false
+        },
+        "type": "story",
+        "subtype": "story",
+        "name": "Spread Cross File Args"
+      }
+    ],
+    "meta": {
+      "title": "AngularShapes/button-shapes",
+      "id": null,
+      "tags": null,
+      "component": "ShapeButtonComponent",
+      "includeStories": null,
+      "excludeStories": null,
+      "isFactory": false
+    },
+    "stories": {
+      "OwnTemplate": {
+        "id": "angularshapes-button-shapes--own-template",
+        "name": "Own Template",
+        "localName": null
+      },
+      "RenderTemplate": {
+        "id": "angularshapes-button-shapes--render-template",
+        "name": "Render Template",
+        "localName": null
+      },
+      "MethodRender": {
+        "id": "angularshapes-button-shapes--method-render",
+        "name": "Method Render",
+        "localName": null
+      },
+      "ArgsToTemplateWrapper": {
+        "id": "angularshapes-button-shapes--args-to-template-wrapper",
+        "name": "Args To Template Wrapper",
+        "localName": null
+      },
+      "ArgsToTemplateInclude": {
+        "id": "angularshapes-button-shapes--args-to-template-include",
+        "name": "Args To Template Include",
+        "localName": null
+      },
+      "SlotInterpolation": {
+        "id": "angularshapes-button-shapes--slot-interpolation",
+        "name": "Slot Interpolation",
+        "localName": null
+      },
+      "ModuleConstant": {
+        "id": "angularshapes-button-shapes--module-constant",
+        "name": "Module Constant",
+        "localName": null
+      },
+      "HoistedTemplate": {
+        "id": "angularshapes-button-shapes--hoisted-template",
+        "name": "Hoisted Template",
+        "localName": null
+      },
+      "QuotedArgs": {
+        "id": "angularshapes-button-shapes--quoted-args",
+        "name": "Quoted Args",
+        "localName": null
+      },
+      "ImportedTemplate": {
+        "id": "angularshapes-button-shapes--imported-template",
+        "name": "Imported Template",
+        "localName": null
+      },
+      "SpreadShadowedRender": {
+        "id": "angularshapes-button-shapes--spread-shadowed-render",
+        "name": "Spread Shadowed Render",
+        "localName": null
+      },
+      "SpreadArgs": {
+        "id": "angularshapes-button-shapes--spread-args",
+        "name": "Spread Args",
+        "localName": null
+      },
+      "AccessorRender": {
+        "id": "angularshapes-button-shapes--accessor-render",
+        "name": "Accessor Render",
+        "localName": null
+      },
+      "MultiExitRender": {
+        "id": "angularshapes-button-shapes--multi-exit-render",
+        "name": "Multi Exit Render",
+        "localName": null
+      },
+      "DynamicOptions": {
+        "id": "angularshapes-button-shapes--dynamic-options",
+        "name": "Dynamic Options",
+        "localName": null
+      },
+      "TemplateBind": {
+        "id": "angularshapes-button-shapes--template-bind",
+        "name": "Template Bind",
+        "localName": null
+      },
+      "MemberAssignedRender": {
+        "id": "angularshapes-button-shapes--member-assigned-render",
+        "name": "Member Assigned Render",
+        "localName": null
+      },
+      "ReassignedTemplate": {
+        "id": "angularshapes-button-shapes--reassigned-template",
+        "name": "Reassigned Template",
+        "localName": null
+      },
+      "SpreadStoryArgs": {
+        "id": "angularshapes-button-shapes--spread-story-args",
+        "name": "Spread Story Args",
+        "localName": null
+      },
+      "HoistedArgs": {
+        "id": "angularshapes-button-shapes--hoisted-args",
+        "name": "Hoisted Args",
+        "localName": null
+      },
+      "SpreadCrossFileArgs": {
+        "id": "angularshapes-button-shapes--spread-cross-file-args",
+        "name": "Spread Cross File Args",
+        "localName": null
+      }
+    },
+    "namedExportsOrder": null,
+    "bindings": {
+      "ShapeButtonComponent": {
+        "constant": true,
+        "uses": 1
+      },
+      "IMPORTED_TEMPLATE": {
+        "constant": true,
+        "uses": 1
+      },
+      "BaseStories": {
+        "constant": true,
+        "uses": 1
+      },
+      "argsToTemplate": {
+        "constant": true,
+        "uses": 3
+      },
+      "HOISTED_TEMPLATE": {
+        "constant": true,
+        "uses": 1
+      },
+      "HEADER": {
+        "constant": true,
+        "uses": 1
+      },
+      "INCLUDES": {
+        "constant": true,
+        "uses": 1
+      },
+      "base": {
+        "constant": true,
+        "uses": 1
+      },
+      "Template": {
+        "constant": true,
+        "uses": 2
+      },
+      "MUTABLE_TEMPLATE": {
+        "constant": false,
+        "uses": 2
+      },
+      "extraArgs": {
+        "constant": true,
+        "uses": 1
+      },
+      "OwnTemplate": {
+        "constant": true,
+        "uses": 1
+      },
+      "RenderTemplate": {
+        "constant": true,
+        "uses": 1
+      },
+      "MethodRender": {
+        "constant": true,
+        "uses": 1
+      },
+      "ArgsToTemplateWrapper": {
+        "constant": true,
+        "uses": 1
+      },
+      "ArgsToTemplateInclude": {
+        "constant": true,
+        "uses": 1
+      },
+      "SlotInterpolation": {
+        "constant": true,
+        "uses": 1
+      },
+      "ModuleConstant": {
+        "constant": true,
+        "uses": 1
+      },
+      "HoistedTemplate": {
+        "constant": true,
+        "uses": 1
+      },
+      "QuotedArgs": {
+        "constant": true,
+        "uses": 2
+      },
+      "ImportedTemplate": {
+        "constant": true,
+        "uses": 1
+      },
+      "SpreadShadowedRender": {
+        "constant": true,
+        "uses": 1
+      },
+      "SpreadArgs": {
+        "constant": true,
+        "uses": 1
+      },
+      "AccessorRender": {
+        "constant": true,
+        "uses": 1
+      },
+      "MultiExitRender": {
+        "constant": true,
+        "uses": 1
+      },
+      "DynamicOptions": {
+        "constant": true,
+        "uses": 1
+      },
+      "TemplateBind": {
+        "constant": true,
+        "uses": 2
+      },
+      "MemberAssignedRender": {
+        "constant": true,
+        "uses": 2
+      },
+      "ReassignedTemplate": {
+        "constant": true,
+        "uses": 1
+      },
+      "SpreadStoryArgs": {
+        "constant": true,
+        "uses": 1
+      },
+      "HoistedArgs": {
+        "constant": true,
+        "uses": 1
+      },
+      "SpreadCrossFileArgs": {
+        "constant": true,
+        "uses": 1
+      }
+    }
+  }
+}
diff --git a/code/core/src/csf-tools/__corpus__/inputs/core-argMapping.stories.ts b/code/core/src/csf-tools/__corpus__/inputs/core-argMapping.stories.ts
new file mode 100644
index 000000000000..ea77d3edfddc
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/inputs/core-argMapping.stories.ts
@@ -0,0 +1,72 @@
+import type { PartialStoryFn, PlayFunctionContext, StoryContext } from 'storybook/internal/types';
+
+import { global as globalThis } from '@storybook/global';
+
+import { expect, within } from 'storybook/test';
+
+const arrows = {
+  ArrowUp: { name: 'ArrowUp' },
+  ArrowDown: { name: 'ArrowDown' },
+  ArrowLeft: { name: 'ArrowLeft' },
+  ArrowRight: { name: 'ArrowRight' },
+};
+
+const labels = {
+  ArrowUp: 'Up',
+  ArrowDown: 'Down',
+  ArrowLeft: 'Left',
+  ArrowRight: 'Right',
+};
+
+export default {
+  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,
+  decorators: [
+    (storyFn: PartialStoryFn, context: StoryContext) => {
+      return storyFn({
+        args: { object: { ...context.args } },
+      });
+    },
+  ],
+};
+
+export const Single = {
+  args: {
+    mappingArg: 'ArrowRight',
+  },
+  argTypes: {
+    mappingArg: {
+      options: Object.keys(arrows),
+      mapping: arrows,
+      control: {
+        type: 'select',
+        labels,
+      },
+    },
+  },
+  play: async ({ canvasElement }: PlayFunctionContext<any>) => {
+    await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({
+      mappingArg: { name: 'ArrowRight' },
+    });
+  },
+};
+
+export const Multiple = {
+  args: {
+    mappingArg: ['ArrowRight', 'ArrowLeft'],
+  },
+  argTypes: {
+    mappingArg: {
+      options: Object.keys(arrows),
+      mapping: arrows,
+      control: {
+        type: 'multi-select',
+        labels,
+      },
+    },
+  },
+  play: async ({ canvasElement }: PlayFunctionContext<any>) => {
+    await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({
+      mappingArg: [{ name: 'ArrowRight' }, { name: 'ArrowLeft' }],
+    });
+  },
+};
diff --git a/code/core/src/csf-tools/__corpus__/inputs/core-args.stories.ts b/code/core/src/csf-tools/__corpus__/inputs/core-args.stories.ts
new file mode 100644
index 000000000000..e1760c784a3b
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/inputs/core-args.stories.ts
@@ -0,0 +1,98 @@
+import {
+  RESET_STORY_ARGS,
+  STORY_ARGS_UPDATED,
+  UPDATE_STORY_ARGS,
+} from 'storybook/internal/core-events';
+import type { PartialStoryFn, PlayFunctionContext, StoryContext } from 'storybook/internal/types';
+
+import { global as globalThis } from '@storybook/global';
+
+import { expect, within } from 'storybook/test';
+
+function pick(obj, keys) {
+  const result = {};
+  for (const key of keys) {
+    result[key] = obj[key];
+  }
+  return result;
+}
+
+export default {
+  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,
+  args: {
+    componentArg: 'componentArg',
+    storyArg: 'componentStoryArg',
+    object: {
+      a: 'component',
+      b: 'component',
+    },
+  },
+  // Compose the set of  args into `object`, so the pre component only needs a single prop
+  //   (selecting only the args specified on parameters.argNames if set)
+  decorators: [
+    (storyFn: PartialStoryFn, context: StoryContext) => {
+      const { argNames } = context.parameters;
+      const args = { ...context.args };
+      const object = argNames ? pick(args, argNames) : args;
+      return storyFn({ args: { object } });
+    },
+  ],
+};
+
+export const Inheritance = {
+  args: {
+    storyArg: 'storyArg',
+    object: {
+      a: 'story',
+    },
+  },
+  play: async ({ canvasElement }: PlayFunctionContext<any>) => {
+    // NOTE: these stories don't test project-level args inheritance as it is too problematic
+    // to have an arg floating around that will apply too *all* other stories in our sandboxes.
+    await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toEqual({
+      componentArg: 'componentArg',
+      storyArg: 'storyArg',
+      object: {
+        a: 'story',
+      },
+    });
+  },
+};
+
+export const Targets = {
+  args: {
+    a: 'a',
+    b: 'b',
+  },
+  argTypes: {
+    a: { target: 'elsewhere' },
+  },
+  parameters: { argNames: ['a', 'b'] },
+  play: async ({ canvasElement }: PlayFunctionContext<any>) => {
+    // Check that `a` doesn't end up set
+    await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toEqual({
+      b: 'b',
+    });
+  },
+  tags: ['!vitest'],
+};
+
+export const Events = {
+  args: {
+    test: 'initial',
+  },
+  parameters: { argNames: ['test'] },
+  play: async ({ canvasElement, id }: PlayFunctionContext<any>) => {
+    const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
+    await channel.emit(RESET_STORY_ARGS, { storyId: id });
+    await new Promise((resolve) => channel.once(STORY_ARGS_UPDATED, resolve));
+
+    await within(canvasElement).findByText(/initial/);
+
+    await channel.emit(UPDATE_STORY_ARGS, { storyId: id, updatedArgs: { test: 'updated' } });
+    await new Promise((resolve) => channel.once(STORY_ARGS_UPDATED, resolve));
+    await within(canvasElement).findByText(/updated/);
+  },
+  // this story can't be reliably tested because the args changes results in renderPhases disrupting test runs
+  tags: ['!vitest', '!test'],
+};
diff --git a/code/core/src/csf-tools/__corpus__/inputs/core-autotitle.stories.ts b/code/core/src/csf-tools/__corpus__/inputs/core-autotitle.stories.ts
new file mode 100644
index 000000000000..5fa47cbe32ab
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/inputs/core-autotitle.stories.ts
@@ -0,0 +1,16 @@
+import type { PlayFunctionContext } from 'storybook/internal/types';
+
+import { global as globalThis } from '@storybook/global';
+
+import { expect } from 'storybook/test';
+
+export default {
+  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,
+  args: { text: 'No content' },
+};
+
+export const Default = {
+  play: async ({ title }: PlayFunctionContext<any>) => {
+    await expect(title).toBe('core/autotitle');
+  },
+};
diff --git a/code/core/src/csf-tools/__corpus__/inputs/core-basics.stories.ts b/code/core/src/csf-tools/__corpus__/inputs/core-basics.stories.ts
new file mode 100644
index 000000000000..354bacc466c9
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/inputs/core-basics.stories.ts
@@ -0,0 +1,99 @@
+import { global as globalThis } from '@storybook/global';
+
+import { action } from 'storybook/actions';
+
+export default {
+  component: globalThis.__TEMPLATE_COMPONENTS__.Button,
+  args: {
+    label: 'Click Me!',
+  },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+};
+
+export const Basic = {
+  args: { onClick: action('onClick') },
+};
+
+export const TypeString = {
+  args: { onClick: () => action('onClick')('string') },
+};
+export const TypeBoolean = {
+  args: { onClick: () => action('onClick')(false) },
+};
+export const TypeObject = {
+  args: { onClick: () => action('onClick')({}) },
+};
+export const TypeNull = {
+  args: { onClick: () => action('onClick')(null) },
+};
+export const TypeUndefined = {
+  args: { onClick: () => action('onClick')(undefined) },
+};
+export const TypeNaN = {
+  args: { onClick: () => action('onClick')(NaN) },
+};
+export const TypeInfinity = {
+  args: { onClick: () => action('onClick')(Infinity) },
+};
+export const TypeMinusInfinity = {
+  args: { onClick: () => action('onClick')(-Infinity) },
+};
+export const TypeNumber = {
+  args: { onClick: () => action('onClick')(10000) },
+};
+export const TypeGlobal = {
+  args: { onClick: () => action('onClick')(globalThis) },
+};
+export const TypeSymbol = {
+  args: { onClick: () => action('onClick')(Symbol('MySymbol')) },
+};
+export const TypeRegExp = {
+  args: { onClick: () => action('onClick')(new RegExp('MyRegExp')) },
+};
+export const TypeArray = {
+  args: { onClick: () => action('onClick')(['a', 'b', 'c']) },
+};
+export const TypeClass = {
+  args: { onClick: () => action('onClick')(class MyClass {}) },
+};
+export const TypeFunction = {
+  args: { onClick: () => action('onClick')(function MyFunction() {}) },
+};
+export const TypeMultiple = {
+  args: { onClick: () => action('onClick')('string', true, false, null, undefined, [], {}) },
+};
+
+export const Cyclical = {
+  args: {
+    onClick: () =>
+      action('onClick')(
+        (() => {
+          const cyclical: Record<string, any> = {};
+          cyclical.cyclical = cyclical;
+          return cyclical;
+        })()
+      ),
+  },
+};
+
+export const Reserved = {
+  args: { onClick: action('delete') },
+};
+
+export const OptionPersist = {
+  args: { onClick: action('onClick', { clearOnStoryChange: false }) },
+};
+export const OptionDepth = {
+  args: { onClick: action('onClick', { depth: 2 }) },
+};
+
+export const Disabled = {
+  args: { onClick: action('onCLick') },
+  parameters: {
+    actions: {
+      disabled: true,
+    },
+  },
+};
diff --git a/code/core/src/csf-tools/__corpus__/inputs/core-before-each.stories.ts b/code/core/src/csf-tools/__corpus__/inputs/core-before-each.stories.ts
new file mode 100644
index 000000000000..4dc557af3c87
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/inputs/core-before-each.stories.ts
@@ -0,0 +1,43 @@
+/* eslint-disable storybook/prefer-pascal-case */
+import { expect } from 'storybook/test';
+
+const meta = {
+  component: globalThis.__TEMPLATE_COMPONENTS__.Button,
+  args: { label: 'Button' },
+};
+
+export default meta;
+
+export const before_each_and_loaders_can_extend_context = {
+  parameters: { chromatic: { disableSnapshot: true } },
+  loaders(context) {
+    context.foo = ['bar'];
+  },
+  beforeEach(context) {
+    context.foo = [...context.foo, 'baz'];
+  },
+  async play({ foo }) {
+    await expect(foo).toEqual(['bar', 'baz']);
+  },
+};
+
+export const context_prop_is_available = {
+  parameters: { chromatic: { disableSnapshot: true } },
+  async play({ context, canvasElement }) {
+    await expect(context.canvasElement).toEqual(canvasElement);
+  },
+};
+
+export const step_and_canvas_element_can_be_used_in_loaders_and_before_each = {
+  parameters: { chromatic: { disableSnapshot: true } },
+  loaders({ step, canvasElement }) {
+    step('loaders', async () => {
+      await expect(canvasElement).toBeInTheDocument();
+    });
+  },
+  beforeEach({ step, canvasElement }) {
+    step('before each', async () => {
+      await expect(canvasElement).toBeInTheDocument();
+    });
+  },
+};
diff --git a/code/core/src/csf-tools/__corpus__/inputs/core-component-test.basics.stories.ts b/code/core/src/csf-tools/__corpus__/inputs/core-component-test.basics.stories.ts
new file mode 100644
index 000000000000..48f4e494ed07
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/inputs/core-component-test.basics.stories.ts
@@ -0,0 +1,132 @@
+import { global as globalThis } from '@storybook/global';
+
+import {
+  expect,
+  fireEvent,
+  fn,
+  userEvent as testUserEvent,
+  waitFor,
+  waitForElementToBeRemoved,
+  within,
+} from 'storybook/test';
+
+export default {
+  component: globalThis.__TEMPLATE_COMPONENTS__.Form,
+  args: {
+    onSuccess: fn(),
+  },
+  globals: {
+    sb_theme: 'light',
+  },
+  tags: ['!vitest'],
+};
+
+export const Validation = {
+  play: async (context) => {
+    const { args, canvasElement, step } = context;
+    const canvas = within(canvasElement);
+
+    await step('Submit', async () => fireEvent.click(canvas.getByRole('button')));
+
+    await expect(args.onSuccess).not.toHaveBeenCalled();
+  },
+};
+
+export const Type = {
+  play: async ({ canvasElement, userEvent }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByTestId('value'), 'foobar');
+  },
+};
+
+export const Step = {
+  play: async ({ step }) => {
+    await step('Enter value', Type.play);
+  },
+};
+
+export const TypeAndClear = {
+  play: async ({ canvasElement, userEvent }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByTestId('value'), 'initial value');
+    await userEvent.clear(canvas.getByTestId('value'));
+    await userEvent.type(canvas.getByTestId('value'), 'final value');
+  },
+};
+
+export const Callback = {
+  play: async ({ args, canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    await step('Enter value', Type.play);
+
+    await step('Submit', async () => {
+      await fireEvent.click(canvas.getByRole('button'));
+    });
+
+    await expect(args.onSuccess).toHaveBeenCalled();
+  },
+};
+
+// NOTE: of course you can use `findByText()` to implicitly waitFor, but we want
+// an explicit test here
+export const SyncWaitFor = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    await step('Submit form', Callback.play);
+    await waitFor(() => canvas.getByText('Completed!!'));
+    await waitForElementToBeRemoved(() => canvas.queryByText('Completed!!'), {
+      timeout: 2000,
+    });
+  },
+};
+
+export const AsyncWaitFor = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    await step('Submit form', Callback.play);
+    await waitFor(async () => canvas.getByText('Completed!!'));
+    await waitForElementToBeRemoved(() => canvas.queryByText('Completed!!'), {
+      timeout: 2000,
+    });
+  },
+};
+
+export const WithLoaders = {
+  loaders: [async () => new Promise((resolve) => setTimeout(resolve, 2000))],
+  play: async ({ step }) => {
+    await step('Submit form', Callback.play);
+  },
+};
+
+const UserEventSetup = {
+  play: async (context) => {
+    const { args, canvasElement, step, userEvent } = context;
+    const canvas = within(canvasElement);
+    await step('Select and type on input using user-event v14 setup', async () => {
+      const input = canvas.getByRole('textbox');
+      await userEvent.click(input);
+      await userEvent.type(input, 'Typing ...');
+    });
+    await step('Tab and press enter on submit button', async () => {
+      // Vitest's userEvent does not support pointer events, so we use storybook's
+      await testUserEvent.pointer([
+        { keys: '[TouchA>]', target: canvas.getByRole('textbox') },
+        { keys: '[/TouchA]' },
+      ]);
+      const submitButton = await canvas.findByRole('button');
+
+      if (navigator.userAgent.toLowerCase().includes('firefox')) {
+        // user event has a few issues on firefox, therefore we do it differently
+        await fireEvent.click(submitButton);
+      } else {
+        await userEvent.tab();
+        await userEvent.keyboard('{enter}');
+        await expect(submitButton).toHaveFocus();
+      }
+
+      await expect(args.onSuccess).toHaveBeenCalled();
+    });
+  },
+};
+
+export { UserEventSetup };
diff --git a/code/core/src/csf-tools/__corpus__/inputs/core-exportOrder.stories.ts b/code/core/src/csf-tools/__corpus__/inputs/core-exportOrder.stories.ts
new file mode 100644
index 000000000000..4d4ccbd05ffa
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/inputs/core-exportOrder.stories.ts
@@ -0,0 +1,11 @@
+import { global as globalThis } from '@storybook/global';
+
+export default {
+  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,
+  args: { text: 'Check that Story2 is listed before Story1' },
+};
+
+export const Story1 = {};
+export const Story2 = {};
+
+export const __namedExportsOrder = ['Story2', 'Story1'];
diff --git a/code/core/src/csf-tools/__corpus__/inputs/core-globals.stories.ts b/code/core/src/csf-tools/__corpus__/inputs/core-globals.stories.ts
new file mode 100644
index 000000000000..15bbf6acd55e
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/inputs/core-globals.stories.ts
@@ -0,0 +1,89 @@
+import type { PartialStoryFn, PlayFunctionContext, StoryContext } from 'storybook/internal/types';
+
+import { global as globalThis } from '@storybook/global';
+
+import { expect, within } from 'storybook/test';
+
+export default {
+  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,
+  tags: ['autodocs'],
+  globals: {
+    baz: 'bazComponentValue',
+  },
+};
+
+export const Inheritance = {
+  // Compose all the globals into `object`, so the pre component only needs a single prop
+  decorators: [
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ args: { object: context.globals } }),
+  ],
+  play: async ({ canvasElement }: PlayFunctionContext<any>) => {
+    await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({
+      foo: 'fooValue',
+      bar: 'barValue',
+      baz: 'bazComponentValue',
+    });
+  },
+};
+
+export const Events = {
+  parameters: { chromatic: { disableSnapshot: true } },
+  // Just pass the "foo" global to the pre
+  decorators: [
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ args: { text: context.globals.foo } }),
+  ],
+  play: async ({ canvasElement }: PlayFunctionContext<any>) => {
+    const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
+    await channel.emit('updateGlobals', { globals: { foo: 'fooValue' } });
+    await within(canvasElement).findByText('fooValue');
+
+    await channel.emit('updateGlobals', { globals: { foo: 'updated' } });
+    await within(canvasElement).findByText('updated');
+
+    // Reset it back to the original value just to avoid polluting the URL
+    await channel.emit('updateGlobals', { globals: { foo: 'fooValue' } });
+    await within(canvasElement).findByText('fooValue');
+  },
+  // this story can't be reliably tested because the globals changes results in renderPhases disrupting test runs
+  tags: ['!vitest', '!test'],
+};
+
+export const Overrides1 = {
+  // Compose all the globals into `object`, so the pre component only needs a single prop
+  decorators: [
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ args: { object: context.globals } }),
+  ],
+  globals: {
+    foo: 'fooOverridden1',
+    baz: 'bazOverridden1',
+  },
+  play: async ({ canvasElement }: PlayFunctionContext<any>) => {
+    await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({
+      foo: 'fooOverridden1',
+      bar: 'barValue',
+      baz: 'bazOverridden1',
+    });
+  },
+};
+
+export const Overrides2 = {
+  // Compose all the globals into `object`, so the pre component only needs a single prop
+  decorators: [
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ args: { object: context.globals } }),
+  ],
+  globals: {
+    foo: 'fooOverridden2',
+    baz: 'bazOverridden2',
+  },
+  play: async ({ canvasElement }: PlayFunctionContext<any>) => {
+    await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({
+      foo: 'fooOverridden2',
+      bar: 'barValue',
+      baz: 'bazOverridden2',
+    });
+  },
+};
diff --git a/code/core/src/csf-tools/__corpus__/inputs/core-indexer.stories.ts b/code/core/src/csf-tools/__corpus__/inputs/core-indexer.stories.ts
new file mode 100644
index 000000000000..1b03c38bd029
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/inputs/core-indexer.stories.ts
@@ -0,0 +1,26 @@
+import type { PlayFunctionContext } from 'storybook/internal/types';
+
+import { global as globalThis } from '@storybook/global';
+
+import { expect } from 'storybook/test';
+
+export default {
+  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,
+  args: { text: 'Check that id assertions in interaction tests are passing' },
+  id: 'indexer-custom-meta-id',
+};
+
+export const Default = {
+  play: async ({ id }: PlayFunctionContext<any>) => {
+    await expect(id).toBe('indexer-custom-meta-id--default');
+  },
+};
+
+export const CustomParametersId = {
+  parameters: {
+    __id: 'custom-id',
+  },
+  play: async ({ id }: PlayFunctionContext<any>) => {
+    await expect(id).toBe('custom-id');
+  },
+};
diff --git a/code/core/src/csf-tools/__corpus__/inputs/core-interleavedExports.stories.ts b/code/core/src/csf-tools/__corpus__/inputs/core-interleavedExports.stories.ts
new file mode 100644
index 000000000000..1307fb1faf58
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/inputs/core-interleavedExports.stories.ts
@@ -0,0 +1,12 @@
+import { global as globalThis } from '@storybook/global';
+
+import './import';
+
+export default {
+  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,
+  args: { text: 'Check that stories are processed OK' },
+};
+
+export const Story1 = {};
+
+export const Story2 = {};
diff --git a/code/core/src/csf-tools/__corpus__/inputs/core-moduleMocking.stories.ts b/code/core/src/csf-tools/__corpus__/inputs/core-moduleMocking.stories.ts
new file mode 100644
index 000000000000..4fdb186a3165
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/inputs/core-moduleMocking.stories.ts
@@ -0,0 +1,28 @@
+import { global as globalThis } from '@storybook/global';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore This alias is set in the sandbox. Using ts-ignore instead of ts-expect-error to avoid build errors in the sandbox.
+import { foo } from '#utils';
+import { expect, fn, isMockFunction, mocked } from 'storybook/test';
+
+export default {
+  component: globalThis.__TEMPLATE_COMPONENTS__.Button,
+  args: {
+    onClick: fn(),
+    label: 'Mock story',
+  },
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
+  beforeEach: () => {
+    mocked(foo).mockReturnValue('mocked');
+  },
+  async play() {
+    await expect(isMockFunction(foo)).toBe(true);
+    await expect(foo()).toBe('mocked');
+  },
+};
+
+export const Basic = {};
diff --git a/code/core/src/csf-tools/__corpus__/inputs/core-mount-in-play.stories.ts b/code/core/src/csf-tools/__corpus__/inputs/core-mount-in-play.stories.ts
new file mode 100644
index 000000000000..5a3564175ee8
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/inputs/core-mount-in-play.stories.ts
@@ -0,0 +1,25 @@
+import { expect, fn } from 'storybook/test';
+
+const meta = { component: globalThis.__TEMPLATE_COMPONENTS__.Button };
+
+export default meta;
+
+export const MountShouldBeDestructured = {
+  parameters: { chromatic: { disableSnapshot: true } },
+  args: {
+    label: 'Button',
+    onClick: fn(),
+  },
+  async play(context) {
+    let error;
+
+    // TODO use expect.toThrow once this issue is fixed
+    // https://github.com/storybookjs/storybook/issues/28406
+    try {
+      await context.mount();
+    } catch (e) {
+      error = e;
+    }
+    await expect(error?.name).toContain('MountMustBeDestructuredError');
+  },
+};
diff --git a/code/core/src/csf-tools/__corpus__/inputs/core-names.stories.ts b/code/core/src/csf-tools/__corpus__/inputs/core-names.stories.ts
new file mode 100644
index 000000000000..f87b1f8aafa3
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/inputs/core-names.stories.ts
@@ -0,0 +1,25 @@
+import type { PlayFunctionContext } from 'storybook/internal/types';
+
+import { global as globalThis } from '@storybook/global';
+
+import { expect } from 'storybook/test';
+
+export default {
+  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,
+  args: { text: 'No content' },
+};
+
+// Very simple stories to show what happens when one story's id is a prefix of another's
+// Repro for https://github.com/storybookjs/storybook/issues/11571
+
+export const PrefixAndName = {
+  play: async ({ name }: PlayFunctionContext<any>) => {
+    await expect(name).toBe('Prefix And Name');
+  },
+};
+
+export const Prefix = {
+  play: async ({ name }: PlayFunctionContext<any>) => {
+    await expect(name).toBe('Prefix');
+  },
+};
diff --git a/code/core/src/csf-tools/__corpus__/inputs/core-parameters.stories.ts b/code/core/src/csf-tools/__corpus__/inputs/core-parameters.stories.ts
new file mode 100644
index 000000000000..7c8c1e00c29b
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/inputs/core-parameters.stories.ts
@@ -0,0 +1,48 @@
+import type { PartialStoryFn, PlayFunctionContext, StoryContext } from 'storybook/internal/types';
+
+import { global as globalThis } from '@storybook/global';
+
+import { expect, within } from 'storybook/test';
+
+export default {
+  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,
+  parameters: {
+    componentParameter: 'componentParameter',
+    storyParameter: 'componentStoryParameter', // Checking this gets overridden
+    storyObject: {
+      a: 'component',
+      b: 'component',
+    },
+  },
+  decorators: [
+    (storyFn: PartialStoryFn, context: StoryContext) => {
+      const { projectParameter, componentParameter, storyParameter, storyObject } =
+        context.parameters;
+      return storyFn({
+        args: { object: { projectParameter, componentParameter, storyParameter, storyObject } },
+      });
+    },
+  ],
+};
+
+export const Inheritance = {
+  parameters: {
+    storyParameter: 'storyParameter',
+    storyObject: {
+      a: 'story',
+    },
+  },
+  play: async ({ canvasElement }: PlayFunctionContext<any>) => {
+    const canvas = within(canvasElement);
+    await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({
+      projectParameter: 'projectParameter',
+      componentParameter: 'componentParameter',
+      storyParameter: 'storyParameter',
+      storyObject: {
+        a: 'story',
+        b: 'component',
+        c: 'project',
+      },
+    });
+  },
+};
diff --git a/code/core/src/csf-tools/__corpus__/inputs/core-tags-add.stories.ts b/code/core/src/csf-tools/__corpus__/inputs/core-tags-add.stories.ts
new file mode 100644
index 000000000000..8f330a5eca0e
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/inputs/core-tags-add.stories.ts
@@ -0,0 +1,41 @@
+import type { PartialStoryFn, PlayFunctionContext, StoryContext } from 'storybook/internal/types';
+
+import { global as globalThis } from '@storybook/global';
+
+import { expect, within } from 'storybook/test';
+
+export default {
+  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,
+  tags: ['!dev', '!autodocs', '!test'],
+  decorators: [
+    (storyFn: PartialStoryFn, context: StoryContext) => {
+      return storyFn({
+        args: { object: { tags: context.tags } },
+      });
+    },
+  ],
+  parameters: { chromatic: { disableSnapshot: true } },
+};
+
+export const Inheritance = {
+  tags: ['story-one', '!vitest'],
+  play: async ({ canvasElement }: PlayFunctionContext<any>) => {
+    const canvas = within(canvasElement);
+    await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({
+      tags: ['story-one'],
+    });
+  },
+  parameters: { chromatic: { disableSnapshot: false } },
+};
+
+export const Dev = {
+  tags: ['dev'],
+};
+
+export const Autodocs = {
+  tags: ['autodocs'],
+};
+
+export const Test = {
+  tags: ['test'],
+};
diff --git a/code/core/src/csf-tools/__corpus__/inputs/core-tags-config.stories.ts b/code/core/src/csf-tools/__corpus__/inputs/core-tags-config.stories.ts
new file mode 100644
index 000000000000..73241353cb7f
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/inputs/core-tags-config.stories.ts
@@ -0,0 +1,45 @@
+import type { PartialStoryFn, PlayFunctionContext, StoryContext } from 'storybook/internal/types';
+
+import { global as globalThis } from '@storybook/global';
+
+import { expect, within } from 'storybook/test';
+
+export default {
+  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,
+  tags: ['component-one', 'component-two', 'autodocs'],
+  decorators: [
+    (storyFn: PartialStoryFn, context: StoryContext) => {
+      return storyFn({
+        args: { object: { tags: context.tags } },
+      });
+    },
+  ],
+  parameters: { chromatic: { disableSnapshot: true } },
+};
+
+export const Inheritance = {
+  tags: ['story-one', '!vitest'],
+  play: async ({ canvasElement }: PlayFunctionContext<any>) => {
+    const canvas = within(canvasElement);
+    await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({
+      tags: ['dev', 'test', 'component-one', 'component-two', 'autodocs', 'story-one'],
+    });
+  },
+  parameters: { chromatic: { disableSnapshot: false } },
+};
+
+export const DocsOnly = {
+  tags: ['docs-only'],
+};
+
+export const TestOnly = {
+  tags: ['test-only'],
+};
+
+export const DevOnly = {
+  tags: ['dev-only'],
+};
+
+export const TagRemoval = {
+  tags: ['!component-two'],
+};
diff --git a/code/core/src/csf-tools/__corpus__/inputs/edge-legacy.stories.tsx b/code/core/src/csf-tools/__corpus__/inputs/edge-legacy.stories.tsx
new file mode 100644
index 000000000000..4195503fe8d4
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/inputs/edge-legacy.stories.tsx
@@ -0,0 +1,38 @@
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+const meta = {
+  title: 'Edge/Legacy',
+  component: Button,
+  includeStories: /^[A-Z]/,
+  excludeStories: ['Helper'],
+  tags: ['autodocs'],
+} satisfies Meta<typeof Button>;
+export default meta;
+
+export const Helper = () => null;
+
+const Template: StoryFn<typeof Button> = (args) => <Button {...args} />;
+
+export const Bound = Template.bind({});
+Bound.args = { label: 'Bound' };
+Bound.storyName = 'Bound story';
+Bound.parameters = { __id: 'edge-legacy--custom-id' };
+
+export const Cast = Template.bind({}) as typeof Template & StoryObj;
+Cast.args = { label: 'Cast' };
+
+export const WithPlay: StoryObj<typeof meta> = {
+  args: { label: 'Play' },
+  play: async ({ canvasElement, mount }) => {
+    await mount();
+  },
+};
+
+export function Declared() {
+  return <Button label="Declared" />;
+}
+
+const Local: StoryObj<typeof meta> = { args: { label: 'Alias' } };
+export { Local as Alias };
diff --git a/code/core/src/csf-tools/__corpus__/inputs/edge-typescript.stories.ts b/code/core/src/csf-tools/__corpus__/inputs/edge-typescript.stories.ts
new file mode 100644
index 000000000000..0c9202d2e295
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/inputs/edge-typescript.stories.ts
@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/html';
+
+type Args = { label: string };
+
+const identity = <T>(value: T) => value;
+const size = <number>12;
+
+export default {
+  title: 'Edge/TypeScript',
+  render: (args: Args) => identity(`<button>${args.label}</button>`),
+  args: { label: identity('Hi') },
+  parameters: {
+    layout: 'centered',
+    docs: {
+      source: {
+        code: `line1
+line2`,
+      },
+    },
+  },
+} satisfies Meta<Args> as Meta<Args>;
+
+export const Primary: StoryObj<Args> = { args: { label: 'Primary' } };
+
+export const Sized = {
+  args: { label: `size ${size}` },
+  tags: ['!dev'],
+} satisfies StoryObj<Args>;
+
+export const Composed: StoryObj<Args> = { ...Primary, name: 'Composed name' };
diff --git a/code/core/src/csf-tools/__corpus__/inputs/errors-NoStories.stories.ts b/code/core/src/csf-tools/__corpus__/inputs/errors-NoStories.stories.ts
new file mode 100644
index 000000000000..bb9598181ded
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/inputs/errors-NoStories.stories.ts
@@ -0,0 +1,5 @@
+/* eslint-disable storybook/story-exports */
+const component = {};
+export default {
+  component,
+};
diff --git a/code/core/src/csf-tools/__corpus__/inputs/react-csf1.stories.tsx b/code/core/src/csf-tools/__corpus__/inputs/react-csf1.stories.tsx
new file mode 100644
index 000000000000..eff0dfceb66b
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/inputs/react-csf1.stories.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default {
+  component: {},
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+};
+
+export const Hello1 = () => <div>Hello1</div>;
+export const Hello2 = () => <div>Hello2</div>;
diff --git a/code/core/src/csf-tools/__corpus__/inputs/react-csf2.stories.tsx b/code/core/src/csf-tools/__corpus__/inputs/react-csf2.stories.tsx
new file mode 100644
index 000000000000..f2b7ff0d63bb
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/inputs/react-csf2.stories.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+export default {
+  component: {},
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+};
+
+const Template = ({ label }: { label: string }) => <div>{label}</div>;
+Template.args = { label: 'Hello' };
+
+export const Hello1 = Template.bind({});
+
+export const Hello2 = Template.bind({});
+
+export const Hello3 = Template.bind({});
diff --git a/code/core/src/csf-tools/__corpus__/inputs/react-csf4.stories.tsx b/code/core/src/csf-tools/__corpus__/inputs/react-csf4.stories.tsx
new file mode 100644
index 000000000000..2a68cfef500b
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/inputs/react-csf4.stories.tsx
@@ -0,0 +1,13 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment -- we can't expect error as it is an error in development but it isn't sandbox
+// @ts-ignore only present in sandbox
+import preview from '#.storybook/preview';
+
+const meta = preview.meta({
+  // @ts-expect-error fix globalThis.__TEMPLATE_COMPONENTS__ type not existing later
+  component: globalThis.__TEMPLATE_COMPONENTS__.Button,
+  args: {
+    label: 'Hello world!',
+  },
+});
+
+export const Story = meta.story({});
diff --git a/code/core/src/csf-tools/__corpus__/inputs/react-decorators.stories.tsx b/code/core/src/csf-tools/__corpus__/inputs/react-decorators.stories.tsx
new file mode 100644
index 000000000000..340ffaeb6606
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/inputs/react-decorators.stories.tsx
@@ -0,0 +1,80 @@
+import type { FC } from 'react';
+import React, { createContext, useContext, useState } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useParameter } from 'storybook/preview-api';
+
+const Component: FC = () => <p>Story</p>;
+
+export default {
+  component: Component,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <>
+        <p>Component Decorator</p>
+        <Story />
+      </>
+    ),
+  ],
+} as Meta<typeof Component>;
+
+export const All: StoryObj<typeof Component> = {
+  decorators: [
+    (Story) => (
+      <>
+        <p>Local Decorator</p>
+        <Story />
+      </>
+    ),
+  ],
+};
+
+// This story should not error
+// See https://github.com/storybookjs/storybook/issues/21900
+const TestContext = createContext<boolean>(false);
+export const Context: StoryObj<typeof Component> = {
+  parameters: { docs: { source: { excludeDecorators: true } } },
+  decorators: [
+    (Story) => (
+      <TestContext.Provider value>
+        <Story />
+      </TestContext.Provider>
+    ),
+  ],
+  render: function Render() {
+    const value = useContext(TestContext);
+
+    if (!value) {
+      throw new Error('TestContext not set, decorator did not run!');
+    }
+    return <p>Story</p>;
+  },
+};
+
+/**
+ * This story demonstrates is a regression test for this issue with React hooks in Storybook
+ * (https://github.com/storybookjs/storybook/issues/29189)
+ *
+ * Which happened when a decorator was using storybook hooks, and the render react hooks.
+ */
+export const AllowUseStateInRender: StoryObj = {
+  render: () => {
+    const [count, setCount] = useState(0);
+    const Button = (globalThis as any).__TEMPLATE_COMPONENTS__.Button;
+    return <Button onClick={() => setCount(count + 1)} label={`Clicked ${count} times`} />;
+  },
+  decorators: [
+    (storyFn) => {
+      useParameter('docs', {});
+      return storyFn();
+    },
+  ],
+  play: async ({ canvas, userEvent }) => {
+    const button = await canvas.findByText('Clicked 0 times');
+    await userEvent.click(button);
+    await canvas.findByText('Clicked 1 times');
+  },
+  tags: ['!vitest'],
+};
diff --git a/code/core/src/csf-tools/__corpus__/inputs/react-js-argtypes.stories.jsx b/code/core/src/csf-tools/__corpus__/inputs/react-js-argtypes.stories.jsx
new file mode 100644
index 000000000000..ba92a2f9dec6
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/inputs/react-js-argtypes.stories.jsx
@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+
+import { PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+
+import PropTypes from 'prop-types';
+import { storyNameFromExport } from 'storybook/internal/csf';
+import { getService, inferControls } from 'storybook/preview-api';
+import { ThemeProvider, convert, themes } from 'storybook/theming';
+
+import { component as JsReactMemoComponent } from './docgen-components/9586-js-react-memo/input.jsx';
+import { component as JsDefaultValuesComponent } from './docgen-components/9626-js-default-values/input.jsx';
+import { component as JsFunctionComponentInlineDefaultsNoPropTypesComponent } from './docgen-components/js-function-component-inline-defaults-no-propTypes/input.jsx';
+import { component as JsFunctionComponentInlineDefaultsComponent } from './docgen-components/js-function-component-inline-defaults/input.jsx';
+
+// Detect if we are running in vite in a hacky way for now
+const isVite = typeof require === 'undefined';
+
+export default {
+  // Portable stories in Vitest have no docgen server to load argTypes from.
+  tags: ['!vitest'],
+  // The docgen server only extracts subcomponents once `component` resolves to a real component.
+  component: JsFunctionComponentInlineDefaultsComponent,
+  // Listed so the docgen server extracts every component; each story shows its own entry.
+  subcomponents: {
+    JsFunctionComponentInlineDefaults: JsFunctionComponentInlineDefaultsComponent,
+    JsFunctionComponentInlineDefaultsNoPropTypes:
+      JsFunctionComponentInlineDefaultsNoPropTypesComponent,
+    JsDefaultValues: JsDefaultValuesComponent,
+    JsReactMemo: JsReactMemoComponent,
+  },
+  loaders: [
+    async ({ componentId, name }) => {
+      if (!globalThis.FEATURES?.docgenServer) {
+        return {};
+      }
+      const docgen = await getService('core/docgen', { internal: true }).queries.docgen.loaded({
+        id: componentId,
+      });
+      const [, subcomponent] =
+        Object.entries(docgen?.subcomponents ?? {}).find(
+          ([exportName]) => storyNameFromExport(exportName) === name
+        ) ?? [];
+      return { argTypes: subcomponent?.argTypes ?? {} };
+    },
+  ],
+  render: (_, { loaded, parameters }) => (
+    <ArgsStory
+      argTypes={loaded.argTypes ?? parameters.docs.extractArgTypes(parameters.component)}
+    />
+  ),
+  parameters: {
+    chromatic: {
+      disableSnapshot: isVite,
+    },
+  },
+};
+
+const ArgsStory = ({ argTypes }) => {
+  const rows = inferControls({ argTypes, parameters: { __isArgsStory: true } });
+  const [args, setArgs] = useState({});
+
+  return (
+    <ThemeProvider theme={convert(themes.light)}>
+      <ArgsTable rows={rows} args={args} updateArgs={(val) => setArgs({ ...args, ...val })} />
+    </ThemeProvider>
+  );
+};
+
+ArgsStory.propTypes = {
+  argTypes: PropTypes.object.isRequired,
+};
+
+export const JsFunctionComponentInlineDefaults = {
+  parameters: { component: JsFunctionComponentInlineDefaultsComponent },
+};
+
+export const JsFunctionComponentInlineDefaultsNoPropTypes = {
+  parameters: { component: JsFunctionComponentInlineDefaultsNoPropTypesComponent },
+};
+
+export const JsDefaultValues = { parameters: { component: JsDefaultValuesComponent } };
+
+export const JsReactMemo = { parameters: { component: JsReactMemoComponent } };
diff --git a/code/core/src/csf-tools/__corpus__/inputs/react-mount-in-play.stories.tsx b/code/core/src/csf-tools/__corpus__/inputs/react-mount-in-play.stories.tsx
new file mode 100644
index 000000000000..84d296136391
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/inputs/react-mount-in-play.stories.tsx
@@ -0,0 +1,21 @@
+import type { FC } from 'react';
+import React from 'react';
+
+import type { StoryObj } from '@storybook/react';
+
+const Button: FC<{ label?: string; disabled?: boolean }> = (props) => {
+  return <button disabled={props.disabled}>{props.label}</button>;
+};
+
+export default {
+  component: Button,
+};
+
+export const Basic: StoryObj<typeof Button> = {
+  args: {
+    disabled: true,
+  },
+  async play({ mount, args }) {
+    await mount(<Button {...args} label={'set in play'} />);
+  },
+};
diff --git a/code/core/src/csf-tools/__corpus__/inputs/react-test-fn.stories.tsx b/code/core/src/csf-tools/__corpus__/inputs/react-test-fn.stories.tsx
new file mode 100644
index 000000000000..c018fed7a710
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/inputs/react-test-fn.stories.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+
+import type { StoryContext } from '@storybook/react';
+
+import { expect, fn } from 'storybook/test';
+
+import preview from './preview';
+
+const Button = (args: React.ComponentProps<'button'>) => <button {...args} />;
+
+const meta = preview.meta({
+  component: Button,
+  args: {
+    children: 'Default',
+    onClick: fn(),
+  },
+  tags: ['some-tag'],
+});
+
+export const Default = meta.story({
+  args: {
+    children: 'Arg from story',
+  },
+});
+Default.test('simple', async ({ canvas, userEvent, args }) => {
+  const button = canvas.getByText('Arg from story');
+  await userEvent.click(button);
+  await expect(args.onClick).toHaveBeenCalled();
+});
+
+const doTest = async ({
+  canvas,
+  userEvent,
+  args,
+}: StoryContext<React.ComponentProps<'button'>>) => {
+  const button = canvas.getByText('Arg from story');
+  await userEvent.click(button);
+  await expect(args.onClick).toHaveBeenCalled();
+};
+Default.test('referring to function in file', doTest);
+
+Default.test(
+  'with overrides',
+  {
+    args: {
+      children: 'Arg from test override',
+    },
+    parameters: {
+      viewport: {
+        options: {
+          sized: {
+            name: 'Sized',
+            styles: {
+              width: '380px',
+              height: '500px',
+            },
+          },
+        },
+      },
+      chromatic: { viewports: [380] },
+    },
+    globals: { viewport: { value: 'sized' } },
+    tags: ['!test'],
+  },
+  async ({ canvas }) => {
+    const button = canvas.getByText('Arg from test override');
+    await expect(button).toBeInTheDocument();
+    expect(document.body.clientWidth).toBe(380);
+  }
+);
+Default.test(
+  'with play function',
+  {
+    play: async ({ canvas }) => {
+      const button = canvas.getByText('Arg from story');
+      await expect(button).toBeInTheDocument();
+    },
+  },
+  async ({ canvas }) => {
+    const button = canvas.getByText('Arg from story');
+    await expect(button).not.toHaveAttribute('aria-disabled', 'true');
+  }
+);
+export const Extended = Default.extend({
+  args: {
+    children: 'Arg from extended story',
+  },
+});
+Extended.test('should have extended args', async ({ canvas }) => {
+  const button = canvas.getByText('Arg from extended story');
+  await expect(button).not.toHaveAttribute('aria-disabled', 'true');
+});
diff --git a/code/core/src/csf-tools/__corpus__/inputs/shapes-angular-button.stories.ts b/code/core/src/csf-tools/__corpus__/inputs/shapes-angular-button.stories.ts
new file mode 100644
index 000000000000..cbeb779363bd
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/inputs/shapes-angular-button.stories.ts
@@ -0,0 +1,142 @@
+// The story shapes the server snippet generator has to tell apart, one export per shape. Shapes
+// whose markup or args cannot be read statically must yield NO snippet (recorded as a sentinel),
+// never a fabricated element.
+import { ShapeButtonComponent } from './shape-button.component.ts';
+import { IMPORTED_TEMPLATE } from './templates.ts';
+import * as BaseStories from './base-args.stories.ts';
+
+import { argsToTemplate } from '@storybook/angular-vite';
+
+type LooseStory = {
+  args?: Record<string, unknown>;
+  render?: (args: Record<string, unknown>) => unknown;
+  template?: string;
+};
+
+const HOISTED_TEMPLATE = '<sb-shape-button hoisted></sb-shape-button>';
+const HEADER = '<h1>Shapes</h1>';
+const INCLUDES = ['label'];
+const base = { args: { label: 'From base' } };
+const Template = (args: Record<string, unknown>) => ({
+  props: args,
+  template: '<div class="bound"><sb-shape-button></sb-shape-button></div>',
+});
+let MUTABLE_TEMPLATE = '<sb-shape-button first></sb-shape-button>';
+MUTABLE_TEMPLATE = '<sb-shape-button second></sb-shape-button>';
+const extraArgs = { count: 3 };
+
+export default {
+  title: 'AngularShapes/button-shapes',
+  component: ShapeButtonComponent,
+};
+
+export const OwnTemplate = { template: '<sb-shape-button emphasis>hi</sb-shape-button>' };
+
+export const RenderTemplate = {
+  render: () => ({ template: '<sb-shape-button rendered></sb-shape-button>' }),
+};
+
+export const MethodRender = {
+  args: { label: 'Save' },
+  render(_args: Record<string, unknown>) {
+    return { template: '<div class="wrap"><sb-shape-button></sb-shape-button></div>' };
+  },
+};
+
+export const ArgsToTemplateWrapper = {
+  args: { label: 'Save', count: 7, clicked: () => {} },
+  render: (args: Record<string, unknown>) => ({
+    props: args,
+    template: `<div class="wrap"><sb-shape-button ${argsToTemplate(args)}></sb-shape-button></div>`,
+  }),
+};
+
+export const ArgsToTemplateInclude = {
+  args: { label: 'Save', count: 7 },
+  render: (args: Record<string, unknown>) => ({
+    props: args,
+    template: `<sb-shape-button ${argsToTemplate(args, { include: ['label'] })}></sb-shape-button>`,
+  }),
+};
+
+export const SlotInterpolation = {
+  args: { label: 'Save', footer: 'Bye' },
+  render: ({ footer, ...args }: Record<string, unknown>) => ({
+    props: args,
+    template: `<sb-shape-button>${footer}</sb-shape-button>`,
+  }),
+};
+
+export const ModuleConstant = {
+  args: { label: 'Save' },
+  render: (args: Record<string, unknown>) => ({
+    props: args,
+    template: `${HEADER}<sb-shape-button></sb-shape-button>`,
+  }),
+};
+
+export const HoistedTemplate = { template: HOISTED_TEMPLATE };
+
+export const QuotedArgs = {
+  args: { label: `it's "quoted" & Tom &amp; Jerry` },
+};
+
+export const ImportedTemplate = { template: IMPORTED_TEMPLATE, args: { count: 5 } };
+
+export const SpreadShadowedRender = {
+  render: () => ({ template: '<sb-shape-button from-story></sb-shape-button>' }),
+  ...base,
+};
+
+export const SpreadArgs = { args: { label: 'Save', ...extraArgs } };
+
+export const AccessorRender = {
+  args: { label: 'Save' },
+  get render() {
+    return () => ({ template: '<sb-shape-button from-getter></sb-shape-button>' });
+  },
+};
+
+export const MultiExitRender = {
+  args: { count: 1 },
+  render: (args: { count?: number }) => {
+    if (args.count) {
+      return { template: '<sb-shape-button first></sb-shape-button>' };
+    }
+    return { template: '<sb-shape-button second></sb-shape-button>' };
+  },
+};
+
+export const DynamicOptions = {
+  args: { label: 'Save' },
+  render: (args: Record<string, unknown>) => ({
+    props: args,
+    template: `<sb-shape-button ${argsToTemplate(args, { include: INCLUDES })}></sb-shape-button>`,
+  }),
+};
+
+export const TemplateBind = Template.bind({}) as typeof Template & LooseStory;
+TemplateBind.args = { label: 'Bound' };
+
+export const MemberAssignedRender: LooseStory = { args: { label: 'Save' } };
+MemberAssignedRender.render = () => ({
+  template: '<div class="assigned"><sb-shape-button></sb-shape-button></div>',
+});
+
+export const ReassignedTemplate = { template: MUTABLE_TEMPLATE };
+
+export const SpreadStoryArgs = { args: { ...QuotedArgs.args, count: 9 } };
+
+// Values an Angular template expression cannot carry: `new` is not in the grammar at all, and
+// `Array` is not a name the host component resolves. Both are ordinary TypeScript in a class body.
+export const HoistedArgs = {
+  args: {
+    label: 'Save',
+    // The bare Error is the fixture: this file stands in for a user's story, not for repo code.
+    // eslint-disable-next-line local-rules/no-uncategorized-errors
+    loadingError: new Error('Failed to load cards.'),
+    items: Array.from({ length: 3 }, (_, index) => index),
+  },
+};
+
+export const SpreadCrossFileArgs = { args: { ...BaseStories.Base.args, label: 'overridden' } };
diff --git a/code/core/src/csf-tools/__corpus__/record.mjs b/code/core/src/csf-tools/__corpus__/record.mjs
new file mode 100644
index 000000000000..441eef703f29
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/record.mjs
@@ -0,0 +1,68 @@
+// Records golden outputs for the corpus from a Storybook checkout that still indexes with Babel.
+//
+//   node code/core/src/csf-tools/__corpus__/record.mjs <path-to-babel-checkout>/code
+//
+// The checkout must have `core` compiled. The summary written here mirrors `summarize` in
+// `corpus.test.ts`, which runs the OXC implementation against the same inputs.
+import { readdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const checkout = resolve(process.argv[2]);
+const require = createRequire(join(checkout, 'package.json'));
+const { loadCsf } = await import(join(checkout, 'core/dist/csf-tools/index.js'));
+const traverse = require('@babel/traverse').default;
+
+const regexOrArray = (value) =>
+  value instanceof RegExp ? { regex: value.source, flags: value.flags } : (value ?? null);
+
+const summarize = (file, code) => {
+  let csf;
+  try {
+    csf = loadCsf(code, { fileName: file, makeTitle: (title) => title ?? 'Untitled' }).parse();
+  } catch {
+    return { error: true };
+  }
+  const bindings = {};
+  traverse(csf._ast, {
+    Program(path) {
+      for (const [name, binding] of Object.entries(path.scope.bindings)) {
+        bindings[name] = {
+          constant: binding.constant,
+          uses: binding.referencePaths.length + binding.constantViolations.length,
+        };
+      }
+      path.stop();
+    },
+  });
+  return {
+    indexInputs: csf.indexInputs,
+    meta: {
+      title: csf._meta?.title ?? null,
+      id: csf._meta?.id ?? null,
+      tags: csf._meta?.tags ?? null,
+      component: csf._meta?.component ?? null,
+      includeStories: regexOrArray(csf._meta?.includeStories),
+      excludeStories: regexOrArray(csf._meta?.excludeStories),
+      isFactory: !!csf._metaIsFactory,
+    },
+    stories: Object.fromEntries(
+      Object.entries(csf._stories).map(([exportName, story]) => [
+        exportName,
+        { id: story.id, name: story.name, tags: story.tags, localName: story.localName ?? null },
+      ])
+    ),
+    namedExportsOrder: csf._namedExportsOrder ?? null,
+    bindings,
+  };
+};
+
+const inputs = join(here, 'inputs');
+const golden = {};
+for (const file of readdirSync(inputs).sort()) {
+  golden[file] = summarize(file, readFileSync(join(inputs, file), 'utf8'));
+}
+writeFileSync(join(here, 'golden.json'), `${JSON.stringify(golden, null, 2)}\n`);
+console.log(`recorded ${Object.keys(golden).length} files`);
diff --git a/code/core/src/csf-tools/corpus.test.ts b/code/core/src/csf-tools/corpus.test.ts
new file mode 100644
index 000000000000..ed3bbdc18853
--- /dev/null
+++ b/code/core/src/csf-tools/corpus.test.ts
@@ -0,0 +1,79 @@
+import { readdirSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { describe, expect, it } from 'vitest';
+
+import { loadCsf } from './CsfFile.ts';
+import golden from './__corpus__/golden.json';
+
+// Golden outputs were recorded from the Babel implementation with `__corpus__/record.mjs`. They
+// are compared with `toEqual` so `vitest -u` cannot re-baseline them from this implementation.
+
+const inputs = join(__dirname, '__corpus__', 'inputs');
+
+const regexOrArray = (value: unknown) =>
+  value instanceof RegExp ? { regex: value.source, flags: value.flags } : (value ?? null);
+
+const summarize = (file: string, code: string) => {
+  let csf;
+  try {
+    csf = loadCsf(code, { fileName: file, makeTitle: (title) => title ?? 'Untitled' }).parse();
+  } catch {
+    return { error: true };
+  }
+  const bindings: Record<string, { constant: boolean; uses: number }> = {};
+  for (const [name, binding] of csf._editor.scopes.program.bindings) {
+    bindings[name] = { constant: binding.constant, uses: binding.references.length };
+  }
+  return {
+    indexInputs: csf.indexInputs,
+    meta: {
+      title: csf._meta?.title ?? null,
+      id: csf._meta?.id ?? null,
+      tags: csf._meta?.tags ?? null,
+      component: csf._meta?.component ?? null,
+      includeStories: regexOrArray(csf._meta?.includeStories),
+      excludeStories: regexOrArray(csf._meta?.excludeStories),
+      isFactory: !!csf._metaIsFactory,
+    },
+    stories: Object.fromEntries(
+      Object.entries(csf._stories).map(([exportName, story]) => [
+        exportName,
+        { id: story.id, name: story.name, tags: story.tags, localName: story.localName ?? null },
+      ])
+    ),
+    namedExportsOrder: csf._namedExportsOrder ?? null,
+    bindings,
+  };
+};
+
+// Babel parsed every file with the JSX plugin, so `.ts`-only syntax such as `<T>(x: T) => x` was a
+// parse error there and is indexed here. These files have their own expectations below.
+const improved = new Set(['edge-typescript.stories.ts']);
+
+const summaryOf = (file: string) =>
+  JSON.parse(JSON.stringify(summarize(file, readFileSync(join(inputs, file), 'utf8'))));
+
+describe('CSF corpus', () => {
+  const files = readdirSync(inputs).sort();
+
+  it('covers every recorded file', () => {
+    expect(files).toEqual(Object.keys(golden).sort());
+  });
+
+  it.each(files.filter((file) => !improved.has(file)))(
+    'indexes %s like the Babel implementation did',
+    (file) => {
+      expect(summaryOf(file)).toEqual(golden[file as keyof typeof golden]);
+    }
+  );
+
+  it('indexes .ts files that Babel rejected', () => {
+    expect(golden['edge-typescript.stories.ts']).toEqual({ error: true });
+    const summary = summaryOf('edge-typescript.stories.ts');
+    expect(summary.meta.title).toBe('Edge/TypeScript');
+    expect(Object.keys(summary.stories)).toEqual(['Primary', 'Sized', 'Composed']);
+    expect(summary.stories.Composed.name).toBe('Composed name');
+    expect(summary.stories.Sized.tags).toEqual(['!dev']);
+  });
+});
diff --git a/code/core/tsconfig.json b/code/core/tsconfig.json
index ca919ae74b22..ca3e252bec2a 100644
--- a/code/core/tsconfig.json
+++ b/code/core/tsconfig.json
@@ -6,5 +6,6 @@
     "module": "esnext",
     "stripInternal": true
   },
-  "include": ["src/**/*", "scripts/**/*", "*.d.ts", "templates/runtime-build-code.template"]
+  "include": ["src/**/*", "scripts/**/*", "*.d.ts", "templates/runtime-build-code.template"],
+  "exclude": ["dist", "node_modules", "src/csf-tools/__corpus__/inputs"]
 }

From 89e94d6c150656c0925ad01df0e186efc88d081a Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 14:45:59 +0900
Subject: [PATCH 083/326] fix(csf-tools): read value line breaks from the
 parsed text and keep input map source names

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../src/csf-plugin/webpack-loader.test.ts     |   8 +-
 code/core/src/csf-tools/estree/editor.test.ts |  12 ++
 code/core/src/csf-tools/estree/editor.ts      | 105 +++++++++++++++---
 3 files changed, 105 insertions(+), 20 deletions(-)

diff --git a/code/addons/docs/src/csf-plugin/webpack-loader.test.ts b/code/addons/docs/src/csf-plugin/webpack-loader.test.ts
index 9455efe3daaa..ac862767c662 100644
--- a/code/addons/docs/src/csf-plugin/webpack-loader.test.ts
+++ b/code/addons/docs/src/csf-plugin/webpack-loader.test.ts
@@ -75,9 +75,11 @@ describe('webpack loader', () => {
     expect(result.code).toContain('originalSource');
     const output = positionOf(result.code, 'play:');
     const entry = new SourceMap(result.map).findEntry(output.line, output.column);
-    expect(entry).toMatchObject({ originalLine: positionOf(originalCode, 'play:').line });
-    // Windows paths come back with forward slashes.
-    expect((entry as { originalSource?: string }).originalSource).toMatch(/Button\.stories\.tsx$/);
+    expect(entry).toMatchObject({
+      originalLine: positionOf(originalCode, 'play:').line,
+      originalSource: id,
+    });
+    expect(result.map.sources).toEqual([id]);
     expect(result.map.sourcesContent).toEqual([originalCode]);
   });
 
diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index a078a4e15515..ac334b4bc198 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -63,6 +63,18 @@ describe('reindent', () => {
     );
   });
 
+  it('does not mistake a regex backtick or JSX text for a template', () => {
+    expect(reindent('{\n    a: /`/.test(s),\n    b: `x\n    y`,\n  }', '  ', '')).toBe(
+      '{\n  a: /`/.test(s),\n  b: `x\n    y`,\n}'
+    );
+    expect(reindent("<p>\n    Don't\n    stop\n  </p>", '  ', '')).toBe(
+      "<p>\n  Don't\n  stop\n</p>"
+    );
+    expect(reindent("{\n    text: 'first\\\nsecond',\n  }", '  ', '')).toBe(
+      "{\n  text: 'first\\\nsecond',\n}"
+    );
+  });
+
   it('re-indents code inside template expressions', () => {
     expect(reindent('`${\nfn()\n}`', '', '  ')).toBe('`${\n  fn()\n  }`');
   });
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 00e3d14a1080..2ad41f84930a 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -152,9 +152,14 @@ export class SourceEditor {
       maps.push(options.inputSourceMap as SourceMapInput);
     }
     const composed = remapping(maps, () => null);
+    // Keep the source names as the input map spelled them: remapping normalizes them to URLs.
+    const input =
+      typeof options.inputSourceMap === 'string'
+        ? (JSON.parse(options.inputSourceMap) as Exclude<InputSourceMap, string>)
+        : options.inputSourceMap;
     return new SourceMap({
       file: composed.file ?? '',
-      sources: composed.sources.map((name) => (options.inputSourceMap ? (name ?? '') : source)),
+      sources: composed.sources.map((name, index) => input?.sources[index] ?? name ?? source),
       sourcesContent: composed.sourcesContent?.map((content) => content ?? ''),
       names: composed.names,
       // Encoded, since `decodedMappings` was not requested.
@@ -341,36 +346,90 @@ export const lineIndent = (code: string, index: number) => {
 
 const isMultiline = (code: string, list: List) => code.slice(list.open, list.close).includes('\n');
 
-// Offsets of the line breaks in `text` that separate code, excluding those inside string and
-// template literals, whose line breaks are part of the value.
-const codeLineBreaks = (text: string) => {
-  const breaks: number[] = [];
+// Offsets of the line breaks in `text` that are part of a value: inside string and regex literals
+// and template quasis. JSX text is not one: JSX trims its lines. Read from the parsed text, so no
+// scanner has to know the grammar.
+const valueLineBreaks = (text: string): Set<number> | undefined => {
+  const parsed = parseLoosely(text);
+  if (!parsed) {
+    return undefined;
+  }
+  const breaks = new Set<number>();
+  walk(parsed.program, (node) => {
+    if (
+      node.type === 'TemplateElement' ||
+      (node.type === 'Literal' && (typeof node.value === 'string' || 'regex' in node))
+    ) {
+      const { start, end } = node as Node & { start: number; end: number };
+      for (let index = start; index < end; index++) {
+        if (text[index - parsed.offset] === '\n') {
+          breaks.add(index - parsed.offset);
+        }
+      }
+    }
+  });
+  return breaks;
+};
+
+// A fragment of source: statements, a `key: value` member (a labeled statement) or an expression.
+const parseLoosely = (text: string): { program: E.Program; offset: number } | undefined => {
+  try {
+    return { program: parseModule(text).program, offset: 0 };
+  } catch {
+    try {
+      return { program: parseModule(`(${text}\n)`).program, offset: 1 };
+    } catch {
+      return undefined;
+    }
+  }
+};
+
+// Fallback for text that is not parseable on its own, such as an import specifier: a scanner that
+// tracks strings, templates, comments and regex literals.
+const scannedValueLineBreaks = (text: string): Set<number> => {
+  const breaks = new Set<number>();
   type Context = 'template' | { depth: number };
   const stack: Context[] = [{ depth: 0 }];
   let quote: string | undefined;
   let comment: 'line' | 'block' | undefined;
+  let regex = false;
+  let last = '';
   for (let index = 0; index < text.length; index++) {
     const char = text[index];
     const top = stack.at(-1)!;
     if (quote) {
       if (char === '\\') {
+        if (text[index + 1] === '\n') {
+          breaks.add(index + 1);
+        }
         index++;
       } else if (char === quote || char === '\n') {
         quote = undefined;
       }
-    } else if (comment === 'line') {
+      continue;
+    }
+    if (regex) {
+      if (char === '\\') {
+        index++;
+      } else if (char === '/' || char === '\n') {
+        regex = false;
+      }
+      continue;
+    }
+    if (comment === 'line') {
       if (char === '\n') {
         comment = undefined;
-        breaks.push(index);
       }
-    } else if (comment === 'block') {
-      if (char === '\n') {
-        breaks.push(index);
-      } else if (text.startsWith('*/', index)) {
+      continue;
+    }
+    if (comment === 'block') {
+      if (text.startsWith('*/', index)) {
         comment = undefined;
         index++;
       }
-    } else if (top === 'template') {
+      continue;
+    }
+    if (top === 'template') {
       if (char === '\\') {
         index++;
       } else if (char === '`') {
@@ -378,10 +437,12 @@ const codeLineBreaks = (text: string) => {
       } else if (text.startsWith('${', index)) {
         stack.push({ depth: 0 });
         index++;
+      } else if (char === '\n') {
+        breaks.add(index);
       }
-    } else if (char === '\n') {
-      breaks.push(index);
-    } else if (char === "'" || char === '"') {
+      continue;
+    }
+    if (char === "'" || char === '"') {
       quote = char;
     } else if (char === '`') {
       stack.push('template');
@@ -389,6 +450,8 @@ const codeLineBreaks = (text: string) => {
       comment = 'line';
     } else if (text.startsWith('/*', index)) {
       comment = 'block';
+    } else if (char === '/' && /^$|[(,=:[!&|?{};+\-*%<>~^]/.test(last)) {
+      regex = true;
     } else if (char === '{') {
       top.depth++;
     } else if (char === '}') {
@@ -398,6 +461,9 @@ const codeLineBreaks = (text: string) => {
         top.depth--;
       }
     }
+    if (!/\s/.test(char)) {
+      last = char;
+    }
   }
   return breaks;
 };
@@ -407,12 +473,17 @@ export const reindent = (text: string, from: string, to: string) => {
   if (from === to || !text.includes('\n')) {
     return text;
   }
+  const values = valueLineBreaks(text) ?? scannedValueLineBreaks(text);
   let result = '';
   let cursor = 0;
-  for (const lineBreak of codeLineBreaks(text)) {
+  for (
+    let lineBreak = text.indexOf('\n');
+    lineBreak !== -1;
+    lineBreak = text.indexOf('\n', cursor)
+  ) {
     result += text.slice(cursor, lineBreak + 1);
     cursor = lineBreak + 1;
-    if (text.startsWith(from, cursor)) {
+    if (!values.has(lineBreak) && text.startsWith(from, cursor)) {
       result += to;
       cursor += from.length;
     }

From 85aa6d22febdfee8ed952ba5aca42e3b400bbdde Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 14:49:06 +0900
Subject: [PATCH 084/326] refactor(csf-tools): walk node children through one
 visitor-key based iterator

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/CsfFile.ts      | 32 ++++---------------------
 code/core/src/csf-tools/estree/ast.ts   | 28 ++++++++++++++++++----
 code/core/src/csf-tools/estree/scope.ts | 30 +----------------------
 3 files changed, 30 insertions(+), 60 deletions(-)

diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index caadc519943a..4bffd4d42bcf 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -25,6 +25,7 @@ import {
   type E,
   type Node,
   type SourceLocation,
+  children,
   identifierKey,
   isFunction,
   isIdentifier,
@@ -967,7 +968,10 @@ export class CsfFile {
           break;
       }
       ancestors.push(node);
-      for (const child of childNodes(node)) {
+      const sorted = children(node, { skipTypes: true }).sort(
+        (a, b) => (a as Node & { start: number }).start - (b as Node & { start: number }).start
+      );
+      for (const child of sorted) {
         visit(child, ancestors);
       }
       ancestors.pop();
@@ -1153,32 +1157,6 @@ export class CsfFile {
 }
 
 // Children in source order; type annotations are skipped since CSF never reads them.
-const childNodes = (node: Node): Node[] => {
-  const result: Node[] = [];
-  for (const key in node) {
-    if (
-      key === 'parent' ||
-      key === 'typeAnnotation' ||
-      key === 'returnType' ||
-      key === 'typeParameters' ||
-      key === 'typeArguments'
-    ) {
-      continue;
-    }
-    const value = (node as any)[key];
-    if (Array.isArray(value)) {
-      for (const item of value) {
-        if (item && typeof item === 'object' && typeof item.type === 'string') {
-          result.push(item);
-        }
-      }
-    } else if (value && typeof value === 'object' && typeof value.type === 'string') {
-      result.push(value);
-    }
-  }
-  return result.sort((a: any, b: any) => a.start - b.start);
-};
-
 export const loadCsf = (code: string, options: CsfOptions) => new CsfFile(code, options);
 
 type MagicStringSourceMap = ReturnType<SourceEditor['edits']['generateMap']>;
diff --git a/code/core/src/csf-tools/estree/ast.ts b/code/core/src/csf-tools/estree/ast.ts
index 061de550cf69..64c90bb349f5 100644
--- a/code/core/src/csf-tools/estree/ast.ts
+++ b/code/core/src/csf-tools/estree/ast.ts
@@ -148,24 +148,44 @@ export const codeFrame = (fileName: string | undefined, code: string, index: num
 export const isNode = (value: unknown): value is Node =>
   !!value && typeof value === 'object' && typeof (value as Node).type === 'string';
 
-export const children = (node: Node): Node[] => {
+// Keys that hold type annotations rather than runtime code.
+export const TYPE_KEYS = new Set([
+  'typeAnnotation',
+  'returnType',
+  'typeParameters',
+  'typeArguments',
+  'superTypeArguments',
+  'implements',
+]);
+
+/** A node's children with the key each was found under, in OXC's visitor order. */
+export const childEntries = (
+  node: Node,
+  options: { skipTypes?: boolean } = {}
+): { key: string; node: Node }[] => {
   const keys = (visitorKeys as Record<string, readonly string[]>)[node.type] ?? [];
-  const result: Node[] = [];
+  const result: { key: string; node: Node }[] = [];
   for (const key of keys) {
+    if (options.skipTypes && TYPE_KEYS.has(key)) {
+      continue;
+    }
     const value = (node as unknown as Record<string, unknown>)[key];
     if (Array.isArray(value)) {
       for (const item of value) {
         if (isNode(item)) {
-          result.push(item);
+          result.push({ key, node: item });
         }
       }
     } else if (isNode(value)) {
-      result.push(value);
+      result.push({ key, node: value });
     }
   }
   return result;
 };
 
+export const children = (node: Node, options?: { skipTypes?: boolean }): Node[] =>
+  childEntries(node, options).map((entry) => entry.node);
+
 /** Walk depth-first. Return `false` from `enter` to skip a node's children. */
 export const walk = (
   node: Node,
diff --git a/code/core/src/csf-tools/estree/scope.ts b/code/core/src/csf-tools/estree/scope.ts
index 295350e5254e..286e3795a835 100644
--- a/code/core/src/csf-tools/estree/scope.ts
+++ b/code/core/src/csf-tools/estree/scope.ts
@@ -1,4 +1,4 @@
-import { type E, type Node, children, isNode } from './ast.ts';
+import { TYPE_KEYS, type E, type Node, childEntries, children, isNode } from './ast.ts';
 
 export type BindingKind =
   | 'var'
@@ -168,15 +168,6 @@ const TS_TYPES = new Set([
   'TSVoidKeyword',
 ]);
 
-const TYPE_KEYS = new Set([
-  'typeAnnotation',
-  'returnType',
-  'typeParameters',
-  'typeArguments',
-  'superTypeArguments',
-  'implements',
-]);
-
 const isCompatTag = (name: string) => /^[a-z]/.test(name) || name.includes('-');
 
 // Identifiers a binding pattern declares, plus the expressions nested in it (defaults, keys,
@@ -787,25 +778,6 @@ export const analyzeScopes = (program: E.Program): ScopeInfo => {
   };
 };
 
-const childEntries = (node: Node): { key: string; node: Node }[] => {
-  const result: { key: string; node: Node }[] = [];
-  for (const [key, value] of Object.entries(node)) {
-    if (key === 'parent') {
-      continue;
-    }
-    if (Array.isArray(value)) {
-      for (const item of value) {
-        if (isNode(item)) {
-          result.push({ key, node: item });
-        }
-      }
-    } else if (isNode(value)) {
-      result.push({ key, node: value });
-    }
-  }
-  return result;
-};
-
 /** Generate an unused name: `_meta`, `_meta2`, `_meta3`, … */
 export const generateUid = (info: ScopeInfo, name: string) => {
   let uid = `_${name}`;

From 67f1537a9043f491657fd21c4e81342999c782d5 Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 14:53:14 +0900
Subject: [PATCH 085/326] refactor(core): print save-story args with the
 editor's value printer

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../save-story/update-args-in-csf-file.ts     |  6 ++-
 .../utils/save-story/valueToSource.ts         | 45 +++++++------------
 code/core/src/csf-tools/estree/editor.ts      | 29 +++++++++---
 code/core/src/csf-tools/index.ts              |  1 +
 4 files changed, 44 insertions(+), 37 deletions(-)

diff --git a/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts b/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts
index d39b08beede6..760e91b42c62 100644
--- a/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts
+++ b/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts
@@ -9,7 +9,9 @@ import {
 } from '../../../csf-tools/estree/ast.ts';
 import { appendMembers, prependMembers, replaceValue } from '../../../csf-tools/estree/editor.ts';
 import { SaveStoryError } from './utils.ts';
-import { objectSource, valueToSource } from './valueToSource.ts';
+import { printMembers } from 'storybook/internal/csf-tools';
+
+import { valueToSource } from './valueToSource.ts';
 
 // Edits accumulate on `csf`; print them with `printCsf`.
 export const updateArgsInCsfFile = async (
@@ -64,7 +66,7 @@ export const updateArgsInCsfFile = async (
 
   if (!argsProperty) {
     prependMembers(editor, story, [
-      `args: ${objectSource(Object.entries(args).map(([key, value]) => `${key}: ${value}`))}`,
+      `args: ${printMembers(Object.entries(args).map(([key, value]) => `${key}: ${value}`))}`,
     ]);
     return;
   }
diff --git a/code/core/src/core-server/utils/save-story/valueToSource.ts b/code/core/src/core-server/utils/save-story/valueToSource.ts
index 9cfa745a49af..fabef9989328 100644
--- a/code/core/src/core-server/utils/save-story/valueToSource.ts
+++ b/code/core/src/core-server/utils/save-story/valueToSource.ts
@@ -1,33 +1,20 @@
-import { printString } from '../../../csf-tools/estree/editor.ts';
+import { printValue } from '../../../csf-tools/estree/editor.ts';
 
-export function valueToSource<T>(literal: T, quote = '"'): string {
-  if (literal === null) {
-    return 'null';
+// Members set to `undefined` are left out, as they would not survive JSON either.
+const withoutUndefined = (value: unknown): unknown => {
+  if (Array.isArray(value)) {
+    return value.map(withoutUndefined);
   }
-  switch (typeof literal) {
-    case 'function':
-      return literal.toString();
-    case 'number':
-    case 'boolean':
-      return String(literal);
-    case 'string':
-      return printString(literal, quote);
-    case 'undefined':
-      return 'undefined';
-    default:
-      if (Array.isArray(literal)) {
-        return `[${literal.map((item) => valueToSource(item, quote)).join(', ')}]`;
-      }
-      return objectSource(
-        Object.entries(literal as Record<string, unknown>)
-          .filter(([, value]) => typeof value !== 'undefined')
-          .map(([key, value]) => `${printString(key, quote)}: ${valueToSource(value, quote)}`)
-      );
+  if (value && typeof value === 'object') {
+    return Object.fromEntries(
+      Object.entries(value)
+        .filter(([, item]) => item !== undefined)
+        .map(([key, item]) => [key, withoutUndefined(item)])
+    );
   }
-}
+  return value;
+};
 
-// An object literal laid out one member per line, so formatters keep it expanded.
-export const objectSource = (members: string[]) =>
-  members.length === 0
-    ? '{}'
-    : `{\n${members.map((member) => `  ${member.split('\n').join('\n  ')},`).join('\n')}\n}`;
+/** Print an arg value as source, with objects expanded one member per line. */
+export const valueToSource = (value: unknown, quote = '"'): string =>
+  printValue(withoutUndefined(value), quote, { expanded: true });
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 2ad41f84930a..41207df85c0f 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -202,13 +202,27 @@ export const printString = (value: string, quote: string) => {
     : `'${json.slice(1, -1).replaceAll('\\"', '"').replaceAll("'", "\\'")}'`;
 };
 
-export const printValue = (value: unknown, quote: string): string => {
+/** An object literal laid out one member per line, so formatters keep it expanded. */
+export const printMembers = (members: string[]) =>
+  members.length === 0
+    ? '{}'
+    : `{\n${members.map((member) => `  ${member.split('\n').join('\n  ')},`).join('\n')}\n}`;
+
+/** Print a JS value as source. `expanded` lays objects out one member per line. */
+export const printValue = (
+  value: unknown,
+  quote: string,
+  options: { expanded?: boolean } = {}
+): string => {
   if (value === undefined) {
     return 'undefined';
   }
   if (value === null) {
     return 'null';
   }
+  if (typeof value === 'function') {
+    return value.toString();
+  }
   if (typeof value === 'string') {
     return printString(value, quote);
   }
@@ -231,13 +245,16 @@ export const printValue = (value: unknown, quote: string): string => {
     return value.toString();
   }
   if (Array.isArray(value)) {
-    return `[${Array.from(value, (item) => printValue(item, quote)).join(', ')}]`;
+    return `[${Array.from(value, (item) => printValue(item, quote, options)).join(', ')}]`;
   }
   if (typeof value === 'object') {
-    const entries = Object.entries(value as Record<string, unknown>);
-    return entries.length === 0
-      ? '{}'
-      : `{ ${entries.map(([key, item]) => `${printKey(key, quote)}: ${printValue(item, quote)}`).join(', ')} }`;
+    const members = Object.entries(value as Record<string, unknown>).map(
+      ([key, item]) => `${printKey(key, quote)}: ${printValue(item, quote, options)}`
+    );
+    if (options.expanded) {
+      return printMembers(members);
+    }
+    return members.length === 0 ? '{}' : `{ ${members.join(', ')} }`;
   }
   throw new Error(`Cannot print value of type ${typeof value}`);
 };
diff --git a/code/core/src/csf-tools/index.ts b/code/core/src/csf-tools/index.ts
index ef3ffc9dfed1..33509720ed19 100644
--- a/code/core/src/csf-tools/index.ts
+++ b/code/core/src/csf-tools/index.ts
@@ -42,6 +42,7 @@ export {
   prependStatement,
   prependToList,
   printKey,
+  printMembers,
   printString,
   printValue,
   reindent,

From e9244a7e816a46744c9729df8a59bdd5aa901116 Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 14:55:55 +0900
Subject: [PATCH 086/326] refactor(csf-tools): share one identifier predicate
 for printed keys

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/editor.ts           |  5 ++---
 .../src/csf-tools/story-shape/resolve-arg-value.ts | 14 +++++++++-----
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 41207df85c0f..0d4a0aba2b29 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -7,6 +7,7 @@ import {
   type ParsedModule,
   type Property,
   isNode,
+  isValidIdentifier,
   parseModule,
   registerSource,
   sourceOf,
@@ -190,10 +191,8 @@ export class SourceEditor {
   }
 }
 
-const isIdentifierName = (name: string) => /^[A-Za-z_$][\w$]*$/.test(name);
-
 export const printKey = (name: string, quote: string) =>
-  isIdentifierName(name) ? name : printString(name, quote);
+  isValidIdentifier(name, false) ? name : printString(name, quote);
 
 export const printString = (value: string, quote: string) => {
   const json = JSON.stringify(value);
diff --git a/code/core/src/csf-tools/story-shape/resolve-arg-value.ts b/code/core/src/csf-tools/story-shape/resolve-arg-value.ts
index 393d7700009f..748989280713 100644
--- a/code/core/src/csf-tools/story-shape/resolve-arg-value.ts
+++ b/code/core/src/csf-tools/story-shape/resolve-arg-value.ts
@@ -1,6 +1,12 @@
 // Reads an arg value written as a name through to the definition it refers to, and reports what
 // printing the result still depends on.
-import { type E, type Node, expressionFromSource, parseFragment } from '../estree/ast.ts';
+import {
+  type E,
+  type Node,
+  expressionFromSource,
+  parseFragment,
+  isValidIdentifier,
+} from '../estree/ast.ts';
 import { analyzeScopes } from '../estree/scope.ts';
 import { type ImportRef } from './import-statements.ts';
 import { type ImportBinding, collectImportBindings } from './imports.ts';
@@ -146,8 +152,6 @@ const hasNamedSpread = (node: Node): boolean => {
   );
 };
 
-const isValidIdentifier = (name: string) => /^[A-Za-z_$][\w$]*$/.test(name);
-
 /** An object literal with every member value's own spreads written out, when they all can be. */
 const objectFrom = (
   properties: (E.ObjectProperty | { key: string; value: Node })[],
@@ -165,7 +169,7 @@ const objectFrom = (
       const name = keyOf(property);
       key = property.computed
         ? `[${codeOf(property.key)}]`
-        : name !== null && isValidIdentifier(name)
+        : name !== null && isValidIdentifier(name, false)
           ? name
           : codeOf(property.key);
       original = property.value;
@@ -173,7 +177,7 @@ const objectFrom = (
       if (property.value.type === 'Property') {
         return undefined;
       }
-      key = isValidIdentifier(property.key) ? property.key : JSON.stringify(property.key);
+      key = isValidIdentifier(property.key, false) ? property.key : JSON.stringify(property.key);
       original = property.value;
     }
     const value = inlineSpreads(original, ctx, unresolved);

From cfbe8b355300bbb641f88140840c9e57df14e7b3 Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 14:58:48 +0900
Subject: [PATCH 087/326] refactor(csf-tools): key named-export members by
 their real name nodes

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/ConfigObject.ts | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/code/core/src/csf-tools/ConfigObject.ts b/code/core/src/csf-tools/ConfigObject.ts
index ce661e892a60..f06cc21dcab0 100644
--- a/code/core/src/csf-tools/ConfigObject.ts
+++ b/code/core/src/csf-tools/ConfigObject.ts
@@ -325,7 +325,9 @@ export const locateConfigRoot = (
 const exportedName = (node: E.ModuleExportName) =>
   node.type === 'Identifier' ? node.name : (node as E.StringLiteral).value;
 
-// A config made of named exports, edited as if it were one object literal.
+// A config made of named exports, edited as if it were one object literal. Each member's key is the
+// node that carries the exported name and its value the declaration's initializer, so every span a
+// shared helper could read is a real one; the member itself only exists in memory.
 const namedExportsRoot = (editor: SourceEditor, entries: NamedEntry[]): ObjectRoot => {
   const quote = editor.quote;
   const byProperty = new Map<Property, NamedEntry>();
@@ -333,19 +335,14 @@ const namedExportsRoot = (editor: SourceEditor, entries: NamedEntry[]): ObjectRo
     const value = (
       entry.declaration.type === 'VariableDeclarator' ? entry.declaration.init : entry.declaration
     ) as E.Expression;
+    const key = entry.specifier ? entry.specifier.specifier.exported : entry.declaration.id!;
     const property = {
       type: 'Property',
       kind: 'init',
       method: false,
       shorthand: false,
       computed: false,
-      key: {
-        type: 'Literal',
-        value: entry.name,
-        raw: printString(entry.name, quote),
-        start: 0,
-        end: 0,
-      },
+      key,
       value,
       start: entry.declaration.start,
       end: entry.declaration.end,

From f6cc3306305afcc7e3b3d38b887aa097f2c9ebf7 Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 15:01:44 +0900
Subject: [PATCH 088/326] fix(csf-tools): insert a moved member before removing
 it, so a failed move changes nothing

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/CsfObject.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index b00d49441443..cba64883fd88 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -672,10 +672,15 @@ class CsfObjectEditor implements CsfObject {
     }
 
     const moved = source.parent.root.take(source.property, key);
-    source.parent.root.remove([source.property]);
-    this.commit();
+    // Insert first: if that throws, nothing has been committed. The source is removed afterwards,
+    // looked up again since the insertion moved its spans.
     this.insert(destinationPath, [{ ...moved, key }]);
     this.commit();
+    const remaining = this.inspect(sourcePath);
+    if (remaining.ok !== false && remaining.property && remaining.parent) {
+      remaining.parent.root.remove([remaining.property]);
+      this.commit();
+    }
     this.removeEmptyParents(sourcePath);
     return this.success();
   }

From ff4afeeab4b4dba2fd4cc6a75d14a283233ea400 Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 15:06:09 +0900
Subject: [PATCH 089/326] refactor(csf-tools): move value placement helpers
 next to the editor

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/ConfigObject.ts  |   2 +-
 code/core/src/csf-tools/CsfObject.ts     | 224 ++---------------------
 code/core/src/csf-tools/estree/editor.ts |  22 +++
 code/core/src/csf-tools/estree/values.ts | 188 +++++++++++++++++++
 4 files changed, 231 insertions(+), 205 deletions(-)
 create mode 100644 code/core/src/csf-tools/estree/values.ts

diff --git a/code/core/src/csf-tools/ConfigObject.ts b/code/core/src/csf-tools/ConfigObject.ts
index f06cc21dcab0..c75751b551f6 100644
--- a/code/core/src/csf-tools/ConfigObject.ts
+++ b/code/core/src/csf-tools/ConfigObject.ts
@@ -7,7 +7,6 @@ import {
   type ObjectRoot,
   createCsfObject,
   literalRoot,
-  valueSource,
 } from './CsfObject.ts';
 import {
   type E,
@@ -29,6 +28,7 @@ import {
   removeStatement,
 } from './estree/editor.ts';
 import { generateUid } from './estree/scope.ts';
+import { valueSource } from './estree/values.ts';
 
 type Span = { start: number; end: number };
 
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index cba64883fd88..87636770260b 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -3,12 +3,8 @@ import {
   type Node,
   type Property,
   type SourceLocation,
-  isIdentifier,
-  isNode,
-  isNumericLiteral,
   locationOf,
   expressionFromSource,
-  parseModule,
   staticKey,
   textOf,
   unwrapExpression,
@@ -16,10 +12,9 @@ import {
 import {
   type SourceEditor,
   appendMembers,
-  functionFromMethod,
+  groupMembers,
   isSpan,
   keySource,
-  memberText,
   prependMembers,
   printKey,
   printValue,
@@ -27,10 +22,19 @@ import {
   renameKey,
   renamedMemberText,
   replaceValue,
-  separatorBefore,
 } from './estree/editor.ts';
-
-import { visitorKeys } from 'oxc-parser';
+import {
+  type CsfValue,
+  UNRESOLVED,
+  isAstLike,
+  isEvaluationInert,
+  placeableSource,
+  readValue,
+  resolveExpression,
+  valueSource,
+} from './estree/values.ts';
+
+export type { CsfValue };
 
 export type CsfObjectTarget =
   | { kind: 'config' }
@@ -68,15 +72,6 @@ export type CsfMutationResult =
   | { ok: true; changed: boolean }
   | { ok: false; changed: false; diagnostic: CsfMutationDiagnostic };
 
-export type CsfValue =
-  | string
-  | number
-  | boolean
-  | null
-  | undefined
-  | readonly CsfValue[]
-  | { readonly [key: string]: CsfValue };
-
 /**
  * An expression detached from any file, as returned by `get` and accepted by `set` and
  * `transform`. It is a plain OXC ESTree node; its source is kept alongside it, so a value read from
@@ -94,21 +89,6 @@ export type CsfExpression = E.Expression;
  */
 export const parseExpression = (code: string): CsfExpression => expressionFromSource(code);
 
-// An object that looks like an AST node rather than data: a node type Babel or ESTree would produce.
-const AST_TYPE =
-  /^(?:TS|JSX)?[A-Z]\w*(?:Expression|Literal|Statement|Declaration|Identifier|Pattern|Property|Specifier|Element|Fragment|Template|Block)$/;
-
-const isAstLike = (value: unknown): value is Node =>
-  isNode(value) && (value.type in visitorKeys || AST_TYPE.test(value.type));
-
-// Source text ready to be placed as a value: a comma expression keeps its parentheses, and a
-// trailing line comment ends its line so the code after it survives.
-const placeableSource = (source: string, type: string) => {
-  const text = type === 'SequenceExpression' && !source.startsWith('(') ? `(${source})` : source;
-  const lastComment = parseModule(`(${text}\n)`).comments.at(-1);
-  return lastComment?.type === 'Line' && lastComment.end === text.length + 1 ? `${text}\n` : text;
-};
-
 /** Source of an expression returned by `get` or `parseExpression`, or of any node inside one. */
 export const printExpression = (node: Node): string => {
   const source = textOf(node);
@@ -306,25 +286,7 @@ export const literalRoot = (editor: SourceEditor, object: E.ObjectExpression): O
   remove: (members) => removeMembers(editor, object, members),
   replaceValue: (member, text) => replaceValue(editor, member, text),
   rename: (member, key) => renameKey(editor, member, printKey(key, editor.quote)),
-  group: (members, key) => {
-    const texts = members.map((member) => memberText(editor, object, member));
-    const first = object.properties.indexOf(members[0]);
-    const multiline = editor.code.slice(object.start, object.end).includes('\n');
-    removeMembers(editor, object, members.slice(1));
-    const before = editor.code.slice(0, members[0].start);
-    const indent = /[ \t]*$/.exec(before.slice(before.lastIndexOf('\n') + 1))![0];
-    const inner = multiline
-      ? `{\n${texts.map((text) => `${indent}  ${text.split('\n').join(`\n${indent}  `)},`).join('\n')}\n${indent}}`
-      : `{ ${texts.join(', ')} }`;
-    // Leading comments of the first member move into the group with it.
-    const start = separatorBefore(editor.code, object, first);
-    const lead = multiline ? `\n${indent}` : ' ';
-    editor.edits.overwrite(
-      start,
-      members[0].end,
-      `${lead}${printKey(key, editor.quote)}: ${inner}`
-    );
-  },
+  group: (members, key) => groupMembers(editor, object, members, key),
   take: (member, key) => ({
     key,
     value: valueSource(editor, member),
@@ -332,14 +294,6 @@ export const literalRoot = (editor: SourceEditor, object: E.ObjectExpression): O
   }),
 });
 
-// Methods become function expressions.
-export const valueSource = (editor: SourceEditor, member: Property) =>
-  member.method || member.kind !== 'init'
-    ? functionFromMethod(editor, member)
-    : editor.source(member.value);
-
-const UNRESOLVED = Symbol('unresolved');
-
 type ReportDiagnostic = (diagnostic: CsfMutationDiagnostic) => void;
 type MarkChanged = () => void;
 
@@ -394,40 +348,6 @@ const lookupProperty = (
   return { ok: true, property: matches[0] };
 };
 
-const isEvaluationInert = (node: Node): boolean => {
-  const value = unwrapExpression(node);
-  if (value.type === 'TemplateLiteral') {
-    return value.expressions.length === 0;
-  }
-  if (
-    value.type === 'Literal' ||
-    value.type === 'FunctionExpression' ||
-    value.type === 'ArrowFunctionExpression'
-  ) {
-    return true;
-  }
-  if (value.type === 'UnaryExpression') {
-    return ['!', 'void', 'typeof'].includes(value.operator)
-      ? isEvaluationInert(value.argument)
-      : isNumericLiteral(unwrapExpression(value.argument));
-  }
-  if (value.type === 'ArrayExpression') {
-    return value.elements.every((element) => element === null || isEvaluationInert(element));
-  }
-  if (value.type === 'ObjectExpression') {
-    return value.properties.every(
-      (property) =>
-        property.type === 'Property' &&
-        property.kind === 'init' &&
-        !property.method &&
-        !property.computed &&
-        staticKey(property) !== undefined &&
-        isEvaluationInert(property.value)
-    );
-  }
-  return false;
-};
-
 class CsfObjectEditor implements CsfObject {
   #changed = false;
 
@@ -483,7 +403,7 @@ class CsfObjectEditor implements CsfObject {
   getValue(path: readonly string[]): CsfValue {
     const root = this.rootNodeFor(path);
     if (root) {
-      const value = this.readValue(root);
+      const value = readValue(this.editor.scopes, root);
       if (value === UNRESOLVED) {
         this.failure('unsupported-value', path, root);
         return undefined;
@@ -498,7 +418,7 @@ class CsfObjectEditor implements CsfObject {
       this.failure('unsupported-value', path, property);
       return undefined;
     }
-    const value = this.readValue(property.value);
+    const value = readValue(this.editor.scopes, property.value);
     if (value === UNRESOLVED) {
       this.failure('unsupported-value', path, property.value);
       return undefined;
@@ -703,7 +623,7 @@ class CsfObjectEditor implements CsfObject {
       if (!inspected.property) {
         return { ok: true, changed: false };
       }
-      const value = this.resolveExpression(inspected.property.value);
+      const value = resolveExpression(this.editor.scopes, inspected.property.value);
       if (value?.type !== 'ObjectExpression') {
         return this.failure('unsupported-member', path, inspected.property);
       }
@@ -856,7 +776,7 @@ class CsfObjectEditor implements CsfObject {
       ) {
         return;
       }
-      const value = this.resolveExpression(ancestor.property.value);
+      const value = resolveExpression(this.editor.scopes, ancestor.property.value);
       if (value?.type !== 'ObjectExpression' || value.properties.length > 0) {
         return;
       }
@@ -881,110 +801,6 @@ class CsfObjectEditor implements CsfObject {
     return path.slice(this.prefix.length);
   }
 
-  private readValue(node: Node): CsfValue | typeof UNRESOLVED {
-    const value = this.resolveExpression(node);
-    if (!value) {
-      return UNRESOLVED;
-    }
-    if (value.type === 'Literal') {
-      if ('regex' in value || 'bigint' in value) {
-        return UNRESOLVED;
-      }
-      return (value as E.StringLiteral | E.NumericLiteral | E.BooleanLiteral | E.NullLiteral).value;
-    }
-    if (value.type === 'Identifier') {
-      return value.name === 'undefined' ? undefined : UNRESOLVED;
-    }
-    if (value.type === 'TemplateLiteral' && value.expressions.length === 0) {
-      return value.quasis[0].value.cooked ?? UNRESOLVED;
-    }
-    if (value.type === 'UnaryExpression') {
-      const argument = this.readValue(value.argument);
-      if (typeof argument !== 'number') {
-        return UNRESOLVED;
-      }
-      if (value.operator === '-') {
-        return -argument;
-      }
-      return value.operator === '+' ? argument : UNRESOLVED;
-    }
-    if (value.type === 'ArrayExpression') {
-      const elements: CsfValue[] = [];
-      for (const element of value.elements) {
-        if (!element) {
-          elements.length++;
-          continue;
-        }
-        const item = this.readValue(element.type === 'SpreadElement' ? element.argument : element);
-        if (item === UNRESOLVED) {
-          return UNRESOLVED;
-        }
-        if (element.type === 'SpreadElement') {
-          if (!Array.isArray(item)) {
-            return UNRESOLVED;
-          }
-          elements.push(...item);
-        } else {
-          elements.push(item);
-        }
-      }
-      return elements;
-    }
-    if (value.type === 'ObjectExpression') {
-      const entries: [string, CsfValue][] = [];
-      for (const property of value.properties) {
-        if (property.type === 'SpreadElement') {
-          const spread = this.readValue(property.argument);
-          if (typeof spread !== 'object' || spread === null || Array.isArray(spread)) {
-            return UNRESOLVED;
-          }
-          entries.push(...Object.entries(spread));
-          continue;
-        }
-        const key = staticKey(property);
-        if (
-          property.kind !== 'init' ||
-          property.method ||
-          key === undefined ||
-          (key === '__proto__' && !property.computed)
-        ) {
-          return UNRESOLVED;
-        }
-        const item = this.readValue(property.value);
-        if (item === UNRESOLVED) {
-          return UNRESOLVED;
-        }
-        entries.push([key, item]);
-      }
-      return Object.fromEntries(entries);
-    }
-    return UNRESOLVED;
-  }
-
-  private resolveExpression(node: Node): Node | undefined {
-    let value = unwrapExpression(node);
-    const visited = new Set<Node>();
-    while (isIdentifier(value) && !visited.has(value)) {
-      visited.add(value);
-      const binding = this.editor.scopes.bindingOf(value);
-      if (!binding && value.name === 'undefined') {
-        return value;
-      }
-      if (
-        !binding?.constant ||
-        binding.references.length !== 1 ||
-        binding.references[0] !== value ||
-        binding.node.type !== 'VariableDeclarator' ||
-        binding.node.id.type !== 'Identifier' ||
-        !binding.node.init
-      ) {
-        return undefined;
-      }
-      value = unwrapExpression(binding.node.init);
-    }
-    return value;
-  }
-
   private inspect(
     path: readonly string[]
   ):
@@ -1005,7 +821,7 @@ class CsfObjectEditor implements CsfObject {
       if (property.method) {
         return { ok: false, code: 'unsupported-member', node: property };
       }
-      const value = this.resolveExpression(property.value);
+      const value = resolveExpression(this.editor.scopes, property.value);
       if (value?.type !== 'ObjectExpression') {
         return { ok: false, code: 'unsupported-member', node: property.value };
       }
@@ -1044,7 +860,7 @@ class CsfObjectEditor implements CsfObject {
       }
       const value = lookup.property.method
         ? undefined
-        : this.resolveExpression(lookup.property.value);
+        : resolveExpression(this.editor.scopes, lookup.property.value);
       if (value?.type !== 'ObjectExpression') {
         throw new Error('CsfObject mutation preflight was invalidated');
       }
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 0d4a0aba2b29..f6a1c5e6522a 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -631,6 +631,28 @@ export const appendMembers = (editor: SourceEditor, object: E.ObjectExpression,
 export const prependMembers = (editor: SourceEditor, object: E.ObjectExpression, texts: string[]) =>
   prependToList(editor, objectList(object), texts);
 
+/** Replace contiguous members with `key: { …members }`, keeping the first member's comments. */
+export const groupMembers = (
+  editor: SourceEditor,
+  object: E.ObjectExpression,
+  members: Property[],
+  key: string
+) => {
+  const texts = members.map((member) => memberText(editor, object, member));
+  const first = object.properties.indexOf(members[0]);
+  const multiline = editor.code.slice(object.start, object.end).includes('\n');
+  removeMembers(editor, object, members.slice(1));
+  const before = editor.code.slice(0, members[0].start);
+  const indent = /[ \t]*$/.exec(before.slice(before.lastIndexOf('\n') + 1))![0];
+  const inner = multiline
+    ? `{\n${texts.map((text) => `${indent}  ${text.split('\n').join(`\n${indent}  `)},`).join('\n')}\n${indent}}`
+    : `{ ${texts.join(', ')} }`;
+  // Leading comments of the first member move into the group with it.
+  const start = separatorBefore(editor.code, object, first);
+  const lead = multiline ? `\n${indent}` : ' ';
+  editor.edits.overwrite(start, members[0].end, `${lead}${printKey(key, editor.quote)}: ${inner}`);
+};
+
 export const removeMembers = (
   editor: SourceEditor,
   object: E.ObjectExpression,
diff --git a/code/core/src/csf-tools/estree/values.ts b/code/core/src/csf-tools/estree/values.ts
new file mode 100644
index 000000000000..a240715a0ca0
--- /dev/null
+++ b/code/core/src/csf-tools/estree/values.ts
@@ -0,0 +1,188 @@
+import { visitorKeys } from 'oxc-parser';
+
+import {
+  type E,
+  type Node,
+  type Property,
+  isIdentifier,
+  isNode,
+  isNumericLiteral,
+  parseModule,
+  staticKey,
+  unwrapExpression,
+} from './ast.ts';
+import { type SourceEditor, functionFromMethod } from './editor.ts';
+import type { ScopeInfo } from './scope.ts';
+
+// An object that looks like an AST node rather than data: a node type Babel or ESTree would produce.
+const AST_TYPE =
+  /^(?:TS|JSX)?[A-Z]\w*(?:Expression|Literal|Statement|Declaration|Identifier|Pattern|Property|Specifier|Element|Fragment|Template|Block)$/;
+
+export const isAstLike = (value: unknown): value is Node =>
+  isNode(value) && (Object.hasOwn(visitorKeys, value.type) || AST_TYPE.test(value.type));
+
+/**
+ * Source text ready to be placed as a value: a comma expression keeps its parentheses, and a
+ * trailing line comment ends its line so the code after it survives.
+ */
+export const placeableSource = (source: string, type: string) => {
+  const text = type === 'SequenceExpression' && !source.startsWith('(') ? `(${source})` : source;
+  const lastComment = parseModule(`(${text}\n)`).comments.at(-1);
+  return lastComment?.type === 'Line' && lastComment.end === text.length + 1 ? `${text}\n` : text;
+};
+
+/** A member's value as source; methods become function expressions. */
+export const valueSource = (editor: SourceEditor, member: Property) =>
+  member.method || member.kind !== 'init'
+    ? functionFromMethod(editor, member)
+    : editor.source(member.value);
+
+export type CsfValue =
+  | string
+  | number
+  | boolean
+  | null
+  | undefined
+  | readonly CsfValue[]
+  | { readonly [key: string]: CsfValue };
+
+export const UNRESOLVED = Symbol('unresolved');
+
+/** Whether evaluating the expression can have no side effect, so it may be moved freely. */
+export const isEvaluationInert = (node: Node): boolean => {
+  const value = unwrapExpression(node);
+  if (value.type === 'TemplateLiteral') {
+    return value.expressions.length === 0;
+  }
+  if (
+    value.type === 'Literal' ||
+    value.type === 'FunctionExpression' ||
+    value.type === 'ArrowFunctionExpression'
+  ) {
+    return true;
+  }
+  if (value.type === 'UnaryExpression') {
+    return ['!', 'void', 'typeof'].includes(value.operator)
+      ? isEvaluationInert(value.argument)
+      : isNumericLiteral(unwrapExpression(value.argument));
+  }
+  if (value.type === 'ArrayExpression') {
+    return value.elements.every((element) => element === null || isEvaluationInert(element));
+  }
+  if (value.type === 'ObjectExpression') {
+    return value.properties.every(
+      (property) =>
+        property.type === 'Property' &&
+        property.kind === 'init' &&
+        !property.method &&
+        !property.computed &&
+        staticKey(property) !== undefined &&
+        isEvaluationInert(property.value)
+    );
+  }
+  return false;
+};
+
+export const readValue = (scopes: ScopeInfo, node: Node): CsfValue | typeof UNRESOLVED => {
+  const value = resolveExpression(scopes, node);
+  if (!value) {
+    return UNRESOLVED;
+  }
+  if (value.type === 'Literal') {
+    if ('regex' in value || 'bigint' in value) {
+      return UNRESOLVED;
+    }
+    return (value as E.StringLiteral | E.NumericLiteral | E.BooleanLiteral | E.NullLiteral).value;
+  }
+  if (value.type === 'Identifier') {
+    return value.name === 'undefined' ? undefined : UNRESOLVED;
+  }
+  if (value.type === 'TemplateLiteral' && value.expressions.length === 0) {
+    return value.quasis[0].value.cooked ?? UNRESOLVED;
+  }
+  if (value.type === 'UnaryExpression') {
+    const argument = readValue(scopes, value.argument);
+    if (typeof argument !== 'number') {
+      return UNRESOLVED;
+    }
+    if (value.operator === '-') {
+      return -argument;
+    }
+    return value.operator === '+' ? argument : UNRESOLVED;
+  }
+  if (value.type === 'ArrayExpression') {
+    const elements: CsfValue[] = [];
+    for (const element of value.elements) {
+      if (!element) {
+        elements.length++;
+        continue;
+      }
+      const item = readValue(scopes, element.type === 'SpreadElement' ? element.argument : element);
+      if (item === UNRESOLVED) {
+        return UNRESOLVED;
+      }
+      if (element.type === 'SpreadElement') {
+        if (!Array.isArray(item)) {
+          return UNRESOLVED;
+        }
+        elements.push(...item);
+      } else {
+        elements.push(item);
+      }
+    }
+    return elements;
+  }
+  if (value.type === 'ObjectExpression') {
+    const entries: [string, CsfValue][] = [];
+    for (const property of value.properties) {
+      if (property.type === 'SpreadElement') {
+        const spread = readValue(scopes, property.argument);
+        if (typeof spread !== 'object' || spread === null || Array.isArray(spread)) {
+          return UNRESOLVED;
+        }
+        entries.push(...Object.entries(spread));
+        continue;
+      }
+      const key = staticKey(property);
+      if (
+        property.kind !== 'init' ||
+        property.method ||
+        key === undefined ||
+        (key === '__proto__' && !property.computed)
+      ) {
+        return UNRESOLVED;
+      }
+      const item = readValue(scopes, property.value);
+      if (item === UNRESOLVED) {
+        return UNRESOLVED;
+      }
+      entries.push([key, item]);
+    }
+    return Object.fromEntries(entries);
+  }
+  return UNRESOLVED;
+};
+
+export const resolveExpression = (scopes: ScopeInfo, node: Node): Node | undefined => {
+  let value = unwrapExpression(node);
+  const visited = new Set<Node>();
+  while (isIdentifier(value) && !visited.has(value)) {
+    visited.add(value);
+    const binding = scopes.bindingOf(value);
+    if (!binding && value.name === 'undefined') {
+      return value;
+    }
+    if (
+      !binding?.constant ||
+      binding.references.length !== 1 ||
+      binding.references[0] !== value ||
+      binding.node.type !== 'VariableDeclarator' ||
+      binding.node.id.type !== 'Identifier' ||
+      !binding.node.init
+    ) {
+      return undefined;
+    }
+    value = unwrapExpression(binding.node.init);
+  }
+  return value;
+};

From dece151a2589c704c502b7f02436b29822dbd02a Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 15:09:10 +0900
Subject: [PATCH 090/326] fix(csf-tools): allow comments between export and
 default when hoisting meta

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/editor.test.ts | 10 ++++++++++
 code/core/src/csf-tools/estree/editor.ts      |  6 +++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index ac334b4bc198..cc439088d16a 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -150,6 +150,16 @@ describe('parenthesized default exports', () => {
       `const _meta = ({ title: 'X' } satisfies Meta);\nexport default _meta;\nexport const A = {};`
     );
   });
+
+  it('hoists an inline meta with comments between the keywords', () => {
+    const csf = loadCsf(`export /* a */ default // b\n { title: 'X' };\nexport const A = {};`, {
+      transformInlineMeta: true,
+      makeTitle: (title) => title ?? 'title',
+    }).parse();
+    expect(printCsf(csf).code).toBe(
+      `const _meta = { title: 'X' };\nexport default _meta;\nexport const A = {};`
+    );
+  });
 });
 
 describe('line endings', () => {
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index f6a1c5e6522a..8eacbbc731da 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -914,8 +914,12 @@ const methodFromFunction = (text: string, key: string) => {
 };
 
 // Length of `export default` and the whitespace after it at `start`.
+// Comments may sit between and after the keywords.
+const SKIPPED = String.raw`(?:\s|/\*[\s\S]*?\*/|//[^\n]*\n)`;
+const EXPORT_DEFAULT = new RegExp(`^export${SKIPPED}+default${SKIPPED}*`);
+
 export const exportDefaultKeywords = (code: string, start: number) =>
-  /^export\s+default\s*/.exec(code.slice(start))![0].length;
+  EXPORT_DEFAULT.exec(code.slice(start))![0].length;
 
 export const isSpan = (value: unknown): value is Span =>
   isNode(value) && typeof (value as unknown as Span).start === 'number';

From 1715b97f5691ca47261f502c806c409771efac33 Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 15:12:14 +0900
Subject: [PATCH 091/326] refactor(csf-tools): share the specifier list lookup

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/ConfigFile.ts         |  3 ++-
 code/core/src/csf-tools/ConfigObject.ts       | 19 +--------------
 code/core/src/csf-tools/estree/editor.ts      | 24 ++++++++++++-------
 code/core/src/csf-tools/index.ts              |  1 +
 .../vitest-plugin/component-transformer.ts    |  4 ++--
 .../transforms/upgrade-deprecated-types.ts    |  6 ++---
 6 files changed, 24 insertions(+), 33 deletions(-)

diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index a29b2d695a94..2cf0f1278634 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -6,7 +6,7 @@ import { dedent } from 'ts-dedent';
 import invariant from 'tiny-invariant';
 
 import type { PrintResultType } from './PrintResultType.ts';
-import { createConfigObject, specifierList } from './ConfigObject.ts';
+import { createConfigObject } from './ConfigObject.ts';
 import {
   type CsfExpression,
   type CsfMutationDiagnostic,
@@ -39,6 +39,7 @@ import {
   printValue,
   removeFromList,
   removeStatement,
+  specifierList,
 } from './estree/editor.ts';
 import { findVarInitialization } from './findVarInitialization.ts';
 
diff --git a/code/core/src/csf-tools/ConfigObject.ts b/code/core/src/csf-tools/ConfigObject.ts
index c75751b551f6..8fa97b982232 100644
--- a/code/core/src/csf-tools/ConfigObject.ts
+++ b/code/core/src/csf-tools/ConfigObject.ts
@@ -26,6 +26,7 @@ import {
   printString,
   removeFromList,
   removeStatement,
+  specifierList,
 } from './estree/editor.ts';
 import { generateUid } from './estree/scope.ts';
 import { valueSource } from './estree/values.ts';
@@ -461,24 +462,6 @@ const namedExportsRoot = (editor: SourceEditor, entries: NamedEntry[]): ObjectRo
   };
 };
 
-const specifierList = (
-  editor: SourceEditor,
-  statement: E.ExportNamedDeclaration | E.ImportDeclaration
-): List => {
-  const open = editor.code.indexOf('{', statement.start) + 1;
-  const close = editor.code.indexOf('}', open);
-  return {
-    open,
-    close,
-    items: statement.specifiers.filter(
-      (specifier) =>
-        specifier.type !== 'ImportDefaultSpecifier' && specifier.type !== 'ImportNamespaceSpecifier'
-    ),
-  };
-};
-
-export { specifierList };
-
 export function createConfigObject(
   config: ConfigFile,
   mode: 'read' | 'mutate',
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 8eacbbc731da..b7b1d95598dc 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -291,6 +291,21 @@ export interface List {
   items: readonly Span[];
 }
 
+/** The `{ … }` of an import or export with at least one named specifier. */
+export const specifierList = (
+  editor: SourceEditor,
+  declaration: E.ImportDeclaration | E.ExportNamedDeclaration
+): List => {
+  const items = declaration.specifiers.filter(
+    (specifier) => specifier.type === 'ImportSpecifier' || specifier.type === 'ExportSpecifier'
+  );
+  return {
+    open: editor.code.lastIndexOf('{', items[0].start) + 1,
+    close: editor.code.indexOf('}', items.at(-1)!.end),
+    items,
+  };
+};
+
 export const objectList = (object: E.ObjectExpression | E.ObjectPattern): List => ({
   open: object.start + 1,
   close: object.end - 1,
@@ -804,16 +819,9 @@ export const setImportSpecifiers = (
   kept: readonly E.ImportDeclaration['specifiers'][number][],
   added: { default?: string; named?: string[] } = {}
 ) => {
-  const { code } = editor;
   const { specifiers } = declaration;
   const named = specifiers.filter((specifier) => specifier.type === 'ImportSpecifier');
-  const list: List | undefined = named.length
-    ? {
-        open: code.lastIndexOf('{', named[0].start) + 1,
-        close: code.indexOf('}', named.at(-1)!.end),
-        items: named,
-      }
-    : undefined;
+  const list = named.length ? specifierList(editor, declaration) : undefined;
   const namedTexts = [
     ...named.filter((specifier) => kept.includes(specifier)).map((s) => itemText(editor, list!, s)),
     ...(added.named ?? []),
diff --git a/code/core/src/csf-tools/index.ts b/code/core/src/csf-tools/index.ts
index 33509720ed19..738a94f56f0a 100644
--- a/code/core/src/csf-tools/index.ts
+++ b/code/core/src/csf-tools/index.ts
@@ -51,5 +51,6 @@ export {
   removeStatement,
   removeStatements,
   setImportSpecifiers,
+  specifierList,
   withParentheses,
 } from './estree/editor.ts';
diff --git a/code/core/src/csf-tools/vitest-plugin/component-transformer.ts b/code/core/src/csf-tools/vitest-plugin/component-transformer.ts
index 36f7707a335e..fc5251fa57c1 100644
--- a/code/core/src/csf-tools/vitest-plugin/component-transformer.ts
+++ b/code/core/src/csf-tools/vitest-plugin/component-transformer.ts
@@ -14,6 +14,7 @@ import {
   printKey,
   printValue,
   exportDefaultKeywords,
+  specifierList,
 } from '../estree/editor.ts';
 import { generateUid } from '../estree/scope.ts';
 import { GeneratedTail, createTestGuardDeclaration, printWithTail } from './transformer.ts';
@@ -75,8 +76,7 @@ const dedupeImports = (
   );
   const named = existing?.specifiers.filter((specifier) => specifier.type === 'ImportSpecifier');
   if (existing && named && named.length > 0) {
-    const open = editor.code.indexOf('{', existing.start) + 1;
-    appendToList(editor, { open, close: editor.code.indexOf('}', open), items: named }, texts);
+    appendToList(editor, specifierList(editor, existing), texts);
     return;
   }
   if (
diff --git a/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts b/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts
index b7932e6de2b6..a47f3adccfee 100644
--- a/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts
+++ b/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts
@@ -4,6 +4,7 @@ import {
   loadCsf,
   printCsf,
   removeFromList,
+  specifierList,
   storyShapeError,
   walk,
 } from 'storybook/internal/csf-tools';
@@ -77,7 +78,6 @@ export function upgradeDeprecatedTypes(editor: SourceEditor) {
       continue;
     }
 
-    const named = specifiers.filter((specifier) => specifier.type === 'ImportSpecifier');
     const removed: E.ImportSpecifier[] = [];
     for (const specifier of specifiers) {
       if (specifier.type === 'ImportNamespaceSpecifier') {
@@ -122,9 +122,7 @@ export function upgradeDeprecatedTypes(editor: SourceEditor) {
     }
 
     if (removed.length > 0) {
-      const open = editor.code.lastIndexOf('{', named[0].start) + 1;
-      const close = editor.code.indexOf('}', named.at(-1)!.end);
-      removeFromList(editor, { open, close, items: named }, removed);
+      removeFromList(editor, specifierList(editor, statement), removed);
     }
   }
 

From 9600638d41e28b9bf355593214080b9fa75c28f0 Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 15:14:01 +0900
Subject: [PATCH 092/326] fix(angular-vite): expand tabs on code lines only

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../angular-vite/src/docgen/story-docs-args.test.ts       | 7 +++++++
 .../frameworks/angular-vite/src/docgen/story-docs-args.ts | 8 +++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/code/frameworks/angular-vite/src/docgen/story-docs-args.test.ts b/code/frameworks/angular-vite/src/docgen/story-docs-args.test.ts
index ee61a7736da2..bc50ddbffaf4 100644
--- a/code/frameworks/angular-vite/src/docgen/story-docs-args.test.ts
+++ b/code/frameworks/angular-vite/src/docgen/story-docs-args.test.ts
@@ -26,5 +26,12 @@ describe('argFieldValue', () => {
     expect(argFieldValue(expressionFromSource('helper({\n      code: `a\n  b`,\n    })'))).toBe(
       'helper({\n  code: `a\n  b`,\n})'
     );
+    expect(
+      argFieldValue(
+        expressionFromSource(
+          'helper({\n\t\tcode: `a\n\tb`,\n\t\tfn() {\n\t\t\treturn 1;\n\t\t},\n\t})'
+        )
+      )
+    ).toBe('helper({\n  code: `a\n\tb`,\n  fn() {\n    return 1;\n  },\n})');
   });
 });
diff --git a/code/frameworks/angular-vite/src/docgen/story-docs-args.ts b/code/frameworks/angular-vite/src/docgen/story-docs-args.ts
index 3084e8c16da4..29a6df2c3c6d 100644
--- a/code/frameworks/angular-vite/src/docgen/story-docs-args.ts
+++ b/code/frameworks/angular-vite/src/docgen/story-docs-args.ts
@@ -70,7 +70,13 @@ const printArgSource = (source: string): string => {
           (shortest, current) => (current.length < shortest.length ? current : shortest),
           indents[0] ?? ''
         );
-  return reindent(code, indent, '').replace(/^\t+/gm, (tabs) => '  '.repeat(tabs.length));
+  let result = reindent(code, indent, '');
+  // Tabs left on code lines become spaces, deepest first so each line is converted once.
+  const deepest = Math.max(0, ...result.split('\n').map((line) => /^\t*/.exec(line)![0].length));
+  for (let depth = deepest; depth > 0; depth--) {
+    result = reindent(result, '\t'.repeat(depth), '  '.repeat(depth));
+  }
+  return result;
 };
 
 const withoutComments = (code: string): string => {

From 38fa95bdc09da38a06e8a35a3032c1d776d0ae0c Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 15:14:52 +0900
Subject: [PATCH 093/326] refactor(csf-tools): drop warm-up parent lookups

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/common/utils/resolve-meta-component.ts      | 2 --
 code/core/src/csf-tools/story-shape/reference-context.ts  | 2 --
 code/core/src/csf-tools/story-shape/resolve-story-args.ts | 2 --
 3 files changed, 6 deletions(-)

diff --git a/code/core/src/common/utils/resolve-meta-component.ts b/code/core/src/common/utils/resolve-meta-component.ts
index a0394d2ef616..8a2e2d7a0683 100644
--- a/code/core/src/common/utils/resolve-meta-component.ts
+++ b/code/core/src/common/utils/resolve-meta-component.ts
@@ -99,8 +99,6 @@ export function createMetaComponentResolver(options: MetaComponentResolverOption
       return { reason: 'no-meta-component' };
     }
 
-    // Index the story file so the nodes a resolution carries print as written.
-    csf._editor.parentOf(csf._program);
     const storyModule: ReferenceModule = { editor: csf._editor, filePath: storyPath };
     const expression = unwrapComponentExpression(node);
     if (expression.type === 'Identifier') {
diff --git a/code/core/src/csf-tools/story-shape/reference-context.ts b/code/core/src/csf-tools/story-shape/reference-context.ts
index 3dc56696c8cc..11b67c9e0a19 100644
--- a/code/core/src/csf-tools/story-shape/reference-context.ts
+++ b/code/core/src/csf-tools/story-shape/reference-context.ts
@@ -66,8 +66,6 @@ export function createStoryReferenceResolver(
 export const parseReferenceModule = (filePath: string): ReferenceModule | undefined => {
   try {
     const editor = new SourceEditor(readFileSync(filePath, 'utf8'), filePath);
-    // Index the module so its nodes print as written wherever a resolution carries them.
-    editor.parentOf(editor.program);
     return { editor, filePath };
   } catch {
     return undefined;
diff --git a/code/core/src/csf-tools/story-shape/resolve-story-args.ts b/code/core/src/csf-tools/story-shape/resolve-story-args.ts
index 7c2a3449e451..fd2bb2806276 100644
--- a/code/core/src/csf-tools/story-shape/resolve-story-args.ts
+++ b/code/core/src/csf-tools/story-shape/resolve-story-args.ts
@@ -45,8 +45,6 @@ export function createStoryArgsResolver(
   csf: CsfFile,
   references?: StoryReferences
 ): StoryArgsResolver {
-  // Index the story file so its nodes print as written wherever a resolution carries them.
-  csf._editor.parentOf(csf._program);
   const ctx: ReferenceContext = {
     editor: csf._editor,
     filePath: csf._options.fileName ?? '',

From 648b9e5732e8fc24989b744225e38268947d8ee8 Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 15:16:59 +0900
Subject: [PATCH 094/326] fix(cli): compare custom args types by their trees

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../src/codemod/helpers/custom-args-type.ts   |  8 ++----
 .../helpers/story-to-csf-factory.test.ts      | 27 +++++++++++++++++++
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/code/lib/cli-storybook/src/codemod/helpers/custom-args-type.ts b/code/lib/cli-storybook/src/codemod/helpers/custom-args-type.ts
index 98c9e5d350f8..e0c40ffa05e0 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/custom-args-type.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/custom-args-type.ts
@@ -27,13 +27,9 @@ export function customArgsTypes(editor: SourceEditor, component: Node | undefine
     }
   }
 
-  // Whitespace and comments do not make two types different.
+  // Two types are the same when their trees are, whatever the spacing and comments around them.
   const code = (type: Node) =>
-    editor
-      .source(type)
-      .replace(/\/\*[\s\S]*?\*\/|\/\/.*$/gm, '')
-      .replace(/\s+/g, ' ')
-      .trim();
+    JSON.stringify(type, (key, value) => (key === 'start' || key === 'end' ? undefined : value));
 
   const componentCode = component && code(component);
 
diff --git a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
index f986d8c2b756..6153c0faf3f4 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
@@ -1141,6 +1141,33 @@ describe('stories codemod', () => {
         `);
       });
 
+      it('tells custom args types apart by their string literals', async () => {
+        await expect(
+          transform(dedent`
+            import type { Meta, StoryObj } from '@storybook/react';
+            import { Button } from './Button';
+
+            const meta = { component: Button } satisfies Meta<{ href: 'http://x' }>;
+            export default meta;
+
+            export const Same: StoryObj<{ href: 'http://x' }> = {};
+            export const Spaced: StoryObj<{ href: 'http://x' } & { label: 'a  b' }> = {};
+            export const Single: StoryObj<{ href: /* c */ 'http://x' } & { label: 'a b' }> = {};
+          `)
+        ).resolves.toMatchInlineSnapshot(`
+          import preview from "#.storybook/preview";
+          import { Button } from "./Button";
+
+          const meta = preview
+            .type<{ args: { href: "http://x" } }>()
+            .meta({ component: Button });
+
+          export const Same = meta.story();
+          export const Spaced = meta.type<{ args: { label: "a  b" } }>().story();
+          export const Single = meta.type<{ args: { label: "a b" } }>().story();
+        `);
+      });
+
       it('keeps a Storybook type that the custom args type is built from', async () => {
         await expect(
           transform(dedent`

From a347cd4563d2d79b64ad55ebee0a3ecd842b8f9f Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 15:18:48 +0900
Subject: [PATCH 095/326] test(core): pin that duplicating a story keeps
 computed keys named args

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../duplicate-story-with-new-name.test.ts          | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.test.ts b/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.test.ts
index 518fffea5990..1c2934eef0bc 100644
--- a/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.test.ts
+++ b/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.test.ts
@@ -3,7 +3,7 @@ import { join } from 'node:path';
 
 import { describe, expect, test } from 'vitest';
 
-import { printCsf, readCsf } from 'storybook/internal/csf-tools';
+import { loadCsf, printCsf, readCsf } from 'storybook/internal/csf-tools';
 
 import { format } from 'prettier';
 
@@ -153,4 +153,16 @@ describe('success', () => {
       + "
     `);
   });
+  test('removes the args member only, not a computed key named args', () => {
+    const parsed = loadCsf(
+      [
+        `export default { title: 'A' };`,
+        `const args = 'label';`,
+        `export const A = { args: { label: 'a' }, parameters: { [args]: 1 } };`,
+      ].join('\n'),
+      { makeTitle }
+    ).parse();
+    duplicateStoryWithNewName(parsed, 'A', 'B');
+    expect(printCsf(parsed).code).toContain(`export const B = { parameters: { [args]: 1 } };`);
+  });
 });

From 75423bcf43de8aa1333671089638e95ab6745daa Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 15:19:40 +0900
Subject: [PATCH 096/326] docs(migration): list the line-ending change for
 every project

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 MIGRATION.md | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 8f22923f9778..30b07f2519ea 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1317,24 +1317,22 @@ Migrate to [`@storybook/nextjs-vite`](https://www.npmjs.com/package/@storybook/n
 
 Storybook no longer bundles Babel or recast to read and write story and config files. Both are parsed with OXC, and edits are applied to the source text, so code a migration does not touch keeps its formatting.
 
-This only affects tooling that imports Storybook's internal entry points:
-
-- `storybook/internal/babel` is removed. Import Babel from your own `@babel/*` dependencies if you still need it.
-- The nodes exposed by `storybook/internal/csf-tools` are ESTree (OXC) nodes instead of Babel nodes, for example `Literal` instead of `StringLiteral` and `Property` instead of `ObjectProperty`/`ObjectMethod`. `CsfFile._ast` and the `NodePath` fields are removed; use `CsfFile._program` and `CsfFile._editor`.
-- `CsfObject#get` returns an ESTree expression, and `set`/`transform` accept expressions from `get()` or `parseExpression(code)`. Use `printExpression(node)` to read an expression's source.
-- An `experimental_enrichCsf` function receives the new `CsfFile`. Add code with `csf._appendStatement(code)` instead of pushing Babel nodes onto `csf._ast`.
-
-Behavior that changes for every project:
+#### Behavior that changes for every project
 
 - **Flow syntax is no longer supported in story files.** Babel parsed `// @flow` files with its Flow plugin; OXC does not parse Flow, so such files fail to index with an error that names Flow. Convert them to TypeScript or plain JavaScript.
 - `parameters.docs.source.originalSource` is now the story's source text exactly as written, where Babel reprinted it with its own formatting. "Show code" and `docs.source.transform` functions receive the authored text, with line endings normalized to `\n`.
+- Files that automigrations and codemods rewrite (`main.ts`, `preview.ts`, story files) are written with `\n` line endings, so a file with `\r\n` line endings comes out with `\n`.
 - Parse errors use OXC's wording, and end with ` in <file>` when the file name is known. Duplicate declarations and legacy octal literals are still rejected.
 
-Internal exports that are removed or changed, for tooling built on `storybook/internal/csf-tools`:
+#### Changes for tooling that imports Storybook's internal entry points
 
+- `storybook/internal/babel` is removed. Import Babel from your own `@babel/*` dependencies if you still need it.
+- The nodes exposed by `storybook/internal/csf-tools` are ESTree (OXC) nodes instead of Babel nodes, for example `Literal` instead of `StringLiteral` and `Property` instead of `ObjectProperty`/`ObjectMethod`. `CsfFile._ast` and the `NodePath` fields are removed; use `CsfFile._program` and `CsfFile._editor`.
+- `CsfObject#get` returns an ESTree expression, and `set`/`transform` accept expressions from `get()` or `parseExpression(code)`. Use `printExpression(node)` to read an expression's source.
+- An `experimental_enrichCsf` function receives the new `CsfFile`. Add code with `csf._appendStatement(code)` instead of pushing Babel nodes onto `csf._ast`.
 - `babelParse` and `babelParseFile` are removed; use `loadCsf(code, options)` and `readCsf(fileName, options)`.
 - `getHeaderComments(statement)` is replaced by `headerComments(editor)`.
-- The story-shape helpers no longer take Babel paths: `jsDocTagsForPath` is `jsDocTagsForNode`, `metaObjectPath` is `metaObject`, and `pathForNode` and `returnedExpressionPath` are removed in favor of `returnedExpression` and plain nodes.
+- The story-shape helpers no longer take Babel paths: `jsDocTagsForPath` is `jsDocTagsForNode`, `metaObjectPath` is `metaObject`, `RenderFunctionPath` is `RenderFunction`, and `pathForNode` and `returnedExpressionPath` are removed in favor of `returnedExpression` and plain nodes.
 - The `getAbsolutePath` wrapper helpers in `storybook/internal/common` work on nodes: `getAbsolutePathWrapperAsCallExpression` is replaced by `getAbsolutePathCall`, and `wrapValueWithGetAbsolutePathWrapper` by `wrapValuesWithGetAbsolutePathWrapper`.
 - `new CsfFile(code, options)` and `new ConfigFile(code, fileName)` take source code instead of a Babel AST.
 - `formatCsf(csf, { sourceMaps, sourceFileName, inputSourceMap })` replaces the Babel generator options; `printCsf` and `printConfig` take no options and always print with `\n` line endings.

From 861e4d386af61f242011635b49fb3689753456b7 Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 15:23:54 +0900
Subject: [PATCH 097/326] fix(csf-tools): keep unknown sourcesContent as null

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/addons/docs/src/csf-plugin/webpack-loader.test.ts |  8 ++++++++
 code/core/src/csf-tools/CsfFile.ts                     | 10 ++++++----
 code/core/src/csf-tools/estree/editor.ts               | 10 ++++++++--
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/code/addons/docs/src/csf-plugin/webpack-loader.test.ts b/code/addons/docs/src/csf-plugin/webpack-loader.test.ts
index ac862767c662..cb3a752954ac 100644
--- a/code/addons/docs/src/csf-plugin/webpack-loader.test.ts
+++ b/code/addons/docs/src/csf-plugin/webpack-loader.test.ts
@@ -83,6 +83,14 @@ describe('webpack loader', () => {
     expect(result.map.sourcesContent).toEqual([originalCode]);
   });
 
+  it('leaves the content unknown when the incoming map has none', async () => {
+    const transpiled = transpile(originalCode);
+    const result = await run(transpiled.code, { ...transpiled.map, sourcesContent: undefined });
+
+    expect(result.map.sources).toEqual([id]);
+    expect(result.map.sourcesContent).toEqual([null]);
+  });
+
   it('maps to the loaded code when no earlier loader ran', async () => {
     const result = await run(originalCode, undefined);
 
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index 4bffd4d42bcf..91cb48d6ff89 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -35,6 +35,7 @@ import {
   unwrapExpression,
 } from './estree/ast.ts';
 import {
+  type GeneratedMap,
   type InputSourceMap,
   SourceEditor,
   appendStatement,
@@ -1159,10 +1160,11 @@ export class CsfFile {
 // Children in source order; type annotations are skipped since CSF never reads them.
 export const loadCsf = (code: string, options: CsfOptions) => new CsfFile(code, options);
 
-type MagicStringSourceMap = ReturnType<SourceEditor['edits']['generateMap']>;
-
-/** A source map that carries the content of its source, as Vite and Rollup expect. */
-export type CsfSourceMap = Omit<MagicStringSourceMap, 'sourcesContent'> & {
+/**
+ * A source map that carries the content of its sources, as Rollup's types expect. An entry is `null`
+ * only when an input map carried none, which Rollup, Vite and webpack accept at runtime.
+ */
+export type CsfSourceMap = Omit<GeneratedMap, 'sourcesContent'> & {
   sourcesContent: string[];
 };
 
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index b7b1d95598dc..1b3b2b3fc568 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -22,6 +22,11 @@ type Span = { start: number; end: number };
 const mapSource = (editor: { fileName: string | undefined }) => editor.fileName ?? 'source';
 
 /** A source map from an earlier transform, as the object or the JSON string it was handed over as. */
+/** A map whose `sourcesContent` may be unknown for sources an input map did not carry. */
+export type GeneratedMap = Omit<SourceMap, 'sourcesContent'> & {
+  sourcesContent?: (string | null)[];
+};
+
 export type InputSourceMap =
   | string
   | {
@@ -136,7 +141,7 @@ export class SourceEditor {
    * Hi-res map from the code the editor was created with to `toString()`, through every commit,
    * and through `inputSourceMap` when the code came from an earlier transform.
    */
-  generateMap(options: { source?: string; inputSourceMap?: InputSourceMap } = {}): SourceMap {
+  generateMap(options: { source?: string; inputSourceMap?: InputSourceMap } = {}): GeneratedMap {
     const source = options.source ?? this.fileName ?? '';
     const current = this._edits.generateMap({
       hires: true,
@@ -161,7 +166,8 @@ export class SourceEditor {
     return new SourceMap({
       file: composed.file ?? '',
       sources: composed.sources.map((name, index) => input?.sources[index] ?? name ?? source),
-      sourcesContent: composed.sourcesContent?.map((content) => content ?? ''),
+      // Unknown content stays `null`, so devtools load the file instead of showing it empty.
+      sourcesContent: composed.sourcesContent as string[] | undefined,
       names: composed.names,
       // Encoded, since `decodedMappings` was not requested.
       mappings: composed.mappings as string,

From e4858f823ce0275605d837c5abb3f1fee8646014 Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 17:02:41 +0900
Subject: [PATCH 098/326] test(addon-docs): compare loader source names with
 the incoming map's spelling

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/addons/docs/src/csf-plugin/webpack-loader.test.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/code/addons/docs/src/csf-plugin/webpack-loader.test.ts b/code/addons/docs/src/csf-plugin/webpack-loader.test.ts
index cb3a752954ac..cd08e249baac 100644
--- a/code/addons/docs/src/csf-plugin/webpack-loader.test.ts
+++ b/code/addons/docs/src/csf-plugin/webpack-loader.test.ts
@@ -75,11 +75,12 @@ describe('webpack loader', () => {
     expect(result.code).toContain('originalSource');
     const output = positionOf(result.code, 'play:');
     const entry = new SourceMap(result.map).findEntry(output.line, output.column);
+    // The source keeps the spelling of the incoming map, which may differ from `id` on Windows.
     expect(entry).toMatchObject({
       originalLine: positionOf(originalCode, 'play:').line,
-      originalSource: id,
+      originalSource: transpiled.map.sources[0],
     });
-    expect(result.map.sources).toEqual([id]);
+    expect(result.map.sources).toEqual(transpiled.map.sources);
     expect(result.map.sourcesContent).toEqual([originalCode]);
   });
 
@@ -87,7 +88,7 @@ describe('webpack loader', () => {
     const transpiled = transpile(originalCode);
     const result = await run(transpiled.code, { ...transpiled.map, sourcesContent: undefined });
 
-    expect(result.map.sources).toEqual([id]);
+    expect(result.map.sources).toEqual(transpiled.map.sources);
     expect(result.map.sourcesContent).toEqual([null]);
   });
 

From 18b199912317c935e1c728c293b05d9d601bc917 Mon Sep 17 00:00:00 2001
From: Obvious <obvious@obvious.ai>
Date: Fri, 16 Oct 2026 09:40:41 +0000
Subject: [PATCH 099/326] refactor(addon-vitest): move the react prebundle to
 the react renderer preset

The renderer preset's optimizeViteDeps flows into the vitest browser
optimizer through the addon's storybookOptimizeDepsPlugin, confirmed by
a sentinel experiment: a dependency added only to the react renderer's
preset list appeared in the browser optimizer metadata of a vitest 5
browser-mode run. Pinning react there covers every consumer of the
renderer (vitest projects and the dev server) instead of only the
vitest project, and keeps addon-vitest framework-agnostic.

- code/renderers/react: add 'react' to optimizeViteDeps with the
  observed-failure rationale and a preset test asserting it
- code/addons/vitest: revert the framework-conditional pin and its
  regression tests; the pin now lives in the renderer
---
 code/addons/vitest/src/vitest-plugin/index.ts | 10 +-----
 .../src/vitest-plugin/vitest-root.test.ts     | 34 +------------------
 code/renderers/react/src/preset.test.ts       | 11 ++++++
 code/renderers/react/src/preset.ts            |  6 ++++
 4 files changed, 19 insertions(+), 42 deletions(-)

diff --git a/code/addons/vitest/src/vitest-plugin/index.ts b/code/addons/vitest/src/vitest-plugin/index.ts
index f113aa90dffc..212e5389de85 100644
--- a/code/addons/vitest/src/vitest-plugin/index.ts
+++ b/code/addons/vitest/src/vitest-plugin/index.ts
@@ -465,15 +465,7 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin[]> =>
             // @testing-library/dom) reach the browser raw on hoisted node_modules layouts
             'storybook/test',
             ...(frameworkName?.includes('react') || frameworkName?.includes('nextjs')
-              ? [
-                  'react-dom/test-utils',
-                  // The project-annotations setup file loads the renderer's entry previews through
-                  // a virtual module, and those chunks contain a bare `import React from 'react'`.
-                  // Browser mode pre-bundles only the explicit `include` entries, so without this
-                  // pin the browser loads react's CJS index.js raw and module linking fails with
-                  // "The requested module 'react/index.js' does not provide an export named 'default'".
-                  'react',
-                ]
+              ? ['react-dom/test-utils']
               : []),
           ],
         },
diff --git a/code/addons/vitest/src/vitest-plugin/vitest-root.test.ts b/code/addons/vitest/src/vitest-plugin/vitest-root.test.ts
index 7d3d80af55ab..cd989fa75c03 100644
--- a/code/addons/vitest/src/vitest-plugin/vitest-root.test.ts
+++ b/code/addons/vitest/src/vitest-plugin/vitest-root.test.ts
@@ -76,7 +76,7 @@ async function getPluginConfig(invokingRoot: string, inputTestConfig?: InlineCon
     throw new Error('The plugin config hook returned no test config');
   }
 
-  return { root: config.root, test: config.test, optimizeDeps: config.optimizeDeps, plugin };
+  return { root: config.root, test: config.test, plugin };
 }
 
 describe('story test patterns', () => {
@@ -145,38 +145,6 @@ describe('internal setup files', () => {
   });
 });
 
-describe('dependency prebundling', () => {
-  // The project-annotations setup file loads the framework renderer's entry previews through a
-  // virtual module, and the renderer chunks contain a bare `import React from 'react'`. Browser
-  // mode pre-bundles only the explicit `include` entries — there is no HTML-entry discovery — so
-  // when `react` itself is missing from that list the browser loads react's CJS index.js raw and
-  // module linking fails with "The requested module 'react/index.js' does not provide an export
-  // named 'default'".
-  it('prebundles react when the framework renders react components', async () => {
-    const { optimizeDeps } = await getPluginConfig(REPO_ROOT);
-
-    expect(optimizeDeps?.include).toContain('react');
-  });
-
-  describe('non-react frameworks', () => {
-    beforeEach(() => {
-      const applyPreset = presetApply.getMockImplementation()!;
-      presetApply.mockImplementation(async (key: string, fallback?: unknown) => {
-        if (key === 'framework') {
-          return { name: '@storybook/vue3-vite' };
-        }
-        return applyPreset(key, fallback);
-      });
-    });
-
-    it('does not prebundle react', async () => {
-      const { optimizeDeps } = await getPluginConfig(REPO_ROOT);
-
-      expect(optimizeDeps?.include).not.toContain('react');
-    });
-  });
-});
-
 describe('browser API permissions', () => {
   interface ApiPermissions {
     allowWrite?: boolean;
diff --git a/code/renderers/react/src/preset.test.ts b/code/renderers/react/src/preset.test.ts
index 2f71d5916fa0..1100afedd359 100644
--- a/code/renderers/react/src/preset.test.ts
+++ b/code/renderers/react/src/preset.test.ts
@@ -15,6 +15,17 @@ describe('optimizeViteDeps', () => {
     expect(optimizeViteDeps).toContain('react-dom/test-utils');
   });
 
+  it('includes react', () => {
+    // The vitest project-annotations setup file imports this renderer's entry previews through a
+    // virtual module, and those chunks import React by the bare specifier. In the observed
+    // failure (react 19.3.1, vite 7.3.7, vitest 5.0.5, chromium browser mode) the dependency
+    // scan had not registered plain `react`, so the browser loaded react's CJS index.js raw and
+    // module linking failed with "The requested module 'react/index.js' does not provide an
+    // export named 'default'".
+    // If this test fails, add 'react' back to the optimizeViteDeps array in preset.ts.
+    expect(optimizeViteDeps).toContain('react');
+  });
+
   it('includes react/jsx-runtime', () => {
     // Plugins such as vite-plugin-svgr emit `react/jsx-runtime` imports while transforming non-JS
     // files. The dependency scan does not run those transforms, so the import is only found
diff --git a/code/renderers/react/src/preset.ts b/code/renderers/react/src/preset.ts
index 647c3dabb396..0ab9165ac56f 100644
--- a/code/renderers/react/src/preset.ts
+++ b/code/renderers/react/src/preset.ts
@@ -146,6 +146,12 @@ export async function internal_getArgTypesData(
 }
 
 export const optimizeViteDeps: string[] = [
+  // The vitest project-annotations setup file imports this renderer's entry previews through a
+  // virtual module, and those chunks import React by the bare specifier. In the observed failure
+  // (react 19.3.1, vite 7.3.7, vitest 5.0.5, chromium browser mode) the dependency scan had not
+  // registered plain `react`, so the browser loaded react's CJS index.js raw and module linking
+  // failed with "The requested module 'react/index.js' does not provide an export named 'default'".
+  'react',
   'react-dom/client',
   'react-dom/test-utils',
   'react/jsx-runtime',

From 16028ac27b1fabba8c57a91862a1ed3a62303a73 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <dev@valentinpalkovic.dev>
Date: Fri, 16 Oct 2026 12:10:13 +0200
Subject: [PATCH 100/326] Agents: Drop the removed --no-open flag from skills

storybook dev no longer accepts --no-open, so the rebuild skill's start
command exits with "unknown option '--no-open'".
---
 .agents/skills/rebuild-restart-storybook/SKILL.md   | 2 +-
 .agents/skills/storybook-startup-benchmark/SKILL.md | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.agents/skills/rebuild-restart-storybook/SKILL.md b/.agents/skills/rebuild-restart-storybook/SKILL.md
index d308913f84be..974c0c9bd8c7 100644
--- a/.agents/skills/rebuild-restart-storybook/SKILL.md
+++ b/.agents/skills/rebuild-restart-storybook/SKILL.md
@@ -33,7 +33,7 @@ yarn build storybook <extra packages>
 Then, run in the background:
 
 ```bash
-NODE_OPTIONS="--preserve-symlinks" yarn storybook:ui --no-open
+NODE_OPTIONS="--preserve-symlinks" yarn storybook:ui
 ```
 
 ### Handle an occupied port
diff --git a/.agents/skills/storybook-startup-benchmark/SKILL.md b/.agents/skills/storybook-startup-benchmark/SKILL.md
index 0b3158de1ed7..f17142594526 100644
--- a/.agents/skills/storybook-startup-benchmark/SKILL.md
+++ b/.agents/skills/storybook-startup-benchmark/SKILL.md
@@ -26,7 +26,7 @@ When asked to benchmark Storybook startup:
    - Stop timing on first story mount plus one `requestAnimationFrame()`
 2. Check whether the repo already has a benchmark script. Reuse it if possible.
 3. If not, create a Node script that:
-   - starts Storybook with `--no-open`
+   - starts Storybook without opening a browser
    - waits for the server to respond
    - launches a browser it controls
    - waits for a preview-side render signal
@@ -41,7 +41,7 @@ Use these defaults unless the user asks otherwise:
 - Browser path: normal manager page, let Storybook load the preview iframe itself
 - Render signal: first preview story mount + one `requestAnimationFrame()`
 - Browser launch: external harness launches the browser, not Storybook
-- Auto-open: disable Storybook browser auto-open with `storybook dev --no-open`
+- Auto-open: keep Storybook from opening a browser. Storybook 11 opens one only with `--open`; Storybook 10 and older need `--no-open`
 
 Do not measure only CLI output. Server listening is not the same as first story rendered.
 
@@ -70,7 +70,7 @@ Preferred payload:
 The benchmark script should:
 
 1. Fail fast if the target Storybook port is already in use
-2. Spawn Storybook with `--no-open`
+2. Spawn Storybook without opening a browser
 3. Start timing immediately before spawn
 4. Wait for HTTP readiness on the Storybook URL
 5. Launch a controlled browser to `/`

From 2b08d4c96de31aba140d17e03fa93e1db1a3fdb3 Mon Sep 17 00:00:00 2001
From: Obvious <obvious@obvious.ai>
Date: Fri, 16 Oct 2026 11:07:26 +0000
Subject: [PATCH 101/326] docs(renderers/react): name the crash trigger and
 dedupe the prebundle rationale

Names when the missing-default-export crash surfaces (stories using the
automatic JSX runtime that never import react by name) on the
optimizeViteDeps entry, and replaces the duplicated rationale in the
preset test with a pointer to that comment.
---
 code/renderers/react/src/preset.test.ts | 7 +------
 code/renderers/react/src/preset.ts      | 3 +++
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/code/renderers/react/src/preset.test.ts b/code/renderers/react/src/preset.test.ts
index 1100afedd359..d466d6360c06 100644
--- a/code/renderers/react/src/preset.test.ts
+++ b/code/renderers/react/src/preset.test.ts
@@ -16,12 +16,7 @@ describe('optimizeViteDeps', () => {
   });
 
   it('includes react', () => {
-    // The vitest project-annotations setup file imports this renderer's entry previews through a
-    // virtual module, and those chunks import React by the bare specifier. In the observed
-    // failure (react 19.3.1, vite 7.3.7, vitest 5.0.5, chromium browser mode) the dependency
-    // scan had not registered plain `react`, so the browser loaded react's CJS index.js raw and
-    // module linking failed with "The requested module 'react/index.js' does not provide an
-    // export named 'default'".
+    // Rationale for this entry lives on the optimizeViteDeps array in preset.ts.
     // If this test fails, add 'react' back to the optimizeViteDeps array in preset.ts.
     expect(optimizeViteDeps).toContain('react');
   });
diff --git a/code/renderers/react/src/preset.ts b/code/renderers/react/src/preset.ts
index 0ab9165ac56f..071e946eaffc 100644
--- a/code/renderers/react/src/preset.ts
+++ b/code/renderers/react/src/preset.ts
@@ -151,6 +151,9 @@ export const optimizeViteDeps: string[] = [
   // (react 19.3.1, vite 7.3.7, vitest 5.0.5, chromium browser mode) the dependency scan had not
   // registered plain `react`, so the browser loaded react's CJS index.js raw and module linking
   // failed with "The requested module 'react/index.js' does not provide an export named 'default'".
+  // Projects only hit this when their stories use the automatic JSX runtime and never import
+  // `react` by name; a story importing `react` (for `useState`, say) registers it in the scan
+  // and masks the failure.
   'react',
   'react-dom/client',
   'react-dom/test-utils',

From 98bb0b615ee3c6f50f26a4d19d2d9fbb05794bf9 Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 20:57:21 +0900
Subject: [PATCH 102/326] fix(csf-tools): keep input map source names by order,
 not by output index

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/editor.test.ts | 75 +++++++++++++++++++
 code/core/src/csf-tools/estree/editor.ts      | 41 ++++++----
 2 files changed, 102 insertions(+), 14 deletions(-)

diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index cc439088d16a..cdfb4a8324b7 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -1,5 +1,9 @@
+import { SourceMap as NodeSourceMap } from 'node:module';
+
 import { describe, expect, it } from 'vitest';
 
+import { decode, encode } from '@jridgewell/sourcemap-codec';
+import MagicString from 'magic-string';
 import { dedent } from 'ts-dedent';
 
 import { loadCsf, printCsf } from '../CsfFile.ts';
@@ -225,3 +229,74 @@ describe('multi-line members', () => {
     expect(again.getValue(['parameters', 'code', 'code'])).toBe('line1\nline2');
   });
 });
+
+describe('generateMap', () => {
+  const original = `const a = 1;\nconst b = 2;\nexport default { title: 'A' };\n`;
+  // An earlier transform: drops the first line and maps the result back to `original`.
+  const transform = (source: string) => {
+    const edited = new MagicString(original).remove(0, original.indexOf('\n') + 1);
+    return {
+      code: edited.toString(),
+      map: edited.generateMap({ hires: true, source, includeContent: true }),
+    };
+  };
+  const editOf = (editor: SourceEditor) =>
+    editor.edits.appendLeft(editor.code.indexOf('export'), 'const c = 3;\n');
+  const entryOf = (map: object, code: string, token: string) => {
+    const line = code.split('\n').findIndex((text) => text.includes(token));
+    return new NodeSourceMap(map as ConstructorParameters<typeof NodeSourceMap>[0]).findEntry(
+      line,
+      code.split('\n')[line].indexOf(token)
+    );
+  };
+
+  it('keeps the names of a two-source input map whose first source is unused', () => {
+    const { code, map } = transform('real.ts');
+    const unused = {
+      ...map,
+      sources: ['unused.ts', 'real.ts'],
+      sourcesContent: [null, original],
+      mappings: encode(
+        decode(map.mappings).map((line) =>
+          line.map(
+            (segment) =>
+              (segment.length > 1 ? [segment[0], 1, segment[2]!, segment[3]!] : segment) as never
+          )
+        )
+      ),
+    };
+    const editor = new SourceEditor(code, 'out.ts');
+    editOf(editor);
+    const result = editor.generateMap({ inputSourceMap: unused });
+    expect(result.sources).toEqual(['real.ts']);
+    expect(result.sourcesContent).toEqual([original]);
+    expect(entryOf(result, editor.toString(), 'title')).toMatchObject({
+      originalSource: 'real.ts',
+      originalLine: 2,
+    });
+  });
+
+  it('keeps sourceRoot and the names relative to it', () => {
+    const { code, map } = transform('Button.stories.tsx');
+    const editor = new SourceEditor(code, 'out.ts');
+    editOf(editor);
+    const result = editor.generateMap({
+      inputSourceMap: { ...map, sourceRoot: 'webpack:///src/' },
+    });
+    expect(result.sources).toEqual(['Button.stories.tsx']);
+    expect(result.sourceRoot).toBe('webpack:///src/');
+  });
+
+  it('names the source as requested after a committed edit', () => {
+    const editor = new SourceEditor(original, 'file.ts');
+    editOf(editor);
+    editor.commit();
+    editor.edits.appendLeft(0, '// header\n');
+    const result = editor.generateMap({ source: 'Custom.tsx' });
+    expect(result.sources).toEqual(['Custom.tsx']);
+    expect(entryOf(result, editor.toString(), 'title')).toMatchObject({
+      originalSource: 'Custom.tsx',
+      originalLine: 2,
+    });
+  });
+});
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 1b3b2b3fc568..d4827b00cab9 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -21,12 +21,13 @@ type Span = { start: number; end: number };
 // private member would make the class nominal and break assignability between `src` and `dist`.
 const mapSource = (editor: { fileName: string | undefined }) => editor.fileName ?? 'source';
 
-/** A source map from an earlier transform, as the object or the JSON string it was handed over as. */
 /** A map whose `sourcesContent` may be unknown for sources an input map did not carry. */
 export type GeneratedMap = Omit<SourceMap, 'sourcesContent'> & {
   sourcesContent?: (string | null)[];
+  sourceRoot?: string;
 };
 
+/** A source map from an earlier transform, as the object or the JSON string it was handed over as. */
 export type InputSourceMap =
   | string
   | {
@@ -148,30 +149,42 @@ export class SourceEditor {
       includeContent: true,
       source: mapSource(this),
     });
+    const input =
+      typeof options.inputSourceMap === 'string'
+        ? (JSON.parse(options.inputSourceMap) as Exclude<InputSourceMap, string>)
+        : options.inputSourceMap;
     const chain = [current, ...this._committed.slice().reverse()];
-    if (chain.length === 1 && !options.inputSourceMap) {
+    if (chain.length === 1 && !input) {
       current.sources = [source];
       return current;
     }
     const maps = chain.map((map) => map as unknown as SourceMapInput);
-    if (options.inputSourceMap) {
-      maps.push(options.inputSourceMap as SourceMapInput);
-    }
-    const composed = remapping(maps, () => null);
-    // Keep the source names as the input map spelled them: remapping normalizes them to URLs.
-    const input =
-      typeof options.inputSourceMap === 'string'
-        ? (JSON.parse(options.inputSourceMap) as Exclude<InputSourceMap, string>)
-        : options.inputSourceMap;
-    return new SourceMap({
+    if (input) {
+      maps.push(input as SourceMapInput);
+    }
+    // The original sources keep the names the input map spelled them with: remapping resolves
+    // them against `sourceRoot` and hands them to the loader in the input map's order. Without an
+    // input map the only original source is this editor's, under the requested name.
+    let index = 0;
+    const composed = remapping(maps, (_file, context) => {
+      if (context.depth === 1) {
+        context.source = (input ? input.sources[index++] : source) ?? context.source;
+      }
+      return null;
+    });
+    const map = new SourceMap({
       file: composed.file ?? '',
-      sources: composed.sources.map((name, index) => input?.sources[index] ?? name ?? source),
+      sources: composed.sources as string[],
       // Unknown content stays `null`, so devtools load the file instead of showing it empty.
       sourcesContent: composed.sourcesContent as string[] | undefined,
       names: composed.names,
       // Encoded, since `decodedMappings` was not requested.
       mappings: composed.mappings as string,
-    });
+    }) as GeneratedMap;
+    if (input?.sourceRoot) {
+      map.sourceRoot = input.sourceRoot;
+    }
+    return map;
   }
 
   /** Line ending of the file; inserted text is written with `\n` and converted on output. */

From 744684e8ef2cc6a8e5422b235a07152572f675cb Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 20:57:21 +0900
Subject: [PATCH 103/326] fix(csf-tools): fail loudly when a moved member is
 not found again

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/CsfObject.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index 87636770260b..291ff28b6fb7 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -597,10 +597,11 @@ class CsfObjectEditor implements CsfObject {
     this.insert(destinationPath, [{ ...moved, key }]);
     this.commit();
     const remaining = this.inspect(sourcePath);
-    if (remaining.ok !== false && remaining.property && remaining.parent) {
-      remaining.parent.root.remove([remaining.property]);
-      this.commit();
+    if (remaining.ok === false || !remaining.property || !remaining.parent) {
+      throw new Error(`CsfObject: ${sourcePath.join('.')} was not found again after moving it`);
     }
+    remaining.parent.root.remove([remaining.property]);
+    this.commit();
     this.removeEmptyParents(sourcePath);
     return this.success();
   }

From c84a8379848da102536f9febdbfd522799806e38 Mon Sep 17 00:00:00 2001
From: EastonShin <shindongri89@gmail.com>
Date: Fri, 16 Oct 2026 20:57:21 +0900
Subject: [PATCH 104/326] refactor(core): import printMembers relatively in
 save-story

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../utils/save-story/update-args-in-csf-file.ts           | 8 ++++++--
 code/core/src/csf-tools/index.ts                          | 1 -
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts b/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts
index 760e91b42c62..8651938d5b75 100644
--- a/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts
+++ b/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts
@@ -7,9 +7,13 @@ import {
   isValidIdentifier,
   walk,
 } from '../../../csf-tools/estree/ast.ts';
-import { appendMembers, prependMembers, replaceValue } from '../../../csf-tools/estree/editor.ts';
+import {
+  appendMembers,
+  prependMembers,
+  printMembers,
+  replaceValue,
+} from '../../../csf-tools/estree/editor.ts';
 import { SaveStoryError } from './utils.ts';
-import { printMembers } from 'storybook/internal/csf-tools';
 
 import { valueToSource } from './valueToSource.ts';
 
diff --git a/code/core/src/csf-tools/index.ts b/code/core/src/csf-tools/index.ts
index 738a94f56f0a..a79699d401b9 100644
--- a/code/core/src/csf-tools/index.ts
+++ b/code/core/src/csf-tools/index.ts
@@ -42,7 +42,6 @@ export {
   prependStatement,
   prependToList,
   printKey,
-  printMembers,
   printString,
   printValue,
   reindent,

From ded64ac70450e18735bd8c50023c39da795ac9ed Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Fri, 16 Oct 2026 16:12:41 +0200
Subject: [PATCH 105/326] React: Add @storybook/react/theming preview entry and
 move withThemeFromJSXProvider to the renderer

Preview-side React code no longer has to import React-dependent code from
the React-free `storybook` package or `@storybook/addon-themes`:

- `@storybook/react/theming` bundles core theming (emotion) with React
  declared by the renderer, and every React framework re-exports it as
  `<framework>/theming`.
- `withThemeFromJSXProvider` moves from `@storybook/addon-themes` to
  `@storybook/react` (and thus all React frameworks). The addon no longer
  imports React at all.
- `react-theming-imports` automigration rewrites preview and story imports.
- MIGRATION.md and docs updated.

Replaces #36782.
---
 MIGRATION.md                                  |  21 +++
 code/addons/themes/docs/api.md                |   5 +-
 .../themes/docs/getting-started/emotion.md    |   5 +-
 .../docs/getting-started/material-ui.md       |   7 +-
 .../docs/getting-started/styled-components.md |   5 +-
 code/addons/themes/src/decorators/index.ts    |   1 -
 .../template/stories/decorators.stories.ts    |  26 +--
 code/frameworks/nextjs-vite/build-config.ts   |   4 +
 code/frameworks/nextjs-vite/package.json      |   5 +
 code/frameworks/nextjs-vite/src/theming.ts    |   1 +
 code/frameworks/nextjs/build-config.ts        |   4 +
 code/frameworks/nextjs/package.json           |   7 +-
 code/frameworks/nextjs/src/theming.ts         |   1 +
 .../react-native-web-vite/build-config.ts     |   4 +
 .../react-native-web-vite/package.json        |   5 +
 .../react-native-web-vite/src/theming.ts      |   1 +
 code/frameworks/react-vite/build-config.ts    |   4 +
 code/frameworks/react-vite/package.json       |   5 +
 code/frameworks/react-vite/src/theming.ts     |   1 +
 .../frameworks/react-webpack5/build-config.ts |   4 +
 code/frameworks/react-webpack5/package.json   |   7 +-
 code/frameworks/react-webpack5/src/theming.ts |   1 +
 .../frameworks/tanstack-react/build-config.ts |   4 +
 code/frameworks/tanstack-react/package.json   |   5 +
 code/frameworks/tanstack-react/src/theming.ts |   1 +
 .../src/automigrate/fixes/index.ts            |   2 +
 .../fixes/react-theming-imports.test.ts       | 165 ++++++++++++++++++
 .../fixes/react-theming-imports.ts            | 149 ++++++++++++++++
 code/renderers/react/build-config.ts          |   4 +
 code/renderers/react/package.json             |  12 ++
 code/renderers/react/src/index.ts             |   2 +
 code/renderers/react/src/theming.ts           |   1 +
 .../react/src/withThemeFromJSXProvider.tsx}   |  16 +-
 .../template/stories/theming.stories.tsx      |  78 +++++++++
 ...ook-addon-themes-jsx-provider-decorator.md |  21 ++-
 ...rybook-preview-auto-docs-override-theme.md |  36 ++--
 .../storybook-preview-docs-dark-theme.md      |  18 +-
 .../portable-stories-jest.mdx                 |   2 +-
 .../portable-stories-vitest.mdx               |   2 +-
 docs/configure/styling-and-css.mdx            |   2 +-
 docs/configure/user-interface/theming.mdx     |   2 +
 docs/essentials/themes.mdx                    |   2 +-
 yarn.lock                                     |   7 +
 43 files changed, 567 insertions(+), 88 deletions(-)
 create mode 100644 code/frameworks/nextjs-vite/src/theming.ts
 create mode 100644 code/frameworks/nextjs/src/theming.ts
 create mode 100644 code/frameworks/react-native-web-vite/src/theming.ts
 create mode 100644 code/frameworks/react-vite/src/theming.ts
 create mode 100644 code/frameworks/react-webpack5/src/theming.ts
 create mode 100644 code/frameworks/tanstack-react/src/theming.ts
 create mode 100644 code/lib/cli-storybook/src/automigrate/fixes/react-theming-imports.test.ts
 create mode 100644 code/lib/cli-storybook/src/automigrate/fixes/react-theming-imports.ts
 create mode 100644 code/renderers/react/src/theming.ts
 rename code/{addons/themes/src/decorators/provider.decorator.tsx => renderers/react/src/withThemeFromJSXProvider.tsx} (75%)
 create mode 100644 code/renderers/react/template/stories/theming.stories.tsx

diff --git a/MIGRATION.md b/MIGRATION.md
index 074af543fa15..57e99374e107 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -7,6 +7,7 @@
   - [Tag filtering API](#tag-filtering-api)
   - [Addon `TAB` registration removed](#addon-tab-registration-removed)
   - [`useThemeParameters` removed](#usethemeparameters-removed)
+  - [React preview code: `storybook/theming` and `withThemeFromJSXProvider` moved to the React renderer](#react-preview-code-storybooktheming-and-withthemefromjsxprovider-moved-to-the-react-renderer)
   - [`storybook dev` no longer opens a browser by default](#storybook-dev-no-longer-opens-a-browser-by-default)
   - [`viewport.defaultViewport` parameter and `responsiveViewport` removed](#viewportdefaultviewport-parameter-and-responsiveviewport-removed)
   - [`parameters.componentSubtitle` removed](#parameterscomponentsubtitle-removed)
@@ -763,6 +764,26 @@ See the [addon migration guide](docs/addons/addon-migration-guide.mdx#tab-ui-typ
 
 Keep any existing precedence between the theme parameters and your selected theme global. Rebuild your Storybook and check the decorator in both development and a served static build. See the [addon migration guide](docs/addons/addon-migration-guide.mdx#usethemeparameters-removal) for the replacement.
 
+### React preview code: `storybook/theming` and `withThemeFromJSXProvider` moved to the React renderer
+
+The `storybook` package and `@storybook/addon-themes` do not declare React as a dependency, so that non-React projects never install it. Their code that imports React (`storybook/theming` is built on Emotion, and `withThemeFromJSXProvider` renders JSX) therefore cannot be resolved from the preview under strict package layouts such as pnpm's global virtual store (`enableGlobalVirtualStore: true`), where the build fails with `Rollup failed to resolve import "react" from .../storybook/dist/theming/index.js`.
+
+Both are now published from the React renderer, which does declare React, and re-exported by every React framework package:
+
+```diff
+// .storybook/preview.tsx, *.stories.tsx
+-import { withThemeFromJSXProvider } from '@storybook/addon-themes';
+-import { ThemeProvider, themes } from 'storybook/theming';
++import { withThemeFromJSXProvider } from '@storybook/react-vite'; // or your React framework package
++import { ThemeProvider, themes } from '@storybook/react-vite/theming';
+```
+
+`@storybook/addon-themes` no longer exports `withThemeFromJSXProvider`. `withThemeByClassName`, `withThemeByDataAttribute` and `DecoratorHelpers` are unchanged.
+
+Keep `storybook/theming` in manager code (`.storybook/manager.ts`, addon panels) and in stories that render Storybook's own UI components, such as `@storybook/addon-docs/blocks`: those components read the theme from the Emotion instance inside `storybook`, which `@storybook/react/theming` does not share. For `parameters.docs.theme`, `storybook/theming/create` exports `themes` and `create` without React in any renderer.
+
+The `react-theming-imports` automigration rewrites these imports in your preview file and story files of React projects: `npx storybook automigrate react-theming-imports`.
+
 ### `storybook dev` no longer opens a browser by default
 
 Storybook now starts the development server without automatically opening it in a browser. The CLI
diff --git a/code/addons/themes/docs/api.md b/code/addons/themes/docs/api.md
index 94460e034302..9e8709f39558 100644
--- a/code/addons/themes/docs/api.md
+++ b/code/addons/themes/docs/api.md
@@ -4,10 +4,11 @@
 
 ### `withThemeFromJSXProvider`
 
-Takes your provider component, global styles, and theme(s)to wrap your stories in.
+Takes your provider component, global styles, and theme(s)to wrap your stories in. This decorator renders JSX, so it is exported by the React renderer and every React framework package rather than by this addon.
 
 ```js
-import { withThemeFromJSXProvider } from '@storybook/addon-themes';
+// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
+import { withThemeFromJSXProvider } from '@storybook/your-framework';
 
 export const decorators = [
   withThemeFromJSXProvider({
diff --git a/code/addons/themes/docs/getting-started/emotion.md b/code/addons/themes/docs/getting-started/emotion.md
index 7c44c20fc3d1..3e1cd4a0eed4 100644
--- a/code/addons/themes/docs/getting-started/emotion.md
+++ b/code/addons/themes/docs/getting-started/emotion.md
@@ -43,9 +43,8 @@ Finally, provide your theme(s) and global styles component to your stories with
 Make the following changes to your `.storybook/preview.js`:
 
 ```diff
--import { Preview } from '@storybook/your-renderer';
-+import { Preview, Renderer } from '@storybook/your-renderer';
-+import { withThemeFromJSXProvider } from '@storybook/addon-themes';
+-import { Preview } from '@storybook/your-framework';
++import { Preview, Renderer, withThemeFromJSXProvider } from '@storybook/your-framework';
 +import { ThemeProvider } from '@emotion/react';
 +import { GlobalStyles, lightTheme, darkTheme } from '../src/themes'; // Import your custom theme configs
 
diff --git a/code/addons/themes/docs/getting-started/material-ui.md b/code/addons/themes/docs/getting-started/material-ui.md
index 3c6209205161..b30c9de2e4e4 100644
--- a/code/addons/themes/docs/getting-started/material-ui.md
+++ b/code/addons/themes/docs/getting-started/material-ui.md
@@ -43,7 +43,7 @@ export default {
 These can be imported into your `.storybook/preview.js` file.
 
 ```diff
-import { Preview } from '@storybook/your-renderer';
+import { Preview } from '@storybook/your-framework';
 
 +// Load Material UI fonts
 +import '@fontsource/roboto/300.css';
@@ -66,9 +66,8 @@ While Material UI comes with a default theme that works out of the box. You can
 Make the following changes to your `.storybook/preview.js`:
 
 ```diff
--import { Preview } from '@storybook/your-renderer';
-+import { Preview, Renderer } from '@storybook/your-renderer';
-+import { withThemeFromJSXProvider } from '@storybook/addon-themes';
+-import { Preview } from '@storybook/your-framework';
++import { Preview, Renderer, withThemeFromJSXProvider } from '@storybook/your-framework';
 +import { CssBaseline, ThemeProvider } from '@mui/material';
 +import { lightTheme, darkTheme } from '../src/themes'; // Import your custom theme configs
 
diff --git a/code/addons/themes/docs/getting-started/styled-components.md b/code/addons/themes/docs/getting-started/styled-components.md
index d844dfe4af3b..2f6c92da21a8 100644
--- a/code/addons/themes/docs/getting-started/styled-components.md
+++ b/code/addons/themes/docs/getting-started/styled-components.md
@@ -43,9 +43,8 @@ Finally, provide your theme(s) and global styles component to your stories with
 Make the following changes to your `.storybook/preview.js`:
 
 ```diff
--import { Preview } from '@storybook/your-renderer';
-+import { Preview, Renderer } from '@storybook/your-renderer';
-+import { withThemeFromJSXProvider } from '@storybook/addon-themes';
+-import { Preview } from '@storybook/your-framework';
++import { Preview, Renderer, withThemeFromJSXProvider } from '@storybook/your-framework';
 +import { ThemeProvider } from 'styled-components';
 +import { GlobalStyles, lightTheme, darkTheme } from '../src/themes'; // Import your custom theme configs
 
diff --git a/code/addons/themes/src/decorators/index.ts b/code/addons/themes/src/decorators/index.ts
index ed3c429eb683..2e846066b9c3 100644
--- a/code/addons/themes/src/decorators/index.ts
+++ b/code/addons/themes/src/decorators/index.ts
@@ -1,5 +1,4 @@
 export * from './class-name.decorator.tsx';
 export * from './data-attribute.decorator.tsx';
-export * from './provider.decorator.tsx';
 
 export * as DecoratorHelpers from './helpers.ts';
diff --git a/code/addons/themes/template/stories/decorators.stories.ts b/code/addons/themes/template/stories/decorators.stories.ts
index dd1ea82127ba..b38dcfd20b0c 100644
--- a/code/addons/themes/template/stories/decorators.stories.ts
+++ b/code/addons/themes/template/stories/decorators.stories.ts
@@ -1,10 +1,6 @@
 import { global as globalThis } from '@storybook/global';
 
-import {
-  withThemeByClassName,
-  withThemeByDataAttribute,
-  withThemeFromJSXProvider,
-} from '@storybook/addon-themes';
+import { withThemeByClassName, withThemeByDataAttribute } from '@storybook/addon-themes';
 
 import { useEffect } from 'storybook/preview-api';
 
@@ -76,23 +72,3 @@ export const WithThemeByDataAttribute = {
     }),
   ],
 };
-
-export const WithThemeFromJSXProvider = {
-  globals: {},
-  decorators: [
-    withThemeFromJSXProvider({
-      defaultTheme: 'a',
-      themes: { a: { custom: 'theme-a' }, b: { custom: 'theme-b' } },
-      Provider: ({ theme, children }: any) => {
-        // this is not was a normal provider looks like obviously, but this needs to work in non-react as well
-        // the timeout is to wait for the render to complete, as it's not possible to use the useEffect hook here
-        setTimeout(() => {
-          const element = globalThis.document.querySelector('#storybook-root > *');
-          element?.classList.remove('theme-a', 'theme-b');
-          element?.classList.add(theme.custom);
-        }, 16);
-        return children;
-      },
-    }),
-  ],
-};
diff --git a/code/frameworks/nextjs-vite/build-config.ts b/code/frameworks/nextjs-vite/build-config.ts
index 154d3d90fc88..7da9d2bdb144 100644
--- a/code/frameworks/nextjs-vite/build-config.ts
+++ b/code/frameworks/nextjs-vite/build-config.ts
@@ -7,6 +7,10 @@ const config: BuildEntries = {
         exportEntries: ['.'],
         entryPoint: './src/index.ts',
       },
+      {
+        exportEntries: ['./theming'],
+        entryPoint: './src/theming.ts',
+      },
       {
         exportEntries: ['./preview'],
         entryPoint: './src/preview.tsx',
diff --git a/code/frameworks/nextjs-vite/package.json b/code/frameworks/nextjs-vite/package.json
index e3f936c8ef2d..48e8f38e0027 100644
--- a/code/frameworks/nextjs-vite/package.json
+++ b/code/frameworks/nextjs-vite/package.json
@@ -70,6 +70,11 @@
       "code": "./src/export-mocks/router/index.ts",
       "default": "./dist/export-mocks/router/index.js"
     },
+    "./theming": {
+      "types": "./dist/theming.d.ts",
+      "code": "./src/theming.ts",
+      "default": "./dist/theming.js"
+    },
     "./vite-plugin": {
       "types": "./dist/vite-plugin/index.d.ts",
       "code": "./src/vite-plugin/index.ts",
diff --git a/code/frameworks/nextjs-vite/src/theming.ts b/code/frameworks/nextjs-vite/src/theming.ts
new file mode 100644
index 000000000000..43d64228b35d
--- /dev/null
+++ b/code/frameworks/nextjs-vite/src/theming.ts
@@ -0,0 +1 @@
+export * from '@storybook/react/theming';
diff --git a/code/frameworks/nextjs/build-config.ts b/code/frameworks/nextjs/build-config.ts
index 2e473d52935a..e2abefcfcc07 100644
--- a/code/frameworks/nextjs/build-config.ts
+++ b/code/frameworks/nextjs/build-config.ts
@@ -7,6 +7,10 @@ const config: BuildEntries = {
         exportEntries: ['.'],
         entryPoint: './src/index.ts',
       },
+      {
+        exportEntries: ['./theming'],
+        entryPoint: './src/theming.ts',
+      },
       {
         exportEntries: ['./preview'],
         entryPoint: './src/preview.tsx',
diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json
index 46fd32d0e065..d44c926fd651 100644
--- a/code/frameworks/nextjs/package.json
+++ b/code/frameworks/nextjs/package.json
@@ -76,7 +76,12 @@
       "default": "./dist/export-mocks/router/index.js"
     },
     "./rsc/server-only": "./dist/rsc/server-only.js",
-    "./storybook-nextjs-font-loader": "./dist/font/webpack/loader/storybook-nextjs-font-loader.js"
+    "./storybook-nextjs-font-loader": "./dist/font/webpack/loader/storybook-nextjs-font-loader.js",
+    "./theming": {
+      "types": "./dist/theming.d.ts",
+      "code": "./src/theming.ts",
+      "default": "./dist/theming.js"
+    }
   },
   "files": [
     "dist/**/*",
diff --git a/code/frameworks/nextjs/src/theming.ts b/code/frameworks/nextjs/src/theming.ts
new file mode 100644
index 000000000000..43d64228b35d
--- /dev/null
+++ b/code/frameworks/nextjs/src/theming.ts
@@ -0,0 +1 @@
+export * from '@storybook/react/theming';
diff --git a/code/frameworks/react-native-web-vite/build-config.ts b/code/frameworks/react-native-web-vite/build-config.ts
index f262983447e2..8ab4d796fe17 100644
--- a/code/frameworks/react-native-web-vite/build-config.ts
+++ b/code/frameworks/react-native-web-vite/build-config.ts
@@ -7,6 +7,10 @@ const config: BuildEntries = {
         exportEntries: ['.'],
         entryPoint: './src/index.ts',
       },
+      {
+        exportEntries: ['./theming'],
+        entryPoint: './src/theming.ts',
+      },
     ],
     node: [
       {
diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json
index 5825fa2feeb7..ec49cd836305 100644
--- a/code/frameworks/react-native-web-vite/package.json
+++ b/code/frameworks/react-native-web-vite/package.json
@@ -40,6 +40,11 @@
     },
     "./package.json": "./package.json",
     "./preset": "./dist/preset.js",
+    "./theming": {
+      "types": "./dist/theming.d.ts",
+      "code": "./src/theming.ts",
+      "default": "./dist/theming.js"
+    },
     "./vite-plugin": "./dist/vite-plugin.js"
   },
   "files": [
diff --git a/code/frameworks/react-native-web-vite/src/theming.ts b/code/frameworks/react-native-web-vite/src/theming.ts
new file mode 100644
index 000000000000..43d64228b35d
--- /dev/null
+++ b/code/frameworks/react-native-web-vite/src/theming.ts
@@ -0,0 +1 @@
+export * from '@storybook/react/theming';
diff --git a/code/frameworks/react-vite/build-config.ts b/code/frameworks/react-vite/build-config.ts
index 9a8c825f1386..df1390b09e7e 100644
--- a/code/frameworks/react-vite/build-config.ts
+++ b/code/frameworks/react-vite/build-config.ts
@@ -7,6 +7,10 @@ const config: BuildEntries = {
         exportEntries: ['.'],
         entryPoint: './src/index.ts',
       },
+      {
+        exportEntries: ['./theming'],
+        entryPoint: './src/theming.ts',
+      },
     ],
     node: [
       {
diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json
index bd96769e7acd..7521d976e833 100644
--- a/code/frameworks/react-vite/package.json
+++ b/code/frameworks/react-vite/package.json
@@ -41,6 +41,11 @@
       "types": "./dist/preset.d.ts",
       "code": "./src/preset.ts",
       "default": "./dist/preset.js"
+    },
+    "./theming": {
+      "types": "./dist/theming.d.ts",
+      "code": "./src/theming.ts",
+      "default": "./dist/theming.js"
     }
   },
   "files": [
diff --git a/code/frameworks/react-vite/src/theming.ts b/code/frameworks/react-vite/src/theming.ts
new file mode 100644
index 000000000000..43d64228b35d
--- /dev/null
+++ b/code/frameworks/react-vite/src/theming.ts
@@ -0,0 +1 @@
+export * from '@storybook/react/theming';
diff --git a/code/frameworks/react-webpack5/build-config.ts b/code/frameworks/react-webpack5/build-config.ts
index 314dd9463b7f..b1271a957150 100644
--- a/code/frameworks/react-webpack5/build-config.ts
+++ b/code/frameworks/react-webpack5/build-config.ts
@@ -7,6 +7,10 @@ const config: BuildEntries = {
         exportEntries: ['.'],
         entryPoint: './src/index.ts',
       },
+      {
+        exportEntries: ['./theming'],
+        entryPoint: './src/theming.ts',
+      },
     ],
     node: [
       {
diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json
index df7d0ce126cc..d5c46f6ebb9d 100644
--- a/code/frameworks/react-webpack5/package.json
+++ b/code/frameworks/react-webpack5/package.json
@@ -37,7 +37,12 @@
       "default": "./dist/node/index.js"
     },
     "./package.json": "./package.json",
-    "./preset": "./dist/preset.js"
+    "./preset": "./dist/preset.js",
+    "./theming": {
+      "types": "./dist/theming.d.ts",
+      "code": "./src/theming.ts",
+      "default": "./dist/theming.js"
+    }
   },
   "files": [
     "dist/**/*",
diff --git a/code/frameworks/react-webpack5/src/theming.ts b/code/frameworks/react-webpack5/src/theming.ts
new file mode 100644
index 000000000000..43d64228b35d
--- /dev/null
+++ b/code/frameworks/react-webpack5/src/theming.ts
@@ -0,0 +1 @@
+export * from '@storybook/react/theming';
diff --git a/code/frameworks/tanstack-react/build-config.ts b/code/frameworks/tanstack-react/build-config.ts
index 398558367a6d..e738eb52713f 100644
--- a/code/frameworks/tanstack-react/build-config.ts
+++ b/code/frameworks/tanstack-react/build-config.ts
@@ -7,6 +7,10 @@ const config: BuildEntries = {
         exportEntries: ['.'],
         entryPoint: './src/index.ts',
       },
+      {
+        exportEntries: ['./theming'],
+        entryPoint: './src/theming.ts',
+      },
       {
         exportEntries: ['./preview'],
         entryPoint: './src/preview.tsx',
diff --git a/code/frameworks/tanstack-react/package.json b/code/frameworks/tanstack-react/package.json
index 4ff63adb6ef9..354625330c0f 100644
--- a/code/frameworks/tanstack-react/package.json
+++ b/code/frameworks/tanstack-react/package.json
@@ -64,6 +64,11 @@
       "types": "./dist/export-mocks/start-storage-context.d.ts",
       "code": "./src/export-mocks/start-storage-context.ts",
       "default": "./dist/export-mocks/start-storage-context.js"
+    },
+    "./theming": {
+      "types": "./dist/theming.d.ts",
+      "code": "./src/theming.ts",
+      "default": "./dist/theming.js"
     }
   },
   "files": [
diff --git a/code/frameworks/tanstack-react/src/theming.ts b/code/frameworks/tanstack-react/src/theming.ts
new file mode 100644
index 000000000000..43d64228b35d
--- /dev/null
+++ b/code/frameworks/tanstack-react/src/theming.ts
@@ -0,0 +1 @@
+export * from '@storybook/react/theming';
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/index.ts b/code/lib/cli-storybook/src/automigrate/fixes/index.ts
index 9655a9edf518..48ecc5fe33fb 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/index.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/index.ts
@@ -10,6 +10,7 @@ import { componentSubtitle } from './component-subtitle.ts';
 import { eslintPlugin } from './eslint-plugin.ts';
 import { docgenServer } from './docgen-server.ts';
 import { nextjsToNextjsVite } from './nextjs-to-nextjs-vite.ts';
+import { reactThemingImports } from './react-theming-imports.ts';
 import { reactViteToTanstackReact } from './react-vite-to-tanstack-react.ts';
 import { removeChangeDetectionFlag } from './remove-change-detection-flag.ts';
 import { removeExperimentalReview } from './remove-experimental-review.ts';
@@ -50,6 +51,7 @@ export const allFixes: Fix[] = [
   removeChangeDetectionFlag,
   skills,
   docgenServer,
+  reactThemingImports,
 ];
 
 export const commandFixes: CommandFix[] = [csfFactories];
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/react-theming-imports.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/react-theming-imports.test.ts
new file mode 100644
index 000000000000..0d94f04ee4cb
--- /dev/null
+++ b/code/lib/cli-storybook/src/automigrate/fixes/react-theming-imports.test.ts
@@ -0,0 +1,165 @@
+import { readFile, writeFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { formatExistingFile, JsPackageManager } from 'storybook/internal/common';
+
+import { fs, vol } from 'memfs';
+
+import { checkFix, runFix } from '../helpers/fix-test-utils.ts';
+import { reactThemingImports, rewriteReactThemingImports } from './react-theming-imports.ts';
+
+vi.mock('node:fs/promises', { spy: true });
+vi.mock('storybook/internal/common', { spy: true });
+
+const previewConfigPath = resolve('.storybook/preview.tsx');
+const storyPath = resolve('src/Button.stories.tsx');
+const options = {
+  packageManager: vi.mocked(JsPackageManager.prototype),
+  mainConfig: { stories: [], framework: '@storybook/react-vite' },
+  mainConfigPath: resolve('.storybook/main.ts'),
+  configDir: resolve('.storybook'),
+  storybookVersion: '11.0.0',
+  previewConfigPath,
+  storiesPaths: [storyPath],
+};
+
+describe('rewriteReactThemingImports', () => {
+  const target = '@storybook/react-vite';
+
+  it('points storybook/theming at the framework theming entry and keeps the quote style', () => {
+    expect(
+      rewriteReactThemingImports(
+        `import { ThemeProvider, themes } from 'storybook/theming';\nimport { create } from "storybook/theming/create";`,
+        target
+      )
+    ).toBe(
+      `import { ThemeProvider, themes } from '@storybook/react-vite/theming';\nimport { create } from "storybook/theming/create";`
+    );
+  });
+
+  it('moves withThemeFromJSXProvider to the framework and leaves the other addon decorators', () => {
+    expect(
+      rewriteReactThemingImports(
+        `import addonThemes, { withThemeByClassName, withThemeFromJSXProvider, type ProviderStrategyConfiguration } from '@storybook/addon-themes';`,
+        target
+      )
+    ).toBe(
+      [
+        `import addonThemes, { withThemeByClassName } from '@storybook/addon-themes';`,
+        `import { withThemeFromJSXProvider, type ProviderStrategyConfiguration } from '@storybook/react-vite';`,
+      ].join('\n')
+    );
+  });
+
+  it('retargets an addon import that only has moved specifiers', () => {
+    expect(
+      rewriteReactThemingImports(
+        `import type { ProviderStrategyConfiguration } from '@storybook/addon-themes';`,
+        target
+      )
+    ).toBe(`import type { ProviderStrategyConfiguration } from '@storybook/react-vite';`);
+  });
+
+  it('leaves files that render Storybook UI blocks on storybook/theming', () => {
+    const code = [
+      `import { ArgsTable } from '@storybook/addon-docs/blocks';`,
+      `import { ThemeProvider } from 'storybook/theming';`,
+    ].join('\n');
+
+    expect(rewriteReactThemingImports(code, target)).toBeNull();
+  });
+
+  it('returns null when nothing needs to move', () => {
+    expect(
+      rewriteReactThemingImports(
+        `import { withThemeByDataAttribute } from '@storybook/addon-themes';`,
+        target
+      )
+    ).toBeNull();
+  });
+});
+
+describe('react-theming-imports', () => {
+  beforeEach(() => {
+    vol.reset();
+    vi.mocked(readFile).mockImplementation(fs.promises.readFile as typeof readFile);
+    vi.mocked(writeFile).mockImplementation(fs.promises.writeFile as typeof writeFile);
+    vi.mocked(formatExistingFile).mockImplementation(async (_path, source) => source);
+  });
+
+  afterEach(() => {
+    vi.mocked(readFile).mockRestore();
+    vi.mocked(writeFile).mockRestore();
+  });
+
+  it('does not apply to non-React projects', async () => {
+    vol.fromJSON({
+      [previewConfigPath]: `import { themes } from 'storybook/theming';\nexport default {};`,
+      [storyPath]: 'export default {};',
+    });
+
+    expect(
+      await checkFix(reactThemingImports, {
+        ...options,
+        mainConfig: { stories: [], framework: '@storybook/vue3-vite' },
+      })
+    ).toBeNull();
+  });
+
+  it('does not apply when no preview or story file imports the moved modules', async () => {
+    vol.fromJSON({
+      [previewConfigPath]: `import { create } from 'storybook/theming/create';\nexport default {};`,
+      [storyPath]: 'export default {};',
+    });
+
+    expect(await checkFix(reactThemingImports, options)).toBeNull();
+  });
+
+  it('falls back to @storybook/react for React frameworks without a theming entry', async () => {
+    vol.fromJSON({
+      [previewConfigPath]: `import { themes } from 'storybook/theming';\nexport default {};`,
+      [storyPath]: 'export default {};',
+    });
+
+    expect(
+      await checkFix(reactThemingImports, {
+        ...options,
+        mainConfig: { stories: [], framework: 'storybook-react-rsbuild' },
+      })
+    ).toEqual({ target: '@storybook/react' });
+  });
+
+  it('rewrites the preview and story files but not the manager', async () => {
+    const managerPath = resolve('.storybook/manager.ts');
+    const manager = `import { addons } from 'storybook/manager-api';\nimport { themes } from 'storybook/theming';\naddons.setConfig({ theme: themes.dark });`;
+    vol.fromJSON({
+      [previewConfigPath]: [
+        `import { withThemeFromJSXProvider } from '@storybook/addon-themes';`,
+        `import { ThemeProvider, themes } from 'storybook/theming';`,
+        `export default { decorators: [withThemeFromJSXProvider({ Provider: ThemeProvider, themes })] };`,
+      ].join('\n'),
+      [managerPath]: manager,
+      [storyPath]: `import { themes } from 'storybook/theming';\nexport default { parameters: { docs: { theme: themes.dark } } };`,
+    });
+
+    const failures = await runFix(reactThemingImports, {
+      ...options,
+      result: { target: '@storybook/react-vite' },
+    });
+
+    expect(failures).toEqual([]);
+    expect(fs.readFileSync(previewConfigPath, 'utf8')).toBe(
+      [
+        `import { withThemeFromJSXProvider } from '@storybook/react-vite';`,
+        `import { ThemeProvider, themes } from '@storybook/react-vite/theming';`,
+        `export default { decorators: [withThemeFromJSXProvider({ Provider: ThemeProvider, themes })] };`,
+      ].join('\n')
+    );
+    expect(fs.readFileSync(storyPath, 'utf8')).toBe(
+      `import { themes } from '@storybook/react-vite/theming';\nexport default { parameters: { docs: { theme: themes.dark } } };`
+    );
+    expect(fs.readFileSync(managerPath, 'utf8')).toBe(manager);
+  });
+});
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/react-theming-imports.ts b/code/lib/cli-storybook/src/automigrate/fixes/react-theming-imports.ts
new file mode 100644
index 000000000000..eb31ead7aa6a
--- /dev/null
+++ b/code/lib/cli-storybook/src/automigrate/fixes/react-theming-imports.ts
@@ -0,0 +1,149 @@
+import { parser, types as t } from 'storybook/internal/babel';
+
+import picocolors from 'picocolors';
+
+import { getFrameworkPackageName, getRendererName } from '../helpers/mainConfigFile.ts';
+import { isAtOrPastVersion } from '../helpers/versionBoundary.ts';
+import type { Fix } from '../types.ts';
+
+const THEMING = 'storybook/theming';
+const ADDON_THEMES = '@storybook/addon-themes';
+const MOVED_FROM_ADDON = ['withThemeFromJSXProvider', 'ProviderStrategyConfiguration'];
+const FRAMEWORKS_WITH_THEMING_ENTRY = [
+  '@storybook/react-vite',
+  '@storybook/react-webpack5',
+  '@storybook/nextjs',
+  '@storybook/nextjs-vite',
+  '@storybook/react-native-web-vite',
+  '@storybook/tanstack-react',
+];
+// Stories that render Storybook's own UI must share its emotion instance, so they keep `storybook/theming`.
+const RENDERS_STORYBOOK_UI =
+  /['"](?:@storybook\/addon-docs\/blocks|storybook\/internal\/components)['"]/;
+
+export interface ReactThemingImportsResult {
+  target: string;
+}
+
+type Edit = { start: number; end: number; text: string };
+
+const parse = (code: string) => {
+  for (const plugins of [['typescript', 'jsx'], ['typescript']] as const) {
+    try {
+      return parser.parse(code, { sourceType: 'module', plugins: [...plugins] });
+    } catch {}
+  }
+  return undefined;
+};
+
+const importedName = (specifier: t.ImportSpecifier) =>
+  t.isIdentifier(specifier.imported) ? specifier.imported.name : specifier.imported.value;
+
+const quoteOf = (source: t.StringLiteral) => (source.extra?.raw as string | undefined)?.[0] ?? "'";
+
+const printImport = (
+  node: t.ImportDeclaration,
+  specifiers: string[],
+  source: string,
+  quote: string
+) => {
+  const kind = node.importKind === 'type' ? 'import type' : 'import';
+  return `${kind} ${specifiers.join(', ')} from ${quote}${source}${quote};`;
+};
+
+const splitAddonImport = (code: string, node: t.ImportDeclaration, target: string): Edit[] => {
+  const moved = node.specifiers.filter(
+    (specifier): specifier is t.ImportSpecifier =>
+      t.isImportSpecifier(specifier) && MOVED_FROM_ADDON.includes(importedName(specifier))
+  );
+  if (moved.length === 0) {
+    return [];
+  }
+  const quote = quoteOf(node.source);
+  const text = (specifier: t.Node) => code.slice(specifier.start!, specifier.end!);
+  const movedImport = printImport(node, [`{ ${moved.map(text).join(', ')} }`], target, quote);
+  if (moved.length === node.specifiers.length) {
+    return [
+      { start: node.source.start!, end: node.source.end!, text: `${quote}${target}${quote}` },
+    ];
+  }
+  const remaining = node.specifiers.filter(
+    (specifier) => !moved.includes(specifier as t.ImportSpecifier)
+  );
+  const named = remaining.filter((specifier) => t.isImportSpecifier(specifier)).map(text);
+  const others = remaining.filter((specifier) => !t.isImportSpecifier(specifier)).map(text);
+  const keptImport = printImport(
+    node,
+    [...others, ...(named.length > 0 ? [`{ ${named.join(', ')} }`] : [])],
+    ADDON_THEMES,
+    quote
+  );
+  return [{ start: node.start!, end: node.end!, text: `${keptImport}\n${movedImport}` }];
+};
+
+export const rewriteReactThemingImports = (code: string, target: string): string | null => {
+  const ast = parse(code);
+  if (!ast) {
+    return null;
+  }
+  const keepTheming = RENDERS_STORYBOOK_UI.test(code);
+  const edits: Edit[] = [];
+  for (const node of ast.program.body) {
+    if (!t.isImportDeclaration(node)) {
+      continue;
+    }
+    if (node.source.value === THEMING && !keepTheming) {
+      const quote = quoteOf(node.source);
+      edits.push({
+        start: node.source.start!,
+        end: node.source.end!,
+        text: `${quote}${target}/theming${quote}`,
+      });
+    }
+    if (node.source.value === ADDON_THEMES) {
+      edits.push(...splitAddonImport(code, node, target));
+    }
+  }
+  if (edits.length === 0) {
+    return null;
+  }
+  return edits
+    .sort((a, b) => b.start - a.start)
+    .reduce(
+      (result, { start, end, text }) => result.slice(0, start) + text + result.slice(end),
+      code
+    );
+};
+
+export const reactThemingImports: Fix<ReactThemingImportsResult> = {
+  id: 'react-theming-imports',
+  link: 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-preview-code-storybooktheming-and-withthemefromjsxprovider-moved-to-the-react-renderer',
+
+  async check({ mainConfig, storybookVersion }) {
+    if (!isAtOrPastVersion(storybookVersion, '11.0.0') || getRendererName(mainConfig) !== 'react') {
+      return null;
+    }
+    const framework = getFrameworkPackageName(mainConfig);
+    return {
+      target:
+        framework && FRAMEWORKS_WITH_THEMING_ENTRY.includes(framework)
+          ? framework
+          : '@storybook/react',
+    };
+  },
+
+  prompt(result) {
+    const target = result?.target ?? '@storybook/react';
+    return `In preview and story files, import ${picocolors.cyan('withThemeFromJSXProvider')} from ${picocolors.cyan(target)} instead of ${picocolors.cyan(ADDON_THEMES)}, and ${picocolors.cyan(`${target}/theming`)} instead of ${picocolors.cyan(THEMING)}. Manager files keep ${picocolors.cyan(THEMING)}.`;
+  },
+
+  transform: ({ result }) => [
+    {
+      filter: {
+        kind: ['preview', 'story'],
+        code: /storybook\/theming|withThemeFromJSXProvider|ProviderStrategyConfiguration/,
+      },
+      handler: (code) => rewriteReactThemingImports(code, result.target),
+    },
+  ],
+};
diff --git a/code/renderers/react/build-config.ts b/code/renderers/react/build-config.ts
index 38bdf25ff3b0..8d2b01010130 100644
--- a/code/renderers/react/build-config.ts
+++ b/code/renderers/react/build-config.ts
@@ -11,6 +11,10 @@ const config: BuildEntries = {
         exportEntries: ['./preview'],
         entryPoint: './src/preview.tsx',
       },
+      {
+        exportEntries: ['./theming'],
+        entryPoint: './src/theming.ts',
+      },
       {
         exportEntries: ['./entry-preview'],
         entryPoint: './src/entry-preview.tsx',
diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json
index bdb8bf47d3ff..465f214c118a 100644
--- a/code/renderers/react/package.json
+++ b/code/renderers/react/package.json
@@ -37,6 +37,11 @@
       "types": "./dist/preview.d.ts",
       "code": "./src/preview.tsx",
       "default": "./dist/preview.js"
+    },
+    "./theming": {
+      "types": "./dist/theming.d.ts",
+      "code": "./src/theming.ts",
+      "default": "./dist/theming.js"
     }
   },
   "files": [
@@ -53,6 +58,10 @@
     "react-docgen-typescript": "^2.2.2"
   },
   "devDependencies": {
+    "@emotion/cache": "^11.14.0",
+    "@emotion/is-prop-valid": "^1.3.1",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@types/babel-plugin-react-docgen": "^4.2.3",
     "@types/escodegen": "^0.0.6",
     "@types/estree": "^1.0.6",
@@ -64,12 +73,15 @@
     "acorn-walk": "^7.2.0",
     "babel-plugin-react-docgen": "^4.2.1",
     "comment-parser": "^1.4.1",
+    "deep-object-diff": "^1.1.0",
     "empathic": "^2.0.0",
     "es-toolkit": "^1.43.0",
     "escodegen": "^2.1.0",
     "expect-type": "^0.15.0",
     "html-tags": "^3.1.0",
     "memfs": "^4.11.1",
+    "memoizerific": "^1.11.3",
+    "polished": "^4.2.2",
     "prop-types": "^15.7.2",
     "react-element-to-jsx-string": "patch:react-element-to-jsx-string@npm%3A@7rulnik/react-element-to-jsx-string@15.0.1#~/.yarn/patches/@7rulnik-react-element-to-jsx-string-npm-15.0.1-e53b67c4b3.patch",
     "require-from-string": "^2.0.2",
diff --git a/code/renderers/react/src/index.ts b/code/renderers/react/src/index.ts
index 76487f79d541..b6c984f015ee 100644
--- a/code/renderers/react/src/index.ts
+++ b/code/renderers/react/src/index.ts
@@ -6,4 +6,6 @@ export * from './portable-stories.tsx';
 
 export * from './preview.tsx';
 
+export * from './withThemeFromJSXProvider.tsx';
+
 export type { ReactTypes } from './types.ts';
diff --git a/code/renderers/react/src/theming.ts b/code/renderers/react/src/theming.ts
new file mode 100644
index 000000000000..2ebd0dbafc4d
--- /dev/null
+++ b/code/renderers/react/src/theming.ts
@@ -0,0 +1 @@
+export * from '../../../core/src/theming/index.ts';
diff --git a/code/addons/themes/src/decorators/provider.decorator.tsx b/code/renderers/react/src/withThemeFromJSXProvider.tsx
similarity index 75%
rename from code/addons/themes/src/decorators/provider.decorator.tsx
rename to code/renderers/react/src/withThemeFromJSXProvider.tsx
index 8b11a80f734b..e6c0084a7926 100644
--- a/code/addons/themes/src/decorators/provider.decorator.tsx
+++ b/code/renderers/react/src/withThemeFromJSXProvider.tsx
@@ -4,8 +4,11 @@ import type { DecoratorFunction, Renderer } from 'storybook/internal/types';
 
 import { useMemo } from 'storybook/preview-api';
 
-import { PARAM_KEY } from '../constants.ts';
-import { initializeThemeState, pluckThemeFromContext } from './helpers.ts';
+import { PARAM_KEY } from '../../../addons/themes/src/constants.ts';
+import {
+  initializeThemeState,
+  pluckThemeFromContext,
+} from '../../../addons/themes/src/decorators/helpers.ts';
 
 type Theme = Record<string, any>;
 type ThemeMap = Record<string, Theme>;
@@ -17,9 +20,10 @@ export interface ProviderStrategyConfiguration {
   themes?: ThemeMap;
 }
 
-const pluckThemeFromKeyPairTuple = ([_, themeConfig]: [string, Theme]): Theme => themeConfig;
-
-// TODO check with @kasperpeulen: change the types so they can be correctly inferred from context e.g. <Story extends (...args: any[]) => any>
+/**
+ * Wrap every story in a theme provider component and let `@storybook/addon-themes` switch the theme
+ * from the toolbar.
+ */
 export const withThemeFromJSXProvider = <TRenderer extends Renderer = any>({
   Provider,
   GlobalStyles,
@@ -39,7 +43,7 @@ export const withThemeFromJSXProvider = <TRenderer extends Renderer = any>({
       const selectedThemeName = themeOverride || selected || initialTheme;
       const pairs = Object.entries(themes);
 
-      return pairs.length === 1 ? pluckThemeFromKeyPairTuple(pairs[0]) : themes[selectedThemeName];
+      return pairs.length === 1 ? pairs[0][1] : themes[selectedThemeName];
     }, [selected, themeOverride]);
 
     if (!Provider) {
diff --git a/code/renderers/react/template/stories/theming.stories.tsx b/code/renderers/react/template/stories/theming.stories.tsx
new file mode 100644
index 000000000000..b5d9f826fcc8
--- /dev/null
+++ b/code/renderers/react/template/stories/theming.stories.tsx
@@ -0,0 +1,78 @@
+import React, { createContext, useContext } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { withThemeFromJSXProvider } from '@storybook/react';
+import { ThemeProvider, convert, styled, themes, useTheme } from '@storybook/react/theming';
+
+import { expect } from 'storybook/test';
+
+const PaletteContext = createContext({ name: 'none', background: 'transparent' });
+
+const PaletteProvider = ({
+  theme,
+  children,
+}: {
+  theme: { name: string; background: string };
+  children: React.ReactNode;
+}) => <PaletteContext.Provider value={theme}>{children}</PaletteContext.Provider>;
+
+const Swatch = () => {
+  const palette = useContext(PaletteContext);
+  return (
+    <p data-testid="swatch" style={{ background: palette.background, padding: 16 }}>
+      {palette.name}
+    </p>
+  );
+};
+
+const Panel = styled.div(({ theme }) => ({
+  background: theme.background.content,
+  color: theme.color.defaultText,
+  padding: 16,
+}));
+
+const ThemeName = () => {
+  const theme = useTheme();
+  return <Panel data-testid="panel">{theme.base}</Panel>;
+};
+
+const meta = {
+  title: 'theming',
+  parameters: {
+    chromatic: { disableSnapshot: true },
+    themes: { disable: false },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const WithThemeFromJSXProvider: StoryObj = {
+  decorators: [
+    withThemeFromJSXProvider({
+      defaultTheme: 'b',
+      themes: {
+        a: { name: 'theme-a', background: 'white' },
+        b: { name: 'theme-b', background: 'black' },
+      },
+      Provider: PaletteProvider,
+    }),
+  ],
+  render: () => <Swatch />,
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId('swatch')).toHaveTextContent('theme-b');
+  },
+};
+
+export const StorybookThemeProvider: StoryObj = {
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={convert(themes.dark)}>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+  render: () => <ThemeName />,
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId('panel')).toHaveTextContent('dark');
+  },
+};
diff --git a/docs/_snippets/storybook-addon-themes-jsx-provider-decorator.md b/docs/_snippets/storybook-addon-themes-jsx-provider-decorator.md
index e438d97fd52f..b1329d578ec5 100644
--- a/docs/_snippets/storybook-addon-themes-jsx-provider-decorator.md
+++ b/docs/_snippets/storybook-addon-themes-jsx-provider-decorator.md
@@ -1,5 +1,6 @@
-```js filename=".storybook/preview.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
-import { withThemeFromJSXProvider } from '@storybook/addon-themes';
+```js filename=".storybook/preview.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
+import { withThemeFromJSXProvider } from '@storybook/your-framework';
 
 import { createGlobalStyle, ThemeProvider } from 'styled-components';
 import { lightTheme, darkTheme } from '../src/themes';
@@ -27,11 +28,9 @@ const preview = {
 export default preview;
 ```
 
-```ts filename=".storybook/preview.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
-// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
-import { Preview, Renderer } from '@storybook/your-framework';
-
-import { withThemeFromJSXProvider } from '@storybook/addon-themes';
+```ts filename=".storybook/preview.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
+import { Preview, Renderer, withThemeFromJSXProvider } from '@storybook/your-framework';
 
 import { createGlobalStyle, ThemeProvider } from 'styled-components';
 import { lightTheme, darkTheme } from '../src/themes';
@@ -61,7 +60,7 @@ export default preview;
 
 ```ts filename=".storybook/preview.tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 // Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
-import { Renderer, definePreview } from '@storybook/your-framework';
+import { Renderer, definePreview, withThemeFromJSXProvider } from '@storybook/your-framework';
 
 import addonThemes from '@storybook/addon-themes';
 
@@ -78,7 +77,7 @@ const GlobalStyles = createGlobalStyle`
 export default definePreview({
   addons: [addonThemes()],
   decorators: [
-    addonThemes.withThemeFromJSXProvider<Renderer>({
+    withThemeFromJSXProvider<Renderer>({
       themes: {
         light: lightTheme,
         dark: darkTheme,
@@ -95,7 +94,7 @@ export default definePreview({
 
 ```js filename=".storybook/preview.jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 // Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
-import { definePreview } from '@storybook/your-framework';
+import { definePreview, withThemeFromJSXProvider } from '@storybook/your-framework';
 
 import addonThemes from '@storybook/addon-themes';
 
@@ -112,7 +111,7 @@ const GlobalStyles = createGlobalStyle`
 export default definePreview({
   addons: [addonThemes()],
   decorators: [
-    addonThemes.withThemeFromJSXProvider({
+    withThemeFromJSXProvider({
       themes: {
         light: lightTheme,
         dark: darkTheme,
diff --git a/docs/_snippets/storybook-preview-auto-docs-override-theme.md b/docs/_snippets/storybook-preview-auto-docs-override-theme.md
index c9e8dee5fba3..b2693588409d 100644
--- a/docs/_snippets/storybook-preview-auto-docs-override-theme.md
+++ b/docs/_snippets/storybook-preview-auto-docs-override-theme.md
@@ -1,5 +1,5 @@
 ```js filename=".storybook/preview.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
-import { themes, ensure } from 'storybook/theming';
+import { themes } from 'storybook/theming/create';
 
 export default {
   parameters: {
@@ -10,7 +10,7 @@ export default {
       },
     },
     docs: {
-      theme: ensure(themes.dark), // The replacement theme to use
+      theme: themes.dark, // The replacement theme to use
     },
   },
 };
@@ -19,7 +19,7 @@ export default {
 ```ts filename=".storybook/preview.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
-import { themes, ensure } from 'storybook/theming';
+import { themes } from 'storybook/theming/create';
 
 const preview: Preview = {
   parameters: {
@@ -30,7 +30,7 @@ const preview: Preview = {
       },
     },
     docs: {
-      theme: ensure(themes.dark), // The replacement theme to use
+      theme: themes.dark, // The replacement theme to use
     },
   },
 };
@@ -42,7 +42,7 @@ export default preview;
 // Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
 import { definePreview } from '@storybook/your-framework';
 import addonDocs from '@storybook/addon-docs';
-import { ensure, themes } from 'storybook/theming';
+import { themes } from 'storybook/theming/create';
 
 export default definePreview({
   addons: [addonDocs()],
@@ -54,7 +54,7 @@ export default definePreview({
       },
     },
     docs: {
-      theme: ensure(themes.dark), // The replacement theme to use
+      theme: themes.dark, // The replacement theme to use
     },
   },
 });
@@ -66,7 +66,7 @@ export default definePreview({
 // Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
 import { definePreview } from '@storybook/your-framework';
 import addonDocs from '@storybook/addon-docs';
-import { ensure, themes } from 'storybook/theming';
+import { themes } from 'storybook/theming/create';
 
 export default definePreview({
   addons: [addonDocs()],
@@ -78,7 +78,7 @@ export default definePreview({
       },
     },
     docs: {
-      theme: ensure(themes.dark), // The replacement theme to use
+      theme: themes.dark, // The replacement theme to use
     },
   },
 });
@@ -87,7 +87,7 @@ export default definePreview({
 ```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
 import { definePreview } from '@storybook/vue3-vite';
 import addonDocs from '@storybook/addon-docs';
-import { ensure, themes } from 'storybook/theming';
+import { themes } from 'storybook/theming/create';
 
 export default definePreview({
   addons: [addonDocs()],
@@ -99,7 +99,7 @@ export default definePreview({
       },
     },
     docs: {
-      theme: ensure(themes.dark), // The replacement theme to use
+      theme: themes.dark, // The replacement theme to use
     },
   },
 });
@@ -110,7 +110,7 @@ export default definePreview({
 ```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
 import { definePreview } from '@storybook/vue3-vite';
 import addonDocs from '@storybook/addon-docs';
-import { ensure, themes } from 'storybook/theming';
+import { themes } from 'storybook/theming/create';
 
 export default definePreview({
   addons: [addonDocs()],
@@ -122,7 +122,7 @@ export default definePreview({
       },
     },
     docs: {
-      theme: ensure(themes.dark), // The replacement theme to use
+      theme: themes.dark, // The replacement theme to use
     },
   },
 });
@@ -131,7 +131,7 @@ export default definePreview({
 ```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
 import { definePreview } from '@storybook/angular';
 import addonDocs from '@storybook/addon-docs';
-import { ensure, themes } from 'storybook/theming';
+import { themes } from 'storybook/theming/create';
 
 export default definePreview({
   addons: [addonDocs()],
@@ -143,7 +143,7 @@ export default definePreview({
       },
     },
     docs: {
-      theme: ensure(themes.dark), // The replacement theme to use
+      theme: themes.dark, // The replacement theme to use
     },
   },
 });
@@ -152,7 +152,7 @@ export default definePreview({
 ```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
 import { definePreview } from '@storybook/web-components-vite';
 import addonDocs from '@storybook/addon-docs';
-import { ensure, themes } from 'storybook/theming';
+import { themes } from 'storybook/theming/create';
 
 export default definePreview({
   addons: [addonDocs()],
@@ -164,7 +164,7 @@ export default definePreview({
       },
     },
     docs: {
-      theme: ensure(themes.dark), // The replacement theme to use
+      theme: themes.dark, // The replacement theme to use
     },
   },
 });
@@ -175,7 +175,7 @@ export default definePreview({
 ```js filename=".storybook/preview.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
 import { definePreview } from '@storybook/web-components-vite';
 import addonDocs from '@storybook/addon-docs';
-import { ensure, themes } from 'storybook/theming';
+import { themes } from 'storybook/theming/create';
 
 export default definePreview({
   addons: [addonDocs()],
@@ -187,7 +187,7 @@ export default definePreview({
       },
     },
     docs: {
-      theme: ensure(themes.dark), // The replacement theme to use
+      theme: themes.dark, // The replacement theme to use
     },
   },
 });
diff --git a/docs/_snippets/storybook-preview-docs-dark-theme.md b/docs/_snippets/storybook-preview-docs-dark-theme.md
index 458243ed5215..425916cdb8fa 100644
--- a/docs/_snippets/storybook-preview-docs-dark-theme.md
+++ b/docs/_snippets/storybook-preview-docs-dark-theme.md
@@ -1,5 +1,5 @@
 ```js filename=".storybook/preview.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
-import { themes } from 'storybook/theming';
+import { themes } from 'storybook/theming/create';
 
 export default {
   parameters: {
@@ -14,7 +14,7 @@ export default {
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
-import { themes } from 'storybook/theming';
+import { themes } from 'storybook/theming/create';
 
 const preview: Preview = {
   parameters: {
@@ -32,7 +32,7 @@ export default preview;
 import { definePreview } from '@storybook/your-framework';
 import addonDocs from '@storybook/addon-docs';
 
-import { themes } from 'storybook/theming';
+import { themes } from 'storybook/theming/create';
 
 export default definePreview({
   addons: [addonDocs()],
@@ -51,7 +51,7 @@ export default definePreview({
 import { definePreview } from '@storybook/your-framework';
 import addonDocs from '@storybook/addon-docs';
 
-import { themes } from 'storybook/theming';
+import { themes } from 'storybook/theming/create';
 
 export default definePreview({
   addons: [addonDocs()],
@@ -67,7 +67,7 @@ export default definePreview({
 import { definePreview } from '@storybook/vue3-vite';
 import addonDocs from '@storybook/addon-docs';
 
-import { themes } from 'storybook/theming';
+import { themes } from 'storybook/theming/create';
 
 export default definePreview({
   addons: [addonDocs()],
@@ -85,7 +85,7 @@ export default definePreview({
 import { definePreview } from '@storybook/vue3-vite';
 import addonDocs from '@storybook/addon-docs';
 
-import { themes } from 'storybook/theming';
+import { themes } from 'storybook/theming/create';
 
 export default definePreview({
   addons: [addonDocs()],
@@ -101,7 +101,7 @@ export default definePreview({
 import { definePreview } from '@storybook/angular';
 import addonDocs from '@storybook/addon-docs';
 
-import { themes } from 'storybook/theming';
+import { themes } from 'storybook/theming/create';
 
 export default definePreview({
   addons: [addonDocs()],
@@ -117,7 +117,7 @@ export default definePreview({
 import { definePreview } from '@storybook/web-components-vite';
 import addonDocs from '@storybook/addon-docs';
 
-import { themes } from 'storybook/theming';
+import { themes } from 'storybook/theming/create';
 
 export default definePreview({
   addons: [addonDocs()],
@@ -135,7 +135,7 @@ export default definePreview({
 import { definePreview } from '@storybook/web-components-vite';
 import addonDocs from '@storybook/addon-docs';
 
-import { themes } from 'storybook/theming';
+import { themes } from 'storybook/theming/create';
 
 export default definePreview({
   addons: [addonDocs()],
diff --git a/docs/api/portable-stories/portable-stories-jest.mdx b/docs/api/portable-stories/portable-stories-jest.mdx
index 9c7c483f0cc5..93518c931516 100644
--- a/docs/api/portable-stories/portable-stories-jest.mdx
+++ b/docs/api/portable-stories/portable-stories-jest.mdx
@@ -179,7 +179,7 @@ These are the configurations needed in the setup file:
 
 Sometimes a story can require an addon's [decorator](../../writing-stories/decorators.mdx) or [loader](../../writing-stories/loaders.mdx) to render properly. For example, an addon can apply a decorator that wraps your story in the necessary router context. In this case, you must include that addon's `preview` export in the project annotations set. See `addonAnnotations` in the example above.
 
-Note: If the addon doesn't automatically apply the decorator or loader itself, but instead exports them for you to apply manually in `.storybook/preview.*` (e.g. using `withThemeFromJSXProvider` from [@storybook/addon-themes](https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#withthemefromjsxprovider)), then you do not need to do anything else. They are already included in the `previewAnnotations` in the example above.
+Note: If the addon doesn't automatically apply the decorator or loader itself, but instead exports them for you to apply manually in `.storybook/preview.*` (e.g. using the [`withThemeFromJSXProvider` decorator](https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#withthemefromjsxprovider) from your React framework package), then you do not need to do anything else. They are already included in the `previewAnnotations` in the example above.
 
 If you need to configure Testing Library's `render` or use a different render function, please let us know in [this discussion](https://github.com/storybookjs/storybook/discussions/28532) so we can learn more about your needs.
 
diff --git a/docs/api/portable-stories/portable-stories-vitest.mdx b/docs/api/portable-stories/portable-stories-vitest.mdx
index 0bfa37174a28..4e7f5e21bfe5 100644
--- a/docs/api/portable-stories/portable-stories-vitest.mdx
+++ b/docs/api/portable-stories/portable-stories-vitest.mdx
@@ -192,7 +192,7 @@ These are the configurations needed in the setup file:
 
 Sometimes a story can require an addon's [decorator](../../writing-stories/decorators.mdx) or [loader](../../writing-stories/loaders.mdx) to render properly. For example, an addon can apply a decorator that wraps your story in the necessary router context. In this case, you must include that addon's `preview` export in the project annotations set. See `addonAnnotations` in the example above.
 
-Note: If the addon doesn't automatically apply the decorator or loader itself, but instead exports them for you to apply manually in `.storybook/preview.*` (e.g. using `withThemeFromJSXProvider` from [@storybook/addon-themes](https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#withthemefromjsxprovider)), then you do not need to do anything else. They are already included in the `previewAnnotations` in the example above.
+Note: If the addon doesn't automatically apply the decorator or loader itself, but instead exports them for you to apply manually in `.storybook/preview.*` (e.g. using the [`withThemeFromJSXProvider` decorator](https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#withthemefromjsxprovider) from your React framework package), then you do not need to do anything else. They are already included in the `previewAnnotations` in the example above.
 
 If you need to configure Testing Library's `render` or use a different render function, please let us know in [this discussion](https://github.com/storybookjs/storybook/discussions/28532) so we can learn more about your needs.
 
diff --git a/docs/configure/styling-and-css.mdx b/docs/configure/styling-and-css.mdx
index 7476ae884b38..d9fc21996f03 100644
--- a/docs/configure/styling-and-css.mdx
+++ b/docs/configure/styling-and-css.mdx
@@ -91,7 +91,7 @@ If you're using Webpack and want to use Sass or Less, you'll need some extra con
 
 ## CSS-in-JS
 
-CSS-in-JS libraries are designed to use basic JavaScript, and they often work in Storybook without any extra configuration. Some libraries expect components to render in a specific rendering “context” (for example, to provide themes), which can be accomplished with `@storybook/addon-themes`'s [`withThemeFromJSXProvider` decorator](https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#withthemefromjsxprovider).
+CSS-in-JS libraries are designed to use basic JavaScript, and they often work in Storybook without any extra configuration. Some libraries expect components to render in a specific rendering “context” (for example, to provide themes), which can be accomplished with the [`withThemeFromJSXProvider` decorator](https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#withthemefromjsxprovider) exported by your React framework package and driven by `@storybook/addon-themes`.
 
 ## Adding webfonts
 
diff --git a/docs/configure/user-interface/theming.mdx b/docs/configure/user-interface/theming.mdx
index cde06e877803..33a7feef571f 100644
--- a/docs/configure/user-interface/theming.mdx
+++ b/docs/configure/user-interface/theming.mdx
@@ -30,6 +30,8 @@ Here's how you'd specify the same theme for docs in [`.storybook/preview.js`](..
 
 <CodeSnippets path="storybook-preview-docs-dark-theme.md" />
 
+Preview code imports the built-in themes from `storybook/theming/create`, which does not depend on React. The full `storybook/theming` module is for manager code; React projects that need its Emotion exports (`ThemeProvider`, `styled`, `ensure`, …) inside stories or decorators import them from their framework package instead, for example `@storybook/react-vite/theming`.
+
 Continue to read if you want to learn how to create your theme.
 
 ## Create a theme quickstart
diff --git a/docs/essentials/themes.mdx b/docs/essentials/themes.mdx
index 03cbe6da955a..cf09290c44aa 100644
--- a/docs/essentials/themes.mdx
+++ b/docs/essentials/themes.mdx
@@ -15,7 +15,7 @@ To make your themes accessible to your stories, `@storybook/addon-themes` expose
 
 ### JSX providers
 
-For libraries that expose themes to components through providers, such as [Material UI](https://storybook.js.org/recipes/@mui/material/), [Styled-components](https://storybook.js.org/recipes/styled-components/), and [Emotion](https://storybook.js.org/recipes/@emotion/styled/), use the `withThemeFromJSXProvider`.
+For libraries that expose themes to components through providers, such as [Material UI](https://storybook.js.org/recipes/@mui/material/), [Styled-components](https://storybook.js.org/recipes/styled-components/), and [Emotion](https://storybook.js.org/recipes/@emotion/styled/), use the `withThemeFromJSXProvider`. Because it renders JSX, this decorator is exported by your React framework package (for example `@storybook/react-vite`) rather than by the addon.
 
 <CodeSnippets path="storybook-addon-themes-jsx-provider-decorator.md" />
 
diff --git a/yarn.lock b/yarn.lock
index 65d54913d50a..65af76582431 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10885,6 +10885,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/react@workspace:code/renderers/react"
   dependencies:
+    "@emotion/cache": "npm:^11.14.0"
+    "@emotion/is-prop-valid": "npm:^1.3.1"
+    "@emotion/react": "npm:^11.14.0"
+    "@emotion/styled": "npm:^11.14.0"
     "@storybook/global": "npm:^5.0.0"
     "@types/babel-plugin-react-docgen": "npm:^4.2.3"
     "@types/escodegen": "npm:^0.0.6"
@@ -10897,12 +10901,15 @@ __metadata:
     acorn-walk: "npm:^7.2.0"
     babel-plugin-react-docgen: "npm:^4.2.1"
     comment-parser: "npm:^1.4.1"
+    deep-object-diff: "npm:^1.1.0"
     empathic: "npm:^2.0.0"
     es-toolkit: "npm:^1.43.0"
     escodegen: "npm:^2.1.0"
     expect-type: "npm:^0.15.0"
     html-tags: "npm:^3.1.0"
     memfs: "npm:^4.11.1"
+    memoizerific: "npm:^1.11.3"
+    polished: "npm:^4.2.2"
     prop-types: "npm:^15.7.2"
     react-docgen: "npm:^8.0.2"
     react-docgen-typescript: "npm:^2.2.2"

From b03f532a6b8314e94d4c9fc04bf3f6661d396167 Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Fri, 16 Oct 2026 16:19:47 +0200
Subject: [PATCH 106/326] docs: update doc

---
 ...nents-custom-elements-manifest-generate.md | 11 ----
 .../web-components-vite-framework-options.md  | 12 ----
 .../frameworks/web-components-vite.mdx        | 65 +++++++------------
 3 files changed, 25 insertions(+), 63 deletions(-)
 delete mode 100644 docs/_snippets/web-components-custom-elements-manifest-generate.md

diff --git a/docs/_snippets/web-components-custom-elements-manifest-generate.md b/docs/_snippets/web-components-custom-elements-manifest-generate.md
deleted file mode 100644
index 6d875aa466cb..000000000000
--- a/docs/_snippets/web-components-custom-elements-manifest-generate.md
+++ /dev/null
@@ -1,11 +0,0 @@
-```shell renderer="web-components" packageManager="npm"
-npx @custom-elements-manifest/analyzer analyze --globs 'src/**/*.ts'
-```
-
-```shell renderer="web-components" packageManager="yarn"
-yarn dlx @custom-elements-manifest/analyzer analyze --globs 'src/**/*.ts'
-```
-
-```shell renderer="web-components" packageManager="pnpm"
-pnpm dlx @custom-elements-manifest/analyzer analyze --globs 'src/**/*.ts'
-```
diff --git a/docs/_snippets/web-components-vite-framework-options.md b/docs/_snippets/web-components-vite-framework-options.md
index 804f2713ea3d..9074d294e1ea 100644
--- a/docs/_snippets/web-components-vite-framework-options.md
+++ b/docs/_snippets/web-components-vite-framework-options.md
@@ -4,9 +4,6 @@ export default {
     name: '@storybook/web-components-vite',
     options: {
       customElementsManifest: '../custom-elements.json',
-      docgen: {
-        typeProperty: 'parsedType',
-      },
     },
   },
 };
@@ -20,9 +17,6 @@ const config: StorybookConfig = {
     name: '@storybook/web-components-vite',
     options: {
       customElementsManifest: '../custom-elements.json',
-      docgen: {
-        typeProperty: 'parsedType',
-      },
     },
   },
 };
@@ -38,9 +32,6 @@ export default defineMain({
     name: '@storybook/web-components-vite',
     options: {
       customElementsManifest: '../custom-elements.json',
-      docgen: {
-        typeProperty: 'parsedType',
-      },
     },
   },
 });
@@ -56,9 +47,6 @@ export default defineMain({
     name: '@storybook/web-components-vite',
     options: {
       customElementsManifest: '../custom-elements.json',
-      docgen: {
-        typeProperty: 'parsedType',
-      },
     },
   },
 });
diff --git a/docs/get-started/frameworks/web-components-vite.mdx b/docs/get-started/frameworks/web-components-vite.mdx
index d9de8b4f7846..d975d088ee9c 100644
--- a/docs/get-started/frameworks/web-components-vite.mdx
+++ b/docs/get-started/frameworks/web-components-vite.mdx
@@ -42,59 +42,46 @@ You will find the output in the configured `outputDir` (default is `storybook-st
 
 ## Configure
 
-Storybook for Web components with Vite works without extra configuration. It reads your elements from your sources or a Custom Elements Manifest you provide. The sections below cover the available setup paths and framework options.
+Storybook for Web components with Vite works without extra configuration. It reads your elements from your sources. The sections below cover what you get by default, the optional manifest escape hatch, and the framework options.
 
 ### Component documentation
 
-Docgen reads your elements from your sources, or from a Custom Elements Manifest you provide. You choose the generator: Storybook's built-in one reads your sources with no setup, or you provide a manifest produced by the tool you prefer, such as `@custom-elements-manifest/analyzer` or the `@wc-toolkit/cem-generator` CLI. Your JSDoc comments on elements, attributes, properties, events, slots and CSS API reach [automatic documentation](../../writing-docs/autodocs.mdx) and the [controls](../../essentials/controls.mdx) table.
+Docgen reads your elements from your sources, with no setup. Your JSDoc comments on elements, attributes, properties, events, slots and CSS API reach [automatic documentation](../../writing-docs/autodocs.mdx) and the [controls](../../essentials/controls.mdx) table. If your project already produces a Custom Elements Manifest, you can hand it to Storybook instead; see [Providing your own manifest](#providing-your-own-manifest).
 
-Two paths provide component documentation, and which one you get depends on a single feature flag:
-
-|                       | [`docgenServer`](../../api/main-config/main-config-features.mdx) on, the default                             | flag off                                                              |
-| --------------------- | ------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------- |
-| Reads your elements   | on the Storybook server, from your sources or from a manifest file                                           | in the browser, from a manifest you import in `.storybook/preview.ts` |
-| Configure with        | nothing, or `framework.options.customElementsManifest` / `package.json#customElements` to provide a manifest | `setCustomElementsManifest()` in the preview                          |
-| Powers                | controls, autodocs, code snippets, and the [components manifest](../../ai/manifests.mdx)                     | controls and autodocs                                                 |
-| Updates while running | yes, your sources and the manifest file are watched                                                          | no, restart or reload after regenerating the manifest                 |
-
-Server-side extraction is what you get unless you turn the flag off with `features: { docgenServer: false }`. The flag-off column is the path projects created before Storybook 11 use.
+Docgen runs on the Storybook server and powers controls, autodocs, code snippets, and the [components manifest](../../ai/manifests.mdx). Your sources and any manifest file are watched, so edits show up while Storybook runs.
 
 Attributes, properties, events, slots, CSS custom properties, CSS parts and CSS states from the manifest become argTypes. Event, slot, part and state arg keys are suffixed, such as `my-change-event`, `default-slot`, `panel-part` and `active-state`, so they never collide with attributes. CSS custom properties keep their `--name` key.
 
-#### Choosing a manifest generator
+For docgen to attach to a story, `meta.component` must be the tag name string, such as `component: 'demo-card'`. Metas without `component` get no docgen, and their stories show the story source in the Code panel.
 
-Any tool that writes a Custom Elements Manifest (`schemaVersion` 1.x or 2.x) works. Reasons to provide your own manifest instead of using the built-in generator: you already ship one with your package, you want your library's own analyzer plugins (FAST, Stencil, Catalyst), or you want the same manifest in Storybook and in your build.
+#### Built-in generator
 
-For example, with `@custom-elements-manifest/analyzer`:
+Nothing to set up. Storybook's built-in generator reads the elements your stories import from your TypeScript or JavaScript sources. It understands Lit and plain `HTMLElement` elements and ships with `@storybook/web-components`.
 
-<CodeSnippets path="web-components-custom-elements-manifest-generate.md" />
+For each tag, Storybook searches your sources in this order:
 
-The analyzer writes the same manifest format for every library. Pass the plugin flag that matches how your elements declare their attributes: `--litelement` for Lit, `--fast` for FAST, `--stencil` for Stencil, `--catalyst` for Catalyst, and no flag for elements built on `HTMLElement` directly. Without the matching flag, decorator-declared attributes such as Lit's `@property()` are missing from the manifest, and Storybook cannot pair those args with attributes. Add the command to your `package.json` scripts so it runs before `storybook dev`, or run the analyzer in `--watch` mode next to Storybook.
+1. The file that defined the tag last time.
+2. The story file and the files reachable through its imports.
+3. The preview file and the files reachable through its imports.
+4. The tsconfig files whose sources contain the tag as a string literal.
 
-The analyzer writes `custom-elements.json` in the current directory. If your `package.json` has a `customElements` field that points at that file, server-side docgen uses it without more configuration.
+Storybook selects the tsconfig for each story file, so monorepos and project references work. For a JavaScript project without a tsconfig, it scans only the story's folder.
 
-#### Server-side extraction
+Editing an element updates its controls and descriptions while Storybook runs. If the generator or TypeScript fails to load, Storybook warns once and manifest docgen keeps working.
 
-Nothing to set up. Storybook's built-in generator reads the elements your stories import from your TypeScript or JavaScript sources. It understands Lit and plain `HTMLElement` elements and ships with `@storybook/web-components`.
+#### Providing your own manifest
 
-To use a manifest from another generator instead, point Storybook at the file:
+You do not need a manifest. Provide one only when you already ship one with your package, when you want your library's own analyzer plugins (FAST, Stencil, Catalyst), or when you want the same manifest in Storybook and in your build. Any tool that writes a Custom Elements Manifest (`schemaVersion` 1.x or 2.x) works.
 
-<CodeSnippets path="web-components-main-config-custom-elements-manifest.md" />
+Point Storybook at the file:
 
-Storybook looks up your elements in this order:
+<CodeSnippets path="web-components-main-config-custom-elements-manifest.md" />
 
-1. Manifests you provide:
-   1. `framework.options.customElementsManifest`, relative to the Storybook config directory.
-   2. The `customElements` field in the nearest `package.json`, relative to that `package.json`.
-2. Sources, through the built-in generator, for tags your manifests do not declare:
-   1. The file that defined the tag last time.
-   2. The story file and the files reachable through its imports.
-   3. The preview file and the files reachable through its imports.
-   4. The tsconfig files whose sources contain the tag as a string literal.
+Manifests you provide win over your sources. Storybook reads `framework.options.customElementsManifest`, relative to the Storybook config directory, or else the `customElements` field in the nearest `package.json`, relative to that `package.json`. Tags your manifests do not declare still come from the built-in generator. The manifest file is watched, so regenerating it updates Storybook while it runs.
 
-Storybook selects the tsconfig for each story file, so monorepos and project references work. For a JavaScript project without a tsconfig, it scans only the story's folder.
+Generate the manifest with the plugin that matches how your elements declare their attributes, such as `--litelement` when running `@custom-elements-manifest/analyzer` on Lit elements. Without it, decorator-declared attributes such as Lit's `@property()` are missing from the manifest, and Storybook cannot pair those args with attributes.
 
-Editing an element updates its controls and descriptions while Storybook runs. If the generator or TypeScript fails to load, Storybook warns once and manifest docgen keeps working.
+#### Warnings
 
 If Storybook cannot read complete metadata, it reports the problem in the Controls table for the affected component and in the tools CLI (`npx storybook tools docs show`). These messages do not fail the build.
 
@@ -106,8 +93,6 @@ The tag-not-found message includes `and preview file <preview>` only when a prev
 
 If a watched manifest becomes invalid after Storybook has loaded a valid version, Storybook keeps the last valid version and reports a warning that ends with `; using the last valid version`.
 
-For docgen to attach to a story, `meta.component` must be the tag name string, such as `component: 'demo-card'`. Metas without `component` get no docgen, and their stories show the story source in the Code panel.
-
 #### Story snippets
 
 With server-side docgen, Storybook generates snippets for the Code panel and the `docs-show` MCP tool from the story file. Args stories become one element with attributes from args: booleans print bare, objects print as JSON, CSS custom properties go into `style`, parts and states go into a leading `<style>` block, `*-slot` args become children, and listeners become a trailing `<script>` with `addEventListener` calls.
@@ -154,8 +139,10 @@ Listener args add a script after the element:
 ```html
 <lit-events value="changed"></lit-events>
 <script>
-  const element = document.querySelector('lit-events');
-  element.addEventListener('my-change', () => {});
+  {
+    const host = document.currentScript.previousElementSibling;
+    host.addEventListener('my-change', () => {});
+  }
 </script>
 ```
 
@@ -165,8 +152,6 @@ Storybook reports a warning above the snippet instead of printing values it cann
 
 ## Known limitations
 
-These apply to the default server-side extraction path.
-
 ### Code snippets do not follow your controls
 
 The snippets shown in autodocs and the Code panel are generated from your story's source, so they show the story as you wrote it. Changing a value in the controls table updates the rendered component but not the snippet next to it.
@@ -227,7 +212,7 @@ Type: `string | string[]`
 
 Default: the `customElements` field of your `package.json`, else none; elements are generated from sources
 
-Path or paths to Custom Elements Manifest files, relative to the Storybook config directory. Use it to bring a manifest from the generator of your choice; elements it does not declare are still read from your sources. This option is ignored when `docgenServer` is off.
+Optional. Path or paths to Custom Elements Manifest files, relative to the Storybook config directory. Use it to bring a manifest from the generator of your choice; elements it does not declare are still read from your sources.
 
 #### `builder`
 

From 5a15faad67e341f69418e381f2ac75e2f568746b Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 16 Oct 2026 16:21:14 +0200
Subject: [PATCH 107/326] fix(csf-tools): keep template literals intact when
 printing members into a new object

`printMembers`, `groupMembers` and the missing-parent block of `CsfObject.insert`
re-indented continuation lines with a plain `split('\n').join('\n  ')`, which also
indented the lines inside template literals and continued strings. All three now
print through `printMembers`, which re-indents with the template-safe `reindent`.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/CsfObject.ts          |  5 +--
 code/core/src/csf-tools/estree/editor.test.ts | 44 +++++++++++++++++--
 code/core/src/csf-tools/estree/editor.ts      |  6 +--
 3 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index 291ff28b6fb7..fbba35911fdf 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -17,6 +17,7 @@ import {
   keySource,
   prependMembers,
   printKey,
+  printMembers,
   printValue,
   removeMembers,
   renameKey,
@@ -846,9 +847,7 @@ class CsfObjectEditor implements CsfObject {
         // Comments travel with moved members; a line comment needs the object to span lines.
         const multiline = members.some((member) => member.text.includes('\n'));
         const block = (texts: string[]) =>
-          multiline
-            ? `{\n${texts.map((text) => `  ${text.split('\n').join('\n  ')},`).join('\n')}\n}`
-            : `{ ${texts.join(', ')} }`;
+          multiline ? printMembers(texts) : `{ ${texts.join(', ')} }`;
         const nested = missing
           .slice(1)
           .reverse()
diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index cdfb4a8324b7..44391cc30f45 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -7,12 +7,14 @@ import MagicString from 'magic-string';
 import { dedent } from 'ts-dedent';
 
 import { loadCsf, printCsf } from '../CsfFile.ts';
+import { parseExpression } from '../CsfObject.ts';
 import type { E } from './ast.ts';
 import { parseModule } from './ast.ts';
 import {
   SourceEditor,
   appendToList,
   arrayList,
+  printMembers,
   reindent,
   removeFromList,
   removeStatement,
@@ -221,12 +223,48 @@ describe('multi-line members', () => {
     expect(printCsf(csf).code).toContain(`showNav: {\n      value: false,\n    },`);
   });
 
-  it('keeps the value of a template literal set into a multi-line object', () => {
+  it('keeps a template literal when grouping it into a new key', () => {
+    const csf = parse('export default {\n  previewHead: `<style>\n.a {}\n</style>`,\n  b: 1,\n};');
+    const [meta] = csf.objects({ stories: false });
+    expect(meta.group(['ui'], ['previewHead'])).toEqual({ ok: true, changed: true });
+    expect(printCsf(csf).code).toBe(
+      'export default {\n  ui: {\n    previewHead: `<style>\n.a {}\n</style>`,\n  },\n  b: 1,\n};'
+    );
+    const [again] = parse(printCsf(csf).code).objects({ stories: false });
+    expect(again.getValue(['ui', 'previewHead'])).toBe('<style>\n.a {}\n</style>');
+  });
+
+  it('keeps a template literal set into a missing parent', () => {
     const csf = parse('export default {\n  parameters: {\n    a: 1,\n  },\n};');
     const [meta] = csf.objects({ stories: false });
-    meta.set(['parameters', 'code'], { code: 'line1\nline2' });
+    meta.set(['globals', 'code'], parseExpression('`line1\nline2`'));
+    expect(printCsf(csf).code).toBe(
+      'export default {\n  parameters: {\n    a: 1,\n  },\n  globals: {\n    code: `line1\nline2`,\n  },\n};'
+    );
     const [again] = parse(printCsf(csf).code).objects({ stories: false });
-    expect(again.getValue(['parameters', 'code', 'code'])).toBe('line1\nline2');
+    expect(again.getValue(['globals', 'code'])).toBe('line1\nline2');
+  });
+
+  it('keeps a template literal moved into a missing parent', () => {
+    const csf = parse('export default {\n  parameters: {\n    code: `line1\nline2`,\n  },\n};');
+    const [meta] = csf.objects({ stories: false });
+    expect(meta.move(['parameters', 'code'], ['globals', 'code'])).toEqual({
+      ok: true,
+      changed: true,
+    });
+    expect(printCsf(csf).code).toBe(
+      'export default {\n  globals: {\n    code: `line1\nline2`,\n  },\n};'
+    );
+    const [again] = parse(printCsf(csf).code).objects({ stories: false });
+    expect(again.getValue(['globals', 'code'])).toBe('line1\nline2');
+  });
+});
+
+describe('printMembers', () => {
+  it('leaves the template literal of a function value alone', () => {
+    expect(printMembers(['fn: () => {\n  return `a\nb`;\n}'])).toBe(
+      '{\n  fn: () => {\n    return `a\nb`;\n  },\n}'
+    );
   });
 });
 
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index d4827b00cab9..c9185e2591b3 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -224,7 +224,7 @@ export const printString = (value: string, quote: string) => {
 export const printMembers = (members: string[]) =>
   members.length === 0
     ? '{}'
-    : `{\n${members.map((member) => `  ${member.split('\n').join('\n  ')},`).join('\n')}\n}`;
+    : `{\n${members.map((member) => `  ${reindent(member, '', '  ')},`).join('\n')}\n}`;
 
 /** Print a JS value as source. `expanded` lays objects out one member per line. */
 export const printValue = (
@@ -678,9 +678,7 @@ export const groupMembers = (
   removeMembers(editor, object, members.slice(1));
   const before = editor.code.slice(0, members[0].start);
   const indent = /[ \t]*$/.exec(before.slice(before.lastIndexOf('\n') + 1))![0];
-  const inner = multiline
-    ? `{\n${texts.map((text) => `${indent}  ${text.split('\n').join(`\n${indent}  `)},`).join('\n')}\n${indent}}`
-    : `{ ${texts.join(', ')} }`;
+  const inner = multiline ? reindent(printMembers(texts), '', indent) : `{ ${texts.join(', ')} }`;
   // Leading comments of the first member move into the group with it.
   const start = separatorBefore(editor.code, object, first);
   const lead = multiline ? `\n${indent}` : ' ';

From 15f38f259f6a22f5186f148f1d7dcbe7274469dd Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 16 Oct 2026 16:22:38 +0200
Subject: [PATCH 108/326] fix(csf-tools): detect the Flow pragma in docblocks
 and after a license header

Flow reads `@flow` from any comment in the file header, so `/** @flow */`,
multi-line docblocks and `// @flow` after a license comment are the forms
Flow's docs and React Native templates emit. Those still failed with a
generic "Unexpected token" instead of the message that names Flow.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/ast.test.ts | 33 ++++++++++++++++++++++
 code/core/src/csf-tools/estree/ast.ts      |  8 ++++--
 2 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 code/core/src/csf-tools/estree/ast.test.ts

diff --git a/code/core/src/csf-tools/estree/ast.test.ts b/code/core/src/csf-tools/estree/ast.test.ts
new file mode 100644
index 000000000000..78104040b926
--- /dev/null
+++ b/code/core/src/csf-tools/estree/ast.test.ts
@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest';
+
+import { parseModule } from './ast.ts';
+
+describe('parseModule', () => {
+  const flowBody = 'const x: { +readOnly: number } = {};';
+
+  it.each([
+    ['// @flow', `// @flow\n${flowBody}`],
+    ['/* @flow */', `/* @flow */\n${flowBody}`],
+    ['/** @flow */', `/** @flow */\n${flowBody}`],
+    ['/* @flow strict */', `/* @flow strict */\n${flowBody}`],
+    ['a multi-line docblock', `/**\n * Button stories.\n *\n * @flow\n */\n${flowBody}`],
+    [
+      '// @flow after a license comment',
+      `/*\n * Copyright (c) Example Inc.\n * MIT license.\n */\n\n// @flow\n${flowBody}`,
+    ],
+  ])('names Flow when a file with %s fails to parse', (_, code) => {
+    expect(() => parseModule(code)).toThrow('Flow syntax is no longer supported');
+  });
+
+  it('reports the parse error when @flow only appears after the first statement', () => {
+    expect(() => parseModule(`import x from 'x';\n// @flow\n${flowBody}`)).toThrow(
+      /^Unexpected token/
+    );
+  });
+
+  it('names the file in the Flow error', () => {
+    expect(() => parseModule(`// @flow\n${flowBody}`, 'Button.stories.js')).toThrow(
+      'in Button.stories.js'
+    );
+  });
+});
diff --git a/code/core/src/csf-tools/estree/ast.ts b/code/core/src/csf-tools/estree/ast.ts
index 64c90bb349f5..782044529f72 100644
--- a/code/core/src/csf-tools/estree/ast.ts
+++ b/code/core/src/csf-tools/estree/ast.ts
@@ -79,7 +79,7 @@ export const parseModule = (code: string, fileName?: string): ParsedModule => {
   if ('module' in attempt) {
     return attempt.module;
   }
-  throw FLOW_PRAGMA.test(code)
+  throw hasFlowPragma(code)
     ? new EstreeParseError(
         `Flow syntax is no longer supported, parse failed with: ${attempt.error.message}`,
         fileName,
@@ -88,7 +88,11 @@ export const parseModule = (code: string, fileName?: string): ParsedModule => {
     : attempt.error;
 };
 
-const FLOW_PRAGMA = /^\s*(?:\/\/|\/\*)\s*@flow\b/;
+// The comments before the first statement: a license header, a docblock or `// @flow` lines.
+const LEADING_COMMENTS = /^(?:\s*(?:\/\/[^\n]*|\/\*[\s\S]*?\*\/))*/;
+
+// Flow reads its pragma from any comment in the file's header, including `/** @flow */` docblocks.
+const hasFlowPragma = (code: string) => /@flow\b/.test(LEADING_COMMENTS.exec(code)?.[0] ?? '');
 
 const parseUnnamed = (code: string): ParseAttempt => {
   const tsx = parseWith(code, undefined, 'tsx');

From ab905427c48e7af392df0353bb0353150a2404e6 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 16 Oct 2026 16:22:41 +0200
Subject: [PATCH 109/326] fix(csf-tools): keep the carriage return out of CRLF
 code frames

`codeFrame` split on `\n`, so on a CRLF file the quoted line ended with a
stray `\r` inside the error message.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/ast.test.ts | 16 +++++++++++++++-
 code/core/src/csf-tools/estree/ast.ts      |  2 +-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/code/core/src/csf-tools/estree/ast.test.ts b/code/core/src/csf-tools/estree/ast.test.ts
index 78104040b926..5535459bb29f 100644
--- a/code/core/src/csf-tools/estree/ast.test.ts
+++ b/code/core/src/csf-tools/estree/ast.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { parseModule } from './ast.ts';
+import { codeFrame, parseModule } from './ast.ts';
 
 describe('parseModule', () => {
   const flowBody = 'const x: { +readOnly: number } = {};';
@@ -31,3 +31,17 @@ describe('parseModule', () => {
     );
   });
 });
+
+describe('codeFrame', () => {
+  it('points at the column of the index', () => {
+    expect(codeFrame('Button.stories.ts', 'const a = 1;\nconst b = ;', 23)).toBe(
+      'Button.stories.ts: (2:10)\n> 2 | const b = ;\n    |           ^'
+    );
+  });
+
+  it('leaves the carriage return of a CRLF line out of the frame', () => {
+    expect(codeFrame(undefined, 'const a = 1;\r\nconst b = ;\r\n', 24)).toBe(
+      '(2:10)\n> 2 | const b = ;\n    |           ^'
+    );
+  });
+});
diff --git a/code/core/src/csf-tools/estree/ast.ts b/code/core/src/csf-tools/estree/ast.ts
index 782044529f72..50601cfcda9e 100644
--- a/code/core/src/csf-tools/estree/ast.ts
+++ b/code/core/src/csf-tools/estree/ast.ts
@@ -144,7 +144,7 @@ export const locationOf = (code: string, start: number, end: number): SourceLoca
 /** `file: (line:column)` and the offending line with a marker under `index`, as Babel printed it. */
 export const codeFrame = (fileName: string | undefined, code: string, index: number) => {
   const { line, column } = locationOf(code, index, index).start;
-  const text = code.split('\n')[line - 1] ?? '';
+  const text = (code.split('\n')[line - 1] ?? '').replace(/\r$/, '');
   const gutter = ' '.repeat(String(line).length);
   return `${fileName ? `${fileName}: ` : ''}(${line}:${column})\n> ${line} | ${text}\n  ${gutter} | ${' '.repeat(column)}^`;
 };

From 0f26ac7c36f40998225c1d7e0a6b0e67995e7865 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 16 Oct 2026 16:24:25 +0200
Subject: [PATCH 110/326] fix(addon-vitest): insert template statements before
 a statement sharing the import line

The missing imports and `const dirname` were inserted at the end of the last
import's line. When `export default defineConfig(...)` shared that line they
landed after the config, which then read `dirname` before its declaration,
and a block comment starting on that line had them inserted inside it.

Insert them on the line after the import and the comments sharing its line,
or before a statement that shares it, falling back to the end of the file
only when no statement follows.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../src/updateVitestFile.statements.test.ts   | 123 +++++++++++++++++-
 code/addons/vitest/src/updateVitestFile.ts    |  46 +++++--
 2 files changed, 150 insertions(+), 19 deletions(-)

diff --git a/code/addons/vitest/src/updateVitestFile.statements.test.ts b/code/addons/vitest/src/updateVitestFile.statements.test.ts
index cea521cc64f8..298ba716010a 100644
--- a/code/addons/vitest/src/updateVitestFile.statements.test.ts
+++ b/code/addons/vitest/src/updateVitestFile.statements.test.ts
@@ -19,18 +19,127 @@ const template = dedent`
   });
 `;
 
+const update = (code: string) => {
+  const target = new SourceEditor(code);
+  expect(updateConfigFile(template, target)).toBe(true);
+  const result = target.toString();
+  expect(() => new SourceEditor(result)).not.toThrow();
+  return result;
+};
+
 describe('updateConfigFile statements', () => {
-  it('inserts the template statements on their own lines after the last import', () => {
-    const target = new SourceEditor(
+  it('inserts the template statements before a statement sharing the last import line', () => {
+    const code = update(
       `import react from '@vitejs/plugin-react'; const x = 1\nexport default defineConfig({ test: {} })\n`
     );
 
-    expect(updateConfigFile(template, target)).toBe(true);
+    expect(code).toMatchInlineSnapshot(`
+      "import react from '@vitejs/plugin-react';
+      import { fileURLToPath } from 'node:url';
+      import { dirname } from 'node:path';
+      // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+      const dirname = fileURLToPath(new URL('.', import.meta.url));
+      const x = 1
+      export default defineConfig({ test: {
+        projects: [{
+      extends: true,
+      test: {},
+      }, { extends: true, test: { name: 'storybook' } }],
+      } })
+      "
+    `);
+  });
+
+  it('inserts the template statements before export default on the last import line', () => {
+    const code = update(
+      `import react from '@vitejs/plugin-react'; export default defineConfig({ test: {} })`
+    );
+
+    expect(code.indexOf('const dirname')).toBeLessThan(code.indexOf('export default'));
+    expect(code).toMatchInlineSnapshot(`
+      "import react from '@vitejs/plugin-react';
+      import { fileURLToPath } from 'node:url';
+      import { dirname } from 'node:path';
+      // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+      const dirname = fileURLToPath(new URL('.', import.meta.url));
+      export default defineConfig({ test: {
+        projects: [{
+      extends: true,
+      test: {},
+      }, { extends: true, test: { name: 'storybook' } }],
+      } })"
+    `);
+  });
+
+  it('inserts the template statements after a block comment starting on the last import line', () => {
+    const code = update(
+      `import react from '@vitejs/plugin-react'; /* a\n b */\nexport default defineConfig({ test: {} })\n`
+    );
+
+    expect(code).toMatchInlineSnapshot(`
+      "import react from '@vitejs/plugin-react'; /* a
+       b */
+      import { fileURLToPath } from 'node:url';
+      import { dirname } from 'node:path';
+      // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+      const dirname = fileURLToPath(new URL('.', import.meta.url));
+      export default defineConfig({ test: {
+        projects: [{
+      extends: true,
+      test: {},
+      }, { extends: true, test: { name: 'storybook' } }],
+      } })
+      "
+    `);
+  });
+
+  it('keeps a line comment trailing the last import in place', () => {
+    const code = update(
+      `import react from '@vitejs/plugin-react' // plugins\nexport default defineConfig({ test: {} })\n`
+    );
+
+    expect(code).toMatchInlineSnapshot(`
+      "import react from '@vitejs/plugin-react' // plugins
+      import { fileURLToPath } from 'node:url';
+      import { dirname } from 'node:path';
+      // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+      const dirname = fileURLToPath(new URL('.', import.meta.url));
+      export default defineConfig({ test: {
+        projects: [{
+      extends: true,
+      test: {},
+      }, { extends: true, test: { name: 'storybook' } }],
+      } })
+      "
+    `);
+  });
+
+  it('appends the template statements when the last import ends the file', () => {
+    const code = update(`export default defineConfig({ test: {} })\nimport react from 'x'`);
+
+    expect(code).toMatchInlineSnapshot(`
+      "export default defineConfig({ test: {
+        projects: [{
+      extends: true,
+      test: {},
+      }, { extends: true, test: { name: 'storybook' } }],
+      } })
+      import react from 'x'
+      import { fileURLToPath } from 'node:url';
+      import { dirname } from 'node:path';
+      // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+      const dirname = fileURLToPath(new URL('.', import.meta.url));
+      "
+    `);
+  });
+
+  it('keeps CRLF line endings', () => {
+    const code = update(
+      `import react from '@vitejs/plugin-react';\r\nexport default defineConfig({ test: {} });\r\n`
+    );
 
-    const code = target.toString();
-    expect(code).toMatch(/^import react from '@vitejs\/plugin-react'; const x = 1$/m);
-    expect(code).toMatch(/^\/\/ More info at: .*\nconst dirname = /m);
-    expect(() => new SourceEditor(code)).not.toThrow();
+    expect(code).toContain('const dirname');
+    expect(code.replaceAll('\r\n', '')).not.toContain('\n');
   });
 
   it('does not declare a name the config already imports', () => {
diff --git a/code/addons/vitest/src/updateVitestFile.ts b/code/addons/vitest/src/updateVitestFile.ts
index 1e327f1957de..bdec27349296 100644
--- a/code/addons/vitest/src/updateVitestFile.ts
+++ b/code/addons/vitest/src/updateVitestFile.ts
@@ -330,6 +330,39 @@ const missingStatements = (source: SourceEditor, target: E.Program) => {
   });
 };
 
+/**
+ * Insert the statements on the line after the last import, keeping the comments that share its
+ * line with it. A statement sharing that line moves below them instead, so the config is never
+ * evaluated before the variables it reads.
+ */
+const insertStatements = (target: SourceEditor, text: string) => {
+  const { code, program } = target;
+  const index = program.body.findLastIndex((node) => node.type === 'ImportDeclaration');
+  if (index === -1) {
+    target.edits.appendLeft(program.body[0].start, `${text}\n\n`);
+    return;
+  }
+  let end = program.body[index].end;
+  for (const comment of target.comments) {
+    if (comment.start >= end && !code.slice(end, comment.start).includes('\n')) {
+      end = comment.end;
+    }
+  }
+  const next = program.body[index + 1];
+  const lineEnd = code.indexOf('\n', end);
+  if (next && (lineEnd === -1 || next.start < lineEnd)) {
+    if (next.start > end) {
+      target.edits.overwrite(end, next.start, `\n${text}\n`);
+    } else {
+      target.edits.appendLeft(next.start, `\n${text}\n`);
+    }
+  } else if (lineEnd === -1) {
+    target.edits.append(`\n${text}\n`);
+  } else {
+    target.edits.appendLeft(lineEnd + 1, `${text}\n`);
+  }
+};
+
 // Returns whether the config was updated; the edits are committed to `target` only when it was.
 export const updateConfigFile = (sourceCode: string, target: SourceEditor): boolean => {
   const source = new SourceEditor(sourceCode);
@@ -348,18 +381,7 @@ export const updateConfigFile = (sourceCode: string, target: SourceEditor): bool
 
   const statements = missingStatements(source, target.program);
   if (statements.length > 0) {
-    const lastImport = target.program.body.findLast((node) => node.type === 'ImportDeclaration');
-    if (lastImport) {
-      // On the line after the import, so code and comments sharing its line stay where they are.
-      const lineEnd = target.code.indexOf('\n', lastImport.end);
-      if (lineEnd === -1) {
-        target.edits.append(`\n${statements.join('\n')}`);
-      } else {
-        target.edits.appendLeft(lineEnd + 1, `${statements.join('\n')}\n`);
-      }
-    } else {
-      target.edits.appendLeft(target.program.body[0].start, `${statements.join('\n')}\n\n`);
-    }
+    insertStatements(target, statements.join('\n'));
   }
 
   mergeTemplateIntoConfigObject({ source, target }, targetConfig, () => templateConfig()!);

From 652ca79e3c4c3b510838eeac45af63ccc882c144 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 16 Oct 2026 16:24:56 +0200
Subject: [PATCH 111/326] fix(csf-tools): widen array elements over parentheses
 that contain comments

`withParentheses` only skipped whitespace between an element and its parentheses,
so `[(/* c */ cond ? 'a' : 'c')]` kept the bare element span: appending wrote the
new item inside the parentheses and removing the next element threw. It now skips
the editor's comment spans on both sides as well.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/ConfigFile.test.ts    | 16 ++++++++
 code/core/src/csf-tools/estree/editor.test.ts | 22 +++++++++++
 code/core/src/csf-tools/estree/editor.ts      | 37 +++++++++++++++----
 3 files changed, 68 insertions(+), 7 deletions(-)

diff --git a/code/core/src/csf-tools/ConfigFile.test.ts b/code/core/src/csf-tools/ConfigFile.test.ts
index 1cfe06a6d777..4fe2f398a2cc 100644
--- a/code/core/src/csf-tools/ConfigFile.test.ts
+++ b/code/core/src/csf-tools/ConfigFile.test.ts
@@ -805,6 +805,12 @@ describe('ConfigFile', () => {
         `export default { addons: [require.resolve('a11y'), someVariable, 'docs'] };`
       );
     });
+
+    it('appends after a parenthesized element with a comment inside', () => {
+      expect(
+        appendToArray(['addons'], 'b', `export default { addons: [(/* c */ cond ? 'a' : 'c')] };`)
+      ).toBe(`export default { addons: [(/* c */ cond ? 'a' : 'c'), 'b'] };`);
+    });
   });
 
   describe('removeField', () => {
@@ -1995,6 +2001,16 @@ describe('ConfigFile', () => {
       expect(config.getValue(['addons'])).toMatchInlineSnapshot(`a,c`);
     });
 
+    it('removes the entry after a parenthesized element with a comment inside', () => {
+      const config = loadConfig(
+        `export default { addons: [(/* c */ cond ? 'a' : 'c'), 'b'] };`
+      ).parse();
+      config.removeEntryFromArray(['addons'], 'b');
+      expect(printConfig(config).code).toBe(
+        `export default { addons: [(/* c */ cond ? 'a' : 'c')] };`
+      );
+    });
+
     it('throws when entry is missing', () => {
       const source = dedent`
         export default {
diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index 44391cc30f45..13b8baaa22e8 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -104,6 +104,28 @@ describe('withParentheses', () => {
     removeFromList(removal, arrayList(removal, array), [array.elements[1]!]);
     expect(removal.toString()).toBe(`export default { addons: ['b'] };`);
   });
+
+  it('skips the comments between the parentheses and the element', () => {
+    const editor = new SourceEditor(`export default { addons: [(/* c */ cond ? 'a' : 'c')] };`);
+    appendToList(editor, arrayList(editor, defaultExportArray(editor)), [`'b'`], '');
+    expect(editor.toString()).toBe(`export default { addons: [(/* c */ cond ? 'a' : 'c'), 'b'] };`);
+
+    const removal = new SourceEditor(
+      `export default { addons: [(/* c */ cond ? 'a' : 'c'), 'b'] };`
+    );
+    const array = defaultExportArray(removal);
+    removeFromList(removal, arrayList(removal, array), [array.elements[1]!]);
+    expect(removal.toString()).toBe(`export default { addons: [(/* c */ cond ? 'a' : 'c')] };`);
+
+    const after = new SourceEditor(`export default { addons: [(x /* after */)] };`);
+    appendToList(after, arrayList(after, defaultExportArray(after)), [`'b'`], '');
+    expect(after.toString()).toBe(`export default { addons: [(x /* after */), 'b'] };`);
+
+    // The list spans lines because of the comment, so the item lands on its own line.
+    const line = new SourceEditor(`export default { addons: [(x // after\n)] };`);
+    appendToList(line, arrayList(line, defaultExportArray(line)), [`'b'`], '');
+    expect(line.toString()).toBe(`export default { addons: [(x // after\n),\n'b'] };`);
+  });
 });
 
 describe('array holes', () => {
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index c9185e2591b3..cb7486ec9193 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -347,21 +347,44 @@ export const arrayList = (editor: SourceEditor, array: E.ArrayExpression): List
     close: array.end - 1,
     items: array.elements
       .filter((element): element is NonNullable<typeof element> => !!element)
-      .map((element) => withParentheses(code, element, open, array.end - 1)),
+      .map((element) => withParentheses(code, element, open, array.end - 1, editor.comments)),
   };
 };
 
-/** Widen a span to the balanced parentheses wrapped directly around it, within `lower..upper`. */
-export const withParentheses = (code: string, span: Span, lower = 0, upper = code.length): Span => {
+/**
+ * Widen a span to the balanced parentheses wrapped directly around it, within `lower..upper`.
+ * Whitespace and the given comments may sit between the parentheses and the span.
+ */
+export const withParentheses = (
+  code: string,
+  span: Span,
+  lower = 0,
+  upper = code.length,
+  comments: readonly Span[] = []
+): Span => {
   let { start, end } = span;
   while (true) {
     let before = start;
-    while (before > lower && /\s/.test(code[before - 1])) {
-      before--;
+    while (before > lower) {
+      const comment = comments.find((candidate) => candidate.end === before);
+      if (comment) {
+        before = comment.start;
+      } else if (/\s/.test(code[before - 1])) {
+        before--;
+      } else {
+        break;
+      }
     }
     let after = end;
-    while (after < upper && /\s/.test(code[after])) {
-      after++;
+    while (after < upper) {
+      const comment = comments.find((candidate) => candidate.start === after);
+      if (comment) {
+        after = comment.end;
+      } else if (/\s/.test(code[after])) {
+        after++;
+      } else {
+        break;
+      }
     }
     if (before > lower && after < upper && code[before - 1] === '(' && code[after] === ')') {
       start = before - 1;

From d2f06c448781de19635b970bef590aca32dd6730 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 16 Oct 2026 16:25:16 +0200
Subject: [PATCH 112/326] fix(cli): compare bigint literals and namespaced
 components in custom args types

JSON.stringify threw on a bigint literal in a type argument, and a
namespaced component was a MemberExpression as a value but a
TSQualifiedName as a type, so its class was carried over as a custom
args type.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../src/codemod/helpers/custom-args-type.ts   | 34 +++++++++++--
 .../helpers/story-to-csf-factory.test.ts      | 48 +++++++++++++++++++
 2 files changed, 79 insertions(+), 3 deletions(-)

diff --git a/code/lib/cli-storybook/src/codemod/helpers/custom-args-type.ts b/code/lib/cli-storybook/src/codemod/helpers/custom-args-type.ts
index e0c40ffa05e0..3dc05ff4ff66 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/custom-args-type.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/custom-args-type.ts
@@ -29,12 +29,40 @@ export function customArgsTypes(editor: SourceEditor, component: Node | undefine
 
   // Two types are the same when their trees are, whatever the spacing and comments around them.
   const code = (type: Node) =>
-    JSON.stringify(type, (key, value) => (key === 'start' || key === 'end' ? undefined : value));
+    JSON.stringify(type, (key, value) => {
+      if (key === 'start' || key === 'end') {
+        return undefined;
+      }
+      // JSON has no bigint; a `1n` literal's value is one.
+      return typeof value === 'bigint' ? `${value}n` : value;
+    });
+
+  // `Components.Button` is a MemberExpression as a value and a TSQualifiedName as a type.
+  const dottedName = (node: Node | null | undefined): string | undefined => {
+    if (node?.type === 'Identifier') {
+      return node.name;
+    }
+    if (
+      node?.type === 'MemberExpression' &&
+      !node.computed &&
+      node.property.type === 'Identifier'
+    ) {
+      const object = dottedName(node.object);
+      return object && `${object}.${node.property.name}`;
+    }
+    if (node?.type === 'TSQualifiedName') {
+      const left = dottedName(node.left);
+      return left && `${left}.${node.right.name}`;
+    }
+    return undefined;
+  };
 
-  const componentCode = component && code(component);
+  const componentName = dottedName(component);
 
   const isComponentClass = (type: Node | null | undefined): type is E.TSTypeReference =>
-    type?.type === 'TSTypeReference' && code(type.typeName) === componentCode;
+    type?.type === 'TSTypeReference' &&
+    componentName !== undefined &&
+    dottedName(type.typeName) === componentName;
 
   const isComponent = (type: Node | null | undefined) =>
     type?.type === 'TSTypeQuery' || isComponentClass(type);
diff --git a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
index 6153c0faf3f4..ec61f60ade6a 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
@@ -1168,6 +1168,54 @@ describe('stories codemod', () => {
         `);
       });
 
+      it('tells custom args types apart by their bigint literals', async () => {
+        await expect(
+          transform(dedent`
+            import type { Meta, StoryObj } from '@storybook/react';
+            import { Button } from './Button';
+
+            const meta = { component: Button } satisfies Meta<{ id: 1n }>;
+            export default meta;
+
+            export const Same: StoryObj<{ id: 1n }> = {};
+            export const Other: StoryObj<{ id: 2n }> = {};
+          `)
+        ).resolves.toMatchInlineSnapshot(`
+          import preview from "#.storybook/preview";
+          import { Button } from "./Button";
+
+          const meta = preview.type<{ args: { id: 1n } }>().meta({ component: Button });
+
+          export const Same = meta.story();
+          export const Other = meta.type<{ args: { id: 2n } }>().story();
+        `);
+      });
+
+      it('leaves a namespaced component class out, as its args are inferred', async () => {
+        await expect(
+          transform(dedent`
+            import type { Meta, StoryObj } from '@storybook/angular';
+            import * as Components from './components';
+
+            const meta: Meta<Components.Button & { theme: string }> = {
+              component: Components.Button,
+            };
+            export default meta;
+
+            export const A: StoryObj<Components.Button> = {};
+          `)
+        ).resolves.toMatchInlineSnapshot(`
+          import preview from "#.storybook/preview";
+          import * as Components from "./components";
+
+          const meta = preview.type<{ args: { theme: string } }>().meta({
+            component: Components.Button,
+          });
+
+          export const A = meta.story();
+        `);
+      });
+
       it('keeps a Storybook type that the custom args type is built from', async () => {
         await expect(
           transform(dedent`

From 7db984fb0a0ef1847be038d9e23f8395ad665942 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 16 Oct 2026 16:25:26 +0200
Subject: [PATCH 113/326] fix(addon-vitest): keep literal line breaks when
 wrapping the test config as a project
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Re-indenting the wrapped `test` object with a plain `replaceAll('\n', …)`
also indented the continuation lines of template literals and continued
strings inside it, changing their values. Use `reindent`, which leaves
string and template values alone.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../src/updateVitestFile.config.4.test.ts     | 89 +++++++++++++++++++
 code/addons/vitest/src/updateVitestFile.ts    |  2 +-
 2 files changed, 90 insertions(+), 1 deletion(-)

diff --git a/code/addons/vitest/src/updateVitestFile.config.4.test.ts b/code/addons/vitest/src/updateVitestFile.config.4.test.ts
index 8de9ce954fb7..377460d4a861 100644
--- a/code/addons/vitest/src/updateVitestFile.config.4.test.ts
+++ b/code/addons/vitest/src/updateVitestFile.config.4.test.ts
@@ -424,6 +424,95 @@ describe('updateConfigFile', () => {
     `);
   });
 
+  it('keeps the lines of template literals and continued strings in the wrapped test config', async () => {
+    const source = await loadTemplate('vitest.config.4.template', {
+      CONFIG_DIR: '.storybook',
+      BROWSER_CONFIG: "{ provider: 'playwright' }",
+      SETUP_FILE: '../.storybook/vitest.setup.ts',
+    });
+    const target = new SourceEditor(`
+      import { defineConfig } from 'vite'
+
+      export default defineConfig({
+        test: {
+          include: [\`src/**/*.test.ts
+lib/**/*.test.ts\`],
+          exclude: ['a\\
+b'],
+        },
+      })
+    `);
+
+    const before = target.code;
+    const updated = updateConfigFile(source, target);
+    expect(updated).toBe(true);
+
+    const after = target.toString();
+
+    expect(after).toContain('`src/**/*.test.ts\nlib/**/*.test.ts`');
+    expect(after).toContain("'a\\\nb'");
+    expect(getDiff(before, after)).toMatchInlineSnapshot(`
+      "  
+              import { defineConfig } from 'vite'
+        
+      + import path from 'node:path';
+      + import { fileURLToPath } from 'node:url';
+      + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+      + import { playwright } from '@vitest/browser-playwright';
+      + const dirname =
+      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+      + 
+        
+        
+      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+      + 
+      + 
+              export default defineConfig({
+                test: {
+        
+      -           include: [\`src/**/*.test.ts
+      - 
+      +           projects: [
+      +             {
+      +               extends: true,
+      +               test: {
+      +                 include: [\`src/**/*.test.ts
+      + 
+        lib/**/*.test.ts\`],
+        
+      -           exclude: ['a\\
+      - 
+      +                 exclude: ['a\\
+      + 
+        b'],
+        
+      +               },
+      +             },
+      +             {
+      +               extends: true,
+      +               plugins: [
+      +                 // The plugin will run tests for the stories defined in your Storybook config
+      +                 // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +                 storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +               ],
+      +               test: {
+      +                 name: 'storybook',
+      +                 browser: {
+      +                   enabled: true,
+      +                   headless: true,
+      +                   provider: playwright({}),
+      +                   instances: [{ browser: 'chromium' }],
+      +                 },
+      +               },
+      +             },
+      +           ],
+      + 
+                },
+              })
+            "
+    `);
+  });
+
   it('updates config which is not exported immediately', async () => {
     const source = await loadTemplate('vitest.config.4.template', {
       CONFIG_DIR: '.storybook',
diff --git a/code/addons/vitest/src/updateVitestFile.ts b/code/addons/vitest/src/updateVitestFile.ts
index bdec27349296..02720dd49217 100644
--- a/code/addons/vitest/src/updateVitestFile.ts
+++ b/code/addons/vitest/src/updateVitestFile.ts
@@ -240,7 +240,7 @@ const wrapTestConfigAsProject = (
   target.edits.overwrite(
     existingTest.start,
     existingTest.end,
-    itemText(source, objectList(config), templateTest).replaceAll('\n', `\n${lineIndent}`)
+    reindent(itemText(source, objectList(config), templateTest), '', lineIndent)
   );
   mergeProperties(
     merge,

From d568c1c478cc02c88601697bc65b7f4bacbcb940 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 16 Oct 2026 16:25:50 +0200
Subject: [PATCH 114/326] fix(csf-tools): only reject node types a parser
 produces, not data that ends like one
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`isAstLike` matched any `type` ending in `Expression`, `Literal`, `Element`,
`Block`, …, so plain data such as `{ type: 'TextBlock' }` could not be set.
It now checks OXC's visitor keys plus the explicit list of node types only
Babel produces.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/CsfObject.test.ts | 10 +++++++
 code/core/src/csf-tools/estree/values.ts  | 36 ++++++++++++++++++++---
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index a1418d09d8b7..f25d4afba769 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -148,6 +148,16 @@ describe('CsfObject', () => {
     expect(printCsf(csf).code).toContain(`control: { type: 'button', label: 'Save' }`);
   });
 
+  it.each(['TextBlock', 'HeroBlock', 'ButtonElement'])(
+    'prints data whose type %s only ends like a node type',
+    (type) => {
+      const csf = parse(`export default { title: 'X' };`);
+      const [meta] = csf.objects({ stories: false });
+      expect(meta.set(['data'], { type, text: 'x' })).toEqual({ ok: true, changed: true });
+      expect(printCsf(csf).code).toContain(`data: { type: '${type}', text: 'x' }`);
+    }
+  );
+
   it('places copied expressions so the surrounding code survives', () => {
     const csf = parse(`export default { a: (1, 2) };\nexport const B = { b: 0 };`);
     const [meta, story] = csf.objects();
diff --git a/code/core/src/csf-tools/estree/values.ts b/code/core/src/csf-tools/estree/values.ts
index a240715a0ca0..2b3c55fa0fbd 100644
--- a/code/core/src/csf-tools/estree/values.ts
+++ b/code/core/src/csf-tools/estree/values.ts
@@ -14,12 +14,40 @@ import {
 import { type SourceEditor, functionFromMethod } from './editor.ts';
 import type { ScopeInfo } from './scope.ts';
 
-// An object that looks like an AST node rather than data: a node type Babel or ESTree would produce.
-const AST_TYPE =
-  /^(?:TS|JSX)?[A-Z]\w*(?:Expression|Literal|Statement|Declaration|Identifier|Pattern|Property|Specifier|Element|Fragment|Template|Block)$/;
+// Node types Babel produces that OXC's ESTree output has no equivalent for (`@babel/types`
+// `VISITOR_KEYS` minus `visitorKeys`, without Flow), so a Babel node is still told from data.
+const BABEL_ONLY_TYPES = new Set([
+  'File',
+  'InterpreterDirective',
+  'Directive',
+  'DirectiveLiteral',
+  'StringLiteral',
+  'NumericLiteral',
+  'BooleanLiteral',
+  'NullLiteral',
+  'BigIntLiteral',
+  'RegExpLiteral',
+  'DecimalLiteral',
+  'ObjectProperty',
+  'ObjectMethod',
+  'ClassMethod',
+  'ClassPrivateMethod',
+  'ClassProperty',
+  'ClassPrivateProperty',
+  'ClassAccessorProperty',
+  'PrivateName',
+  'Import',
+  'ExportNamespaceSpecifier',
+  'ExportDefaultSpecifier',
+  'OptionalMemberExpression',
+  'OptionalCallExpression',
+  'TSDeclareMethod',
+  'TSExpressionWithTypeArguments',
+]);
 
+/** An object that is an AST node rather than data: a node type OXC or Babel produces. */
 export const isAstLike = (value: unknown): value is Node =>
-  isNode(value) && (Object.hasOwn(visitorKeys, value.type) || AST_TYPE.test(value.type));
+  isNode(value) && (Object.hasOwn(visitorKeys, value.type) || BABEL_ONLY_TYPES.has(value.type));
 
 /**
  * Source text ready to be placed as a value: a comma expression keeps its parentheses, and a

From e08df5dbdb93b47b91d0c65c4fc5babbe6465128 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 16 Oct 2026 16:26:05 +0200
Subject: [PATCH 115/326] test(cli): migrate parenthesized stories with a
 comment inside the parentheses

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../codemod/helpers/story-to-csf-factory.test.ts  | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
index ec61f60ade6a..e5a9f13dd761 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
@@ -949,6 +949,21 @@ describe('stories codemod', () => {
         `);
       });
 
+      it('migrates parenthesized expressions with a comment inside the parentheses', async () => {
+        const output = await transform(dedent`
+          import type { StoryObj } from '@storybook/react';
+          import { Button } from './Button';
+
+          export default { component: Button };
+
+          export const K = (/* c */ { args: {} }) satisfies StoryObj;
+          export const T = ({ args: {} } /* after */) satisfies StoryObj;
+        `);
+        expect(output).toContain('export const K = meta.story(');
+        expect(output).toContain('export const T = meta.story(');
+        expect(output).not.toContain('satisfies');
+      });
+
       it('keeps the custom args type of a story on that story', async () => {
         await expect(
           transform(dedent`

From a2c59b86044a209c4e13c5f6e6cf474bcb0f8ca6 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 16 Oct 2026 16:26:34 +0200
Subject: [PATCH 116/326] fix(addon-vitest): skip template declarations the
 config declares as a function or class

Only imports and variables counted as existing declarations, so a top-level
`function dirname() {}` made the added `const dirname` a duplicate and the
commit threw "already been declared". Check the program scope bindings
instead, which cover every kind of top-level declaration.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../src/updateVitestFile.statements.test.ts   | 15 +++++++++++
 code/addons/vitest/src/updateVitestFile.ts    | 25 ++++++-------------
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/code/addons/vitest/src/updateVitestFile.statements.test.ts b/code/addons/vitest/src/updateVitestFile.statements.test.ts
index 298ba716010a..368922209470 100644
--- a/code/addons/vitest/src/updateVitestFile.statements.test.ts
+++ b/code/addons/vitest/src/updateVitestFile.statements.test.ts
@@ -142,6 +142,21 @@ describe('updateConfigFile statements', () => {
     expect(code.replaceAll('\r\n', '')).not.toContain('\n');
   });
 
+  it('does not declare a name the config already declares as a function or class', () => {
+    const target = new SourceEditor(dedent`
+      function fileURLToPath() {}
+      class dirname {}
+      export default defineConfig({ test: {} });
+    `);
+
+    expect(updateConfigFile(template, target)).toBe(true);
+    const code = target.toString();
+    expect(code).not.toContain('import { fileURLToPath }');
+    expect(code).not.toContain('import { dirname }');
+    expect(code).not.toContain('const dirname');
+    expect(() => new SourceEditor(code)).not.toThrow();
+  });
+
   it('does not declare a name the config already imports', () => {
     const target = new SourceEditor(dedent`
       import { dirname } from 'node:path';
diff --git a/code/addons/vitest/src/updateVitestFile.ts b/code/addons/vitest/src/updateVitestFile.ts
index 02720dd49217..616612ec5d97 100644
--- a/code/addons/vitest/src/updateVitestFile.ts
+++ b/code/addons/vitest/src/updateVitestFile.ts
@@ -300,31 +300,20 @@ const findWritableConfigObject = (
 };
 
 // Template imports and variables the target lacks, each with the comments that follow it.
-const missingStatements = (source: SourceEditor, target: E.Program) => {
+const missingStatements = (source: SourceEditor, target: SourceEditor) => {
   const { body } = source.program;
-  const declaresImport = (name: string) =>
-    target.body.some(
-      (node) =>
-        node.type === 'ImportDeclaration' &&
-        node.specifiers.some((specifier) => specifier.local.name === name)
-    );
-  // Any top-level binding counts, so a name the config imports is not declared a second time.
-  const declaresVariable = (name: string) =>
-    declaresImport(name) ||
-    target.body.some(
-      (node) =>
-        node.type === 'VariableDeclaration' &&
-        node.declarations.some((d) => d.id.type === 'Identifier' && d.id.name === name)
-    );
+  // Any top-level binding counts, so a name the config declares in another form is not declared
+  // a second time.
+  const declared = (name: string) => target.scopes.program.bindings.has(name);
   return body.flatMap((node, index) => {
     const text = source.code.slice(node.start, body[index + 1]?.start ?? source.code.length).trim();
     if (node.type === 'ImportDeclaration') {
       const name = node.specifiers[0]?.local.name;
-      return name && !declaresImport(name) ? [text] : [];
+      return name && !declared(name) ? [text] : [];
     }
     if (node.type === 'VariableDeclaration') {
       const id = node.declarations[0]?.id;
-      return id?.type === 'Identifier' && !declaresVariable(id.name) ? [text] : [];
+      return id?.type === 'Identifier' && !declared(id.name) ? [text] : [];
     }
     return [];
   });
@@ -379,7 +368,7 @@ export const updateConfigFile = (sourceCode: string, target: SourceEditor): bool
     return false;
   }
 
-  const statements = missingStatements(source, target.program);
+  const statements = missingStatements(source, target);
   if (statements.length > 0) {
     insertStatements(target, statements.join('\n'));
   }

From 83a196cf2e1be5da354fae14a2c4d54f80620c23 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 16 Oct 2026 16:27:06 +0200
Subject: [PATCH 117/326] fix(csf-tools): wrap a sequence expression whose
 source only starts with a parenthesis

`placeableSource` left `(1), 2` bare because it starts with `(`, so copying
`b: ((1), 2)` with `get`/`set` wrote `c: (1), 2` and the commit failed with a
parse error. A sequence expression is now wrapped unless its first parenthesis
closes at the very end.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/CsfObject.test.ts | 12 ++++++++++++
 code/core/src/csf-tools/estree/values.ts  | 16 +++++++++++++++-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index f25d4afba769..df160158a83b 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -171,6 +171,18 @@ describe('CsfObject', () => {
     expect(csf.mutationDiagnostics).toEqual([]);
   });
 
+  it('wraps a sequence expression unless its own parentheses already enclose it', () => {
+    const csf = parse(`export default { b: ((1), 2) };`);
+    const [meta] = csf.objects({ stories: false });
+
+    expect(meta.set(['c'], meta.get(['b'])!)).toEqual({ ok: true, changed: true });
+    expect(meta.set(['d'], parseExpression('((1), 2)'))).toEqual({ ok: true, changed: true });
+    expect(meta.set(['e'], parseExpression('(1), (2)'))).toEqual({ ok: true, changed: true });
+    expect(printCsf(csf).code).toBe(
+      `export default { b: ((1), 2), c: ((1), 2), d: ((1), 2), e: ((1), (2)) };`
+    );
+  });
+
   it('edits a local object referenced by a story and cleans up the empty parent', () => {
     const csf = parse(
       `const a11y = { element: '#root' }; export default {}; export const Story = { parameters: { a11y } };`
diff --git a/code/core/src/csf-tools/estree/values.ts b/code/core/src/csf-tools/estree/values.ts
index 2b3c55fa0fbd..ace43f078833 100644
--- a/code/core/src/csf-tools/estree/values.ts
+++ b/code/core/src/csf-tools/estree/values.ts
@@ -49,12 +49,26 @@ const BABEL_ONLY_TYPES = new Set([
 export const isAstLike = (value: unknown): value is Node =>
   isNode(value) && (Object.hasOwn(visitorKeys, value.type) || BABEL_ONLY_TYPES.has(value.type));
 
+// Whether the parenthesis at index 0 closes at the last index. Then the text between them is an
+// expression on its own; otherwise it starts with an unmatched `)`, which fails the parse.
+const isParenthesized = (source: string) => {
+  if (!source.startsWith('(') || !source.endsWith(')')) {
+    return false;
+  }
+  try {
+    parseModule(`[${source.slice(1, -1)}\n]`);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
 /**
  * Source text ready to be placed as a value: a comma expression keeps its parentheses, and a
  * trailing line comment ends its line so the code after it survives.
  */
 export const placeableSource = (source: string, type: string) => {
-  const text = type === 'SequenceExpression' && !source.startsWith('(') ? `(${source})` : source;
+  const text = type === 'SequenceExpression' && !isParenthesized(source) ? `(${source})` : source;
   const lastComment = parseModule(`(${text}\n)`).comments.at(-1);
   return lastComment?.type === 'Line' && lastComment.end === text.length + 1 ? `${text}\n` : text;
 };

From c8753c2c4e2e7caade1bed86c6a7d34bfb12fdec Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 16 Oct 2026 16:27:53 +0200
Subject: [PATCH 118/326] fix(csf-tools): sweep CRLF blank lines above a
 removed statement

The blank-line check of `removeStatement` only matched `\n`, so a CRLF file
kept the empty lines above a removed statement.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/editor.test.ts | 8 ++++++++
 code/core/src/csf-tools/estree/editor.ts      | 5 ++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index 13b8baaa22e8..7199f25a8a95 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -166,6 +166,14 @@ describe('removeStatement', () => {
     removeStatement(editor, editor.program.body[0]);
     expect(editor.toString()).toBe(`/* license */\nconst b = 2;`);
   });
+
+  it('takes the blank lines above the statement in a CRLF file', () => {
+    const editor = new SourceEditor(
+      "import a from 'a';\r\n\r\n\r\nconst b = 1;\r\nconst c = 2;\r\n"
+    );
+    removeStatement(editor, editor.program.body[1]);
+    expect(editor.toString()).toBe("import a from 'a';\r\nconst c = 2;\r\n");
+  });
 });
 
 describe('parenthesized default exports', () => {
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index cb7486ec9193..97507fc97abf 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -825,7 +825,10 @@ export const removeStatement = (editor: SourceEditor, statement: Span, atTop?: b
   if (top) {
     to += /^\s*/.exec(code.slice(to))![0].length;
   } else {
-    while (from > 0 && /^[ \t]*\n$/.test(code.slice(code.lastIndexOf('\n', from - 2) + 1, from))) {
+    while (
+      from > 0 &&
+      /^[ \t]*\r?\n$/.test(code.slice(code.lastIndexOf('\n', from - 2) + 1, from))
+    ) {
       from = code.lastIndexOf('\n', from - 2) + 1;
     }
   }

From e7f58b0416f65450f78ca1373a38c03d92dd85f1 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 16 Oct 2026 16:28:34 +0200
Subject: [PATCH 119/326] fix(csf-tools): print new objects with the indent
 unit of the file

Grouped members and missing parents were always laid out with two spaces,
so tab-indented files ended up with `\t  ` lines. The unit is now read from
the edited object: the step from its line to its first member's line.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/CsfObject.ts          |  4 ++-
 code/core/src/csf-tools/estree/editor.test.ts | 25 +++++++++++++++++++
 code/core/src/csf-tools/estree/editor.ts      | 19 +++++++++++---
 3 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index fbba35911fdf..2bb46e488e14 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -13,6 +13,7 @@ import {
   type SourceEditor,
   appendMembers,
   groupMembers,
+  indentUnit,
   isSpan,
   keySource,
   prependMembers,
@@ -837,6 +838,7 @@ class CsfObjectEditor implements CsfObject {
   private insert(path: readonly string[], members: MemberInsert[]) {
     let parent = this.root();
     const quote = this.editor.quote;
+    const unit = indentUnit(this.editor.code, parent.node);
     for (const [index, name] of path.slice(0, -1).entries()) {
       const lookup = lookupProperty(parent.properties, name);
       if (lookup.ok === false) {
@@ -847,7 +849,7 @@ class CsfObjectEditor implements CsfObject {
         // Comments travel with moved members; a line comment needs the object to span lines.
         const multiline = members.some((member) => member.text.includes('\n'));
         const block = (texts: string[]) =>
-          multiline ? printMembers(texts) : `{ ${texts.join(', ')} }`;
+          multiline ? printMembers(texts, unit) : `{ ${texts.join(', ')} }`;
         const nested = missing
           .slice(1)
           .reverse()
diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index 7199f25a8a95..93672a3b9b01 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -290,6 +290,31 @@ describe('multi-line members', () => {
   });
 });
 
+describe('tab-indented files', () => {
+  it('groups members with the indent unit of the file', () => {
+    const csf = parse('export default {\n\tlayout: 1,\n\tshowNav: false,\n};');
+    const [meta] = csf.objects({ stories: false });
+    expect(meta.group(['ui'], ['layout', 'showNav'])).toEqual({ ok: true, changed: true });
+    expect(printCsf(csf).code).toBe(
+      'export default {\n\tui: {\n\t\tlayout: 1,\n\t\tshowNav: false,\n\t},\n};'
+    );
+  });
+
+  it('creates missing parents with the indent unit of the file', () => {
+    const csf = parse(
+      "export default {\n\tparameters: {\n\t\ta11y: {\n\t\t\ttest: 'todo',\n\t\t},\n\t},\n};"
+    );
+    const [meta] = csf.objects({ stories: false });
+    expect(meta.move(['parameters', 'a11y'], ['globals', 'a11y'])).toEqual({
+      ok: true,
+      changed: true,
+    });
+    expect(printCsf(csf).code).toBe(
+      "export default {\n\tglobals: {\n\t\ta11y: {\n\t\t\ttest: 'todo',\n\t\t},\n\t},\n};"
+    );
+  });
+});
+
 describe('printMembers', () => {
   it('leaves the template literal of a function value alone', () => {
     expect(printMembers(['fn: () => {\n  return `a\nb`;\n}'])).toBe(
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 97507fc97abf..5db26991141f 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -221,10 +221,10 @@ export const printString = (value: string, quote: string) => {
 };
 
 /** An object literal laid out one member per line, so formatters keep it expanded. */
-export const printMembers = (members: string[]) =>
+export const printMembers = (members: string[], unit = '  ') =>
   members.length === 0
     ? '{}'
-    : `{\n${members.map((member) => `  ${reindent(member, '', '  ')},`).join('\n')}\n}`;
+    : `{\n${members.map((member) => `${unit}${reindent(member, '', unit)},`).join('\n')}\n}`;
 
 /** Print a JS value as source. `expanded` lays objects out one member per line. */
 export const printValue = (
@@ -417,6 +417,17 @@ export const lineIndent = (code: string, index: number) => {
   return /^[ \t]*/.exec(code.slice(lineStart))![0];
 };
 
+/** Indent step of the file: from an object's line to its first member's, else two spaces. */
+export const indentUnit = (code: string, object: E.ObjectExpression | undefined) => {
+  const first = object?.properties[0];
+  if (!object || !first || !code.slice(object.start, first.start).includes('\n')) {
+    return '  ';
+  }
+  const outer = lineIndent(code, object.start);
+  const inner = lineIndent(code, first.start);
+  return inner.length > outer.length && inner.startsWith(outer) ? inner.slice(outer.length) : '  ';
+};
+
 const isMultiline = (code: string, list: List) => code.slice(list.open, list.close).includes('\n');
 
 // Offsets of the line breaks in `text` that are part of a value: inside string and regex literals
@@ -701,7 +712,9 @@ export const groupMembers = (
   removeMembers(editor, object, members.slice(1));
   const before = editor.code.slice(0, members[0].start);
   const indent = /[ \t]*$/.exec(before.slice(before.lastIndexOf('\n') + 1))![0];
-  const inner = multiline ? reindent(printMembers(texts), '', indent) : `{ ${texts.join(', ')} }`;
+  const inner = multiline
+    ? reindent(printMembers(texts, indentUnit(editor.code, object)), '', indent)
+    : `{ ${texts.join(', ')} }`;
   // Leading comments of the first member move into the group with it.
   const start = separatorBefore(editor.code, object, first);
   const lead = multiline ? `\n${indent}` : ' ';

From d123df723ad1a7f10c332af4cf520828a2e34c0e Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 16 Oct 2026 16:28:44 +0200
Subject: [PATCH 120/326] fix(core): print a saved function arg as an empty
 arrow function on one line

The placeholder for a function arg printed through Function.prototype
.toString(), which the bundler prints as a multi-line body; without a
formatter that landed in the story file. A RegExp arg is no longer
walked as a plain object either.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../utils/save-story/save-story.test.ts          | 16 ++++++++++++++++
 .../core-server/utils/save-story/save-story.ts   |  8 ++------
 .../utils/save-story/valueToSource.test.ts       |  9 +++++++++
 .../utils/save-story/valueToSource.ts            | 11 +++++++++--
 4 files changed, 36 insertions(+), 8 deletions(-)
 create mode 100644 code/core/src/core-server/utils/save-story/valueToSource.test.ts

diff --git a/code/core/src/core-server/utils/save-story/save-story.test.ts b/code/core/src/core-server/utils/save-story/save-story.test.ts
index 96185171295e..20bb14107f72 100644
--- a/code/core/src/core-server/utils/save-story/save-story.test.ts
+++ b/code/core/src/core-server/utils/save-story/save-story.test.ts
@@ -4,6 +4,7 @@ import { join, relative } from 'node:path';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { Channel } from 'storybook/internal/channels';
+import { formatFileContent } from 'storybook/internal/common';
 import type { ResponseData, SaveStoryResponsePayload } from 'storybook/internal/core-events';
 import {
   SAVE_STORY_REQUEST,
@@ -15,6 +16,7 @@ import type { Options } from 'storybook/internal/types';
 import { initializeSaveStory } from './save-story.ts';
 
 vi.mock('node:fs/promises', { spy: true });
+vi.mock('storybook/internal/common', { spy: true });
 vi.mock('storybook/internal/telemetry', { spy: true });
 vi.mock('storybook/internal/node-logger', { spy: true });
 
@@ -37,6 +39,7 @@ function saveStory(payload: { args?: string; name?: string }) {
 describe('save-story', () => {
   beforeEach(() => {
     vi.mocked(writeFile).mockReset();
+    vi.mocked(formatFileContent).mockRestore();
   });
 
   it('rejects a story name that is not a valid identifier', async () => {
@@ -89,4 +92,17 @@ describe('save-story', () => {
       },
     });
   });
+
+  it('writes a function arg as an empty arrow function on one line without a formatter', async () => {
+    vi.mocked(formatFileContent).mockImplementation(async (_, content) => content);
+
+    const response = await saveStory({
+      args: JSON.stringify({ absolute: true, onClick: '__sb_empty_function_arg__' }),
+    });
+
+    expect(response).toMatchObject({
+      success: true,
+      payload: { sourceFileContent: expect.stringContaining('onClick: () => {},') },
+    });
+  });
 });
diff --git a/code/core/src/core-server/utils/save-story/save-story.ts b/code/core/src/core-server/utils/save-story/save-story.ts
index c50e6943d704..6581cbcd23d8 100644
--- a/code/core/src/core-server/utils/save-story/save-story.ts
+++ b/code/core/src/core-server/utils/save-story/save-story.ts
@@ -24,14 +24,10 @@ import { isValidIdentifier } from '../../../csf-tools/estree/ast.ts';
 import { duplicateStoryWithNewName } from './duplicate-story-with-new-name.ts';
 import { updateArgsInCsfFile } from './update-args-in-csf-file.ts';
 import { SaveStoryError } from './utils.ts';
+import { emptyFunction } from './valueToSource.ts';
 
 const parseArgs = (args: string): Record<string, any> =>
-  JSON.parse(args, (_, value) => {
-    if (value === '__sb_empty_function_arg__') {
-      return () => {};
-    }
-    return value;
-  });
+  JSON.parse(args, (_, value) => (value === '__sb_empty_function_arg__' ? emptyFunction : value));
 
 export function initializeSaveStory(channel: Channel, options: Options) {
   channel.on(SAVE_STORY_REQUEST, async ({ id, payload }: RequestData<SaveStoryRequestPayload>) => {
diff --git a/code/core/src/core-server/utils/save-story/valueToSource.test.ts b/code/core/src/core-server/utils/save-story/valueToSource.test.ts
new file mode 100644
index 000000000000..3bc3dba050b5
--- /dev/null
+++ b/code/core/src/core-server/utils/save-story/valueToSource.test.ts
@@ -0,0 +1,9 @@
+import { describe, expect, it } from 'vitest';
+
+import { valueToSource } from './valueToSource.ts';
+
+describe('valueToSource', () => {
+  it('prints a RegExp as a literal instead of walking it as an object', () => {
+    expect(valueToSource({ pattern: /x/g })).toBe('{\n  pattern: /x/g,\n}');
+  });
+});
diff --git a/code/core/src/core-server/utils/save-story/valueToSource.ts b/code/core/src/core-server/utils/save-story/valueToSource.ts
index fabef9989328..db0bc853be69 100644
--- a/code/core/src/core-server/utils/save-story/valueToSource.ts
+++ b/code/core/src/core-server/utils/save-story/valueToSource.ts
@@ -1,11 +1,18 @@
 import { printValue } from '../../../csf-tools/estree/editor.ts';
 
-// Members set to `undefined` are left out, as they would not survive JSON either.
+/**
+ * Stands in for a function arg, which the controls panel cannot send. It prints as `() => {}`
+ * whatever the bundler made of the source of a function literal.
+ */
+export const emptyFunction: () => void = Object.assign(() => {}, { toString: () => '() => {}' });
+
+// Members set to `undefined` are left out, as they would not survive JSON either. Only plain
+// objects are walked: a RegExp prints as itself.
 const withoutUndefined = (value: unknown): unknown => {
   if (Array.isArray(value)) {
     return value.map(withoutUndefined);
   }
-  if (value && typeof value === 'object') {
+  if (value && typeof value === 'object' && Object.getPrototypeOf(value) === Object.prototype) {
     return Object.fromEntries(
       Object.entries(value)
         .filter(([, item]) => item !== undefined)

From 1ba540ed1420dbdc45a350da9d2fd4b28d513cac Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 16 Oct 2026 16:30:05 +0200
Subject: [PATCH 121/326] fix(angular-vite): trim only at removed comments when
 printing an arg expression

Stripping trailing whitespace over the whole expression also changed
template literal values, and a CRLF file kept a space before a trailing
line comment. A comment between two identifier characters now leaves
a space.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../src/docgen/story-docs-args.test.ts        | 21 +++++++++++++++++++
 .../src/docgen/story-docs-args.ts             | 11 ++++++++--
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/code/frameworks/angular-vite/src/docgen/story-docs-args.test.ts b/code/frameworks/angular-vite/src/docgen/story-docs-args.test.ts
index bc50ddbffaf4..00bc5bedc3ac 100644
--- a/code/frameworks/angular-vite/src/docgen/story-docs-args.test.ts
+++ b/code/frameworks/angular-vite/src/docgen/story-docs-args.test.ts
@@ -16,6 +16,27 @@ describe('evaluateArgExpression', () => {
       )
     ).toBe(`helper(\n  'x',\n  2,\n)`);
   });
+
+  it('keeps trailing whitespace inside a template literal', () => {
+    expect(evaluateArgExpression(expressionFromSource('helper(`a  \nb`)'), [])).toBe(
+      'helper(`a  \nb`)'
+    );
+  });
+
+  it('drops the whitespace before a trailing comment in a CRLF file', () => {
+    expect(
+      evaluateArgExpression(
+        expressionFromSource(`helper(\r\n      'x', // trailing\r\n      2,\r\n    )`),
+        []
+      )
+    ).toBe(`helper(\n  'x',\n  2,\n)`);
+  });
+
+  it('keeps the tokens around a removed comment apart', () => {
+    expect(evaluateArgExpression(expressionFromSource('a/* c */instanceof B'), [])).toBe(
+      'a instanceof B'
+    );
+  });
 });
 
 describe('argFieldValue', () => {
diff --git a/code/frameworks/angular-vite/src/docgen/story-docs-args.ts b/code/frameworks/angular-vite/src/docgen/story-docs-args.ts
index 29a6df2c3c6d..4b6eeac3f9a1 100644
--- a/code/frameworks/angular-vite/src/docgen/story-docs-args.ts
+++ b/code/frameworks/angular-vite/src/docgen/story-docs-args.ts
@@ -80,16 +80,23 @@ const printArgSource = (source: string): string => {
 };
 
 const withoutComments = (code: string): string => {
-  const wrapped = `(${code}\n)`;
+  const wrapped = `(${code.replace(/\r\n/g, '\n')}\n)`;
   const { comments } = parseModule(wrapped);
   let result = '';
   let cursor = 0;
   for (const comment of comments) {
     result += wrapped.slice(cursor, comment.start);
     cursor = comment.end + /^[ \t]*/.exec(wrapped.slice(comment.end))![0].length;
+    if (wrapped[cursor] === '\n') {
+      // A comment that ended its line takes the whitespace before it along.
+      result = result.replace(/[ \t]+$/, '');
+    } else if (/[\w$]$/.test(result) && /[\w$]/.test(wrapped[cursor])) {
+      // `a/* c */instanceof B` stays two tokens.
+      result += ' ';
+    }
   }
   result += wrapped.slice(cursor);
-  return result.slice(1, -2).replace(/[ \t]+\n/g, '\n');
+  return result.slice(1, -2);
 };
 
 // Angular expression strings support backslash escapes, so quoting stays lossless.

From 5f12533999ee19757d90f9daa4f0f8011f7382ce Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 16 Oct 2026 16:31:37 +0200
Subject: [PATCH 122/326] fix(csf-tools): pass the file name wherever a parser
 call site has one

Parse errors and code frames now name the file at every call site that
already knows its path: the preview file in the story indexer, ESLint and
Vitest config edits, the codemods and csf-factory helpers, the compodoc
automigration, the React/Vue/web-components/Angular docgen story readers,
the docs csf-plugin source parse, ghost-story candidates and the Metro
config codemod. With a name the grammar follows the extension, so the
React manifest fixture that held JSX in a .ts file is now .tsx.

find-implicit-spies no longer prefixes its warning with the path, since
the code frame below it names the file. story-to-csf-factory drops the
parentOf warm-up: sources are registered at parse time and parentOf
builds its cache lazily.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../src/csf-plugin/rollup-based-plugin.ts     |  4 ++-
 code/addons/vitest/src/postinstall.ts         |  4 +--
 code/core/src/cli/AddonVitestService.ts       |  2 +-
 code/core/src/cli/eslintPlugin.ts             |  2 +-
 code/core/src/cli/vitest-config.ts            |  4 +--
 .../utils/StoryIndexGenerator.test.ts         | 19 +++++++++++---
 .../core-server/utils/StoryIndexGenerator.ts  | 20 +++++++-------
 .../utils/ghost-stories/get-candidates.ts     |  6 ++---
 .../src/docgen/resolve-component.ts           |  2 +-
 .../fixes/angular-vite-remove-compodoc.ts     |  7 ++---
 .../codemod/helpers/config-to-csf-factory.ts  |  2 +-
 .../codemod/helpers/story-to-csf-factory.ts   |  4 +--
 .../upgrade-deprecated-types.test.ts.snap     |  2 +-
 .../__tests__/find-implicit-spies.test.ts     |  8 +++---
 code/lib/codemod/src/transforms/csf-2-to-3.ts |  2 +-
 .../src/transforms/find-implicit-spies.ts     | 12 ++++-----
 .../transforms/upgrade-deprecated-types.ts    |  2 +-
 .../REACT_NATIVE/metroConfig.test.ts          | 26 +++++++++++++------
 .../generators/REACT_NATIVE/metroConfig.ts    |  8 +++---
 .../src/componentManifest/generator.test.ts   | 14 +++++-----
 .../componentManifest/resolveComponents.ts    |  2 +-
 .../docgen/component-docgen/build-docgen.ts   |  5 +++-
 .../src/docgen/story-docs/build-story-docs.ts |  2 +-
 .../resolve-component/resolve-component.ts    |  2 +-
 24 files changed, 93 insertions(+), 68 deletions(-)

diff --git a/code/addons/docs/src/csf-plugin/rollup-based-plugin.ts b/code/addons/docs/src/csf-plugin/rollup-based-plugin.ts
index 1cca39532878..2653272ee2bd 100644
--- a/code/addons/docs/src/csf-plugin/rollup-based-plugin.ts
+++ b/code/addons/docs/src/csf-plugin/rollup-based-plugin.ts
@@ -24,7 +24,9 @@ export async function transformCsf(
     // Enrichment edits the source text and leaves the parsed nodes untouched, so `csf` can double as
     // the source. An `enrichCsf` hook may print the edited file, so it gets a separate parse.
     const csfSource =
-      code === sourceCode && !options.enrichCsf ? csf : loadCsf(sourceCode, { makeTitle }).parse();
+      code === sourceCode && !options.enrichCsf
+        ? csf
+        : loadCsf(sourceCode, { makeTitle, fileName: id }).parse();
     await enrichCsf(csf, csfSource, options);
     return formatCsf(csf, { sourceMaps: true, sourceFileName: id });
   } catch (err: unknown) {
diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index 89457fb75dda..8614e7e008f5 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -344,10 +344,10 @@ function isStorybookTestPluginSource(value: string) {
   return value === STORYBOOK_TEST_PLUGIN_SOURCE;
 }
 
-export function isConfigAlreadySetup(_configPath: string, configContent: string) {
+export function isConfigAlreadySetup(configPath: string, configContent: string) {
   let program: E.Program;
   try {
-    ({ program } = parseModule(configContent));
+    ({ program } = parseModule(configContent, configPath));
   } catch {
     return false;
   }
diff --git a/code/core/src/cli/AddonVitestService.ts b/code/core/src/cli/AddonVitestService.ts
index 04f9a09b7c44..fa730b040235 100644
--- a/code/core/src/cli/AddonVitestService.ts
+++ b/code/core/src/cli/AddonVitestService.ts
@@ -328,7 +328,7 @@ export class AddonVitestService {
       reasons.push(`Cannot auto-update CommonJS config file: ${vitestConfigFile}`);
     } else if (vitestConfigFile) {
       const configContent = await fs.readFile(vitestConfigFile, 'utf8');
-      if (!canUpdateVitestConfigFile(configContent)) {
+      if (!canUpdateVitestConfigFile(configContent, vitestConfigFile)) {
         reasons.push(`Found an invalid Vitest config file: ${vitestConfigFile}`);
       }
     }
diff --git a/code/core/src/cli/eslintPlugin.ts b/code/core/src/cli/eslintPlugin.ts
index 72edb80d1002..378cabd1aa47 100644
--- a/code/core/src/cli/eslintPlugin.ts
+++ b/code/core/src/cli/eslintPlugin.ts
@@ -244,7 +244,7 @@ function findCommonJsExport(program: E.Program) {
  * unchanged, with a warning to add the Storybook config manually.
  */
 export const configureFlatConfig = async (code: string, configFile: string) => {
-  const editor = new SourceEditor(code);
+  const editor = new SourceEditor(code, configFile);
   const { program } = editor;
 
   // Some configs load plugins with import() (e.g. eslint-flat-config-utils), where we can't safely
diff --git a/code/core/src/cli/vitest-config.ts b/code/core/src/cli/vitest-config.ts
index 25c77f51a6e6..44d8f0060ff0 100644
--- a/code/core/src/cli/vitest-config.ts
+++ b/code/core/src/cli/vitest-config.ts
@@ -147,10 +147,10 @@ export const findExportDefault = (program: E.Program) =>
  * Whether addon-vitest's postinstall can merge its config template into this Vitest/Vite config,
  * which needs a default export that resolves to a config object or a `mergeConfig(...)` call.
  */
-export const canUpdateVitestConfigFile = (fileContent: string): boolean => {
+export const canUpdateVitestConfigFile = (fileContent: string, fileName?: string): boolean => {
   let program: E.Program;
   try {
-    ({ program } = parseModule(fileContent));
+    ({ program } = parseModule(fileContent, fileName));
   } catch {
     return false;
   }
diff --git a/code/core/src/core-server/utils/StoryIndexGenerator.test.ts b/code/core/src/core-server/utils/StoryIndexGenerator.test.ts
index 1279cfe57e96..e34de569a7ca 100644
--- a/code/core/src/core-server/utils/StoryIndexGenerator.test.ts
+++ b/code/core/src/core-server/utils/StoryIndexGenerator.test.ts
@@ -63,7 +63,12 @@ describe('StoryIndexGenerator', () => {
     'export const parameters = {}; export const Preview = { parameters }; export const tags = ["autodocs"];',
   ])('reads project tags statically from %s', (source) => {
     const generator = new StoryIndexGenerator([], options);
-    expect(generator.getProjectTags(source)).toEqual([Tag.DEV, Tag.TEST, Tag.MANIFEST, 'autodocs']);
+    expect(generator.getProjectTags({ path: 'preview.ts', code: source })).toEqual([
+      Tag.DEV,
+      Tag.TEST,
+      Tag.MANIFEST,
+      'autodocs',
+    ]);
     expect(once.warn).not.toHaveBeenCalled();
   });
 
@@ -73,7 +78,11 @@ describe('StoryIndexGenerator', () => {
     'export default { tags: "autodocs" };',
   ])('warns and retains default tags for %s', (source) => {
     const generator = new StoryIndexGenerator([], options);
-    expect(generator.getProjectTags(source)).toEqual([Tag.DEV, Tag.TEST, Tag.MANIFEST]);
+    expect(generator.getProjectTags({ path: 'preview.ts', code: source })).toEqual([
+      Tag.DEV,
+      Tag.TEST,
+      Tag.MANIFEST,
+    ]);
     expect(once.warn).toHaveBeenCalledWith(expect.stringContaining('Unable to parse tags'));
   });
 
@@ -82,7 +91,11 @@ describe('StoryIndexGenerator', () => {
     'export default definePreview(importedConfig);',
   ])('retains default tags without warning for %s', (source) => {
     const generator = new StoryIndexGenerator([], options);
-    expect(generator.getProjectTags(source)).toEqual([Tag.DEV, Tag.TEST, Tag.MANIFEST]);
+    expect(generator.getProjectTags({ path: 'preview.ts', code: source })).toEqual([
+      Tag.DEV,
+      Tag.TEST,
+      Tag.MANIFEST,
+    ]);
     expect(once.warn).not.toHaveBeenCalled();
   });
 
diff --git a/code/core/src/core-server/utils/StoryIndexGenerator.ts b/code/core/src/core-server/utils/StoryIndexGenerator.ts
index 3b5bfd0394c7..580a30508650 100644
--- a/code/core/src/core-server/utils/StoryIndexGenerator.ts
+++ b/code/core/src/core-server/utils/StoryIndexGenerator.ts
@@ -232,8 +232,7 @@ export class StoryIndexGenerator {
       this.specifierToCache.set(specifier, cache)
     );
 
-    const previewCode = await this.getPreviewCode();
-    const projectTags = this.getProjectTags(previewCode);
+    const projectTags = this.getProjectTags(await this.getPreviewFile());
 
     // Extract stories for each file
     await this.ensureExtracted({ projectTags });
@@ -751,8 +750,7 @@ export class StoryIndexGenerator {
       throw this.lastError;
     }
 
-    const previewCode = await this.getPreviewCode();
-    const projectTags = this.getProjectTags(previewCode);
+    const projectTags = this.getProjectTags(await this.getPreviewFile());
 
     // Extract any entries that are currently missing
     // Pull out each file's stories into a list of stories, to be composed and sorted
@@ -876,20 +874,22 @@ export class StoryIndexGenerator {
     };
   }
 
-  async getPreviewCode() {
+  async getPreviewFile(): Promise<{ path: string; code: string } | undefined> {
     const previewFile = ['js', 'jsx', 'ts', 'tsx', 'mjs', 'cjs', 'mts']
       .map((ext) => join(this.options.configDir, `preview.${ext}`))
       .find((fname) => existsSync(fname));
 
-    return previewFile && (await readFile(previewFile, { encoding: 'utf8' })).toString();
+    return previewFile
+      ? { path: previewFile, code: (await readFile(previewFile, { encoding: 'utf8' })).toString() }
+      : undefined;
   }
 
-  getProjectTags(previewCode?: string) {
+  getProjectTags(preview?: { path: string; code: string }) {
     let projectTags = [] as Tag[];
     const defaultTags = [Tag.DEV, Tag.TEST, Tag.MANIFEST];
-    if (previewCode) {
+    if (preview) {
       try {
-        const projectAnnotations = loadConfig(previewCode).parse();
+        const projectAnnotations = loadConfig(preview.code, preview.path).parse();
         const tags = projectAnnotations.getValue(['tags']) ?? [];
         invariant(
           !projectAnnotations.mutationDiagnostics.some(
@@ -912,7 +912,7 @@ export class StoryIndexGenerator {
 
           Received:
 
-          ${previewCode}
+          ${preview.code}
         `);
       }
     }
diff --git a/code/core/src/core-server/utils/ghost-stories/get-candidates.ts b/code/core/src/core-server/utils/ghost-stories/get-candidates.ts
index 25e9133e1a30..e14e22bcd9a5 100644
--- a/code/core/src/core-server/utils/ghost-stories/get-candidates.ts
+++ b/code/core/src/core-server/utils/ghost-stories/get-candidates.ts
@@ -7,8 +7,8 @@ import { parseModule, walk } from '../../../csf-tools/estree/ast.ts';
 import { getComponentComplexity } from './component-analyzer.ts';
 
 // A valid candidate includes React code and at least one export
-function isValidCandidate(source: string): boolean {
-  const { program } = parseModule(source);
+function isValidCandidate(source: string, file: string): boolean {
+  const { program } = parseModule(source, file);
 
   let hasJSX = false;
   let hasExport = false;
@@ -52,7 +52,7 @@ export async function getCandidatesForStorybook(
     try {
       source = await readFile(file, 'utf-8');
       // filter out non-React code or files without exports
-      if (!isValidCandidate(source)) {
+      if (!isValidCandidate(source, file)) {
         continue;
       }
     } catch {
diff --git a/code/frameworks/angular-vite/src/docgen/resolve-component.ts b/code/frameworks/angular-vite/src/docgen/resolve-component.ts
index 673ea970e9d2..73811e75ec14 100644
--- a/code/frameworks/angular-vite/src/docgen/resolve-component.ts
+++ b/code/frameworks/angular-vite/src/docgen/resolve-component.ts
@@ -31,7 +31,7 @@ export function resolveStoryImport(fromFile: string, specifier: string): string
 export function parseStoryFile(storyFilePath: string, title: string): CsfFile | undefined {
   try {
     const source = readFileSync(storyFilePath, 'utf8');
-    return loadCsf(source, { makeTitle: () => title }).parse();
+    return loadCsf(source, { makeTitle: () => title, fileName: storyFilePath }).parse();
   } catch {
     return undefined;
   }
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/angular-vite-remove-compodoc.ts b/code/lib/cli-storybook/src/automigrate/fixes/angular-vite-remove-compodoc.ts
index 5e97128b3a71..ea3ba65692a4 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/angular-vite-remove-compodoc.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/angular-vite-remove-compodoc.ts
@@ -157,9 +157,9 @@ const wiresCompodoc = (program: E.Program): boolean => {
   return wired;
 };
 
-const previewWiresCompodoc = (source: string): boolean => {
+const previewWiresCompodoc = (source: string, fileName: string): boolean => {
   try {
-    return wiresCompodoc(parseModule(source).program);
+    return wiresCompodoc(parseModule(source, fileName).program);
   } catch {
     return false;
   }
@@ -305,7 +305,8 @@ export const findCompodocSetup = async ({
   const hasFrameworkOptions = COMPODOC_OPTIONS.some((option) => option in (frameworkOptions ?? {}));
 
   const hasPreviewWiring =
-    !!previewConfigPath && previewWiresCompodoc(await files.read(previewConfigPath));
+    !!previewConfigPath &&
+    previewWiresCompodoc(await files.read(previewConfigPath), previewConfigPath);
 
   const documents: { filePath: string; json: any }[] = [];
   for (const filePath of await findWorkspaceJsonFiles(packageManager.packageJsonPaths, [
diff --git a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts
index 00da57a4a1f6..6e60701e9b93 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts
@@ -37,7 +37,7 @@ export async function configToCsfFactory(
   { configType, frameworkPackage }: { configType: 'main' | 'preview'; frameworkPackage: string },
   { dryRun = false, skipFormatting = false }: { dryRun?: boolean; skipFormatting?: boolean } = {}
 ) {
-  const config = loadConfig(info.source);
+  const config = loadConfig(info.source, info.path);
   try {
     config.parse();
   } catch (err) {
diff --git a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
index 4fd082b94ce7..0c5725b0b5d1 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
@@ -88,7 +88,7 @@ export async function storyToCsfFactory(
 ) {
   let csf;
   try {
-    csf = loadCsf(info.source, { makeTitle: () => 'FIXME' });
+    csf = loadCsf(info.source, { makeTitle: () => 'FIXME', fileName: info.path });
   } catch {
     logger.log(`Error when parsing ${info.path}, skipping: file could not be parsed`);
     return info.source;
@@ -110,8 +110,6 @@ export async function storyToCsfFactory(
   const editor = csf._editor;
   const { program, scopes } = editor;
   const quote = editor.quote;
-  // Registers every node with its parent, which the reference rewrite below asks for.
-  editor.parentOf(program);
 
   // Check if a root-level constant named 'preview' exists
   const hasRootLevelConfig = program.body.some(
diff --git a/code/lib/codemod/src/transforms/__tests__/__snapshots__/upgrade-deprecated-types.test.ts.snap b/code/lib/codemod/src/transforms/__tests__/__snapshots__/upgrade-deprecated-types.test.ts.snap
index a4fce765b917..8a3d369c9d2d 100644
--- a/code/lib/codemod/src/transforms/__tests__/__snapshots__/upgrade-deprecated-types.test.ts.snap
+++ b/code/lib/codemod/src/transforms/__tests__/__snapshots__/upgrade-deprecated-types.test.ts.snap
@@ -3,7 +3,7 @@
 exports[`upgrade-deprecated-types > typescript > upgrade imports with conflicting local names 1`] = `
 SyntaxError: This codemod does not support local imports that are called the same as a storybook import.
 Rename this local import and try again.
-(1:10)
+Component.stories.tsx: (1:10)
 > 1 |  import { ComponentMeta as Meta, ComponentStory as StoryFn } from '@storybook/react';
     |           ^
 `;
diff --git a/code/lib/codemod/src/transforms/__tests__/find-implicit-spies.test.ts b/code/lib/codemod/src/transforms/__tests__/find-implicit-spies.test.ts
index ac119aad1637..c89d81071504 100644
--- a/code/lib/codemod/src/transforms/__tests__/find-implicit-spies.test.ts
+++ b/code/lib/codemod/src/transforms/__tests__/find-implicit-spies.test.ts
@@ -49,14 +49,14 @@ test('Warn for possible implicit actions', async () => {
   expect(warn.mock.calls).toMatchInlineSnapshot(`
     [
       [
-        "Component.stories.tsx Possible implicit spy found
-    (7:20)
+        "Possible implicit spy found
+    Component.stories.tsx: (7:20)
     > 7 |   await expect(args.onImplicit).toHaveBeenCalled();
         |                     ^",
       ],
       [
-        "Component.stories.tsx Possible implicit spy found
-    (17:22)
+        "Possible implicit spy found
+    Component.stories.tsx: (17:22)
     > 17 |     await expect(args.onImplicit).toHaveBeenCalled();
          |                       ^",
       ],
diff --git a/code/lib/codemod/src/transforms/csf-2-to-3.ts b/code/lib/codemod/src/transforms/csf-2-to-3.ts
index a1628406b5e7..b389975486a0 100644
--- a/code/lib/codemod/src/transforms/csf-2-to-3.ts
+++ b/code/lib/codemod/src/transforms/csf-2-to-3.ts
@@ -140,7 +140,7 @@ export default async function transform(info: FileInfo, api: API, options: { par
   const makeTitle = (userTitle?: string) => {
     return userTitle || 'FIXME';
   };
-  const csf = loadCsf(info.source, { makeTitle });
+  const csf = loadCsf(info.source, { makeTitle, fileName: info.path });
 
   try {
     csf.parse();
diff --git a/code/lib/codemod/src/transforms/find-implicit-spies.ts b/code/lib/codemod/src/transforms/find-implicit-spies.ts
index 0ca47ae80579..9117c44dfb4f 100644
--- a/code/lib/codemod/src/transforms/find-implicit-spies.ts
+++ b/code/lib/codemod/src/transforms/find-implicit-spies.ts
@@ -9,16 +9,14 @@ import {
 
 import type { FileInfo } from 'jscodeshift';
 
-function findImplicitSpies(editor: SourceEditor, node: Node, file: string, keys: string[]) {
+function findImplicitSpies(editor: SourceEditor, node: Node, keys: string[]) {
   walk(node, (identifier) => {
     if (
       identifier.type === 'Identifier' &&
       !keys.includes(identifier.name) &&
       /^on[A-Z].*/.test(identifier.name)
     ) {
-      console.warn(
-        storyShapeError(`${file} Possible implicit spy found`, identifier, editor).message
-      );
+      console.warn(storyShapeError('Possible implicit spy found', identifier, editor).message);
     }
   });
 }
@@ -69,7 +67,7 @@ function findAnnotations(program: E.Program, storyName: string, annotationName:
 }
 
 export default async function transform(info: FileInfo) {
-  const csf = loadCsf(info.source, { makeTitle: (title) => title });
+  const csf = loadCsf(info.source, { makeTitle: (title) => title, fileName: info.path });
   csf.parse();
   const editor = csf._editor;
 
@@ -98,7 +96,7 @@ export default async function transform(info: FileInfo) {
         node.left.property.type === 'Identifier' &&
         node.left.property.name === 'play'
       ) {
-        findImplicitSpies(editor, node, info.path, allKeys);
+        findImplicitSpies(editor, node, allKeys);
       }
       // CSF3 play function: const Story = {play: () => {} };
       if (
@@ -109,7 +107,7 @@ export default async function transform(info: FileInfo) {
       ) {
         const play = findProperty(node.init, 'play');
         if (play) {
-          findImplicitSpies(editor, play, info.path, allKeys);
+          findImplicitSpies(editor, play, allKeys);
         }
       }
     });
diff --git a/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts b/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts
index a47f3adccfee..f1962f5a7ee7 100644
--- a/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts
+++ b/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts
@@ -30,7 +30,7 @@ function migrateType(oldType: string) {
 
 export default async function transform(info: FileInfo, api: API, options: { parser?: string }) {
   // TODO what do I need to with the title?
-  const csf = loadCsf(info.source, { makeTitle: (title) => title });
+  const csf = loadCsf(info.source, { makeTitle: (title) => title, fileName: info.path });
 
   upgradeDeprecatedTypes(csf._editor);
 
diff --git a/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.test.ts b/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.test.ts
index a06481c010ff..0addcd7a5df6 100644
--- a/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.test.ts
+++ b/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.test.ts
@@ -434,36 +434,46 @@ export default async function makeMetroConfig<T = string>(): Promise<MetroConfig
   it('containsStorybookImport detects import/require across top-level statement forms', () => {
     expect(
       containsStorybookImport(
-        "import { withStorybook } from '@storybook/react-native/withStorybook';"
+        "import { withStorybook } from '@storybook/react-native/withStorybook';",
+        'metro.config.js'
       )
     ).toBe(true);
-    expect(containsStorybookImport("const sb = require('storybook/internal/common');")).toBe(true);
     expect(
-      containsStorybookImport("withSomething(require('@storybook/react-native/withStorybook'));")
+      containsStorybookImport("const sb = require('storybook/internal/common');", 'metro.config.js')
     ).toBe(true);
     expect(
       containsStorybookImport(
-        "module.exports = require('@storybook/react-native/withStorybook').withStorybook({});"
+        "withSomething(require('@storybook/react-native/withStorybook'));",
+        'metro.config.js'
       )
     ).toBe(true);
     expect(
       containsStorybookImport(
-        "export const withSb = require('@storybook/react-native/withStorybook');"
+        "module.exports = require('@storybook/react-native/withStorybook').withStorybook({});",
+        'metro.config.js'
       )
     ).toBe(true);
-    expect(containsStorybookImport('const x = require("react-native");')).toBe(false);
+    expect(
+      containsStorybookImport(
+        "export const withSb = require('@storybook/react-native/withStorybook');",
+        'metro.config.js'
+      )
+    ).toBe(true);
+    expect(containsStorybookImport('const x = require("react-native");', 'metro.config.js')).toBe(
+      false
+    );
   });
 
   it('fallback heuristic does not false-positive on storybook-like identifiers', () => {
     // This source is intentionally unparseable so the catch-branch runs.
     const unparseable = 'const storybookEnabled = true; <<<INVALID>>>';
     // 'storybookEnabled' must not fool the fallback into thinking Storybook is imported.
-    expect(containsStorybookImport(unparseable)).toBe(false);
+    expect(containsStorybookImport(unparseable, 'metro.config.js')).toBe(false);
 
     // But a real package specifier in the same unparseable source must still be detected.
     const unparseableWithImport =
       "const storybookEnabled = true; const x = require('@storybook/react-native'); <<<INVALID>>>";
-    expect(containsStorybookImport(unparseableWithImport)).toBe(true);
+    expect(containsStorybookImport(unparseableWithImport, 'metro.config.js')).toBe(true);
   });
 
   it('prepends fallback comment only once', () => {
diff --git a/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.ts b/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.ts
index ea4e7da9d2e0..1bfca0bfd895 100644
--- a/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.ts
+++ b/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.ts
@@ -102,9 +102,9 @@ const usesEsmSyntax = (program: E.Program) => {
   );
 };
 
-export const containsStorybookImport = (source: string) => {
+export const containsStorybookImport = (source: string, filePath: string) => {
   try {
-    const { program } = parseModule(source);
+    const { program } = parseModule(source, filePath);
     for (const statement of program.body) {
       if (statement.type === 'ImportDeclaration' && hasStorybookPackage(statement.source.value)) {
         return true;
@@ -233,7 +233,7 @@ export const prependMetroFallbackComment = (source: string) => {
 };
 
 export const transformMetroConfigSource = (source: string, filePath: string): TransformResult => {
-  const editor = new SourceEditor(source);
+  const editor = new SourceEditor(source, filePath);
   const { program } = editor;
   const withStorybookLocalName = hasWithStorybookBinding(program) ?? 'withStorybook';
   let matchedExport = false;
@@ -426,7 +426,7 @@ export const runMetroCodemodOrFallback = async ({
 
   const source = await readFile(filePath, 'utf-8');
 
-  if (containsStorybookImport(source)) {
+  if (containsStorybookImport(source, filePath)) {
     return {
       status: 'skipped-existing-storybook-import',
       filePath,
diff --git a/code/renderers/react/src/componentManifest/generator.test.ts b/code/renderers/react/src/componentManifest/generator.test.ts
index 67b4a1502021..3adc8bda4589 100644
--- a/code/renderers/react/src/componentManifest/generator.test.ts
+++ b/code/renderers/react/src/componentManifest/generator.test.ts
@@ -291,7 +291,7 @@ async function getManifestForStory(
   vol.fromJSON(
     {
       ['./package.json']: JSON.stringify(packageJson),
-      ['./src/stories/Button.stories.ts']: code,
+      ['./src/stories/Button.stories.tsx']: code,
       ['./src/stories/Button.tsx']: dedent`
         import React from 'react';
         export interface ButtonProps {
@@ -321,7 +321,7 @@ async function getManifestForStory(
       id: 'example-button--primary',
       name: 'Primary',
       title: 'Example/Button',
-      importPath: './src/stories/Button.stories.ts',
+      importPath: './src/stories/Button.stories.tsx',
       componentPath: './src/stories/Button.tsx',
       tags: [Tag.DEV, Tag.TEST, 'vitest', Tag.AUTODOCS, Tag.MANIFEST],
       exportName: 'Primary',
@@ -370,7 +370,7 @@ test('fall back to index title when no component name', async () => {
       "import": "import { Button } from 'some-package';",
       "jsDocTags": {},
       "name": "Button",
-      "path": "./src/stories/Button.stories.ts",
+      "path": "./src/stories/Button.stories.tsx",
       "reactComponentMeta": undefined,
       "reactDocgen": {
         "actualName": "Button",
@@ -464,7 +464,7 @@ test('component exported from other file', async () => {
       "import": "import { Button } from 'some-package';",
       "jsDocTags": {},
       "name": "Button",
-      "path": "./src/stories/Button.stories.ts",
+      "path": "./src/stories/Button.stories.tsx",
       "reactComponentMeta": undefined,
       "reactDocgen": {
         "actualName": "Button",
@@ -492,7 +492,7 @@ test('component exported from other file', async () => {
         {
           "error": {
             "message": "Expected story to be a function or variable declaration
-    (11:0)
+    /app/src/stories/Button.stories.tsx: (11:0)
     > 11 | export { Primary } from './other-file';
          | ^",
             "name": "SyntaxError",
@@ -518,7 +518,7 @@ test('unknown expressions', async () => {
       "import": "import { Button } from 'some-package';",
       "jsDocTags": {},
       "name": "Button",
-      "path": "./src/stories/Button.stories.ts",
+      "path": "./src/stories/Button.stories.tsx",
       "reactComponentMeta": undefined,
       "reactDocgen": {
         "actualName": "Button",
@@ -546,7 +546,7 @@ test('unknown expressions', async () => {
         {
           "error": {
             "message": "Expected story to be csf factory, function or an object expression
-    (11:23)
+    /app/src/stories/Button.stories.tsx: (11:23)
     > 11 | export const Primary = someWeirdExpression;
          |                        ^",
             "name": "SyntaxError",
diff --git a/code/renderers/react/src/componentManifest/resolveComponents.ts b/code/renderers/react/src/componentManifest/resolveComponents.ts
index d7afa46726f9..dcad52a57d59 100644
--- a/code/renderers/react/src/componentManifest/resolveComponents.ts
+++ b/code/renderers/react/src/componentManifest/resolveComponents.ts
@@ -111,7 +111,7 @@ export async function resolveStoryFileComponents(options: {
   const { storyPath, title, typescriptOptions, docgenEngine } = options;
 
   const storyFile = cachedReadTextFileSync(storyPath);
-  const csf = loadCsf(storyFile, { makeTitle: () => title }).parse();
+  const csf = loadCsf(storyFile, { makeTitle: () => title, fileName: storyPath }).parse();
   const componentName = csf._meta?.component;
 
   const declaredSubcomponents = extractDeclaredSubcomponents(csf);
diff --git a/code/renderers/vue3/src/docgen/component-docgen/build-docgen.ts b/code/renderers/vue3/src/docgen/component-docgen/build-docgen.ts
index 286ef5a65845..bcb54689c7c2 100644
--- a/code/renderers/vue3/src/docgen/component-docgen/build-docgen.ts
+++ b/code/renderers/vue3/src/docgen/component-docgen/build-docgen.ts
@@ -120,7 +120,10 @@ export async function buildDocgenPayload(
 
   let csf;
   try {
-    csf = loadCsf(storyFile, { makeTitle: () => input.entry.title }).parse();
+    csf = loadCsf(storyFile, {
+      makeTitle: () => input.entry.title,
+      fileName: storyPath,
+    }).parse();
   } catch (error) {
     return {
       ...baseFor(fallbackName),
diff --git a/code/renderers/vue3/src/docgen/story-docs/build-story-docs.ts b/code/renderers/vue3/src/docgen/story-docs/build-story-docs.ts
index c2749c16caf8..0c5ca646bf05 100644
--- a/code/renderers/vue3/src/docgen/story-docs/build-story-docs.ts
+++ b/code/renderers/vue3/src/docgen/story-docs/build-story-docs.ts
@@ -141,7 +141,7 @@ export async function buildStoryDocsPayload(
 
   let csf: ParsedCsf;
   try {
-    csf = loadCsf(storyFile, { makeTitle: () => input.entry.title }).parse();
+    csf = loadCsf(storyFile, { makeTitle: () => input.entry.title, fileName: storyPath }).parse();
   } catch {
     return undefined;
   }
diff --git a/code/renderers/web-components/src/docgen/component-docgen/resolve-component/resolve-component.ts b/code/renderers/web-components/src/docgen/component-docgen/resolve-component/resolve-component.ts
index 36ded589e434..8fb851aecadb 100644
--- a/code/renderers/web-components/src/docgen/component-docgen/resolve-component/resolve-component.ts
+++ b/code/renderers/web-components/src/docgen/component-docgen/resolve-component/resolve-component.ts
@@ -16,7 +16,7 @@ export type WebComponentsComponentResolution =
 export function parseStoryFile(storyFilePath: string, title: string): CsfFile | undefined {
   try {
     const source = readFileSync(storyFilePath, 'utf8');
-    return loadCsf(source, { makeTitle: () => title }).parse();
+    return loadCsf(source, { makeTitle: () => title, fileName: storyFilePath }).parse();
   } catch {
     return undefined;
   }

From 1fe1cea6d5f310a94a1f8ecfc136acf705eeb95c Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 16 Oct 2026 16:31:37 +0200
Subject: [PATCH 123/326] docs(migration): correct the csf-tools OXC notes

printCsf and printConfig already printed LF on next and the automigrate
runner restores CRLF, so the line-ending bullet described no change.
Document ConfigFile's replacements for _ast as they exist in code, and
note that an undeclared export is no longer a parse error and that an
automocked module's parse error now fails the webpack build.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 MIGRATION.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 30b07f2519ea..fa45371ae77e 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1321,13 +1321,14 @@ Storybook no longer bundles Babel or recast to read and write story and config f
 
 - **Flow syntax is no longer supported in story files.** Babel parsed `// @flow` files with its Flow plugin; OXC does not parse Flow, so such files fail to index with an error that names Flow. Convert them to TypeScript or plain JavaScript.
 - `parameters.docs.source.originalSource` is now the story's source text exactly as written, where Babel reprinted it with its own formatting. "Show code" and `docs.source.transform` functions receive the authored text, with line endings normalized to `\n`.
-- Files that automigrations and codemods rewrite (`main.ts`, `preview.ts`, story files) are written with `\n` line endings, so a file with `\r\n` line endings comes out with `\n`.
 - Parse errors use OXC's wording, and end with ` in <file>` when the file name is known. Duplicate declarations and legacy octal literals are still rejected.
+- `export { Missing }` of a name the file never declares is no longer a parse error, because OXC's semantic pass does not report it; the file indexes and the error surfaces when the module runs.
+- A parse error in a module that `sb.mock()` automocks under webpack now fails that module's build, where Babel's error recovery used to mock whatever it could parse.
 
 #### Changes for tooling that imports Storybook's internal entry points
 
 - `storybook/internal/babel` is removed. Import Babel from your own `@babel/*` dependencies if you still need it.
-- The nodes exposed by `storybook/internal/csf-tools` are ESTree (OXC) nodes instead of Babel nodes, for example `Literal` instead of `StringLiteral` and `Property` instead of `ObjectProperty`/`ObjectMethod`. `CsfFile._ast` and the `NodePath` fields are removed; use `CsfFile._program` and `CsfFile._editor`.
+- The nodes exposed by `storybook/internal/csf-tools` are ESTree (OXC) nodes instead of Babel nodes, for example `Literal` instead of `StringLiteral` and `Property` instead of `ObjectProperty`/`ObjectMethod`. `CsfFile._ast` and the `NodePath` fields are removed; use `CsfFile._program` and `CsfFile._editor`. `ConfigFile._ast` is removed as well; use `ConfigFile._program`, edit through `ConfigFile._editorSource` and call `ConfigFile._commit()` to apply pending edits and parse the result again.
 - `CsfObject#get` returns an ESTree expression, and `set`/`transform` accept expressions from `get()` or `parseExpression(code)`. Use `printExpression(node)` to read an expression's source.
 - An `experimental_enrichCsf` function receives the new `CsfFile`. Add code with `csf._appendStatement(code)` instead of pushing Babel nodes onto `csf._ast`.
 - `babelParse` and `babelParseFile` are removed; use `loadCsf(code, options)` and `readCsf(fileName, options)`.

From 13ace2e5b6dd05ba948cad2e248d59c404c7d695 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 16 Oct 2026 16:32:32 +0200
Subject: [PATCH 124/326] fix(cli): skip comments when widening a wrapped story
 expression to its parentheses

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../cli-storybook/src/codemod/helpers/story-to-csf-factory.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
index 0c5725b0b5d1..a66dbf7bf219 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
@@ -351,7 +351,7 @@ export async function storyToCsfFactory(
   // Wraps `inner` in `before…after`, dropping the type cast of `outer` around it. The parser drops
   // parentheses from spans, so `(inner) satisfies T` keeps its own.
   const wrap = (outer: Node, inner: Node, before: string, after: string) => {
-    const span = withParentheses(editor.code, inner, outer.start, outer.end);
+    const span = withParentheses(editor.code, inner, outer.start, outer.end, editor.comments);
     if (span.end < outer.end) {
       editor.edits.remove(span.end, outer.end);
     }

From d5b11794fccd0d3ac5e89f7bfd94eacd4bd04ef8 Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Fri, 16 Oct 2026 16:37:45 +0200
Subject: [PATCH 125/326] docs: make it about usage

---
 .../frameworks/web-components-vite.mdx        | 120 ++++--------------
 1 file changed, 28 insertions(+), 92 deletions(-)

diff --git a/docs/get-started/frameworks/web-components-vite.mdx b/docs/get-started/frameworks/web-components-vite.mdx
index d975d088ee9c..836a5fedefa6 100644
--- a/docs/get-started/frameworks/web-components-vite.mdx
+++ b/docs/get-started/frameworks/web-components-vite.mdx
@@ -42,72 +42,41 @@ You will find the output in the configured `outputDir` (default is `storybook-st
 
 ## Configure
 
-Storybook for Web components with Vite works without extra configuration. It reads your elements from your sources. The sections below cover what you get by default, the optional manifest escape hatch, and the framework options.
+Storybook for Web components with Vite works without extra configuration. It reads your elements from your sources, so your JSDoc comments become controls and documentation. The sections below cover how to write stories for an element and the framework options.
 
-### Component documentation
+### Writing stories
 
-Docgen reads your elements from your sources, with no setup. Your JSDoc comments on elements, attributes, properties, events, slots and CSS API reach [automatic documentation](../../writing-docs/autodocs.mdx) and the [controls](../../essentials/controls.mdx) table. If your project already produces a Custom Elements Manifest, you can hand it to Storybook instead; see [Providing your own manifest](#providing-your-own-manifest).
+Set `component` to the element's tag name and import the module that defines it. Storybook reads the element's attributes, properties, events, slots, CSS custom properties, CSS parts and CSS states, and turns them into controls and [automatic documentation](../../writing-docs/autodocs.mdx), with your JSDoc comments as descriptions.
 
-Docgen runs on the Storybook server and powers controls, autodocs, code snippets, and the [components manifest](../../ai/manifests.mdx). Your sources and any manifest file are watched, so edits show up while Storybook runs.
+Args stories render the element from its args:
 
-Attributes, properties, events, slots, CSS custom properties, CSS parts and CSS states from the manifest become argTypes. Event, slot, part and state arg keys are suffixed, such as `my-change-event`, `default-slot`, `panel-part` and `active-state`, so they never collide with attributes. CSS custom properties keep their `--name` key.
-
-For docgen to attach to a story, `meta.component` must be the tag name string, such as `component: 'demo-card'`. Metas without `component` get no docgen, and their stories show the story source in the Code panel.
-
-#### Built-in generator
-
-Nothing to set up. Storybook's built-in generator reads the elements your stories import from your TypeScript or JavaScript sources. It understands Lit and plain `HTMLElement` elements and ships with `@storybook/web-components`.
-
-For each tag, Storybook searches your sources in this order:
-
-1. The file that defined the tag last time.
-2. The story file and the files reachable through its imports.
-3. The preview file and the files reachable through its imports.
-4. The tsconfig files whose sources contain the tag as a string literal.
-
-Storybook selects the tsconfig for each story file, so monorepos and project references work. For a JavaScript project without a tsconfig, it scans only the story's folder.
-
-Editing an element updates its controls and descriptions while Storybook runs. If the generator or TypeScript fails to load, Storybook warns once and manifest docgen keeps working.
-
-#### Providing your own manifest
-
-You do not need a manifest. Provide one only when you already ship one with your package, when you want your library's own analyzer plugins (FAST, Stencil, Catalyst), or when you want the same manifest in Storybook and in your build. Any tool that writes a Custom Elements Manifest (`schemaVersion` 1.x or 2.x) works.
-
-Point Storybook at the file:
-
-<CodeSnippets path="web-components-main-config-custom-elements-manifest.md" />
-
-Manifests you provide win over your sources. Storybook reads `framework.options.customElementsManifest`, relative to the Storybook config directory, or else the `customElements` field in the nearest `package.json`, relative to that `package.json`. Tags your manifests do not declare still come from the built-in generator. The manifest file is watched, so regenerating it updates Storybook while it runs.
-
-Generate the manifest with the plugin that matches how your elements declare their attributes, such as `--litelement` when running `@custom-elements-manifest/analyzer` on Lit elements. Without it, decorator-declared attributes such as Lit's `@property()` are missing from the manifest, and Storybook cannot pair those args with attributes.
-
-#### Warnings
-
-If Storybook cannot read complete metadata, it reports the problem in the Controls table for the affected component and in the tools CLI (`npx storybook tools docs show`). These messages do not fail the build.
-
-- Missing manifest file: `Custom Elements Manifest <path> not found yet; docs load once the analyzer writes it`
-- Tag not found in manifests or sources: `No declaration for "<tag>" was found from story file <story> and preview file <preview>. Searched the tsconfig files covering those files: <tsconfigs>. Import the element module in the story or configure customElementsManifest.`
-- Older web-component-analyzer manifest shape: `<path> uses the web-component-analyzer manifest shape. The Storybook docgen server reads Custom Elements Manifests only; generate one with @custom-elements-manifest/analyzer.`
+<CodeSnippets path="web-components-story-snippet-args.md" />
 
-The tag-not-found message includes `and preview file <preview>` only when a preview file exists. `<tsconfigs>` is `none` when no tsconfig covers the files.
+Args map to the element by key. Event, slot, part and state keys carry a suffix so they never collide with attributes:
 
-If a watched manifest becomes invalid after Storybook has loaded a valid version, Storybook keeps the last valid version and reports a warning that ends with `; using the last valid version`.
+| Element API         | Arg key                                       | Example                                      | Rendered as                                              |
+| ------------------- | --------------------------------------------- | -------------------------------------------- | -------------------------------------------------------- |
+| Attribute           | the attribute name                            | `heading: 'Hello'`                           | `heading="Hello"`; `true` sets it bare, `false` omits it |
+| Property            | the property name                             | `items: ['a', 'b']`                          | `element.items = ['a', 'b']`                             |
+| Event               | `<name>-event`                                | `'my-change-event': () => {}`                | a listener for `my-change`                               |
+| Slot                | `<name>-slot`, `default-slot` for the default | `'actions-slot': '<button>Confirm</button>'` | children with `slot="actions"`                           |
+| CSS part            | `<name>-part`                                 | `'panel-part': 'color: rebeccapurple;'`      | a `::part(panel)` rule                                   |
+| CSS state           | `<name>-state`                                | `'active-state': 'opacity: 0.5;'`            | a `:state(active)` rule                                  |
+| CSS custom property | `--name`                                      | `'--panel-color': 'teal'`                    | `style="--panel-color: teal"`                            |
 
-#### Story snippets
+To control the markup yourself, write a `render` function with Lit's `html`:
 
-With server-side docgen, Storybook generates snippets for the Code panel and the `docs-show` MCP tool from the story file. Args stories become one element with attributes from args: booleans print bare, objects print as JSON, CSS custom properties go into `style`, parts and states go into a leading `<style>` block, `*-slot` args become children, and listeners become a trailing `<script>` with `addEventListener` calls.
+<CodeSnippets path="web-components-story-snippet-template.md" />
 
-For stories with a `render`, Storybook reads and resolves common template shapes before re-indenting the output:
+To listen to an event, pass a function as the event arg:
 
-- Reads Lit `html` templates, untagged template literals and strings.
-- Resolves `args.x`, destructured parameters, aliases declared in the render body, `ifDefined`, `nothing`, literal ternaries and nested templates.
-- Prints `?attr` bare when truthy and drops it when falsy, prints `.prop` as its paired attribute, and adds `@event` to the listener script.
+<CodeSnippets path="web-components-story-snippet-listeners.md" />
 
-A `render` function that builds DOM in code falls back to the args form, and authored `parameters.docs.source.code` supplies the snippet directly.
+Storybook finds the element through the imports of your story file and preview file. If it cannot find or read one, it says so in the Controls table and in `npx storybook tools docs show`; the build still passes. Metas without `component`, such as the template-function `Button`, `Header` and `Page` the starter generates, get no controls from docgen and show the story source in the Code panel.
 
-Args stories generate HTML from their args:
+### Code snippets
 
-<CodeSnippets path="web-components-story-snippet-args.md" />
+Autodocs and the Code panel show HTML generated from your story. An args story becomes one element with its attributes, slot content and a `<style>` block; the Args story above prints as:
 
 ```html
 <style>
@@ -121,50 +90,17 @@ Args stories generate HTML from their args:
 </lit-slots-and-css>
 ```
 
-Template stories read the returned template:
+A `render` story prints its Lit template with the args filled in, and event args add a `<script>` that attaches the listeners. Snippets show the story as you wrote it; changing a control updates the rendered element but not the snippet.
 
-<CodeSnippets path="web-components-story-snippet-template.md" />
-
-```html
-<lit-slots-and-css heading="Projected">
-  <p>Default slot content</p>
-  <button slot="actions">Confirm</button>
-</lit-slots-and-css>
-```
-
-Listener args add a script after the element:
-
-<CodeSnippets path="web-components-story-snippet-listeners.md" />
-
-```html
-<lit-events value="changed"></lit-events>
-<script>
-  {
-    const host = document.currentScript.previousElementSibling;
-    host.addEventListener('my-change', () => {});
-  }
-</script>
-```
-
-`parameters.docs.source.code` always wins, and `parameters.docs.source.code: null` disables the snippet. See the [Source block](../../api/doc-blocks/doc-block-source.mdx) page for the full `parameters.docs.source` API.
-
-Storybook reports a warning above the snippet instead of printing values it cannot represent. Warnings cover directives such as `classMap` or `repeat`, properties with no paired attribute, args the template never uses, imported arg values, and render functions that build DOM in code.
+When a snippet cannot represent something, such as a Lit directive or a property with no matching attribute, Storybook shows a warning above it instead. Set `parameters.docs.source.code` to write the snippet yourself, or set it to `null` to hide it. See the [Source block](../../api/doc-blocks/doc-block-source.mdx) page for the full API.
 
-## Known limitations
+### Custom Elements Manifest
 
-### Code snippets do not follow your controls
+You do not need one. If your project already ships a [Custom Elements Manifest](https://github.com/webcomponents/custom-elements-manifest), point Storybook at it and it is used instead of your sources for the elements it declares:
 
-The snippets shown in autodocs and the Code panel are generated from your story's source, so they show the story as you wrote it. Changing a value in the controls table updates the rendered component but not the snippet next to it.
-
-### Elements must be reachable from the story
-
-The generator follows imports from your story file and preview file. An element registered in a module neither file imports is not found. Import the element module, or provide a manifest.
-
-Template-function components, like the `Button`, `Header` and `Page` the starter generates, have no custom element and therefore no docgen. Their Code panel shows the story source.
-
-### Properties without an attribute cannot be shown in HTML
+<CodeSnippets path="web-components-main-config-custom-elements-manifest.md" />
 
-Properties with no paired attribute are listed in the snippet warning. Bind them through an attribute, or write the snippet yourself with `parameters.docs.source.code`.
+Storybook also picks up the `customElements` field of your `package.json`. Generate the manifest with the plugin that matches your library, such as `--litelement` for Lit, or decorator-declared attributes are missing from it.
 
 ## FAQ
 

From bc475647e7c045e99272f406d7a6491334b8ec73 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 16 Oct 2026 16:37:47 +0200
Subject: [PATCH 126/326] test(cli): keep the wrapper's JSDoc in the
 relative-path snapshot

Source edits keep the comment above getAbsolutePath, as the other
snapshots in this file already expect.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../src/automigrate/fixes/wrap-getAbsolutePath.test.ts       | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.test.ts
index 982f1f65da65..9e6111655cbf 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.test.ts
@@ -267,7 +267,10 @@ describe('wrapGetAbsolutePath', () => {
           },
         };
         export default config;
-
+        /**
+         * This function is used to resolve the absolute path of a package.
+         * It is needed in projects that are set up within a monorepo.
+         */
         function getAbsolutePath(value) {
           return dirname(fileURLToPath(import.meta.resolve(\`\${value}/package.json\`)));
         }

From 4af10f6bd393b4a99affeb60d9073f7e2a880335 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 16 Oct 2026 18:32:05 +0200
Subject: [PATCH 127/326] fix(csf-tools): upgrade oxc-parser and pick the
 grammar from the path without its query

oxc-parser 0.153 accepts a parenthesized comma expression in JSX, which
0.127 rejected, so story files such as onClick={(track(), noop)} index
again. Vite ids carry ?v= and #hash suffixes; the extension is now read
from the bare path, and unknown names go through the TSX-then-TS
fallback, which also reports the file name.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/package.json                     |   2 +-
 code/core/src/csf-tools/estree/ast.test.ts |  25 ++
 code/core/src/csf-tools/estree/ast.ts      |  39 ++-
 yarn.lock                                  | 377 ++++++++++-----------
 4 files changed, 221 insertions(+), 222 deletions(-)

diff --git a/code/core/package.json b/code/core/package.json
index 27114376ff8b..8b8d3d4578fb 100644
--- a/code/core/package.json
+++ b/code/core/package.json
@@ -281,7 +281,7 @@
     "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0 || ^0.26.0 || ^0.27.0 || ^0.28.0",
     "jsonc-parser": "^3.3.1",
     "open": "^10.2.0",
-    "oxc-parser": "^0.127.0",
+    "oxc-parser": "^0.153.0",
     "oxc-resolver": "11.21.2",
     "semver": "^7.7.3",
     "use-sync-external-store": "^1.5.0",
diff --git a/code/core/src/csf-tools/estree/ast.test.ts b/code/core/src/csf-tools/estree/ast.test.ts
index 5535459bb29f..1d651556fbfd 100644
--- a/code/core/src/csf-tools/estree/ast.test.ts
+++ b/code/core/src/csf-tools/estree/ast.test.ts
@@ -30,6 +30,31 @@ describe('parseModule', () => {
       'in Button.stories.js'
     );
   });
+
+  it.each(['/src/api.ts?v=123', '/src/api.mts#hash', '/src/Api.vue', 'api'])(
+    'parses a generic arrow in %s',
+    (fileName) => {
+      const { program } = parseModule('export const id = <T>(value: T) => value;', fileName);
+      expect(program.body).toHaveLength(1);
+    }
+  );
+
+  it('parses JSX in a .tsx id with a query', () => {
+    const { program } = parseModule('export const a = <div />;', '/src/A.tsx?import');
+    expect(program.body).toHaveLength(1);
+  });
+
+  it('accepts a parenthesized comma expression in JSX, but not a bare one', () => {
+    const { program } = parseModule("export const a = <B label={(f(), 'x')} />;", 'a.tsx');
+    expect(program.body).toHaveLength(1);
+    expect(() =>
+      parseModule("export const a = <B label={(f(), 'x')} title={g(), 'y'} />;", 'a.tsx')
+    ).toThrow('JSX expressions may not use the comma operator (1:46)');
+  });
+
+  it('names a file without a TS or JS extension in its parse error', () => {
+    expect(() => parseModule('export const = ;', '/src/Api.vue')).toThrow('in /src/Api.vue');
+  });
 });
 
 describe('codeFrame', () => {
diff --git a/code/core/src/csf-tools/estree/ast.ts b/code/core/src/csf-tools/estree/ast.ts
index 50601cfcda9e..05e61fe0f920 100644
--- a/code/core/src/csf-tools/estree/ast.ts
+++ b/code/core/src/csf-tools/estree/ast.ts
@@ -35,28 +35,34 @@ export class EstreeParseError extends SyntaxError {
 
 type Lang = 'js' | 'jsx' | 'ts' | 'tsx';
 
-const langFor = (fileName: string): Lang => {
-  if (/\.(c|m)?tsx?$/.test(fileName)) {
-    return /x$/.test(fileName) ? 'tsx' : 'ts';
+const langFor = (fileName: string): Lang | undefined => {
+  // A Vite id's `?query` or `#hash` is not part of the extension.
+  const path = fileName.replace(/[?#].*$/, '');
+  if (/\.[cm]?tsx?$/.test(path)) {
+    return path.endsWith('x') ? 'tsx' : 'ts';
   }
-  // Files without a TS extension may still contain JSX or type syntax, and TSX accepts both.
-  return 'tsx';
+  // JavaScript files may still contain JSX or type syntax, and TSX accepts both.
+  return /\.[cm]?jsx?$/.test(path) ? 'tsx' : undefined;
 };
 
 type ParseAttempt = { module: ParsedModule } | { error: EstreeParseError; offset: number };
 
+const labelStart = (diagnostic: E.OxcError) => diagnostic.labels?.[0]?.start;
+
 const parseWith = (code: string, fileName: string | undefined, lang: Lang): ParseAttempt => {
-  const result = parseSync(fileName ?? `file.${lang}`, code, {
+  const name = fileName ?? `file.${lang}`;
+  const options = {
     lang,
     sourceType: 'module',
     preserveParens: false,
     // Duplicate declarations and legacy octals are reported like Babel did, instead of parsing
     // into a program that silently keeps the last declaration.
     showSemanticErrors: true,
-  });
-  const error = result.errors.find((diagnostic) => diagnostic.severity === 'Error');
+  } as const;
+  const result = parseSync(name, code, options);
+  const [error] = result.errors.filter((diagnostic) => diagnostic.severity === 'Error');
   if (error) {
-    const offset = error.labels?.[0]?.start ?? 0;
+    const offset = labelStart(error) ?? 0;
     return {
       error: new EstreeParseError(
         error.message,
@@ -70,12 +76,13 @@ const parseWith = (code: string, fileName: string | undefined, lang: Lang): Pars
 };
 
 /**
- * Parse a module. Without a file name there is no grammar to pick: TSX accepts the most, but
- * rejects generic arrows and `<T>value` assertions that `.ts` allows, so TS is tried next and the
- * error of the parse that got further is reported.
+ * Parse a module. Without a TS or JS file extension there is no grammar to pick: TSX accepts the
+ * most, but rejects generic arrows and `<T>value` assertions that `.ts` allows, so TS is tried next
+ * and the error of the parse that got further is reported.
  */
 export const parseModule = (code: string, fileName?: string): ParsedModule => {
-  const attempt = fileName ? parseWith(code, fileName, langFor(fileName)) : parseUnnamed(code);
+  const lang = fileName === undefined ? undefined : langFor(fileName);
+  const attempt = lang ? parseWith(code, fileName, lang) : parseEither(code, fileName);
   if ('module' in attempt) {
     return attempt.module;
   }
@@ -94,12 +101,12 @@ const LEADING_COMMENTS = /^(?:\s*(?:\/\/[^\n]*|\/\*[\s\S]*?\*\/))*/;
 // Flow reads its pragma from any comment in the file's header, including `/** @flow */` docblocks.
 const hasFlowPragma = (code: string) => /@flow\b/.test(LEADING_COMMENTS.exec(code)?.[0] ?? '');
 
-const parseUnnamed = (code: string): ParseAttempt => {
-  const tsx = parseWith(code, undefined, 'tsx');
+const parseEither = (code: string, fileName: string | undefined): ParseAttempt => {
+  const tsx = parseWith(code, fileName, 'tsx');
   if ('module' in tsx) {
     return tsx;
   }
-  const ts = parseWith(code, undefined, 'ts');
+  const ts = parseWith(code, fileName, 'ts');
   return 'module' in ts || ts.offset > tsx.offset ? ts : tsx;
 };
 
diff --git a/yarn.lock b/yarn.lock
index bf2b03577264..99fcd1dc7a8b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2656,16 +2656,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emnapi/core@npm:1.9.2":
-  version: 1.9.2
-  resolution: "@emnapi/core@npm:1.9.2"
-  dependencies:
-    "@emnapi/wasi-threads": "npm:1.2.1"
-    tslib: "npm:^2.4.0"
-  checksum: 10c0/5500393f953951bad0768fafaa9191f2d938956b20c6d6a79e5ab696a613a25ce6ad23422bc18e86e6ce8deb147619d8d0d7d413a69f84adc01a6633cc353cd9
-  languageName: node
-  linkType: hard
-
 "@emnapi/core@npm:^1.1.0, @emnapi/core@npm:^1.11.1":
   version: 1.11.3
   resolution: "@emnapi/core@npm:1.11.3"
@@ -2712,15 +2702,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emnapi/runtime@npm:1.9.2":
-  version: 1.9.2
-  resolution: "@emnapi/runtime@npm:1.9.2"
-  dependencies:
-    tslib: "npm:^2.4.0"
-  checksum: 10c0/61c3a59e0c36784558b8d58eb02bd04815aa5fb0dbfbaf84d1b3050a78aa0cc63ea129ae806bd1e48062bfeb7fc36eb0e5431740d62f64ea51bdf426404b8caa
-  languageName: node
-  linkType: hard
-
 "@emnapi/runtime@npm:^1.1.0, @emnapi/runtime@npm:^1.11.1, @emnapi/runtime@npm:^1.7.0":
   version: 1.11.3
   resolution: "@emnapi/runtime@npm:1.11.3"
@@ -5796,16 +5777,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-android-arm-eabi@npm:0.127.0":
-  version: 0.127.0
-  resolution: "@oxc-parser/binding-android-arm-eabi@npm:0.127.0"
+"@oxc-parser/binding-android-arm-eabi@npm:0.150.0":
+  version: 0.150.0
+  resolution: "@oxc-parser/binding-android-arm-eabi@npm:0.150.0"
   conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-android-arm-eabi@npm:0.150.0":
-  version: 0.150.0
-  resolution: "@oxc-parser/binding-android-arm-eabi@npm:0.150.0"
+"@oxc-parser/binding-android-arm-eabi@npm:0.153.0":
+  version: 0.153.0
+  resolution: "@oxc-parser/binding-android-arm-eabi@npm:0.153.0"
   conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
@@ -5817,16 +5798,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-android-arm64@npm:0.127.0":
-  version: 0.127.0
-  resolution: "@oxc-parser/binding-android-arm64@npm:0.127.0"
+"@oxc-parser/binding-android-arm64@npm:0.150.0":
+  version: 0.150.0
+  resolution: "@oxc-parser/binding-android-arm64@npm:0.150.0"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-android-arm64@npm:0.150.0":
-  version: 0.150.0
-  resolution: "@oxc-parser/binding-android-arm64@npm:0.150.0"
+"@oxc-parser/binding-android-arm64@npm:0.153.0":
+  version: 0.153.0
+  resolution: "@oxc-parser/binding-android-arm64@npm:0.153.0"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
@@ -5838,16 +5819,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-darwin-arm64@npm:0.127.0":
-  version: 0.127.0
-  resolution: "@oxc-parser/binding-darwin-arm64@npm:0.127.0"
+"@oxc-parser/binding-darwin-arm64@npm:0.150.0":
+  version: 0.150.0
+  resolution: "@oxc-parser/binding-darwin-arm64@npm:0.150.0"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-darwin-arm64@npm:0.150.0":
-  version: 0.150.0
-  resolution: "@oxc-parser/binding-darwin-arm64@npm:0.150.0"
+"@oxc-parser/binding-darwin-arm64@npm:0.153.0":
+  version: 0.153.0
+  resolution: "@oxc-parser/binding-darwin-arm64@npm:0.153.0"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
@@ -5859,16 +5840,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-darwin-x64@npm:0.127.0":
-  version: 0.127.0
-  resolution: "@oxc-parser/binding-darwin-x64@npm:0.127.0"
+"@oxc-parser/binding-darwin-x64@npm:0.150.0":
+  version: 0.150.0
+  resolution: "@oxc-parser/binding-darwin-x64@npm:0.150.0"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-darwin-x64@npm:0.150.0":
-  version: 0.150.0
-  resolution: "@oxc-parser/binding-darwin-x64@npm:0.150.0"
+"@oxc-parser/binding-darwin-x64@npm:0.153.0":
+  version: 0.153.0
+  resolution: "@oxc-parser/binding-darwin-x64@npm:0.153.0"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
@@ -5880,16 +5861,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-freebsd-x64@npm:0.127.0":
-  version: 0.127.0
-  resolution: "@oxc-parser/binding-freebsd-x64@npm:0.127.0"
+"@oxc-parser/binding-freebsd-x64@npm:0.150.0":
+  version: 0.150.0
+  resolution: "@oxc-parser/binding-freebsd-x64@npm:0.150.0"
   conditions: os=freebsd & cpu=x64
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-freebsd-x64@npm:0.150.0":
-  version: 0.150.0
-  resolution: "@oxc-parser/binding-freebsd-x64@npm:0.150.0"
+"@oxc-parser/binding-freebsd-x64@npm:0.153.0":
+  version: 0.153.0
+  resolution: "@oxc-parser/binding-freebsd-x64@npm:0.153.0"
   conditions: os=freebsd & cpu=x64
   languageName: node
   linkType: hard
@@ -5901,16 +5882,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-arm-gnueabihf@npm:0.127.0":
-  version: 0.127.0
-  resolution: "@oxc-parser/binding-linux-arm-gnueabihf@npm:0.127.0"
+"@oxc-parser/binding-linux-arm-gnueabihf@npm:0.150.0":
+  version: 0.150.0
+  resolution: "@oxc-parser/binding-linux-arm-gnueabihf@npm:0.150.0"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-arm-gnueabihf@npm:0.150.0":
-  version: 0.150.0
-  resolution: "@oxc-parser/binding-linux-arm-gnueabihf@npm:0.150.0"
+"@oxc-parser/binding-linux-arm-gnueabihf@npm:0.153.0":
+  version: 0.153.0
+  resolution: "@oxc-parser/binding-linux-arm-gnueabihf@npm:0.153.0"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
@@ -5922,16 +5903,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-arm-musleabihf@npm:0.127.0":
-  version: 0.127.0
-  resolution: "@oxc-parser/binding-linux-arm-musleabihf@npm:0.127.0"
+"@oxc-parser/binding-linux-arm-musleabihf@npm:0.150.0":
+  version: 0.150.0
+  resolution: "@oxc-parser/binding-linux-arm-musleabihf@npm:0.150.0"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-arm-musleabihf@npm:0.150.0":
-  version: 0.150.0
-  resolution: "@oxc-parser/binding-linux-arm-musleabihf@npm:0.150.0"
+"@oxc-parser/binding-linux-arm-musleabihf@npm:0.153.0":
+  version: 0.153.0
+  resolution: "@oxc-parser/binding-linux-arm-musleabihf@npm:0.153.0"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
@@ -5943,16 +5924,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-arm64-gnu@npm:0.127.0":
-  version: 0.127.0
-  resolution: "@oxc-parser/binding-linux-arm64-gnu@npm:0.127.0"
+"@oxc-parser/binding-linux-arm64-gnu@npm:0.150.0":
+  version: 0.150.0
+  resolution: "@oxc-parser/binding-linux-arm64-gnu@npm:0.150.0"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-arm64-gnu@npm:0.150.0":
-  version: 0.150.0
-  resolution: "@oxc-parser/binding-linux-arm64-gnu@npm:0.150.0"
+"@oxc-parser/binding-linux-arm64-gnu@npm:0.153.0":
+  version: 0.153.0
+  resolution: "@oxc-parser/binding-linux-arm64-gnu@npm:0.153.0"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
@@ -5964,16 +5945,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-arm64-musl@npm:0.127.0":
-  version: 0.127.0
-  resolution: "@oxc-parser/binding-linux-arm64-musl@npm:0.127.0"
+"@oxc-parser/binding-linux-arm64-musl@npm:0.150.0":
+  version: 0.150.0
+  resolution: "@oxc-parser/binding-linux-arm64-musl@npm:0.150.0"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-arm64-musl@npm:0.150.0":
-  version: 0.150.0
-  resolution: "@oxc-parser/binding-linux-arm64-musl@npm:0.150.0"
+"@oxc-parser/binding-linux-arm64-musl@npm:0.153.0":
+  version: 0.153.0
+  resolution: "@oxc-parser/binding-linux-arm64-musl@npm:0.153.0"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
@@ -5985,16 +5966,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-ppc64-gnu@npm:0.127.0":
-  version: 0.127.0
-  resolution: "@oxc-parser/binding-linux-ppc64-gnu@npm:0.127.0"
+"@oxc-parser/binding-linux-ppc64-gnu@npm:0.150.0":
+  version: 0.150.0
+  resolution: "@oxc-parser/binding-linux-ppc64-gnu@npm:0.150.0"
   conditions: os=linux & cpu=ppc64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-ppc64-gnu@npm:0.150.0":
-  version: 0.150.0
-  resolution: "@oxc-parser/binding-linux-ppc64-gnu@npm:0.150.0"
+"@oxc-parser/binding-linux-ppc64-gnu@npm:0.153.0":
+  version: 0.153.0
+  resolution: "@oxc-parser/binding-linux-ppc64-gnu@npm:0.153.0"
   conditions: os=linux & cpu=ppc64 & libc=glibc
   languageName: node
   linkType: hard
@@ -6006,16 +5987,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-riscv64-gnu@npm:0.127.0":
-  version: 0.127.0
-  resolution: "@oxc-parser/binding-linux-riscv64-gnu@npm:0.127.0"
+"@oxc-parser/binding-linux-riscv64-gnu@npm:0.150.0":
+  version: 0.150.0
+  resolution: "@oxc-parser/binding-linux-riscv64-gnu@npm:0.150.0"
   conditions: os=linux & cpu=riscv64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-riscv64-gnu@npm:0.150.0":
-  version: 0.150.0
-  resolution: "@oxc-parser/binding-linux-riscv64-gnu@npm:0.150.0"
+"@oxc-parser/binding-linux-riscv64-gnu@npm:0.153.0":
+  version: 0.153.0
+  resolution: "@oxc-parser/binding-linux-riscv64-gnu@npm:0.153.0"
   conditions: os=linux & cpu=riscv64 & libc=glibc
   languageName: node
   linkType: hard
@@ -6027,16 +6008,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-riscv64-musl@npm:0.127.0":
-  version: 0.127.0
-  resolution: "@oxc-parser/binding-linux-riscv64-musl@npm:0.127.0"
+"@oxc-parser/binding-linux-riscv64-musl@npm:0.150.0":
+  version: 0.150.0
+  resolution: "@oxc-parser/binding-linux-riscv64-musl@npm:0.150.0"
   conditions: os=linux & cpu=riscv64 & libc=musl
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-riscv64-musl@npm:0.150.0":
-  version: 0.150.0
-  resolution: "@oxc-parser/binding-linux-riscv64-musl@npm:0.150.0"
+"@oxc-parser/binding-linux-riscv64-musl@npm:0.153.0":
+  version: 0.153.0
+  resolution: "@oxc-parser/binding-linux-riscv64-musl@npm:0.153.0"
   conditions: os=linux & cpu=riscv64 & libc=musl
   languageName: node
   linkType: hard
@@ -6048,16 +6029,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-s390x-gnu@npm:0.127.0":
-  version: 0.127.0
-  resolution: "@oxc-parser/binding-linux-s390x-gnu@npm:0.127.0"
+"@oxc-parser/binding-linux-s390x-gnu@npm:0.150.0":
+  version: 0.150.0
+  resolution: "@oxc-parser/binding-linux-s390x-gnu@npm:0.150.0"
   conditions: os=linux & cpu=s390x & libc=glibc
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-s390x-gnu@npm:0.150.0":
-  version: 0.150.0
-  resolution: "@oxc-parser/binding-linux-s390x-gnu@npm:0.150.0"
+"@oxc-parser/binding-linux-s390x-gnu@npm:0.153.0":
+  version: 0.153.0
+  resolution: "@oxc-parser/binding-linux-s390x-gnu@npm:0.153.0"
   conditions: os=linux & cpu=s390x & libc=glibc
   languageName: node
   linkType: hard
@@ -6069,16 +6050,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-x64-gnu@npm:0.127.0":
-  version: 0.127.0
-  resolution: "@oxc-parser/binding-linux-x64-gnu@npm:0.127.0"
+"@oxc-parser/binding-linux-x64-gnu@npm:0.150.0":
+  version: 0.150.0
+  resolution: "@oxc-parser/binding-linux-x64-gnu@npm:0.150.0"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-x64-gnu@npm:0.150.0":
-  version: 0.150.0
-  resolution: "@oxc-parser/binding-linux-x64-gnu@npm:0.150.0"
+"@oxc-parser/binding-linux-x64-gnu@npm:0.153.0":
+  version: 0.153.0
+  resolution: "@oxc-parser/binding-linux-x64-gnu@npm:0.153.0"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
@@ -6090,16 +6071,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-x64-musl@npm:0.127.0":
-  version: 0.127.0
-  resolution: "@oxc-parser/binding-linux-x64-musl@npm:0.127.0"
+"@oxc-parser/binding-linux-x64-musl@npm:0.150.0":
+  version: 0.150.0
+  resolution: "@oxc-parser/binding-linux-x64-musl@npm:0.150.0"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-x64-musl@npm:0.150.0":
-  version: 0.150.0
-  resolution: "@oxc-parser/binding-linux-x64-musl@npm:0.150.0"
+"@oxc-parser/binding-linux-x64-musl@npm:0.153.0":
+  version: 0.153.0
+  resolution: "@oxc-parser/binding-linux-x64-musl@npm:0.153.0"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
@@ -6111,16 +6092,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-openharmony-arm64@npm:0.127.0":
-  version: 0.127.0
-  resolution: "@oxc-parser/binding-openharmony-arm64@npm:0.127.0"
+"@oxc-parser/binding-openharmony-arm64@npm:0.150.0":
+  version: 0.150.0
+  resolution: "@oxc-parser/binding-openharmony-arm64@npm:0.150.0"
   conditions: os=openharmony & cpu=arm64
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-openharmony-arm64@npm:0.150.0":
-  version: 0.150.0
-  resolution: "@oxc-parser/binding-openharmony-arm64@npm:0.150.0"
+"@oxc-parser/binding-openharmony-arm64@npm:0.153.0":
+  version: 0.153.0
+  resolution: "@oxc-parser/binding-openharmony-arm64@npm:0.153.0"
   conditions: os=openharmony & cpu=arm64
   languageName: node
   linkType: hard
@@ -6134,17 +6115,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-wasm32-wasi@npm:0.127.0":
-  version: 0.127.0
-  resolution: "@oxc-parser/binding-wasm32-wasi@npm:0.127.0"
-  dependencies:
-    "@emnapi/core": "npm:1.9.2"
-    "@emnapi/runtime": "npm:1.9.2"
-    "@napi-rs/wasm-runtime": "npm:^1.1.4"
-  conditions: cpu=wasm32
-  languageName: node
-  linkType: hard
-
 "@oxc-parser/binding-win32-arm64-msvc@npm:0.121.0":
   version: 0.121.0
   resolution: "@oxc-parser/binding-win32-arm64-msvc@npm:0.121.0"
@@ -6152,16 +6122,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-win32-arm64-msvc@npm:0.127.0":
-  version: 0.127.0
-  resolution: "@oxc-parser/binding-win32-arm64-msvc@npm:0.127.0"
+"@oxc-parser/binding-win32-arm64-msvc@npm:0.150.0":
+  version: 0.150.0
+  resolution: "@oxc-parser/binding-win32-arm64-msvc@npm:0.150.0"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-win32-arm64-msvc@npm:0.150.0":
-  version: 0.150.0
-  resolution: "@oxc-parser/binding-win32-arm64-msvc@npm:0.150.0"
+"@oxc-parser/binding-win32-arm64-msvc@npm:0.153.0":
+  version: 0.153.0
+  resolution: "@oxc-parser/binding-win32-arm64-msvc@npm:0.153.0"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
@@ -6173,16 +6143,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-win32-ia32-msvc@npm:0.127.0":
-  version: 0.127.0
-  resolution: "@oxc-parser/binding-win32-ia32-msvc@npm:0.127.0"
+"@oxc-parser/binding-win32-ia32-msvc@npm:0.150.0":
+  version: 0.150.0
+  resolution: "@oxc-parser/binding-win32-ia32-msvc@npm:0.150.0"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-win32-ia32-msvc@npm:0.150.0":
-  version: 0.150.0
-  resolution: "@oxc-parser/binding-win32-ia32-msvc@npm:0.150.0"
+"@oxc-parser/binding-win32-ia32-msvc@npm:0.153.0":
+  version: 0.153.0
+  resolution: "@oxc-parser/binding-win32-ia32-msvc@npm:0.153.0"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
@@ -6194,16 +6164,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-win32-x64-msvc@npm:0.127.0":
-  version: 0.127.0
-  resolution: "@oxc-parser/binding-win32-x64-msvc@npm:0.127.0"
+"@oxc-parser/binding-win32-x64-msvc@npm:0.150.0":
+  version: 0.150.0
+  resolution: "@oxc-parser/binding-win32-x64-msvc@npm:0.150.0"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-win32-x64-msvc@npm:0.150.0":
-  version: 0.150.0
-  resolution: "@oxc-parser/binding-win32-x64-msvc@npm:0.150.0"
+"@oxc-parser/binding-win32-x64-msvc@npm:0.153.0":
+  version: 0.153.0
+  resolution: "@oxc-parser/binding-win32-x64-msvc@npm:0.153.0"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -6243,13 +6213,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-project/types@npm:^0.127.0":
-  version: 0.127.0
-  resolution: "@oxc-project/types@npm:0.127.0"
-  checksum: 10c0/52c0947ac64a9ca119fe971f947e784a35ecd14a072fa3f542a58a5f6c42010b53f2bf92731e39b9899b83c990a9517bbd29d1e5a5b7b489e52616685c6a9278
-  languageName: node
-  linkType: hard
-
 "@oxc-project/types@npm:^0.150.0":
   version: 0.150.0
   resolution: "@oxc-project/types@npm:0.150.0"
@@ -6257,6 +6220,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@oxc-project/types@npm:^0.153.0":
+  version: 0.153.0
+  resolution: "@oxc-project/types@npm:0.153.0"
+  checksum: 10c0/32011227bc4f0e6536c07ef79ce9254e5a453cdbfdb51b6717d0edc06b7d85a9a2a8ca12102de3b71f91a0e78d4facb538d17b28e6a7b6527ffc8901d8cd82c6
+  languageName: node
+  linkType: hard
+
 "@oxc-resolver/binding-android-arm-eabi@npm:11.21.2":
   version: 11.21.2
   resolution: "@oxc-resolver/binding-android-arm-eabi@npm:11.21.2"
@@ -28282,31 +28252,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"oxc-parser@npm:^0.127.0":
-  version: 0.127.0
-  resolution: "oxc-parser@npm:0.127.0"
-  dependencies:
-    "@oxc-parser/binding-android-arm-eabi": "npm:0.127.0"
-    "@oxc-parser/binding-android-arm64": "npm:0.127.0"
-    "@oxc-parser/binding-darwin-arm64": "npm:0.127.0"
-    "@oxc-parser/binding-darwin-x64": "npm:0.127.0"
-    "@oxc-parser/binding-freebsd-x64": "npm:0.127.0"
-    "@oxc-parser/binding-linux-arm-gnueabihf": "npm:0.127.0"
-    "@oxc-parser/binding-linux-arm-musleabihf": "npm:0.127.0"
-    "@oxc-parser/binding-linux-arm64-gnu": "npm:0.127.0"
-    "@oxc-parser/binding-linux-arm64-musl": "npm:0.127.0"
-    "@oxc-parser/binding-linux-ppc64-gnu": "npm:0.127.0"
-    "@oxc-parser/binding-linux-riscv64-gnu": "npm:0.127.0"
-    "@oxc-parser/binding-linux-riscv64-musl": "npm:0.127.0"
-    "@oxc-parser/binding-linux-s390x-gnu": "npm:0.127.0"
-    "@oxc-parser/binding-linux-x64-gnu": "npm:0.127.0"
-    "@oxc-parser/binding-linux-x64-musl": "npm:0.127.0"
-    "@oxc-parser/binding-openharmony-arm64": "npm:0.127.0"
-    "@oxc-parser/binding-wasm32-wasi": "npm:0.127.0"
-    "@oxc-parser/binding-win32-arm64-msvc": "npm:0.127.0"
-    "@oxc-parser/binding-win32-ia32-msvc": "npm:0.127.0"
-    "@oxc-parser/binding-win32-x64-msvc": "npm:0.127.0"
-    "@oxc-project/types": "npm:^0.127.0"
+"oxc-parser@npm:^0.150.0":
+  version: 0.150.0
+  resolution: "oxc-parser@npm:0.150.0"
+  dependencies:
+    "@oxc-parser/binding-android-arm-eabi": "npm:0.150.0"
+    "@oxc-parser/binding-android-arm64": "npm:0.150.0"
+    "@oxc-parser/binding-darwin-arm64": "npm:0.150.0"
+    "@oxc-parser/binding-darwin-x64": "npm:0.150.0"
+    "@oxc-parser/binding-freebsd-x64": "npm:0.150.0"
+    "@oxc-parser/binding-linux-arm-gnueabihf": "npm:0.150.0"
+    "@oxc-parser/binding-linux-arm-musleabihf": "npm:0.150.0"
+    "@oxc-parser/binding-linux-arm64-gnu": "npm:0.150.0"
+    "@oxc-parser/binding-linux-arm64-musl": "npm:0.150.0"
+    "@oxc-parser/binding-linux-ppc64-gnu": "npm:0.150.0"
+    "@oxc-parser/binding-linux-riscv64-gnu": "npm:0.150.0"
+    "@oxc-parser/binding-linux-riscv64-musl": "npm:0.150.0"
+    "@oxc-parser/binding-linux-s390x-gnu": "npm:0.150.0"
+    "@oxc-parser/binding-linux-x64-gnu": "npm:0.150.0"
+    "@oxc-parser/binding-linux-x64-musl": "npm:0.150.0"
+    "@oxc-parser/binding-openharmony-arm64": "npm:0.150.0"
+    "@oxc-parser/binding-win32-arm64-msvc": "npm:0.150.0"
+    "@oxc-parser/binding-win32-ia32-msvc": "npm:0.150.0"
+    "@oxc-parser/binding-win32-x64-msvc": "npm:0.150.0"
+    "@oxc-project/types": "npm:^0.150.0"
   dependenciesMeta:
     "@oxc-parser/binding-android-arm-eabi":
       optional: true
@@ -28340,42 +28309,40 @@ __metadata:
       optional: true
     "@oxc-parser/binding-openharmony-arm64":
       optional: true
-    "@oxc-parser/binding-wasm32-wasi":
-      optional: true
     "@oxc-parser/binding-win32-arm64-msvc":
       optional: true
     "@oxc-parser/binding-win32-ia32-msvc":
       optional: true
     "@oxc-parser/binding-win32-x64-msvc":
       optional: true
-  checksum: 10c0/9d109fb3a79c0862a36434cc01c8c0e8f6cf5f1efe9369e02d2183fd518479b10262cf092da2e7f8328befae446afa05ccf742ce12f8346d81429c8f2cdf1651
+  checksum: 10c0/a799b87b16153188bdb91adb7c30e27ab721f7cd860435f61d215487e84f5ad2e0c8930ce7e79d72864e9afad104a8a134c50a2cee839bc73a96a623d36867b0
   languageName: node
   linkType: hard
 
-"oxc-parser@npm:^0.150.0":
-  version: 0.150.0
-  resolution: "oxc-parser@npm:0.150.0"
-  dependencies:
-    "@oxc-parser/binding-android-arm-eabi": "npm:0.150.0"
-    "@oxc-parser/binding-android-arm64": "npm:0.150.0"
-    "@oxc-parser/binding-darwin-arm64": "npm:0.150.0"
-    "@oxc-parser/binding-darwin-x64": "npm:0.150.0"
-    "@oxc-parser/binding-freebsd-x64": "npm:0.150.0"
-    "@oxc-parser/binding-linux-arm-gnueabihf": "npm:0.150.0"
-    "@oxc-parser/binding-linux-arm-musleabihf": "npm:0.150.0"
-    "@oxc-parser/binding-linux-arm64-gnu": "npm:0.150.0"
-    "@oxc-parser/binding-linux-arm64-musl": "npm:0.150.0"
-    "@oxc-parser/binding-linux-ppc64-gnu": "npm:0.150.0"
-    "@oxc-parser/binding-linux-riscv64-gnu": "npm:0.150.0"
-    "@oxc-parser/binding-linux-riscv64-musl": "npm:0.150.0"
-    "@oxc-parser/binding-linux-s390x-gnu": "npm:0.150.0"
-    "@oxc-parser/binding-linux-x64-gnu": "npm:0.150.0"
-    "@oxc-parser/binding-linux-x64-musl": "npm:0.150.0"
-    "@oxc-parser/binding-openharmony-arm64": "npm:0.150.0"
-    "@oxc-parser/binding-win32-arm64-msvc": "npm:0.150.0"
-    "@oxc-parser/binding-win32-ia32-msvc": "npm:0.150.0"
-    "@oxc-parser/binding-win32-x64-msvc": "npm:0.150.0"
-    "@oxc-project/types": "npm:^0.150.0"
+"oxc-parser@npm:^0.153.0":
+  version: 0.153.0
+  resolution: "oxc-parser@npm:0.153.0"
+  dependencies:
+    "@oxc-parser/binding-android-arm-eabi": "npm:0.153.0"
+    "@oxc-parser/binding-android-arm64": "npm:0.153.0"
+    "@oxc-parser/binding-darwin-arm64": "npm:0.153.0"
+    "@oxc-parser/binding-darwin-x64": "npm:0.153.0"
+    "@oxc-parser/binding-freebsd-x64": "npm:0.153.0"
+    "@oxc-parser/binding-linux-arm-gnueabihf": "npm:0.153.0"
+    "@oxc-parser/binding-linux-arm-musleabihf": "npm:0.153.0"
+    "@oxc-parser/binding-linux-arm64-gnu": "npm:0.153.0"
+    "@oxc-parser/binding-linux-arm64-musl": "npm:0.153.0"
+    "@oxc-parser/binding-linux-ppc64-gnu": "npm:0.153.0"
+    "@oxc-parser/binding-linux-riscv64-gnu": "npm:0.153.0"
+    "@oxc-parser/binding-linux-riscv64-musl": "npm:0.153.0"
+    "@oxc-parser/binding-linux-s390x-gnu": "npm:0.153.0"
+    "@oxc-parser/binding-linux-x64-gnu": "npm:0.153.0"
+    "@oxc-parser/binding-linux-x64-musl": "npm:0.153.0"
+    "@oxc-parser/binding-openharmony-arm64": "npm:0.153.0"
+    "@oxc-parser/binding-win32-arm64-msvc": "npm:0.153.0"
+    "@oxc-parser/binding-win32-ia32-msvc": "npm:0.153.0"
+    "@oxc-parser/binding-win32-x64-msvc": "npm:0.153.0"
+    "@oxc-project/types": "npm:^0.153.0"
   dependenciesMeta:
     "@oxc-parser/binding-android-arm-eabi":
       optional: true
@@ -28415,7 +28382,7 @@ __metadata:
       optional: true
     "@oxc-parser/binding-win32-x64-msvc":
       optional: true
-  checksum: 10c0/a799b87b16153188bdb91adb7c30e27ab721f7cd860435f61d215487e84f5ad2e0c8930ce7e79d72864e9afad104a8a134c50a2cee839bc73a96a623d36867b0
+  checksum: 10c0/1b5777d7b8fd0d1cce77c7a02750c754a7f8fe2c977caa8b24ee6f50a2f117d984bda795d23d7786784bd94079150b57b84fd8a6c496530568b1935b4b74120c
   languageName: node
   linkType: hard
 
@@ -33683,7 +33650,7 @@ __metadata:
     nanoid: "npm:^4.0.2"
     npmlog: "npm:^7.0.0"
     open: "npm:^10.2.0"
-    oxc-parser: "npm:^0.127.0"
+    oxc-parser: "npm:^0.153.0"
     oxc-resolver: "npm:11.21.2"
     p-limit: "npm:^7.2.0"
     package-manager-detector: "npm:^1.1.0"

From 2325a8b3898d7df6a2ae26888b4f05d16719bf72 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 16 Oct 2026 18:32:05 +0200
Subject: [PATCH 128/326] fix(csf-tools): protect literals on reindent and keep
 comments and holes through list edits

Reindent reads template and string spans from the AST instead of a
scanner, and leaves text it cannot parse untouched. Comments directly
above the first statement belong to it when they are JSDoc or a
directive; plain comment blocks stay the file header. Array holes are
items with their own comma, setImportSpecifiers edits the braces in
place so comments and layout survive, and computed keys are located
from the key span instead of bracket searches.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/editor.test.ts | 276 +++++++++-
 code/core/src/csf-tools/estree/editor.ts      | 476 +++++++++---------
 2 files changed, 519 insertions(+), 233 deletions(-)

diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index 93672a3b9b01..a89a0c9ff40d 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -6,6 +6,7 @@ import { decode, encode } from '@jridgewell/sourcemap-codec';
 import MagicString from 'magic-string';
 import { dedent } from 'ts-dedent';
 
+import { loadConfig, printConfig } from '../ConfigFile.ts';
 import { loadCsf, printCsf } from '../CsfFile.ts';
 import { parseExpression } from '../CsfObject.ts';
 import type { E } from './ast.ts';
@@ -14,10 +15,14 @@ import {
   SourceEditor,
   appendToList,
   arrayList,
+  prependStatement,
+  prependToList,
   printMembers,
   reindent,
   removeFromList,
   removeStatement,
+  removeStatements,
+  setImportSpecifiers,
   withParentheses,
 } from './editor.ts';
 
@@ -84,6 +89,20 @@ describe('reindent', () => {
   it('re-indents code inside template expressions', () => {
     expect(reindent('`${\nfn()\n}`', '', '  ')).toBe('`${\n  fn()\n  }`');
   });
+
+  it('leaves the template literals of a function body alone', () => {
+    const body =
+      '{\n    if (typeof /`/ === "object") {}\n    const label = `a\n    b`;\n    return label;\n  }';
+    expect(reindent(body, '  ', '')).toBe(
+      '{\n  if (typeof /`/ === "object") {}\n  const label = `a\n    b`;\n  return label;\n}'
+    );
+  });
+
+  it('leaves the template literals of a method member alone', () => {
+    expect(reindent("fn() {\n  return /`/.test('a') ? `a\n  b` : 1;\n}", '', '  ')).toBe(
+      "fn() {\n    return /`/.test('a') ? `a\n  b` : 1;\n  }"
+    );
+  });
 });
 
 describe('withParentheses', () => {
@@ -129,15 +148,47 @@ describe('withParentheses', () => {
 });
 
 describe('array holes', () => {
+  const removeElement = (code: string, index: number) => {
+    const editor = new SourceEditor(code);
+    const array = defaultExportArray(editor);
+    removeFromList(editor, arrayList(editor, array), [array.elements[index]!]);
+    return editor.toString();
+  };
+  const lengthOf = (code: string) => defaultExportArray(new SourceEditor(code)).elements.length;
+
   it('keeps leading holes when appending to and emptying an array', () => {
     const editor = new SourceEditor(`export default { addons: [, 'a'] };`);
     appendToList(editor, arrayList(editor, defaultExportArray(editor)), [`'b'`], '');
     expect(editor.toString()).toBe(`export default { addons: [, 'a', 'b'] };`);
 
-    const removal = new SourceEditor(`export default { addons: [, 'a'] };`);
-    const array = defaultExportArray(removal);
-    removeFromList(removal, arrayList(removal, array), [array.elements[1]!]);
-    expect(removal.toString()).toBe(`export default { addons: [,] };`);
+    expect(removeElement(`export default { addons: [, 'a'] };`, 1)).toBe(
+      `export default { addons: [,] };`
+    );
+  });
+
+  it('keeps a hole before a removed last element', () => {
+    const removed = removeElement(`export default { addons: ['a', , 'b'] };`, 2);
+    expect(removed).toBe(`export default { addons: ['a', ,] };`);
+    expect(lengthOf(removed)).toBe(2);
+  });
+
+  it('keeps a trailing hole after a removed element', () => {
+    const removed = removeElement(`export default { addons: ['a', , 'b', ,] };`, 2);
+    expect(removed).toBe(`export default { addons: ['a', , ,] };`);
+    expect(lengthOf(removed)).toBe(3);
+  });
+
+  it('appends after a trailing hole', () => {
+    const editor = new SourceEditor(`export default { addons: ['a', ,] };`);
+    appendToList(editor, arrayList(editor, defaultExportArray(editor)), [`'b'`], '');
+    expect(editor.toString()).toBe(`export default { addons: ['a', , 'b'] };`);
+    expect(lengthOf(editor.toString())).toBe(3);
+  });
+
+  it('prepends before a leading hole', () => {
+    const editor = new SourceEditor(`export default { addons: [, 'a'] };`);
+    prependToList(editor, arrayList(editor, defaultExportArray(editor)), [`'b'`], '');
+    expect(editor.toString()).toBe(`export default { addons: ['b', , 'a'] };`);
   });
 });
 
@@ -167,6 +218,45 @@ describe('removeStatement', () => {
     expect(editor.toString()).toBe(`/* license */\nconst b = 2;`);
   });
 
+  it('keeps a plain comment directly above the removed first statement', () => {
+    const editor = new SourceEditor(`// plain comment\nconst a = 1;\nconst b = 2;`);
+    removeStatement(editor, editor.program.body[0]);
+    expect(editor.toString()).toBe(`// plain comment\nconst b = 2;`);
+  });
+
+  it('removes the JSDoc directly above the first statement with it', () => {
+    const editor = new SourceEditor(dedent`
+      /** Shared template */
+      const Template = (args) => <Button {...args} />;
+      export default { component: Button };
+    `);
+    removeStatement(editor, editor.program.body[0]);
+    expect(editor.toString()).toBe(`export default { component: Button };`);
+  });
+
+  it('keeps header comments separated from the first statement by a blank line', () => {
+    const editor = new SourceEditor(dedent`
+      // Copyright Storybook
+
+      /** Shared template */
+      const Template = 1;
+      export default {};
+    `);
+    removeStatements(editor, new Set([editor.program.body[0]]));
+    expect(editor.toString()).toBe(`// Copyright Storybook\n\nexport default {};`);
+  });
+
+  it('keeps pragmas directly above the first statement', () => {
+    const editor = new SourceEditor(dedent`
+      /** @license MIT */
+      /** Shared template */
+      const Template = 1;
+      export default {};
+    `);
+    removeStatement(editor, editor.program.body[0]);
+    expect(editor.toString()).toBe(`/** @license MIT */\nexport default {};`);
+  });
+
   it('takes the blank lines above the statement in a CRLF file', () => {
     const editor = new SourceEditor(
       "import a from 'a';\r\n\r\n\r\nconst b = 1;\r\nconst c = 2;\r\n"
@@ -176,6 +266,162 @@ describe('removeStatement', () => {
   });
 });
 
+describe('prependStatement', () => {
+  it('inserts above the comments of the first statement', () => {
+    const editor = new SourceEditor(`/** Shared template */\nconst Template = 1;`);
+    prependStatement(editor, `import a from 'a';`);
+    expect(editor.toString()).toBe(
+      `import a from 'a';\n/** Shared template */\nconst Template = 1;`
+    );
+  });
+
+  it('inserts below a copyright comment directly above the first import', () => {
+    const editor = new SourceEditor(`// Copyright Storybook\nimport a from 'a';\nconst b = 1;`);
+    prependStatement(editor, `import c from 'c';`);
+    expect(editor.toString()).toBe(
+      `// Copyright Storybook\nimport a from 'a';\nimport c from 'c';\nconst b = 1;`
+    );
+  });
+
+  it('inserts below a JSDoc pragma directly above the first statement', () => {
+    const editor = new SourceEditor(`/** @license MIT */\nconst a = 1;`);
+    prependStatement(editor, `import b from 'b';`);
+    expect(editor.toString()).toBe(`/** @license MIT */\nimport b from 'b';\n\nconst a = 1;`);
+  });
+});
+
+describe('setImportSpecifiers', () => {
+  const keep = (code: string, names: string[]) => {
+    const editor = new SourceEditor(code);
+    const declaration = editor.program.body[0] as E.ImportDeclaration;
+    setImportSpecifiers(
+      editor,
+      declaration,
+      declaration.specifiers.filter((specifier) => names.includes(specifier.local.name))
+    );
+    return editor.toString();
+  };
+
+  it('keeps the layout and comments of a multi-line import', () => {
+    const code = dedent`
+      import {
+        beforeAll, // run before
+        // run after
+        afterAll,
+        expect, // assert
+        /* end */
+      } from 'vitest';
+    `;
+    expect(keep(code, ['afterAll', 'expect'])).toBe(dedent`
+      import {
+        // run after
+        afterAll,
+        expect, // assert
+        /* end */
+      } from 'vitest';
+    `);
+    expect(keep(code, ['beforeAll'])).toBe(dedent`
+      import {
+        beforeAll, // run before
+        /* end */
+      } from 'vitest';
+    `);
+  });
+
+  it('keeps the comments of a single-line import', () => {
+    expect(keep(`import { a, /* b */ b, c /* end */ } from 'x';`, ['a', 'c'])).toBe(
+      `import { a, c /* end */ } from 'x';`
+    );
+  });
+
+  it('finds the braces past comments that contain braces', () => {
+    expect(keep(`import { /* { */ a, b /* } */ } from 'x';`, ['a'])).toBe(
+      `import { /* { */ a /* } */ } from 'x';`
+    );
+  });
+
+  it('adds and removes default and named specifiers', () => {
+    expect(keep(`import A, { b, c } from 'x';`, ['A'])).toBe(`import A from 'x';`);
+    expect(keep(`import A, { b } from 'x';`, ['b'])).toBe(`import { b } from 'x';`);
+
+    const editor = new SourceEditor(`import A from 'x';\nimport { b } from 'y';`);
+    const [first, second] = editor.program.body as E.ImportDeclaration[];
+    setImportSpecifiers(editor, first, first.specifiers, { named: ['c'] });
+    setImportSpecifiers(editor, second, second.specifiers, { default: 'D', named: ['e'] });
+    expect(editor.toString()).toBe(`import A, { c } from 'x';\nimport D, { b, e } from 'y';`);
+
+    const replaced = new SourceEditor(`import { a, b } from 'x';`);
+    const declaration = replaced.program.body[0] as E.ImportDeclaration;
+    setImportSpecifiers(replaced, declaration, [declaration.specifiers[0]], { named: ['c'] });
+    expect(replaced.toString()).toBe(`import { a, c } from 'x';`);
+  });
+});
+
+describe('trailing comments', () => {
+  const code = dedent`
+    export default {
+      parameters: {
+        layout: 'centered', // center it
+        docs: {}, // no docs
+      },
+      globals: {},
+    };
+  `;
+
+  it('removes a member with the comment that trails it', () => {
+    const csf = parse(code);
+    const [meta] = csf.objects({ stories: false });
+    meta.remove(['parameters', 'docs']);
+    expect(printCsf(csf).code).toContain(`layout: 'centered', // center it\n  },`);
+  });
+
+  it('moves the comment that trails a member above it', () => {
+    const csf = parse(code);
+    const [meta] = csf.objects({ stories: false });
+    meta.move(['parameters', 'layout'], ['globals', 'layout']);
+    expect(printCsf(csf).code).toBe(dedent`
+      export default {
+        parameters: {
+          docs: {}, // no docs
+        },
+        globals: {
+          // center it
+          layout: 'centered',
+        },
+      };
+    `);
+  });
+
+  it('groups members with the comments that trail them', () => {
+    const csf = parse(code);
+    const [meta] = csf.objects({ stories: false });
+    meta.group(['parameters', 'ui'], ['layout', 'docs']);
+    expect(printCsf(csf).code).toBe(dedent`
+      export default {
+        parameters: {
+          ui: {
+            // center it
+            layout: 'centered',
+            // no docs
+            docs: {},
+          },
+        },
+        globals: {},
+      };
+    `);
+  });
+});
+
+describe('computed keys', () => {
+  it('renames a computed key with a bracket in a comment', () => {
+    const csf = parse(`export default { ['a' /* ] */]: 1, async [('b')]() {} };`);
+    const [meta] = csf.objects({ stories: false });
+    expect(meta.rename(['a'], 'c')).toEqual({ ok: true, changed: true });
+    expect(meta.rename(['b'], 'd')).toEqual({ ok: true, changed: true });
+    expect(printCsf(csf).code).toBe(`export default { c: 1, async d() {} };`);
+  });
+});
+
 describe('parenthesized default exports', () => {
   it('hoists an inline meta without breaking its parentheses', () => {
     const csf = loadCsf(`export default ({ title: 'X' } satisfies Meta);\nexport const A = {};`, {
@@ -275,6 +521,28 @@ describe('multi-line members', () => {
     expect(again.getValue(['globals', 'code'])).toBe('line1\nline2');
   });
 
+  it('keeps the template literal of a method moved into another object', () => {
+    const csf = parse(
+      "export default {\n  parameters: {\n    fn() {\n      return /`/.test('a') ? `a\n  b` : 1;\n    },\n  },\n  globals: {\n    a: 1,\n  },\n};"
+    );
+    const [meta] = csf.objects({ stories: false });
+    expect(meta.move(['parameters', 'fn'], ['globals', 'fn'])).toEqual({ ok: true, changed: true });
+    expect(printCsf(csf).code).toBe(
+      "export default {\n  globals: {\n    a: 1,\n    fn() {\n      return /`/.test('a') ? `a\n  b` : 1;\n    },\n  },\n};"
+    );
+  });
+
+  it('keeps the template literal of a method set into a missing parent', () => {
+    const config = loadConfig('export default {\n  parameters: {\n    a: 1,\n  },\n};').parse();
+    config.set(
+      ['parameters', 'docs'],
+      parseExpression("{ fn() { return /`/.test('a') ? `x\n  y` : 0; } }")
+    );
+    expect(printConfig(config).code).toBe(
+      "export default {\n  parameters: {\n    a: 1,\n    docs: { fn() { return /`/.test('a') ? `x\n  y` : 0; } },\n  },\n};"
+    );
+  });
+
   it('keeps a template literal moved into a missing parent', () => {
     const csf = parse('export default {\n  parameters: {\n    code: `line1\nline2`,\n  },\n};');
     const [meta] = csf.objects({ stories: false });
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 5db26991141f..b63b505d2550 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -310,17 +310,49 @@ export interface List {
   items: readonly Span[];
 }
 
+const nextTokenStart = (code: string, comments: readonly Span[], index: number) => {
+  let next = index;
+  while (next < code.length) {
+    const comment = comments.find((candidate) => candidate.start === next);
+    if (comment) {
+      next = comment.end;
+    } else if (/\s/.test(code[next])) {
+      next++;
+    } else {
+      break;
+    }
+  }
+  return next;
+};
+
+const previousTokenEnd = (code: string, comments: readonly Span[], index: number) => {
+  let previous = index;
+  while (previous > 0) {
+    const comment = comments.find((candidate) => candidate.end === previous);
+    if (comment) {
+      previous = comment.start;
+    } else if (/\s/.test(code[previous - 1])) {
+      previous--;
+    } else {
+      break;
+    }
+  }
+  return previous;
+};
+
 /** The `{ … }` of an import or export with at least one named specifier. */
 export const specifierList = (
   editor: SourceEditor,
   declaration: E.ImportDeclaration | E.ExportNamedDeclaration
 ): List => {
+  const { code, comments } = editor;
   const items = declaration.specifiers.filter(
     (specifier) => specifier.type === 'ImportSpecifier' || specifier.type === 'ExportSpecifier'
   );
+  const afterLast = nextTokenStart(code, comments, items.at(-1)!.end);
   return {
-    open: editor.code.lastIndexOf('{', items[0].start) + 1,
-    close: editor.code.indexOf('}', items.at(-1)!.end),
+    open: previousTokenEnd(code, comments, items[0].start),
+    close: code[afterLast] === ',' ? nextTokenStart(code, comments, afterLast + 1) : afterLast,
     items,
   };
 };
@@ -331,24 +363,28 @@ export const objectList = (object: E.ObjectExpression | E.ObjectPattern): List =
   items: object.properties,
 });
 
-// Nodes are parsed without parentheses, so an element's span may sit inside `( )`. Leading holes
-// (`[, a]`) stay in place: the list opens after their commas.
+// A hole (`[a, , b]`) is an empty item right before the comma that writes it.
+const isHole = (item: Span) => item.start === item.end;
+
+// Nodes are parsed without parentheses, so an element's span may sit inside `( )`.
 export const arrayList = (editor: SourceEditor, array: E.ArrayExpression): List => {
-  const { code } = editor;
-  let open = array.start + 1;
-  for (const element of array.elements) {
+  const { code, comments } = editor;
+  const open = array.start + 1;
+  const close = array.end - 1;
+  let cursor = open;
+  const items = array.elements.map((element): Span => {
+    let item: Span;
     if (element) {
-      break;
+      item = withParentheses(code, element, cursor, close, comments);
+    } else {
+      const comma = nextTokenStart(code, comments, cursor);
+      item = { start: comma, end: comma };
     }
-    open = scanFor(code, open, array.end - 1, ',') ?? open;
-  }
-  return {
-    open,
-    close: array.end - 1,
-    items: array.elements
-      .filter((element): element is NonNullable<typeof element> => !!element)
-      .map((element) => withParentheses(code, element, open, array.end - 1, editor.comments)),
-  };
+    const next = nextTokenStart(code, comments, item.end);
+    cursor = code[next] === ',' ? next + 1 : next;
+    return item;
+  });
+  return { open, close, items };
 };
 
 /**
@@ -364,28 +400,8 @@ export const withParentheses = (
 ): Span => {
   let { start, end } = span;
   while (true) {
-    let before = start;
-    while (before > lower) {
-      const comment = comments.find((candidate) => candidate.end === before);
-      if (comment) {
-        before = comment.start;
-      } else if (/\s/.test(code[before - 1])) {
-        before--;
-      } else {
-        break;
-      }
-    }
-    let after = end;
-    while (after < upper) {
-      const comment = comments.find((candidate) => candidate.start === after);
-      if (comment) {
-        after = comment.end;
-      } else if (/\s/.test(code[after])) {
-        after++;
-      } else {
-        break;
-      }
-    }
+    const before = previousTokenEnd(code, comments, start);
+    const after = nextTokenStart(code, comments, end);
     if (before > lower && after < upper && code[before - 1] === '(' && code[after] === ')') {
       start = before - 1;
       end = after + 1;
@@ -395,16 +411,6 @@ export const withParentheses = (
   }
 };
 
-// Position right after the token that precedes an item: the comma or the opening token.
-export const separatorBefore = (code: string, list: List | E.ObjectExpression, index: number) => {
-  const { open, items } = 'open' in list ? list : objectList(list);
-  if (index === 0) {
-    return open;
-  }
-  const previous = items[index - 1];
-  return scanFor(code, previous.end, items[index].start, ',') ?? previous.end;
-};
-
 // Position right after the comma that follows an item, if it has one.
 const separatorAfter = (code: string, list: List, index: number) => {
   const item = list.items[index];
@@ -430,134 +436,48 @@ export const indentUnit = (code: string, object: E.ObjectExpression | undefined)
 
 const isMultiline = (code: string, list: List) => code.slice(list.open, list.close).includes('\n');
 
-// Offsets of the line breaks in `text` that are part of a value: inside string and regex literals
-// and template quasis. JSX text is not one: JSX trims its lines. Read from the parsed text, so no
-// scanner has to know the grammar.
-const valueLineBreaks = (text: string): Set<number> | undefined => {
-  const parsed = parseLoosely(text);
-  if (!parsed) {
-    return undefined;
-  }
-  const breaks = new Set<number>();
-  walk(parsed.program, (node) => {
+// Spans of the literals under `root` whose line breaks are part of their value: strings, regexes
+// and template quasis, but not JSX text, which JSX trims. Relative to `range.start`.
+const literalSpans = (root: Node, range: Span): Span[] => {
+  const spans: Span[] = [];
+  walk(root, (node) => {
+    const { start, end } = node as Node & Span;
+    if (end <= range.start || start >= range.end) {
+      return false;
+    }
     if (
       node.type === 'TemplateElement' ||
       (node.type === 'Literal' && (typeof node.value === 'string' || 'regex' in node))
     ) {
-      const { start, end } = node as Node & { start: number; end: number };
-      for (let index = start; index < end; index++) {
-        if (text[index - parsed.offset] === '\n') {
-          breaks.add(index - parsed.offset);
-        }
-      }
+      spans.push({ start: start - range.start, end: end - range.start });
     }
   });
-  return breaks;
+  return spans;
 };
 
-// A fragment of source: statements, a `key: value` member (a labeled statement) or an expression.
-const parseLoosely = (text: string): { program: E.Program; offset: number } | undefined => {
-  try {
-    return { program: parseModule(text).program, offset: 0 };
-  } catch {
+// What text reaching `reindent` may be: statements, an expression, an object member such as a
+// method, or a function body.
+const FRAGMENTS = [
+  ['', ''],
+  ['(', '\n)'],
+  ['({', '\n})'],
+  ['(async function* () ', '\n)'],
+] as const;
+
+const parsedLiteralSpans = (text: string): Span[] | undefined => {
+  for (const [before, after] of FRAGMENTS) {
+    let program: E.Program;
     try {
-      return { program: parseModule(`(${text}\n)`).program, offset: 1 };
+      program = parseModule(`${before}${text}${after}`).program;
     } catch {
-      return undefined;
-    }
-  }
-};
-
-// Fallback for text that is not parseable on its own, such as an import specifier: a scanner that
-// tracks strings, templates, comments and regex literals.
-const scannedValueLineBreaks = (text: string): Set<number> => {
-  const breaks = new Set<number>();
-  type Context = 'template' | { depth: number };
-  const stack: Context[] = [{ depth: 0 }];
-  let quote: string | undefined;
-  let comment: 'line' | 'block' | undefined;
-  let regex = false;
-  let last = '';
-  for (let index = 0; index < text.length; index++) {
-    const char = text[index];
-    const top = stack.at(-1)!;
-    if (quote) {
-      if (char === '\\') {
-        if (text[index + 1] === '\n') {
-          breaks.add(index + 1);
-        }
-        index++;
-      } else if (char === quote || char === '\n') {
-        quote = undefined;
-      }
-      continue;
-    }
-    if (regex) {
-      if (char === '\\') {
-        index++;
-      } else if (char === '/' || char === '\n') {
-        regex = false;
-      }
-      continue;
-    }
-    if (comment === 'line') {
-      if (char === '\n') {
-        comment = undefined;
-      }
-      continue;
-    }
-    if (comment === 'block') {
-      if (text.startsWith('*/', index)) {
-        comment = undefined;
-        index++;
-      }
-      continue;
-    }
-    if (top === 'template') {
-      if (char === '\\') {
-        index++;
-      } else if (char === '`') {
-        stack.pop();
-      } else if (text.startsWith('${', index)) {
-        stack.push({ depth: 0 });
-        index++;
-      } else if (char === '\n') {
-        breaks.add(index);
-      }
       continue;
     }
-    if (char === "'" || char === '"') {
-      quote = char;
-    } else if (char === '`') {
-      stack.push('template');
-    } else if (text.startsWith('//', index)) {
-      comment = 'line';
-    } else if (text.startsWith('/*', index)) {
-      comment = 'block';
-    } else if (char === '/' && /^$|[(,=:[!&|?{};+\-*%<>~^]/.test(last)) {
-      regex = true;
-    } else if (char === '{') {
-      top.depth++;
-    } else if (char === '}') {
-      if (top.depth === 0 && stack.length > 1) {
-        stack.pop();
-      } else {
-        top.depth--;
-      }
-    }
-    if (!/\s/.test(char)) {
-      last = char;
-    }
+    return literalSpans(program, { start: before.length, end: before.length + text.length });
   }
-  return breaks;
+  return undefined;
 };
 
-/** Re-indent the continuation lines of `text`, leaving string and template literal values alone. */
-export const reindent = (text: string, from: string, to: string) => {
-  if (from === to || !text.includes('\n')) {
-    return text;
-  }
-  const values = valueLineBreaks(text) ?? scannedValueLineBreaks(text);
+const reindentLines = (text: string, from: string, to: string, literals: readonly Span[]) => {
   let result = '';
   let cursor = 0;
   for (
@@ -567,7 +487,8 @@ export const reindent = (text: string, from: string, to: string) => {
   ) {
     result += text.slice(cursor, lineBreak + 1);
     cursor = lineBreak + 1;
-    if (!values.has(lineBreak) && text.startsWith(from, cursor)) {
+    const inLiteral = literals.some((span) => span.start < lineBreak && lineBreak < span.end);
+    if (!inLiteral && text.startsWith(from, cursor)) {
       result += to;
       cursor += from.length;
     }
@@ -575,13 +496,73 @@ export const reindent = (text: string, from: string, to: string) => {
   return result + text.slice(cursor);
 };
 
-/** Text of an item including the comments that lead it, with continuation lines dedented. */
-export const itemText = (editor: SourceEditor, list: List, item: Span) => {
-  const start = separatorBefore(editor.code, list, list.items.indexOf(item));
-  const raw = editor.code.slice(start, item.end).replace(/^\s+/, '');
-  return reindent(raw, lineIndent(editor.code, item.start), '');
+/**
+ * Re-indent the continuation lines of `text`, leaving string and template literal values alone.
+ * Text that does not parse is returned unchanged, as its literals cannot be located.
+ */
+export const reindent = (text: string, from: string, to: string) => {
+  if (from === to || !text.includes('\n')) {
+    return text;
+  }
+  const literals = parsedLiteralSpans(text);
+  return literals ? reindentLines(text, from, to, literals) : text;
+};
+
+const dedentSource = (editor: SourceEditor, start: number, end: number, from: string) => {
+  const text = editor.code.slice(start, end);
+  return from === '' || !text.includes('\n')
+    ? text
+    : reindentLines(text, from, '', literalSpans(editor.program, { start, end }));
+};
+
+// The comment after `index` on its line, when nothing else follows it there.
+const trailingComment = (editor: SourceEditor, index: number) => {
+  const { code } = editor;
+  const lineBreak = code.indexOf('\n', index);
+  const lineEnd = lineBreak === -1 ? code.length : lineBreak;
+  const comment = editor.comments.find(
+    (candidate) => candidate.start >= index && candidate.end <= lineEnd
+  );
+  const alone =
+    comment && !code.slice(index, comment.start).trim() && !code.slice(comment.end, lineEnd).trim();
+  return alone ? comment : undefined;
+};
+
+// End of an item with its separator and the comment that trails them on their line.
+const itemEnd = (editor: SourceEditor, list: List, index: number) => {
+  const end = separatorAfter(editor.code, list, index) ?? list.items[index].end;
+  return trailingComment(editor, end)?.end ?? end;
 };
 
+// Start of what an item owns: after the separator before it and the comment trailing that.
+const itemStart = (editor: SourceEditor, list: List, index: number) =>
+  index === 0 ? list.open : itemEnd(editor, list, index - 1);
+
+// `itemText` with the text from the start of the leading comments printed by `print`.
+const itemTextWith = (
+  editor: SourceEditor,
+  list: List,
+  index: number,
+  print: (start: number) => string
+) => {
+  const { code } = editor;
+  const item = list.items[index];
+  const from = itemStart(editor, list, index);
+  const text = print(from + /^\s*/.exec(code.slice(from, item.start))![0].length);
+  const end = separatorAfter(code, list, index) ?? item.end;
+  const comment = trailingComment(editor, end);
+  return comment ? `${editor.source(comment)}\n${text}` : text;
+};
+
+/**
+ * Text of an item including the comments that lead it, with continuation lines dedented. A
+ * comment that trails the item on its line moves above it, so a comma can follow the text.
+ */
+export const itemText = (editor: SourceEditor, list: List, item: Span) =>
+  itemTextWith(editor, list, list.items.indexOf(item), (start) =>
+    dedentSource(editor, start, item.end, lineIndent(editor.code, item.start))
+  );
+
 export const memberText = (
   editor: SourceEditor,
   object: E.ObjectExpression,
@@ -622,19 +603,20 @@ export const appendToList = (
     return;
   }
   const last = items.at(-1)!;
-  const trailingComma = separatorAfter(code, list, items.length - 1);
+  const comma = separatorAfter(code, list, items.length - 1);
+  // The comma of a hole writes the hole, so it is no trailing comma to keep.
+  const trailingComma = comma === undefined || isHole(last) ? '' : ',';
   if (isMultiline(code, list)) {
     const indent = lineIndent(code, last.start);
     const block = texts.map((text) => `${indent}${reindent(text, '', indent)}`).join(',\n');
-    if (trailingComma !== undefined) {
-      edits.appendLeft(trailingComma, `\n${block},`);
-    } else {
-      edits.appendLeft(last.end, `,\n${block}`);
+    if (comma === undefined) {
+      edits.appendLeft(last.end, ',');
     }
+    edits.appendLeft(itemEnd(editor, list, items.length - 1), `\n${block}${trailingComma}`);
     return;
   }
-  if (trailingComma !== undefined) {
-    edits.appendLeft(trailingComma, ` ${texts.join(', ')},`);
+  if (comma !== undefined) {
+    edits.appendLeft(comma, ` ${texts.join(', ')}${trailingComma}`);
   } else {
     edits.appendLeft(last.end, `, ${texts.join(', ')}`);
   }
@@ -658,7 +640,7 @@ export const prependToList = (editor: SourceEditor, list: List, texts: string[],
   edits.appendRight(first.start, `${texts.join(', ')}, `);
 };
 
-/** Remove items with their leading comments and separators from a list. */
+/** Remove items with their separators and the comments that lead and trail them from a list. */
 export const removeFromList = (editor: SourceEditor, list: List, removedItems: readonly Span[]) => {
   const { code, edits } = editor;
   const { items } = list;
@@ -674,22 +656,20 @@ export const removeFromList = (editor: SourceEditor, list: List, removedItems: r
     }
     return;
   }
-  const keptIndexes = items.flatMap((item, index) => (removed.has(item) ? [] : [index]));
-  const lastKept = keptIndexes.at(-1)!;
+  const lastKept = items.findLastIndex((item) => !removed.has(item));
   items.forEach((item, index) => {
     if (!removed.has(item)) {
       return;
     }
-    const after = separatorAfter(code, list, index);
-    if (index > lastKept && after === undefined) {
-      // Trailing item without a comma: drop the comma of the last kept item instead.
+    if (index > lastKept && separatorAfter(code, list, index) === undefined) {
+      // Trailing item without a comma: drop the comma of the last kept item instead, unless that
+      // comma writes a hole.
       const previous = items[lastKept];
-      const comma = separatorAfter(code, list, lastKept)!;
-      edits.remove(previous.end, comma);
-      edits.remove(comma, item.end);
-      return;
+      if (!isHole(previous)) {
+        edits.remove(previous.end, separatorAfter(code, list, lastKept)!);
+      }
     }
-    edits.remove(separatorBefore(code, list, index), after ?? item.end);
+    edits.remove(itemStart(editor, list, index), itemEnd(editor, list, index));
   });
 };
 
@@ -706,8 +686,9 @@ export const groupMembers = (
   members: Property[],
   key: string
 ) => {
+  const list = objectList(object);
   const texts = members.map((member) => memberText(editor, object, member));
-  const first = object.properties.indexOf(members[0]);
+  const first = list.items.indexOf(members[0]);
   const multiline = editor.code.slice(object.start, object.end).includes('\n');
   removeMembers(editor, object, members.slice(1));
   const before = editor.code.slice(0, members[0].start);
@@ -715,10 +696,17 @@ export const groupMembers = (
   const inner = multiline
     ? reindent(printMembers(texts, indentUnit(editor.code, object)), '', indent)
     : `{ ${texts.join(', ')} }`;
-  // Leading comments of the first member move into the group with it.
-  const start = separatorBefore(editor.code, object, first);
+  // The comments of the first member move into the group with it.
   const lead = multiline ? `\n${indent}` : ' ';
-  editor.edits.overwrite(start, members[0].end, `${lead}${printKey(key, editor.quote)}: ${inner}`);
+  editor.edits.overwrite(
+    itemStart(editor, list, first),
+    members[0].end,
+    `${lead}${printKey(key, editor.quote)}: ${inner}`
+  );
+  const comma = separatorAfter(editor.code, list, first) ?? members[0].end;
+  if (itemEnd(editor, list, first) > comma) {
+    editor.edits.remove(comma, itemEnd(editor, list, first));
+  }
 };
 
 export const removeMembers = (
@@ -733,19 +721,40 @@ const NEXT_LINE_DIRECTIVE =
 const leadingDirectives = (editor: SourceEditor) =>
   editor.program.body.filter((statement) => 'directive' in statement && statement.directive);
 
+const FILE_PRAGMA =
+  /^!|@(license|preserve|flow|jsx\w*|(vitest|jest)-environment|ts-nocheck)\b|^\s*eslint-(disable|env)(?![\w-])|^\/\s*<reference\b/;
+
+const isJSDoc = (comment: E.Comment) => comment.type === 'Block' && comment.value.startsWith('*');
+
 /**
- * Comments leading the file's first statement that form the file header, such as a license. A
- * directive that applies only to that statement, such as `@ts-expect-error`, ends the header.
+ * Comments before the file's first statement that form the file header, such as a license. The
+ * JSDoc blocks and next-line directives such as `@ts-expect-error` directly above the statement
+ * belong to it instead, as does everything from such a directive on, unless they are pragmas.
  */
 export const headerComments = (editor: SourceEditor): E.Comment[] => {
+  const { code } = editor;
   const directives = leadingDirectives(editor);
   const first = editor.program.body[directives.length];
+  if (!first) {
+    return [];
+  }
   const from = directives.at(-1)?.end ?? 0;
   const leading = editor.comments.filter(
-    (comment) => comment.start >= from && first && comment.end <= first.start
+    (comment) => comment.start >= from && comment.end <= first.start
+  );
+  const isDirective = (comment: E.Comment) => NEXT_LINE_DIRECTIVE.test(comment.value);
+  let owned = leading.length;
+  while (
+    owned > 0 &&
+    (isJSDoc(leading[owned - 1]) || isDirective(leading[owned - 1])) &&
+    !/\n\s*\n/.test(code.slice(leading[owned - 1].end, leading[owned]?.start ?? first.start))
+  ) {
+    owned--;
+  }
+  const directive = leading.findIndex(isDirective);
+  return (directive === -1 ? leading : leading.slice(0, directive)).filter(
+    (comment, index) => index < owned || FILE_PRAGMA.test(comment.value)
   );
-  const directive = leading.findIndex(({ value }) => NEXT_LINE_DIRECTIVE.test(value));
-  return directive === -1 ? leading : leading.slice(0, directive);
 };
 
 /**
@@ -867,7 +876,7 @@ export const removeStatements = (editor: SourceEditor, statements: ReadonlySet<N
 
 /**
  * Rewrite an import's specifiers to `kept` plus `added`, keeping each kept specifier as written,
- * comments included.
+ * comments and layout included.
  */
 export const setImportSpecifiers = (
   editor: SourceEditor,
@@ -877,24 +886,35 @@ export const setImportSpecifiers = (
 ) => {
   const { specifiers } = declaration;
   const named = specifiers.filter((specifier) => specifier.type === 'ImportSpecifier');
-  const list = named.length ? specifierList(editor, declaration) : undefined;
-  const namedTexts = [
-    ...named.filter((specifier) => kept.includes(specifier)).map((s) => itemText(editor, list!, s)),
-    ...(added.named ?? []),
-  ];
-  const parts = [
+  const others = specifiers.filter((specifier) => specifier.type !== 'ImportSpecifier');
+  const head = [
     ...(added.default ? [added.default] : []),
-    ...specifiers
-      .filter((specifier) => specifier.type !== 'ImportSpecifier' && kept.includes(specifier))
-      .map((specifier) => editor.source(specifier)),
-    ...(namedTexts.length > 0 ? [`{ ${namedTexts.join(', ')} }`] : []),
+    ...others.filter((specifier) => kept.includes(specifier)).map((s) => editor.source(s)),
   ];
   const kind = declaration.importKind === 'type' ? 'import type' : 'import';
-  editor.edits.overwrite(
-    declaration.start,
-    declaration.source.start,
-    `${kind} ${parts.join(', ')} from `
-  );
+  const addedNamed = added.named ?? [];
+  if (!named.some((specifier) => kept.includes(specifier))) {
+    const parts = [...head, ...(addedNamed.length > 0 ? [`{ ${addedNamed.join(', ')} }`] : [])];
+    editor.edits.overwrite(
+      declaration.start,
+      declaration.source.start,
+      `${kind} ${parts.join(', ')} from `
+    );
+    return;
+  }
+  const list = specifierList(editor, declaration);
+  const removed = named.filter((specifier) => !kept.includes(specifier));
+  removeFromList(editor, list, removed);
+  if (addedNamed.length > 0) {
+    appendToList(editor, list, addedNamed);
+  }
+  if (added.default || others.some((specifier) => !kept.includes(specifier))) {
+    editor.edits.overwrite(
+      declaration.start,
+      list.open - 1,
+      `${kind} ${head.map((part) => `${part}, `).join('')}`
+    );
+  }
 };
 
 export const replaceValue = (editor: SourceEditor, member: Property, text: string) => {
@@ -914,22 +934,19 @@ export const replaceValue = (editor: SourceEditor, member: Property, text: strin
   editor.edits.overwrite(member.value.start, member.value.end, text);
 };
 
-export const keySource = (editor: SourceEditor, member: Property) => {
-  if (!member.computed) {
-    return editor.source(member.key);
-  }
-  const open = editor.code.lastIndexOf('[', member.key.start);
-  const close = editor.code.indexOf(']', member.key.end);
-  return editor.code.slice(open, close + 1);
-};
+export const keySource = (editor: SourceEditor, member: Property) =>
+  editor.source(keyRange(editor, member));
 
+// A computed key's span includes its brackets: the tokens around the key and its parentheses.
 const keyRange = (editor: SourceEditor, member: Property): Span => {
   if (!member.computed) {
     return member.key;
   }
+  const { code, comments } = editor;
+  const key = withParentheses(code, member.key, member.start, member.end, comments);
   return {
-    start: editor.code.lastIndexOf('[', member.key.start),
-    end: editor.code.indexOf(']', member.key.end) + 1,
+    start: previousTokenEnd(code, comments, key.start) - 1,
+    end: nextTokenStart(code, comments, key.end) + 1,
   };
 };
 
@@ -951,14 +968,15 @@ export const renamedMemberText = (
   key: string
 ) => {
   const list = objectList(object);
-  const start = separatorBefore(editor.code, list, list.items.indexOf(member));
-  const { code } = editor;
-  const renamed = member.shorthand
-    ? code.slice(start, member.start) + `${key}: ${editor.source(member.value)}`
-    : code.slice(start, keyRange(editor, member).start) +
-      key +
-      code.slice(keyRange(editor, member).end, member.end);
-  return reindent(renamed.replace(/^\s+/, ''), lineIndent(code, member.start), '');
+  const indent = lineIndent(editor.code, member.start);
+  const dedent = (start: number, end: number) => dedentSource(editor, start, end, indent);
+  return itemTextWith(editor, list, list.items.indexOf(member), (start) => {
+    if (member.shorthand) {
+      return `${dedent(start, member.start)}${key}: ${editor.source(member.value)}`;
+    }
+    const range = keyRange(editor, member);
+    return `${dedent(start, range.start)}${key}${dedent(range.end, member.end)}`;
+  });
 };
 
 // Function expression source for a method, so reads and transforms of `play() {}` see a value.

From 892c52b18ba535093c923de058d0afe907138492 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 16 Oct 2026 18:32:05 +0200
Subject: [PATCH 129/326] fix(csf-tools): adapt every inserted expression and
 remove declarators per statement

set, transform and appendNodeToArray share one helper that wraps
sequence expressions and ends a trailing line comment, so an inserted
'1 // note' no longer comments out the next member. Renaming an
unaliased export writes 'a as b'. group and remove drop a whole
statement once all its declarators go. removeField unwraps config
factories, setRequireImport dedupes like setImport, and removeImport
goes through setImportSpecifiers so specifier comments are kept.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/ConfigFile.test.ts    |  97 +++++++++-
 code/core/src/csf-tools/ConfigFile.ts         | 177 +++++++-----------
 code/core/src/csf-tools/ConfigObject.test.ts  |  11 ++
 code/core/src/csf-tools/ConfigObject.ts       |  64 ++++---
 code/core/src/csf-tools/CsfObject.test.ts     |  16 +-
 code/core/src/csf-tools/CsfObject.ts          |   9 +-
 .../core/src/csf-tools/CsfObjectGroup.test.ts |  27 +++
 7 files changed, 258 insertions(+), 143 deletions(-)

diff --git a/code/core/src/csf-tools/ConfigFile.test.ts b/code/core/src/csf-tools/ConfigFile.test.ts
index 4fe2f398a2cc..6c0ad3c210f7 100644
--- a/code/core/src/csf-tools/ConfigFile.test.ts
+++ b/code/core/src/csf-tools/ConfigFile.test.ts
@@ -3,7 +3,7 @@ import { describe, expect, it } from 'vitest';
 import { dedent } from 'ts-dedent';
 
 import { formatConfig, loadConfig, printConfig } from './ConfigFile.ts';
-import type { CsfExpression } from './CsfObject.ts';
+import { type CsfExpression, parseExpression } from './CsfObject.ts';
 
 expect.addSnapshotSerializer({
   serialize: (val: any) => (typeof val === 'string' ? val : val.toString()),
@@ -811,6 +811,34 @@ describe('ConfigFile', () => {
         appendToArray(['addons'], 'b', `export default { addons: [(/* c */ cond ? 'a' : 'c')] };`)
       ).toBe(`export default { addons: [(/* c */ cond ? 'a' : 'c'), 'b'] };`);
     });
+
+    it.each([
+      {
+        source: `export default { addons: ['b'] };`,
+        expression: 'x, y',
+        output: `export default { addons: ['b', (x, y)] };`,
+      },
+      {
+        source: `export default { addons: ['b'] };`,
+        expression: `'x' //c`,
+        output: `export default { addons: ['b', 'x' //c\n] };`,
+      },
+      {
+        source: `export default {};`,
+        expression: 'x, y',
+        output: `export default { addons: [(x, y)] };`,
+      },
+      {
+        source: `export default {};`,
+        expression: `'x' //c`,
+        output: `export default {\n  addons: ['x' //c\n  ],\n};`,
+      },
+    ])('appends $expression as one element to $source', ({ source, expression, output }) => {
+      const config = loadConfig(source).parse();
+      config.appendNodeToArray(['addons'], parseExpression(expression));
+
+      expect(printConfig(config).code).toBe(output);
+    });
   });
 
   describe('removeField', () => {
@@ -1062,6 +1090,12 @@ describe('ConfigFile', () => {
         `);
       });
 
+      it('root property of a config factory', () => {
+        expect(
+          removeField(['addons'], `export default defineMain({ framework: 'x', addons: ['a'] });`)
+        ).toBe(`export default defineMain({ framework: 'x' });`);
+      });
+
       it('root globals as const satisfies as variable', () => {
         expect(
           removeField(
@@ -1533,6 +1567,44 @@ describe('ConfigFile', () => {
       `);
     });
 
+    it.each([
+      {
+        source: `import { /* A */ a } from 'x';`,
+        specifier: ['b'],
+        output: `import { /* A */ a, b } from 'x';`,
+      },
+      {
+        source: `import { /* A */ a } from 'x';`,
+        specifier: 'd',
+        output: `import d, { /* A */ a } from 'x';`,
+      },
+      {
+        source: `import { a } from 'x';`,
+        specifier: { namespace: 'ns' },
+        output: `import { a } from 'x';\nimport * as ns from 'x';`,
+      },
+      {
+        source: `import 'x';\nimport 'y';`,
+        specifier: { namespace: 'ns' },
+        output: `import 'x';\nimport * as ns from 'x';\nimport 'y';`,
+      },
+      {
+        source: `import * as ns from 'x';`,
+        specifier: ['a'],
+        output: `import * as ns from 'x';\nimport { a } from 'x';`,
+      },
+      {
+        source: `import foo from 'x';`,
+        specifier: 'bar',
+        output: `import foo from 'x';\nimport bar from 'x';`,
+      },
+    ])('adds $specifier to $source', ({ source, specifier, output }) => {
+      const config = loadConfig(source).parse();
+      config.setImport(specifier, 'x');
+
+      expect(printConfig(config).code).toBe(output);
+    });
+
     it(`supports setting a namespaced import`, () => {
       const config = loadConfig('').parse();
       config.setImport({ namespace: 'path' }, 'path');
@@ -1629,6 +1701,22 @@ describe('ConfigFile', () => {
       `);
     });
 
+    it.each([
+      {
+        source: `module.exports = {};`,
+        output: `const { a } = require("x");\nmodule.exports = {};`,
+      },
+      {
+        source: `const { b } = require('x');`,
+        output: `const { b, a } = require('x');`,
+      },
+    ])('adds a repeated name once to $source', ({ source, output }) => {
+      const config = loadConfig(source).parse();
+      config.setRequireImport(['a', 'a'], 'x');
+
+      expect(printConfig(config).code).toBe(output);
+    });
+
     it(`supports setting a named import for a field where the source already exists without "node:" prefix`, () => {
       const source = dedent`
         const { dirname } = require('path');
@@ -1764,6 +1852,13 @@ describe('ConfigFile', () => {
       `);
     });
 
+    it(`keeps the comments of the remaining specifiers`, () => {
+      const config = loadConfig(`import { /* A */ a, /* B */ b, /* C */ c } from 'x';`).parse();
+      config.removeImport(['b'], 'x');
+
+      expect(printConfig(config).code).toBe(`import { /* A */ a, /* C */ c } from 'x';`);
+    });
+
     it(`removes a namespace ES6 import`, () => {
       const source = dedent`
         import * as path from 'path';
diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index 2cf0f1278634..342e19f63a9e 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -17,7 +17,7 @@ import {
   createCsfObject,
   literalRoot,
   parseExpression,
-  printExpression,
+  placeableExpression,
 } from './CsfObject.ts';
 import {
   type E,
@@ -39,7 +39,7 @@ import {
   printValue,
   removeFromList,
   removeStatement,
-  specifierList,
+  setImportSpecifiers,
 } from './estree/editor.ts';
 import { findVarInitialization } from './findVarInitialization.ts';
 
@@ -133,6 +133,9 @@ const _findVarDeclarator = (
   return undefined;
 };
 
+const namesToAdd = (names: readonly string[], has: (name: string) => boolean) =>
+  [...new Set(names)].filter((name) => !has(name));
+
 const isRequireOf = (node: Node | null | undefined, fromImport: string) =>
   node?.type === 'CallExpression' &&
   isIdentifier(node.callee, 'require') &&
@@ -703,26 +706,11 @@ export class ConfigFile implements CsfObject {
             removedRootProperty = true;
           }
         }
-        // default export
-        if (node.type === 'ExportDefaultDeclaration') {
-          const resolved = this._resolveDeclaration(node.declaration as Node);
-          if (resolved?.type === 'ObjectExpression') {
-            removeProperty(resolved, path[0]);
-            removedRootProperty = true;
-          }
-        }
-        // module.exports
-        if (
-          node.type === 'ExpressionStatement' &&
-          node.expression.type === 'AssignmentExpression' &&
-          node.expression.left.type === 'MemberExpression' &&
-          isIdentifier(node.expression.left.object, 'module') &&
-          isIdentifier(node.expression.left.property, 'exports') &&
-          node.expression.right.type === 'ObjectExpression'
-        ) {
-          removeProperty(node.expression.right, path[0]);
-          removedRootProperty = true;
-        }
+      }
+      // The config object `parse` found, unwrapped from factory calls like `defineMain({})`.
+      if (this._exportsObject) {
+        removeProperty(this._exportsObject, path[0]);
+        removedRootProperty = true;
       }
 
       if (removedRootProperty) {
@@ -749,15 +737,11 @@ export class ConfigFile implements CsfObject {
 
   appendNodeToArray(path: string[], node: CsfExpression) {
     const current = this.getFieldNode(path);
+    const source = placeableExpression(node);
     if (!current) {
-      this.set(path, parseExpression(`[${printExpression(node)}]`));
+      this.set(path, parseExpression(`[${source}]`));
     } else if (current.type === 'ArrayExpression') {
-      appendToList(
-        this._editorSource,
-        arrayList(this._editorSource, current),
-        [printExpression(node)],
-        ''
-      );
+      appendToList(this._editorSource, arrayList(this._editorSource, current), [source], '');
       this._commit();
     } else {
       throw new Error(`Expected array at '${path.join('.')}', got '${current.type}'`);
@@ -909,21 +893,21 @@ export class ConfigFile implements CsfObject {
         prependStatement(editor, `const ${importSpecifier} = require(${source});`);
       }
       // if the import specifier is an array, we're dealing with named imports
-    } else if (requireDeclaration) {
-      const pattern = requireDeclaration.declarations[0].id;
-      if (pattern.type === 'ObjectPattern') {
-        const missing = importSpecifier.filter(
-          (specifier) =>
-            !pattern.properties.some(
-              (property) => property.type === 'Property' && isIdentifier(property.key, specifier)
-            )
-        );
-        if (missing.length > 0) {
-          appendToList(editor, objectList(pattern), missing);
-        }
-      }
     } else {
-      prependStatement(editor, `const { ${importSpecifier.join(', ')} } = require(${source});`);
+      const pattern = requireDeclaration?.declarations[0].id;
+      const names = namesToAdd(
+        importSpecifier,
+        (name) =>
+          pattern?.type === 'ObjectPattern' &&
+          pattern.properties.some(
+            (property) => property.type === 'Property' && isIdentifier(property.key, name)
+          )
+      );
+      if (!pattern) {
+        prependStatement(editor, `const { ${names.join(', ')} } = require(${source});`);
+      } else if (pattern.type === 'ObjectPattern' && names.length > 0) {
+        appendToList(editor, objectList(pattern), names);
+      }
     }
     this._commit();
   }
@@ -977,14 +961,26 @@ export class ConfigFile implements CsfObject {
     }
     const editor = this._editorSource;
     const source = printString(fromImport, this._quote);
-    const has = (type: string, name: string) =>
-      importDeclaration?.specifiers.some(
+    const has = (type: string, name?: string) =>
+      !!importDeclaration?.specifiers.some(
         (specifier) =>
           specifier.type === type &&
-          (type === 'ImportSpecifier'
-            ? isIdentifier((specifier as E.ImportSpecifier).imported, name)
-            : specifier.local.name === name)
+          (name === undefined ||
+            (type === 'ImportSpecifier'
+              ? isIdentifier((specifier as E.ImportSpecifier).imported, name)
+              : specifier.local.name === name))
       );
+    // A clause the declaration cannot take gets a declaration of its own right after it, which
+    // keeps the module evaluation order.
+    const addImport = (clause: string, merged?: { default?: string; named?: string[] }) => {
+      if (!importDeclaration) {
+        prependStatement(editor, `import ${clause} from ${source};`);
+      } else if (merged) {
+        setImportSpecifiers(editor, importDeclaration, importDeclaration.specifiers, merged);
+      } else {
+        editor.edits.appendLeft(importDeclaration.end, `\nimport ${clause} from ${source};`);
+      }
+    };
 
     // Handle side-effect imports (e.g., import 'foo')
     if (importSpecifier === null) {
@@ -993,66 +989,31 @@ export class ConfigFile implements CsfObject {
       }
       // Handle default imports e.g. import foo from 'bar'
     } else if (typeof importSpecifier === 'string') {
-      if (!importDeclaration) {
-        prependStatement(editor, `import ${importSpecifier} from ${source};`);
-      } else if (!has('ImportDefaultSpecifier', importSpecifier)) {
-        this._addSpecifiers(importDeclaration, { defaultName: importSpecifier });
+      if (!has('ImportDefaultSpecifier', importSpecifier)) {
+        addImport(
+          importSpecifier,
+          has('ImportDefaultSpecifier') ? undefined : { default: importSpecifier }
+        );
       }
       // Handle named imports e.g. import { foo } from 'bar'
     } else if (Array.isArray(importSpecifier)) {
-      const names = [...new Set(importSpecifier)];
-      if (!importDeclaration) {
-        prependStatement(editor, `import { ${names.join(', ')} } from ${source};`);
-      } else {
-        const missing = names.filter((name) => !has('ImportSpecifier', name));
-        if (missing.length > 0) {
-          this._addSpecifiers(importDeclaration, { named: missing });
-        }
+      const names = namesToAdd(importSpecifier, (name) => has('ImportSpecifier', name));
+      if (names.length > 0) {
+        addImport(
+          `{ ${names.join(', ')} }`,
+          has('ImportNamespaceSpecifier') ? undefined : { named: names }
+        );
       }
       // Handle namespace imports e.g. import * as foo from 'bar'
-    } else if (importSpecifier.namespace) {
-      if (!importDeclaration) {
-        prependStatement(editor, `import * as ${importSpecifier.namespace} from ${source};`);
-      } else if (!has('ImportNamespaceSpecifier', importSpecifier.namespace)) {
-        this._addSpecifiers(importDeclaration, { namespace: importSpecifier.namespace });
-      }
+    } else if (
+      importSpecifier.namespace &&
+      !has('ImportNamespaceSpecifier', importSpecifier.namespace)
+    ) {
+      addImport(`* as ${importSpecifier.namespace}`);
     }
     this._commit();
   }
 
-  _addSpecifiers(
-    declaration: E.ImportDeclaration,
-    added: { defaultName?: string; named?: string[]; namespace?: string }
-  ) {
-    const editor = this._editorSource;
-    const named = declaration.specifiers.filter(
-      (specifier): specifier is E.ImportSpecifier => specifier.type === 'ImportSpecifier'
-    );
-    if (added.named && named.length > 0) {
-      appendToList(editor, specifierList(editor, declaration), added.named);
-      return;
-    }
-    const defaultSpecifier = declaration.specifiers.find(
-      (specifier) => specifier.type === 'ImportDefaultSpecifier'
-    );
-    const namespace = declaration.specifiers.find(
-      (specifier) => specifier.type === 'ImportNamespaceSpecifier'
-    );
-    const parts = [
-      added.defaultName ?? (defaultSpecifier && editor.source(defaultSpecifier)),
-      added.namespace ? `* as ${added.namespace}` : namespace && editor.source(namespace),
-      named.length > 0
-        ? `{ ${named.map((specifier) => editor.source(specifier)).join(', ')} }`
-        : added.named && `{ ${added.named.join(', ')} }`,
-    ].filter(Boolean);
-    const kind = declaration.importKind === 'type' ? 'import type' : 'import';
-    editor.edits.overwrite(
-      declaration.start,
-      declaration.source.start,
-      `${kind} ${parts.join(', ')} from `
-    );
-  }
-
   _removeRequireImport(
     importSpecifier: string[] | string | { namespace: string } | null,
     fromImport: string
@@ -1138,20 +1099,10 @@ export class ConfigFile implements CsfObject {
       removeStatement(editor, importDeclaration);
       return;
     }
-    const kept = importDeclaration.specifiers.filter((specifier) => !removed.includes(specifier));
-    const defaultSpecifier = kept.find((specifier) => specifier.type === 'ImportDefaultSpecifier');
-    const namespace = kept.find((specifier) => specifier.type === 'ImportNamespaceSpecifier');
-    const named = kept.filter((specifier) => specifier.type === 'ImportSpecifier');
-    const parts = [
-      defaultSpecifier && editor.source(defaultSpecifier),
-      namespace && editor.source(namespace),
-      named.length > 0 && `{ ${named.map((specifier) => editor.source(specifier)).join(', ')} }`,
-    ].filter(Boolean);
-    const kind = importDeclaration.importKind === 'type' ? 'import type' : 'import';
-    editor.edits.overwrite(
-      importDeclaration.start,
-      importDeclaration.source.start,
-      `${kind} ${parts.join(', ')} from `
+    setImportSpecifiers(
+      editor,
+      importDeclaration,
+      importDeclaration.specifiers.filter((specifier) => !removed.includes(specifier))
     );
   }
 
diff --git a/code/core/src/csf-tools/ConfigObject.test.ts b/code/core/src/csf-tools/ConfigObject.test.ts
index cefcd5ed253e..55f1635931fc 100644
--- a/code/core/src/csf-tools/ConfigObject.test.ts
+++ b/code/core/src/csf-tools/ConfigObject.test.ts
@@ -355,6 +355,17 @@ describe('ConfigFile mutations', () => {
     expect(printConfig(config).code).toBe('export const sibling = true;');
   });
 
+  it.each([
+    { name: 'b', output: 'const a = 1;\nexport { a as b };' },
+    { name: 'custom-field', output: 'const a = 1;\nexport { a as "custom-field" };' },
+  ])('aliases an unaliased export specifier renamed to $name', ({ name, output }) => {
+    const config = loadConfig(`const a = 1;\nexport { a };`).parse();
+
+    expect(config.rename(['a'], name)).toEqual({ ok: true, changed: true });
+    expect(printConfig(config).code).toBe(output);
+    expect(config.getValue([name])).toBe(1);
+  });
+
   it('can create named exports in an empty file', () => {
     const config = loadConfig('').parse();
     const object = config;
diff --git a/code/core/src/csf-tools/ConfigObject.ts b/code/core/src/csf-tools/ConfigObject.ts
index 8fa97b982232..85b2d38772e7 100644
--- a/code/core/src/csf-tools/ConfigObject.ts
+++ b/code/core/src/csf-tools/ConfigObject.ts
@@ -323,6 +323,12 @@ export const locateConfigRoot = (
   return { ok: true, root: namedExportsRoot(editor, entries) };
 };
 
+const declaratorList = (statement: E.VariableDeclaration): List => ({
+  open: statement.start + statement.kind.length,
+  close: statement.declarations.at(-1)!.end,
+  items: statement.declarations,
+});
+
 const exportedName = (node: E.ModuleExportName) =>
   node.type === 'Identifier' ? node.name : (node as E.StringLiteral).value;
 
@@ -366,29 +372,35 @@ const namedExportsRoot = (editor: SourceEditor, entries: NamedEntry[]): ObjectRo
     }
   };
 
-  const removeEntry = (entry: NamedEntry) => {
-    if (entry.specifier) {
-      const { statement, specifier } = entry.specifier;
-      if (statement.specifiers.length === 1) {
-        removeStatement(editor, statement);
-      } else {
-        removeFromList(editor, specifierList(editor, statement), [specifier]);
-      }
-      return;
-    }
-    if (entry.declaration.type === 'VariableDeclarator') {
-      const statement = entry.statement as E.VariableDeclaration;
-      if (statement.declarations.length > 1) {
-        const list: List = {
-          open: statement.start + statement.kind.length,
-          close: statement.declarations.at(-1)!.end,
-          items: statement.declarations,
+  const removalOf = ({ specifier, statement, exportStatement, declaration }: NamedEntry) =>
+    specifier
+      ? {
+          statement: specifier.statement,
+          list: specifierList(editor, specifier.statement),
+          item: specifier.specifier,
+        }
+      : {
+          statement: exportStatement ?? statement,
+          list: statement.type === 'VariableDeclaration' ? declaratorList(statement) : undefined,
+          item: declaration,
         };
-        removeFromList(editor, list, [entry.declaration]);
-        return;
+
+  // One statement at a time: list edits made for each of its entries separately would overlap.
+  const removeEntries = (removed: readonly NamedEntry[]) => {
+    const byStatement = new Map<Node, { list?: List; items: Span[] }>();
+    for (const entry of removed) {
+      const { statement, list, item } = removalOf(entry);
+      const group = byStatement.get(statement) ?? { list, items: [] };
+      group.items.push(item);
+      byStatement.set(statement, group);
+    }
+    for (const [statement, { list, items }] of byStatement) {
+      if (list && items.length < list.items.length) {
+        removeFromList(editor, list, items);
+      } else {
+        removeStatement(editor, statement);
       }
     }
-    removeStatement(editor, entry.exportStatement ?? entry.statement);
   };
 
   const entryOf = (member: Property) => {
@@ -404,7 +416,7 @@ const namedExportsRoot = (editor: SourceEditor, entries: NamedEntry[]): ObjectRo
     detached: true,
     append: declare,
     prepend: declare,
-    remove: (members) => members.forEach((member) => removeEntry(entryOf(member))),
+    remove: (members) => removeEntries(members.map(entryOf)),
     replaceValue: (member, text) => {
       const { declaration } = entryOf(member);
       if (declaration.type === 'VariableDeclarator') {
@@ -429,11 +441,13 @@ const namedExportsRoot = (editor: SourceEditor, entries: NamedEntry[]): ObjectRo
       const entry = entryOf(member);
       const name = key;
       if (entry.specifier) {
-        const exported = entry.specifier.specifier.exported;
+        const { local, exported } = entry.specifier.specifier;
+        const printed = isValidIdentifier(name) ? name : printString(name, quote);
+        // In `export { a }` the exported name is the local one, which has to stay.
         editor.edits.overwrite(
           exported.start,
           exported.end,
-          isValidIdentifier(name) ? name : printString(name, quote)
+          exported.start === local.start ? `${editor.source(local)} as ${printed}` : printed
         );
         return;
       }
@@ -445,11 +459,11 @@ const namedExportsRoot = (editor: SourceEditor, entries: NamedEntry[]): ObjectRo
         editor.edits.overwrite(id.start, id.end, name);
         return;
       }
-      removeEntry(entry);
+      removeEntries([entry]);
       declare([{ key: name, value: valueSource(editor, member), text: '' }]);
     },
     group: (members, key) => {
-      members.forEach((member) => removeEntry(entryOf(member)));
+      removeEntries(members.map(entryOf));
       const inner = members
         .map((member) => `${printKey(entryOf(member).name, quote)}: ${valueSource(editor, member)}`)
         .join(', ');
diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index df160158a83b..28d1a2d64b3c 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -1,7 +1,7 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import { loadCsf, printCsf } from './CsfFile.ts';
-import { loadConfig } from './ConfigFile.ts';
+import { loadConfig, printConfig } from './ConfigFile.ts';
 import { type CsfValue, parseExpression, printExpression } from './CsfObject.ts';
 
 const parse = (source: string) =>
@@ -183,6 +183,20 @@ describe('CsfObject', () => {
     );
   });
 
+  it.each([
+    { expression: '1 // note', output: 'export default {\n  a: 1 // note\n, b: 2,\n};' },
+    { expression: 'x, y', output: 'export default {\n  a: (x, y), b: 2,\n};' },
+  ])('places a transformed $expression so the code after it survives', ({ expression, output }) => {
+    const config = loadConfig('export default {\n  a: 0, b: 2,\n};').parse();
+
+    expect(config.transform(['a'], () => parseExpression(expression))).toEqual({
+      ok: true,
+      changed: true,
+    });
+    expect(printConfig(config).code).toBe(output);
+    expect(loadConfig(output).parse().getValue(['b'])).toBe(2);
+  });
+
   it('edits a local object referenced by a story and cleans up the empty parent', () => {
     const csf = parse(
       `const a11y = { element: '#root' }; export default {}; export const Story = { parameters: { a11y } };`
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index 2bb46e488e14..8d551862894f 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -102,6 +102,10 @@ export const printExpression = (node: Node): string => {
   return source;
 };
 
+// The expression's source, adapted so the code placed after it survives.
+export const placeableExpression = (node: Node): string =>
+  placeableSource(printExpression(node), node.type);
+
 export interface CsfObject {
   /**
    * Identify the config, meta, story, annotation, or call argument this editor represents.
@@ -450,8 +454,7 @@ class CsfObjectEditor implements CsfObject {
 
   private sourceFor(value: CsfValue | CsfExpression) {
     if (isSpan(value)) {
-      const node = value as Node;
-      return placeableSource(printExpression(node), node.type);
+      return placeableExpression(value as Node);
     }
     if (isAstLike(value)) {
       throw new Error(
@@ -506,7 +509,7 @@ class CsfObjectEditor implements CsfObject {
     if (!derived || derived === value) {
       return { ok: true, changed: false };
     }
-    parent.root.replaceValue(property, printExpression(derived));
+    parent.root.replaceValue(property, placeableExpression(derived));
     return this.success();
   }
 
diff --git a/code/core/src/csf-tools/CsfObjectGroup.test.ts b/code/core/src/csf-tools/CsfObjectGroup.test.ts
index 2bdabfbdcba1..7ed76746d51b 100644
--- a/code/core/src/csf-tools/CsfObjectGroup.test.ts
+++ b/code/core/src/csf-tools/CsfObjectGroup.test.ts
@@ -68,6 +68,33 @@ describe('CsfObject.group', () => {
     expect(config.mutationDiagnostics).toEqual([]);
   });
 
+  it.each([
+    {
+      source: 'export const showNav = false, showPanel = true;',
+      output: 'export const layout = { showNav: false, showPanel: true };',
+    },
+    {
+      source: 'const showNav = false;\nconst showPanel = true;\nexport { showNav, showPanel };',
+      output:
+        'const showNav = false;\nconst showPanel = true;\nexport const layout = { showNav: false, showPanel: true };',
+    },
+    {
+      source: 'export const layout = {};\nexport const showNav = false, showPanel = true;',
+      output: 'export const layout = { showNav: false, showPanel: true };',
+    },
+  ])(
+    'removes a statement once all its grouped exports are gone in $source',
+    ({ source, output }) => {
+      const config = loadConfig(source).parse();
+
+      expect(config.group(['layout'], ['showNav', 'showPanel'])).toEqual({
+        ok: true,
+        changed: true,
+      });
+      expect(printConfig(config).code.replace(/\n+/g, '\n').trim()).toBe(output);
+    }
+  );
+
   it('rejects grouping named exports across an intervening statement without reordering execution', () => {
     const source = `
       export const showNav = record('nav');

From dcc4c5bff263cb4fac80d7cffd16086508857272 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 16 Oct 2026 18:32:05 +0200
Subject: [PATCH 130/326] fix(csf-tools): reject an export of a name the file
 never declares

Babel reported export { Missing } as a parse error; OXC indexed a story
that could not load. The check uses the program's bindings and accepts
names that only TypeScript declares.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/CsfFile.test.ts | 31 +++++++++++++++++++++++
 code/core/src/csf-tools/CsfFile.ts      | 33 +++++++++++++++++++++++++
 2 files changed, 64 insertions(+)

diff --git a/code/core/src/csf-tools/CsfFile.test.ts b/code/core/src/csf-tools/CsfFile.test.ts
index efe8e3196cff..bd6a47e93872 100644
--- a/code/core/src/csf-tools/CsfFile.test.ts
+++ b/code/core/src/csf-tools/CsfFile.test.ts
@@ -1295,6 +1295,37 @@ describe('CsfFile', () => {
       `);
     });
 
+    it.each(['export { Missing };', 'export { type Missing };', 'export type { Missing };'])(
+      'rejects %s of a name the file never declares',
+      (exported) => {
+        expect(() =>
+          loadCsf(`export default {};\n${exported}`, {
+            makeTitle,
+            fileName: 'foo/bar.stories.ts',
+          }).parse()
+        ).toThrow(/^Export 'Missing' is not defined \(2:\d+\) in foo\/bar\.stories\.ts$/);
+      }
+    );
+
+    it.each([
+      'type X = {};\nexport { X };',
+      'type X = {};\nexport { type X };',
+      'interface X {}\nexport { X };',
+      'enum X {}\nexport { X };',
+      'namespace X {}\nexport { X };',
+      'namespace X.Y {}\nexport { X };',
+      'declare function X(): void;\nexport { X };',
+      "import type { X } from './x';\nexport { X };",
+      "export { X } from './x';",
+    ])('accepts the export in %s', (declaration) => {
+      expect(() =>
+        loadCsf(`export default {};\n${declaration}`, {
+          makeTitle,
+          fileName: 'foo/bar.stories.ts',
+        }).parse()
+      ).not.toThrow();
+    });
+
     it('dynamic titles', () => {
       expect(() =>
         parse(
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index 91cb48d6ff89..93f683988299 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -23,6 +23,7 @@ import { type CsfMutationDiagnostic, type CsfObject, type CsfObjectOptions } fro
 import { discoverCsfObjects } from './CsfObjectDiscovery.ts';
 import {
   type E,
+  EstreeParseError,
   type Node,
   type SourceLocation,
   children,
@@ -235,6 +236,31 @@ const hasMount = (play: Node | undefined) => {
 
 const MODULE_MOCK_REGEX = /^[.\/#].*\.mock($|\.[^.]*$)/i;
 
+// TS declarations that the scope analysis does not create a binding for.
+const UNBOUND_DECLARATIONS = new Set([
+  'TSTypeAliasDeclaration',
+  'TSInterfaceDeclaration',
+  'TSEnumDeclaration',
+  'TSModuleDeclaration',
+  'TSDeclareFunction',
+]);
+
+const isDeclared = (editor: SourceEditor, local: E.IdentifierReference) =>
+  !!editor.scopes.bindingOf(local) ||
+  editor.program.body.some((statement) => {
+    const declaration =
+      statement.type === 'ExportNamedDeclaration' ? statement.declaration : statement;
+    if (!declaration || !UNBOUND_DECLARATIONS.has(declaration.type)) {
+      return false;
+    }
+    // `namespace A.B {}` declares `A`.
+    let id = (declaration as { id?: Node | null }).id;
+    while (id?.type === 'TSQualifiedName') {
+      id = id.left;
+    }
+    return isIdentifier(id, local.name);
+  });
+
 export interface CsfOptions {
   fileName?: string;
   makeTitle: (userTitle: string) => string;
@@ -783,6 +809,13 @@ export class CsfFile {
             ? specifier.exported.name
             : (specifier.exported as E.StringLiteral).value;
         const localName = specifier.local.name;
+        if (isTopLevel && !node.source && !isDeclared(this._editor, specifier.local)) {
+          throw new EstreeParseError(
+            `Export '${localName}' is not defined`,
+            this._options.fileName,
+            locationOf(this._code, specifier.local.start, specifier.local.start)
+          );
+        }
         const decl = isTopLevel ? findVarInitialization(localName, this._program) : specifier.local;
 
         if (exportName === 'default') {

From e661aa3ed19db0ad4f0ad0215d67ddc2b04eedfd Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 16 Oct 2026 18:32:05 +0200
Subject: [PATCH 131/326] fix(mocking-utils): keep parentheses around a default
 export and require a file name

Automock overwrote the span of 'export default (x)' and produced 'x)'.
rewriteSbMockImportCalls needs the file name for its source map, and
every caller has one.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/mocking-utils/automock.test.ts | 19 +++++++++++++++++++
 code/core/src/mocking-utils/automock.ts      |  7 ++++---
 code/core/src/mocking-utils/extract.test.ts  |  4 ++--
 code/core/src/mocking-utils/extract.ts       |  7 ++++---
 4 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/code/core/src/mocking-utils/automock.test.ts b/code/core/src/mocking-utils/automock.test.ts
index 4afc93dfc612..f7ab9852503b 100644
--- a/code/core/src/mocking-utils/automock.test.ts
+++ b/code/core/src/mocking-utils/automock.test.ts
@@ -20,4 +20,23 @@ describe('getAutomockCode', () => {
       expect(mocked).toContain(`["${name}"]: ${name},`);
     }
   });
+
+  it('keeps the parentheses of a parenthesized default export', () => {
+    const mocked = getAutomockCode('export default (x);', false, (source) =>
+      parseModuleAst(source, '/mod.ts')
+    ).toString();
+
+    expect(mocked).toMatch(/^const __vitest_default = \(x\);/);
+    expect(() => parseModuleAst(mocked, '/mod.ts')).not.toThrow();
+  });
+
+  it('mocks a .ts module with generic arrows under a Vite id with a query', () => {
+    const code = 'export const identity = <T>(value: T) => value;';
+
+    const mocked = getAutomockCode(code, false, (source) =>
+      parseModuleAst(source, '/src/api.ts?v=abc')
+    ).toString();
+
+    expect(mocked).toContain('["identity"]: identity,');
+  });
 });
diff --git a/code/core/src/mocking-utils/automock.ts b/code/core/src/mocking-utils/automock.ts
index 1ea4da39c6fe..5858ef55a024 100644
--- a/code/core/src/mocking-utils/automock.ts
+++ b/code/core/src/mocking-utils/automock.ts
@@ -2,12 +2,12 @@ import type {
   Declaration,
   ExportDefaultDeclaration,
   ExportNamedDeclaration,
-  Expression,
   Pattern,
   Program,
 } from 'estree';
 import MagicString from 'magic-string';
 
+import { exportDefaultKeywords } from '../csf-tools/estree/editor.ts';
 import { type Positioned, getArbitraryModuleIdentifier } from './esmWalker.ts';
 
 // An ESTree program; OXC's own `Program` type is structurally compatible with what is read here.
@@ -159,9 +159,10 @@ export function automockModule(
     }
     if (_node.type === 'ExportDefaultDeclaration') {
       const node = _node as Positioned<ExportDefaultDeclaration>;
-      const declaration = node.declaration as Positioned<Expression>;
       allSpecifiers.push({ name: '__vitest_default', alias: 'default' });
-      m.overwrite(node.start, declaration.start, `const __vitest_default = `);
+      // Only the keywords: the span of `export default (x)`'s expression excludes its parentheses.
+      const keywords = exportDefaultKeywords(code, node.start);
+      m.overwrite(node.start, node.start + keywords, `const __vitest_default = `);
     }
   }
   const moduleObject = `
diff --git a/code/core/src/mocking-utils/extract.test.ts b/code/core/src/mocking-utils/extract.test.ts
index 56e744be4e82..e2a4f30e6f6b 100644
--- a/code/core/src/mocking-utils/extract.test.ts
+++ b/code/core/src/mocking-utils/extract.test.ts
@@ -216,7 +216,7 @@ describe('extractMockCalls', () => {
         sb.mock(import('./bar/baz'), { spy: true });
       `;
 
-      const result = extractModule.rewriteSbMockImportCalls(code);
+      const result = extractModule.rewriteSbMockImportCalls(code, 'preview.ts');
       expect(result.code).toMatchInlineSnapshot(`
         "
                 sb.mock("./bar/baz", { spy: true });
@@ -250,7 +250,7 @@ describe('extractMockCalls', () => {
         sb.mock(import('./bar/baz'));
       `;
 
-      const result = extractModule.rewriteSbMockImportCalls(code);
+      const result = extractModule.rewriteSbMockImportCalls(code, 'preview.ts');
       expect(result.code).toMatchInlineSnapshot(`
         "
                 sb.mock("./bar/baz");
diff --git a/code/core/src/mocking-utils/extract.ts b/code/core/src/mocking-utils/extract.ts
index 9a7a41648e15..189885d66852 100644
--- a/code/core/src/mocking-utils/extract.ts
+++ b/code/core/src/mocking-utils/extract.ts
@@ -36,8 +36,9 @@ interface ExtractMockCallsOptions {
 }
 
 /**
- * Parse a module into an ESTree program. The file name picks the grammar, so a `.ts` module keeps
- * its generic arrows; without one the TSX and TS grammars are both tried. Throws on syntax errors.
+ * Parse a module into an ESTree program. The file extension picks the grammar, so a `.ts` module
+ * keeps its generic arrows; without a TS or JS extension the TSX and TS grammars are both tried.
+ * Throws on syntax errors.
  */
 export const parseModuleAst = (code: string, fileName?: string) =>
   parseModule(code, fileName).program;
@@ -53,7 +54,7 @@ const isStaticImport = (node: any): boolean =>
   node?.type === 'ImportExpression' && isStringLiteral(node.source);
 
 /** Utility to rewrite sb.mock(import('...'), ...) to sb.mock('...', ...) */
-export function rewriteSbMockImportCalls(code: string, fileName?: string) {
+export function rewriteSbMockImportCalls(code: string, fileName: string) {
   const ast = parseModuleAst(code, fileName);
   const edits = new MagicString(code);
 

From f3d7553bb48329a3128c3f9e3f52dd864b47ad51 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 16 Oct 2026 18:32:05 +0200
Subject: [PATCH 132/326] fix(csf-tools): print the vitest test tail with the
 file's line ending

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../vitest-plugin/component-transformer.test.ts          | 9 +++++++++
 .../core/src/csf-tools/vitest-plugin/transformer.test.ts | 9 +++++++++
 code/core/src/csf-tools/vitest-plugin/transformer.ts     | 5 +++--
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/code/core/src/csf-tools/vitest-plugin/component-transformer.test.ts b/code/core/src/csf-tools/vitest-plugin/component-transformer.test.ts
index 6e20a8891e5a..5bd97b868fac 100644
--- a/code/core/src/csf-tools/vitest-plugin/component-transformer.test.ts
+++ b/code/core/src/csf-tools/vitest-plugin/component-transformer.test.ts
@@ -355,6 +355,15 @@ describe('component transformer', () => {
     `);
   });
 
+  it('writes the generated tests with the line endings of a CRLF component file', async () => {
+    const code = `export const Badge = () => <div />;\r\nexport default () => <span />;`;
+
+    const result = await transform({ code });
+
+    expect(result.code).toContain('_test("Badge"');
+    expect(result.code.replaceAll('\r\n', '')).not.toContain('\n');
+  });
+
   it('correctly handles aliased function and class exports', async () => {
     const code = `
       function MyComponent() {
diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
index e2f48b97a850..4bfa7c9a5656 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
@@ -49,6 +49,15 @@ const transform = async ({
 };
 
 describe('transformer', () => {
+  it('writes the generated tests with the line endings of a CRLF story file', async () => {
+    const code = `export default { title: 'Button' };\r\nexport const Primary = {};`;
+
+    const result = await transform({ code });
+
+    expect(result.code).toContain('_test("Primary"');
+    expect(result.code.replaceAll('\r\n', '')).not.toContain('\n');
+  });
+
   describe('CSF v1/v2/v3', () => {
     describe('default exports (meta)', () => {
       it('should add title to inline default export if not present', async () => {
diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.ts b/code/core/src/csf-tools/vitest-plugin/transformer.ts
index 8b6879131872..69f8bc1160a1 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.ts
@@ -72,10 +72,11 @@ export class GeneratedTail {
 // Generated lines map to their target node, so Vitest reports each test at its story.
 export const printWithTail = (editor: SourceEditor, tail: GeneratedTail, fileName: string) => {
   const head = editor.toString();
+  const { eol } = editor;
   const map = editor.edits.generateMap({ hires: true, source: fileName, includeContent: true });
   const decoded = decode(map.mappings);
   const firstLine = head.split('\n').length;
-  const separator = head.endsWith('\n') ? '' : '\n';
+  const separator = head.endsWith('\n') ? '' : eol;
   tail.lines.forEach(({ text, target }, index) => {
     const line = firstLine - (separator ? 0 : 1) + index;
     while (decoded.length <= line) {
@@ -92,7 +93,7 @@ export const printWithTail = (editor: SourceEditor, tail: GeneratedTail, fileNam
   });
   map.mappings = encode(decoded);
   return {
-    code: `${head}${separator}${tail.lines.map(({ text }) => text).join('\n')}\n`,
+    code: `${head}${separator}${tail.lines.map(({ text }) => text).join(eol)}${eol}`,
     map: map as CsfSourceMap,
   };
 };

From 003a0dd43e16a05190acc67bb7bc3a781a72d00e Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 16 Oct 2026 18:32:05 +0200
Subject: [PATCH 133/326] fix(react): parenthesize comma expressions in
 generated snippets

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../generateCodeSnippet.test.tsx              | 27 +++++++++++++++++++
 .../componentManifest/generateCodeSnippet.ts  | 12 ++++++---
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/code/renderers/react/src/componentManifest/generateCodeSnippet.test.tsx b/code/renderers/react/src/componentManifest/generateCodeSnippet.test.tsx
index 6906abe9a2d5..c17cca09a31c 100644
--- a/code/renderers/react/src/componentManifest/generateCodeSnippet.test.tsx
+++ b/code/renderers/react/src/componentManifest/generateCodeSnippet.test.tsx
@@ -866,6 +866,33 @@ test('an imported bound story keeps its helper and resolved args', () => {
   ]);
 });
 
+test('a comma expression arg keeps its parentheses', () => {
+  const input = withCSF3(dedent`
+    export const Synthesized: Story = { args: { label: (f(), 'x'), '2x': (f(), 'y') } };
+    export const Rendered: Story = {
+      args: { label: (f(), 'x'), children: (f(), 'z') },
+      render: (args) => <Button {...args} />,
+    };
+  `);
+  expect(generateExample(input)).toMatchInlineSnapshot(`
+    "const Synthesized = () => <Button label={(f(), 'x')} {...{ "2x": (f(), 'y') }}>Click me</Button>;
+    const Rendered = () => <Button label={(f(), 'x')}>{(f(), 'z')}</Button>;"
+  `);
+});
+
+test('an imported bound story keeps the parentheses of a comma expression arg', () => {
+  const input = dedent`
+    import { renderMatch as Match } from './match-helper';
+    export default { title: 'Match' };
+    export const FirstHalf = Match.bind({});
+    FirstHalf.args = { home: (f(), 'Arsenal') };
+  `;
+
+  expect(generateExample(input)).toBe(
+    'const FirstHalf = () => Match.bind({})({\n    "home": (f(), \'Arsenal\')\n});'
+  );
+});
+
 test('args assembled at runtime are reported rather than dropped', () => {
   const input = withCSF3(dedent`
     export const Default: Story = { args: { ...buildArgs(), label: 'runtime' } };
diff --git a/code/renderers/react/src/componentManifest/generateCodeSnippet.ts b/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
index 208326d75c7e..6f4a0f6a1003 100644
--- a/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
+++ b/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
@@ -86,7 +86,7 @@ function importedBoundStory(
   }
 
   const values = Object.entries(args).map(
-    ([key, value]) => `    ${JSON.stringify(key)}: ${codeOf(value)}`
+    ([key, value]) => `    ${JSON.stringify(key)}: ${valueCode(value)}`
   );
   const argsObject = values.length ? `{\n${values.join(',\n')}\n}` : '{}';
   return {
@@ -255,6 +255,10 @@ function readsArgs(source: string): boolean {
 
 const isValidJsxAttrName = (n: string) => /^[A-Za-z_][A-Za-z0-9_:-]*$/.test(n);
 
+// An arg value as source to place in JSX or an object, where a comma expression needs parentheses.
+const valueCode = (value: Node) =>
+  value.type === 'SequenceExpression' ? `(${codeOf(value)})` : codeOf(value);
+
 const toAttr = (key: string, value: Node) => {
   if (value.type === 'Literal' && typeof value.value === 'boolean') {
     return value.value ? key : `${key}={false}`;
@@ -262,7 +266,7 @@ const toAttr = (key: string, value: Node) => {
   if (isStringLiteral(value) && !value.value.includes('"')) {
     return `${key}="${value.value}"`;
   }
-  return `${key}={${codeOf(value)}}`;
+  return `${key}={${valueCode(value)}}`;
 };
 
 // Attributes for every arg not already set by name, with invalid names collected in a spread.
@@ -273,7 +277,7 @@ function injectedAttributes(merged: Args, existing: ReadonlySet<string>): string
   const attrs = entries.filter(([k]) => isValidJsxAttrName(k)).map(([k, v]) => toAttr(k, v));
   const invalid = entries.filter(([k]) => !isValidJsxAttrName(k));
   if (invalid.length > 0) {
-    const members = invalid.map(([k, v]) => `${JSON.stringify(k)}: ${codeOf(v)}`);
+    const members = invalid.map(([k, v]) => `${JSON.stringify(k)}: ${valueCode(v)}`);
     attrs.push(`{...{ ${members.join(', ')} }}`);
   }
   return attrs;
@@ -286,7 +290,7 @@ const toJsxChildren = (node: Node | null | undefined) =>
       ? node.value
       : isJsx(node)
         ? codeOf(node)
-        : `{${codeOf(node)}}`;
+        : `{${valueCode(node)}}`;
 
 /** Return `key` if expression is `args.key` (incl. optional chaining), else `null`. */
 function getArgsMemberKey(expr: Node) {

From 333f885eb093adb84bfac63eb2e6d8462b718dc3 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 16 Oct 2026 18:32:06 +0200
Subject: [PATCH 134/326] fix(addon-vitest): rename a template binding the
 config already uses

A config that imports dirname from node:path kept the template's
path.join(dirname, ...) and failed to load. The template binding and
its references are renamed together.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../src/updateVitestFile.statements.test.ts   | 47 +++++++++++---
 code/addons/vitest/src/updateVitestFile.ts    | 63 +++++++++++++++++++
 2 files changed, 103 insertions(+), 7 deletions(-)

diff --git a/code/addons/vitest/src/updateVitestFile.statements.test.ts b/code/addons/vitest/src/updateVitestFile.statements.test.ts
index 368922209470..3c3eb23e2aa8 100644
--- a/code/addons/vitest/src/updateVitestFile.statements.test.ts
+++ b/code/addons/vitest/src/updateVitestFile.statements.test.ts
@@ -4,7 +4,7 @@ import { SourceEditor } from 'storybook/internal/csf-tools';
 
 import { dedent } from 'ts-dedent';
 
-import { updateConfigFile } from './updateVitestFile.ts';
+import { loadTemplate, updateConfigFile } from './updateVitestFile.ts';
 
 const template = dedent`
   import { fileURLToPath } from 'node:url';
@@ -157,15 +157,48 @@ describe('updateConfigFile statements', () => {
     expect(() => new SourceEditor(code)).not.toThrow();
   });
 
-  it('does not declare a name the config already imports', () => {
+  it.each([
+    ['imports', `import { dirname, resolve } from 'node:path';`],
+    ['requires', `const { dirname } = require('path');`],
+  ])('renames the template dirname when the config %s a dirname function', async (_, binding) => {
     const target = new SourceEditor(dedent`
-      import { dirname } from 'node:path';
-      import { fileURLToPath } from 'node:url';
+      ${binding}
+      import { fileURLToPath } from 'url';
       export default defineConfig({ test: {} });
     `);
+    const realTemplate = await loadTemplate('vitest.config.4.template', {
+      CONFIG_DIR: '.storybook',
+    });
 
-    expect(updateConfigFile(template, target)).toBe(true);
-    expect(target.toString()).not.toContain('const dirname');
-    expect(() => new SourceEditor(target.toString())).not.toThrow();
+    expect(updateConfigFile(realTemplate, target)).toBe(true);
+    const code = target.toString();
+    expect(code).toContain(binding);
+    expect(code).toContain(
+      'const storybookDirname =\n' +
+        "  typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));"
+    );
+    expect(code).toContain(
+      "storybookTest({ configDir: path.join(storybookDirname, '.storybook') })"
+    );
+    expect(code).not.toContain("import { fileURLToPath } from 'node:url'");
+    expect(code.match(/(?<!\.)\bdirname\b/g)).toHaveLength(1);
+    expect(() => new SourceEditor(code)).not.toThrow();
+  });
+
+  it('renames an import the config binds to another module', async () => {
+    const target = new SourceEditor(dedent`
+      import path from './path-helpers';
+      export default defineConfig({ test: {} });
+    `);
+    const realTemplate = await loadTemplate('vitest.config.4.template', {
+      CONFIG_DIR: '.storybook',
+    });
+
+    expect(updateConfigFile(realTemplate, target)).toBe(true);
+    const code = target.toString();
+    expect(code).toContain("import storybookPath from 'node:path';");
+    expect(code).toContain('storybookPath.dirname(fileURLToPath(import.meta.url))');
+    expect(code).toContain('storybookPath.join(dirname, ');
+    expect(() => new SourceEditor(code)).not.toThrow();
   });
 });
diff --git a/code/addons/vitest/src/updateVitestFile.ts b/code/addons/vitest/src/updateVitestFile.ts
index 616612ec5d97..8727103a7ceb 100644
--- a/code/addons/vitest/src/updateVitestFile.ts
+++ b/code/addons/vitest/src/updateVitestFile.ts
@@ -6,6 +6,7 @@ import {
   resolveExpression,
 } from 'storybook/internal/cli';
 import {
+  type Binding,
   type ESTree as E,
   SourceEditor,
   appendToList,
@@ -299,6 +300,67 @@ const findWritableConfigObject = (
   );
 };
 
+// What an import binds, with `node:path` and `path` naming the same module.
+const importedFrom = (binding: Binding) => {
+  if (binding.kind !== 'import' || binding.declaration?.type !== 'ImportDeclaration') {
+    return undefined;
+  }
+  const specifier = binding.node as E.ImportDeclarationSpecifier;
+  const name =
+    specifier.type === 'ImportSpecifier'
+      ? specifier.imported.type === 'Literal'
+        ? specifier.imported.value
+        : specifier.imported.name
+      : specifier.type === 'ImportDefaultSpecifier'
+        ? 'default'
+        : '*';
+  return `${name} from ${binding.declaration.source.value.replace(/^node:/, '')}`;
+};
+
+const unusedName = (name: string, editors: SourceEditor[]) => {
+  const base = `storybook${name[0].toUpperCase()}${name.slice(1)}`;
+  let candidate = base;
+  for (let index = 2; editors.some((editor) => editor.scopes.names.has(candidate)); index++) {
+    candidate = `${base}${index}`;
+  }
+  return candidate;
+};
+
+const renameBinding = (editor: SourceEditor, binding: Binding, name: string) => {
+  const { identifier, node } = binding;
+  if (node.type === 'ImportSpecifier' && node.imported.start === identifier.start) {
+    // `import { x }` becomes `import { x as name }`.
+    editor.edits.appendLeft(identifier.end, ` as ${name}`);
+  } else {
+    editor.edits.overwrite(identifier.start, identifier.end, name);
+  }
+  for (const reference of binding.references) {
+    const parent = editor.parentOf(reference);
+    if (parent?.type === 'Property' && parent.shorthand) {
+      // `{ x }` becomes `{ x: name }`.
+      editor.edits.appendLeft(reference.end, `: ${name}`);
+    } else {
+      editor.edits.overwrite(reference.start, reference.end, name);
+    }
+  }
+};
+
+// Rename the template bindings the merged code reads that the target binds to something else,
+// such as the template's `dirname` in a config that imports `dirname` from `node:path`.
+const renameTakenBindings = (source: SourceEditor, target: SourceEditor) => {
+  const call = findExportDefault(source.program)?.declaration as E.CallExpression;
+  for (const binding of source.scopes.program.bindings.values()) {
+    const existing = target.scopes.program.bindings.get(binding.name);
+    const imported = importedFrom(binding);
+    // The template's own `defineConfig(...)` call is not merged.
+    const merged = binding.references.some((reference) => reference !== call.callee);
+    if (existing && merged && (imported === undefined || imported !== importedFrom(existing))) {
+      renameBinding(source, binding, unusedName(binding.name, [source, target]));
+    }
+  }
+  source.commit();
+};
+
 // Template imports and variables the target lacks, each with the comments that follow it.
 const missingStatements = (source: SourceEditor, target: SourceEditor) => {
   const { body } = source.program;
@@ -368,6 +430,7 @@ export const updateConfigFile = (sourceCode: string, target: SourceEditor): bool
     return false;
   }
 
+  renameTakenBindings(source, target);
   const statements = missingStatements(source, target);
   if (statements.length > 0) {
     insertStatements(target, statements.join('\n'));

From 34adfd73afb87eaf2c737aa4e3301714acd4f8c8 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 16 Oct 2026 18:32:06 +0200
Subject: [PATCH 135/326] test(csf-tools): record enrich and vitest transform
 outputs and originalSource in the corpus

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/__corpus__/README.md  |  27 +-
 code/core/src/csf-tools/__corpus__/record.mjs |  43 ++-
 .../src/csf-tools/__corpus__/summarize.ts     |  91 ++++++
 .../src/csf-tools/__corpus__/transforms.json  | 270 ++++++++++++++++++
 code/core/src/csf-tools/corpus.test.ts        |  26 +-
 5 files changed, 437 insertions(+), 20 deletions(-)
 create mode 100644 code/core/src/csf-tools/__corpus__/summarize.ts
 create mode 100644 code/core/src/csf-tools/__corpus__/transforms.json

diff --git a/code/core/src/csf-tools/__corpus__/README.md b/code/core/src/csf-tools/__corpus__/README.md
index 10cb80a8a68f..bfff1c6b878e 100644
--- a/code/core/src/csf-tools/__corpus__/README.md
+++ b/code/core/src/csf-tools/__corpus__/README.md
@@ -1,11 +1,28 @@
 # CSF corpus
 
-Frozen story files and the outputs the Babel-based `CsfFile` produced for them, recorded once from
-the last `next` commit that still indexed with Babel. `corpus.test.ts` runs the OXC implementation
-over the same inputs and compares with `toEqual`, so `vitest -u` cannot re-baseline the outputs.
+Frozen story files and two sets of golden outputs, which `corpus.test.ts` compares with `toEqual`,
+so `vitest -u` cannot re-baseline them.
 
-Rerun on an OXC upgrade. To extend the corpus, add inputs and record again from a Babel checkout:
+- `golden.json` holds what the Babel-based `CsfFile` indexed: index inputs, meta, stories and
+  bindings, recorded once from the last `next` commit that still indexed with Babel.
+- `transforms.json` holds the `enrichCsf` and `vitestTransform` outputs, formatted with Prettier so
+  layout does not count, and each story's `parameters.docs.source.originalSource`. They were
+  recorded from the OXC implementation. A Babel build produced the same outputs apart from
+  `originalSource`, which Babel reprinted, comment placement, and generated imports, which Babel
+  put above a file's header comment.
+
+Rerun the test on an OXC upgrade. When an upgrade changes a transform on purpose, compile `core` and
+record `transforms.json` again, then review the diff:
+
+```sh
+yarn nx compile core
+node code/core/src/csf-tools/__corpus__/record.mjs transforms
+```
+
+To extend the corpus, add inputs, record `golden.json` from a Babel checkout and `transforms.json`
+from this one:
 
 ```sh
-node code/core/src/csf-tools/__corpus__/record.mjs <babel-checkout>/code
+node code/core/src/csf-tools/__corpus__/record.mjs index <babel-checkout>/code
+node code/core/src/csf-tools/__corpus__/record.mjs transforms
 ```
diff --git a/code/core/src/csf-tools/__corpus__/record.mjs b/code/core/src/csf-tools/__corpus__/record.mjs
index 441eef703f29..eed2f3d8aa3b 100644
--- a/code/core/src/csf-tools/__corpus__/record.mjs
+++ b/code/core/src/csf-tools/__corpus__/record.mjs
@@ -1,27 +1,39 @@
-// Records golden outputs for the corpus from a Storybook checkout that still indexes with Babel.
+// Records golden outputs for the corpus from a Storybook checkout with `core` compiled.
 //
-//   node code/core/src/csf-tools/__corpus__/record.mjs <path-to-babel-checkout>/code
+//   node code/core/src/csf-tools/__corpus__/record.mjs index <path-to-babel-checkout>/code
+//   node code/core/src/csf-tools/__corpus__/record.mjs transforms [<path-to-checkout>/code]
 //
-// The checkout must have `core` compiled. The summary written here mirrors `summarize` in
-// `corpus.test.ts`, which runs the OXC implementation against the same inputs.
+// `index` writes `golden.json` from a checkout that still indexes with Babel; its summary mirrors
+// `summarize` in `corpus.test.ts`. `transforms` writes `transforms.json` with the summary the test
+// shares from `summarize.ts`, from this checkout unless another is given.
 import { readdirSync, readFileSync, writeFileSync } from 'node:fs';
 import { createRequire } from 'node:module';
 import { dirname, join, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
+import { format } from 'prettier';
+
+import { summarizeTransforms } from './summarize.ts';
+
 const here = dirname(fileURLToPath(import.meta.url));
-const checkout = resolve(process.argv[2]);
+const [mode, checkoutPath] = process.argv.slice(2);
+if (mode !== 'transforms' && (mode !== 'index' || !checkoutPath)) {
+  throw new Error('Usage: record.mjs index <babel-checkout>/code | transforms [<checkout>/code]');
+}
+const checkout = checkoutPath ? resolve(checkoutPath) : join(here, '../../../..');
 const require = createRequire(join(checkout, 'package.json'));
-const { loadCsf } = await import(join(checkout, 'core/dist/csf-tools/index.js'));
-const traverse = require('@babel/traverse').default;
+const csfTools = await import(join(checkout, 'core/dist/csf-tools/index.js'));
 
 const regexOrArray = (value) =>
   value instanceof RegExp ? { regex: value.source, flags: value.flags } : (value ?? null);
 
-const summarize = (file, code) => {
+const summarizeIndex = (file, code) => {
+  const traverse = require('@babel/traverse').default;
   let csf;
   try {
-    csf = loadCsf(code, { fileName: file, makeTitle: (title) => title ?? 'Untitled' }).parse();
+    csf = csfTools
+      .loadCsf(code, { fileName: file, makeTitle: (title) => title ?? 'Untitled' })
+      .parse();
   } catch {
     return { error: true };
   }
@@ -60,9 +72,14 @@ const summarize = (file, code) => {
 };
 
 const inputs = join(here, 'inputs');
-const golden = {};
+const recorded = {};
 for (const file of readdirSync(inputs).sort()) {
-  golden[file] = summarize(file, readFileSync(join(inputs, file), 'utf8'));
+  const code = readFileSync(join(inputs, file), 'utf8');
+  recorded[file] =
+    mode === 'index'
+      ? summarizeIndex(file, code)
+      : await summarizeTransforms({ csfTools, format }, inputs, file, code);
 }
-writeFileSync(join(here, 'golden.json'), `${JSON.stringify(golden, null, 2)}\n`);
-console.log(`recorded ${Object.keys(golden).length} files`);
+const output = mode === 'index' ? 'golden.json' : 'transforms.json';
+writeFileSync(join(here, output), `${JSON.stringify(recorded, null, 2)}\n`);
+console.log(`recorded ${Object.keys(recorded).length} files in ${output}`);
diff --git a/code/core/src/csf-tools/__corpus__/summarize.ts b/code/core/src/csf-tools/__corpus__/summarize.ts
new file mode 100644
index 000000000000..8809df47c9fa
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/summarize.ts
@@ -0,0 +1,91 @@
+// Shared by `corpus.test.ts`, which passes the sources, and `record.mjs`, which passes a compiled
+// checkout, so the recorded and the tested transforms are summarized the same way. Node runs it
+// through type stripping: it may only import types.
+import type { format } from 'prettier';
+
+import type * as CsfTools from '../index.ts';
+
+export interface CorpusTools {
+  csfTools: typeof CsfTools;
+  format: typeof format;
+}
+
+const makeTitle = (title?: string) => title ?? 'Untitled';
+
+const run = async (transform: () => Promise<string>) => {
+  try {
+    return await transform();
+  } catch {
+    return undefined;
+  }
+};
+
+// Each story's `parameters.docs.source.originalSource` in the enriched code.
+const originalSources = ({ parseModule, walk }: typeof CsfTools, file: string, code: string) => {
+  const sources: Record<string, string> = {};
+  for (const statement of parseModule(code, file).program.body) {
+    if (
+      statement.type !== 'ExpressionStatement' ||
+      statement.expression.type !== 'AssignmentExpression'
+    ) {
+      continue;
+    }
+    let story: CsfTools.ESTreeNode = statement.expression.left;
+    while (story.type === 'MemberExpression') {
+      story = story.object;
+    }
+    const name = story.type === 'Identifier' ? story.name : undefined;
+    walk(statement.expression.right, (node) => {
+      if (
+        name &&
+        node.type === 'Property' &&
+        node.key.type === 'Identifier' &&
+        node.key.name === 'originalSource' &&
+        node.value.type === 'Literal' &&
+        typeof node.value.value === 'string'
+      ) {
+        sources[name] = node.value.value;
+      }
+    });
+  }
+  return sources;
+};
+
+// The `enrichCsf` and `vitestTransform` outputs for a corpus input, formatted with Prettier so the
+// comparison ignores layout, which Babel reprinted and OXC keeps as written.
+export const summarizeTransforms = async (
+  { csfTools, format }: CorpusTools,
+  inputs: string,
+  file: string,
+  code: string
+) => {
+  const { enrichCsf, formatCsf, loadCsf, vitestTransform } = csfTools;
+  const enriched = await run(async () => {
+    const csf = loadCsf(code, { fileName: file, makeTitle }).parse();
+    await enrichCsf(csf, loadCsf(code, { fileName: file, makeTitle }).parse());
+    return formatCsf(csf) as string;
+  });
+  const vitest = await run(
+    async () =>
+      (
+        await vitestTransform({
+          code,
+          fileName: `${inputs}/${file}`,
+          configDir: inputs,
+          stories: ['./*.stories.*'],
+          tagsFilter: { include: ['test'], exclude: [], skip: [] },
+          previewLevelTags: [],
+        })
+      ).code
+  );
+  // Prettier keeps blank lines and objects written across lines, so those are dropped and collapsed.
+  const pretty = (output: string | undefined) =>
+    output === undefined
+      ? { error: true }
+      : format(output.replace(/^[ \t]*\r?\n/gm, ''), { filepath: file, objectWrap: 'collapse' });
+  return {
+    enriched: await pretty(enriched),
+    originalSources: enriched === undefined ? {} : originalSources(csfTools, file, enriched),
+    vitest: await pretty(vitest),
+  };
+};
diff --git a/code/core/src/csf-tools/__corpus__/transforms.json b/code/core/src/csf-tools/__corpus__/transforms.json
new file mode 100644
index 000000000000..c16b95dabfd3
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/transforms.json
@@ -0,0 +1,270 @@
+{
+  "core-argMapping.stories.ts": {
+    "enriched": "import type {\n  PartialStoryFn,\n  PlayFunctionContext,\n  StoryContext,\n} from \"storybook/internal/types\";\nimport { global as globalThis } from \"@storybook/global\";\nimport { expect, within } from \"storybook/test\";\nconst arrows = {\n  ArrowUp: { name: \"ArrowUp\" },\n  ArrowDown: { name: \"ArrowDown\" },\n  ArrowLeft: { name: \"ArrowLeft\" },\n  ArrowRight: { name: \"ArrowRight\" },\n};\nconst labels = {\n  ArrowUp: \"Up\",\n  ArrowDown: \"Down\",\n  ArrowLeft: \"Left\",\n  ArrowRight: \"Right\",\n};\nexport default {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,\n  decorators: [\n    (storyFn: PartialStoryFn, context: StoryContext) => {\n      return storyFn({ args: { object: { ...context.args } } });\n    },\n  ],\n};\nexport const Single = {\n  args: { mappingArg: \"ArrowRight\" },\n  argTypes: {\n    mappingArg: {\n      options: Object.keys(arrows),\n      mapping: arrows,\n      control: { type: \"select\", labels },\n    },\n  },\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    await expect(\n      JSON.parse(within(canvasElement).getByTestId(\"pre\").innerText),\n    ).toMatchObject({ mappingArg: { name: \"ArrowRight\" } });\n  },\n};\nexport const Multiple = {\n  args: { mappingArg: [\"ArrowRight\", \"ArrowLeft\"] },\n  argTypes: {\n    mappingArg: {\n      options: Object.keys(arrows),\n      mapping: arrows,\n      control: { type: \"multi-select\", labels },\n    },\n  },\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    await expect(\n      JSON.parse(within(canvasElement).getByTestId(\"pre\").innerText),\n    ).toMatchObject({\n      mappingArg: [{ name: \"ArrowRight\" }, { name: \"ArrowLeft\" }],\n    });\n  },\n};\nSingle.parameters = {\n  ...Single.parameters,\n  docs: {\n    ...Single.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: {\\n    mappingArg: 'ArrowRight',\\n  },\\n  argTypes: {\\n    mappingArg: {\\n      options: Object.keys(arrows),\\n      mapping: arrows,\\n      control: {\\n        type: 'select',\\n        labels,\\n      },\\n    },\\n  },\\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\\n    await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({\\n      mappingArg: { name: 'ArrowRight' },\\n    });\\n  },\\n}\",\n      ...Single.parameters?.docs?.source,\n    },\n  },\n};\nMultiple.parameters = {\n  ...Multiple.parameters,\n  docs: {\n    ...Multiple.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: {\\n    mappingArg: ['ArrowRight', 'ArrowLeft'],\\n  },\\n  argTypes: {\\n    mappingArg: {\\n      options: Object.keys(arrows),\\n      mapping: arrows,\\n      control: {\\n        type: 'multi-select',\\n        labels,\\n      },\\n    },\\n  },\\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\\n    await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({\\n      mappingArg: [{ name: 'ArrowRight' }, { name: 'ArrowLeft' }],\\n    });\\n  },\\n}\",\n      ...Multiple.parameters?.docs?.source,\n    },\n  },\n};\n",
+    "originalSources": {
+      "Single": "{\n  args: {\n    mappingArg: 'ArrowRight',\n  },\n  argTypes: {\n    mappingArg: {\n      options: Object.keys(arrows),\n      mapping: arrows,\n      control: {\n        type: 'select',\n        labels,\n      },\n    },\n  },\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({\n      mappingArg: { name: 'ArrowRight' },\n    });\n  },\n}",
+      "Multiple": "{\n  args: {\n    mappingArg: ['ArrowRight', 'ArrowLeft'],\n  },\n  argTypes: {\n    mappingArg: {\n      options: Object.keys(arrows),\n      mapping: arrows,\n      control: {\n        type: 'multi-select',\n        labels,\n      },\n    },\n  },\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({\n      mappingArg: [{ name: 'ArrowRight' }, { name: 'ArrowLeft' }],\n    });\n  },\n}"
+    },
+    "vitest": "import { test as _test, expect as _expect } from \"vitest\";\nimport {\n  testStory as _testStory,\n  convertToFilePath,\n} from \"@storybook/addon-vitest/internal/test-utils\";\nimport type {\n  PartialStoryFn,\n  PlayFunctionContext,\n  StoryContext,\n} from \"storybook/internal/types\";\nimport { global as globalThis } from \"@storybook/global\";\nimport { expect, within } from \"storybook/test\";\nconst arrows = {\n  ArrowUp: { name: \"ArrowUp\" },\n  ArrowDown: { name: \"ArrowDown\" },\n  ArrowLeft: { name: \"ArrowLeft\" },\n  ArrowRight: { name: \"ArrowRight\" },\n};\nconst labels = {\n  ArrowUp: \"Up\",\n  ArrowDown: \"Down\",\n  ArrowLeft: \"Left\",\n  ArrowRight: \"Right\",\n};\nconst _meta = {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,\n  decorators: [\n    (storyFn: PartialStoryFn, context: StoryContext) => {\n      return storyFn({ args: { object: { ...context.args } } });\n    },\n  ],\n  title: \"core-argMapping\",\n};\nexport default _meta;\nexport const Single = {\n  args: { mappingArg: \"ArrowRight\" },\n  argTypes: {\n    mappingArg: {\n      options: Object.keys(arrows),\n      mapping: arrows,\n      control: { type: \"select\", labels },\n    },\n  },\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    await expect(\n      JSON.parse(within(canvasElement).getByTestId(\"pre\").innerText),\n    ).toMatchObject({ mappingArg: { name: \"ArrowRight\" } });\n  },\n};\nexport const Multiple = {\n  args: { mappingArg: [\"ArrowRight\", \"ArrowLeft\"] },\n  argTypes: {\n    mappingArg: {\n      options: Object.keys(arrows),\n      mapping: arrows,\n      control: { type: \"multi-select\", labels },\n    },\n  },\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    await expect(\n      JSON.parse(within(canvasElement).getByTestId(\"pre\").innerText),\n    ).toMatchObject({\n      mappingArg: [{ name: \"ArrowRight\" }, { name: \"ArrowLeft\" }],\n    });\n  },\n};\nconst _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(\n  globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath,\n);\nif (_isRunningFromThisFile) {\n  _test(\n    \"Single\",\n    _testStory({\n      exportName: \"Single\",\n      story: Single,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-argmapping--single\",\n    }),\n  );\n  _test(\n    \"Multiple\",\n    _testStory({\n      exportName: \"Multiple\",\n      story: Multiple,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-argmapping--multiple\",\n    }),\n  );\n}\n"
+  },
+  "core-args.stories.ts": {
+    "enriched": "import {\n  RESET_STORY_ARGS,\n  STORY_ARGS_UPDATED,\n  UPDATE_STORY_ARGS,\n} from \"storybook/internal/core-events\";\nimport type {\n  PartialStoryFn,\n  PlayFunctionContext,\n  StoryContext,\n} from \"storybook/internal/types\";\nimport { global as globalThis } from \"@storybook/global\";\nimport { expect, within } from \"storybook/test\";\nfunction pick(obj, keys) {\n  const result = {};\n  for (const key of keys) {\n    result[key] = obj[key];\n  }\n  return result;\n}\nexport default {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,\n  args: {\n    componentArg: \"componentArg\",\n    storyArg: \"componentStoryArg\",\n    object: { a: \"component\", b: \"component\" },\n  },\n  // Compose the set of  args into `object`, so the pre component only needs a single prop\n  //   (selecting only the args specified on parameters.argNames if set)\n  decorators: [\n    (storyFn: PartialStoryFn, context: StoryContext) => {\n      const { argNames } = context.parameters;\n      const args = { ...context.args };\n      const object = argNames ? pick(args, argNames) : args;\n      return storyFn({ args: { object } });\n    },\n  ],\n};\nexport const Inheritance = {\n  args: { storyArg: \"storyArg\", object: { a: \"story\" } },\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    // NOTE: these stories don't test project-level args inheritance as it is too problematic\n    // to have an arg floating around that will apply too *all* other stories in our sandboxes.\n    await expect(\n      JSON.parse(within(canvasElement).getByTestId(\"pre\").innerText),\n    ).toEqual({\n      componentArg: \"componentArg\",\n      storyArg: \"storyArg\",\n      object: { a: \"story\" },\n    });\n  },\n};\nexport const Targets = {\n  args: { a: \"a\", b: \"b\" },\n  argTypes: { a: { target: \"elsewhere\" } },\n  parameters: { argNames: [\"a\", \"b\"] },\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    // Check that `a` doesn't end up set\n    await expect(\n      JSON.parse(within(canvasElement).getByTestId(\"pre\").innerText),\n    ).toEqual({ b: \"b\" });\n  },\n  tags: [\"!vitest\"],\n};\nexport const Events = {\n  args: { test: \"initial\" },\n  parameters: { argNames: [\"test\"] },\n  play: async ({ canvasElement, id }: PlayFunctionContext<any>) => {\n    const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;\n    await channel.emit(RESET_STORY_ARGS, { storyId: id });\n    await new Promise((resolve) => channel.once(STORY_ARGS_UPDATED, resolve));\n    await within(canvasElement).findByText(/initial/);\n    await channel.emit(UPDATE_STORY_ARGS, {\n      storyId: id,\n      updatedArgs: { test: \"updated\" },\n    });\n    await new Promise((resolve) => channel.once(STORY_ARGS_UPDATED, resolve));\n    await within(canvasElement).findByText(/updated/);\n  },\n  // this story can't be reliably tested because the args changes results in renderPhases disrupting test runs\n  tags: [\"!vitest\", \"!test\"],\n};\nInheritance.parameters = {\n  ...Inheritance.parameters,\n  docs: {\n    ...Inheritance.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: {\\n    storyArg: 'storyArg',\\n    object: {\\n      a: 'story',\\n    },\\n  },\\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\\n    // NOTE: these stories don't test project-level args inheritance as it is too problematic\\n    // to have an arg floating around that will apply too *all* other stories in our sandboxes.\\n    await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toEqual({\\n      componentArg: 'componentArg',\\n      storyArg: 'storyArg',\\n      object: {\\n        a: 'story',\\n      },\\n    });\\n  },\\n}\",\n      ...Inheritance.parameters?.docs?.source,\n    },\n  },\n};\nTargets.parameters = {\n  ...Targets.parameters,\n  docs: {\n    ...Targets.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: {\\n    a: 'a',\\n    b: 'b',\\n  },\\n  argTypes: {\\n    a: { target: 'elsewhere' },\\n  },\\n  parameters: { argNames: ['a', 'b'] },\\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\\n    // Check that `a` doesn't end up set\\n    await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toEqual({\\n      b: 'b',\\n    });\\n  },\\n  tags: ['!vitest'],\\n}\",\n      ...Targets.parameters?.docs?.source,\n    },\n  },\n};\nEvents.parameters = {\n  ...Events.parameters,\n  docs: {\n    ...Events.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: {\\n    test: 'initial',\\n  },\\n  parameters: { argNames: ['test'] },\\n  play: async ({ canvasElement, id }: PlayFunctionContext<any>) => {\\n    const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;\\n    await channel.emit(RESET_STORY_ARGS, { storyId: id });\\n    await new Promise((resolve) => channel.once(STORY_ARGS_UPDATED, resolve));\\n\\n    await within(canvasElement).findByText(/initial/);\\n\\n    await channel.emit(UPDATE_STORY_ARGS, { storyId: id, updatedArgs: { test: 'updated' } });\\n    await new Promise((resolve) => channel.once(STORY_ARGS_UPDATED, resolve));\\n    await within(canvasElement).findByText(/updated/);\\n  },\\n  // this story can't be reliably tested because the args changes results in renderPhases disrupting test runs\\n  tags: ['!vitest', '!test'],\\n}\",\n      ...Events.parameters?.docs?.source,\n    },\n  },\n};\n",
+    "originalSources": {
+      "Inheritance": "{\n  args: {\n    storyArg: 'storyArg',\n    object: {\n      a: 'story',\n    },\n  },\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    // NOTE: these stories don't test project-level args inheritance as it is too problematic\n    // to have an arg floating around that will apply too *all* other stories in our sandboxes.\n    await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toEqual({\n      componentArg: 'componentArg',\n      storyArg: 'storyArg',\n      object: {\n        a: 'story',\n      },\n    });\n  },\n}",
+      "Targets": "{\n  args: {\n    a: 'a',\n    b: 'b',\n  },\n  argTypes: {\n    a: { target: 'elsewhere' },\n  },\n  parameters: { argNames: ['a', 'b'] },\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    // Check that `a` doesn't end up set\n    await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toEqual({\n      b: 'b',\n    });\n  },\n  tags: ['!vitest'],\n}",
+      "Events": "{\n  args: {\n    test: 'initial',\n  },\n  parameters: { argNames: ['test'] },\n  play: async ({ canvasElement, id }: PlayFunctionContext<any>) => {\n    const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;\n    await channel.emit(RESET_STORY_ARGS, { storyId: id });\n    await new Promise((resolve) => channel.once(STORY_ARGS_UPDATED, resolve));\n\n    await within(canvasElement).findByText(/initial/);\n\n    await channel.emit(UPDATE_STORY_ARGS, { storyId: id, updatedArgs: { test: 'updated' } });\n    await new Promise((resolve) => channel.once(STORY_ARGS_UPDATED, resolve));\n    await within(canvasElement).findByText(/updated/);\n  },\n  // this story can't be reliably tested because the args changes results in renderPhases disrupting test runs\n  tags: ['!vitest', '!test'],\n}"
+    },
+    "vitest": "import { test as _test, expect as _expect } from \"vitest\";\nimport {\n  testStory as _testStory,\n  convertToFilePath,\n} from \"@storybook/addon-vitest/internal/test-utils\";\nimport {\n  RESET_STORY_ARGS,\n  STORY_ARGS_UPDATED,\n  UPDATE_STORY_ARGS,\n} from \"storybook/internal/core-events\";\nimport type {\n  PartialStoryFn,\n  PlayFunctionContext,\n  StoryContext,\n} from \"storybook/internal/types\";\nimport { global as globalThis } from \"@storybook/global\";\nimport { expect, within } from \"storybook/test\";\nfunction pick(obj, keys) {\n  const result = {};\n  for (const key of keys) {\n    result[key] = obj[key];\n  }\n  return result;\n}\nconst _meta = {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,\n  args: {\n    componentArg: \"componentArg\",\n    storyArg: \"componentStoryArg\",\n    object: { a: \"component\", b: \"component\" },\n  },\n  // Compose the set of  args into `object`, so the pre component only needs a single prop\n  //   (selecting only the args specified on parameters.argNames if set)\n  decorators: [\n    (storyFn: PartialStoryFn, context: StoryContext) => {\n      const { argNames } = context.parameters;\n      const args = { ...context.args };\n      const object = argNames ? pick(args, argNames) : args;\n      return storyFn({ args: { object } });\n    },\n  ],\n  title: \"core-args\",\n};\nexport default _meta;\nexport const Inheritance = {\n  args: { storyArg: \"storyArg\", object: { a: \"story\" } },\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    // NOTE: these stories don't test project-level args inheritance as it is too problematic\n    // to have an arg floating around that will apply too *all* other stories in our sandboxes.\n    await expect(\n      JSON.parse(within(canvasElement).getByTestId(\"pre\").innerText),\n    ).toEqual({\n      componentArg: \"componentArg\",\n      storyArg: \"storyArg\",\n      object: { a: \"story\" },\n    });\n  },\n};\nexport const Targets = {\n  args: { a: \"a\", b: \"b\" },\n  argTypes: { a: { target: \"elsewhere\" } },\n  parameters: { argNames: [\"a\", \"b\"] },\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    // Check that `a` doesn't end up set\n    await expect(\n      JSON.parse(within(canvasElement).getByTestId(\"pre\").innerText),\n    ).toEqual({ b: \"b\" });\n  },\n  tags: [\"!vitest\"],\n};\nexport const Events = {\n  args: { test: \"initial\" },\n  parameters: { argNames: [\"test\"] },\n  play: async ({ canvasElement, id }: PlayFunctionContext<any>) => {\n    const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;\n    await channel.emit(RESET_STORY_ARGS, { storyId: id });\n    await new Promise((resolve) => channel.once(STORY_ARGS_UPDATED, resolve));\n    await within(canvasElement).findByText(/initial/);\n    await channel.emit(UPDATE_STORY_ARGS, {\n      storyId: id,\n      updatedArgs: { test: \"updated\" },\n    });\n    await new Promise((resolve) => channel.once(STORY_ARGS_UPDATED, resolve));\n    await within(canvasElement).findByText(/updated/);\n  },\n  // this story can't be reliably tested because the args changes results in renderPhases disrupting test runs\n  tags: [\"!vitest\", \"!test\"],\n};\nconst _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(\n  globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath,\n);\nif (_isRunningFromThisFile) {\n  _test(\n    \"Inheritance\",\n    _testStory({\n      exportName: \"Inheritance\",\n      story: Inheritance,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-args--inheritance\",\n    }),\n  );\n  _test(\n    \"Targets\",\n    _testStory({\n      exportName: \"Targets\",\n      story: Targets,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-args--targets\",\n    }),\n  );\n}\n"
+  },
+  "core-autotitle.stories.ts": {
+    "enriched": "import type { PlayFunctionContext } from \"storybook/internal/types\";\nimport { global as globalThis } from \"@storybook/global\";\nimport { expect } from \"storybook/test\";\nexport default {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,\n  args: { text: \"No content\" },\n};\nexport const Default = {\n  play: async ({ title }: PlayFunctionContext<any>) => {\n    await expect(title).toBe(\"core/autotitle\");\n  },\n};\nDefault.parameters = {\n  ...Default.parameters,\n  docs: {\n    ...Default.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  play: async ({ title }: PlayFunctionContext<any>) => {\\n    await expect(title).toBe('core/autotitle');\\n  },\\n}\",\n      ...Default.parameters?.docs?.source,\n    },\n  },\n};\n",
+    "originalSources": {
+      "Default": "{\n  play: async ({ title }: PlayFunctionContext<any>) => {\n    await expect(title).toBe('core/autotitle');\n  },\n}"
+    },
+    "vitest": "import { test as _test, expect as _expect } from \"vitest\";\nimport {\n  testStory as _testStory,\n  convertToFilePath,\n} from \"@storybook/addon-vitest/internal/test-utils\";\nimport type { PlayFunctionContext } from \"storybook/internal/types\";\nimport { global as globalThis } from \"@storybook/global\";\nimport { expect } from \"storybook/test\";\nconst _meta = {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,\n  args: { text: \"No content\" },\n  title: \"core-autotitle\",\n};\nexport default _meta;\nexport const Default = {\n  play: async ({ title }: PlayFunctionContext<any>) => {\n    await expect(title).toBe(\"core/autotitle\");\n  },\n};\nconst _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(\n  globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath,\n);\nif (_isRunningFromThisFile) {\n  _test(\n    \"Default\",\n    _testStory({\n      exportName: \"Default\",\n      story: Default,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-autotitle--default\",\n    }),\n  );\n}\n"
+  },
+  "core-basics.stories.ts": {
+    "enriched": "import { global as globalThis } from \"@storybook/global\";\nimport { action } from \"storybook/actions\";\nexport default {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Button,\n  args: { label: \"Click Me!\" },\n  parameters: { chromatic: { disableSnapshot: true } },\n};\nexport const Basic = { args: { onClick: action(\"onClick\") } };\nexport const TypeString = {\n  args: { onClick: () => action(\"onClick\")(\"string\") },\n};\nexport const TypeBoolean = {\n  args: { onClick: () => action(\"onClick\")(false) },\n};\nexport const TypeObject = { args: { onClick: () => action(\"onClick\")({}) } };\nexport const TypeNull = { args: { onClick: () => action(\"onClick\")(null) } };\nexport const TypeUndefined = {\n  args: { onClick: () => action(\"onClick\")(undefined) },\n};\nexport const TypeNaN = { args: { onClick: () => action(\"onClick\")(NaN) } };\nexport const TypeInfinity = {\n  args: { onClick: () => action(\"onClick\")(Infinity) },\n};\nexport const TypeMinusInfinity = {\n  args: { onClick: () => action(\"onClick\")(-Infinity) },\n};\nexport const TypeNumber = { args: { onClick: () => action(\"onClick\")(10000) } };\nexport const TypeGlobal = {\n  args: { onClick: () => action(\"onClick\")(globalThis) },\n};\nexport const TypeSymbol = {\n  args: { onClick: () => action(\"onClick\")(Symbol(\"MySymbol\")) },\n};\nexport const TypeRegExp = {\n  args: { onClick: () => action(\"onClick\")(new RegExp(\"MyRegExp\")) },\n};\nexport const TypeArray = {\n  args: { onClick: () => action(\"onClick\")([\"a\", \"b\", \"c\"]) },\n};\nexport const TypeClass = {\n  args: { onClick: () => action(\"onClick\")(class MyClass {}) },\n};\nexport const TypeFunction = {\n  args: { onClick: () => action(\"onClick\")(function MyFunction() {}) },\n};\nexport const TypeMultiple = {\n  args: {\n    onClick: () =>\n      action(\"onClick\")(\"string\", true, false, null, undefined, [], {}),\n  },\n};\nexport const Cyclical = {\n  args: {\n    onClick: () =>\n      action(\"onClick\")(\n        (() => {\n          const cyclical: Record<string, any> = {};\n          cyclical.cyclical = cyclical;\n          return cyclical;\n        })(),\n      ),\n  },\n};\nexport const Reserved = { args: { onClick: action(\"delete\") } };\nexport const OptionPersist = {\n  args: { onClick: action(\"onClick\", { clearOnStoryChange: false }) },\n};\nexport const OptionDepth = {\n  args: { onClick: action(\"onClick\", { depth: 2 }) },\n};\nexport const Disabled = {\n  args: { onClick: action(\"onCLick\") },\n  parameters: { actions: { disabled: true } },\n};\nBasic.parameters = {\n  ...Basic.parameters,\n  docs: {\n    ...Basic.parameters?.docs,\n    source: {\n      originalSource: \"{\\n  args: { onClick: action('onClick') },\\n}\",\n      ...Basic.parameters?.docs?.source,\n    },\n  },\n};\nTypeString.parameters = {\n  ...TypeString.parameters,\n  docs: {\n    ...TypeString.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: { onClick: () => action('onClick')('string') },\\n}\",\n      ...TypeString.parameters?.docs?.source,\n    },\n  },\n};\nTypeBoolean.parameters = {\n  ...TypeBoolean.parameters,\n  docs: {\n    ...TypeBoolean.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: { onClick: () => action('onClick')(false) },\\n}\",\n      ...TypeBoolean.parameters?.docs?.source,\n    },\n  },\n};\nTypeObject.parameters = {\n  ...TypeObject.parameters,\n  docs: {\n    ...TypeObject.parameters?.docs,\n    source: {\n      originalSource: \"{\\n  args: { onClick: () => action('onClick')({}) },\\n}\",\n      ...TypeObject.parameters?.docs?.source,\n    },\n  },\n};\nTypeNull.parameters = {\n  ...TypeNull.parameters,\n  docs: {\n    ...TypeNull.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: { onClick: () => action('onClick')(null) },\\n}\",\n      ...TypeNull.parameters?.docs?.source,\n    },\n  },\n};\nTypeUndefined.parameters = {\n  ...TypeUndefined.parameters,\n  docs: {\n    ...TypeUndefined.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: { onClick: () => action('onClick')(undefined) },\\n}\",\n      ...TypeUndefined.parameters?.docs?.source,\n    },\n  },\n};\nTypeNaN.parameters = {\n  ...TypeNaN.parameters,\n  docs: {\n    ...TypeNaN.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: { onClick: () => action('onClick')(NaN) },\\n}\",\n      ...TypeNaN.parameters?.docs?.source,\n    },\n  },\n};\nTypeInfinity.parameters = {\n  ...TypeInfinity.parameters,\n  docs: {\n    ...TypeInfinity.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: { onClick: () => action('onClick')(Infinity) },\\n}\",\n      ...TypeInfinity.parameters?.docs?.source,\n    },\n  },\n};\nTypeMinusInfinity.parameters = {\n  ...TypeMinusInfinity.parameters,\n  docs: {\n    ...TypeMinusInfinity.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: { onClick: () => action('onClick')(-Infinity) },\\n}\",\n      ...TypeMinusInfinity.parameters?.docs?.source,\n    },\n  },\n};\nTypeNumber.parameters = {\n  ...TypeNumber.parameters,\n  docs: {\n    ...TypeNumber.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: { onClick: () => action('onClick')(10000) },\\n}\",\n      ...TypeNumber.parameters?.docs?.source,\n    },\n  },\n};\nTypeGlobal.parameters = {\n  ...TypeGlobal.parameters,\n  docs: {\n    ...TypeGlobal.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: { onClick: () => action('onClick')(globalThis) },\\n}\",\n      ...TypeGlobal.parameters?.docs?.source,\n    },\n  },\n};\nTypeSymbol.parameters = {\n  ...TypeSymbol.parameters,\n  docs: {\n    ...TypeSymbol.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: { onClick: () => action('onClick')(Symbol('MySymbol')) },\\n}\",\n      ...TypeSymbol.parameters?.docs?.source,\n    },\n  },\n};\nTypeRegExp.parameters = {\n  ...TypeRegExp.parameters,\n  docs: {\n    ...TypeRegExp.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: { onClick: () => action('onClick')(new RegExp('MyRegExp')) },\\n}\",\n      ...TypeRegExp.parameters?.docs?.source,\n    },\n  },\n};\nTypeArray.parameters = {\n  ...TypeArray.parameters,\n  docs: {\n    ...TypeArray.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: { onClick: () => action('onClick')(['a', 'b', 'c']) },\\n}\",\n      ...TypeArray.parameters?.docs?.source,\n    },\n  },\n};\nTypeClass.parameters = {\n  ...TypeClass.parameters,\n  docs: {\n    ...TypeClass.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: { onClick: () => action('onClick')(class MyClass {}) },\\n}\",\n      ...TypeClass.parameters?.docs?.source,\n    },\n  },\n};\nTypeFunction.parameters = {\n  ...TypeFunction.parameters,\n  docs: {\n    ...TypeFunction.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: { onClick: () => action('onClick')(function MyFunction() {}) },\\n}\",\n      ...TypeFunction.parameters?.docs?.source,\n    },\n  },\n};\nTypeMultiple.parameters = {\n  ...TypeMultiple.parameters,\n  docs: {\n    ...TypeMultiple.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: { onClick: () => action('onClick')('string', true, false, null, undefined, [], {}) },\\n}\",\n      ...TypeMultiple.parameters?.docs?.source,\n    },\n  },\n};\nCyclical.parameters = {\n  ...Cyclical.parameters,\n  docs: {\n    ...Cyclical.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: {\\n    onClick: () =>\\n      action('onClick')(\\n        (() => {\\n          const cyclical: Record<string, any> = {};\\n          cyclical.cyclical = cyclical;\\n          return cyclical;\\n        })()\\n      ),\\n  },\\n}\",\n      ...Cyclical.parameters?.docs?.source,\n    },\n  },\n};\nReserved.parameters = {\n  ...Reserved.parameters,\n  docs: {\n    ...Reserved.parameters?.docs,\n    source: {\n      originalSource: \"{\\n  args: { onClick: action('delete') },\\n}\",\n      ...Reserved.parameters?.docs?.source,\n    },\n  },\n};\nOptionPersist.parameters = {\n  ...OptionPersist.parameters,\n  docs: {\n    ...OptionPersist.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: { onClick: action('onClick', { clearOnStoryChange: false }) },\\n}\",\n      ...OptionPersist.parameters?.docs?.source,\n    },\n  },\n};\nOptionDepth.parameters = {\n  ...OptionDepth.parameters,\n  docs: {\n    ...OptionDepth.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: { onClick: action('onClick', { depth: 2 }) },\\n}\",\n      ...OptionDepth.parameters?.docs?.source,\n    },\n  },\n};\nDisabled.parameters = {\n  ...Disabled.parameters,\n  docs: {\n    ...Disabled.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: { onClick: action('onCLick') },\\n  parameters: {\\n    actions: {\\n      disabled: true,\\n    },\\n  },\\n}\",\n      ...Disabled.parameters?.docs?.source,\n    },\n  },\n};\n",
+    "originalSources": {
+      "Basic": "{\n  args: { onClick: action('onClick') },\n}",
+      "TypeString": "{\n  args: { onClick: () => action('onClick')('string') },\n}",
+      "TypeBoolean": "{\n  args: { onClick: () => action('onClick')(false) },\n}",
+      "TypeObject": "{\n  args: { onClick: () => action('onClick')({}) },\n}",
+      "TypeNull": "{\n  args: { onClick: () => action('onClick')(null) },\n}",
+      "TypeUndefined": "{\n  args: { onClick: () => action('onClick')(undefined) },\n}",
+      "TypeNaN": "{\n  args: { onClick: () => action('onClick')(NaN) },\n}",
+      "TypeInfinity": "{\n  args: { onClick: () => action('onClick')(Infinity) },\n}",
+      "TypeMinusInfinity": "{\n  args: { onClick: () => action('onClick')(-Infinity) },\n}",
+      "TypeNumber": "{\n  args: { onClick: () => action('onClick')(10000) },\n}",
+      "TypeGlobal": "{\n  args: { onClick: () => action('onClick')(globalThis) },\n}",
+      "TypeSymbol": "{\n  args: { onClick: () => action('onClick')(Symbol('MySymbol')) },\n}",
+      "TypeRegExp": "{\n  args: { onClick: () => action('onClick')(new RegExp('MyRegExp')) },\n}",
+      "TypeArray": "{\n  args: { onClick: () => action('onClick')(['a', 'b', 'c']) },\n}",
+      "TypeClass": "{\n  args: { onClick: () => action('onClick')(class MyClass {}) },\n}",
+      "TypeFunction": "{\n  args: { onClick: () => action('onClick')(function MyFunction() {}) },\n}",
+      "TypeMultiple": "{\n  args: { onClick: () => action('onClick')('string', true, false, null, undefined, [], {}) },\n}",
+      "Cyclical": "{\n  args: {\n    onClick: () =>\n      action('onClick')(\n        (() => {\n          const cyclical: Record<string, any> = {};\n          cyclical.cyclical = cyclical;\n          return cyclical;\n        })()\n      ),\n  },\n}",
+      "Reserved": "{\n  args: { onClick: action('delete') },\n}",
+      "OptionPersist": "{\n  args: { onClick: action('onClick', { clearOnStoryChange: false }) },\n}",
+      "OptionDepth": "{\n  args: { onClick: action('onClick', { depth: 2 }) },\n}",
+      "Disabled": "{\n  args: { onClick: action('onCLick') },\n  parameters: {\n    actions: {\n      disabled: true,\n    },\n  },\n}"
+    },
+    "vitest": "import { test as _test, expect as _expect } from \"vitest\";\nimport {\n  testStory as _testStory,\n  convertToFilePath,\n} from \"@storybook/addon-vitest/internal/test-utils\";\nimport { global as globalThis } from \"@storybook/global\";\nimport { action } from \"storybook/actions\";\nconst _meta = {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Button,\n  args: { label: \"Click Me!\" },\n  parameters: { chromatic: { disableSnapshot: true } },\n  title: \"core-basics\",\n};\nexport default _meta;\nexport const Basic = { args: { onClick: action(\"onClick\") } };\nexport const TypeString = {\n  args: { onClick: () => action(\"onClick\")(\"string\") },\n};\nexport const TypeBoolean = {\n  args: { onClick: () => action(\"onClick\")(false) },\n};\nexport const TypeObject = { args: { onClick: () => action(\"onClick\")({}) } };\nexport const TypeNull = { args: { onClick: () => action(\"onClick\")(null) } };\nexport const TypeUndefined = {\n  args: { onClick: () => action(\"onClick\")(undefined) },\n};\nexport const TypeNaN = { args: { onClick: () => action(\"onClick\")(NaN) } };\nexport const TypeInfinity = {\n  args: { onClick: () => action(\"onClick\")(Infinity) },\n};\nexport const TypeMinusInfinity = {\n  args: { onClick: () => action(\"onClick\")(-Infinity) },\n};\nexport const TypeNumber = { args: { onClick: () => action(\"onClick\")(10000) } };\nexport const TypeGlobal = {\n  args: { onClick: () => action(\"onClick\")(globalThis) },\n};\nexport const TypeSymbol = {\n  args: { onClick: () => action(\"onClick\")(Symbol(\"MySymbol\")) },\n};\nexport const TypeRegExp = {\n  args: { onClick: () => action(\"onClick\")(new RegExp(\"MyRegExp\")) },\n};\nexport const TypeArray = {\n  args: { onClick: () => action(\"onClick\")([\"a\", \"b\", \"c\"]) },\n};\nexport const TypeClass = {\n  args: { onClick: () => action(\"onClick\")(class MyClass {}) },\n};\nexport const TypeFunction = {\n  args: { onClick: () => action(\"onClick\")(function MyFunction() {}) },\n};\nexport const TypeMultiple = {\n  args: {\n    onClick: () =>\n      action(\"onClick\")(\"string\", true, false, null, undefined, [], {}),\n  },\n};\nexport const Cyclical = {\n  args: {\n    onClick: () =>\n      action(\"onClick\")(\n        (() => {\n          const cyclical: Record<string, any> = {};\n          cyclical.cyclical = cyclical;\n          return cyclical;\n        })(),\n      ),\n  },\n};\nexport const Reserved = { args: { onClick: action(\"delete\") } };\nexport const OptionPersist = {\n  args: { onClick: action(\"onClick\", { clearOnStoryChange: false }) },\n};\nexport const OptionDepth = {\n  args: { onClick: action(\"onClick\", { depth: 2 }) },\n};\nexport const Disabled = {\n  args: { onClick: action(\"onCLick\") },\n  parameters: { actions: { disabled: true } },\n};\nconst _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(\n  globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath,\n);\nif (_isRunningFromThisFile) {\n  _test(\n    \"Basic\",\n    _testStory({\n      exportName: \"Basic\",\n      story: Basic,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-basics--basic\",\n    }),\n  );\n  _test(\n    \"Type String\",\n    _testStory({\n      exportName: \"TypeString\",\n      story: TypeString,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-basics--type-string\",\n    }),\n  );\n  _test(\n    \"Type Boolean\",\n    _testStory({\n      exportName: \"TypeBoolean\",\n      story: TypeBoolean,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-basics--type-boolean\",\n    }),\n  );\n  _test(\n    \"Type Object\",\n    _testStory({\n      exportName: \"TypeObject\",\n      story: TypeObject,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-basics--type-object\",\n    }),\n  );\n  _test(\n    \"Type Null\",\n    _testStory({\n      exportName: \"TypeNull\",\n      story: TypeNull,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-basics--type-null\",\n    }),\n  );\n  _test(\n    \"Type Undefined\",\n    _testStory({\n      exportName: \"TypeUndefined\",\n      story: TypeUndefined,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-basics--type-undefined\",\n    }),\n  );\n  _test(\n    \"Type Na N\",\n    _testStory({\n      exportName: \"TypeNaN\",\n      story: TypeNaN,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-basics--type-na-n\",\n    }),\n  );\n  _test(\n    \"Type Infinity\",\n    _testStory({\n      exportName: \"TypeInfinity\",\n      story: TypeInfinity,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-basics--type-infinity\",\n    }),\n  );\n  _test(\n    \"Type Minus Infinity\",\n    _testStory({\n      exportName: \"TypeMinusInfinity\",\n      story: TypeMinusInfinity,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-basics--type-minus-infinity\",\n    }),\n  );\n  _test(\n    \"Type Number\",\n    _testStory({\n      exportName: \"TypeNumber\",\n      story: TypeNumber,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-basics--type-number\",\n    }),\n  );\n  _test(\n    \"Type Global\",\n    _testStory({\n      exportName: \"TypeGlobal\",\n      story: TypeGlobal,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-basics--type-global\",\n    }),\n  );\n  _test(\n    \"Type Symbol\",\n    _testStory({\n      exportName: \"TypeSymbol\",\n      story: TypeSymbol,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-basics--type-symbol\",\n    }),\n  );\n  _test(\n    \"Type Reg Exp\",\n    _testStory({\n      exportName: \"TypeRegExp\",\n      story: TypeRegExp,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-basics--type-reg-exp\",\n    }),\n  );\n  _test(\n    \"Type Array\",\n    _testStory({\n      exportName: \"TypeArray\",\n      story: TypeArray,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-basics--type-array\",\n    }),\n  );\n  _test(\n    \"Type Class\",\n    _testStory({\n      exportName: \"TypeClass\",\n      story: TypeClass,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-basics--type-class\",\n    }),\n  );\n  _test(\n    \"Type Function\",\n    _testStory({\n      exportName: \"TypeFunction\",\n      story: TypeFunction,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-basics--type-function\",\n    }),\n  );\n  _test(\n    \"Type Multiple\",\n    _testStory({\n      exportName: \"TypeMultiple\",\n      story: TypeMultiple,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-basics--type-multiple\",\n    }),\n  );\n  _test(\n    \"Cyclical\",\n    _testStory({\n      exportName: \"Cyclical\",\n      story: Cyclical,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-basics--cyclical\",\n    }),\n  );\n  _test(\n    \"Reserved\",\n    _testStory({\n      exportName: \"Reserved\",\n      story: Reserved,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-basics--reserved\",\n    }),\n  );\n  _test(\n    \"Option Persist\",\n    _testStory({\n      exportName: \"OptionPersist\",\n      story: OptionPersist,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-basics--option-persist\",\n    }),\n  );\n  _test(\n    \"Option Depth\",\n    _testStory({\n      exportName: \"OptionDepth\",\n      story: OptionDepth,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-basics--option-depth\",\n    }),\n  );\n  _test(\n    \"Disabled\",\n    _testStory({\n      exportName: \"Disabled\",\n      story: Disabled,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-basics--disabled\",\n    }),\n  );\n}\n"
+  },
+  "core-before-each.stories.ts": {
+    "enriched": "/* eslint-disable storybook/prefer-pascal-case */\nimport { expect } from \"storybook/test\";\nconst meta = {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Button,\n  args: { label: \"Button\" },\n};\nexport default meta;\nexport const before_each_and_loaders_can_extend_context = {\n  parameters: { chromatic: { disableSnapshot: true } },\n  loaders(context) {\n    context.foo = [\"bar\"];\n  },\n  beforeEach(context) {\n    context.foo = [...context.foo, \"baz\"];\n  },\n  async play({ foo }) {\n    await expect(foo).toEqual([\"bar\", \"baz\"]);\n  },\n};\nexport const context_prop_is_available = {\n  parameters: { chromatic: { disableSnapshot: true } },\n  async play({ context, canvasElement }) {\n    await expect(context.canvasElement).toEqual(canvasElement);\n  },\n};\nexport const step_and_canvas_element_can_be_used_in_loaders_and_before_each = {\n  parameters: { chromatic: { disableSnapshot: true } },\n  loaders({ step, canvasElement }) {\n    step(\"loaders\", async () => {\n      await expect(canvasElement).toBeInTheDocument();\n    });\n  },\n  beforeEach({ step, canvasElement }) {\n    step(\"before each\", async () => {\n      await expect(canvasElement).toBeInTheDocument();\n    });\n  },\n};\nbefore_each_and_loaders_can_extend_context.parameters = {\n  ...before_each_and_loaders_can_extend_context.parameters,\n  docs: {\n    ...before_each_and_loaders_can_extend_context.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  parameters: { chromatic: { disableSnapshot: true } },\\n  loaders(context) {\\n    context.foo = ['bar'];\\n  },\\n  beforeEach(context) {\\n    context.foo = [...context.foo, 'baz'];\\n  },\\n  async play({ foo }) {\\n    await expect(foo).toEqual(['bar', 'baz']);\\n  },\\n}\",\n      ...before_each_and_loaders_can_extend_context.parameters?.docs?.source,\n    },\n  },\n};\ncontext_prop_is_available.parameters = {\n  ...context_prop_is_available.parameters,\n  docs: {\n    ...context_prop_is_available.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  parameters: { chromatic: { disableSnapshot: true } },\\n  async play({ context, canvasElement }) {\\n    await expect(context.canvasElement).toEqual(canvasElement);\\n  },\\n}\",\n      ...context_prop_is_available.parameters?.docs?.source,\n    },\n  },\n};\nstep_and_canvas_element_can_be_used_in_loaders_and_before_each.parameters = {\n  ...step_and_canvas_element_can_be_used_in_loaders_and_before_each.parameters,\n  docs: {\n    ...step_and_canvas_element_can_be_used_in_loaders_and_before_each.parameters\n      ?.docs,\n    source: {\n      originalSource:\n        \"{\\n  parameters: { chromatic: { disableSnapshot: true } },\\n  loaders({ step, canvasElement }) {\\n    step('loaders', async () => {\\n      await expect(canvasElement).toBeInTheDocument();\\n    });\\n  },\\n  beforeEach({ step, canvasElement }) {\\n    step('before each', async () => {\\n      await expect(canvasElement).toBeInTheDocument();\\n    });\\n  },\\n}\",\n      ...step_and_canvas_element_can_be_used_in_loaders_and_before_each\n        .parameters?.docs?.source,\n    },\n  },\n};\n",
+    "originalSources": {
+      "before_each_and_loaders_can_extend_context": "{\n  parameters: { chromatic: { disableSnapshot: true } },\n  loaders(context) {\n    context.foo = ['bar'];\n  },\n  beforeEach(context) {\n    context.foo = [...context.foo, 'baz'];\n  },\n  async play({ foo }) {\n    await expect(foo).toEqual(['bar', 'baz']);\n  },\n}",
+      "context_prop_is_available": "{\n  parameters: { chromatic: { disableSnapshot: true } },\n  async play({ context, canvasElement }) {\n    await expect(context.canvasElement).toEqual(canvasElement);\n  },\n}",
+      "step_and_canvas_element_can_be_used_in_loaders_and_before_each": "{\n  parameters: { chromatic: { disableSnapshot: true } },\n  loaders({ step, canvasElement }) {\n    step('loaders', async () => {\n      await expect(canvasElement).toBeInTheDocument();\n    });\n  },\n  beforeEach({ step, canvasElement }) {\n    step('before each', async () => {\n      await expect(canvasElement).toBeInTheDocument();\n    });\n  },\n}"
+    },
+    "vitest": "/* eslint-disable storybook/prefer-pascal-case */\nimport { expect } from \"storybook/test\";\nimport { test as _test, expect as _expect } from \"vitest\";\nimport {\n  testStory as _testStory,\n  convertToFilePath,\n} from \"@storybook/addon-vitest/internal/test-utils\";\nconst meta = {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Button,\n  args: { label: \"Button\" },\n  title: \"core-before-each\",\n};\nexport default meta;\nexport const before_each_and_loaders_can_extend_context = {\n  parameters: { chromatic: { disableSnapshot: true } },\n  loaders(context) {\n    context.foo = [\"bar\"];\n  },\n  beforeEach(context) {\n    context.foo = [...context.foo, \"baz\"];\n  },\n  async play({ foo }) {\n    await expect(foo).toEqual([\"bar\", \"baz\"]);\n  },\n};\nexport const context_prop_is_available = {\n  parameters: { chromatic: { disableSnapshot: true } },\n  async play({ context, canvasElement }) {\n    await expect(context.canvasElement).toEqual(canvasElement);\n  },\n};\nexport const step_and_canvas_element_can_be_used_in_loaders_and_before_each = {\n  parameters: { chromatic: { disableSnapshot: true } },\n  loaders({ step, canvasElement }) {\n    step(\"loaders\", async () => {\n      await expect(canvasElement).toBeInTheDocument();\n    });\n  },\n  beforeEach({ step, canvasElement }) {\n    step(\"before each\", async () => {\n      await expect(canvasElement).toBeInTheDocument();\n    });\n  },\n};\nconst _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(\n  globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath,\n);\nif (_isRunningFromThisFile) {\n  _test(\n    \"Before Each And Loaders Can Extend Context\",\n    _testStory({\n      exportName: \"before_each_and_loaders_can_extend_context\",\n      story: before_each_and_loaders_can_extend_context,\n      meta: meta,\n      skipTags: [],\n      storyId: \"core-before-each--before-each-and-loaders-can-extend-context\",\n    }),\n  );\n  _test(\n    \"Context Prop Is Available\",\n    _testStory({\n      exportName: \"context_prop_is_available\",\n      story: context_prop_is_available,\n      meta: meta,\n      skipTags: [],\n      storyId: \"core-before-each--context-prop-is-available\",\n    }),\n  );\n  _test(\n    \"Step And Canvas Element Can Be Used In Loaders And Before Each\",\n    _testStory({\n      exportName:\n        \"step_and_canvas_element_can_be_used_in_loaders_and_before_each\",\n      story: step_and_canvas_element_can_be_used_in_loaders_and_before_each,\n      meta: meta,\n      skipTags: [],\n      storyId:\n        \"core-before-each--step-and-canvas-element-can-be-used-in-loaders-and-before-each\",\n    }),\n  );\n}\n"
+  },
+  "core-component-test.basics.stories.ts": {
+    "enriched": "import { global as globalThis } from \"@storybook/global\";\nimport {\n  expect,\n  fireEvent,\n  fn,\n  userEvent as testUserEvent,\n  waitFor,\n  waitForElementToBeRemoved,\n  within,\n} from \"storybook/test\";\nexport default {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Form,\n  args: { onSuccess: fn() },\n  globals: { sb_theme: \"light\" },\n  tags: [\"!vitest\"],\n};\nexport const Validation = {\n  play: async (context) => {\n    const { args, canvasElement, step } = context;\n    const canvas = within(canvasElement);\n    await step(\"Submit\", async () =>\n      fireEvent.click(canvas.getByRole(\"button\")),\n    );\n    await expect(args.onSuccess).not.toHaveBeenCalled();\n  },\n};\nexport const Type = {\n  play: async ({ canvasElement, userEvent }) => {\n    const canvas = within(canvasElement);\n    await userEvent.type(canvas.getByTestId(\"value\"), \"foobar\");\n  },\n};\nexport const Step = {\n  play: async ({ step }) => {\n    await step(\"Enter value\", Type.play);\n  },\n};\nexport const TypeAndClear = {\n  play: async ({ canvasElement, userEvent }) => {\n    const canvas = within(canvasElement);\n    await userEvent.type(canvas.getByTestId(\"value\"), \"initial value\");\n    await userEvent.clear(canvas.getByTestId(\"value\"));\n    await userEvent.type(canvas.getByTestId(\"value\"), \"final value\");\n  },\n};\nexport const Callback = {\n  play: async ({ args, canvasElement, step }) => {\n    const canvas = within(canvasElement);\n    await step(\"Enter value\", Type.play);\n    await step(\"Submit\", async () => {\n      await fireEvent.click(canvas.getByRole(\"button\"));\n    });\n    await expect(args.onSuccess).toHaveBeenCalled();\n  },\n};\n// NOTE: of course you can use `findByText()` to implicitly waitFor, but we want\n// an explicit test here\nexport const SyncWaitFor = {\n  play: async ({ canvasElement, step }) => {\n    const canvas = within(canvasElement);\n    await step(\"Submit form\", Callback.play);\n    await waitFor(() => canvas.getByText(\"Completed!!\"));\n    await waitForElementToBeRemoved(() => canvas.queryByText(\"Completed!!\"), {\n      timeout: 2000,\n    });\n  },\n};\nexport const AsyncWaitFor = {\n  play: async ({ canvasElement, step }) => {\n    const canvas = within(canvasElement);\n    await step(\"Submit form\", Callback.play);\n    await waitFor(async () => canvas.getByText(\"Completed!!\"));\n    await waitForElementToBeRemoved(() => canvas.queryByText(\"Completed!!\"), {\n      timeout: 2000,\n    });\n  },\n};\nexport const WithLoaders = {\n  loaders: [async () => new Promise((resolve) => setTimeout(resolve, 2000))],\n  play: async ({ step }) => {\n    await step(\"Submit form\", Callback.play);\n  },\n};\nconst UserEventSetup = {\n  play: async (context) => {\n    const { args, canvasElement, step, userEvent } = context;\n    const canvas = within(canvasElement);\n    await step(\n      \"Select and type on input using user-event v14 setup\",\n      async () => {\n        const input = canvas.getByRole(\"textbox\");\n        await userEvent.click(input);\n        await userEvent.type(input, \"Typing ...\");\n      },\n    );\n    await step(\"Tab and press enter on submit button\", async () => {\n      // Vitest's userEvent does not support pointer events, so we use storybook's\n      await testUserEvent.pointer([\n        { keys: \"[TouchA>]\", target: canvas.getByRole(\"textbox\") },\n        { keys: \"[/TouchA]\" },\n      ]);\n      const submitButton = await canvas.findByRole(\"button\");\n      if (navigator.userAgent.toLowerCase().includes(\"firefox\")) {\n        // user event has a few issues on firefox, therefore we do it differently\n        await fireEvent.click(submitButton);\n      } else {\n        await userEvent.tab();\n        await userEvent.keyboard(\"{enter}\");\n        await expect(submitButton).toHaveFocus();\n      }\n      await expect(args.onSuccess).toHaveBeenCalled();\n    });\n  },\n};\nexport { UserEventSetup };\nValidation.parameters = {\n  ...Validation.parameters,\n  docs: {\n    ...Validation.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  play: async (context) => {\\n    const { args, canvasElement, step } = context;\\n    const canvas = within(canvasElement);\\n\\n    await step('Submit', async () => fireEvent.click(canvas.getByRole('button')));\\n\\n    await expect(args.onSuccess).not.toHaveBeenCalled();\\n  },\\n}\",\n      ...Validation.parameters?.docs?.source,\n    },\n  },\n};\nType.parameters = {\n  ...Type.parameters,\n  docs: {\n    ...Type.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  play: async ({ canvasElement, userEvent }) => {\\n    const canvas = within(canvasElement);\\n    await userEvent.type(canvas.getByTestId('value'), 'foobar');\\n  },\\n}\",\n      ...Type.parameters?.docs?.source,\n    },\n  },\n};\nStep.parameters = {\n  ...Step.parameters,\n  docs: {\n    ...Step.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  play: async ({ step }) => {\\n    await step('Enter value', Type.play);\\n  },\\n}\",\n      ...Step.parameters?.docs?.source,\n    },\n  },\n};\nTypeAndClear.parameters = {\n  ...TypeAndClear.parameters,\n  docs: {\n    ...TypeAndClear.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  play: async ({ canvasElement, userEvent }) => {\\n    const canvas = within(canvasElement);\\n    await userEvent.type(canvas.getByTestId('value'), 'initial value');\\n    await userEvent.clear(canvas.getByTestId('value'));\\n    await userEvent.type(canvas.getByTestId('value'), 'final value');\\n  },\\n}\",\n      ...TypeAndClear.parameters?.docs?.source,\n    },\n  },\n};\nCallback.parameters = {\n  ...Callback.parameters,\n  docs: {\n    ...Callback.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  play: async ({ args, canvasElement, step }) => {\\n    const canvas = within(canvasElement);\\n    await step('Enter value', Type.play);\\n\\n    await step('Submit', async () => {\\n      await fireEvent.click(canvas.getByRole('button'));\\n    });\\n\\n    await expect(args.onSuccess).toHaveBeenCalled();\\n  },\\n}\",\n      ...Callback.parameters?.docs?.source,\n    },\n  },\n};\nSyncWaitFor.parameters = {\n  ...SyncWaitFor.parameters,\n  docs: {\n    ...SyncWaitFor.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  play: async ({ canvasElement, step }) => {\\n    const canvas = within(canvasElement);\\n    await step('Submit form', Callback.play);\\n    await waitFor(() => canvas.getByText('Completed!!'));\\n    await waitForElementToBeRemoved(() => canvas.queryByText('Completed!!'), {\\n      timeout: 2000,\\n    });\\n  },\\n}\",\n      ...SyncWaitFor.parameters?.docs?.source,\n    },\n  },\n};\nAsyncWaitFor.parameters = {\n  ...AsyncWaitFor.parameters,\n  docs: {\n    ...AsyncWaitFor.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  play: async ({ canvasElement, step }) => {\\n    const canvas = within(canvasElement);\\n    await step('Submit form', Callback.play);\\n    await waitFor(async () => canvas.getByText('Completed!!'));\\n    await waitForElementToBeRemoved(() => canvas.queryByText('Completed!!'), {\\n      timeout: 2000,\\n    });\\n  },\\n}\",\n      ...AsyncWaitFor.parameters?.docs?.source,\n    },\n  },\n};\nWithLoaders.parameters = {\n  ...WithLoaders.parameters,\n  docs: {\n    ...WithLoaders.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  loaders: [async () => new Promise((resolve) => setTimeout(resolve, 2000))],\\n  play: async ({ step }) => {\\n    await step('Submit form', Callback.play);\\n  },\\n}\",\n      ...WithLoaders.parameters?.docs?.source,\n    },\n  },\n};\n",
+    "originalSources": {
+      "Validation": "{\n  play: async (context) => {\n    const { args, canvasElement, step } = context;\n    const canvas = within(canvasElement);\n\n    await step('Submit', async () => fireEvent.click(canvas.getByRole('button')));\n\n    await expect(args.onSuccess).not.toHaveBeenCalled();\n  },\n}",
+      "Type": "{\n  play: async ({ canvasElement, userEvent }) => {\n    const canvas = within(canvasElement);\n    await userEvent.type(canvas.getByTestId('value'), 'foobar');\n  },\n}",
+      "Step": "{\n  play: async ({ step }) => {\n    await step('Enter value', Type.play);\n  },\n}",
+      "TypeAndClear": "{\n  play: async ({ canvasElement, userEvent }) => {\n    const canvas = within(canvasElement);\n    await userEvent.type(canvas.getByTestId('value'), 'initial value');\n    await userEvent.clear(canvas.getByTestId('value'));\n    await userEvent.type(canvas.getByTestId('value'), 'final value');\n  },\n}",
+      "Callback": "{\n  play: async ({ args, canvasElement, step }) => {\n    const canvas = within(canvasElement);\n    await step('Enter value', Type.play);\n\n    await step('Submit', async () => {\n      await fireEvent.click(canvas.getByRole('button'));\n    });\n\n    await expect(args.onSuccess).toHaveBeenCalled();\n  },\n}",
+      "SyncWaitFor": "{\n  play: async ({ canvasElement, step }) => {\n    const canvas = within(canvasElement);\n    await step('Submit form', Callback.play);\n    await waitFor(() => canvas.getByText('Completed!!'));\n    await waitForElementToBeRemoved(() => canvas.queryByText('Completed!!'), {\n      timeout: 2000,\n    });\n  },\n}",
+      "AsyncWaitFor": "{\n  play: async ({ canvasElement, step }) => {\n    const canvas = within(canvasElement);\n    await step('Submit form', Callback.play);\n    await waitFor(async () => canvas.getByText('Completed!!'));\n    await waitForElementToBeRemoved(() => canvas.queryByText('Completed!!'), {\n      timeout: 2000,\n    });\n  },\n}",
+      "WithLoaders": "{\n  loaders: [async () => new Promise((resolve) => setTimeout(resolve, 2000))],\n  play: async ({ step }) => {\n    await step('Submit form', Callback.play);\n  },\n}"
+    },
+    "vitest": "import { test as _test, expect as _expect } from \"vitest\";\nimport {\n  testStory as _testStory,\n  convertToFilePath,\n} from \"@storybook/addon-vitest/internal/test-utils\";\nimport { global as globalThis } from \"@storybook/global\";\nimport {\n  expect,\n  fireEvent,\n  fn,\n  userEvent as testUserEvent,\n  waitFor,\n  waitForElementToBeRemoved,\n  within,\n} from \"storybook/test\";\nconst _meta = {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Form,\n  args: { onSuccess: fn() },\n  globals: { sb_theme: \"light\" },\n  tags: [\"!vitest\"],\n  title: \"core-component-test.basics\",\n};\nexport default _meta;\nexport const Validation = {\n  play: async (context) => {\n    const { args, canvasElement, step } = context;\n    const canvas = within(canvasElement);\n    await step(\"Submit\", async () =>\n      fireEvent.click(canvas.getByRole(\"button\")),\n    );\n    await expect(args.onSuccess).not.toHaveBeenCalled();\n  },\n};\nexport const Type = {\n  play: async ({ canvasElement, userEvent }) => {\n    const canvas = within(canvasElement);\n    await userEvent.type(canvas.getByTestId(\"value\"), \"foobar\");\n  },\n};\nexport const Step = {\n  play: async ({ step }) => {\n    await step(\"Enter value\", Type.play);\n  },\n};\nexport const TypeAndClear = {\n  play: async ({ canvasElement, userEvent }) => {\n    const canvas = within(canvasElement);\n    await userEvent.type(canvas.getByTestId(\"value\"), \"initial value\");\n    await userEvent.clear(canvas.getByTestId(\"value\"));\n    await userEvent.type(canvas.getByTestId(\"value\"), \"final value\");\n  },\n};\nexport const Callback = {\n  play: async ({ args, canvasElement, step }) => {\n    const canvas = within(canvasElement);\n    await step(\"Enter value\", Type.play);\n    await step(\"Submit\", async () => {\n      await fireEvent.click(canvas.getByRole(\"button\"));\n    });\n    await expect(args.onSuccess).toHaveBeenCalled();\n  },\n};\n// NOTE: of course you can use `findByText()` to implicitly waitFor, but we want\n// an explicit test here\nexport const SyncWaitFor = {\n  play: async ({ canvasElement, step }) => {\n    const canvas = within(canvasElement);\n    await step(\"Submit form\", Callback.play);\n    await waitFor(() => canvas.getByText(\"Completed!!\"));\n    await waitForElementToBeRemoved(() => canvas.queryByText(\"Completed!!\"), {\n      timeout: 2000,\n    });\n  },\n};\nexport const AsyncWaitFor = {\n  play: async ({ canvasElement, step }) => {\n    const canvas = within(canvasElement);\n    await step(\"Submit form\", Callback.play);\n    await waitFor(async () => canvas.getByText(\"Completed!!\"));\n    await waitForElementToBeRemoved(() => canvas.queryByText(\"Completed!!\"), {\n      timeout: 2000,\n    });\n  },\n};\nexport const WithLoaders = {\n  loaders: [async () => new Promise((resolve) => setTimeout(resolve, 2000))],\n  play: async ({ step }) => {\n    await step(\"Submit form\", Callback.play);\n  },\n};\nconst UserEventSetup = {\n  play: async (context) => {\n    const { args, canvasElement, step, userEvent } = context;\n    const canvas = within(canvasElement);\n    await step(\n      \"Select and type on input using user-event v14 setup\",\n      async () => {\n        const input = canvas.getByRole(\"textbox\");\n        await userEvent.click(input);\n        await userEvent.type(input, \"Typing ...\");\n      },\n    );\n    await step(\"Tab and press enter on submit button\", async () => {\n      // Vitest's userEvent does not support pointer events, so we use storybook's\n      await testUserEvent.pointer([\n        { keys: \"[TouchA>]\", target: canvas.getByRole(\"textbox\") },\n        { keys: \"[/TouchA]\" },\n      ]);\n      const submitButton = await canvas.findByRole(\"button\");\n      if (navigator.userAgent.toLowerCase().includes(\"firefox\")) {\n        // user event has a few issues on firefox, therefore we do it differently\n        await fireEvent.click(submitButton);\n      } else {\n        await userEvent.tab();\n        await userEvent.keyboard(\"{enter}\");\n        await expect(submitButton).toHaveFocus();\n      }\n      await expect(args.onSuccess).toHaveBeenCalled();\n    });\n  },\n};\nexport { UserEventSetup };\nconst _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(\n  globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath,\n);\nif (_isRunningFromThisFile) {\n  _test(\n    \"Validation\",\n    _testStory({\n      exportName: \"Validation\",\n      story: Validation,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-component-test-basics--validation\",\n    }),\n  );\n  _test(\n    \"Type\",\n    _testStory({\n      exportName: \"Type\",\n      story: Type,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-component-test-basics--type\",\n    }),\n  );\n  _test(\n    \"Step\",\n    _testStory({\n      exportName: \"Step\",\n      story: Step,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-component-test-basics--step\",\n    }),\n  );\n  _test(\n    \"Type And Clear\",\n    _testStory({\n      exportName: \"TypeAndClear\",\n      story: TypeAndClear,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-component-test-basics--type-and-clear\",\n    }),\n  );\n  _test(\n    \"Callback\",\n    _testStory({\n      exportName: \"Callback\",\n      story: Callback,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-component-test-basics--callback\",\n    }),\n  );\n  _test(\n    \"Sync Wait For\",\n    _testStory({\n      exportName: \"SyncWaitFor\",\n      story: SyncWaitFor,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-component-test-basics--sync-wait-for\",\n    }),\n  );\n  _test(\n    \"Async Wait For\",\n    _testStory({\n      exportName: \"AsyncWaitFor\",\n      story: AsyncWaitFor,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-component-test-basics--async-wait-for\",\n    }),\n  );\n  _test(\n    \"With Loaders\",\n    _testStory({\n      exportName: \"WithLoaders\",\n      story: WithLoaders,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-component-test-basics--with-loaders\",\n    }),\n  );\n  _test(\n    \"UserEventSetup\",\n    _testStory({\n      exportName: \"UserEventSetup\",\n      story: UserEventSetup,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-component-test-basics--user-event-setup\",\n    }),\n  );\n}\n"
+  },
+  "core-exportOrder.stories.ts": {
+    "enriched": "import { global as globalThis } from \"@storybook/global\";\nexport default {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,\n  args: { text: \"Check that Story2 is listed before Story1\" },\n};\nexport const Story1 = {};\nexport const Story2 = {};\nexport const __namedExportsOrder = [\"Story2\", \"Story1\"];\nStory2.parameters = {\n  ...Story2.parameters,\n  docs: {\n    ...Story2.parameters?.docs,\n    source: { originalSource: \"{}\", ...Story2.parameters?.docs?.source },\n  },\n};\nStory1.parameters = {\n  ...Story1.parameters,\n  docs: {\n    ...Story1.parameters?.docs,\n    source: { originalSource: \"{}\", ...Story1.parameters?.docs?.source },\n  },\n};\n",
+    "originalSources": {
+      "Story2": "{}",
+      "Story1": "{}"
+    },
+    "vitest": "import { test as _test, expect as _expect } from \"vitest\";\nimport {\n  testStory as _testStory,\n  convertToFilePath,\n} from \"@storybook/addon-vitest/internal/test-utils\";\nimport { global as globalThis } from \"@storybook/global\";\nconst _meta = {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,\n  args: { text: \"Check that Story2 is listed before Story1\" },\n  title: \"core-exportOrder\",\n};\nexport default _meta;\nexport const Story1 = {};\nexport const Story2 = {};\nexport const __namedExportsOrder = [\"Story2\", \"Story1\"];\nconst _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(\n  globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath,\n);\nif (_isRunningFromThisFile) {\n  _test(\n    \"Story 2\",\n    _testStory({\n      exportName: \"Story2\",\n      story: Story2,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-exportorder--story-2\",\n    }),\n  );\n  _test(\n    \"Story 1\",\n    _testStory({\n      exportName: \"Story1\",\n      story: Story1,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-exportorder--story-1\",\n    }),\n  );\n}\n"
+  },
+  "core-globals.stories.ts": {
+    "enriched": "import type {\n  PartialStoryFn,\n  PlayFunctionContext,\n  StoryContext,\n} from \"storybook/internal/types\";\nimport { global as globalThis } from \"@storybook/global\";\nimport { expect, within } from \"storybook/test\";\nexport default {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,\n  tags: [\"autodocs\"],\n  globals: { baz: \"bazComponentValue\" },\n};\nexport const Inheritance = {\n  // Compose all the globals into `object`, so the pre component only needs a single prop\n  decorators: [\n    (storyFn: PartialStoryFn, context: StoryContext) =>\n      storyFn({ args: { object: context.globals } }),\n  ],\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    await expect(\n      JSON.parse(within(canvasElement).getByTestId(\"pre\").innerText),\n    ).toMatchObject({\n      foo: \"fooValue\",\n      bar: \"barValue\",\n      baz: \"bazComponentValue\",\n    });\n  },\n};\nexport const Events = {\n  parameters: { chromatic: { disableSnapshot: true } },\n  // Just pass the \"foo\" global to the pre\n  decorators: [\n    (storyFn: PartialStoryFn, context: StoryContext) =>\n      storyFn({ args: { text: context.globals.foo } }),\n  ],\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;\n    await channel.emit(\"updateGlobals\", { globals: { foo: \"fooValue\" } });\n    await within(canvasElement).findByText(\"fooValue\");\n    await channel.emit(\"updateGlobals\", { globals: { foo: \"updated\" } });\n    await within(canvasElement).findByText(\"updated\");\n    // Reset it back to the original value just to avoid polluting the URL\n    await channel.emit(\"updateGlobals\", { globals: { foo: \"fooValue\" } });\n    await within(canvasElement).findByText(\"fooValue\");\n  },\n  // this story can't be reliably tested because the globals changes results in renderPhases disrupting test runs\n  tags: [\"!vitest\", \"!test\"],\n};\nexport const Overrides1 = {\n  // Compose all the globals into `object`, so the pre component only needs a single prop\n  decorators: [\n    (storyFn: PartialStoryFn, context: StoryContext) =>\n      storyFn({ args: { object: context.globals } }),\n  ],\n  globals: { foo: \"fooOverridden1\", baz: \"bazOverridden1\" },\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    await expect(\n      JSON.parse(within(canvasElement).getByTestId(\"pre\").innerText),\n    ).toMatchObject({\n      foo: \"fooOverridden1\",\n      bar: \"barValue\",\n      baz: \"bazOverridden1\",\n    });\n  },\n};\nexport const Overrides2 = {\n  // Compose all the globals into `object`, so the pre component only needs a single prop\n  decorators: [\n    (storyFn: PartialStoryFn, context: StoryContext) =>\n      storyFn({ args: { object: context.globals } }),\n  ],\n  globals: { foo: \"fooOverridden2\", baz: \"bazOverridden2\" },\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    await expect(\n      JSON.parse(within(canvasElement).getByTestId(\"pre\").innerText),\n    ).toMatchObject({\n      foo: \"fooOverridden2\",\n      bar: \"barValue\",\n      baz: \"bazOverridden2\",\n    });\n  },\n};\nInheritance.parameters = {\n  ...Inheritance.parameters,\n  docs: {\n    ...Inheritance.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  // Compose all the globals into `object`, so the pre component only needs a single prop\\n  decorators: [\\n    (storyFn: PartialStoryFn, context: StoryContext) =>\\n      storyFn({ args: { object: context.globals } }),\\n  ],\\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\\n    await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({\\n      foo: 'fooValue',\\n      bar: 'barValue',\\n      baz: 'bazComponentValue',\\n    });\\n  },\\n}\",\n      ...Inheritance.parameters?.docs?.source,\n    },\n  },\n};\nEvents.parameters = {\n  ...Events.parameters,\n  docs: {\n    ...Events.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  parameters: { chromatic: { disableSnapshot: true } },\\n  // Just pass the \\\"foo\\\" global to the pre\\n  decorators: [\\n    (storyFn: PartialStoryFn, context: StoryContext) =>\\n      storyFn({ args: { text: context.globals.foo } }),\\n  ],\\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\\n    const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;\\n    await channel.emit('updateGlobals', { globals: { foo: 'fooValue' } });\\n    await within(canvasElement).findByText('fooValue');\\n\\n    await channel.emit('updateGlobals', { globals: { foo: 'updated' } });\\n    await within(canvasElement).findByText('updated');\\n\\n    // Reset it back to the original value just to avoid polluting the URL\\n    await channel.emit('updateGlobals', { globals: { foo: 'fooValue' } });\\n    await within(canvasElement).findByText('fooValue');\\n  },\\n  // this story can't be reliably tested because the globals changes results in renderPhases disrupting test runs\\n  tags: ['!vitest', '!test'],\\n}\",\n      ...Events.parameters?.docs?.source,\n    },\n  },\n};\nOverrides1.parameters = {\n  ...Overrides1.parameters,\n  docs: {\n    ...Overrides1.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  // Compose all the globals into `object`, so the pre component only needs a single prop\\n  decorators: [\\n    (storyFn: PartialStoryFn, context: StoryContext) =>\\n      storyFn({ args: { object: context.globals } }),\\n  ],\\n  globals: {\\n    foo: 'fooOverridden1',\\n    baz: 'bazOverridden1',\\n  },\\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\\n    await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({\\n      foo: 'fooOverridden1',\\n      bar: 'barValue',\\n      baz: 'bazOverridden1',\\n    });\\n  },\\n}\",\n      ...Overrides1.parameters?.docs?.source,\n    },\n  },\n};\nOverrides2.parameters = {\n  ...Overrides2.parameters,\n  docs: {\n    ...Overrides2.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  // Compose all the globals into `object`, so the pre component only needs a single prop\\n  decorators: [\\n    (storyFn: PartialStoryFn, context: StoryContext) =>\\n      storyFn({ args: { object: context.globals } }),\\n  ],\\n  globals: {\\n    foo: 'fooOverridden2',\\n    baz: 'bazOverridden2',\\n  },\\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\\n    await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({\\n      foo: 'fooOverridden2',\\n      bar: 'barValue',\\n      baz: 'bazOverridden2',\\n    });\\n  },\\n}\",\n      ...Overrides2.parameters?.docs?.source,\n    },\n  },\n};\n",
+    "originalSources": {
+      "Inheritance": "{\n  // Compose all the globals into `object`, so the pre component only needs a single prop\n  decorators: [\n    (storyFn: PartialStoryFn, context: StoryContext) =>\n      storyFn({ args: { object: context.globals } }),\n  ],\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({\n      foo: 'fooValue',\n      bar: 'barValue',\n      baz: 'bazComponentValue',\n    });\n  },\n}",
+      "Events": "{\n  parameters: { chromatic: { disableSnapshot: true } },\n  // Just pass the \"foo\" global to the pre\n  decorators: [\n    (storyFn: PartialStoryFn, context: StoryContext) =>\n      storyFn({ args: { text: context.globals.foo } }),\n  ],\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;\n    await channel.emit('updateGlobals', { globals: { foo: 'fooValue' } });\n    await within(canvasElement).findByText('fooValue');\n\n    await channel.emit('updateGlobals', { globals: { foo: 'updated' } });\n    await within(canvasElement).findByText('updated');\n\n    // Reset it back to the original value just to avoid polluting the URL\n    await channel.emit('updateGlobals', { globals: { foo: 'fooValue' } });\n    await within(canvasElement).findByText('fooValue');\n  },\n  // this story can't be reliably tested because the globals changes results in renderPhases disrupting test runs\n  tags: ['!vitest', '!test'],\n}",
+      "Overrides1": "{\n  // Compose all the globals into `object`, so the pre component only needs a single prop\n  decorators: [\n    (storyFn: PartialStoryFn, context: StoryContext) =>\n      storyFn({ args: { object: context.globals } }),\n  ],\n  globals: {\n    foo: 'fooOverridden1',\n    baz: 'bazOverridden1',\n  },\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({\n      foo: 'fooOverridden1',\n      bar: 'barValue',\n      baz: 'bazOverridden1',\n    });\n  },\n}",
+      "Overrides2": "{\n  // Compose all the globals into `object`, so the pre component only needs a single prop\n  decorators: [\n    (storyFn: PartialStoryFn, context: StoryContext) =>\n      storyFn({ args: { object: context.globals } }),\n  ],\n  globals: {\n    foo: 'fooOverridden2',\n    baz: 'bazOverridden2',\n  },\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({\n      foo: 'fooOverridden2',\n      bar: 'barValue',\n      baz: 'bazOverridden2',\n    });\n  },\n}"
+    },
+    "vitest": "import { test as _test, expect as _expect } from \"vitest\";\nimport {\n  testStory as _testStory,\n  convertToFilePath,\n} from \"@storybook/addon-vitest/internal/test-utils\";\nimport type {\n  PartialStoryFn,\n  PlayFunctionContext,\n  StoryContext,\n} from \"storybook/internal/types\";\nimport { global as globalThis } from \"@storybook/global\";\nimport { expect, within } from \"storybook/test\";\nconst _meta = {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,\n  tags: [\"autodocs\"],\n  globals: { baz: \"bazComponentValue\" },\n  title: \"core-globals\",\n};\nexport default _meta;\nexport const Inheritance = {\n  // Compose all the globals into `object`, so the pre component only needs a single prop\n  decorators: [\n    (storyFn: PartialStoryFn, context: StoryContext) =>\n      storyFn({ args: { object: context.globals } }),\n  ],\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    await expect(\n      JSON.parse(within(canvasElement).getByTestId(\"pre\").innerText),\n    ).toMatchObject({\n      foo: \"fooValue\",\n      bar: \"barValue\",\n      baz: \"bazComponentValue\",\n    });\n  },\n};\nexport const Events = {\n  parameters: { chromatic: { disableSnapshot: true } },\n  // Just pass the \"foo\" global to the pre\n  decorators: [\n    (storyFn: PartialStoryFn, context: StoryContext) =>\n      storyFn({ args: { text: context.globals.foo } }),\n  ],\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;\n    await channel.emit(\"updateGlobals\", { globals: { foo: \"fooValue\" } });\n    await within(canvasElement).findByText(\"fooValue\");\n    await channel.emit(\"updateGlobals\", { globals: { foo: \"updated\" } });\n    await within(canvasElement).findByText(\"updated\");\n    // Reset it back to the original value just to avoid polluting the URL\n    await channel.emit(\"updateGlobals\", { globals: { foo: \"fooValue\" } });\n    await within(canvasElement).findByText(\"fooValue\");\n  },\n  // this story can't be reliably tested because the globals changes results in renderPhases disrupting test runs\n  tags: [\"!vitest\", \"!test\"],\n};\nexport const Overrides1 = {\n  // Compose all the globals into `object`, so the pre component only needs a single prop\n  decorators: [\n    (storyFn: PartialStoryFn, context: StoryContext) =>\n      storyFn({ args: { object: context.globals } }),\n  ],\n  globals: { foo: \"fooOverridden1\", baz: \"bazOverridden1\" },\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    await expect(\n      JSON.parse(within(canvasElement).getByTestId(\"pre\").innerText),\n    ).toMatchObject({\n      foo: \"fooOverridden1\",\n      bar: \"barValue\",\n      baz: \"bazOverridden1\",\n    });\n  },\n};\nexport const Overrides2 = {\n  // Compose all the globals into `object`, so the pre component only needs a single prop\n  decorators: [\n    (storyFn: PartialStoryFn, context: StoryContext) =>\n      storyFn({ args: { object: context.globals } }),\n  ],\n  globals: { foo: \"fooOverridden2\", baz: \"bazOverridden2\" },\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    await expect(\n      JSON.parse(within(canvasElement).getByTestId(\"pre\").innerText),\n    ).toMatchObject({\n      foo: \"fooOverridden2\",\n      bar: \"barValue\",\n      baz: \"bazOverridden2\",\n    });\n  },\n};\nconst _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(\n  globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath,\n);\nif (_isRunningFromThisFile) {\n  _test(\n    \"Inheritance\",\n    _testStory({\n      exportName: \"Inheritance\",\n      story: Inheritance,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-globals--inheritance\",\n    }),\n  );\n  _test(\n    \"Overrides 1\",\n    _testStory({\n      exportName: \"Overrides1\",\n      story: Overrides1,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-globals--overrides-1\",\n    }),\n  );\n  _test(\n    \"Overrides 2\",\n    _testStory({\n      exportName: \"Overrides2\",\n      story: Overrides2,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-globals--overrides-2\",\n    }),\n  );\n}\n"
+  },
+  "core-indexer.stories.ts": {
+    "enriched": "import type { PlayFunctionContext } from \"storybook/internal/types\";\nimport { global as globalThis } from \"@storybook/global\";\nimport { expect } from \"storybook/test\";\nexport default {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,\n  args: { text: \"Check that id assertions in interaction tests are passing\" },\n  id: \"indexer-custom-meta-id\",\n};\nexport const Default = {\n  play: async ({ id }: PlayFunctionContext<any>) => {\n    await expect(id).toBe(\"indexer-custom-meta-id--default\");\n  },\n};\nexport const CustomParametersId = {\n  parameters: { __id: \"custom-id\" },\n  play: async ({ id }: PlayFunctionContext<any>) => {\n    await expect(id).toBe(\"custom-id\");\n  },\n};\nDefault.parameters = {\n  ...Default.parameters,\n  docs: {\n    ...Default.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  play: async ({ id }: PlayFunctionContext<any>) => {\\n    await expect(id).toBe('indexer-custom-meta-id--default');\\n  },\\n}\",\n      ...Default.parameters?.docs?.source,\n    },\n  },\n};\nCustomParametersId.parameters = {\n  ...CustomParametersId.parameters,\n  docs: {\n    ...CustomParametersId.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  parameters: {\\n    __id: 'custom-id',\\n  },\\n  play: async ({ id }: PlayFunctionContext<any>) => {\\n    await expect(id).toBe('custom-id');\\n  },\\n}\",\n      ...CustomParametersId.parameters?.docs?.source,\n    },\n  },\n};\n",
+    "originalSources": {
+      "Default": "{\n  play: async ({ id }: PlayFunctionContext<any>) => {\n    await expect(id).toBe('indexer-custom-meta-id--default');\n  },\n}",
+      "CustomParametersId": "{\n  parameters: {\n    __id: 'custom-id',\n  },\n  play: async ({ id }: PlayFunctionContext<any>) => {\n    await expect(id).toBe('custom-id');\n  },\n}"
+    },
+    "vitest": "import { test as _test, expect as _expect } from \"vitest\";\nimport {\n  testStory as _testStory,\n  convertToFilePath,\n} from \"@storybook/addon-vitest/internal/test-utils\";\nimport type { PlayFunctionContext } from \"storybook/internal/types\";\nimport { global as globalThis } from \"@storybook/global\";\nimport { expect } from \"storybook/test\";\nconst _meta = {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,\n  args: { text: \"Check that id assertions in interaction tests are passing\" },\n  id: \"indexer-custom-meta-id\",\n  title: \"core-indexer\",\n};\nexport default _meta;\nexport const Default = {\n  play: async ({ id }: PlayFunctionContext<any>) => {\n    await expect(id).toBe(\"indexer-custom-meta-id--default\");\n  },\n};\nexport const CustomParametersId = {\n  parameters: { __id: \"custom-id\" },\n  play: async ({ id }: PlayFunctionContext<any>) => {\n    await expect(id).toBe(\"custom-id\");\n  },\n};\nconst _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(\n  globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath,\n);\nif (_isRunningFromThisFile) {\n  _test(\n    \"Default\",\n    _testStory({\n      exportName: \"Default\",\n      story: Default,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"indexer-custom-meta-id--default\",\n    }),\n  );\n  _test(\n    \"Custom Parameters Id\",\n    _testStory({\n      exportName: \"CustomParametersId\",\n      story: CustomParametersId,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"custom-id\",\n    }),\n  );\n}\n"
+  },
+  "core-interleavedExports.stories.ts": {
+    "enriched": "import { global as globalThis } from \"@storybook/global\";\nimport \"./import\";\nexport default {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,\n  args: { text: \"Check that stories are processed OK\" },\n};\nexport const Story1 = {};\nexport const Story2 = {};\nStory1.parameters = {\n  ...Story1.parameters,\n  docs: {\n    ...Story1.parameters?.docs,\n    source: { originalSource: \"{}\", ...Story1.parameters?.docs?.source },\n  },\n};\nStory2.parameters = {\n  ...Story2.parameters,\n  docs: {\n    ...Story2.parameters?.docs,\n    source: { originalSource: \"{}\", ...Story2.parameters?.docs?.source },\n  },\n};\n",
+    "originalSources": {
+      "Story1": "{}",
+      "Story2": "{}"
+    },
+    "vitest": "import { test as _test, expect as _expect } from \"vitest\";\nimport {\n  testStory as _testStory,\n  convertToFilePath,\n} from \"@storybook/addon-vitest/internal/test-utils\";\nimport { global as globalThis } from \"@storybook/global\";\nimport \"./import\";\nconst _meta = {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,\n  args: { text: \"Check that stories are processed OK\" },\n  title: \"core-interleavedExports\",\n};\nexport default _meta;\nexport const Story1 = {};\nexport const Story2 = {};\nconst _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(\n  globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath,\n);\nif (_isRunningFromThisFile) {\n  _test(\n    \"Story 1\",\n    _testStory({\n      exportName: \"Story1\",\n      story: Story1,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-interleavedexports--story-1\",\n    }),\n  );\n  _test(\n    \"Story 2\",\n    _testStory({\n      exportName: \"Story2\",\n      story: Story2,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-interleavedexports--story-2\",\n    }),\n  );\n}\n"
+  },
+  "core-moduleMocking.stories.ts": {
+    "enriched": "import { global as globalThis } from \"@storybook/global\";\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore This alias is set in the sandbox. Using ts-ignore instead of ts-expect-error to avoid build errors in the sandbox.\nimport { foo } from \"#utils\";\nimport { expect, fn, isMockFunction, mocked } from \"storybook/test\";\nexport default {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Button,\n  args: { onClick: fn(), label: \"Mock story\" },\n  parameters: { chromatic: { disableSnapshot: true } },\n  beforeEach: () => {\n    mocked(foo).mockReturnValue(\"mocked\");\n  },\n  async play() {\n    await expect(isMockFunction(foo)).toBe(true);\n    await expect(foo()).toBe(\"mocked\");\n  },\n};\nexport const Basic = {};\nBasic.parameters = {\n  ...Basic.parameters,\n  docs: {\n    ...Basic.parameters?.docs,\n    source: { originalSource: \"{}\", ...Basic.parameters?.docs?.source },\n  },\n};\n",
+    "originalSources": {
+      "Basic": "{}"
+    },
+    "vitest": "import { test as _test, expect as _expect } from \"vitest\";\nimport {\n  testStory as _testStory,\n  convertToFilePath,\n} from \"@storybook/addon-vitest/internal/test-utils\";\nimport { global as globalThis } from \"@storybook/global\";\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore This alias is set in the sandbox. Using ts-ignore instead of ts-expect-error to avoid build errors in the sandbox.\nimport { foo } from \"#utils\";\nimport { expect, fn, isMockFunction, mocked } from \"storybook/test\";\nconst _meta = {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Button,\n  args: { onClick: fn(), label: \"Mock story\" },\n  parameters: { chromatic: { disableSnapshot: true } },\n  beforeEach: () => {\n    mocked(foo).mockReturnValue(\"mocked\");\n  },\n  async play() {\n    await expect(isMockFunction(foo)).toBe(true);\n    await expect(foo()).toBe(\"mocked\");\n  },\n  title: \"core-moduleMocking\",\n};\nexport default _meta;\nexport const Basic = {};\nconst _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(\n  globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath,\n);\nif (_isRunningFromThisFile) {\n  _test(\n    \"Basic\",\n    _testStory({\n      exportName: \"Basic\",\n      story: Basic,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-modulemocking--basic\",\n    }),\n  );\n}\n"
+  },
+  "core-mount-in-play.stories.ts": {
+    "enriched": "import { expect, fn } from \"storybook/test\";\nconst meta = { component: globalThis.__TEMPLATE_COMPONENTS__.Button };\nexport default meta;\nexport const MountShouldBeDestructured = {\n  parameters: { chromatic: { disableSnapshot: true } },\n  args: { label: \"Button\", onClick: fn() },\n  async play(context) {\n    let error;\n    // TODO use expect.toThrow once this issue is fixed\n    // https://github.com/storybookjs/storybook/issues/28406\n    try {\n      await context.mount();\n    } catch (e) {\n      error = e;\n    }\n    await expect(error?.name).toContain(\"MountMustBeDestructuredError\");\n  },\n};\nMountShouldBeDestructured.parameters = {\n  ...MountShouldBeDestructured.parameters,\n  docs: {\n    ...MountShouldBeDestructured.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  parameters: { chromatic: { disableSnapshot: true } },\\n  args: {\\n    label: 'Button',\\n    onClick: fn(),\\n  },\\n  async play(context) {\\n    let error;\\n\\n    // TODO use expect.toThrow once this issue is fixed\\n    // https://github.com/storybookjs/storybook/issues/28406\\n    try {\\n      await context.mount();\\n    } catch (e) {\\n      error = e;\\n    }\\n    await expect(error?.name).toContain('MountMustBeDestructuredError');\\n  },\\n}\",\n      ...MountShouldBeDestructured.parameters?.docs?.source,\n    },\n  },\n};\n",
+    "originalSources": {
+      "MountShouldBeDestructured": "{\n  parameters: { chromatic: { disableSnapshot: true } },\n  args: {\n    label: 'Button',\n    onClick: fn(),\n  },\n  async play(context) {\n    let error;\n\n    // TODO use expect.toThrow once this issue is fixed\n    // https://github.com/storybookjs/storybook/issues/28406\n    try {\n      await context.mount();\n    } catch (e) {\n      error = e;\n    }\n    await expect(error?.name).toContain('MountMustBeDestructuredError');\n  },\n}"
+    },
+    "vitest": "import { test as _test, expect as _expect } from \"vitest\";\nimport {\n  testStory as _testStory,\n  convertToFilePath,\n} from \"@storybook/addon-vitest/internal/test-utils\";\nimport { expect, fn } from \"storybook/test\";\nconst meta = {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Button,\n  title: \"core-mount-in-play\",\n};\nexport default meta;\nexport const MountShouldBeDestructured = {\n  parameters: { chromatic: { disableSnapshot: true } },\n  args: { label: \"Button\", onClick: fn() },\n  async play(context) {\n    let error;\n    // TODO use expect.toThrow once this issue is fixed\n    // https://github.com/storybookjs/storybook/issues/28406\n    try {\n      await context.mount();\n    } catch (e) {\n      error = e;\n    }\n    await expect(error?.name).toContain(\"MountMustBeDestructuredError\");\n  },\n};\nconst _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(\n  globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath,\n);\nif (_isRunningFromThisFile) {\n  _test(\n    \"Mount Should Be Destructured\",\n    _testStory({\n      exportName: \"MountShouldBeDestructured\",\n      story: MountShouldBeDestructured,\n      meta: meta,\n      skipTags: [],\n      storyId: \"core-mount-in-play--mount-should-be-destructured\",\n    }),\n  );\n}\n"
+  },
+  "core-names.stories.ts": {
+    "enriched": "import type { PlayFunctionContext } from \"storybook/internal/types\";\nimport { global as globalThis } from \"@storybook/global\";\nimport { expect } from \"storybook/test\";\nexport default {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,\n  args: { text: \"No content\" },\n};\n// Very simple stories to show what happens when one story's id is a prefix of another's\n// Repro for https://github.com/storybookjs/storybook/issues/11571\nexport const PrefixAndName = {\n  play: async ({ name }: PlayFunctionContext<any>) => {\n    await expect(name).toBe(\"Prefix And Name\");\n  },\n};\nexport const Prefix = {\n  play: async ({ name }: PlayFunctionContext<any>) => {\n    await expect(name).toBe(\"Prefix\");\n  },\n};\nPrefixAndName.parameters = {\n  ...PrefixAndName.parameters,\n  docs: {\n    ...PrefixAndName.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  play: async ({ name }: PlayFunctionContext<any>) => {\\n    await expect(name).toBe('Prefix And Name');\\n  },\\n}\",\n      ...PrefixAndName.parameters?.docs?.source,\n    },\n  },\n};\nPrefix.parameters = {\n  ...Prefix.parameters,\n  docs: {\n    ...Prefix.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  play: async ({ name }: PlayFunctionContext<any>) => {\\n    await expect(name).toBe('Prefix');\\n  },\\n}\",\n      ...Prefix.parameters?.docs?.source,\n    },\n  },\n};\n",
+    "originalSources": {
+      "PrefixAndName": "{\n  play: async ({ name }: PlayFunctionContext<any>) => {\n    await expect(name).toBe('Prefix And Name');\n  },\n}",
+      "Prefix": "{\n  play: async ({ name }: PlayFunctionContext<any>) => {\n    await expect(name).toBe('Prefix');\n  },\n}"
+    },
+    "vitest": "import { test as _test, expect as _expect } from \"vitest\";\nimport {\n  testStory as _testStory,\n  convertToFilePath,\n} from \"@storybook/addon-vitest/internal/test-utils\";\nimport type { PlayFunctionContext } from \"storybook/internal/types\";\nimport { global as globalThis } from \"@storybook/global\";\nimport { expect } from \"storybook/test\";\nconst _meta = {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,\n  args: { text: \"No content\" },\n  title: \"core-names\",\n};\nexport default _meta;\n// Very simple stories to show what happens when one story's id is a prefix of another's\n// Repro for https://github.com/storybookjs/storybook/issues/11571\nexport const PrefixAndName = {\n  play: async ({ name }: PlayFunctionContext<any>) => {\n    await expect(name).toBe(\"Prefix And Name\");\n  },\n};\nexport const Prefix = {\n  play: async ({ name }: PlayFunctionContext<any>) => {\n    await expect(name).toBe(\"Prefix\");\n  },\n};\nconst _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(\n  globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath,\n);\nif (_isRunningFromThisFile) {\n  _test(\n    \"Prefix And Name\",\n    _testStory({\n      exportName: \"PrefixAndName\",\n      story: PrefixAndName,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-names--prefix-and-name\",\n    }),\n  );\n  _test(\n    \"Prefix\",\n    _testStory({\n      exportName: \"Prefix\",\n      story: Prefix,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-names--prefix\",\n    }),\n  );\n}\n"
+  },
+  "core-parameters.stories.ts": {
+    "enriched": "import type {\n  PartialStoryFn,\n  PlayFunctionContext,\n  StoryContext,\n} from \"storybook/internal/types\";\nimport { global as globalThis } from \"@storybook/global\";\nimport { expect, within } from \"storybook/test\";\nexport default {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,\n  parameters: {\n    componentParameter: \"componentParameter\",\n    storyParameter: \"componentStoryParameter\", // Checking this gets overridden\n    storyObject: { a: \"component\", b: \"component\" },\n  },\n  decorators: [\n    (storyFn: PartialStoryFn, context: StoryContext) => {\n      const {\n        projectParameter,\n        componentParameter,\n        storyParameter,\n        storyObject,\n      } = context.parameters;\n      return storyFn({\n        args: {\n          object: {\n            projectParameter,\n            componentParameter,\n            storyParameter,\n            storyObject,\n          },\n        },\n      });\n    },\n  ],\n};\nexport const Inheritance = {\n  parameters: { storyParameter: \"storyParameter\", storyObject: { a: \"story\" } },\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    const canvas = within(canvasElement);\n    await expect(JSON.parse(canvas.getByTestId(\"pre\").innerText)).toEqual({\n      projectParameter: \"projectParameter\",\n      componentParameter: \"componentParameter\",\n      storyParameter: \"storyParameter\",\n      storyObject: { a: \"story\", b: \"component\", c: \"project\" },\n    });\n  },\n};\nInheritance.parameters = {\n  ...Inheritance.parameters,\n  docs: {\n    ...Inheritance.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  parameters: {\\n    storyParameter: 'storyParameter',\\n    storyObject: {\\n      a: 'story',\\n    },\\n  },\\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\\n    const canvas = within(canvasElement);\\n    await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({\\n      projectParameter: 'projectParameter',\\n      componentParameter: 'componentParameter',\\n      storyParameter: 'storyParameter',\\n      storyObject: {\\n        a: 'story',\\n        b: 'component',\\n        c: 'project',\\n      },\\n    });\\n  },\\n}\",\n      ...Inheritance.parameters?.docs?.source,\n    },\n  },\n};\n",
+    "originalSources": {
+      "Inheritance": "{\n  parameters: {\n    storyParameter: 'storyParameter',\n    storyObject: {\n      a: 'story',\n    },\n  },\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    const canvas = within(canvasElement);\n    await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({\n      projectParameter: 'projectParameter',\n      componentParameter: 'componentParameter',\n      storyParameter: 'storyParameter',\n      storyObject: {\n        a: 'story',\n        b: 'component',\n        c: 'project',\n      },\n    });\n  },\n}"
+    },
+    "vitest": "import { test as _test, expect as _expect } from \"vitest\";\nimport {\n  testStory as _testStory,\n  convertToFilePath,\n} from \"@storybook/addon-vitest/internal/test-utils\";\nimport type {\n  PartialStoryFn,\n  PlayFunctionContext,\n  StoryContext,\n} from \"storybook/internal/types\";\nimport { global as globalThis } from \"@storybook/global\";\nimport { expect, within } from \"storybook/test\";\nconst _meta = {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,\n  parameters: {\n    componentParameter: \"componentParameter\",\n    storyParameter: \"componentStoryParameter\", // Checking this gets overridden\n    storyObject: { a: \"component\", b: \"component\" },\n  },\n  decorators: [\n    (storyFn: PartialStoryFn, context: StoryContext) => {\n      const {\n        projectParameter,\n        componentParameter,\n        storyParameter,\n        storyObject,\n      } = context.parameters;\n      return storyFn({\n        args: {\n          object: {\n            projectParameter,\n            componentParameter,\n            storyParameter,\n            storyObject,\n          },\n        },\n      });\n    },\n  ],\n  title: \"core-parameters\",\n};\nexport default _meta;\nexport const Inheritance = {\n  parameters: { storyParameter: \"storyParameter\", storyObject: { a: \"story\" } },\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    const canvas = within(canvasElement);\n    await expect(JSON.parse(canvas.getByTestId(\"pre\").innerText)).toEqual({\n      projectParameter: \"projectParameter\",\n      componentParameter: \"componentParameter\",\n      storyParameter: \"storyParameter\",\n      storyObject: { a: \"story\", b: \"component\", c: \"project\" },\n    });\n  },\n};\nconst _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(\n  globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath,\n);\nif (_isRunningFromThisFile) {\n  _test(\n    \"Inheritance\",\n    _testStory({\n      exportName: \"Inheritance\",\n      story: Inheritance,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-parameters--inheritance\",\n    }),\n  );\n}\n"
+  },
+  "core-tags-add.stories.ts": {
+    "enriched": "import type {\n  PartialStoryFn,\n  PlayFunctionContext,\n  StoryContext,\n} from \"storybook/internal/types\";\nimport { global as globalThis } from \"@storybook/global\";\nimport { expect, within } from \"storybook/test\";\nexport default {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,\n  tags: [\"!dev\", \"!autodocs\", \"!test\"],\n  decorators: [\n    (storyFn: PartialStoryFn, context: StoryContext) => {\n      return storyFn({ args: { object: { tags: context.tags } } });\n    },\n  ],\n  parameters: { chromatic: { disableSnapshot: true } },\n};\nexport const Inheritance = {\n  tags: [\"story-one\", \"!vitest\"],\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    const canvas = within(canvasElement);\n    await expect(JSON.parse(canvas.getByTestId(\"pre\").innerText)).toEqual({\n      tags: [\"story-one\"],\n    });\n  },\n  parameters: { chromatic: { disableSnapshot: false } },\n};\nexport const Dev = { tags: [\"dev\"] };\nexport const Autodocs = { tags: [\"autodocs\"] };\nexport const Test = { tags: [\"test\"] };\nInheritance.parameters = {\n  ...Inheritance.parameters,\n  docs: {\n    ...Inheritance.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  tags: ['story-one', '!vitest'],\\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\\n    const canvas = within(canvasElement);\\n    await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({\\n      tags: ['story-one'],\\n    });\\n  },\\n  parameters: { chromatic: { disableSnapshot: false } },\\n}\",\n      ...Inheritance.parameters?.docs?.source,\n    },\n  },\n};\nDev.parameters = {\n  ...Dev.parameters,\n  docs: {\n    ...Dev.parameters?.docs,\n    source: {\n      originalSource: \"{\\n  tags: ['dev'],\\n}\",\n      ...Dev.parameters?.docs?.source,\n    },\n  },\n};\nAutodocs.parameters = {\n  ...Autodocs.parameters,\n  docs: {\n    ...Autodocs.parameters?.docs,\n    source: {\n      originalSource: \"{\\n  tags: ['autodocs'],\\n}\",\n      ...Autodocs.parameters?.docs?.source,\n    },\n  },\n};\nTest.parameters = {\n  ...Test.parameters,\n  docs: {\n    ...Test.parameters?.docs,\n    source: {\n      originalSource: \"{\\n  tags: ['test'],\\n}\",\n      ...Test.parameters?.docs?.source,\n    },\n  },\n};\n",
+    "originalSources": {
+      "Inheritance": "{\n  tags: ['story-one', '!vitest'],\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    const canvas = within(canvasElement);\n    await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({\n      tags: ['story-one'],\n    });\n  },\n  parameters: { chromatic: { disableSnapshot: false } },\n}",
+      "Dev": "{\n  tags: ['dev'],\n}",
+      "Autodocs": "{\n  tags: ['autodocs'],\n}",
+      "Test": "{\n  tags: ['test'],\n}"
+    },
+    "vitest": "import { test as _test, expect as _expect } from \"vitest\";\nimport {\n  testStory as _testStory,\n  convertToFilePath,\n} from \"@storybook/addon-vitest/internal/test-utils\";\nimport type {\n  PartialStoryFn,\n  PlayFunctionContext,\n  StoryContext,\n} from \"storybook/internal/types\";\nimport { global as globalThis } from \"@storybook/global\";\nimport { expect, within } from \"storybook/test\";\nconst _meta = {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,\n  tags: [\"!dev\", \"!autodocs\", \"!test\"],\n  decorators: [\n    (storyFn: PartialStoryFn, context: StoryContext) => {\n      return storyFn({ args: { object: { tags: context.tags } } });\n    },\n  ],\n  parameters: { chromatic: { disableSnapshot: true } },\n  title: \"core-tags-add\",\n};\nexport default _meta;\nexport const Inheritance = {\n  tags: [\"story-one\", \"!vitest\"],\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    const canvas = within(canvasElement);\n    await expect(JSON.parse(canvas.getByTestId(\"pre\").innerText)).toEqual({\n      tags: [\"story-one\"],\n    });\n  },\n  parameters: { chromatic: { disableSnapshot: false } },\n};\nexport const Dev = { tags: [\"dev\"] };\nexport const Autodocs = { tags: [\"autodocs\"] };\nexport const Test = { tags: [\"test\"] };\nconst _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(\n  globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath,\n);\nif (_isRunningFromThisFile) {\n  _test(\n    \"Test\",\n    _testStory({\n      exportName: \"Test\",\n      story: Test,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-tags-add--test\",\n    }),\n  );\n}\n"
+  },
+  "core-tags-config.stories.ts": {
+    "enriched": "import type {\n  PartialStoryFn,\n  PlayFunctionContext,\n  StoryContext,\n} from \"storybook/internal/types\";\nimport { global as globalThis } from \"@storybook/global\";\nimport { expect, within } from \"storybook/test\";\nexport default {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,\n  tags: [\"component-one\", \"component-two\", \"autodocs\"],\n  decorators: [\n    (storyFn: PartialStoryFn, context: StoryContext) => {\n      return storyFn({ args: { object: { tags: context.tags } } });\n    },\n  ],\n  parameters: { chromatic: { disableSnapshot: true } },\n};\nexport const Inheritance = {\n  tags: [\"story-one\", \"!vitest\"],\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    const canvas = within(canvasElement);\n    await expect(JSON.parse(canvas.getByTestId(\"pre\").innerText)).toEqual({\n      tags: [\n        \"dev\",\n        \"test\",\n        \"component-one\",\n        \"component-two\",\n        \"autodocs\",\n        \"story-one\",\n      ],\n    });\n  },\n  parameters: { chromatic: { disableSnapshot: false } },\n};\nexport const DocsOnly = { tags: [\"docs-only\"] };\nexport const TestOnly = { tags: [\"test-only\"] };\nexport const DevOnly = { tags: [\"dev-only\"] };\nexport const TagRemoval = { tags: [\"!component-two\"] };\nInheritance.parameters = {\n  ...Inheritance.parameters,\n  docs: {\n    ...Inheritance.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  tags: ['story-one', '!vitest'],\\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\\n    const canvas = within(canvasElement);\\n    await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({\\n      tags: ['dev', 'test', 'component-one', 'component-two', 'autodocs', 'story-one'],\\n    });\\n  },\\n  parameters: { chromatic: { disableSnapshot: false } },\\n}\",\n      ...Inheritance.parameters?.docs?.source,\n    },\n  },\n};\nDocsOnly.parameters = {\n  ...DocsOnly.parameters,\n  docs: {\n    ...DocsOnly.parameters?.docs,\n    source: {\n      originalSource: \"{\\n  tags: ['docs-only'],\\n}\",\n      ...DocsOnly.parameters?.docs?.source,\n    },\n  },\n};\nTestOnly.parameters = {\n  ...TestOnly.parameters,\n  docs: {\n    ...TestOnly.parameters?.docs,\n    source: {\n      originalSource: \"{\\n  tags: ['test-only'],\\n}\",\n      ...TestOnly.parameters?.docs?.source,\n    },\n  },\n};\nDevOnly.parameters = {\n  ...DevOnly.parameters,\n  docs: {\n    ...DevOnly.parameters?.docs,\n    source: {\n      originalSource: \"{\\n  tags: ['dev-only'],\\n}\",\n      ...DevOnly.parameters?.docs?.source,\n    },\n  },\n};\nTagRemoval.parameters = {\n  ...TagRemoval.parameters,\n  docs: {\n    ...TagRemoval.parameters?.docs,\n    source: {\n      originalSource: \"{\\n  tags: ['!component-two'],\\n}\",\n      ...TagRemoval.parameters?.docs?.source,\n    },\n  },\n};\n",
+    "originalSources": {
+      "Inheritance": "{\n  tags: ['story-one', '!vitest'],\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    const canvas = within(canvasElement);\n    await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({\n      tags: ['dev', 'test', 'component-one', 'component-two', 'autodocs', 'story-one'],\n    });\n  },\n  parameters: { chromatic: { disableSnapshot: false } },\n}",
+      "DocsOnly": "{\n  tags: ['docs-only'],\n}",
+      "TestOnly": "{\n  tags: ['test-only'],\n}",
+      "DevOnly": "{\n  tags: ['dev-only'],\n}",
+      "TagRemoval": "{\n  tags: ['!component-two'],\n}"
+    },
+    "vitest": "import { test as _test, expect as _expect } from \"vitest\";\nimport {\n  testStory as _testStory,\n  convertToFilePath,\n} from \"@storybook/addon-vitest/internal/test-utils\";\nimport type {\n  PartialStoryFn,\n  PlayFunctionContext,\n  StoryContext,\n} from \"storybook/internal/types\";\nimport { global as globalThis } from \"@storybook/global\";\nimport { expect, within } from \"storybook/test\";\nconst _meta = {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,\n  tags: [\"component-one\", \"component-two\", \"autodocs\"],\n  decorators: [\n    (storyFn: PartialStoryFn, context: StoryContext) => {\n      return storyFn({ args: { object: { tags: context.tags } } });\n    },\n  ],\n  parameters: { chromatic: { disableSnapshot: true } },\n  title: \"core-tags-config\",\n};\nexport default _meta;\nexport const Inheritance = {\n  tags: [\"story-one\", \"!vitest\"],\n  play: async ({ canvasElement }: PlayFunctionContext<any>) => {\n    const canvas = within(canvasElement);\n    await expect(JSON.parse(canvas.getByTestId(\"pre\").innerText)).toEqual({\n      tags: [\n        \"dev\",\n        \"test\",\n        \"component-one\",\n        \"component-two\",\n        \"autodocs\",\n        \"story-one\",\n      ],\n    });\n  },\n  parameters: { chromatic: { disableSnapshot: false } },\n};\nexport const DocsOnly = { tags: [\"docs-only\"] };\nexport const TestOnly = { tags: [\"test-only\"] };\nexport const DevOnly = { tags: [\"dev-only\"] };\nexport const TagRemoval = { tags: [\"!component-two\"] };\nconst _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(\n  globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath,\n);\nif (_isRunningFromThisFile) {\n  _test(\n    \"Inheritance\",\n    _testStory({\n      exportName: \"Inheritance\",\n      story: Inheritance,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-tags-config--inheritance\",\n    }),\n  );\n  _test(\n    \"Docs Only\",\n    _testStory({\n      exportName: \"DocsOnly\",\n      story: DocsOnly,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-tags-config--docs-only\",\n    }),\n  );\n  _test(\n    \"Test Only\",\n    _testStory({\n      exportName: \"TestOnly\",\n      story: TestOnly,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-tags-config--test-only\",\n    }),\n  );\n  _test(\n    \"Dev Only\",\n    _testStory({\n      exportName: \"DevOnly\",\n      story: DevOnly,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-tags-config--dev-only\",\n    }),\n  );\n  _test(\n    \"Tag Removal\",\n    _testStory({\n      exportName: \"TagRemoval\",\n      story: TagRemoval,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"core-tags-config--tag-removal\",\n    }),\n  );\n}\n"
+  },
+  "edge-legacy.stories.tsx": {
+    "enriched": "import type { Meta, StoryFn, StoryObj } from \"@storybook/react\";\nimport { Button } from \"./Button\";\nconst meta = {\n  title: \"Edge/Legacy\",\n  component: Button,\n  includeStories: /^[A-Z]/,\n  excludeStories: [\"Helper\"],\n  tags: [\"autodocs\"],\n} satisfies Meta<typeof Button>;\nexport default meta;\nexport const Helper = () => null;\nconst Template: StoryFn<typeof Button> = (args) => <Button {...args} />;\nexport const Bound = Template.bind({});\nBound.args = { label: \"Bound\" };\nBound.storyName = \"Bound story\";\nBound.parameters = { __id: \"edge-legacy--custom-id\" };\nexport const Cast = Template.bind({}) as typeof Template & StoryObj;\nCast.args = { label: \"Cast\" };\nexport const WithPlay: StoryObj<typeof meta> = {\n  args: { label: \"Play\" },\n  play: async ({ canvasElement, mount }) => {\n    await mount();\n  },\n};\nexport function Declared() {\n  return <Button label=\"Declared\" />;\n}\nconst Local: StoryObj<typeof meta> = { args: { label: \"Alias\" } };\nexport { Local as Alias };\nBound.parameters = {\n  ...Bound.parameters,\n  docs: {\n    ...Bound.parameters?.docs,\n    source: {\n      originalSource: \"(args) => <Button {...args} />\",\n      ...Bound.parameters?.docs?.source,\n    },\n  },\n};\nCast.parameters = {\n  ...Cast.parameters,\n  docs: {\n    ...Cast.parameters?.docs,\n    source: {\n      originalSource: \"Template.bind({}) as typeof Template & StoryObj\",\n      ...Cast.parameters?.docs?.source,\n    },\n  },\n};\nWithPlay.parameters = {\n  ...WithPlay.parameters,\n  docs: {\n    ...WithPlay.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: { label: 'Play' },\\n  play: async ({ canvasElement, mount }) => {\\n    await mount();\\n  },\\n}\",\n      ...WithPlay.parameters?.docs?.source,\n    },\n  },\n};\nDeclared.parameters = {\n  ...Declared.parameters,\n  docs: {\n    ...Declared.parameters?.docs,\n    source: {\n      originalSource:\n        'function Declared() {\\n  return <Button label=\"Declared\" />;\\n}',\n      ...Declared.parameters?.docs?.source,\n    },\n  },\n};\n",
+    "originalSources": {
+      "Bound": "(args) => <Button {...args} />",
+      "Cast": "Template.bind({}) as typeof Template & StoryObj",
+      "WithPlay": "{\n  args: { label: 'Play' },\n  play: async ({ canvasElement, mount }) => {\n    await mount();\n  },\n}",
+      "Declared": "function Declared() {\n  return <Button label=\"Declared\" />;\n}"
+    },
+    "vitest": "import { test as _test, expect as _expect } from \"vitest\";\nimport {\n  testStory as _testStory,\n  convertToFilePath,\n} from \"@storybook/addon-vitest/internal/test-utils\";\nimport type { Meta, StoryFn, StoryObj } from \"@storybook/react\";\nimport { Button } from \"./Button\";\nconst meta = {\n  title: \"Edge/Legacy\",\n  component: Button,\n  includeStories: /^[A-Z]/,\n  excludeStories: [\"Helper\"],\n  tags: [\"autodocs\"],\n} satisfies Meta<typeof Button>;\nexport default meta;\nexport const Helper = () => null;\nconst Template: StoryFn<typeof Button> = (args) => <Button {...args} />;\nexport const Bound = Template.bind({});\nBound.args = { label: \"Bound\" };\nBound.storyName = \"Bound story\";\nBound.parameters = { __id: \"edge-legacy--custom-id\" };\nexport const Cast = Template.bind({}) as typeof Template & StoryObj;\nCast.args = { label: \"Cast\" };\nexport const WithPlay: StoryObj<typeof meta> = {\n  args: { label: \"Play\" },\n  play: async ({ canvasElement, mount }) => {\n    await mount();\n  },\n};\nexport function Declared() {\n  return <Button label=\"Declared\" />;\n}\nconst Local: StoryObj<typeof meta> = { args: { label: \"Alias\" } };\nexport { Local as Alias };\nconst _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(\n  globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath,\n);\nif (_isRunningFromThisFile) {\n  _test(\n    \"Bound story\",\n    _testStory({\n      exportName: \"Bound\",\n      story: Bound,\n      meta: meta,\n      skipTags: [],\n      storyId: \"edge-legacy--bound\",\n      componentPath: \"./Button\",\n      componentName: \"Button\",\n    }),\n  );\n  _test(\n    \"Cast\",\n    _testStory({\n      exportName: \"Cast\",\n      story: Cast,\n      meta: meta,\n      skipTags: [],\n      storyId: \"edge-legacy--cast\",\n      componentPath: \"./Button\",\n      componentName: \"Button\",\n    }),\n  );\n  _test(\n    \"With Play\",\n    _testStory({\n      exportName: \"WithPlay\",\n      story: WithPlay,\n      meta: meta,\n      skipTags: [],\n      storyId: \"edge-legacy--with-play\",\n      componentPath: \"./Button\",\n      componentName: \"Button\",\n    }),\n  );\n  _test(\n    \"Declared\",\n    _testStory({\n      exportName: \"Declared\",\n      story: Declared,\n      meta: meta,\n      skipTags: [],\n      storyId: \"edge-legacy--declared\",\n      componentPath: \"./Button\",\n      componentName: \"Button\",\n    }),\n  );\n  _test(\n    \"Alias\",\n    _testStory({\n      exportName: \"Alias\",\n      story: Local,\n      meta: meta,\n      skipTags: [],\n      storyId: \"edge-legacy--alias\",\n      componentPath: \"./Button\",\n      componentName: \"Button\",\n    }),\n  );\n}\n"
+  },
+  "edge-typescript.stories.ts": {
+    "enriched": "import type { Meta, StoryObj } from \"@storybook/html\";\ntype Args = { label: string };\nconst identity = <T>(value: T) => value;\nconst size = <number>12;\nexport default {\n  title: \"Edge/TypeScript\",\n  render: (args: Args) => identity(`<button>${args.label}</button>`),\n  args: { label: identity(\"Hi\") },\n  parameters: {\n    layout: \"centered\",\n    docs: {\n      source: {\n        code: `line1\nline2`,\n      },\n    },\n  },\n} satisfies Meta<Args> as Meta<Args>;\nexport const Primary: StoryObj<Args> = { args: { label: \"Primary\" } };\nexport const Sized = {\n  args: { label: `size ${size}` },\n  tags: [\"!dev\"],\n} satisfies StoryObj<Args>;\nexport const Composed: StoryObj<Args> = { ...Primary, name: \"Composed name\" };\nPrimary.parameters = {\n  ...Primary.parameters,\n  docs: {\n    ...Primary.parameters?.docs,\n    source: {\n      originalSource: \"{ args: { label: 'Primary' } }\",\n      ...Primary.parameters?.docs?.source,\n    },\n  },\n};\nSized.parameters = {\n  ...Sized.parameters,\n  docs: {\n    ...Sized.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: { label: `size ${size}` },\\n  tags: ['!dev'],\\n} satisfies StoryObj<Args>\",\n      ...Sized.parameters?.docs?.source,\n    },\n  },\n};\nComposed.parameters = {\n  ...Composed.parameters,\n  docs: {\n    ...Composed.parameters?.docs,\n    source: {\n      originalSource: \"{ ...Primary, name: 'Composed name' }\",\n      ...Composed.parameters?.docs?.source,\n    },\n  },\n};\n",
+    "originalSources": {
+      "Primary": "{ args: { label: 'Primary' } }",
+      "Sized": "{\n  args: { label: `size ${size}` },\n  tags: ['!dev'],\n} satisfies StoryObj<Args>",
+      "Composed": "{ ...Primary, name: 'Composed name' }"
+    },
+    "vitest": "import { test as _test, expect as _expect } from \"vitest\";\nimport {\n  testStory as _testStory,\n  convertToFilePath,\n} from \"@storybook/addon-vitest/internal/test-utils\";\nimport type { Meta, StoryObj } from \"@storybook/html\";\ntype Args = { label: string };\nconst identity = <T>(value: T) => value;\nconst size = <number>12;\nconst _meta = {\n  title: \"Edge/TypeScript\",\n  render: (args: Args) => identity(`<button>${args.label}</button>`),\n  args: { label: identity(\"Hi\") },\n  parameters: {\n    layout: \"centered\",\n    docs: {\n      source: {\n        code: `line1\nline2`,\n      },\n    },\n  },\n} satisfies Meta<Args> as Meta<Args>;\nexport default _meta;\nexport const Primary: StoryObj<Args> = { args: { label: \"Primary\" } };\nexport const Sized = {\n  args: { label: `size ${size}` },\n  tags: [\"!dev\"],\n} satisfies StoryObj<Args>;\nexport const Composed: StoryObj<Args> = { ...Primary, name: \"Composed name\" };\nconst _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(\n  globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath,\n);\nif (_isRunningFromThisFile) {\n  _test(\n    \"Primary\",\n    _testStory({\n      exportName: \"Primary\",\n      story: Primary,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"edge-typescript--primary\",\n    }),\n  );\n  _test(\n    \"Sized\",\n    _testStory({\n      exportName: \"Sized\",\n      story: Sized,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"edge-typescript--sized\",\n    }),\n  );\n  _test(\n    \"Composed name\",\n    _testStory({\n      exportName: \"Composed\",\n      story: Composed,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"edge-typescript--composed\",\n    }),\n  );\n}\n"
+  },
+  "errors-NoStories.stories.ts": {
+    "enriched": "/* eslint-disable storybook/story-exports */\nconst component = {};\nexport default { component };\n",
+    "originalSources": {},
+    "vitest": "/* eslint-disable storybook/story-exports */\nimport { test as _test, describe as _describe } from \"vitest\";\nconst component = {};\nconst _meta = { component, title: \"errors-NoStories\" };\nexport default _meta;\n_describe.skip(\"No valid tests found\");\n"
+  },
+  "react-csf1.stories.tsx": {
+    "enriched": "import React from \"react\";\nexport default {\n  component: {},\n  parameters: { chromatic: { disableSnapshot: true } },\n};\nexport const Hello1 = () => <div>Hello1</div>;\nexport const Hello2 = () => <div>Hello2</div>;\nHello1.parameters = {\n  ...Hello1.parameters,\n  docs: {\n    ...Hello1.parameters?.docs,\n    source: {\n      originalSource: \"() => <div>Hello1</div>\",\n      ...Hello1.parameters?.docs?.source,\n    },\n  },\n};\nHello2.parameters = {\n  ...Hello2.parameters,\n  docs: {\n    ...Hello2.parameters?.docs,\n    source: {\n      originalSource: \"() => <div>Hello2</div>\",\n      ...Hello2.parameters?.docs?.source,\n    },\n  },\n};\n",
+    "originalSources": {
+      "Hello1": "() => <div>Hello1</div>",
+      "Hello2": "() => <div>Hello2</div>"
+    },
+    "vitest": "import { test as _test, expect as _expect } from \"vitest\";\nimport {\n  testStory as _testStory,\n  convertToFilePath,\n} from \"@storybook/addon-vitest/internal/test-utils\";\nimport React from \"react\";\nconst _meta = {\n  component: {},\n  parameters: { chromatic: { disableSnapshot: true } },\n  title: \"react-csf1\",\n};\nexport default _meta;\nexport const Hello1 = () => <div>Hello1</div>;\nexport const Hello2 = () => <div>Hello2</div>;\nconst _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(\n  globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath,\n);\nif (_isRunningFromThisFile) {\n  _test(\n    \"Hello 1\",\n    _testStory({\n      exportName: \"Hello1\",\n      story: Hello1,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"react-csf1--hello-1\",\n    }),\n  );\n  _test(\n    \"Hello 2\",\n    _testStory({\n      exportName: \"Hello2\",\n      story: Hello2,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"react-csf1--hello-2\",\n    }),\n  );\n}\n"
+  },
+  "react-csf2.stories.tsx": {
+    "enriched": "import React from \"react\";\nexport default {\n  component: {},\n  parameters: { chromatic: { disableSnapshot: true } },\n};\nconst Template = ({ label }: { label: string }) => <div>{label}</div>;\nTemplate.args = { label: \"Hello\" };\nexport const Hello1 = Template.bind({});\nexport const Hello2 = Template.bind({});\nexport const Hello3 = Template.bind({});\nHello1.parameters = {\n  ...Hello1.parameters,\n  docs: {\n    ...Hello1.parameters?.docs,\n    source: {\n      originalSource: \"({ label }: { label: string }) => <div>{label}</div>\",\n      ...Hello1.parameters?.docs?.source,\n    },\n  },\n};\nHello2.parameters = {\n  ...Hello2.parameters,\n  docs: {\n    ...Hello2.parameters?.docs,\n    source: {\n      originalSource: \"({ label }: { label: string }) => <div>{label}</div>\",\n      ...Hello2.parameters?.docs?.source,\n    },\n  },\n};\nHello3.parameters = {\n  ...Hello3.parameters,\n  docs: {\n    ...Hello3.parameters?.docs,\n    source: {\n      originalSource: \"({ label }: { label: string }) => <div>{label}</div>\",\n      ...Hello3.parameters?.docs?.source,\n    },\n  },\n};\n",
+    "originalSources": {
+      "Hello1": "({ label }: { label: string }) => <div>{label}</div>",
+      "Hello2": "({ label }: { label: string }) => <div>{label}</div>",
+      "Hello3": "({ label }: { label: string }) => <div>{label}</div>"
+    },
+    "vitest": "import { test as _test, expect as _expect } from \"vitest\";\nimport {\n  testStory as _testStory,\n  convertToFilePath,\n} from \"@storybook/addon-vitest/internal/test-utils\";\nimport React from \"react\";\nconst _meta = {\n  component: {},\n  parameters: { chromatic: { disableSnapshot: true } },\n  title: \"react-csf2\",\n};\nexport default _meta;\nconst Template = ({ label }: { label: string }) => <div>{label}</div>;\nTemplate.args = { label: \"Hello\" };\nexport const Hello1 = Template.bind({});\nexport const Hello2 = Template.bind({});\nexport const Hello3 = Template.bind({});\nconst _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(\n  globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath,\n);\nif (_isRunningFromThisFile) {\n  _test(\n    \"Hello 1\",\n    _testStory({\n      exportName: \"Hello1\",\n      story: Hello1,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"react-csf2--hello-1\",\n    }),\n  );\n  _test(\n    \"Hello 2\",\n    _testStory({\n      exportName: \"Hello2\",\n      story: Hello2,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"react-csf2--hello-2\",\n    }),\n  );\n  _test(\n    \"Hello 3\",\n    _testStory({\n      exportName: \"Hello3\",\n      story: Hello3,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"react-csf2--hello-3\",\n    }),\n  );\n}\n"
+  },
+  "react-csf4.stories.tsx": {
+    "enriched": "// eslint-disable-next-line @typescript-eslint/ban-ts-comment -- we can't expect error as it is an error in development but it isn't sandbox\n// @ts-ignore only present in sandbox\nimport preview from \"#.storybook/preview\";\nconst meta = preview.meta({\n  // @ts-expect-error fix globalThis.__TEMPLATE_COMPONENTS__ type not existing later\n  component: globalThis.__TEMPLATE_COMPONENTS__.Button,\n  args: { label: \"Hello world!\" },\n});\nexport const Story = meta.story({});\nStory.input.parameters = {\n  ...Story.input.parameters,\n  docs: {\n    ...Story.input.parameters?.docs,\n    source: {\n      originalSource: \"meta.story({})\",\n      ...Story.input.parameters?.docs?.source,\n    },\n  },\n};\n",
+    "originalSources": {
+      "Story": "meta.story({})"
+    },
+    "vitest": "import { test as _test, expect as _expect } from \"vitest\";\nimport {\n  testStory as _testStory,\n  convertToFilePath,\n} from \"@storybook/addon-vitest/internal/test-utils\";\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment -- we can't expect error as it is an error in development but it isn't sandbox\n// @ts-ignore only present in sandbox\nimport preview from \"#.storybook/preview\";\nconst meta = preview.meta({\n  // @ts-expect-error fix globalThis.__TEMPLATE_COMPONENTS__ type not existing later\n  component: globalThis.__TEMPLATE_COMPONENTS__.Button,\n  args: { label: \"Hello world!\" },\n  title: \"react-csf4\",\n});\nexport const Story = meta.story({});\nconst _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(\n  globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath,\n);\nif (_isRunningFromThisFile) {\n  _test(\n    \"Story\",\n    _testStory({\n      exportName: \"Story\",\n      story: Story,\n      meta: meta,\n      skipTags: [],\n      storyId: \"react-csf4--story\",\n    }),\n  );\n}\n"
+  },
+  "react-decorators.stories.tsx": {
+    "enriched": "import type { FC } from \"react\";\nimport React, { createContext, useContext, useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { useParameter } from \"storybook/preview-api\";\nconst Component: FC = () => <p>Story</p>;\nexport default {\n  component: Component,\n  tags: [\"autodocs\"],\n  decorators: [\n    (Story) => (\n      <>\n        <p>Component Decorator</p>\n        <Story />\n      </>\n    ),\n  ],\n} as Meta<typeof Component>;\nexport const All: StoryObj<typeof Component> = {\n  decorators: [\n    (Story) => (\n      <>\n        <p>Local Decorator</p>\n        <Story />\n      </>\n    ),\n  ],\n};\n// This story should not error\n// See https://github.com/storybookjs/storybook/issues/21900\nconst TestContext = createContext<boolean>(false);\nexport const Context: StoryObj<typeof Component> = {\n  parameters: { docs: { source: { excludeDecorators: true } } },\n  decorators: [\n    (Story) => (\n      <TestContext.Provider value>\n        <Story />\n      </TestContext.Provider>\n    ),\n  ],\n  render: function Render() {\n    const value = useContext(TestContext);\n    if (!value) {\n      throw new Error(\"TestContext not set, decorator did not run!\");\n    }\n    return <p>Story</p>;\n  },\n};\n/**\n * This story demonstrates is a regression test for this issue with React hooks in Storybook\n * (https://github.com/storybookjs/storybook/issues/29189)\n *\n * Which happened when a decorator was using storybook hooks, and the render react hooks.\n */\nexport const AllowUseStateInRender: StoryObj = {\n  render: () => {\n    const [count, setCount] = useState(0);\n    const Button = (globalThis as any).__TEMPLATE_COMPONENTS__.Button;\n    return (\n      <Button\n        onClick={() => setCount(count + 1)}\n        label={`Clicked ${count} times`}\n      />\n    );\n  },\n  decorators: [\n    (storyFn) => {\n      useParameter(\"docs\", {});\n      return storyFn();\n    },\n  ],\n  play: async ({ canvas, userEvent }) => {\n    const button = await canvas.findByText(\"Clicked 0 times\");\n    await userEvent.click(button);\n    await canvas.findByText(\"Clicked 1 times\");\n  },\n  tags: [\"!vitest\"],\n};\nAll.parameters = {\n  ...All.parameters,\n  docs: {\n    ...All.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  decorators: [\\n    (Story) => (\\n      <>\\n        <p>Local Decorator</p>\\n        <Story />\\n      </>\\n    ),\\n  ],\\n}\",\n      ...All.parameters?.docs?.source,\n    },\n  },\n};\nContext.parameters = {\n  ...Context.parameters,\n  docs: {\n    ...Context.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  parameters: { docs: { source: { excludeDecorators: true } } },\\n  decorators: [\\n    (Story) => (\\n      <TestContext.Provider value>\\n        <Story />\\n      </TestContext.Provider>\\n    ),\\n  ],\\n  render: function Render() {\\n    const value = useContext(TestContext);\\n\\n    if (!value) {\\n      throw new Error('TestContext not set, decorator did not run!');\\n    }\\n    return <p>Story</p>;\\n  },\\n}\",\n      ...Context.parameters?.docs?.source,\n    },\n  },\n};\nAllowUseStateInRender.parameters = {\n  ...AllowUseStateInRender.parameters,\n  docs: {\n    ...AllowUseStateInRender.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  render: () => {\\n    const [count, setCount] = useState(0);\\n    const Button = (globalThis as any).__TEMPLATE_COMPONENTS__.Button;\\n    return <Button onClick={() => setCount(count + 1)} label={`Clicked ${count} times`} />;\\n  },\\n  decorators: [\\n    (storyFn) => {\\n      useParameter('docs', {});\\n      return storyFn();\\n    },\\n  ],\\n  play: async ({ canvas, userEvent }) => {\\n    const button = await canvas.findByText('Clicked 0 times');\\n    await userEvent.click(button);\\n    await canvas.findByText('Clicked 1 times');\\n  },\\n  tags: ['!vitest'],\\n}\",\n      ...AllowUseStateInRender.parameters?.docs?.source,\n    },\n    description: {\n      story:\n        \"This story demonstrates is a regression test for this issue with React hooks in Storybook\\n(https://github.com/storybookjs/storybook/issues/29189)\\n\\nWhich happened when a decorator was using storybook hooks, and the render react hooks.\",\n      ...AllowUseStateInRender.parameters?.docs?.description,\n    },\n  },\n};\n",
+    "originalSources": {
+      "All": "{\n  decorators: [\n    (Story) => (\n      <>\n        <p>Local Decorator</p>\n        <Story />\n      </>\n    ),\n  ],\n}",
+      "Context": "{\n  parameters: { docs: { source: { excludeDecorators: true } } },\n  decorators: [\n    (Story) => (\n      <TestContext.Provider value>\n        <Story />\n      </TestContext.Provider>\n    ),\n  ],\n  render: function Render() {\n    const value = useContext(TestContext);\n\n    if (!value) {\n      throw new Error('TestContext not set, decorator did not run!');\n    }\n    return <p>Story</p>;\n  },\n}",
+      "AllowUseStateInRender": "{\n  render: () => {\n    const [count, setCount] = useState(0);\n    const Button = (globalThis as any).__TEMPLATE_COMPONENTS__.Button;\n    return <Button onClick={() => setCount(count + 1)} label={`Clicked ${count} times`} />;\n  },\n  decorators: [\n    (storyFn) => {\n      useParameter('docs', {});\n      return storyFn();\n    },\n  ],\n  play: async ({ canvas, userEvent }) => {\n    const button = await canvas.findByText('Clicked 0 times');\n    await userEvent.click(button);\n    await canvas.findByText('Clicked 1 times');\n  },\n  tags: ['!vitest'],\n}"
+    },
+    "vitest": "import { test as _test, expect as _expect } from \"vitest\";\nimport {\n  testStory as _testStory,\n  convertToFilePath,\n} from \"@storybook/addon-vitest/internal/test-utils\";\nimport type { FC } from \"react\";\nimport React, { createContext, useContext, useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { useParameter } from \"storybook/preview-api\";\nconst Component: FC = () => <p>Story</p>;\nconst _meta = {\n  component: Component,\n  tags: [\"autodocs\"],\n  decorators: [\n    (Story) => (\n      <>\n        <p>Component Decorator</p>\n        <Story />\n      </>\n    ),\n  ],\n  title: \"react-decorators\",\n} as Meta<typeof Component>;\nexport default _meta;\nexport const All: StoryObj<typeof Component> = {\n  decorators: [\n    (Story) => (\n      <>\n        <p>Local Decorator</p>\n        <Story />\n      </>\n    ),\n  ],\n};\n// This story should not error\n// See https://github.com/storybookjs/storybook/issues/21900\nconst TestContext = createContext<boolean>(false);\nexport const Context: StoryObj<typeof Component> = {\n  parameters: { docs: { source: { excludeDecorators: true } } },\n  decorators: [\n    (Story) => (\n      <TestContext.Provider value>\n        <Story />\n      </TestContext.Provider>\n    ),\n  ],\n  render: function Render() {\n    const value = useContext(TestContext);\n    if (!value) {\n      throw new Error(\"TestContext not set, decorator did not run!\");\n    }\n    return <p>Story</p>;\n  },\n};\n/**\n * This story demonstrates is a regression test for this issue with React hooks in Storybook\n * (https://github.com/storybookjs/storybook/issues/29189)\n *\n * Which happened when a decorator was using storybook hooks, and the render react hooks.\n */\nexport const AllowUseStateInRender: StoryObj = {\n  render: () => {\n    const [count, setCount] = useState(0);\n    const Button = (globalThis as any).__TEMPLATE_COMPONENTS__.Button;\n    return (\n      <Button\n        onClick={() => setCount(count + 1)}\n        label={`Clicked ${count} times`}\n      />\n    );\n  },\n  decorators: [\n    (storyFn) => {\n      useParameter(\"docs\", {});\n      return storyFn();\n    },\n  ],\n  play: async ({ canvas, userEvent }) => {\n    const button = await canvas.findByText(\"Clicked 0 times\");\n    await userEvent.click(button);\n    await canvas.findByText(\"Clicked 1 times\");\n  },\n  tags: [\"!vitest\"],\n};\nconst _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(\n  globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath,\n);\nif (_isRunningFromThisFile) {\n  _test(\n    \"All\",\n    _testStory({\n      exportName: \"All\",\n      story: All,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"react-decorators--all\",\n    }),\n  );\n  _test(\n    \"Context\",\n    _testStory({\n      exportName: \"Context\",\n      story: Context,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"react-decorators--context\",\n    }),\n  );\n  _test(\n    \"Allow Use State In Render\",\n    _testStory({\n      exportName: \"AllowUseStateInRender\",\n      story: AllowUseStateInRender,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"react-decorators--allow-use-state-in-render\",\n    }),\n  );\n}\n"
+  },
+  "react-js-argtypes.stories.jsx": {
+    "enriched": "import React, { useState } from \"react\";\nimport { PureArgsTable as ArgsTable } from \"@storybook/addon-docs/blocks\";\nimport PropTypes from \"prop-types\";\nimport { storyNameFromExport } from \"storybook/internal/csf\";\nimport { getService, inferControls } from \"storybook/preview-api\";\nimport { ThemeProvider, convert, themes } from \"storybook/theming\";\nimport { component as JsReactMemoComponent } from \"./docgen-components/9586-js-react-memo/input.jsx\";\nimport { component as JsDefaultValuesComponent } from \"./docgen-components/9626-js-default-values/input.jsx\";\nimport { component as JsFunctionComponentInlineDefaultsNoPropTypesComponent } from \"./docgen-components/js-function-component-inline-defaults-no-propTypes/input.jsx\";\nimport { component as JsFunctionComponentInlineDefaultsComponent } from \"./docgen-components/js-function-component-inline-defaults/input.jsx\";\n// Detect if we are running in vite in a hacky way for now\nconst isVite = typeof require === \"undefined\";\nexport default {\n  // Portable stories in Vitest have no docgen server to load argTypes from.\n  tags: [\"!vitest\"],\n  // The docgen server only extracts subcomponents once `component` resolves to a real component.\n  component: JsFunctionComponentInlineDefaultsComponent,\n  // Listed so the docgen server extracts every component; each story shows its own entry.\n  subcomponents: {\n    JsFunctionComponentInlineDefaults:\n      JsFunctionComponentInlineDefaultsComponent,\n    JsFunctionComponentInlineDefaultsNoPropTypes:\n      JsFunctionComponentInlineDefaultsNoPropTypesComponent,\n    JsDefaultValues: JsDefaultValuesComponent,\n    JsReactMemo: JsReactMemoComponent,\n  },\n  loaders: [\n    async ({ componentId, name }) => {\n      if (!globalThis.FEATURES?.docgenServer) {\n        return {};\n      }\n      const docgen = await getService(\"core/docgen\", {\n        internal: true,\n      }).queries.docgen.loaded({ id: componentId });\n      const [, subcomponent] =\n        Object.entries(docgen?.subcomponents ?? {}).find(\n          ([exportName]) => storyNameFromExport(exportName) === name,\n        ) ?? [];\n      return { argTypes: subcomponent?.argTypes ?? {} };\n    },\n  ],\n  render: (_, { loaded, parameters }) => (\n    <ArgsStory\n      argTypes={\n        loaded.argTypes ?? parameters.docs.extractArgTypes(parameters.component)\n      }\n    />\n  ),\n  parameters: { chromatic: { disableSnapshot: isVite } },\n};\nconst ArgsStory = ({ argTypes }) => {\n  const rows = inferControls({ argTypes, parameters: { __isArgsStory: true } });\n  const [args, setArgs] = useState({});\n  return (\n    <ThemeProvider theme={convert(themes.light)}>\n      <ArgsTable\n        rows={rows}\n        args={args}\n        updateArgs={(val) => setArgs({ ...args, ...val })}\n      />\n    </ThemeProvider>\n  );\n};\nArgsStory.propTypes = { argTypes: PropTypes.object.isRequired };\nexport const JsFunctionComponentInlineDefaults = {\n  parameters: { component: JsFunctionComponentInlineDefaultsComponent },\n};\nexport const JsFunctionComponentInlineDefaultsNoPropTypes = {\n  parameters: {\n    component: JsFunctionComponentInlineDefaultsNoPropTypesComponent,\n  },\n};\nexport const JsDefaultValues = {\n  parameters: { component: JsDefaultValuesComponent },\n};\nexport const JsReactMemo = { parameters: { component: JsReactMemoComponent } };\nJsFunctionComponentInlineDefaults.parameters = {\n  ...JsFunctionComponentInlineDefaults.parameters,\n  docs: {\n    ...JsFunctionComponentInlineDefaults.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  parameters: { component: JsFunctionComponentInlineDefaultsComponent },\\n}\",\n      ...JsFunctionComponentInlineDefaults.parameters?.docs?.source,\n    },\n  },\n};\nJsFunctionComponentInlineDefaultsNoPropTypes.parameters = {\n  ...JsFunctionComponentInlineDefaultsNoPropTypes.parameters,\n  docs: {\n    ...JsFunctionComponentInlineDefaultsNoPropTypes.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  parameters: { component: JsFunctionComponentInlineDefaultsNoPropTypesComponent },\\n}\",\n      ...JsFunctionComponentInlineDefaultsNoPropTypes.parameters?.docs?.source,\n    },\n  },\n};\nJsDefaultValues.parameters = {\n  ...JsDefaultValues.parameters,\n  docs: {\n    ...JsDefaultValues.parameters?.docs,\n    source: {\n      originalSource: \"{ parameters: { component: JsDefaultValuesComponent } }\",\n      ...JsDefaultValues.parameters?.docs?.source,\n    },\n  },\n};\nJsReactMemo.parameters = {\n  ...JsReactMemo.parameters,\n  docs: {\n    ...JsReactMemo.parameters?.docs,\n    source: {\n      originalSource: \"{ parameters: { component: JsReactMemoComponent } }\",\n      ...JsReactMemo.parameters?.docs?.source,\n    },\n  },\n};\n",
+    "originalSources": {
+      "JsFunctionComponentInlineDefaults": "{\n  parameters: { component: JsFunctionComponentInlineDefaultsComponent },\n}",
+      "JsFunctionComponentInlineDefaultsNoPropTypes": "{\n  parameters: { component: JsFunctionComponentInlineDefaultsNoPropTypesComponent },\n}",
+      "JsDefaultValues": "{ parameters: { component: JsDefaultValuesComponent } }",
+      "JsReactMemo": "{ parameters: { component: JsReactMemoComponent } }"
+    },
+    "vitest": "import { test as _test, expect as _expect } from \"vitest\";\nimport {\n  testStory as _testStory,\n  convertToFilePath,\n} from \"@storybook/addon-vitest/internal/test-utils\";\nimport React, { useState } from \"react\";\nimport { PureArgsTable as ArgsTable } from \"@storybook/addon-docs/blocks\";\nimport PropTypes from \"prop-types\";\nimport { storyNameFromExport } from \"storybook/internal/csf\";\nimport { getService, inferControls } from \"storybook/preview-api\";\nimport { ThemeProvider, convert, themes } from \"storybook/theming\";\nimport { component as JsReactMemoComponent } from \"./docgen-components/9586-js-react-memo/input.jsx\";\nimport { component as JsDefaultValuesComponent } from \"./docgen-components/9626-js-default-values/input.jsx\";\nimport { component as JsFunctionComponentInlineDefaultsNoPropTypesComponent } from \"./docgen-components/js-function-component-inline-defaults-no-propTypes/input.jsx\";\nimport { component as JsFunctionComponentInlineDefaultsComponent } from \"./docgen-components/js-function-component-inline-defaults/input.jsx\";\n// Detect if we are running in vite in a hacky way for now\nconst isVite = typeof require === \"undefined\";\nconst _meta = {\n  // Portable stories in Vitest have no docgen server to load argTypes from.\n  tags: [\"!vitest\"],\n  // The docgen server only extracts subcomponents once `component` resolves to a real component.\n  component: JsFunctionComponentInlineDefaultsComponent,\n  // Listed so the docgen server extracts every component; each story shows its own entry.\n  subcomponents: {\n    JsFunctionComponentInlineDefaults:\n      JsFunctionComponentInlineDefaultsComponent,\n    JsFunctionComponentInlineDefaultsNoPropTypes:\n      JsFunctionComponentInlineDefaultsNoPropTypesComponent,\n    JsDefaultValues: JsDefaultValuesComponent,\n    JsReactMemo: JsReactMemoComponent,\n  },\n  loaders: [\n    async ({ componentId, name }) => {\n      if (!globalThis.FEATURES?.docgenServer) {\n        return {};\n      }\n      const docgen = await getService(\"core/docgen\", {\n        internal: true,\n      }).queries.docgen.loaded({ id: componentId });\n      const [, subcomponent] =\n        Object.entries(docgen?.subcomponents ?? {}).find(\n          ([exportName]) => storyNameFromExport(exportName) === name,\n        ) ?? [];\n      return { argTypes: subcomponent?.argTypes ?? {} };\n    },\n  ],\n  render: (_, { loaded, parameters }) => (\n    <ArgsStory\n      argTypes={\n        loaded.argTypes ?? parameters.docs.extractArgTypes(parameters.component)\n      }\n    />\n  ),\n  parameters: { chromatic: { disableSnapshot: isVite } },\n  title: \"react-js-argtypes\",\n};\nexport default _meta;\nconst ArgsStory = ({ argTypes }) => {\n  const rows = inferControls({ argTypes, parameters: { __isArgsStory: true } });\n  const [args, setArgs] = useState({});\n  return (\n    <ThemeProvider theme={convert(themes.light)}>\n      <ArgsTable\n        rows={rows}\n        args={args}\n        updateArgs={(val) => setArgs({ ...args, ...val })}\n      />\n    </ThemeProvider>\n  );\n};\nArgsStory.propTypes = { argTypes: PropTypes.object.isRequired };\nexport const JsFunctionComponentInlineDefaults = {\n  parameters: { component: JsFunctionComponentInlineDefaultsComponent },\n};\nexport const JsFunctionComponentInlineDefaultsNoPropTypes = {\n  parameters: {\n    component: JsFunctionComponentInlineDefaultsNoPropTypesComponent,\n  },\n};\nexport const JsDefaultValues = {\n  parameters: { component: JsDefaultValuesComponent },\n};\nexport const JsReactMemo = { parameters: { component: JsReactMemoComponent } };\nconst _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(\n  globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath,\n);\nif (_isRunningFromThisFile) {\n  _test(\n    \"Js Function Component Inline Defaults\",\n    _testStory({\n      exportName: \"JsFunctionComponentInlineDefaults\",\n      story: JsFunctionComponentInlineDefaults,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"react-js-argtypes--js-function-component-inline-defaults\",\n      componentPath:\n        \"./docgen-components/js-function-component-inline-defaults/input.jsx\",\n      componentName: \"JsFunctionComponentInlineDefaultsComponent\",\n    }),\n  );\n  _test(\n    \"Js Function Component Inline Defaults No Prop Types\",\n    _testStory({\n      exportName: \"JsFunctionComponentInlineDefaultsNoPropTypes\",\n      story: JsFunctionComponentInlineDefaultsNoPropTypes,\n      meta: _meta,\n      skipTags: [],\n      storyId:\n        \"react-js-argtypes--js-function-component-inline-defaults-no-prop-types\",\n      componentPath:\n        \"./docgen-components/js-function-component-inline-defaults/input.jsx\",\n      componentName: \"JsFunctionComponentInlineDefaultsComponent\",\n    }),\n  );\n  _test(\n    \"Js Default Values\",\n    _testStory({\n      exportName: \"JsDefaultValues\",\n      story: JsDefaultValues,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"react-js-argtypes--js-default-values\",\n      componentPath:\n        \"./docgen-components/js-function-component-inline-defaults/input.jsx\",\n      componentName: \"JsFunctionComponentInlineDefaultsComponent\",\n    }),\n  );\n  _test(\n    \"Js React Memo\",\n    _testStory({\n      exportName: \"JsReactMemo\",\n      story: JsReactMemo,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"react-js-argtypes--js-react-memo\",\n      componentPath:\n        \"./docgen-components/js-function-component-inline-defaults/input.jsx\",\n      componentName: \"JsFunctionComponentInlineDefaultsComponent\",\n    }),\n  );\n}\n"
+  },
+  "react-mount-in-play.stories.tsx": {
+    "enriched": "import type { FC } from \"react\";\nimport React from \"react\";\nimport type { StoryObj } from \"@storybook/react\";\nconst Button: FC<{ label?: string; disabled?: boolean }> = (props) => {\n  return <button disabled={props.disabled}>{props.label}</button>;\n};\nexport default { component: Button };\nexport const Basic: StoryObj<typeof Button> = {\n  args: { disabled: true },\n  async play({ mount, args }) {\n    await mount(<Button {...args} label={\"set in play\"} />);\n  },\n};\nBasic.parameters = {\n  ...Basic.parameters,\n  docs: {\n    ...Basic.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: {\\n    disabled: true,\\n  },\\n  async play({ mount, args }) {\\n    await mount(<Button {...args} label={'set in play'} />);\\n  },\\n}\",\n      ...Basic.parameters?.docs?.source,\n    },\n  },\n};\n",
+    "originalSources": {
+      "Basic": "{\n  args: {\n    disabled: true,\n  },\n  async play({ mount, args }) {\n    await mount(<Button {...args} label={'set in play'} />);\n  },\n}"
+    },
+    "vitest": "import { test as _test, expect as _expect } from \"vitest\";\nimport {\n  testStory as _testStory,\n  convertToFilePath,\n} from \"@storybook/addon-vitest/internal/test-utils\";\nimport type { FC } from \"react\";\nimport React from \"react\";\nimport type { StoryObj } from \"@storybook/react\";\nconst Button: FC<{ label?: string; disabled?: boolean }> = (props) => {\n  return <button disabled={props.disabled}>{props.label}</button>;\n};\nconst _meta = { component: Button, title: \"react-mount-in-play\" };\nexport default _meta;\nexport const Basic: StoryObj<typeof Button> = {\n  args: { disabled: true },\n  async play({ mount, args }) {\n    await mount(<Button {...args} label={\"set in play\"} />);\n  },\n};\nconst _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(\n  globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath,\n);\nif (_isRunningFromThisFile) {\n  _test(\n    \"Basic\",\n    _testStory({\n      exportName: \"Basic\",\n      story: Basic,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"react-mount-in-play--basic\",\n    }),\n  );\n}\n"
+  },
+  "react-test-fn.stories.tsx": {
+    "enriched": "import React from \"react\";\nimport type { StoryContext } from \"@storybook/react\";\nimport { expect, fn } from \"storybook/test\";\nimport preview from \"./preview\";\nconst Button = (args: React.ComponentProps<\"button\">) => <button {...args} />;\nconst meta = preview.meta({\n  component: Button,\n  args: { children: \"Default\", onClick: fn() },\n  tags: [\"some-tag\"],\n});\nexport const Default = meta.story({ args: { children: \"Arg from story\" } });\nDefault.test(\"simple\", async ({ canvas, userEvent, args }) => {\n  const button = canvas.getByText(\"Arg from story\");\n  await userEvent.click(button);\n  await expect(args.onClick).toHaveBeenCalled();\n});\nconst doTest = async ({\n  canvas,\n  userEvent,\n  args,\n}: StoryContext<React.ComponentProps<\"button\">>) => {\n  const button = canvas.getByText(\"Arg from story\");\n  await userEvent.click(button);\n  await expect(args.onClick).toHaveBeenCalled();\n};\nDefault.test(\"referring to function in file\", doTest);\nDefault.test(\n  \"with overrides\",\n  {\n    args: { children: \"Arg from test override\" },\n    parameters: {\n      viewport: {\n        options: {\n          sized: { name: \"Sized\", styles: { width: \"380px\", height: \"500px\" } },\n        },\n      },\n      chromatic: { viewports: [380] },\n    },\n    globals: { viewport: { value: \"sized\" } },\n    tags: [\"!test\"],\n  },\n  async ({ canvas }) => {\n    const button = canvas.getByText(\"Arg from test override\");\n    await expect(button).toBeInTheDocument();\n    expect(document.body.clientWidth).toBe(380);\n  },\n);\nDefault.test(\n  \"with play function\",\n  {\n    play: async ({ canvas }) => {\n      const button = canvas.getByText(\"Arg from story\");\n      await expect(button).toBeInTheDocument();\n    },\n  },\n  async ({ canvas }) => {\n    const button = canvas.getByText(\"Arg from story\");\n    await expect(button).not.toHaveAttribute(\"aria-disabled\", \"true\");\n  },\n);\nexport const Extended = Default.extend({\n  args: { children: \"Arg from extended story\" },\n});\nExtended.test(\"should have extended args\", async ({ canvas }) => {\n  const button = canvas.getByText(\"Arg from extended story\");\n  await expect(button).not.toHaveAttribute(\"aria-disabled\", \"true\");\n});\nDefault.input.parameters = {\n  ...Default.input.parameters,\n  docs: {\n    ...Default.input.parameters?.docs,\n    source: {\n      originalSource:\n        \"meta.story({\\n  args: {\\n    children: 'Arg from story',\\n  },\\n})\",\n      ...Default.input.parameters?.docs?.source,\n    },\n  },\n};\nExtended.input.parameters = {\n  ...Extended.input.parameters,\n  docs: {\n    ...Extended.input.parameters?.docs,\n    source: {\n      originalSource:\n        \"Default.extend({\\n  args: {\\n    children: 'Arg from extended story',\\n  },\\n})\",\n      ...Extended.input.parameters?.docs?.source,\n    },\n  },\n};\n",
+    "originalSources": {
+      "Default": "meta.story({\n  args: {\n    children: 'Arg from story',\n  },\n})",
+      "Extended": "Default.extend({\n  args: {\n    children: 'Arg from extended story',\n  },\n})"
+    },
+    "vitest": "import {\n  test as _test,\n  expect as _expect,\n  describe as _describe,\n} from \"vitest\";\nimport {\n  testStory as _testStory,\n  convertToFilePath,\n} from \"@storybook/addon-vitest/internal/test-utils\";\nimport React from \"react\";\nimport type { StoryContext } from \"@storybook/react\";\nimport { expect, fn } from \"storybook/test\";\nimport preview from \"./preview\";\nconst Button = (args: React.ComponentProps<\"button\">) => <button {...args} />;\nconst meta = preview.meta({\n  component: Button,\n  args: { children: \"Default\", onClick: fn() },\n  tags: [\"some-tag\"],\n  title: \"react-test-fn\",\n});\nexport const Default = meta.story({ args: { children: \"Arg from story\" } });\nDefault.test(\"simple\", async ({ canvas, userEvent, args }) => {\n  const button = canvas.getByText(\"Arg from story\");\n  await userEvent.click(button);\n  await expect(args.onClick).toHaveBeenCalled();\n});\nconst doTest = async ({\n  canvas,\n  userEvent,\n  args,\n}: StoryContext<React.ComponentProps<\"button\">>) => {\n  const button = canvas.getByText(\"Arg from story\");\n  await userEvent.click(button);\n  await expect(args.onClick).toHaveBeenCalled();\n};\nDefault.test(\"referring to function in file\", doTest);\nDefault.test(\n  \"with overrides\",\n  {\n    args: { children: \"Arg from test override\" },\n    parameters: {\n      viewport: {\n        options: {\n          sized: { name: \"Sized\", styles: { width: \"380px\", height: \"500px\" } },\n        },\n      },\n      chromatic: { viewports: [380] },\n    },\n    globals: { viewport: { value: \"sized\" } },\n    tags: [\"!test\"],\n  },\n  async ({ canvas }) => {\n    const button = canvas.getByText(\"Arg from test override\");\n    await expect(button).toBeInTheDocument();\n    expect(document.body.clientWidth).toBe(380);\n  },\n);\nDefault.test(\n  \"with play function\",\n  {\n    play: async ({ canvas }) => {\n      const button = canvas.getByText(\"Arg from story\");\n      await expect(button).toBeInTheDocument();\n    },\n  },\n  async ({ canvas }) => {\n    const button = canvas.getByText(\"Arg from story\");\n    await expect(button).not.toHaveAttribute(\"aria-disabled\", \"true\");\n  },\n);\nexport const Extended = Default.extend({\n  args: { children: \"Arg from extended story\" },\n});\nExtended.test(\"should have extended args\", async ({ canvas }) => {\n  const button = canvas.getByText(\"Arg from extended story\");\n  await expect(button).not.toHaveAttribute(\"aria-disabled\", \"true\");\n});\nconst _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(\n  globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath,\n);\nif (_isRunningFromThisFile) {\n  _describe(\"Default  \", () => {\n    _test(\n      \"base story\",\n      _testStory({\n        exportName: \"Default\",\n        story: Default,\n        meta: meta,\n        skipTags: [],\n        storyId: \"react-test-fn--default\",\n      }),\n    );\n    _test(\n      \"simple\",\n      _testStory({\n        exportName: \"Default\",\n        story: Default,\n        meta: meta,\n        skipTags: [],\n        storyId: \"react-test-fn--default:simple\",\n        testName: \"simple\",\n      }),\n    );\n    _test(\n      \"referring to function in file\",\n      _testStory({\n        exportName: \"Default\",\n        story: Default,\n        meta: meta,\n        skipTags: [],\n        storyId: \"react-test-fn--default:referring-to-function-in-file\",\n        testName: \"referring to function in file\",\n      }),\n    );\n    _test(\n      \"with overrides\",\n      _testStory({\n        exportName: \"Default\",\n        story: Default,\n        meta: meta,\n        skipTags: [],\n        storyId: \"react-test-fn--default:with-overrides\",\n        testName: \"with overrides\",\n      }),\n    );\n    _test(\n      \"with play function\",\n      _testStory({\n        exportName: \"Default\",\n        story: Default,\n        meta: meta,\n        skipTags: [],\n        storyId: \"react-test-fn--default:with-play-function\",\n        testName: \"with play function\",\n      }),\n    );\n  });\n  _describe(\"Extended  \", () => {\n    _test(\n      \"base story\",\n      _testStory({\n        exportName: \"Extended\",\n        story: Extended,\n        meta: meta,\n        skipTags: [],\n        storyId: \"react-test-fn--extended\",\n      }),\n    );\n    _test(\n      \"should have extended args\",\n      _testStory({\n        exportName: \"Extended\",\n        story: Extended,\n        meta: meta,\n        skipTags: [],\n        storyId: \"react-test-fn--extended:should-have-extended-args\",\n        testName: \"should have extended args\",\n      }),\n    );\n  });\n}\n"
+  },
+  "shapes-angular-button.stories.ts": {
+    "enriched": "// The story shapes the server snippet generator has to tell apart, one export per shape. Shapes\n// whose markup or args cannot be read statically must yield NO snippet (recorded as a sentinel),\n// never a fabricated element.\nimport { ShapeButtonComponent } from \"./shape-button.component.ts\";\nimport { IMPORTED_TEMPLATE } from \"./templates.ts\";\nimport * as BaseStories from \"./base-args.stories.ts\";\nimport { argsToTemplate } from \"@storybook/angular-vite\";\ntype LooseStory = {\n  args?: Record<string, unknown>;\n  render?: (args: Record<string, unknown>) => unknown;\n  template?: string;\n};\nconst HOISTED_TEMPLATE = \"<sb-shape-button hoisted></sb-shape-button>\";\nconst HEADER = \"<h1>Shapes</h1>\";\nconst INCLUDES = [\"label\"];\nconst base = { args: { label: \"From base\" } };\nconst Template = (args: Record<string, unknown>) => ({\n  props: args,\n  template: '<div class=\"bound\"><sb-shape-button></sb-shape-button></div>',\n});\nlet MUTABLE_TEMPLATE = \"<sb-shape-button first></sb-shape-button>\";\nMUTABLE_TEMPLATE = \"<sb-shape-button second></sb-shape-button>\";\nconst extraArgs = { count: 3 };\nexport default {\n  title: \"AngularShapes/button-shapes\",\n  component: ShapeButtonComponent,\n};\nexport const OwnTemplate = {\n  template: \"<sb-shape-button emphasis>hi</sb-shape-button>\",\n};\nexport const RenderTemplate = {\n  render: () => ({ template: \"<sb-shape-button rendered></sb-shape-button>\" }),\n};\nexport const MethodRender = {\n  args: { label: \"Save\" },\n  render(_args: Record<string, unknown>) {\n    return {\n      template: '<div class=\"wrap\"><sb-shape-button></sb-shape-button></div>',\n    };\n  },\n};\nexport const ArgsToTemplateWrapper = {\n  args: { label: \"Save\", count: 7, clicked: () => {} },\n  render: (args: Record<string, unknown>) => ({\n    props: args,\n    template: `<div class=\"wrap\"><sb-shape-button ${argsToTemplate(args)}></sb-shape-button></div>`,\n  }),\n};\nexport const ArgsToTemplateInclude = {\n  args: { label: \"Save\", count: 7 },\n  render: (args: Record<string, unknown>) => ({\n    props: args,\n    template: `<sb-shape-button ${argsToTemplate(args, { include: [\"label\"] })}></sb-shape-button>`,\n  }),\n};\nexport const SlotInterpolation = {\n  args: { label: \"Save\", footer: \"Bye\" },\n  render: ({ footer, ...args }: Record<string, unknown>) => ({\n    props: args,\n    template: `<sb-shape-button>${footer}</sb-shape-button>`,\n  }),\n};\nexport const ModuleConstant = {\n  args: { label: \"Save\" },\n  render: (args: Record<string, unknown>) => ({\n    props: args,\n    template: `${HEADER}<sb-shape-button></sb-shape-button>`,\n  }),\n};\nexport const HoistedTemplate = { template: HOISTED_TEMPLATE };\nexport const QuotedArgs = {\n  args: { label: `it's \"quoted\" & Tom &amp; Jerry` },\n};\nexport const ImportedTemplate = {\n  template: IMPORTED_TEMPLATE,\n  args: { count: 5 },\n};\nexport const SpreadShadowedRender = {\n  render: () => ({\n    template: \"<sb-shape-button from-story></sb-shape-button>\",\n  }),\n  ...base,\n};\nexport const SpreadArgs = { args: { label: \"Save\", ...extraArgs } };\nexport const AccessorRender = {\n  args: { label: \"Save\" },\n  get render() {\n    return () => ({\n      template: \"<sb-shape-button from-getter></sb-shape-button>\",\n    });\n  },\n};\nexport const MultiExitRender = {\n  args: { count: 1 },\n  render: (args: { count?: number }) => {\n    if (args.count) {\n      return { template: \"<sb-shape-button first></sb-shape-button>\" };\n    }\n    return { template: \"<sb-shape-button second></sb-shape-button>\" };\n  },\n};\nexport const DynamicOptions = {\n  args: { label: \"Save\" },\n  render: (args: Record<string, unknown>) => ({\n    props: args,\n    template: `<sb-shape-button ${argsToTemplate(args, { include: INCLUDES })}></sb-shape-button>`,\n  }),\n};\nexport const TemplateBind = Template.bind({}) as typeof Template & LooseStory;\nTemplateBind.args = { label: \"Bound\" };\nexport const MemberAssignedRender: LooseStory = { args: { label: \"Save\" } };\nMemberAssignedRender.render = () => ({\n  template: '<div class=\"assigned\"><sb-shape-button></sb-shape-button></div>',\n});\nexport const ReassignedTemplate = { template: MUTABLE_TEMPLATE };\nexport const SpreadStoryArgs = { args: { ...QuotedArgs.args, count: 9 } };\n// Values an Angular template expression cannot carry: `new` is not in the grammar at all, and\n// `Array` is not a name the host component resolves. Both are ordinary TypeScript in a class body.\nexport const HoistedArgs = {\n  args: {\n    label: \"Save\",\n    // The bare Error is the fixture: this file stands in for a user's story, not for repo code.\n    // eslint-disable-next-line local-rules/no-uncategorized-errors\n    loadingError: new Error(\"Failed to load cards.\"),\n    items: Array.from({ length: 3 }, (_, index) => index),\n  },\n};\nexport const SpreadCrossFileArgs = {\n  args: { ...BaseStories.Base.args, label: \"overridden\" },\n};\nOwnTemplate.parameters = {\n  ...OwnTemplate.parameters,\n  docs: {\n    ...OwnTemplate.parameters?.docs,\n    source: {\n      originalSource:\n        \"{ template: '<sb-shape-button emphasis>hi</sb-shape-button>' }\",\n      ...OwnTemplate.parameters?.docs?.source,\n    },\n  },\n};\nRenderTemplate.parameters = {\n  ...RenderTemplate.parameters,\n  docs: {\n    ...RenderTemplate.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  render: () => ({ template: '<sb-shape-button rendered></sb-shape-button>' }),\\n}\",\n      ...RenderTemplate.parameters?.docs?.source,\n    },\n  },\n};\nMethodRender.parameters = {\n  ...MethodRender.parameters,\n  docs: {\n    ...MethodRender.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: { label: 'Save' },\\n  render(_args: Record<string, unknown>) {\\n    return { template: '<div class=\\\"wrap\\\"><sb-shape-button></sb-shape-button></div>' };\\n  },\\n}\",\n      ...MethodRender.parameters?.docs?.source,\n    },\n  },\n};\nArgsToTemplateWrapper.parameters = {\n  ...ArgsToTemplateWrapper.parameters,\n  docs: {\n    ...ArgsToTemplateWrapper.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: { label: 'Save', count: 7, clicked: () => {} },\\n  render: (args: Record<string, unknown>) => ({\\n    props: args,\\n    template: `<div class=\\\"wrap\\\"><sb-shape-button ${argsToTemplate(args)}></sb-shape-button></div>`,\\n  }),\\n}\",\n      ...ArgsToTemplateWrapper.parameters?.docs?.source,\n    },\n  },\n};\nArgsToTemplateInclude.parameters = {\n  ...ArgsToTemplateInclude.parameters,\n  docs: {\n    ...ArgsToTemplateInclude.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: { label: 'Save', count: 7 },\\n  render: (args: Record<string, unknown>) => ({\\n    props: args,\\n    template: `<sb-shape-button ${argsToTemplate(args, { include: ['label'] })}></sb-shape-button>`,\\n  }),\\n}\",\n      ...ArgsToTemplateInclude.parameters?.docs?.source,\n    },\n  },\n};\nSlotInterpolation.parameters = {\n  ...SlotInterpolation.parameters,\n  docs: {\n    ...SlotInterpolation.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: { label: 'Save', footer: 'Bye' },\\n  render: ({ footer, ...args }: Record<string, unknown>) => ({\\n    props: args,\\n    template: `<sb-shape-button>${footer}</sb-shape-button>`,\\n  }),\\n}\",\n      ...SlotInterpolation.parameters?.docs?.source,\n    },\n  },\n};\nModuleConstant.parameters = {\n  ...ModuleConstant.parameters,\n  docs: {\n    ...ModuleConstant.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: { label: 'Save' },\\n  render: (args: Record<string, unknown>) => ({\\n    props: args,\\n    template: `${HEADER}<sb-shape-button></sb-shape-button>`,\\n  }),\\n}\",\n      ...ModuleConstant.parameters?.docs?.source,\n    },\n  },\n};\nHoistedTemplate.parameters = {\n  ...HoistedTemplate.parameters,\n  docs: {\n    ...HoistedTemplate.parameters?.docs,\n    source: {\n      originalSource: \"{ template: HOISTED_TEMPLATE }\",\n      ...HoistedTemplate.parameters?.docs?.source,\n    },\n  },\n};\nQuotedArgs.parameters = {\n  ...QuotedArgs.parameters,\n  docs: {\n    ...QuotedArgs.parameters?.docs,\n    source: {\n      originalSource:\n        '{\\n  args: { label: `it\\'s \"quoted\" & Tom &amp; Jerry` },\\n}',\n      ...QuotedArgs.parameters?.docs?.source,\n    },\n  },\n};\nImportedTemplate.parameters = {\n  ...ImportedTemplate.parameters,\n  docs: {\n    ...ImportedTemplate.parameters?.docs,\n    source: {\n      originalSource: \"{ template: IMPORTED_TEMPLATE, args: { count: 5 } }\",\n      ...ImportedTemplate.parameters?.docs?.source,\n    },\n  },\n};\nSpreadShadowedRender.parameters = {\n  ...SpreadShadowedRender.parameters,\n  docs: {\n    ...SpreadShadowedRender.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  render: () => ({ template: '<sb-shape-button from-story></sb-shape-button>' }),\\n  ...base,\\n}\",\n      ...SpreadShadowedRender.parameters?.docs?.source,\n    },\n  },\n};\nSpreadArgs.parameters = {\n  ...SpreadArgs.parameters,\n  docs: {\n    ...SpreadArgs.parameters?.docs,\n    source: {\n      originalSource: \"{ args: { label: 'Save', ...extraArgs } }\",\n      ...SpreadArgs.parameters?.docs?.source,\n    },\n  },\n};\nAccessorRender.parameters = {\n  ...AccessorRender.parameters,\n  docs: {\n    ...AccessorRender.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: { label: 'Save' },\\n  get render() {\\n    return () => ({ template: '<sb-shape-button from-getter></sb-shape-button>' });\\n  },\\n}\",\n      ...AccessorRender.parameters?.docs?.source,\n    },\n  },\n};\nMultiExitRender.parameters = {\n  ...MultiExitRender.parameters,\n  docs: {\n    ...MultiExitRender.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: { count: 1 },\\n  render: (args: { count?: number }) => {\\n    if (args.count) {\\n      return { template: '<sb-shape-button first></sb-shape-button>' };\\n    }\\n    return { template: '<sb-shape-button second></sb-shape-button>' };\\n  },\\n}\",\n      ...MultiExitRender.parameters?.docs?.source,\n    },\n  },\n};\nDynamicOptions.parameters = {\n  ...DynamicOptions.parameters,\n  docs: {\n    ...DynamicOptions.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: { label: 'Save' },\\n  render: (args: Record<string, unknown>) => ({\\n    props: args,\\n    template: `<sb-shape-button ${argsToTemplate(args, { include: INCLUDES })}></sb-shape-button>`,\\n  }),\\n}\",\n      ...DynamicOptions.parameters?.docs?.source,\n    },\n  },\n};\nTemplateBind.parameters = {\n  ...TemplateBind.parameters,\n  docs: {\n    ...TemplateBind.parameters?.docs,\n    source: {\n      originalSource: \"Template.bind({}) as typeof Template & LooseStory\",\n      ...TemplateBind.parameters?.docs?.source,\n    },\n  },\n};\nMemberAssignedRender.parameters = {\n  ...MemberAssignedRender.parameters,\n  docs: {\n    ...MemberAssignedRender.parameters?.docs,\n    source: {\n      originalSource: \"{ args: { label: 'Save' } }\",\n      ...MemberAssignedRender.parameters?.docs?.source,\n    },\n  },\n};\nReassignedTemplate.parameters = {\n  ...ReassignedTemplate.parameters,\n  docs: {\n    ...ReassignedTemplate.parameters?.docs,\n    source: {\n      originalSource: \"{ template: MUTABLE_TEMPLATE }\",\n      ...ReassignedTemplate.parameters?.docs?.source,\n    },\n  },\n};\nSpreadStoryArgs.parameters = {\n  ...SpreadStoryArgs.parameters,\n  docs: {\n    ...SpreadStoryArgs.parameters?.docs,\n    source: {\n      originalSource: \"{ args: { ...QuotedArgs.args, count: 9 } }\",\n      ...SpreadStoryArgs.parameters?.docs?.source,\n    },\n  },\n};\nHoistedArgs.parameters = {\n  ...HoistedArgs.parameters,\n  docs: {\n    ...HoistedArgs.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  args: {\\n    label: 'Save',\\n    // The bare Error is the fixture: this file stands in for a user's story, not for repo code.\\n    // eslint-disable-next-line local-rules/no-uncategorized-errors\\n    loadingError: new Error('Failed to load cards.'),\\n    items: Array.from({ length: 3 }, (_, index) => index),\\n  },\\n}\",\n      ...HoistedArgs.parameters?.docs?.source,\n    },\n  },\n};\nSpreadCrossFileArgs.parameters = {\n  ...SpreadCrossFileArgs.parameters,\n  docs: {\n    ...SpreadCrossFileArgs.parameters?.docs,\n    source: {\n      originalSource:\n        \"{ args: { ...BaseStories.Base.args, label: 'overridden' } }\",\n      ...SpreadCrossFileArgs.parameters?.docs?.source,\n    },\n  },\n};\n",
+    "originalSources": {
+      "OwnTemplate": "{ template: '<sb-shape-button emphasis>hi</sb-shape-button>' }",
+      "RenderTemplate": "{\n  render: () => ({ template: '<sb-shape-button rendered></sb-shape-button>' }),\n}",
+      "MethodRender": "{\n  args: { label: 'Save' },\n  render(_args: Record<string, unknown>) {\n    return { template: '<div class=\"wrap\"><sb-shape-button></sb-shape-button></div>' };\n  },\n}",
+      "ArgsToTemplateWrapper": "{\n  args: { label: 'Save', count: 7, clicked: () => {} },\n  render: (args: Record<string, unknown>) => ({\n    props: args,\n    template: `<div class=\"wrap\"><sb-shape-button ${argsToTemplate(args)}></sb-shape-button></div>`,\n  }),\n}",
+      "ArgsToTemplateInclude": "{\n  args: { label: 'Save', count: 7 },\n  render: (args: Record<string, unknown>) => ({\n    props: args,\n    template: `<sb-shape-button ${argsToTemplate(args, { include: ['label'] })}></sb-shape-button>`,\n  }),\n}",
+      "SlotInterpolation": "{\n  args: { label: 'Save', footer: 'Bye' },\n  render: ({ footer, ...args }: Record<string, unknown>) => ({\n    props: args,\n    template: `<sb-shape-button>${footer}</sb-shape-button>`,\n  }),\n}",
+      "ModuleConstant": "{\n  args: { label: 'Save' },\n  render: (args: Record<string, unknown>) => ({\n    props: args,\n    template: `${HEADER}<sb-shape-button></sb-shape-button>`,\n  }),\n}",
+      "HoistedTemplate": "{ template: HOISTED_TEMPLATE }",
+      "QuotedArgs": "{\n  args: { label: `it's \"quoted\" & Tom &amp; Jerry` },\n}",
+      "ImportedTemplate": "{ template: IMPORTED_TEMPLATE, args: { count: 5 } }",
+      "SpreadShadowedRender": "{\n  render: () => ({ template: '<sb-shape-button from-story></sb-shape-button>' }),\n  ...base,\n}",
+      "SpreadArgs": "{ args: { label: 'Save', ...extraArgs } }",
+      "AccessorRender": "{\n  args: { label: 'Save' },\n  get render() {\n    return () => ({ template: '<sb-shape-button from-getter></sb-shape-button>' });\n  },\n}",
+      "MultiExitRender": "{\n  args: { count: 1 },\n  render: (args: { count?: number }) => {\n    if (args.count) {\n      return { template: '<sb-shape-button first></sb-shape-button>' };\n    }\n    return { template: '<sb-shape-button second></sb-shape-button>' };\n  },\n}",
+      "DynamicOptions": "{\n  args: { label: 'Save' },\n  render: (args: Record<string, unknown>) => ({\n    props: args,\n    template: `<sb-shape-button ${argsToTemplate(args, { include: INCLUDES })}></sb-shape-button>`,\n  }),\n}",
+      "TemplateBind": "Template.bind({}) as typeof Template & LooseStory",
+      "MemberAssignedRender": "{ args: { label: 'Save' } }",
+      "ReassignedTemplate": "{ template: MUTABLE_TEMPLATE }",
+      "SpreadStoryArgs": "{ args: { ...QuotedArgs.args, count: 9 } }",
+      "HoistedArgs": "{\n  args: {\n    label: 'Save',\n    // The bare Error is the fixture: this file stands in for a user's story, not for repo code.\n    // eslint-disable-next-line local-rules/no-uncategorized-errors\n    loadingError: new Error('Failed to load cards.'),\n    items: Array.from({ length: 3 }, (_, index) => index),\n  },\n}",
+      "SpreadCrossFileArgs": "{ args: { ...BaseStories.Base.args, label: 'overridden' } }"
+    },
+    "vitest": "// The story shapes the server snippet generator has to tell apart, one export per shape. Shapes\n// whose markup or args cannot be read statically must yield NO snippet (recorded as a sentinel),\n// never a fabricated element.\nimport { ShapeButtonComponent } from \"./shape-button.component.ts\";\nimport { IMPORTED_TEMPLATE } from \"./templates.ts\";\nimport * as BaseStories from \"./base-args.stories.ts\";\nimport { argsToTemplate } from \"@storybook/angular-vite\";\nimport { test as _test, expect as _expect } from \"vitest\";\nimport {\n  testStory as _testStory,\n  convertToFilePath,\n} from \"@storybook/addon-vitest/internal/test-utils\";\ntype LooseStory = {\n  args?: Record<string, unknown>;\n  render?: (args: Record<string, unknown>) => unknown;\n  template?: string;\n};\nconst HOISTED_TEMPLATE = \"<sb-shape-button hoisted></sb-shape-button>\";\nconst HEADER = \"<h1>Shapes</h1>\";\nconst INCLUDES = [\"label\"];\nconst base = { args: { label: \"From base\" } };\nconst Template = (args: Record<string, unknown>) => ({\n  props: args,\n  template: '<div class=\"bound\"><sb-shape-button></sb-shape-button></div>',\n});\nlet MUTABLE_TEMPLATE = \"<sb-shape-button first></sb-shape-button>\";\nMUTABLE_TEMPLATE = \"<sb-shape-button second></sb-shape-button>\";\nconst extraArgs = { count: 3 };\nconst _meta = {\n  title: \"AngularShapes/button-shapes\",\n  component: ShapeButtonComponent,\n};\nexport default _meta;\nexport const OwnTemplate = {\n  template: \"<sb-shape-button emphasis>hi</sb-shape-button>\",\n};\nexport const RenderTemplate = {\n  render: () => ({ template: \"<sb-shape-button rendered></sb-shape-button>\" }),\n};\nexport const MethodRender = {\n  args: { label: \"Save\" },\n  render(_args: Record<string, unknown>) {\n    return {\n      template: '<div class=\"wrap\"><sb-shape-button></sb-shape-button></div>',\n    };\n  },\n};\nexport const ArgsToTemplateWrapper = {\n  args: { label: \"Save\", count: 7, clicked: () => {} },\n  render: (args: Record<string, unknown>) => ({\n    props: args,\n    template: `<div class=\"wrap\"><sb-shape-button ${argsToTemplate(args)}></sb-shape-button></div>`,\n  }),\n};\nexport const ArgsToTemplateInclude = {\n  args: { label: \"Save\", count: 7 },\n  render: (args: Record<string, unknown>) => ({\n    props: args,\n    template: `<sb-shape-button ${argsToTemplate(args, { include: [\"label\"] })}></sb-shape-button>`,\n  }),\n};\nexport const SlotInterpolation = {\n  args: { label: \"Save\", footer: \"Bye\" },\n  render: ({ footer, ...args }: Record<string, unknown>) => ({\n    props: args,\n    template: `<sb-shape-button>${footer}</sb-shape-button>`,\n  }),\n};\nexport const ModuleConstant = {\n  args: { label: \"Save\" },\n  render: (args: Record<string, unknown>) => ({\n    props: args,\n    template: `${HEADER}<sb-shape-button></sb-shape-button>`,\n  }),\n};\nexport const HoistedTemplate = { template: HOISTED_TEMPLATE };\nexport const QuotedArgs = {\n  args: { label: `it's \"quoted\" & Tom &amp; Jerry` },\n};\nexport const ImportedTemplate = {\n  template: IMPORTED_TEMPLATE,\n  args: { count: 5 },\n};\nexport const SpreadShadowedRender = {\n  render: () => ({\n    template: \"<sb-shape-button from-story></sb-shape-button>\",\n  }),\n  ...base,\n};\nexport const SpreadArgs = { args: { label: \"Save\", ...extraArgs } };\nexport const AccessorRender = {\n  args: { label: \"Save\" },\n  get render() {\n    return () => ({\n      template: \"<sb-shape-button from-getter></sb-shape-button>\",\n    });\n  },\n};\nexport const MultiExitRender = {\n  args: { count: 1 },\n  render: (args: { count?: number }) => {\n    if (args.count) {\n      return { template: \"<sb-shape-button first></sb-shape-button>\" };\n    }\n    return { template: \"<sb-shape-button second></sb-shape-button>\" };\n  },\n};\nexport const DynamicOptions = {\n  args: { label: \"Save\" },\n  render: (args: Record<string, unknown>) => ({\n    props: args,\n    template: `<sb-shape-button ${argsToTemplate(args, { include: INCLUDES })}></sb-shape-button>`,\n  }),\n};\nexport const TemplateBind = Template.bind({}) as typeof Template & LooseStory;\nTemplateBind.args = { label: \"Bound\" };\nexport const MemberAssignedRender: LooseStory = { args: { label: \"Save\" } };\nMemberAssignedRender.render = () => ({\n  template: '<div class=\"assigned\"><sb-shape-button></sb-shape-button></div>',\n});\nexport const ReassignedTemplate = { template: MUTABLE_TEMPLATE };\nexport const SpreadStoryArgs = { args: { ...QuotedArgs.args, count: 9 } };\n// Values an Angular template expression cannot carry: `new` is not in the grammar at all, and\n// `Array` is not a name the host component resolves. Both are ordinary TypeScript in a class body.\nexport const HoistedArgs = {\n  args: {\n    label: \"Save\",\n    // The bare Error is the fixture: this file stands in for a user's story, not for repo code.\n    // eslint-disable-next-line local-rules/no-uncategorized-errors\n    loadingError: new Error(\"Failed to load cards.\"),\n    items: Array.from({ length: 3 }, (_, index) => index),\n  },\n};\nexport const SpreadCrossFileArgs = {\n  args: { ...BaseStories.Base.args, label: \"overridden\" },\n};\nconst _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(\n  globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath,\n);\nif (_isRunningFromThisFile) {\n  _test(\n    \"Own Template\",\n    _testStory({\n      exportName: \"OwnTemplate\",\n      story: OwnTemplate,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--own-template\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Render Template\",\n    _testStory({\n      exportName: \"RenderTemplate\",\n      story: RenderTemplate,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--render-template\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Method Render\",\n    _testStory({\n      exportName: \"MethodRender\",\n      story: MethodRender,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--method-render\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Args To Template Wrapper\",\n    _testStory({\n      exportName: \"ArgsToTemplateWrapper\",\n      story: ArgsToTemplateWrapper,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--args-to-template-wrapper\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Args To Template Include\",\n    _testStory({\n      exportName: \"ArgsToTemplateInclude\",\n      story: ArgsToTemplateInclude,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--args-to-template-include\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Slot Interpolation\",\n    _testStory({\n      exportName: \"SlotInterpolation\",\n      story: SlotInterpolation,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--slot-interpolation\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Module Constant\",\n    _testStory({\n      exportName: \"ModuleConstant\",\n      story: ModuleConstant,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--module-constant\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Hoisted Template\",\n    _testStory({\n      exportName: \"HoistedTemplate\",\n      story: HoistedTemplate,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--hoisted-template\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Quoted Args\",\n    _testStory({\n      exportName: \"QuotedArgs\",\n      story: QuotedArgs,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--quoted-args\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Imported Template\",\n    _testStory({\n      exportName: \"ImportedTemplate\",\n      story: ImportedTemplate,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--imported-template\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Spread Shadowed Render\",\n    _testStory({\n      exportName: \"SpreadShadowedRender\",\n      story: SpreadShadowedRender,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--spread-shadowed-render\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Spread Args\",\n    _testStory({\n      exportName: \"SpreadArgs\",\n      story: SpreadArgs,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--spread-args\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Accessor Render\",\n    _testStory({\n      exportName: \"AccessorRender\",\n      story: AccessorRender,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--accessor-render\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Multi Exit Render\",\n    _testStory({\n      exportName: \"MultiExitRender\",\n      story: MultiExitRender,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--multi-exit-render\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Dynamic Options\",\n    _testStory({\n      exportName: \"DynamicOptions\",\n      story: DynamicOptions,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--dynamic-options\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Template Bind\",\n    _testStory({\n      exportName: \"TemplateBind\",\n      story: TemplateBind,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--template-bind\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Member Assigned Render\",\n    _testStory({\n      exportName: \"MemberAssignedRender\",\n      story: MemberAssignedRender,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--member-assigned-render\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Reassigned Template\",\n    _testStory({\n      exportName: \"ReassignedTemplate\",\n      story: ReassignedTemplate,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--reassigned-template\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Spread Story Args\",\n    _testStory({\n      exportName: \"SpreadStoryArgs\",\n      story: SpreadStoryArgs,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--spread-story-args\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Hoisted Args\",\n    _testStory({\n      exportName: \"HoistedArgs\",\n      story: HoistedArgs,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--hoisted-args\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Spread Cross File Args\",\n    _testStory({\n      exportName: \"SpreadCrossFileArgs\",\n      story: SpreadCrossFileArgs,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--spread-cross-file-args\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n}\n"
+  }
+}
diff --git a/code/core/src/csf-tools/corpus.test.ts b/code/core/src/csf-tools/corpus.test.ts
index ed3bbdc18853..3e44eb4a2918 100644
--- a/code/core/src/csf-tools/corpus.test.ts
+++ b/code/core/src/csf-tools/corpus.test.ts
@@ -3,11 +3,17 @@ import { join } from 'node:path';
 
 import { describe, expect, it } from 'vitest';
 
+import { format } from 'prettier';
+
 import { loadCsf } from './CsfFile.ts';
 import golden from './__corpus__/golden.json';
+import { summarizeTransforms } from './__corpus__/summarize.ts';
+import transforms from './__corpus__/transforms.json';
+import * as csfTools from './index.ts';
 
-// Golden outputs were recorded from the Babel implementation with `__corpus__/record.mjs`. They
-// are compared with `toEqual` so `vitest -u` cannot re-baseline them from this implementation.
+// `golden.json` was recorded from the Babel implementation and `transforms.json` from this one, both
+// with `__corpus__/record.mjs`. They are compared with `toEqual` so `vitest -u` cannot re-baseline
+// them.
 
 const inputs = join(__dirname, '__corpus__', 'inputs');
 
@@ -59,6 +65,7 @@ describe('CSF corpus', () => {
 
   it('covers every recorded file', () => {
     expect(files).toEqual(Object.keys(golden).sort());
+    expect(files).toEqual(Object.keys(transforms).sort());
   });
 
   it.each(files.filter((file) => !improved.has(file)))(
@@ -68,6 +75,21 @@ describe('CSF corpus', () => {
     }
   );
 
+  it.each(files)('transforms %s like the recorded outputs', async (file) => {
+    const code = readFileSync(join(inputs, file), 'utf8');
+    expect(await summarizeTransforms({ csfTools, format }, inputs, file, code)).toEqual(
+      transforms[file as keyof typeof transforms]
+    );
+  });
+
+  it.each(files)('documents the stories of %s with their authored source', (file) => {
+    const code = readFileSync(join(inputs, file), 'utf8');
+    const { originalSources } = transforms[file as keyof typeof transforms];
+    for (const source of Object.values(originalSources)) {
+      expect(code).toContain(source);
+    }
+  });
+
   it('indexes .ts files that Babel rejected', () => {
     expect(golden['edge-typescript.stories.ts']).toEqual({ error: true });
     const summary = summaryOf('edge-typescript.stories.ts');

From 9e4ec78d98740b32f33a578ba16d9ebfad9b699c Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 16 Oct 2026 18:32:06 +0200
Subject: [PATCH 136/326] docs(migration): correct the csf-tools replacements
 and the Flow note

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 MIGRATION.md | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index fa45371ae77e..009df2c027f2 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1319,10 +1319,9 @@ Storybook no longer bundles Babel or recast to read and write story and config f
 
 #### Behavior that changes for every project
 
-- **Flow syntax is no longer supported in story files.** Babel parsed `// @flow` files with its Flow plugin; OXC does not parse Flow, so such files fail to index with an error that names Flow. Convert them to TypeScript or plain JavaScript.
+- **Flow syntax is no longer supported in story files.** Babel parsed `// @flow` files with its Flow plugin; OXC does not parse Flow. A `// @flow` file whose syntax is also valid TypeScript still indexes, but Flow-only syntax such as variance (`+readOnly`) or type casts (`(value: Type)`) is a parse error, and the error names Flow. Convert such files to TypeScript or plain JavaScript.
 - `parameters.docs.source.originalSource` is now the story's source text exactly as written, where Babel reprinted it with its own formatting. "Show code" and `docs.source.transform` functions receive the authored text, with line endings normalized to `\n`.
 - Parse errors use OXC's wording, and end with ` in <file>` when the file name is known. Duplicate declarations and legacy octal literals are still rejected.
-- `export { Missing }` of a name the file never declares is no longer a parse error, because OXC's semantic pass does not report it; the file indexes and the error surfaces when the module runs.
 - A parse error in a module that `sb.mock()` automocks under webpack now fails that module's build, where Babel's error recovery used to mock whatever it could parse.
 
 #### Changes for tooling that imports Storybook's internal entry points
@@ -1331,14 +1330,14 @@ Storybook no longer bundles Babel or recast to read and write story and config f
 - The nodes exposed by `storybook/internal/csf-tools` are ESTree (OXC) nodes instead of Babel nodes, for example `Literal` instead of `StringLiteral` and `Property` instead of `ObjectProperty`/`ObjectMethod`. `CsfFile._ast` and the `NodePath` fields are removed; use `CsfFile._program` and `CsfFile._editor`. `ConfigFile._ast` is removed as well; use `ConfigFile._program`, edit through `ConfigFile._editorSource` and call `ConfigFile._commit()` to apply pending edits and parse the result again.
 - `CsfObject#get` returns an ESTree expression, and `set`/`transform` accept expressions from `get()` or `parseExpression(code)`. Use `printExpression(node)` to read an expression's source.
 - An `experimental_enrichCsf` function receives the new `CsfFile`. Add code with `csf._appendStatement(code)` instead of pushing Babel nodes onto `csf._ast`.
-- `babelParse` and `babelParseFile` are removed; use `loadCsf(code, options)` and `readCsf(fileName, options)`.
+- `babelParse` is removed; use `parseModule(code, fileName)` from `storybook/internal/csf-tools`, which returns the ESTree `program` and `comments`. `babelParseFile` is removed as well; read CSF with `loadCsf(code, options)` or `readCsf(fileName, options)`.
 - `getHeaderComments(statement)` is replaced by `headerComments(editor)`.
 - The story-shape helpers no longer take Babel paths: `jsDocTagsForPath` is `jsDocTagsForNode`, `metaObjectPath` is `metaObject`, `RenderFunctionPath` is `RenderFunction`, and `pathForNode` and `returnedExpressionPath` are removed in favor of `returnedExpression` and plain nodes.
-- The `getAbsolutePath` wrapper helpers in `storybook/internal/common` work on nodes: `getAbsolutePathWrapperAsCallExpression` is replaced by `getAbsolutePathCall`, and `wrapValueWithGetAbsolutePathWrapper` by `wrapValuesWithGetAbsolutePathWrapper`.
+- The `getAbsolutePath` wrapper helpers in `storybook/internal/common` produce source text instead of Babel nodes. `getAbsolutePathWrapperAsCallExpression(isTs, names)`, which returned the wrapper's function declaration, is replaced by `getAbsolutePathWrapperDeclaration(isTs, names)`, which returns the declaration's source for `ConfigFile#setBodyDeclaration`. `getAbsolutePathCall(config, value)` returns the source of a call to the config's wrapper. `wrapValueWithGetAbsolutePathWrapper(config, node)` is replaced by `wrapValuesWithGetAbsolutePathWrapper(config, nodes)`, which wraps every node in the array and commits the edits to `config`.
 - `new CsfFile(code, options)` and `new ConfigFile(code, fileName)` take source code instead of a Babel AST.
 - `formatCsf(csf, { sourceMaps, sourceFileName, inputSourceMap })` replaces the Babel generator options; `printCsf` and `printConfig` take no options and always print with `\n` line endings.
 - `ConfigFile#setBodyDeclaration(code)` takes the declaration's source text instead of a Babel node.
-- The Vitest config helpers (`canUpdateVitestConfigFile`, `getTargetConfigObject`, ...) moved from `storybook/internal/babel` to `storybook/internal/cli`.
+- The Vitest config helpers `canUpdateVitestConfigFile`, `getTargetConfigObject`, `getEffectiveMergeConfigCall`, `getConfigObjectFromMergeArg` and `resolveExpression` moved from `storybook/internal/babel` to `storybook/internal/cli`. `canUpdateVitestConfigFile` still takes the file's source; the others take an ESTree `Program`, such as `parseModule(code, fileName).program`, instead of a Babel `File`, and return ESTree nodes. `isDefineConfigLike` and `isImportedDefineConfigLikeIdentifier` are no longer exported. `unwrapTSExpression` is now `unwrapESTreeExpression` in `storybook/internal/csf-tools`, and also unwraps non-null assertions (`value!`).
 
 Babel itself is still used where it compiles your code, for example by `@storybook/nextjs` and the webpack Babel compiler addon.
 

From 04f64a828f366047060d309d955e85070e971033 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 16 Oct 2026 19:36:32 +0200
Subject: [PATCH 137/326] fix(csf-tools): keep a JSDoc header above the first
 import and insert after trailing comments

A JSDoc block above an import is a file header such as a license, not
the import's documentation, so removing or prepending an import leaves
it in place. setImport adds a sibling declaration after a comment that
trails the import on its line. The vitest setup reuses a target binding
that is written the same way as the template's, instead of renaming it.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../src/updateVitestFile.statements.test.ts   | 25 +++++++++++++
 code/addons/vitest/src/updateVitestFile.ts    | 35 ++++++++++---------
 code/core/src/csf-tools/ConfigFile.test.ts    |  5 +++
 code/core/src/csf-tools/ConfigFile.ts         |  6 +++-
 code/core/src/csf-tools/estree/editor.test.ts | 18 ++++++++++
 code/core/src/csf-tools/estree/editor.ts      | 27 +++++++++-----
 6 files changed, 90 insertions(+), 26 deletions(-)

diff --git a/code/addons/vitest/src/updateVitestFile.statements.test.ts b/code/addons/vitest/src/updateVitestFile.statements.test.ts
index 3c3eb23e2aa8..aa2c55dd4dda 100644
--- a/code/addons/vitest/src/updateVitestFile.statements.test.ts
+++ b/code/addons/vitest/src/updateVitestFile.statements.test.ts
@@ -185,6 +185,31 @@ describe('updateConfigFile statements', () => {
     expect(() => new SourceEditor(code)).not.toThrow();
   });
 
+  it.each([
+    [
+      'the same dirname declaration',
+      `import path from 'node:path';\nimport { fileURLToPath } from 'node:url';\nconst dirname =\n  typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));`,
+      /\bdirname =/g,
+    ],
+    ['a namespace import of path', `import * as path from 'path';`, /\bpath\b/g],
+  ])('reuses %s instead of renaming', async (_, existing, binding) => {
+    const target = new SourceEditor(dedent`
+      ${existing}
+      export default defineConfig({ test: {} });
+    `);
+    const realTemplate = await loadTemplate('vitest.config.4.template', {
+      CONFIG_DIR: '.storybook',
+    });
+
+    expect(updateConfigFile(realTemplate, target)).toBe(true);
+    const code = target.toString();
+    expect(code).not.toContain('storybookDirname');
+    expect(code).not.toContain('storybookPath');
+    expect(code.match(binding)!.length).toBeGreaterThan(0);
+    expect(code.match(/\bconst (storybook)?[dD]irname\b/g)).toHaveLength(1);
+    expect(() => new SourceEditor(code)).not.toThrow();
+  });
+
   it('renames an import the config binds to another module', async () => {
     const target = new SourceEditor(dedent`
       import path from './path-helpers';
diff --git a/code/addons/vitest/src/updateVitestFile.ts b/code/addons/vitest/src/updateVitestFile.ts
index 8727103a7ceb..c1a06747effc 100644
--- a/code/addons/vitest/src/updateVitestFile.ts
+++ b/code/addons/vitest/src/updateVitestFile.ts
@@ -300,21 +300,21 @@ const findWritableConfigObject = (
   );
 };
 
-// What an import binds, with `node:path` and `path` naming the same module.
-const importedFrom = (binding: Binding) => {
-  if (binding.kind !== 'import' || binding.declaration?.type !== 'ImportDeclaration') {
-    return undefined;
-  }
-  const specifier = binding.node as E.ImportDeclarationSpecifier;
-  const name =
-    specifier.type === 'ImportSpecifier'
-      ? specifier.imported.type === 'Literal'
-        ? specifier.imported.value
-        : specifier.imported.name
-      : specifier.type === 'ImportDefaultSpecifier'
-        ? 'default'
+// What a binding stands for, so the template reuses a target binding that is the same thing: an
+// import of the same export (`node:path` and `path` name the same module, and its default and
+// namespace imports the same object), or a declaration written the same way.
+const bindingIdentity = (editor: SourceEditor, binding: Binding) => {
+  if (binding.kind === 'import' && binding.declaration?.type === 'ImportDeclaration') {
+    const specifier = binding.node as E.ImportDeclarationSpecifier;
+    const name =
+      specifier.type === 'ImportSpecifier'
+        ? specifier.imported.type === 'Literal'
+          ? specifier.imported.value
+          : specifier.imported.name
         : '*';
-  return `${name} from ${binding.declaration.source.value.replace(/^node:/, '')}`;
+    return `${name} from ${binding.declaration.source.value.replace(/^node:/, '')}`;
+  }
+  return editor.code.slice(binding.node.start, binding.node.end).replace(/\s+/g, ' ');
 };
 
 const unusedName = (name: string, editors: SourceEditor[]) => {
@@ -351,10 +351,13 @@ const renameTakenBindings = (source: SourceEditor, target: SourceEditor) => {
   const call = findExportDefault(source.program)?.declaration as E.CallExpression;
   for (const binding of source.scopes.program.bindings.values()) {
     const existing = target.scopes.program.bindings.get(binding.name);
-    const imported = importedFrom(binding);
     // The template's own `defineConfig(...)` call is not merged.
     const merged = binding.references.some((reference) => reference !== call.callee);
-    if (existing && merged && (imported === undefined || imported !== importedFrom(existing))) {
+    if (
+      existing &&
+      merged &&
+      bindingIdentity(source, binding) !== bindingIdentity(target, existing)
+    ) {
       renameBinding(source, binding, unusedName(binding.name, [source, target]));
     }
   }
diff --git a/code/core/src/csf-tools/ConfigFile.test.ts b/code/core/src/csf-tools/ConfigFile.test.ts
index 6c0ad3c210f7..f97df1e1e464 100644
--- a/code/core/src/csf-tools/ConfigFile.test.ts
+++ b/code/core/src/csf-tools/ConfigFile.test.ts
@@ -1593,6 +1593,11 @@ describe('ConfigFile', () => {
         specifier: ['a'],
         output: `import * as ns from 'x';\nimport { a } from 'x';`,
       },
+      {
+        source: `import * as ns from 'x'; // why`,
+        specifier: ['a'],
+        output: `import * as ns from 'x'; // why\nimport { a } from 'x';`,
+      },
       {
         source: `import foo from 'x';`,
         specifier: 'bar',
diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index 342e19f63a9e..7fe4ff8fd047 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -40,6 +40,7 @@ import {
   removeFromList,
   removeStatement,
   setImportSpecifiers,
+  statementEnd,
 } from './estree/editor.ts';
 import { findVarInitialization } from './findVarInitialization.ts';
 
@@ -978,7 +979,10 @@ export class ConfigFile implements CsfObject {
       } else if (merged) {
         setImportSpecifiers(editor, importDeclaration, importDeclaration.specifiers, merged);
       } else {
-        editor.edits.appendLeft(importDeclaration.end, `\nimport ${clause} from ${source};`);
+        editor.edits.appendLeft(
+          statementEnd(editor, importDeclaration),
+          `\nimport ${clause} from ${source};`
+        );
       }
     };
 
diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index a89a0c9ff40d..53757a10885b 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -218,6 +218,14 @@ describe('removeStatement', () => {
     expect(editor.toString()).toBe(`/* license */\nconst b = 2;`);
   });
 
+  it('keeps a JSDoc header directly above a removed first import', () => {
+    const editor = new SourceEditor(
+      `/** Copyright ACME */\nimport a from 'a';\nimport b from 'b';`
+    );
+    removeStatement(editor, editor.program.body[0]);
+    expect(editor.toString()).toBe(`/** Copyright ACME */\nimport b from 'b';`);
+  });
+
   it('keeps a plain comment directly above the removed first statement', () => {
     const editor = new SourceEditor(`// plain comment\nconst a = 1;\nconst b = 2;`);
     removeStatement(editor, editor.program.body[0]);
@@ -283,6 +291,16 @@ describe('prependStatement', () => {
     );
   });
 
+  it('inserts below a JSDoc header directly above the first import', () => {
+    const editor = new SourceEditor(
+      `/**\n * Copyright ACME\n */\nimport a from 'a';\nconst b = 1;`
+    );
+    prependStatement(editor, `import c from 'c';`);
+    expect(editor.toString()).toBe(
+      `/**\n * Copyright ACME\n */\nimport a from 'a';\nimport c from 'c';\nconst b = 1;`
+    );
+  });
+
   it('inserts below a JSDoc pragma directly above the first statement', () => {
     const editor = new SourceEditor(`/** @license MIT */\nconst a = 1;`);
     prependStatement(editor, `import b from 'b';`);
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index b63b505d2550..0b74e3a5e23b 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -728,8 +728,9 @@ const isJSDoc = (comment: E.Comment) => comment.type === 'Block' && comment.valu
 
 /**
  * Comments before the file's first statement that form the file header, such as a license. The
- * JSDoc blocks and next-line directives such as `@ts-expect-error` directly above the statement
- * belong to it instead, as does everything from such a directive on, unless they are pragmas.
+ * JSDoc blocks (unless the statement is an import) and next-line directives such as
+ * `@ts-expect-error` directly above the statement belong to it instead, as does everything from
+ * such a directive on, unless they are pragmas.
  */
 export const headerComments = (editor: SourceEditor): E.Comment[] => {
   const { code } = editor;
@@ -743,10 +744,12 @@ export const headerComments = (editor: SourceEditor): E.Comment[] => {
     (comment) => comment.start >= from && comment.end <= first.start
   );
   const isDirective = (comment: E.Comment) => NEXT_LINE_DIRECTIVE.test(comment.value);
+  // JSDoc documents a declaration; above an import it is a file header such as a license.
+  const ownsJSDoc = first.type !== 'ImportDeclaration';
   let owned = leading.length;
   while (
     owned > 0 &&
-    (isJSDoc(leading[owned - 1]) || isDirective(leading[owned - 1])) &&
+    ((ownsJSDoc && isJSDoc(leading[owned - 1])) || isDirective(leading[owned - 1])) &&
     !/\n\s*\n/.test(code.slice(leading[owned - 1].end, leading[owned]?.start ?? first.start))
   ) {
     owned--;
@@ -819,11 +822,9 @@ export const leadingComments = (editor: SourceEditor, statement: Span): E.Commen
  * Remove a statement with the comments that lead it and the comment that trails it on its line,
  * and the line itself when nothing else shares it.
  */
-export const removeStatement = (editor: SourceEditor, statement: Span, atTop?: boolean) => {
+/** The end of a statement, past a comment that trails it on the same line. */
+export const statementEnd = (editor: SourceEditor, statement: Span) => {
   const { code } = editor;
-  const first = leadingComments(editor, statement)[0];
-  const start = (first ?? statement).start;
-  const lineStart = code.lastIndexOf('\n', start - 1) + 1;
   const lineEnd = code.indexOf('\n', statement.end);
   const trailing = editor.comments.find(
     (comment) =>
@@ -831,8 +832,16 @@ export const removeStatement = (editor: SourceEditor, statement: Span, atTop?: b
       (lineEnd === -1 || comment.start < lineEnd) &&
       !code.slice(statement.end, comment.start).trim()
   );
-  const end =
-    trailing && (lineEnd === -1 || trailing.end <= lineEnd) ? trailing.end : statement.end;
+  return trailing && (lineEnd === -1 || trailing.end <= lineEnd) ? trailing.end : statement.end;
+};
+
+export const removeStatement = (editor: SourceEditor, statement: Span, atTop?: boolean) => {
+  const { code } = editor;
+  const first = leadingComments(editor, statement)[0];
+  const start = (first ?? statement).start;
+  const lineStart = code.lastIndexOf('\n', start - 1) + 1;
+  const lineEnd = code.indexOf('\n', statement.end);
+  const end = statementEnd(editor, statement);
   const before = code.slice(lineStart, start);
   const after = code.slice(end, lineEnd === -1 ? code.length : lineEnd);
   if (before.trim() || after.trim()) {

From b30a54b75d8d35d6ee57be012cb2d1ea54e0c836 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Sat, 17 Oct 2026 16:57:46 +0200
Subject: [PATCH 138/326] refactor(addon-vitest): read the config directory
 from import.meta.dirname and drop binding renames

The template no longer declares a dirname variable, so the common
collision with a config that imports dirname disappears. Any other
name the merged code reads that the config binds to something else
now falls back to the manual setup before an edit is made, instead of
renaming bindings by guessing whether two declarations are the same;
that guess reused a user's dirname computed from another path module.
Vite's config loader defines import.meta.dirname, and Node 22 has it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 code/addons/vitest/src/postinstall.ts         |   2 +-
 .../src/updateVitestFile.config.4.test.ts     | 139 +++----------
 .../src/updateVitestFile.statements.test.ts   | 183 ++++++++++++------
 code/addons/vitest/src/updateVitestFile.ts    |  82 +++-----
 .../templates/vitest.config.4.template.ts     |   6 +-
 .../fixes/angular-to-angular-vite.test.ts     |   2 +-
 .../fixes/angular-to-angular-vite.ts          |   6 +-
 7 files changed, 182 insertions(+), 238 deletions(-)

diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index 8614e7e008f5..4d12825c383e 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -39,7 +39,7 @@ const STORYBOOK_TEST_PLUGIN_SOURCE = `${ADDON_NAME}/vitest-plugin`;
 
 /**
  * The Vitest config templates resolve the Storybook config dir against the
- * generated config file's own directory (`path.join(dirname, CONFIG_DIR)`).
+ * generated config file's own directory (`path.join(import.meta.dirname, CONFIG_DIR)`).
  * So CONFIG_DIR must be the path FROM that file's directory TO the config dir,
  * not the cwd-relative `--config-dir` value. Otherwise, in a monorepo where the
  * config file is created inside the project (e.g. `apps/x/vitest.config.ts`) but
diff --git a/code/addons/vitest/src/updateVitestFile.config.4.test.ts b/code/addons/vitest/src/updateVitestFile.config.4.test.ts
index 377460d4a861..68c1e511767a 100644
--- a/code/addons/vitest/src/updateVitestFile.config.4.test.ts
+++ b/code/addons/vitest/src/updateVitestFile.config.4.test.ts
@@ -59,11 +59,8 @@ describe('updateConfigFile', () => {
               import react from '@vitejs/plugin-react'
         
       + import path from 'node:path';
-      + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname =
-      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
         
         
@@ -83,7 +80,7 @@ describe('updateConfigFile', () => {
       +             plugins: [
       +               // The plugin will run tests for the stories defined in your Storybook config
       +               // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +               storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +               storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
       +             ],
       +             test: {
       +               name: 'storybook',
@@ -139,12 +136,9 @@ describe('updateConfigFile', () => {
               import react from '@vitejs/plugin-react'
         
       + import path from 'node:path';
-      + import { fileURLToPath } from 'node:url';
       + import { defineConfig } from 'vitest/config';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname =
-      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
         
         
@@ -164,7 +158,7 @@ describe('updateConfigFile', () => {
       +             plugins: [
       +               // The plugin will run tests for the stories defined in your Storybook config
       +               // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +               storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +               storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
       +             ],
       +             test: {
       +               name: 'storybook',
@@ -229,11 +223,8 @@ describe('updateConfigFile', () => {
               import { defineConfig } from 'vite';
         
       + import path from 'node:path';
-      + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname =
-      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
         
         
@@ -273,7 +264,7 @@ describe('updateConfigFile', () => {
       +                 plugins: [
       +                   // The plugin will run tests for the stories defined in your Storybook config
       +                   // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +                   storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                   storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
       +                 ],
       +                 test: {
       +                   name: 'storybook',
@@ -374,11 +365,8 @@ describe('updateConfigFile', () => {
               import react from '@vitejs/plugin-react'
         
       + import path from 'node:path';
-      + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname =
-      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
         
         
@@ -404,7 +392,7 @@ describe('updateConfigFile', () => {
       +               plugins: [
       +                 // The plugin will run tests for the stories defined in your Storybook config
       +                 // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +                 storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                 storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
       +               ],
       +               test: {
       +                 name: 'storybook',
@@ -456,11 +444,8 @@ b'],
               import { defineConfig } from 'vite'
         
       + import path from 'node:path';
-      + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname =
-      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
         
         
@@ -493,7 +478,7 @@ b'],
       +               plugins: [
       +                 // The plugin will run tests for the stories defined in your Storybook config
       +                 // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +                 storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                 storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
       +               ],
       +               test: {
       +                 name: 'storybook',
@@ -554,8 +539,6 @@ b'],
       + import path from 'node:path';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname =
-      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
         
         
@@ -578,7 +561,7 @@ b'],
       +               plugins: [
       +                 // The plugin will run tests for the stories defined in your Storybook config
       +                 // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +                 storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                 storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
       +               ],
       +               test: {
       +                 name: 'storybook',
@@ -638,11 +621,8 @@ b'],
               import react from '@vitejs/plugin-react'
         
       + import path from 'node:path';
-      + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname =
-      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
         
         
@@ -662,7 +642,7 @@ b'],
       +             plugins: [
       +               // The plugin will run tests for the stories defined in your Storybook config
       +               // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +               storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +               storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
       +             ],
       +             test: {
       +               name: 'storybook',
@@ -718,11 +698,8 @@ b'],
               import react from '@vitejs/plugin-react'
         
       + import path from 'node:path';
-      + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname =
-      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
         
         
@@ -748,7 +725,7 @@ b'],
       +               plugins: [
       +                 // The plugin will run tests for the stories defined in your Storybook config
       +                 // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +                 storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                 storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
       +               ],
       +               test: {
       +                 name: 'storybook',
@@ -802,11 +779,8 @@ b'],
               import react from '@vitejs/plugin-react'
         
       + import path from 'node:path';
-      + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname =
-      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
         
         
@@ -824,7 +798,7 @@ b'],
       +               plugins: [
       +                 // The plugin will run tests for the stories defined in your Storybook config
       +                 // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +                 storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                 storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
       +               ],
       +               test: {
       +                 name: 'storybook',
@@ -885,11 +859,8 @@ b'],
               import viteConfig from './vite.config'
         
       + import path from 'node:path';
-      + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname =
-      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
         
         
@@ -918,7 +889,7 @@ b'],
       +                 plugins: [
       +                   // The plugin will run tests for the stories defined in your Storybook config
       +                   // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +                   storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                   storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
       +                 ],
       +                 test: {
       +                   name: 'storybook',
@@ -975,12 +946,9 @@ b'],
               import viteConfig from './vite.config'
         
       + import path from 'node:path';
-      + import { fileURLToPath } from 'node:url';
       + import { defineConfig } from 'vitest/config';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname =
-      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
         
         
@@ -1007,7 +975,7 @@ b'],
       +                 plugins: [
       +                   // The plugin will run tests for the stories defined in your Storybook config
       +                   // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +                   storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                   storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
       +                 ],
       +                 test: {
       +                   name: 'storybook',
@@ -1064,11 +1032,8 @@ b'],
               import viteConfig from './vite.config'
         
       + import path from 'node:path';
-      + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname =
-      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
         
         
@@ -1087,7 +1052,7 @@ b'],
       +                 plugins: [
       +                   // The plugin will run tests for the stories defined in your Storybook config
       +                   // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +                   storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                   storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
       +                 ],
       +                 test: {
       +                   name: 'storybook',
@@ -1147,11 +1112,8 @@ b'],
               import viteConfig from './vite.config'
         
       + import path from 'node:path';
-      + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname =
-      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
         
         
@@ -1178,7 +1140,7 @@ b'],
       +                 plugins: [
       +                   // The plugin will run tests for the stories defined in your Storybook config
       +                   // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +                   storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                   storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
       +                 ],
       +                 test: {
       +                   name: 'storybook',
@@ -1245,11 +1207,8 @@ b'],
               import viteConfig from './vite.config'
         
       + import path from 'node:path';
-      + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname =
-      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
         
         
@@ -1270,7 +1229,7 @@ b'],
       +                 plugins: [
       +                   // The plugin will run tests for the stories defined in your Storybook config
       +                   // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +                   storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                   storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
       +                 ],
       +                 test: {
       +                   name: 'storybook',
@@ -1336,11 +1295,8 @@ b'],
               import viteConfig from './vite.config'
         
       + import path from 'node:path';
-      + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname =
-      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
         
         
@@ -1377,7 +1333,7 @@ b'],
       +                 plugins: [
       +                   // The plugin will run tests for the stories defined in your Storybook config
       +                   // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +                   storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                   storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
       +                 ],
       +                 test: {
       +                   name: 'storybook',
@@ -1443,11 +1399,8 @@ b'],
               import viteConfig from './vite.config'
         
       + import path from 'node:path';
-      + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname =
-      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
         
         
@@ -1484,7 +1437,7 @@ b'],
       +                 plugins: [
       +                   // The plugin will run tests for the stories defined in your Storybook config
       +                   // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +                   storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                   storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
       +                 ],
       +                 test: {
       +                   name: 'storybook',
@@ -1536,11 +1489,8 @@ b'],
               import viteConfig from './vite.config'
         
       + import path from 'node:path';
-      + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname =
-      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
         
         
@@ -1568,7 +1518,7 @@ b'],
       +               plugins: [
       +                 // The plugin will run tests for the stories defined in your Storybook config
       +                 // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +                 storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                 storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
       +               ],
       +               test: {
       +                 name: 'storybook',
@@ -1623,11 +1573,8 @@ b'],
               import type { ViteUserConfig } from 'vitest/config'
         
       + import path from 'node:path';
-      + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname =
-      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
         
         
@@ -1656,7 +1603,7 @@ b'],
       +                 plugins: [
       +                   // The plugin will run tests for the stories defined in your Storybook config
       +                   // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +                   storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                   storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
       +                 ],
       +                 test: {
       +                   name: 'storybook',
@@ -1710,12 +1657,9 @@ b'],
               import type { ViteUserConfig } from 'vitest/config'
         
       + import path from 'node:path';
-      + import { fileURLToPath } from 'node:url';
       + import { defineConfig } from 'vitest/config';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname =
-      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
         
         
@@ -1743,7 +1687,7 @@ b'],
       +               plugins: [
       +                 // The plugin will run tests for the stories defined in your Storybook config
       +                 // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +                 storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                 storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
       +               ],
       +               test: {
       +                 name: 'storybook',
@@ -1794,12 +1738,9 @@ b'],
               import viteConfig from './vite.config'
         
       + import path from 'node:path';
-      + import { fileURLToPath } from 'node:url';
       + import { defineConfig } from 'vitest/config';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname =
-      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
         
         
@@ -1830,7 +1771,7 @@ b'],
       +             plugins: [
       +               // The plugin will run tests for the stories defined in your Storybook config
       +               // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +               storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +               storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
       +             ],
       +             test: {
       +               name: 'storybook',
@@ -1885,11 +1826,8 @@ b'],
               import viteConfig from './vite.config'
         
       + import path from 'node:path';
-      + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname =
-      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
         
         
@@ -1919,7 +1857,7 @@ b'],
       +                 plugins: [
       +                   // The plugin will run tests for the stories defined in your Storybook config
       +                   // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +                   storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                   storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
       +                 ],
       +                 test: {
       +                   name: 'storybook',
@@ -1970,12 +1908,9 @@ b'],
               import { defineProject } from 'vitest/config'
         
       + import path from 'node:path';
-      + import { fileURLToPath } from 'node:url';
       + import { defineConfig } from 'vitest/config';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname =
-      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
         
         
@@ -2003,7 +1938,7 @@ b'],
       +               plugins: [
       +                 // The plugin will run tests for the stories defined in your Storybook config
       +                 // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +                 storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                 storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
       +               ],
       +               test: {
       +                 name: 'storybook',
@@ -2059,11 +1994,8 @@ b'],
                 import viteConfig from './vite.config'
         
       + import path from 'node:path';
-      + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname =
-      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
       + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
@@ -2091,7 +2023,7 @@ b'],
       +                   plugins: [
       +                     // The plugin will run tests for the stories defined in your Storybook config
       +                     // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +                     storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                     storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
       +                   ],
       +                   test: {
       +                     name: 'storybook',
@@ -2146,12 +2078,9 @@ b'],
                 import viteConfig from './vite.config'
         
       + import path from 'node:path';
-      + import { fileURLToPath } from 'node:url';
       + import { defineConfig } from 'vitest/config';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname =
-      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
       + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
@@ -2177,7 +2106,7 @@ b'],
       +                 plugins: [
       +                   // The plugin will run tests for the stories defined in your Storybook config
       +                   // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +                   storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                   storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
       +                 ],
       +                 test: {
       +                   name: 'storybook',
@@ -2232,12 +2161,9 @@ b'],
               import viteConfig from './vite.config'
         
       + import path from 'node:path';
-      + import { fileURLToPath } from 'node:url';
       + import { defineConfig } from 'vitest/config';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname =
-      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
         
         
@@ -2265,7 +2191,7 @@ b'],
       +               plugins: [
       +                 // The plugin will run tests for the stories defined in your Storybook config
       +                 // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +                 storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                 storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
       +               ],
       +               test: {
       +                 name: 'storybook',
@@ -2348,20 +2274,12 @@ b'],
               import { defineConfig as defineVitestConfig } from "vitest/config";
         
       + import path from 'node:path';
-      + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
-      + const dirname =
-      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
         
-        
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-      + 
-      + 
               // https://vitejs.dev/config/
               const viteConfig = defineConfig({
                 plugins: [tsconfigPaths(), react()],
-                optimizeDeps: {
       ...
         
               const vitestConfig = defineVitestConfig({
@@ -2405,7 +2323,7 @@ b'],
       +               plugins: [
       +                 // The plugin will run tests for the stories defined in your Storybook config
       +                 // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +                 storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                 storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
       +               ],
       +               test: {
       +                 name: 'storybook',
@@ -2469,11 +2387,8 @@ b'],
               import viteConfig from './vite.config'
         
       + import path from 'node:path';
-      + import { fileURLToPath } from 'node:url';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + const dirname =
-      +   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
       + 
         
         
@@ -2514,7 +2429,7 @@ b'],
       +                 plugins: [
       +                   // The plugin will run tests for the stories defined in your Storybook config
       +                   // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +                   storybookTest({ configDir: path.join(dirname, '.storybook') }),
+      +                   storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
       +                 ],
       +                 test: {
       +                   name: 'storybook',
diff --git a/code/addons/vitest/src/updateVitestFile.statements.test.ts b/code/addons/vitest/src/updateVitestFile.statements.test.ts
index aa2c55dd4dda..a2372b17eec2 100644
--- a/code/addons/vitest/src/updateVitestFile.statements.test.ts
+++ b/code/addons/vitest/src/updateVitestFile.statements.test.ts
@@ -19,6 +19,8 @@ const template = dedent`
   });
 `;
 
+const realTemplate = () => loadTemplate('vitest.config.4.template', { CONFIG_DIR: '.storybook' });
+
 const update = (code: string) => {
   const target = new SourceEditor(code);
   expect(updateConfigFile(template, target)).toBe(true);
@@ -142,88 +144,159 @@ describe('updateConfigFile statements', () => {
     expect(code.replaceAll('\r\n', '')).not.toContain('\n');
   });
 
-  it('does not declare a name the config already declares as a function or class', () => {
-    const target = new SourceEditor(dedent`
-      function fileURLToPath() {}
-      class dirname {}
-      export default defineConfig({ test: {} });
-    `);
-
-    expect(updateConfigFile(template, target)).toBe(true);
-    const code = target.toString();
-    expect(code).not.toContain('import { fileURLToPath }');
-    expect(code).not.toContain('import { dirname }');
-    expect(code).not.toContain('const dirname');
-    expect(() => new SourceEditor(code)).not.toThrow();
-  });
-
   it.each([
     ['imports', `import { dirname, resolve } from 'node:path';`],
     ['requires', `const { dirname } = require('path');`],
-  ])('renames the template dirname when the config %s a dirname function', async (_, binding) => {
+  ])('keeps a dirname function the config %s', async (_, binding) => {
     const target = new SourceEditor(dedent`
       ${binding}
-      import { fileURLToPath } from 'url';
       export default defineConfig({ test: {} });
     `);
-    const realTemplate = await loadTemplate('vitest.config.4.template', {
-      CONFIG_DIR: '.storybook',
-    });
 
-    expect(updateConfigFile(realTemplate, target)).toBe(true);
+    expect(updateConfigFile(await realTemplate(), target)).toBe(true);
     const code = target.toString();
     expect(code).toContain(binding);
+    expect(code).toContain("import path from 'node:path';");
     expect(code).toContain(
-      'const storybookDirname =\n' +
-        "  typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));"
-    );
-    expect(code).toContain(
-      "storybookTest({ configDir: path.join(storybookDirname, '.storybook') })"
+      "storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') })"
     );
-    expect(code).not.toContain("import { fileURLToPath } from 'node:url'");
-    expect(code.match(/(?<!\.)\bdirname\b/g)).toHaveLength(1);
     expect(() => new SourceEditor(code)).not.toThrow();
   });
 
-  it.each([
-    [
-      'the same dirname declaration',
-      `import path from 'node:path';\nimport { fileURLToPath } from 'node:url';\nconst dirname =\n  typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));`,
-      /\bdirname =/g,
-    ],
-    ['a namespace import of path', `import * as path from 'path';`, /\bpath\b/g],
-  ])('reuses %s instead of renaming', async (_, existing, binding) => {
+  it('reuses a namespace import of path', async () => {
     const target = new SourceEditor(dedent`
-      ${existing}
+      import * as path from 'path';
       export default defineConfig({ test: {} });
     `);
-    const realTemplate = await loadTemplate('vitest.config.4.template', {
-      CONFIG_DIR: '.storybook',
-    });
 
-    expect(updateConfigFile(realTemplate, target)).toBe(true);
+    expect(updateConfigFile(await realTemplate(), target)).toBe(true);
+    const code = target.toString();
+    expect(code.match(/^import .* from '(node:)?path';$/gm)).toEqual([
+      "import * as path from 'path';",
+    ]);
+    expect(code).toContain("path.join(import.meta.dirname, '.storybook')");
+  });
+
+  it('adds the path import next to named imports from node:path', async () => {
+    const target = new SourceEditor(dedent`
+      import { join } from 'node:path';
+      export default defineConfig({ test: { setupFiles: [join('src', 'setup.ts')] } });
+    `);
+
+    expect(updateConfigFile(await realTemplate(), target)).toBe(true);
     const code = target.toString();
-    expect(code).not.toContain('storybookDirname');
-    expect(code).not.toContain('storybookPath');
-    expect(code.match(binding)!.length).toBeGreaterThan(0);
-    expect(code.match(/\bconst (storybook)?[dD]irname\b/g)).toHaveLength(1);
+    expect(code).toContain("import { join } from 'node:path';\nimport path from 'node:path';");
+    expect(code).toContain("setupFiles: [join('src', 'setup.ts')]");
     expect(() => new SourceEditor(code)).not.toThrow();
   });
 
-  it('renames an import the config binds to another module', async () => {
+  it('does not import a template name the config declares and the merge does not read', async () => {
     const target = new SourceEditor(dedent`
-      import path from './path-helpers';
+      function defineConfig(config) { return config; }
       export default defineConfig({ test: {} });
     `);
-    const realTemplate = await loadTemplate('vitest.config.4.template', {
-      CONFIG_DIR: '.storybook',
-    });
 
-    expect(updateConfigFile(realTemplate, target)).toBe(true);
+    expect(updateConfigFile(await realTemplate(), target)).toBe(true);
+    expect(target.toString()).not.toContain('import { defineConfig }');
+  });
+
+  it.each([
+    ['imports path from another module', `import path from './custom-path';`],
+    ['requires path', `const path = require('path');`],
+    ['declares path as a class', `class path {}`],
+    ['imports playwright as a default', `import playwright from '@vitest/browser-playwright';`],
+  ])('leaves a config that %s unchanged', async (_, binding) => {
+    const code = dedent`
+      ${binding}
+      export default defineConfig({ test: {} });
+    `;
+    const target = new SourceEditor(code);
+
+    expect(updateConfigFile(await realTemplate(), target)).toBe(false);
+    expect(target.toString()).toBe(code);
+  });
+
+  it('leaves a config whose function parameter shadows a template import unchanged', async () => {
+    const code = dedent`
+      import path from 'node:path';
+      export default defineConfig((path) => ({ test: {} }));
+    `;
+    const target = new SourceEditor(code);
+
+    expect(updateConfigFile(await realTemplate(), target)).toBe(false);
+    expect(target.toString()).toBe(code);
+  });
+
+  it('leaves a CommonJS config unchanged', async () => {
+    const code = dedent`
+      const { defineConfig } = require('vite');
+      module.exports = defineConfig({ test: {} });
+    `;
+    const target = new SourceEditor(code, 'vite.config.cjs');
+
+    expect(updateConfigFile(await realTemplate(), target)).toBe(false);
+    expect(target.toString()).toBe(code);
+  });
+
+  it('merges an ESM config that already imports path into valid code', async () => {
+    const target = new SourceEditor(
+      dedent`
+        import path from 'node:path';
+        import { defineConfig } from 'vite';
+        import react from '@vitejs/plugin-react';
+
+        export default defineConfig({
+          plugins: [react()],
+          resolve: { alias: { '@': path.resolve(import.meta.dirname, 'src') } },
+          test: { environment: 'jsdom' },
+        });
+      `,
+      'vite.config.mts'
+    );
+
+    expect(updateConfigFile(await realTemplate(), target)).toBe(true);
     const code = target.toString();
-    expect(code).toContain("import storybookPath from 'node:path';");
-    expect(code).toContain('storybookPath.dirname(fileURLToPath(import.meta.url))');
-    expect(code).toContain('storybookPath.join(dirname, ');
-    expect(() => new SourceEditor(code)).not.toThrow();
+    expect(() => new SourceEditor(code, 'vite.config.mts')).not.toThrow();
+    expect(code).toMatchInlineSnapshot(`
+      "import path from 'node:path';
+      import { defineConfig } from 'vite';
+      import react from '@vitejs/plugin-react';
+      import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+      import { playwright } from '@vitest/browser-playwright';
+
+      // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+
+      export default defineConfig({
+        plugins: [react()],
+        resolve: { alias: { '@': path.resolve(import.meta.dirname, 'src') } },
+        test: {
+          projects: [
+            {
+              extends: true,
+              test: {
+                environment: 'jsdom',
+              },
+            },
+            {
+              extends: true,
+              plugins: [
+                // The plugin will run tests for the stories defined in your Storybook config
+                // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+                storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
+              ],
+              test: {
+                name: 'storybook',
+                browser: {
+                  enabled: true,
+                  headless: true,
+                  provider: playwright({}),
+                  instances: [{ browser: 'chromium' }],
+                },
+              },
+            },
+          ],
+        },
+      });"
+    `);
   });
 });
diff --git a/code/addons/vitest/src/updateVitestFile.ts b/code/addons/vitest/src/updateVitestFile.ts
index c1a06747effc..651c82c27ba5 100644
--- a/code/addons/vitest/src/updateVitestFile.ts
+++ b/code/addons/vitest/src/updateVitestFile.ts
@@ -300,68 +300,33 @@ const findWritableConfigObject = (
   );
 };
 
-// What a binding stands for, so the template reuses a target binding that is the same thing: an
-// import of the same export (`node:path` and `path` name the same module, and its default and
-// namespace imports the same object), or a declaration written the same way.
-const bindingIdentity = (editor: SourceEditor, binding: Binding) => {
-  if (binding.kind === 'import' && binding.declaration?.type === 'ImportDeclaration') {
-    const specifier = binding.node as E.ImportDeclarationSpecifier;
-    const name =
-      specifier.type === 'ImportSpecifier'
-        ? specifier.imported.type === 'Literal'
-          ? specifier.imported.value
-          : specifier.imported.name
-        : '*';
-    return `${name} from ${binding.declaration.source.value.replace(/^node:/, '')}`;
+// The export an import binding reads: `node:path` and `path` are one module, and its default and
+// namespace imports the same object.
+const importedExport = (binding: Binding) => {
+  if (binding.kind !== 'import' || binding.declaration?.type !== 'ImportDeclaration') {
+    return undefined;
   }
-  return editor.code.slice(binding.node.start, binding.node.end).replace(/\s+/g, ' ');
+  const specifier = binding.node as E.ImportDeclarationSpecifier;
+  const name =
+    specifier.type === 'ImportSpecifier'
+      ? specifier.imported.type === 'Literal'
+        ? specifier.imported.value
+        : specifier.imported.name
+      : '*';
+  return `${name} from ${binding.declaration.source.value.replace(/^node:/, '')}`;
 };
 
-const unusedName = (name: string, editors: SourceEditor[]) => {
-  const base = `storybook${name[0].toUpperCase()}${name.slice(1)}`;
-  let candidate = base;
-  for (let index = 2; editors.some((editor) => editor.scopes.names.has(candidate)); index++) {
-    candidate = `${base}${index}`;
-  }
-  return candidate;
-};
-
-const renameBinding = (editor: SourceEditor, binding: Binding, name: string) => {
-  const { identifier, node } = binding;
-  if (node.type === 'ImportSpecifier' && node.imported.start === identifier.start) {
-    // `import { x }` becomes `import { x as name }`.
-    editor.edits.appendLeft(identifier.end, ` as ${name}`);
-  } else {
-    editor.edits.overwrite(identifier.start, identifier.end, name);
-  }
-  for (const reference of binding.references) {
-    const parent = editor.parentOf(reference);
-    if (parent?.type === 'Property' && parent.shorthand) {
-      // `{ x }` becomes `{ x: name }`.
-      editor.edits.appendLeft(reference.end, `: ${name}`);
-    } else {
-      editor.edits.overwrite(reference.start, reference.end, name);
-    }
-  }
-};
-
-// Rename the template bindings the merged code reads that the target binds to something else,
-// such as the template's `dirname` in a config that imports `dirname` from `node:path`.
-const renameTakenBindings = (source: SourceEditor, target: SourceEditor) => {
+// Whether the target binds a name the merged template code reads to anything but the same import.
+const hasConflictingBinding = (source: SourceEditor, target: SourceEditor, at: E.Node) => {
+  const scope = target.scopes.scopeOf(at);
+  // The template's own `defineConfig(...)` call is not merged.
   const call = findExportDefault(source.program)?.declaration as E.CallExpression;
-  for (const binding of source.scopes.program.bindings.values()) {
-    const existing = target.scopes.program.bindings.get(binding.name);
-    // The template's own `defineConfig(...)` call is not merged.
+  return [...source.scopes.program.bindings.values()].some((binding) => {
+    const existing = scope.lookup(binding.name);
     const merged = binding.references.some((reference) => reference !== call.callee);
-    if (
-      existing &&
-      merged &&
-      bindingIdentity(source, binding) !== bindingIdentity(target, existing)
-    ) {
-      renameBinding(source, binding, unusedName(binding.name, [source, target]));
-    }
-  }
-  source.commit();
+    const imported = importedExport(binding);
+    return merged && existing && (!imported || importedExport(existing) !== imported);
+  });
 };
 
 // Template imports and variables the target lacks, each with the comments that follow it.
@@ -429,11 +394,10 @@ export const updateConfigFile = (sourceCode: string, target: SourceEditor): bool
   };
   const exportDefault = findExportDefault(target.program);
   const targetConfig = exportDefault && findWritableConfigObject(target.program, exportDefault);
-  if (!templateConfig() || !targetConfig) {
+  if (!templateConfig() || !targetConfig || hasConflictingBinding(source, target, targetConfig)) {
     return false;
   }
 
-  renameTakenBindings(source, target);
   const statements = missingStatements(source, target);
   if (statements.length > 0) {
     insertStatements(target, statements.join('\n'));
diff --git a/code/addons/vitest/templates/vitest.config.4.template.ts b/code/addons/vitest/templates/vitest.config.4.template.ts
index 6448c6e98266..18f674855512 100644
--- a/code/addons/vitest/templates/vitest.config.4.template.ts
+++ b/code/addons/vitest/templates/vitest.config.4.template.ts
@@ -1,5 +1,4 @@
 import path from 'node:path';
-import { fileURLToPath } from 'node:url';
 
 import { defineConfig } from 'vitest/config';
 
@@ -7,9 +6,6 @@ import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
 
 import { playwright } from '@vitest/browser-playwright';
 
-const dirname =
-  typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
-
 // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
 export default defineConfig({
   test: {
@@ -19,7 +15,7 @@ export default defineConfig({
         plugins: [
           // The plugin will run tests for the stories defined in your Storybook config
           // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-          storybookTest({ configDir: path.join(dirname, 'CONFIG_DIR') }),
+          storybookTest({ configDir: path.join(import.meta.dirname, 'CONFIG_DIR') }),
         ],
         test: {
           name: 'storybook',
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/angular-to-angular-vite.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/angular-to-angular-vite.test.ts
index 322d408b7221..26e252456eac 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/angular-to-angular-vite.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/angular-to-angular-vite.test.ts
@@ -885,7 +885,7 @@ export default { framework: { name: '${ANGULAR_VITE_PACKAGE}', options: {} } };`
       expect(written.indexOf('storybookAngularVitest({})')).toBeLessThan(
         written.indexOf('storybookTest(')
       );
-      expect(written).toContain("path.join(dirname, '.storybook')");
+      expect(written).toContain("path.join(import.meta.dirname, '.storybook')");
     });
 
     it('does not create a vitest.config.ts when one already exists', async () => {
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/angular-to-angular-vite.ts b/code/lib/cli-storybook/src/automigrate/fixes/angular-to-angular-vite.ts
index 3d31c70264ba..bc2abd052e29 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/angular-to-angular-vite.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/angular-to-angular-vite.ts
@@ -85,7 +85,6 @@ const VITE_CONFIG_FILES = ['vite.config', 'vitest.config'].flatMap((basename) =>
 const buildAngularVitestConfig = (
   configDirRelative: string
 ): string => `import path from 'node:path';
-import { fileURLToPath } from 'node:url';
 
 import { defineConfig } from 'vitest/config';
 
@@ -94,9 +93,6 @@ import { storybookAngularVitest } from '@storybook/angular-vite/vitest';
 
 import { playwright } from '@vitest/browser-playwright';
 
-const dirname =
-  typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
-
 // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
 export default defineConfig({
   test: {
@@ -108,7 +104,7 @@ export default defineConfig({
           storybookAngularVitest({}),
           // The plugin will run tests for the stories defined in your Storybook config
           // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-          storybookTest({ configDir: path.join(dirname, '${configDirRelative}') }),
+          storybookTest({ configDir: path.join(import.meta.dirname, '${configDirRelative}') }),
         ],
         test: {
           name: 'storybook',

From e7470653926e31aba915e7c1a7e2c84d8273cc72 Mon Sep 17 00:00:00 2001
From: Samran Asif <samranwebdev2000@gmail.com>
Date: Sat, 17 Oct 2026 08:33:47 -0700
Subject: [PATCH 139/326] test(docs): rewrite Source tests using renderHook and
 polish sourceKind selection (#36061)

Signed-off-by: Samran Asif <samranwebdev2000@gmail.com>
---
 .../docs/src/blocks/blocks/Source.test.tsx    | 355 +++++++++++++++---
 code/addons/docs/src/blocks/blocks/Source.tsx |  22 +-
 .../modules/preview-web/emitTransformCode.ts  |   1 +
 3 files changed, 320 insertions(+), 58 deletions(-)

diff --git a/code/addons/docs/src/blocks/blocks/Source.test.tsx b/code/addons/docs/src/blocks/blocks/Source.test.tsx
index 897c868ca625..6591f9516774 100644
--- a/code/addons/docs/src/blocks/blocks/Source.test.tsx
+++ b/code/addons/docs/src/blocks/blocks/Source.test.tsx
@@ -1,78 +1,325 @@
-import { describe, expect, it, vi } from 'vitest';
+// @vitest-environment happy-dom
+import { renderHook } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
 import { SourceType } from 'storybook/internal/docs-tools';
-import { useCode } from './Source.tsx';
+import type { PreparedStory } from 'storybook/internal/types';
 
-describe('useCode', () => {
-  it('does not apply sourceParameters.transform twice when snippet is already provided (issue #35889)', () => {
-    const transform = vi.fn((code: string) => '/*transformed*/ ' + code);
+import type { DocsContextProps } from './DocsContext';
+import type { SourceProps } from './Source';
+import { useSourceProps } from './Source';
+import type { SourceContextProps } from './SourceContainer';
+import { UNKNOWN_ARGS_HASH } from './SourceContainer';
 
-    const result = useCode({
-      snippet: '/*transformed*/ <Button />', // already transformed by emitTransformCode
-      serviceSnippet: '',
-      storyContext: {
-        parameters: {
-          __isArgsStory: true,
-          docs: {
-            source: {
-              type: SourceType.DYNAMIC,
-              transform,
-            },
+type ReducedStoryContext = ReturnType<DocsContextProps['getStoryContext']>;
+
+const createMockDocsContext = (
+  story: PreparedStory,
+  storyContext: ReducedStoryContext
+): DocsContextProps =>
+  ({
+    storyById: () => story,
+    getStoryContext: () => storyContext,
+  }) as unknown as DocsContextProps;
+
+describe('useSourceProps — source transform handling (issue #35889)', () => {
+  it('does not apply parameter transform twice when snippet arrives on later render for auto args story', () => {
+    const storyContext: ReducedStoryContext = {
+      id: 'story--primary',
+      parameters: {
+        __isArgsStory: true,
+        docs: {
+          source: {
+            type: SourceType.AUTO,
+            originalSource: '<Button />',
+            transform: (code: string) => `T:${code}`,
+          },
+        },
+      },
+      args: {},
+      initialArgs: {},
+      unmappedArgs: {},
+    } as unknown as ReducedStoryContext;
+    const story: PreparedStory = {
+      id: 'story--primary',
+      parameters: storyContext.parameters,
+    } as unknown as PreparedStory;
+    const docsContext = createMockDocsContext(story, storyContext);
+
+    const { result, rerender } = renderHook(
+      ({ sourceContext, serviceSnippet, props }) =>
+        useSourceProps(props, docsContext, sourceContext, serviceSnippet),
+      {
+        initialProps: {
+          sourceContext: { sources: {} } as SourceContextProps,
+          serviceSnippet: '',
+          props: {} as SourceProps,
+        },
+      }
+    );
+
+    // Initial render before snippet arrives falls back to originalSource transformed
+    expect(result.current.code).toBe('T:<Button />');
+
+    // Snippet arrives after initial render (already transformed by emitTransformCode)
+    rerender({
+      sourceContext: {
+        sources: {
+          'story--primary': {
+            [UNKNOWN_ARGS_HASH]: { code: 'T:<Button />' },
           },
         },
-      } as any,
-      typeFromProps: SourceType.DYNAMIC,
+      },
+      serviceSnippet: '',
+      props: {},
     });
 
-    expect(transform).not.toHaveBeenCalled();
-    expect(result).toBe('/*transformed*/ <Button />');
+    // Should not apply transform a second time (would be T:T:<Button />)
+    expect(result.current.code).toBe('T:<Button />');
   });
 
-  it('applies transformFromProps if explicitly provided on props', () => {
-    const propTransform = vi.fn((code: string) => '/*prop*/ ' + code);
+  it('does not apply parameter transform twice when snippet arrives on later render for dynamic story', () => {
+    const storyContext: ReducedStoryContext = {
+      id: 'story--primary',
+      parameters: {
+        __isArgsStory: true,
+        docs: {
+          source: {
+            type: SourceType.DYNAMIC,
+            originalSource: '<Button />',
+            transform: (code: string) => `T:${code}`,
+          },
+        },
+      },
+      args: {},
+      initialArgs: {},
+      unmappedArgs: {},
+    } as unknown as ReducedStoryContext;
+    const story: PreparedStory = {
+      id: 'story--primary',
+      parameters: storyContext.parameters,
+    } as unknown as PreparedStory;
+    const docsContext = createMockDocsContext(story, storyContext);
+
+    const { result, rerender } = renderHook(
+      ({ sourceContext, serviceSnippet, props }) =>
+        useSourceProps(props, docsContext, sourceContext, serviceSnippet),
+      {
+        initialProps: {
+          sourceContext: { sources: {} } as SourceContextProps,
+          serviceSnippet: '',
+          props: {} as SourceProps,
+        },
+      }
+    );
+
+    expect(result.current.code).toBe('');
 
-    const result = useCode({
-      snippet: '<Button />',
+    // Snippet arrives after initial render
+    rerender({
+      sourceContext: {
+        sources: {
+          'story--primary': {
+            [UNKNOWN_ARGS_HASH]: { code: 'T:<Button />' },
+          },
+        },
+      },
       serviceSnippet: '',
-      storyContext: {
-        parameters: {
-          __isArgsStory: true,
-          docs: {
-            source: {
-              type: SourceType.DYNAMIC,
+      props: {},
+    });
+
+    expect(result.current.code).toBe('T:<Button />');
+  });
+
+  it('applies transform when raw service snippet arrives even if emitted snippet is present', () => {
+    const storyContext: ReducedStoryContext = {
+      id: 'story--primary',
+      parameters: {
+        __isArgsStory: true,
+        docs: {
+          source: {
+            type: SourceType.AUTO,
+            originalSource: '<Button />',
+            transform: (code: string) => `T:${code}`,
+          },
+        },
+      },
+      args: {},
+      initialArgs: {},
+      unmappedArgs: {},
+    } as unknown as ReducedStoryContext;
+    const story: PreparedStory = {
+      id: 'story--primary',
+      parameters: storyContext.parameters,
+    } as unknown as PreparedStory;
+    const docsContext = createMockDocsContext(story, storyContext);
+
+    const { result, rerender } = renderHook(
+      ({ sourceContext, serviceSnippet, props }) =>
+        useSourceProps(props, docsContext, sourceContext, serviceSnippet),
+      {
+        initialProps: {
+          sourceContext: {
+            sources: {
+              'story--primary': {
+                [UNKNOWN_ARGS_HASH]: { code: 'T:<Button />' },
+              },
             },
+          } as SourceContextProps,
+          serviceSnippet: '',
+          props: {} as SourceProps,
+        },
+      }
+    );
+
+    expect(result.current.code).toBe('T:<Button />');
+
+    // Raw service snippet arrives: not pre-transformed, so transform must be applied
+    rerender({
+      sourceContext: {
+        sources: {
+          'story--primary': {
+            [UNKNOWN_ARGS_HASH]: { code: 'T:<Button />' },
           },
         },
-      } as any,
-      typeFromProps: SourceType.DYNAMIC,
-      transformFromProps: propTransform,
+      },
+      serviceSnippet: '<Svc />',
+      props: {},
     });
 
-    expect(propTransform).toHaveBeenCalledWith('<Button />', expect.anything());
-    expect(result).toBe('/*prop*/ <Button />');
+    expect(result.current.code).toBe('T:<Svc />');
   });
 
-  it('applies sourceParameters.transform when using originalSource fallback', () => {
-    const transform = vi.fn((code: string) => '/*transformed*/ ' + code);
+  it('transforms originalSource once for type code even when snippet is present', () => {
+    const storyContext: ReducedStoryContext = {
+      id: 'story--primary',
+      parameters: {
+        __isArgsStory: true,
+        docs: {
+          source: {
+            type: SourceType.CODE,
+            originalSource: '<Button />',
+            transform: (code: string) => `T:${code}`,
+          },
+        },
+      },
+      args: {},
+      initialArgs: {},
+      unmappedArgs: {},
+    } as unknown as ReducedStoryContext;
+    const story: PreparedStory = {
+      id: 'story--primary',
+      parameters: storyContext.parameters,
+    } as unknown as PreparedStory;
+    const docsContext = createMockDocsContext(story, storyContext);
+
+    const { result } = renderHook(
+      ({ sourceContext, serviceSnippet, props }) =>
+        useSourceProps(props, docsContext, sourceContext, serviceSnippet),
+      {
+        initialProps: {
+          sourceContext: {
+            sources: {
+              'story--primary': {
+                [UNKNOWN_ARGS_HASH]: { code: 'T:<Snippet />' },
+              },
+            },
+          } as SourceContextProps,
+          serviceSnippet: '',
+          props: {} as SourceProps,
+        },
+      }
+    );
 
-    const result = useCode({
-      snippet: '',
-      serviceSnippet: '',
-      storyContext: {
-        parameters: {
-          __isArgsStory: false,
-          docs: {
-            source: {
-              type: SourceType.CODE,
-              originalSource: '<Button />',
-              transform,
+    expect(result.current.code).toBe('T:<Button />');
+  });
+
+  it('transforms originalSource once for auto non-args story even when snippet is present', () => {
+    const storyContext: ReducedStoryContext = {
+      id: 'story--primary',
+      parameters: {
+        __isArgsStory: false,
+        docs: {
+          source: {
+            type: SourceType.AUTO,
+            originalSource: '<Button />',
+            transform: (code: string) => `T:${code}`,
+          },
+        },
+      },
+      args: {},
+      initialArgs: {},
+      unmappedArgs: {},
+    } as unknown as ReducedStoryContext;
+    const story: PreparedStory = {
+      id: 'story--primary',
+      parameters: storyContext.parameters,
+    } as unknown as PreparedStory;
+    const docsContext = createMockDocsContext(story, storyContext);
+
+    const { result } = renderHook(
+      ({ sourceContext, serviceSnippet, props }) =>
+        useSourceProps(props, docsContext, sourceContext, serviceSnippet),
+      {
+        initialProps: {
+          sourceContext: {
+            sources: {
+              'story--primary': {
+                [UNKNOWN_ARGS_HASH]: { code: 'T:<Snippet />' },
+              },
             },
+          } as SourceContextProps,
+          serviceSnippet: '',
+          props: {} as SourceProps,
+        },
+      }
+    );
+
+    expect(result.current.code).toBe('T:<Button />');
+  });
+
+  it('applies transformFromProps to emitted snippet when explicitly provided on props', () => {
+    const storyContext: ReducedStoryContext = {
+      id: 'story--primary',
+      parameters: {
+        __isArgsStory: true,
+        docs: {
+          source: {
+            type: SourceType.DYNAMIC,
+            transform: (code: string) => `T:${code}`,
           },
         },
-      } as any,
-      typeFromProps: SourceType.CODE,
-    });
+      },
+      args: {},
+      initialArgs: {},
+      unmappedArgs: {},
+    } as unknown as ReducedStoryContext;
+    const story: PreparedStory = {
+      id: 'story--primary',
+      parameters: storyContext.parameters,
+    } as unknown as PreparedStory;
+    const docsContext = createMockDocsContext(story, storyContext);
+
+    const { result } = renderHook(
+      ({ sourceContext, serviceSnippet, props }) =>
+        useSourceProps(props, docsContext, sourceContext, serviceSnippet),
+      {
+        initialProps: {
+          sourceContext: {
+            sources: {
+              'story--primary': {
+                [UNKNOWN_ARGS_HASH]: { code: 'T:<Button />' },
+              },
+            },
+          } as SourceContextProps,
+          serviceSnippet: '',
+          props: {
+            transform: (code: string) => `/*prop*/ ${code}`,
+          } as SourceProps,
+        },
+      }
+    );
 
-    expect(transform).toHaveBeenCalledWith('<Button />', expect.anything());
-    expect(result).toBe('/*transformed*/ <Button />');
+    expect(result.current.code).toBe('/*prop*/ T:<Button />');
   });
-});
+});
diff --git a/code/addons/docs/src/blocks/blocks/Source.tsx b/code/addons/docs/src/blocks/blocks/Source.tsx
index 82a43a7240d4..3171c8b73323 100644
--- a/code/addons/docs/src/blocks/blocks/Source.tsx
+++ b/code/addons/docs/src/blocks/blocks/Source.tsx
@@ -90,11 +90,25 @@ const useCode = ({
     // if this is an args story and there's a snippet
     (type === SourceType.AUTO && staticSnippet && isArgsStory);
 
-  const code = useSnippet ? staticSnippet : sourceParameters.originalSource || '';
-  // When using snippet (emitted via SNIPPET_RENDERED), emitTransformCode has already applied sourceParameters.transform.
-  // Avoid re-applying it unless explicitly overridden via transformFromProps.
+  const sourceKind: 'service' | 'emitted' | 'original' = useSnippet
+    ? serviceSnippet
+      ? 'service'
+      : snippet
+        ? 'emitted'
+        : 'original'
+    : 'original';
+
+  const code =
+    sourceKind === 'service'
+      ? serviceSnippet
+      : sourceKind === 'emitted'
+        ? snippet
+        : sourceParameters.originalSource || '';
+
+  // The emitted snippet is already transformed by emitTransformCode,
+  // so only transformFromProps applies to it.
   const transformer =
-    transformFromProps ?? (useSnippet && !serviceSnippet && snippet ? undefined : sourceParameters.transform);
+    transformFromProps ?? (sourceKind === 'emitted' ? undefined : sourceParameters.transform);
 
   const transformedCode = transformer ? useTransformCode(code, transformer, storyContext) : code;
 
diff --git a/code/core/src/preview-api/modules/preview-web/emitTransformCode.ts b/code/core/src/preview-api/modules/preview-web/emitTransformCode.ts
index 93fb269a3e6d..0891d5957f0f 100644
--- a/code/core/src/preview-api/modules/preview-web/emitTransformCode.ts
+++ b/code/core/src/preview-api/modules/preview-web/emitTransformCode.ts
@@ -19,6 +19,7 @@ export async function emitTransformCode(source: string | undefined, context: Red
   const transformed = transform && source ? transform?.(source, context) : source;
   const result = transformed ? await transformed : undefined;
 
+  // Note: The snippet payload emitted via SNIPPET_RENDERED is already transformed.
   addons.getChannel().emit(SNIPPET_RENDERED, {
     id,
     source: result,

From b1be6201f9eb0722f8ed548e1ac413e3aba4f29e Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Sat, 17 Oct 2026 17:55:01 +0200
Subject: [PATCH 140/326] refactor(csf-tools): parse parentheses and keep each
 expression's outer span

Spans without their parentheses made every copy, removal and insertion
site re-derive them, and each one that forgot produced its own bug:
parenthesized default exports, array elements, computed keys,
satisfies wrappers and comma expressions. Parsing keeps parentheses,
one pass replaces each ParenthesizedExpression by the node inside and
records its outer span, so readers see the same tree and edits use
outerSpan. placeableTextOf replaces placeableSource,
placeableExpression, isParenthesized, withParentheses,
exportDefaultKeywords and the React snippet's own copy. It also fixes
a crash merging comma-expression story args and an eslint config edit
that wrote inside a parenthesized array element.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 MIGRATION.md                                  |   2 +-
 code/core/src/cli/eslintPlugin.test.ts        |  15 ++
 code/core/src/cli/eslintPlugin.ts             |   7 +-
 code/core/src/common/utils/subcomponents.ts   |   1 -
 code/core/src/csf-tools/ConfigFile.ts         |   6 +-
 code/core/src/csf-tools/ConfigObject.test.ts  |  26 +++
 code/core/src/csf-tools/ConfigObject.ts       |  15 +-
 code/core/src/csf-tools/CsfFile.ts            |  10 +-
 code/core/src/csf-tools/CsfObject.test.ts     |  22 +++
 code/core/src/csf-tools/CsfObject.ts          |  22 +--
 code/core/src/csf-tools/estree/ast.test.ts    |  31 +++-
 code/core/src/csf-tools/estree/ast.ts         | 150 ++++++++++++++----
 code/core/src/csf-tools/estree/editor.test.ts |  39 ++++-
 code/core/src/csf-tools/estree/editor.ts      |  51 ++----
 code/core/src/csf-tools/estree/scope.ts       |   1 -
 code/core/src/csf-tools/estree/values.ts      |  32 +---
 code/core/src/csf-tools/index.ts              |   3 +-
 .../story-shape/resolve-arg-value.test.ts     |   7 +
 .../story-shape/resolve-arg-value.ts          |   7 +-
 .../story-shape/resolve-members.test.ts       |  13 ++
 .../csf-tools/story-shape/resolve-members.ts  |  13 +-
 .../vitest-plugin/component-transformer.ts    |   6 +-
 code/core/src/mocking-utils/automock.test.ts  |   9 +-
 code/core/src/mocking-utils/automock.ts       |  10 +-
 .../helpers/csf-factories-utils.test.ts       |   8 +
 .../codemod/helpers/csf-factories-utils.ts    |   3 +-
 .../src/codemod/helpers/custom-args-type.ts   |   3 -
 .../helpers/story-to-csf-factory.test.ts      |  25 +++
 .../codemod/helpers/story-to-csf-factory.ts   |   8 +-
 .../transforms/__tests__/csf-2-to-3.test.ts   |  18 +++
 code/lib/codemod/src/transforms/csf-2-to-3.ts |   7 +-
 .../componentManifest/generateCodeSnippet.ts  |  13 +-
 32 files changed, 416 insertions(+), 167 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 009df2c027f2..475e28aa6aac 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1328,7 +1328,7 @@ Storybook no longer bundles Babel or recast to read and write story and config f
 
 - `storybook/internal/babel` is removed. Import Babel from your own `@babel/*` dependencies if you still need it.
 - The nodes exposed by `storybook/internal/csf-tools` are ESTree (OXC) nodes instead of Babel nodes, for example `Literal` instead of `StringLiteral` and `Property` instead of `ObjectProperty`/`ObjectMethod`. `CsfFile._ast` and the `NodePath` fields are removed; use `CsfFile._program` and `CsfFile._editor`. `ConfigFile._ast` is removed as well; use `ConfigFile._program`, edit through `ConfigFile._editorSource` and call `ConfigFile._commit()` to apply pending edits and parse the result again.
-- `CsfObject#get` returns an ESTree expression, and `set`/`transform` accept expressions from `get()` or `parseExpression(code)`. Use `printExpression(node)` to read an expression's source.
+- `CsfObject#get` returns an ESTree expression, and `set`/`transform` accept expressions from `get()` or `parseExpression(code)`. Use `printExpression(node)` to read an expression's source, and `placeableTextOf(node)` to build new code around it.
 - An `experimental_enrichCsf` function receives the new `CsfFile`. Add code with `csf._appendStatement(code)` instead of pushing Babel nodes onto `csf._ast`.
 - `babelParse` is removed; use `parseModule(code, fileName)` from `storybook/internal/csf-tools`, which returns the ESTree `program` and `comments`. `babelParseFile` is removed as well; read CSF with `loadCsf(code, options)` or `readCsf(fileName, options)`.
 - `getHeaderComments(statement)` is replaced by `headerComments(editor)`.
diff --git a/code/core/src/cli/eslintPlugin.test.ts b/code/core/src/cli/eslintPlugin.test.ts
index 73a8f36f2847..930277eaf1be 100644
--- a/code/core/src/cli/eslintPlugin.test.ts
+++ b/code/core/src/cli/eslintPlugin.test.ts
@@ -438,6 +438,21 @@ describe('configureEslintPlugin', () => {
       expect(logger.warn).not.toHaveBeenCalled();
     });
 
+    it('appends after a parenthesized typescript-eslint config argument', async () => {
+      const output = await configureFlatConfig(
+        dedent`
+          import tseslint from 'typescript-eslint';
+
+          export default tseslint.config(tseslint.configs.recommended, (local));
+        `,
+        'eslint.config.js'
+      );
+
+      expect(output).toContain(
+        'export default tseslint.config(tseslint.configs.recommended, (local), storybook.configs["flat/recommended"]);'
+      );
+    });
+
     it('configures a CommonJS export of a config variable', async () => {
       const input = dedent`
         const storybook = require('eslint-plugin-storybook');
diff --git a/code/core/src/cli/eslintPlugin.ts b/code/core/src/cli/eslintPlugin.ts
index 378cabd1aa47..92e56bf55f3e 100644
--- a/code/core/src/cli/eslintPlugin.ts
+++ b/code/core/src/cli/eslintPlugin.ts
@@ -11,6 +11,7 @@ import {
   generateUid,
   importedName,
   isStringLiteral,
+  outerSpan,
   prependStatement,
   printString,
   readConfig,
@@ -169,9 +170,9 @@ function addStorybookConfig(editor: SourceEditor, target: ConfigTarget, localNam
     appendToList(editor, arrayList(editor, target), [`...${storybookConfig}`], '');
   } else {
     const open = editor.code.indexOf('(', target.callee.end) + 1;
-    appendToList(editor, { open, close: target.end - 1, items: target.arguments }, [
-      storybookConfig,
-    ]);
+    // An argument's item spans the parentheses around it.
+    const items = target.arguments.map(outerSpan);
+    appendToList(editor, { open, close: target.end - 1, items }, [storybookConfig]);
   }
 }
 
diff --git a/code/core/src/common/utils/subcomponents.ts b/code/core/src/common/utils/subcomponents.ts
index 0a7338bcfdf2..883e85c37726 100644
--- a/code/core/src/common/utils/subcomponents.ts
+++ b/code/core/src/common/utils/subcomponents.ts
@@ -64,7 +64,6 @@ function unwrapSubcomponentNode(
     }
 
     if (
-      current.type === 'ParenthesizedExpression' ||
       current.type === 'TSAsExpression' ||
       current.type === 'TSSatisfiesExpression' ||
       current.type === 'TSNonNullExpression'
diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index 7fe4ff8fd047..8f5d4e52aad4 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -17,7 +17,6 @@ import {
   createCsfObject,
   literalRoot,
   parseExpression,
-  placeableExpression,
 } from './CsfObject.ts';
 import {
   type E,
@@ -25,6 +24,7 @@ import {
   isIdentifier,
   isStringLiteral,
   locationOf,
+  placeableTextOf,
   unwrapExpression,
   walk,
 } from './estree/ast.ts';
@@ -246,7 +246,7 @@ export class ConfigFile implements CsfObject {
    * ```ts
    * const object = loadConfig("export default { tags: ['docs'] };").parse();
    * object.transform(['tags'], (value) =>
-   *   parseExpression(`[...${printExpression(value)}, 'autodocs']`)
+   *   parseExpression(`[...${placeableTextOf(value)}, 'autodocs']`)
    * ); // { ok: true, changed: true }
    * object.getValue(['tags']); // ['docs', 'autodocs']
    * ```
@@ -738,7 +738,7 @@ export class ConfigFile implements CsfObject {
 
   appendNodeToArray(path: string[], node: CsfExpression) {
     const current = this.getFieldNode(path);
-    const source = placeableExpression(node);
+    const source = placeableTextOf(node);
     if (!current) {
       this.set(path, parseExpression(`[${source}]`));
     } else if (current.type === 'ArrayExpression') {
diff --git a/code/core/src/csf-tools/ConfigObject.test.ts b/code/core/src/csf-tools/ConfigObject.test.ts
index 55f1635931fc..edd566621bc2 100644
--- a/code/core/src/csf-tools/ConfigObject.test.ts
+++ b/code/core/src/csf-tools/ConfigObject.test.ts
@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest';
 
 import { loadConfig, printConfig } from './ConfigFile.ts';
 import { parseExpression, printExpression } from './CsfObject.ts';
+import type { E } from './estree/ast.ts';
 
 const configurations = [
   `export default { parameters: { a11y: { element: '#root' } } };`,
@@ -366,6 +367,31 @@ describe('ConfigFile mutations', () => {
     expect(config.getValue([name])).toBe(1);
   });
 
+  it('keeps the parentheses of a comma expression it moves or renames', () => {
+    const config = loadConfig(
+      `export const a = (f(), 1);\nexport const b = (g(), 2);\nexport const parameters = {};`
+    ).parse();
+
+    expect(config.move(['a'], ['parameters', 'a'])).toEqual({ ok: true, changed: true });
+    expect(config.rename(['b'], 'custom-field')).toEqual({ ok: true, changed: true });
+    expect(config.move(['parameters', 'a'], ['first'])).toEqual({ ok: true, changed: true });
+
+    const output = loadConfig(printConfig(config).code).parse();
+    expect(printExpression(output.get(['first'])!)).toBe('f(), 1');
+    expect(printExpression(output.get(['custom-field'])!)).toBe('g(), 2');
+  });
+
+  it('keeps the parentheses of a comma expression it copies or appends to an array', () => {
+    const config = loadConfig(`export default { addons: [(a, b)] };`).parse();
+    const [element] = (config.get(['addons']) as E.ArrayExpression).elements;
+    config.set(['first'], element as E.Expression);
+    config.appendNodeToArray(['addons'], parseExpression('c, d'));
+
+    expect(printConfig(config).code).toBe(
+      `export default { addons: [(a, b), (c, d)], first: (a, b) };`
+    );
+  });
+
   it('can create named exports in an empty file', () => {
     const config = loadConfig('').parse();
     const object = config;
diff --git a/code/core/src/csf-tools/ConfigObject.ts b/code/core/src/csf-tools/ConfigObject.ts
index 85b2d38772e7..bf7bb6b93fe0 100644
--- a/code/core/src/csf-tools/ConfigObject.ts
+++ b/code/core/src/csf-tools/ConfigObject.ts
@@ -15,6 +15,7 @@ import {
   isIdentifier,
   isStringLiteral,
   locationOf,
+  outerSpan,
   staticKey,
   walk,
 } from './estree/ast.ts';
@@ -29,7 +30,7 @@ import {
   specifierList,
 } from './estree/editor.ts';
 import { generateUid } from './estree/scope.ts';
-import { valueSource } from './estree/values.ts';
+import { placeableValueSource } from './estree/values.ts';
 
 type Span = { start: number; end: number };
 
@@ -420,7 +421,8 @@ const namedExportsRoot = (editor: SourceEditor, entries: NamedEntry[]): ObjectRo
     replaceValue: (member, text) => {
       const { declaration } = entryOf(member);
       if (declaration.type === 'VariableDeclarator') {
-        editor.edits.overwrite(declaration.init!.start, declaration.init!.end, text);
+        const value = outerSpan(declaration.init!);
+        editor.edits.overwrite(value.start, value.end, text);
         return;
       }
       const id = declaration.id!.name;
@@ -460,17 +462,20 @@ const namedExportsRoot = (editor: SourceEditor, entries: NamedEntry[]): ObjectRo
         return;
       }
       removeEntries([entry]);
-      declare([{ key: name, value: valueSource(editor, member), text: '' }]);
+      declare([{ key: name, value: placeableValueSource(editor, member), text: '' }]);
     },
     group: (members, key) => {
       removeEntries(members.map(entryOf));
       const inner = members
-        .map((member) => `${printKey(entryOf(member).name, quote)}: ${valueSource(editor, member)}`)
+        .map(
+          (member) =>
+            `${printKey(entryOf(member).name, quote)}: ${placeableValueSource(editor, member)}`
+        )
         .join(', ');
       declare([{ key, value: `{ ${inner} }`, text: '' }]);
     },
     take: (member, key) => {
-      const value = valueSource(editor, member);
+      const value = placeableValueSource(editor, member);
       return { key, value, text: `${printKey(key, quote)}: ${value}` };
     },
   };
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index 93f683988299..815280b146be 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -33,6 +33,7 @@ import {
   isRegExpLiteral,
   isStringLiteral,
   locationOf,
+  outerSpan,
   unwrapExpression,
 } from './estree/ast.ts';
 import {
@@ -40,7 +41,6 @@ import {
   type InputSourceMap,
   SourceEditor,
   appendStatement,
-  exportDefaultKeywords,
 } from './estree/editor.ts';
 import { generateUid } from './estree/scope.ts';
 import { findVarInitialization } from './findVarInitialization.ts';
@@ -640,9 +640,11 @@ export class CsfFile {
       const metaName = generateUid(this._editor.scopes, 'meta');
       this._metaVariableName = metaName;
       const declaration = node.declaration as Node & { start: number; end: number };
-      // Only the keywords: the declaration's span may sit inside parentheses the parser dropped.
-      const keywords = exportDefaultKeywords(this._editor.code, node.start);
-      this._editor.edits.overwrite(node.start, node.start + keywords, `const ${metaName} = `);
+      this._editor.edits.overwrite(
+        node.start,
+        outerSpan(declaration).start,
+        `const ${metaName} = `
+      );
       this._editor.edits.appendLeft(node.end, `\nexport default ${metaName};`);
       this._metaStatement = node;
       decl = declaration;
diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index 28d1a2d64b3c..ce74e8d5c37f 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -183,6 +183,28 @@ describe('CsfObject', () => {
     );
   });
 
+  it('copies a parenthesized comma expression over itself and into new members', () => {
+    const csf = parse(`export default { a: (x, y), b: 0 };`);
+    const [meta] = csf.objects({ stories: false });
+
+    expect(meta.set(['a'], meta.get(['a'])!)).toEqual({ ok: true, changed: true });
+    expect(meta.set(['b'], meta.get(['a'])!)).toEqual({ ok: true, changed: true });
+    expect(meta.set(['c'], meta.get(['a'])!)).toEqual({ ok: true, changed: true });
+    expect(printCsf(csf).code).toBe(`export default { a: (x, y), b: (x, y), c: (x, y) };`);
+  });
+
+  it.each([
+    { expression: '1 // x', output: 'export default { a: 1 // x\n, b: 2 };' },
+    { expression: 'x, y // x', output: 'export default { a: (x, y // x\n), b: 2 };' },
+  ])('ends the line of $expression before the member after it', ({ expression, output }) => {
+    const csf = parse('export default { a: 0, b: 2 };');
+    const [meta] = csf.objects({ stories: false });
+
+    expect(meta.set(['a'], parseExpression(expression))).toEqual({ ok: true, changed: true });
+    expect(printCsf(csf).code).toBe(output);
+    expect(parse(output).objects({ stories: false })[0].getValue(['b'])).toBe(2);
+  });
+
   it.each([
     { expression: '1 // note', output: 'export default {\n  a: 1 // note\n, b: 2,\n};' },
     { expression: 'x, y', output: 'export default {\n  a: (x, y), b: 2,\n};' },
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index 8d551862894f..1002a38dea8c 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -5,6 +5,7 @@ import {
   type SourceLocation,
   locationOf,
   expressionFromSource,
+  placeableTextOf,
   staticKey,
   textOf,
   unwrapExpression,
@@ -30,7 +31,7 @@ import {
   UNRESOLVED,
   isAstLike,
   isEvaluationInert,
-  placeableSource,
+  placeableValueSource,
   readValue,
   resolveExpression,
   valueSource,
@@ -86,12 +87,15 @@ export type CsfExpression = E.Expression;
  *
  * @example
  * ```ts
- * object.transform(['tags'], (value) => parseExpression(`[...${printExpression(value)}, 'autodocs']`));
+ * object.transform(['tags'], (value) => parseExpression(`[...${placeableTextOf(value)}, 'autodocs']`));
  * ```
  */
 export const parseExpression = (code: string): CsfExpression => expressionFromSource(code);
 
-/** Source of an expression returned by `get` or `parseExpression`, or of any node inside one. */
+/**
+ * Source of an expression returned by `get` or `parseExpression`, or of any node inside one. To
+ * build new code around it, use `placeableTextOf`, which keeps the parentheses of a comma expression.
+ */
 export const printExpression = (node: Node): string => {
   const source = textOf(node);
   if (source === undefined) {
@@ -102,10 +106,6 @@ export const printExpression = (node: Node): string => {
   return source;
 };
 
-// The expression's source, adapted so the code placed after it survives.
-export const placeableExpression = (node: Node): string =>
-  placeableSource(printExpression(node), node.type);
-
 export interface CsfObject {
   /**
    * Identify the config, meta, story, annotation, or call argument this editor represents.
@@ -174,7 +174,7 @@ export interface CsfObject {
    * ```ts
    * const object = loadConfig("export default { tags: ['docs'] };").parse();
    * object.transform(['tags'], (value) =>
-   *   parseExpression(`[...${printExpression(value)}, 'autodocs']`)
+   *   parseExpression(`[...${placeableTextOf(value)}, 'autodocs']`)
    * ); // { ok: true, changed: true }
    * object.getValue(['tags']); // ['docs', 'autodocs']
    * ```
@@ -295,7 +295,7 @@ export const literalRoot = (editor: SourceEditor, object: E.ObjectExpression): O
   group: (members, key) => groupMembers(editor, object, members, key),
   take: (member, key) => ({
     key,
-    value: valueSource(editor, member),
+    value: placeableValueSource(editor, member),
     text: renamedMemberText(editor, object, member, printKey(key, editor.quote)),
   }),
 });
@@ -454,7 +454,7 @@ class CsfObjectEditor implements CsfObject {
 
   private sourceFor(value: CsfValue | CsfExpression) {
     if (isSpan(value)) {
-      return placeableExpression(value as Node);
+      return placeableTextOf(value as Node);
     }
     if (isAstLike(value)) {
       throw new Error(
@@ -509,7 +509,7 @@ class CsfObjectEditor implements CsfObject {
     if (!derived || derived === value) {
       return { ok: true, changed: false };
     }
-    parent.root.replaceValue(property, placeableExpression(derived));
+    parent.root.replaceValue(property, placeableTextOf(derived));
     return this.success();
   }
 
diff --git a/code/core/src/csf-tools/estree/ast.test.ts b/code/core/src/csf-tools/estree/ast.test.ts
index 1d651556fbfd..b6f9c8c83eb0 100644
--- a/code/core/src/csf-tools/estree/ast.test.ts
+++ b/code/core/src/csf-tools/estree/ast.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { codeFrame, parseModule } from './ast.ts';
+import { type E, codeFrame, expressionFromSource, outerSpan, parseModule, walk } from './ast.ts';
 
 describe('parseModule', () => {
   const flowBody = 'const x: { +readOnly: number } = {};';
@@ -55,6 +55,35 @@ describe('parseModule', () => {
   it('names a file without a TS or JS extension in its parse error', () => {
     expect(() => parseModule('export const = ;', '/src/Api.vue')).toThrow('in /src/Api.vue');
   });
+
+  it('replaces parenthesized nodes by their content, which keeps the outermost span', () => {
+    const { program } = parseModule(
+      'x = ((a)); type T = ((string));\n@d((b)) export class C {}',
+      'a.ts'
+    );
+    const types = new Set<string>();
+    walk(program, (node) => {
+      types.add(node.type);
+    });
+    expect(types.has('ParenthesizedExpression') || types.has('TSParenthesizedType')).toBe(false);
+
+    const [assignment, alias] = program.body as [E.ExpressionStatement, E.TSTypeAliasDeclaration];
+    const value = (assignment.expression as E.AssignmentExpression).right;
+    expect([value.start, value.end, outerSpan(value)]).toEqual([6, 7, { start: 4, end: 9 }]);
+    expect(outerSpan(alias.typeAnnotation)).toEqual({ start: 20, end: 30 });
+    expect(outerSpan(assignment)).toMatchObject({ start: 0, end: 10 });
+  });
+
+  it('normalizes an expression nested deeper than the call stack allows recursion', () => {
+    const { program } = parseModule(`x = ${Array(20_000).fill('(a)').join(' + ')};`);
+    expect(program.body).toHaveLength(1);
+  });
+});
+
+describe('expressionFromSource', () => {
+  it.each(['a) + (b', 'a); (b', 'a)(b'])('rejects %s, which is no single expression', (code) => {
+    expect(() => expressionFromSource(code)).toThrow(`Expected an expression: ${code}`);
+  });
 });
 
 describe('codeFrame', () => {
diff --git a/code/core/src/csf-tools/estree/ast.ts b/code/core/src/csf-tools/estree/ast.ts
index 05e61fe0f920..41b8c89610ac 100644
--- a/code/core/src/csf-tools/estree/ast.ts
+++ b/code/core/src/csf-tools/estree/ast.ts
@@ -54,7 +54,7 @@ const parseWith = (code: string, fileName: string | undefined, lang: Lang): Pars
   const options = {
     lang,
     sourceType: 'module',
-    preserveParens: false,
+    preserveParens: true,
     // Duplicate declarations and legacy octals are reported like Babel did, instead of parsing
     // into a program that silently keeps the last declaration.
     showSemanticErrors: true,
@@ -79,8 +79,23 @@ const parseWith = (code: string, fileName: string | undefined, lang: Lang): Pars
  * Parse a module. Without a TS or JS file extension there is no grammar to pick: TSX accepts the
  * most, but rejects generic arrows and `<T>value` assertions that `.ts` allows, so TS is tried next
  * and the error of the parse that got further is reported.
+ *
+ * The tree has no parenthesized nodes: `outerSpan` gives the span of the parentheses around one.
  */
 export const parseModule = (code: string, fileName?: string): ParsedModule => {
+  const module = parseWithParentheses(code, fileName);
+  normalize(module.program, undefined);
+  return module;
+};
+
+// `parseModule`, but `textOf` can print every node of the tree.
+export const parsePrintable = (code: string, fileName?: string): ParsedModule => {
+  const module = parseWithParentheses(code, fileName);
+  normalize(module.program, code);
+  return module;
+};
+
+const parseWithParentheses = (code: string, fileName: string | undefined): ParsedModule => {
   const lang = fileName === undefined ? undefined : langFor(fileName);
   const attempt = lang ? parseWith(code, fileName, lang) : parseEither(code, fileName);
   if ('module' in attempt) {
@@ -246,10 +261,9 @@ const WRAPPERS = new Set([
   'TSSatisfiesExpression',
   'TSNonNullExpression',
   'TSTypeAssertion',
-  'ParenthesizedExpression',
 ]);
 
-/** Peel TS assertion/satisfies wrappers and parentheses off an expression node. */
+/** Peel TS assertion/satisfies wrappers off an expression node. */
 export const unwrapExpression = <T extends Node | null | undefined>(node: T): T => {
   let current: Node | null | undefined = node;
   while (current && WRAPPERS.has(current.type)) {
@@ -288,49 +302,131 @@ export const objectProperty = (object: E.ObjectExpression, name: string): Proper
     (member): member is Property => member.type === 'Property' && staticKey(member) === name
   );
 
-export const sourceOf = (code: string, node: { start: number; end: number }) =>
-  code.slice(node.start, node.end);
+type Span = { start: number; end: number };
 
-// The code each registered node was parsed from, so a node can be printed without its module.
+export const sourceOf = (code: string, node: Span) => code.slice(node.start, node.end);
+
+// The code each parsed node came from, so a node can be printed without its module.
 const nodeSources = new WeakMap<object, string>();
 
-// Lets `textOf` print every node under `root`.
-export const registerSource = (root: Node, code: string) => {
-  walk(root, (node) => {
-    nodeSources.set(node, code);
-  });
-};
+const outerSpans = new WeakMap<object, Span>();
+
+/** The span of a node with the parentheses written around it. */
+export const outerSpan = (node: Span): Span => outerSpans.get(node) ?? node;
 
-const textOverrides = new WeakMap<object, string>();
+const isParenthesized = (node: Node): node is E.ParenthesizedExpression | E.TSParenthesizedType =>
+  node.type === 'ParenthesizedExpression' || node.type === 'TSParenthesizedType';
 
-// Pin the text a node prints as, e.g. an expression whose parentheses the parser dropped.
-export const setTextOf = (node: Node, text: string) => {
-  textOverrides.set(node, text);
+// The node inside the parentheses around `node`, remembering the span of the outermost pair.
+const withoutParentheses = (node: Node): Node => {
+  let inner = node;
+  while (isParenthesized(inner)) {
+    inner = inner.type === 'ParenthesizedExpression' ? inner.expression : inner.typeAnnotation;
+  }
+  outerSpans.set(inner, { start: node.start, end: node.end });
+  return inner;
 };
 
-/** Original source text of a registered node, or `undefined` for a node of unknown origin. */
+const childKeys = new Map<string, readonly string[]>(Object.entries(visitorKeys));
+
+// Replaces every parenthesized node under `root` by the node inside it, in one pass that also
+// records the code each node came from, if given. It keeps its own stack, so a deeply nested
+// expression cannot overflow the call stack; tracking the size itself is faster than push and pop.
+const normalize = (root: Node, code: string | undefined) => {
+  const stack = [root];
+  let size = 1;
+  while (size > 0) {
+    const node = stack[--size];
+    if (code !== undefined) {
+      nodeSources.set(node, code);
+    }
+    const keys = childKeys.get(node.type);
+    if (keys === undefined) {
+      continue;
+    }
+    const fields = node as unknown as Record<string, Node | (Node | null)[] | null>;
+    for (let index = 0; index < keys.length; index++) {
+      const key = keys[index];
+      const value = fields[key];
+      if (Array.isArray(value)) {
+        for (let position = 0; position < value.length; position++) {
+          const item = value[position];
+          if (item !== null && typeof item === 'object') {
+            stack[size++] = isParenthesized(item)
+              ? (value[position] = withoutParentheses(item))
+              : item;
+          }
+        }
+      } else if (value !== null && typeof value === 'object') {
+        stack[size++] = isParenthesized(value) ? (fields[key] = withoutParentheses(value)) : value;
+      }
+    }
+  }
+};
+
+// The text of each expression `expressionFromSource` returns: as written, and as it is placed.
+const fragments = new WeakMap<object, { text: string; placeable: string }>();
+
+/**
+ * Original source text of a node from `SourceEditor` or `expressionFromSource`, or `undefined` for
+ * any other node, such as one from `parseModule`.
+ */
 export const textOf = (node: Node): string | undefined => {
-  const override = textOverrides.get(node);
-  if (override !== undefined) {
-    return override;
+  const fragment = fragments.get(node);
+  if (fragment) {
+    return fragment.text;
   }
   const code = nodeSources.get(node);
-  const span = node as Node & { start: number; end: number };
-  return code === undefined ? undefined : code.slice(span.start, span.end);
+  return code === undefined ? undefined : sourceOf(code, node as Node & Span);
+};
+
+/**
+ * Source text of a node from `SourceEditor` or `expressionFromSource` that can be placed as a value:
+ * a comma expression keeps its parentheses or gets them, and a trailing line comment ends its line.
+ * Unlike `textOf`, it throws for any other node.
+ */
+export const placeableTextOf = (node: Node): string => {
+  const fragment = fragments.get(node);
+  if (fragment) {
+    return fragment.placeable;
+  }
+  const code = nodeSources.get(node);
+  if (code === undefined) {
+    throw new Error(
+      `Cannot print a ${node.type} node whose source is unknown: expressions must come from \`get\`, \`transform\` or \`parseExpression\``
+    );
+  }
+  if (node.type !== 'SequenceExpression') {
+    return sourceOf(code, node as Node & Span);
+  }
+  const outer = outerSpan(node);
+  return outer === node ? `(${sourceOf(code, node)})` : sourceOf(code, outer);
 };
 
 /** Parse an expression fragment, which has no file name to pick its grammar. */
 export const parseFragment = (code: string): ParsedModule => parseModule(code);
 
 export const expressionFromSource = (code: string): E.Expression => {
+  // The line break ends a trailing line comment before the closing parenthesis.
   const wrapped = `(${code}\n)`;
-  const statement = parseFragment(wrapped).program.body[0];
-  if (statement?.type !== 'ExpressionStatement') {
+  const { program, comments } = parseWithParentheses(wrapped, undefined);
+  const statement = program.body[0] as E.Statement | undefined;
+  const wrapper = statement?.type === 'ExpressionStatement' ? statement.expression : undefined;
+  if (wrapper?.type !== 'ParenthesizedExpression' || wrapper.end !== wrapped.length) {
     throw new SyntaxError(`Expected an expression: ${code}`);
   }
-  registerSource(statement.expression, wrapped);
-  setTextOf(statement.expression, code);
-  return statement.expression;
+  const parenthesized = wrapper.expression.type === 'ParenthesizedExpression';
+  normalize(program, wrapped);
+  const expression = (statement as E.ExpressionStatement).expression;
+  // The wrapper's parentheses are not part of the fragment.
+  outerSpans.delete(expression);
+  const comment = comments.at(-1);
+  const ended = comment?.type === 'Line' && comment.end === code.length + 1 ? `${code}\n` : code;
+  fragments.set(expression, {
+    text: code,
+    placeable: expression.type === 'SequenceExpression' && !parenthesized ? `(${ended})` : ended,
+  });
+  return expression;
 };
 
 const KEYWORDS = new Set(
diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index 53757a10885b..042e1ac0c2ae 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -23,7 +23,6 @@ import {
   removeStatement,
   removeStatements,
   setImportSpecifiers,
-  withParentheses,
 } from './editor.ts';
 
 const parse = (source: string, fileName?: string) =>
@@ -105,12 +104,16 @@ describe('reindent', () => {
   });
 });
 
-describe('withParentheses', () => {
-  it('widens a span over the parentheses wrapped around it', () => {
-    const code = '[ ((a ? 1 : 2)) ]';
-    expect(withParentheses(code, { start: 4, end: 13 })).toEqual({ start: 2, end: 15 });
-    expect(withParentheses(code, { start: 4, end: 13 }, 3, 14)).toEqual({ start: 3, end: 14 });
-    expect(withParentheses(code, { start: 6, end: 7 })).toEqual({ start: 6, end: 7 });
+describe('parenthesized array elements', () => {
+  it('appends after a comma expression and removes a doubly parenthesized one whole', () => {
+    const editor = new SourceEditor(`export default { addons: [(a, b)] };`);
+    appendToList(editor, arrayList(editor, defaultExportArray(editor)), [`'c'`], '');
+    expect(editor.toString()).toBe(`export default { addons: [(a, b), 'c'] };`);
+
+    const removal = new SourceEditor(`export default { addons: ['c', ((a, b))] };`);
+    const array = defaultExportArray(removal);
+    removeFromList(removal, arrayList(removal, array), [array.elements[1]!]);
+    expect(removal.toString()).toBe(`export default { addons: ['c'] };`);
   });
 
   it('appends after a parenthesized last element and removes it whole', () => {
@@ -438,6 +441,14 @@ describe('computed keys', () => {
     expect(meta.rename(['b'], 'd')).toEqual({ ok: true, changed: true });
     expect(printCsf(csf).code).toBe(`export default { c: 1, async d() {} };`);
   });
+
+  it('renames a parenthesized computed key with comments around its parentheses', () => {
+    const csf = parse(`export default { [('a')]: 1, [ /* c */ (('b')) /* d */ ]: 2 };`);
+    const [meta] = csf.objects({ stories: false });
+    expect(meta.rename(['a'], 'c')).toEqual({ ok: true, changed: true });
+    expect(meta.rename(['b'], 'd')).toEqual({ ok: true, changed: true });
+    expect(printCsf(csf).code).toBe(`export default { c: 1, d: 2 };`);
+  });
 });
 
 describe('parenthesized default exports', () => {
@@ -451,6 +462,20 @@ describe('parenthesized default exports', () => {
     );
   });
 
+  it('hoists and reads a doubly parenthesized meta', () => {
+    const csf = loadCsf(`export default (({ title: 'X' }));\nexport const A = {};`, {
+      transformInlineMeta: true,
+      makeTitle: (title) => title ?? 'title',
+    }).parse();
+    expect(csf._meta?.title).toBe('X');
+    expect(printCsf(csf).code).toBe(
+      `const _meta = (({ title: 'X' }));\nexport default _meta;\nexport const A = {};`
+    );
+
+    const reference = parse(`const meta = { title: 'Y' };\nexport default ((meta));`);
+    expect(reference._meta?.title).toBe('Y');
+  });
+
   it('hoists an inline meta with comments between the keywords', () => {
     const csf = loadCsf(`export /* a */ default // b\n { title: 'X' };\nexport const A = {};`, {
       transformInlineMeta: true,
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 0b74e3a5e23b..9f92aa16cf3c 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -8,8 +8,9 @@ import {
   type Property,
   isNode,
   isValidIdentifier,
+  outerSpan,
   parseModule,
-  registerSource,
+  parsePrintable,
   sourceOf,
   walk,
 } from './ast.ts';
@@ -61,9 +62,7 @@ export class SourceEditor {
 
   constructor(code: string, fileName?: string) {
     this.fileName = fileName;
-    this._module = parseModule(code, fileName);
-    // Every node prints as the text it was parsed from, wherever it is used.
-    registerSource(this._module.program, code);
+    this._module = parsePrintable(code, fileName);
     this._edits = new MagicString(code, { filename: fileName });
   }
 
@@ -131,8 +130,7 @@ export class SourceEditor {
   }
 
   replaceSource(code: string) {
-    this._module = parseModule(code, this.fileName);
-    registerSource(this._module.program, code);
+    this._module = parsePrintable(code, this.fileName);
     this._scopes = undefined;
     this._parents = undefined;
     this._edits = new MagicString(code, { filename: this.fileName });
@@ -366,7 +364,7 @@ export const objectList = (object: E.ObjectExpression | E.ObjectPattern): List =
 // A hole (`[a, , b]`) is an empty item right before the comma that writes it.
 const isHole = (item: Span) => item.start === item.end;
 
-// Nodes are parsed without parentheses, so an element's span may sit inside `( )`.
+// An element's item spans the parentheses around it.
 export const arrayList = (editor: SourceEditor, array: E.ArrayExpression): List => {
   const { code, comments } = editor;
   const open = array.start + 1;
@@ -375,7 +373,7 @@ export const arrayList = (editor: SourceEditor, array: E.ArrayExpression): List
   const items = array.elements.map((element): Span => {
     let item: Span;
     if (element) {
-      item = withParentheses(code, element, cursor, close, comments);
+      item = outerSpan(element);
     } else {
       const comma = nextTokenStart(code, comments, cursor);
       item = { start: comma, end: comma };
@@ -387,30 +385,6 @@ export const arrayList = (editor: SourceEditor, array: E.ArrayExpression): List
   return { open, close, items };
 };
 
-/**
- * Widen a span to the balanced parentheses wrapped directly around it, within `lower..upper`.
- * Whitespace and the given comments may sit between the parentheses and the span.
- */
-export const withParentheses = (
-  code: string,
-  span: Span,
-  lower = 0,
-  upper = code.length,
-  comments: readonly Span[] = []
-): Span => {
-  let { start, end } = span;
-  while (true) {
-    const before = previousTokenEnd(code, comments, start);
-    const after = nextTokenStart(code, comments, end);
-    if (before > lower && after < upper && code[before - 1] === '(' && code[after] === ')') {
-      start = before - 1;
-      end = after + 1;
-    } else {
-      return start === span.start && end === span.end ? span : { start, end };
-    }
-  }
-};
-
 // Position right after the comma that follows an item, if it has one.
 const separatorAfter = (code: string, list: List, index: number) => {
   const item = list.items[index];
@@ -940,7 +914,8 @@ export const replaceValue = (editor: SourceEditor, member: Property, text: strin
     );
     return;
   }
-  editor.edits.overwrite(member.value.start, member.value.end, text);
+  const value = outerSpan(member.value);
+  editor.edits.overwrite(value.start, value.end, text);
 };
 
 export const keySource = (editor: SourceEditor, member: Property) =>
@@ -952,7 +927,7 @@ const keyRange = (editor: SourceEditor, member: Property): Span => {
     return member.key;
   }
   const { code, comments } = editor;
-  const key = withParentheses(code, member.key, member.start, member.end, comments);
+  const key = outerSpan(member.key);
   return {
     start: previousTokenEnd(code, comments, key.start) - 1,
     end: nextTokenStart(code, comments, key.end) + 1,
@@ -1004,14 +979,6 @@ const methodFromFunction = (text: string, key: string) => {
     : undefined;
 };
 
-// Length of `export default` and the whitespace after it at `start`.
-// Comments may sit between and after the keywords.
-const SKIPPED = String.raw`(?:\s|/\*[\s\S]*?\*/|//[^\n]*\n)`;
-const EXPORT_DEFAULT = new RegExp(`^export${SKIPPED}+default${SKIPPED}*`);
-
-export const exportDefaultKeywords = (code: string, start: number) =>
-  EXPORT_DEFAULT.exec(code.slice(start))![0].length;
-
 export const isSpan = (value: unknown): value is Span =>
   isNode(value) && typeof (value as unknown as Span).start === 'number';
 
diff --git a/code/core/src/csf-tools/estree/scope.ts b/code/core/src/csf-tools/estree/scope.ts
index 286e3795a835..7b8e81944dfd 100644
--- a/code/core/src/csf-tools/estree/scope.ts
+++ b/code/core/src/csf-tools/estree/scope.ts
@@ -143,7 +143,6 @@ const TS_TYPES = new Set([
   'TSNumberKeyword',
   'TSObjectKeyword',
   'TSOptionalType',
-  'TSParenthesizedType',
   'TSPropertySignature',
   'TSQualifiedName',
   'TSRestType',
diff --git a/code/core/src/csf-tools/estree/values.ts b/code/core/src/csf-tools/estree/values.ts
index ace43f078833..be3d856bf894 100644
--- a/code/core/src/csf-tools/estree/values.ts
+++ b/code/core/src/csf-tools/estree/values.ts
@@ -7,7 +7,7 @@ import {
   isIdentifier,
   isNode,
   isNumericLiteral,
-  parseModule,
+  placeableTextOf,
   staticKey,
   unwrapExpression,
 } from './ast.ts';
@@ -49,36 +49,18 @@ const BABEL_ONLY_TYPES = new Set([
 export const isAstLike = (value: unknown): value is Node =>
   isNode(value) && (Object.hasOwn(visitorKeys, value.type) || BABEL_ONLY_TYPES.has(value.type));
 
-// Whether the parenthesis at index 0 closes at the last index. Then the text between them is an
-// expression on its own; otherwise it starts with an unmatched `)`, which fails the parse.
-const isParenthesized = (source: string) => {
-  if (!source.startsWith('(') || !source.endsWith(')')) {
-    return false;
-  }
-  try {
-    parseModule(`[${source.slice(1, -1)}\n]`);
-    return true;
-  } catch {
-    return false;
-  }
-};
-
-/**
- * Source text ready to be placed as a value: a comma expression keeps its parentheses, and a
- * trailing line comment ends its line so the code after it survives.
- */
-export const placeableSource = (source: string, type: string) => {
-  const text = type === 'SequenceExpression' && !isParenthesized(source) ? `(${source})` : source;
-  const lastComment = parseModule(`(${text}\n)`).comments.at(-1);
-  return lastComment?.type === 'Line' && lastComment.end === text.length + 1 ? `${text}\n` : text;
-};
-
 /** A member's value as source; methods become function expressions. */
 export const valueSource = (editor: SourceEditor, member: Property) =>
   member.method || member.kind !== 'init'
     ? functionFromMethod(editor, member)
     : editor.source(member.value);
 
+// `valueSource` ready to be placed as another value, as `placeableTextOf` prints it.
+export const placeableValueSource = (editor: SourceEditor, member: Property) =>
+  member.method || member.kind !== 'init'
+    ? functionFromMethod(editor, member)
+    : placeableTextOf(member.value);
+
 export type CsfValue =
   | string
   | number
diff --git a/code/core/src/csf-tools/index.ts b/code/core/src/csf-tools/index.ts
index a79699d401b9..8fe4a7efad4a 100644
--- a/code/core/src/csf-tools/index.ts
+++ b/code/core/src/csf-tools/index.ts
@@ -22,7 +22,9 @@ export {
   isStringLiteral,
   isValidIdentifier,
   locationOf,
+  outerSpan,
   parseModule,
+  placeableTextOf,
   textOf,
   unwrapExpression as unwrapESTreeExpression,
   walk,
@@ -51,5 +53,4 @@ export {
   removeStatements,
   setImportSpecifiers,
   specifierList,
-  withParentheses,
 } from './estree/editor.ts';
diff --git a/code/core/src/csf-tools/story-shape/resolve-arg-value.test.ts b/code/core/src/csf-tools/story-shape/resolve-arg-value.test.ts
index 11771173be38..367ebd495f27 100644
--- a/code/core/src/csf-tools/story-shape/resolve-arg-value.test.ts
+++ b/code/core/src/csf-tools/story-shape/resolve-arg-value.test.ts
@@ -115,6 +115,13 @@ describe('resolveArgValue', () => {
     });
   });
 
+  it.each([
+    [`[(f(), 1), { ...base }]`, `[(f(), 1), { size: 'md' }]`],
+    [`{ a: (f(), 1), [(k, 'b')]: { ...base } }`, `{ a: (f(), 1), [(k, 'b')]: { size: 'md' } }`],
+  ])('keeps the parentheses of comma expressions while writing out %s', (expression, node) => {
+    expect(valueOf(`const base = { size: 'md' };`, expression).node).toBe(node);
+  });
+
   it('leaves a literal alone', () => {
     expect(valueOf('', `{ a: 1, b: [2, 3] }`)).toEqual({
       node: '{ a: 1, b: [2, 3] }',
diff --git a/code/core/src/csf-tools/story-shape/resolve-arg-value.ts b/code/core/src/csf-tools/story-shape/resolve-arg-value.ts
index 748989280713..1997943beaae 100644
--- a/code/core/src/csf-tools/story-shape/resolve-arg-value.ts
+++ b/code/core/src/csf-tools/story-shape/resolve-arg-value.ts
@@ -6,6 +6,7 @@ import {
   expressionFromSource,
   parseFragment,
   isValidIdentifier,
+  placeableTextOf,
 } from '../estree/ast.ts';
 import { analyzeScopes } from '../estree/scope.ts';
 import { type ImportRef } from './import-statements.ts';
@@ -100,7 +101,7 @@ const inlineSpreads = (node: Node, ctx: ReferenceContext, unresolved: string[]):
             ? ''
             : element.type === 'SpreadElement'
               ? codeOf(element)
-              : codeOf(inlineSpreads(element, ctx, unresolved))
+              : placeableTextOf(inlineSpreads(element, ctx, unresolved))
         )
         .join(', ')}]`
     );
@@ -168,7 +169,7 @@ const objectFrom = (
       }
       const name = keyOf(property);
       key = property.computed
-        ? `[${codeOf(property.key)}]`
+        ? `[${placeableTextOf(property.key)}]`
         : name !== null && isValidIdentifier(name, false)
           ? name
           : codeOf(property.key);
@@ -184,7 +185,7 @@ const objectFrom = (
     // A shorthand prints its key and nothing else, so it may only stay shorthand while its value is
     // still the one the key stands for.
     const shorthand = 'type' in property && property.shorthand && value === property.value;
-    members.push(shorthand ? key : `${key}: ${codeOf(value)}`);
+    members.push(shorthand ? key : `${key}: ${placeableTextOf(value)}`);
   }
   // One member per line, so formatters keep the object expanded.
   return rebuilt(
diff --git a/code/core/src/csf-tools/story-shape/resolve-members.test.ts b/code/core/src/csf-tools/story-shape/resolve-members.test.ts
index 154b7a81f999..f515a39fa20d 100644
--- a/code/core/src/csf-tools/story-shape/resolve-members.test.ts
+++ b/code/core/src/csf-tools/story-shape/resolve-members.test.ts
@@ -604,6 +604,19 @@ describe('CSF factories', () => {
     });
   });
 
+  it('reports parent args written as a comma expression, which it cannot read', () => {
+    const code = dedent`
+      import preview from './preview';
+      const meta = preview.meta({ component: Button });
+      export const Base = meta.story({ args: (track(), { label: 'base', primary: true }) });
+      export const Extended = Base.extend({ args: { label: 'extended' } });
+    `;
+    expect(argsOf(code, 'Extended')).toEqual({
+      args: { label: "'extended'" },
+      unresolved: ["...(track(), { label: 'base', primary: true })"],
+    });
+  });
+
   it('reports a bare spread of a factory story, which copies its methods and not its config', () => {
     const code = dedent`
       import preview from './preview';
diff --git a/code/core/src/csf-tools/story-shape/resolve-members.ts b/code/core/src/csf-tools/story-shape/resolve-members.ts
index e420e6b0fa88..c1f358377e88 100644
--- a/code/core/src/csf-tools/story-shape/resolve-members.ts
+++ b/code/core/src/csf-tools/story-shape/resolve-members.ts
@@ -1,6 +1,13 @@
 // Follows the references a story hides its config behind: a spread of a constant, of a sibling
 // story, or of something another module owns, applying every write in the order it runs.
-import { type E, type Node, expressionFromSource, isStringLiteral, textOf } from '../estree/ast.ts';
+import {
+  type E,
+  type Node,
+  expressionFromSource,
+  isStringLiteral,
+  placeableTextOf,
+  textOf,
+} from '../estree/ast.ts';
 import type { SourceEditor } from '../estree/editor.ts';
 import { importedName, isTypeSpecifier } from './imports.ts';
 import {
@@ -661,7 +668,9 @@ const mergedAnnotations = (
 
 // The spreads point at the original nodes, so each still resolves in the scope it was written in.
 const spreadPair = (from: Node, over: Node): E.ObjectExpression => {
-  const merged = expressionFromSource(`{ ...${codeOf(from)}, ...${codeOf(over)} }`);
+  const merged = expressionFromSource(
+    `{ ...${placeableTextOf(from)}, ...${placeableTextOf(over)} }`
+  );
   const object = unwrapExpression(merged) as E.ObjectExpression;
   (object.properties[0] as E.SpreadElement).argument = from as E.Expression;
   (object.properties[1] as E.SpreadElement).argument = over as E.Expression;
diff --git a/code/core/src/csf-tools/vitest-plugin/component-transformer.ts b/code/core/src/csf-tools/vitest-plugin/component-transformer.ts
index fc5251fa57c1..e508f0d6dce1 100644
--- a/code/core/src/csf-tools/vitest-plugin/component-transformer.ts
+++ b/code/core/src/csf-tools/vitest-plugin/component-transformer.ts
@@ -6,14 +6,13 @@ import {
   STORYBOOK_FN_PLACEHOLDER,
   generateDummyArgsFromArgTypes,
 } from '../../core-server/utils/get-dummy-args-from-argtypes.ts';
-import { type E, type Node, unwrapExpression, walk } from '../estree/ast.ts';
+import { type E, type Node, outerSpan, unwrapExpression, walk } from '../estree/ast.ts';
 import {
   SourceEditor,
   appendToList,
   prependStatement,
   printKey,
   printValue,
-  exportDefaultKeywords,
   specifierList,
 } from '../estree/editor.ts';
 import { generateUid } from '../estree/scope.ts';
@@ -164,8 +163,7 @@ const collectComponentExports = (editor: SourceEditor, fileName: string) => {
       ) {
         const identifierName = createComponentNameFromFileName(fileName);
         const identifier = generateUid(scopes, identifierName);
-        const keywords = exportDefaultKeywords(editor.code, node.start);
-        editor.edits.overwrite(node.start, node.start + keywords, `const ${identifier} = `);
+        editor.edits.overwrite(node.start, outerSpan(declaration).start, `const ${identifier} = `);
         editor.edits.appendLeft(node.end, `\nexport default ${identifier};`);
 
         if (declaration.type === 'CallExpression') {
diff --git a/code/core/src/mocking-utils/automock.test.ts b/code/core/src/mocking-utils/automock.test.ts
index f7ab9852503b..5ae04a9a8bfe 100644
--- a/code/core/src/mocking-utils/automock.test.ts
+++ b/code/core/src/mocking-utils/automock.test.ts
@@ -21,12 +21,15 @@ describe('getAutomockCode', () => {
     }
   });
 
-  it('keeps the parentheses of a parenthesized default export', () => {
-    const mocked = getAutomockCode('export default (x);', false, (source) =>
+  it.each([
+    ['export default (x);', 'const __vitest_default = (x);'],
+    ['export /* a */ default /* b */ ((x));', 'const __vitest_default = ((x));'],
+  ])('keeps the parentheses of %s', (code, declaration) => {
+    const mocked = getAutomockCode(code, false, (source) =>
       parseModuleAst(source, '/mod.ts')
     ).toString();
 
-    expect(mocked).toMatch(/^const __vitest_default = \(x\);/);
+    expect(mocked.startsWith(declaration)).toBe(true);
     expect(() => parseModuleAst(mocked, '/mod.ts')).not.toThrow();
   });
 
diff --git a/code/core/src/mocking-utils/automock.ts b/code/core/src/mocking-utils/automock.ts
index 5858ef55a024..098c9ba2e4e2 100644
--- a/code/core/src/mocking-utils/automock.ts
+++ b/code/core/src/mocking-utils/automock.ts
@@ -7,7 +7,7 @@ import type {
 } from 'estree';
 import MagicString from 'magic-string';
 
-import { exportDefaultKeywords } from '../csf-tools/estree/editor.ts';
+import { outerSpan } from '../csf-tools/estree/ast.ts';
 import { type Positioned, getArbitraryModuleIdentifier } from './esmWalker.ts';
 
 // An ESTree program; OXC's own `Program` type is structurally compatible with what is read here.
@@ -160,9 +160,11 @@ export function automockModule(
     if (_node.type === 'ExportDefaultDeclaration') {
       const node = _node as Positioned<ExportDefaultDeclaration>;
       allSpecifiers.push({ name: '__vitest_default', alias: 'default' });
-      // Only the keywords: the span of `export default (x)`'s expression excludes its parentheses.
-      const keywords = exportDefaultKeywords(code, node.start);
-      m.overwrite(node.start, node.start + keywords, `const __vitest_default = `);
+      m.overwrite(
+        node.start,
+        outerSpan(node.declaration as Positioned<typeof node.declaration>).start,
+        `const __vitest_default = `
+      );
     }
   }
   const moduleObject = `
diff --git a/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.test.ts b/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.test.ts
index 769c023e94b8..352eb47d7649 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.test.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.test.ts
@@ -181,6 +181,14 @@ describe('getConfigProperties', () => {
     ).toEqual(["foo: 'fooValue'", 'bar: 42']);
   });
 
+  it('keeps the parentheses of a comma expression', () => {
+    const editor = new SourceEditor(`export const foo = (track(), 'fooValue');`);
+
+    expect(
+      getConfigProperties(editor, exportedDeclarations(editor, ['foo']), { configType: 'main' })
+    ).toEqual(["foo: (track(), 'fooValue')"]);
+  });
+
   it('returns object properties from function declarations', () => {
     const editor = new SourceEditor(`export function foo() {}`);
 
diff --git a/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.ts b/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.ts
index b6d588689850..02255d9bc7c2 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/csf-factories-utils.ts
@@ -2,6 +2,7 @@ import {
   type ESTree as E,
   type ESTreeNode as Node,
   type SourceEditor,
+  placeableTextOf,
   walk,
   removeStatements,
   setImportSpecifiers,
@@ -108,7 +109,7 @@ export function getConfigProperties(
       continue;
     }
     if (decl.type === 'VariableDeclarator' && decl.init) {
-      properties.push(`${name}: ${editor.source(decl.init)}`);
+      properties.push(`${name}: ${placeableTextOf(decl.init)}`);
     } else if (decl.type === 'FunctionDeclaration' && decl.body) {
       properties.push(`${name}: () => ${editor.source(decl.body)}`);
     }
diff --git a/code/lib/cli-storybook/src/codemod/helpers/custom-args-type.ts b/code/lib/cli-storybook/src/codemod/helpers/custom-args-type.ts
index 3dc05ff4ff66..9173430e0e49 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/custom-args-type.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/custom-args-type.ts
@@ -81,9 +81,6 @@ export function customArgsTypes(editor: SourceEditor, component: Node | undefine
 
   const customArgs = (type: E.TSType | undefined): E.TSType[] =>
     (type?.type === 'TSIntersectionType' ? type.types : type ? [type] : []).flatMap((member) => {
-      if (member.type === 'TSParenthesizedType') {
-        return customArgs(member.typeAnnotation);
-      }
       // `StoryObj<Meta<T>>` has the args of `Meta<T>`.
       const nested = argsType(member);
       if (nested) {
diff --git a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
index e5a9f13dd761..6c7c8a7548fb 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
@@ -949,6 +949,31 @@ describe('stories codemod', () => {
         `);
       });
 
+      it('migrates a parenthesized meta before satisfies', async () => {
+        const source = (meta: string) => dedent`
+          import type { Meta } from '@storybook/react';
+          import { Button } from './Button';
+
+          ${meta}
+          export const A = {};
+        `;
+        const migrated = dedent`
+          import preview from "#.storybook/preview";
+          import { Button } from "./Button";
+
+          const meta = preview.meta({ component: Button });
+          export const A = meta.story();
+        `;
+        await expect(
+          transform(source('export default ({ component: Button }) satisfies Meta;'))
+        ).resolves.toBe(`${migrated}\n`);
+        await expect(
+          transform(
+            source('const meta = (({ component: Button })) satisfies Meta;\nexport default meta;')
+          )
+        ).resolves.toBe(`${migrated}\n`);
+      });
+
       it('migrates parenthesized expressions with a comment inside the parentheses', async () => {
         const output = await transform(dedent`
           import type { StoryObj } from '@storybook/react';
diff --git a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
index a66dbf7bf219..1a8159646945 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
@@ -4,8 +4,8 @@ import {
   isValidPreviewPath,
   loadCsf,
   printCsf,
+  outerSpan,
   walk,
-  withParentheses,
   removeStatements,
   setImportSpecifiers,
   prependStatement,
@@ -348,10 +348,10 @@ export async function storyToCsfFactory(
       ? customArgs.shared(storyInits.map(({ argsTypes }) => argsTypes))
       : [];
 
-  // Wraps `inner` in `before…after`, dropping the type cast of `outer` around it. The parser drops
-  // parentheses from spans, so `(inner) satisfies T` keeps its own.
+  // Wraps `inner` in `before…after`, dropping the type cast of `outer` around it. The parentheses
+  // of `(inner) satisfies T` stay with `inner`.
   const wrap = (outer: Node, inner: Node, before: string, after: string) => {
-    const span = withParentheses(editor.code, inner, outer.start, outer.end, editor.comments);
+    const span = outerSpan(inner);
     if (span.end < outer.end) {
       editor.edits.remove(span.end, outer.end);
     }
diff --git a/code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts b/code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts
index 15e5c99c0ef9..72c4bbfbbfb0 100644
--- a/code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts
+++ b/code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts
@@ -70,6 +70,24 @@ describe('csf-2-to-3', () => {
       `);
     });
 
+    it('keeps the parentheses of a comma expression annotation', async () => {
+      await expect(
+        jsTransform(dedent`
+          export default { title: 'Cat' };
+
+          export const A = (args) => <Cat {...args} />;
+          A.args = (track(), { name: 'Fluffy' });
+        `)
+      ).resolves.toMatchInlineSnapshot(`
+        export default { title: "Cat" };
+
+        export const A = {
+          render: (args) => <Cat {...args} />,
+          args: (track(), { name: "Fluffy" }),
+        };
+      `);
+    });
+
     it('should ignore non-story exports, statements', async () => {
       await expect(
         jsTransform(dedent`
diff --git a/code/lib/codemod/src/transforms/csf-2-to-3.ts b/code/lib/codemod/src/transforms/csf-2-to-3.ts
index b389975486a0..c1911dbc3119 100644
--- a/code/lib/codemod/src/transforms/csf-2-to-3.ts
+++ b/code/lib/codemod/src/transforms/csf-2-to-3.ts
@@ -4,6 +4,7 @@ import {
   type ESTreeNode as Node,
   type SourceEditor,
   loadCsf,
+  placeableTextOf,
   printCsf,
   removeStatement,
   walk,
@@ -21,7 +22,7 @@ const renameAnnotation = (annotation: string) => {
 };
 
 // `Story.story = { parameters }` is one assignment. The fields inside it are the annotations.
-const annotationProperties = (editor: SourceEditor, annotations: Record<string, Node>) => {
+const annotationProperties = (annotations: Record<string, Node>) => {
   const fields = new Map<string, Node>();
   for (const [annotation, value] of Object.entries(annotations)) {
     if (annotation === 'story' && value.type === 'ObjectExpression') {
@@ -35,7 +36,7 @@ const annotationProperties = (editor: SourceEditor, annotations: Record<string,
     fields.set(annotation, value);
   }
   return [...fields].map(
-    ([annotation, value]) => `${renameAnnotation(annotation)}: ${editor.source(value)}`
+    ([annotation, value]) => `${renameAnnotation(annotation)}: ${placeableTextOf(value)}`
   );
 };
 
@@ -154,7 +155,7 @@ export default async function transform(info: FileInfo, api: API, options: { par
 
   const objectExports = new Set<string>();
   Object.entries(csf._storyExports).forEach(([key, decl]) => {
-    const annotations = annotationProperties(editor, csf._storyAnnotations[key]);
+    const annotations = annotationProperties(csf._storyAnnotations[key]);
 
     if (decl.type !== 'VariableDeclarator') {
       return;
diff --git a/code/renderers/react/src/componentManifest/generateCodeSnippet.ts b/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
index 6f4a0f6a1003..06ee959afad8 100644
--- a/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
+++ b/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
@@ -14,6 +14,7 @@ import {
   metaObject,
   normalizeStoryDeclaration,
   parseModule,
+  placeableTextOf,
   reindent,
   resolveRenderFunction,
   storyShapeError,
@@ -86,7 +87,7 @@ function importedBoundStory(
   }
 
   const values = Object.entries(args).map(
-    ([key, value]) => `    ${JSON.stringify(key)}: ${valueCode(value)}`
+    ([key, value]) => `    ${JSON.stringify(key)}: ${placeableTextOf(value)}`
   );
   const argsObject = values.length ? `{\n${values.join(',\n')}\n}` : '{}';
   return {
@@ -255,10 +256,6 @@ function readsArgs(source: string): boolean {
 
 const isValidJsxAttrName = (n: string) => /^[A-Za-z_][A-Za-z0-9_:-]*$/.test(n);
 
-// An arg value as source to place in JSX or an object, where a comma expression needs parentheses.
-const valueCode = (value: Node) =>
-  value.type === 'SequenceExpression' ? `(${codeOf(value)})` : codeOf(value);
-
 const toAttr = (key: string, value: Node) => {
   if (value.type === 'Literal' && typeof value.value === 'boolean') {
     return value.value ? key : `${key}={false}`;
@@ -266,7 +263,7 @@ const toAttr = (key: string, value: Node) => {
   if (isStringLiteral(value) && !value.value.includes('"')) {
     return `${key}="${value.value}"`;
   }
-  return `${key}={${valueCode(value)}}`;
+  return `${key}={${placeableTextOf(value)}}`;
 };
 
 // Attributes for every arg not already set by name, with invalid names collected in a spread.
@@ -277,7 +274,7 @@ function injectedAttributes(merged: Args, existing: ReadonlySet<string>): string
   const attrs = entries.filter(([k]) => isValidJsxAttrName(k)).map(([k, v]) => toAttr(k, v));
   const invalid = entries.filter(([k]) => !isValidJsxAttrName(k));
   if (invalid.length > 0) {
-    const members = invalid.map(([k, v]) => `${JSON.stringify(k)}: ${valueCode(v)}`);
+    const members = invalid.map(([k, v]) => `${JSON.stringify(k)}: ${placeableTextOf(v)}`);
     attrs.push(`{...{ ${members.join(', ')} }}`);
   }
   return attrs;
@@ -290,7 +287,7 @@ const toJsxChildren = (node: Node | null | undefined) =>
       ? node.value
       : isJsx(node)
         ? codeOf(node)
-        : `{${valueCode(node)}}`;
+        : `{${placeableTextOf(node)}}`;
 
 /** Return `key` if expression is `args.key` (incl. optional chaining), else `null`. */
 function getArgsMemberKey(expr: Node) {

From a27a187244d6cafd4954a863f23dab5522e185d9 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Sat, 17 Oct 2026 18:40:20 +0200
Subject: [PATCH 141/326] refactor(csf-tools): decide comment ownership from
 shared trivia primitives

Lists, statements, addon-vitest's insertion point and JSDoc extraction
each scanned comments their own way, and their rules drifted. They now
share binary-searched trivia helpers, with one policy each for list
items, statements and leading comments. Prepending or appending a
statement goes after the comments beside the previous one instead of
taking them, and removing an item no longer joins code onto a line
comment.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/updateVitestFile.statements.test.ts   |  24 ++
 code/addons/vitest/src/updateVitestFile.ts    |  46 ++-
 code/core/src/csf-tools/ConfigFile.test.ts    |  16 +
 code/core/src/csf-tools/enrichCsf.ts          |  19 +-
 code/core/src/csf-tools/estree/editor.test.ts |  87 ++++++
 code/core/src/csf-tools/estree/editor.ts      | 279 +++++++++---------
 code/core/src/csf-tools/index.ts              |   2 +
 .../automigrate/fixes/vitest-setup-file.ts    |  12 -
 .../componentManifest/generateCodeSnippet.ts  |   5 +-
 9 files changed, 294 insertions(+), 196 deletions(-)

diff --git a/code/addons/vitest/src/updateVitestFile.statements.test.ts b/code/addons/vitest/src/updateVitestFile.statements.test.ts
index a2372b17eec2..d07602296e3f 100644
--- a/code/addons/vitest/src/updateVitestFile.statements.test.ts
+++ b/code/addons/vitest/src/updateVitestFile.statements.test.ts
@@ -95,6 +95,30 @@ describe('updateConfigFile statements', () => {
     `);
   });
 
+  it('inserts the template statements above a JSDoc block starting on the last import line', () => {
+    const code = update(
+      `import react from '@vitejs/plugin-react'; /**\n * Config\n */\nexport default defineConfig({ test: {} })\n`
+    );
+
+    expect(code).toMatchInlineSnapshot(`
+      "import react from '@vitejs/plugin-react';
+      import { fileURLToPath } from 'node:url';
+      import { dirname } from 'node:path';
+      // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+      const dirname = fileURLToPath(new URL('.', import.meta.url));
+      /**
+       * Config
+       */
+      export default defineConfig({ test: {
+        projects: [{
+      extends: true,
+      test: {},
+      }, { extends: true, test: { name: 'storybook' } }],
+      } })
+      "
+    `);
+  });
+
   it('keeps a line comment trailing the last import in place', () => {
     const code = update(
       `import react from '@vitejs/plugin-react' // plugins\nexport default defineConfig({ test: {} })\n`
diff --git a/code/addons/vitest/src/updateVitestFile.ts b/code/addons/vitest/src/updateVitestFile.ts
index 651c82c27ba5..d3a1661c26d4 100644
--- a/code/addons/vitest/src/updateVitestFile.ts
+++ b/code/addons/vitest/src/updateVitestFile.ts
@@ -12,9 +12,11 @@ import {
   appendToList,
   arrayList,
   itemText,
+  lineIndent,
   reindent,
   objectList,
   prependToList,
+  statementEnd,
 } from 'storybook/internal/csf-tools';
 
 import { normalize } from 'pathe';
@@ -72,9 +74,6 @@ const elementTexts = (editor: SourceEditor, array: E.ArrayExpression) =>
 
 const indent = (text: string, prefix: string) => prefix + reindent(text, '', prefix);
 
-const lineIndentAt = (code: string, index: number) =>
-  /^[ \t]*/.exec(code.slice(code.lastIndexOf('\n', index - 1) + 1))![0];
-
 // `appendToList` re-indents multi-line items only when the list itself spans lines.
 const appendItems = (
   editor: SourceEditor,
@@ -83,7 +82,7 @@ const appendItems = (
   padding?: string
 ) => {
   const inline = list.items.length > 0 && !editor.code.slice(list.open, list.close).includes('\n');
-  const continuation = `\n${lineIndentAt(editor.code, list.open)}`;
+  const continuation = `\n${lineIndent(editor.code, list.open)}`;
   appendToList(
     editor,
     list,
@@ -237,11 +236,14 @@ const wrapTestConfigAsProject = (
 
   const config = templateConfig();
   const templateTest = findNamedProp(config.properties, 'test')!;
-  const lineIndent = lineIndentAt(target.code, existingTest.start);
   target.edits.overwrite(
     existingTest.start,
     existingTest.end,
-    reindent(itemText(source, objectList(config), templateTest), '', lineIndent)
+    reindent(
+      itemText(source, objectList(config), templateTest),
+      '',
+      lineIndent(target.code, existingTest.start)
+    )
   );
   mergeProperties(
     merge,
@@ -349,11 +351,9 @@ const missingStatements = (source: SourceEditor, target: SourceEditor) => {
   });
 };
 
-/**
- * Insert the statements on the line after the last import, keeping the comments that share its
- * line with it. A statement sharing that line moves below them instead, so the config is never
- * evaluated before the variables it reads.
- */
+// Insert the statements on the line after the last import and the comments it owns there. What
+// else shares that line moves below them, so the config never reads a variable before it is
+// declared.
 const insertStatements = (target: SourceEditor, text: string) => {
   const { code, program } = target;
   const index = program.body.findLastIndex((node) => node.type === 'ImportDeclaration');
@@ -361,24 +361,16 @@ const insertStatements = (target: SourceEditor, text: string) => {
     target.edits.appendLeft(program.body[0].start, `${text}\n\n`);
     return;
   }
-  let end = program.body[index].end;
-  for (const comment of target.comments) {
-    if (comment.start >= end && !code.slice(end, comment.start).includes('\n')) {
-      end = comment.end;
-    }
-  }
-  const next = program.body[index + 1];
-  const lineEnd = code.indexOf('\n', end);
-  if (next && (lineEnd === -1 || next.start < lineEnd)) {
-    if (next.start > end) {
-      target.edits.overwrite(end, next.start, `\n${text}\n`);
-    } else {
-      target.edits.appendLeft(next.start, `\n${text}\n`);
-    }
-  } else if (lineEnd === -1) {
+  const end = statementEnd(target, program.body[index]);
+  const next = end + /^[^\S\n]*/.exec(code.slice(end))![0].length;
+  if (next === code.length) {
     target.edits.append(`\n${text}\n`);
+  } else if (code[next] === '\n') {
+    target.edits.appendLeft(next + 1, `${text}\n`);
+  } else if (next > end) {
+    target.edits.overwrite(end, next, `\n${text}\n`);
   } else {
-    target.edits.appendLeft(lineEnd + 1, `${text}\n`);
+    target.edits.appendLeft(next, `\n${text}\n`);
   }
 };
 
diff --git a/code/core/src/csf-tools/ConfigFile.test.ts b/code/core/src/csf-tools/ConfigFile.test.ts
index f97df1e1e464..4c98ce71f1a0 100644
--- a/code/core/src/csf-tools/ConfigFile.test.ts
+++ b/code/core/src/csf-tools/ConfigFile.test.ts
@@ -1431,6 +1431,17 @@ describe('ConfigFile', () => {
       `);
     });
 
+    it('adds an import below the comment trailing the last import under a license header', () => {
+      const config = loadConfig(
+        `// Copyright Example\nimport a from 'a'; // a\nexport default {};`
+      ).parse();
+      config.setImport(['b'], 'b');
+
+      expect(printConfig(config).code).toBe(
+        `// Copyright Example\nimport a from 'a'; // a\nimport { b } from 'b';\nexport default {};`
+      );
+    });
+
     it('keeps a directive on its statement when moving the license header', () => {
       const source = dedent`
         // Copyright Example
@@ -1598,6 +1609,11 @@ describe('ConfigFile', () => {
         specifier: ['a'],
         output: `import * as ns from 'x'; // why\nimport { a } from 'x';`,
       },
+      {
+        source: `import * as ns from 'x'; /* a */ // why`,
+        specifier: ['a'],
+        output: `import * as ns from 'x'; /* a */ // why\nimport { a } from 'x';`,
+      },
       {
         source: `import foo from 'x';`,
         specifier: 'bar',
diff --git a/code/core/src/csf-tools/enrichCsf.ts b/code/core/src/csf-tools/enrichCsf.ts
index c875eb0de0e9..d568ae172383 100644
--- a/code/core/src/csf-tools/enrichCsf.ts
+++ b/code/core/src/csf-tools/enrichCsf.ts
@@ -7,6 +7,7 @@ import {
   appendMembers,
   appendStatement,
   prependMembers,
+  triviaBefore,
 } from './estree/editor.ts';
 
 export interface EnrichCsfOptions {
@@ -129,23 +130,7 @@ export const extractSource = (node: Node, code: string) => {
 
 export const leadingComments = (node: Node | undefined, editor: SourceEditor) => {
   const start = (node as { start?: number } | undefined)?.start;
-  if (start === undefined) {
-    return [];
-  }
-  const comments: E.Comment[] = [];
-  let position = start;
-  for (let index = editor.comments.length - 1; index >= 0; index--) {
-    const comment = editor.comments[index];
-    if (comment.end > position) {
-      continue;
-    }
-    if (editor.code.slice(comment.end, position).trim()) {
-      break;
-    }
-    comments.unshift(comment);
-    position = comment.start;
-  }
-  return comments;
+  return start === undefined ? [] : triviaBefore(editor, start).comments;
 };
 
 export const extractDescription = (node: Node | undefined, editor: SourceEditor) => {
diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index 042e1ac0c2ae..4c18db6f5c5e 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -13,6 +13,7 @@ import type { E } from './ast.ts';
 import { parseModule } from './ast.ts';
 import {
   SourceEditor,
+  appendStatement,
   appendToList,
   arrayList,
   prependStatement,
@@ -195,6 +196,24 @@ describe('array holes', () => {
   });
 });
 
+describe('removeFromList', () => {
+  const removeElement = (code: string, index: number) => {
+    const editor = new SourceEditor(code);
+    const array = defaultExportArray(editor);
+    removeFromList(editor, arrayList(editor, array), [array.elements[index]!]);
+    return editor.toString();
+  };
+
+  it('keeps what follows a removed item off the line of the comment before it', () => {
+    expect(removeElement(`export default { addons: ['a', /* x */ // l\n  'b', 'c'] };`, 1)).toBe(
+      `export default { addons: ['a', /* x */ // l\n 'c'] };`
+    );
+    expect(removeElement(`export default { addons: ['a', // l\n  'b'] };`, 1)).toBe(
+      `export default { addons: ['a' // l\n] };`
+    );
+  });
+});
+
 describe('removeStatement', () => {
   it('removes the leading comments with the statement', () => {
     const editor = new SourceEditor(dedent`
@@ -275,6 +294,41 @@ describe('removeStatement', () => {
     removeStatement(editor, editor.program.body[1]);
     expect(editor.toString()).toBe("import a from 'a';\r\nconst c = 2;\r\n");
   });
+
+  it('removes every comment that trails the statement on its line', () => {
+    const editor = new SourceEditor(`import a from 'a'; /* a */ // why\nimport b from 'b';`);
+    removeStatement(editor, editor.program.body[0]);
+    expect(editor.toString()).toBe(`import b from 'b';`);
+  });
+
+  it('removes a block comment that starts beside the statement', () => {
+    const editor = new SourceEditor(`const a = 1; /* a\n   continued */\nconst b = 2;`);
+    removeStatement(editor, editor.program.body[0]);
+    expect(editor.toString()).toBe(`const b = 2;`);
+  });
+
+  it('leaves a JSDoc block that starts beside the statement to the statement below', () => {
+    const code = `const a = 1; /**\n * Docs for B\n */\nexport const B = 2;`;
+    const first = new SourceEditor(code);
+    removeStatement(first, first.program.body[0]);
+    expect(first.toString()).toBe(` /**\n * Docs for B\n */\nexport const B = 2;`);
+
+    const second = new SourceEditor(code);
+    removeStatement(second, second.program.body[1]);
+    expect(second.toString()).toBe(`const a = 1; `);
+  });
+
+  it('removes a statement below a blank first line', () => {
+    const editor = new SourceEditor(`\nconst a = 1;\nconst b = 2;`);
+    removeStatement(editor, editor.program.body[0]);
+    expect(editor.toString()).toBe(`const b = 2;`);
+  });
+
+  it('leaves the comment trailing the previous statement on a shared last line', () => {
+    const editor = new SourceEditor(`import a from 'a'; /* a */ import b from 'b';`);
+    removeStatement(editor, editor.program.body[1]);
+    expect(editor.toString()).toBe(`import a from 'a'; /* a */ `);
+  });
 });
 
 describe('prependStatement', () => {
@@ -309,6 +363,32 @@ describe('prependStatement', () => {
     prependStatement(editor, `import b from 'b';`);
     expect(editor.toString()).toBe(`/** @license MIT */\nimport b from 'b';\n\nconst a = 1;`);
   });
+
+  it('inserts below the comment trailing the last import under a file header', () => {
+    const editor = new SourceEditor(
+      `// Copyright Storybook\nimport x from 'x'; // x\nconst b = 1;`
+    );
+    prependStatement(editor, `import z from 'z';`);
+    expect(editor.toString()).toBe(
+      `// Copyright Storybook\nimport x from 'x'; // x\nimport z from 'z';\nconst b = 1;`
+    );
+  });
+
+  it('inserts below a block comment that starts beside the last import', () => {
+    const editor = new SourceEditor(`// Copyright Storybook\nimport x from 'x'; /* x\n y */`);
+    prependStatement(editor, `import z from 'z';`);
+    expect(editor.toString()).toBe(
+      `// Copyright Storybook\nimport x from 'x'; /* x\n y */\nimport z from 'z';`
+    );
+  });
+});
+
+describe('appendStatement', () => {
+  it('appends below the comments trailing the last statement', () => {
+    const editor = new SourceEditor(`export const a = 1; /* a */ // a`);
+    appendStatement(editor, `export const b = 2;`);
+    expect(editor.toString()).toBe(`export const a = 1; /* a */ // a\nexport const b = 2;`);
+  });
 });
 
 describe('setImportSpecifiers', () => {
@@ -413,6 +493,13 @@ describe('trailing comments', () => {
     `);
   });
 
+  it('removes a member with every comment that trails it on its line', () => {
+    const csf = parse(`export default {\n  a: 1, /* a */ // why\n  b: 2,\n};`);
+    const [meta] = csf.objects({ stories: false });
+    meta.remove(['a']);
+    expect(printCsf(csf).code).toBe(`export default {\n  b: 2,\n};`);
+  });
+
   it('groups members with the comments that trail them', () => {
     const csf = parse(code);
     const [meta] = csf.objects({ stories: false });
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 9f92aa16cf3c..d9bb37bcbd62 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -275,82 +275,106 @@ export const printValue = (
   throw new Error(`Cannot print value of type ${typeof value}`);
 };
 
-// Index just past the next `token` at or after `from`, skipping whitespace and comments.
-const scanFor = (code: string, from: number, until: number, token: string): number | undefined => {
-  let index = from;
-  while (index < until) {
-    const char = code[index];
-    if (char === token) {
-      return index + 1;
+const lineStart = (code: string, index: number) =>
+  index > 0 ? code.lastIndexOf('\n', index - 1) + 1 : 0;
+
+const lineEnd = (code: string, index: number) => {
+  const lineBreak = code.indexOf('\n', index);
+  return lineBreak === -1 ? code.length : lineBreak;
+};
+
+// Comments are sorted and never overlap, so they are sorted by their ends too.
+const commentAt = (editor: SourceEditor, index: number, edge: 'start' | 'end') => {
+  const { comments } = editor;
+  let low = 0;
+  let high = comments.length - 1;
+  while (low <= high) {
+    const middle = (low + high) >> 1;
+    const position = comments[middle][edge];
+    if (position === index) {
+      return comments[middle];
     }
-    if (code.startsWith('//', index)) {
-      const end = code.indexOf('\n', index);
-      index = end === -1 ? until : end + 1;
-    } else if (code.startsWith('/*', index)) {
-      const end = code.indexOf('*/', index + 2);
-      index = end === -1 ? until : end + 2;
-    } else if (/\s/.test(char)) {
-      index++;
+    if (position < index) {
+      low = middle + 1;
     } else {
-      return undefined;
+      high = middle - 1;
     }
   }
   return undefined;
 };
 
-/**
- * A comma-separated list in the source: object members, array elements, import specifiers. `open`
- * is the index right after the opening token, `close` the index of the closing token.
- */
-export interface List {
-  open: number;
-  close: number;
-  items: readonly Span[];
-}
+const SPACE = /\s/;
+const SPACE_ON_LINE = /[^\S\n]/;
 
-const nextTokenStart = (code: string, comments: readonly Span[], index: number) => {
-  let next = index;
-  while (next < code.length) {
-    const comment = comments.find((candidate) => candidate.start === next);
+// The comments from `index` on with only `space` around them, and the end of that run.
+const triviaAfter = (editor: SourceEditor, index: number, space = SPACE) => {
+  const { code } = editor;
+  const comments: E.Comment[] = [];
+  let end = index;
+  while (end < code.length) {
+    const comment = commentAt(editor, end, 'start');
     if (comment) {
-      next = comment.end;
-    } else if (/\s/.test(code[next])) {
-      next++;
+      comments.push(comment);
+      end = comment.end;
+    } else if (space.test(code[end])) {
+      end++;
     } else {
       break;
     }
   }
-  return next;
+  return { comments, end };
 };
 
-const previousTokenEnd = (code: string, comments: readonly Span[], index: number) => {
-  let previous = index;
-  while (previous > 0) {
-    const comment = comments.find((candidate) => candidate.end === previous);
+// The comments up to `index` with only whitespace around them, and the start of that run.
+export const triviaBefore = (editor: SourceEditor, index: number) => {
+  const { code } = editor;
+  const comments: E.Comment[] = [];
+  let start = index;
+  while (start > 0) {
+    const comment = commentAt(editor, start, 'end');
     if (comment) {
-      previous = comment.start;
-    } else if (/\s/.test(code[previous - 1])) {
-      previous--;
+      comments.unshift(comment);
+      start = comment.start;
+    } else if (SPACE.test(code[start - 1])) {
+      start--;
     } else {
       break;
     }
   }
-  return previous;
+  return { comments, start };
 };
 
+const nextTokenStart = (editor: SourceEditor, index: number) => triviaAfter(editor, index).end;
+
+const previousTokenEnd = (editor: SourceEditor, index: number) => triviaBefore(editor, index).start;
+
+// The comments after `index` on its line; a block comment may carry the run onto a later line.
+const commentsBeside = (editor: SourceEditor, index: number) =>
+  triviaAfter(editor, index, SPACE_ON_LINE);
+
+/**
+ * A comma-separated list in the source: object members, array elements, import specifiers. `open`
+ * is the index right after the opening token, `close` the index of the closing token.
+ */
+export interface List {
+  open: number;
+  close: number;
+  items: readonly Span[];
+}
+
 /** The `{ … }` of an import or export with at least one named specifier. */
 export const specifierList = (
   editor: SourceEditor,
   declaration: E.ImportDeclaration | E.ExportNamedDeclaration
 ): List => {
-  const { code, comments } = editor;
+  const { code } = editor;
   const items = declaration.specifiers.filter(
     (specifier) => specifier.type === 'ImportSpecifier' || specifier.type === 'ExportSpecifier'
   );
-  const afterLast = nextTokenStart(code, comments, items.at(-1)!.end);
+  const afterLast = nextTokenStart(editor, items.at(-1)!.end);
   return {
-    open: previousTokenEnd(code, comments, items[0].start),
-    close: code[afterLast] === ',' ? nextTokenStart(code, comments, afterLast + 1) : afterLast,
+    open: previousTokenEnd(editor, items[0].start),
+    close: code[afterLast] === ',' ? nextTokenStart(editor, afterLast + 1) : afterLast,
     items,
   };
 };
@@ -366,7 +390,6 @@ const isHole = (item: Span) => item.start === item.end;
 
 // An element's item spans the parentheses around it.
 export const arrayList = (editor: SourceEditor, array: E.ArrayExpression): List => {
-  const { code, comments } = editor;
   const open = array.start + 1;
   const close = array.end - 1;
   let cursor = open;
@@ -375,27 +398,24 @@ export const arrayList = (editor: SourceEditor, array: E.ArrayExpression): List
     if (element) {
       item = outerSpan(element);
     } else {
-      const comma = nextTokenStart(code, comments, cursor);
+      const comma = nextTokenStart(editor, cursor);
       item = { start: comma, end: comma };
     }
-    const next = nextTokenStart(code, comments, item.end);
-    cursor = code[next] === ',' ? next + 1 : next;
+    cursor = separatorAfter(editor, item) ?? item.end;
     return item;
   });
   return { open, close, items };
 };
 
 // Position right after the comma that follows an item, if it has one.
-const separatorAfter = (code: string, list: List, index: number) => {
-  const item = list.items[index];
-  const until = list.items[index + 1]?.start ?? list.close;
-  return scanFor(code, item.end, until, ',');
+const separatorAfter = (editor: SourceEditor, item: Span) => {
+  const next = nextTokenStart(editor, item.end);
+  return editor.code[next] === ',' ? next + 1 : undefined;
 };
 
-export const lineIndent = (code: string, index: number) => {
-  const lineStart = code.lastIndexOf('\n', index - 1) + 1;
-  return /^[ \t]*/.exec(code.slice(lineStart))![0];
-};
+/** Leading whitespace of the line that `index` is on. */
+export const lineIndent = (code: string, index: number) =>
+  /^[ \t]*/.exec(code.slice(lineStart(code, index)))![0];
 
 /** Indent step of the file: from an object's line to its first member's, else two spaces. */
 export const indentUnit = (code: string, object: E.ObjectExpression | undefined) => {
@@ -489,26 +509,21 @@ const dedentSource = (editor: SourceEditor, start: number, end: number, from: st
     : reindentLines(text, from, '', literalSpans(editor.program, { start, end }));
 };
 
-// The comment after `index` on its line, when nothing else follows it there.
-const trailingComment = (editor: SourceEditor, index: number) => {
-  const { code } = editor;
-  const lineBreak = code.indexOf('\n', index);
-  const lineEnd = lineBreak === -1 ? code.length : lineBreak;
-  const comment = editor.comments.find(
-    (candidate) => candidate.start >= index && candidate.end <= lineEnd
-  );
-  const alone =
-    comment && !code.slice(index, comment.start).trim() && !code.slice(comment.end, lineEnd).trim();
-  return alone ? comment : undefined;
+// An item owns the comments after its separator when they end the line. Followed by code on that
+// line, they lead the next item instead.
+const trailingComments = (editor: SourceEditor, separatorEnd: number) => {
+  const { comments, end } = commentsBeside(editor, separatorEnd);
+  return end === editor.code.length || editor.code[end] === '\n' ? comments : [];
 };
 
-// End of an item with its separator and the comment that trails them on their line.
+// End of an item with its separator and the comments that trail them.
 const itemEnd = (editor: SourceEditor, list: List, index: number) => {
-  const end = separatorAfter(editor.code, list, index) ?? list.items[index].end;
-  return trailingComment(editor, end)?.end ?? end;
+  const item = list.items[index];
+  const end = separatorAfter(editor, item) ?? item.end;
+  return trailingComments(editor, end).at(-1)?.end ?? end;
 };
 
-// Start of what an item owns: after the separator before it and the comment trailing that.
+// Start of what an item owns: after the separator before it and the comments trailing that.
 const itemStart = (editor: SourceEditor, list: List, index: number) =>
   index === 0 ? list.open : itemEnd(editor, list, index - 1);
 
@@ -523,14 +538,15 @@ const itemTextWith = (
   const item = list.items[index];
   const from = itemStart(editor, list, index);
   const text = print(from + /^\s*/.exec(code.slice(from, item.start))![0].length);
-  const end = separatorAfter(code, list, index) ?? item.end;
-  const comment = trailingComment(editor, end);
-  return comment ? `${editor.source(comment)}\n${text}` : text;
+  const trailing = trailingComments(editor, separatorAfter(editor, item) ?? item.end);
+  return trailing.length > 0
+    ? `${code.slice(trailing[0].start, trailing.at(-1)!.end)}\n${text}`
+    : text;
 };
 
 /**
- * Text of an item including the comments that lead it, with continuation lines dedented. A
- * comment that trails the item on its line moves above it, so a comma can follow the text.
+ * Text of an item including the comments that lead it, with continuation lines dedented. The
+ * comments that trail the item on its line move above it, so a comma can follow the text.
  */
 export const itemText = (editor: SourceEditor, list: List, item: Span) =>
   itemTextWith(editor, list, list.items.indexOf(item), (start) =>
@@ -577,7 +593,7 @@ export const appendToList = (
     return;
   }
   const last = items.at(-1)!;
-  const comma = separatorAfter(code, list, items.length - 1);
+  const comma = separatorAfter(editor, last);
   // The comma of a hole writes the hole, so it is no trailing comma to keep.
   const trailingComma = comma === undefined || isHole(last) ? '' : ',';
   if (isMultiline(code, list)) {
@@ -635,15 +651,21 @@ export const removeFromList = (editor: SourceEditor, list: List, removedItems: r
     if (!removed.has(item)) {
       return;
     }
-    if (index > lastKept && separatorAfter(code, list, index) === undefined) {
+    if (index > lastKept && separatorAfter(editor, item) === undefined) {
       // Trailing item without a comma: drop the comma of the last kept item instead, unless that
       // comma writes a hole.
       const previous = items[lastKept];
       if (!isHole(previous)) {
-        edits.remove(previous.end, separatorAfter(code, list, lastKept)!);
+        edits.remove(previous.end, separatorAfter(editor, previous)!);
       }
     }
-    edits.remove(itemStart(editor, list, index), itemEnd(editor, list, index));
+    const start = itemStart(editor, list, index);
+    const end = itemEnd(editor, list, index);
+    // Code after the item on its line must not join the line of a line comment before it.
+    const joins =
+      commentAt(editor, start, 'end')?.type === 'Line' &&
+      code.slice(end, lineEnd(code, end)).trim();
+    edits.remove(joins ? lineEnd(code, start) + 1 : start, end);
   });
 };
 
@@ -665,8 +687,8 @@ export const groupMembers = (
   const first = list.items.indexOf(members[0]);
   const multiline = editor.code.slice(object.start, object.end).includes('\n');
   removeMembers(editor, object, members.slice(1));
-  const before = editor.code.slice(0, members[0].start);
-  const indent = /[ \t]*$/.exec(before.slice(before.lastIndexOf('\n') + 1))![0];
+  const { start } = members[0];
+  const indent = /[ \t]*$/.exec(editor.code.slice(lineStart(editor.code, start), start))![0];
   const inner = multiline
     ? reindent(printMembers(texts, indentUnit(editor.code, object)), '', indent)
     : `{ ${texts.join(', ')} }`;
@@ -677,7 +699,7 @@ export const groupMembers = (
     members[0].end,
     `${lead}${printKey(key, editor.quote)}: ${inner}`
   );
-  const comma = separatorAfter(editor.code, list, first) ?? members[0].end;
+  const comma = separatorAfter(editor, members[0]) ?? members[0].end;
   if (itemEnd(editor, list, first) > comma) {
     editor.edits.remove(comma, itemEnd(editor, list, first));
   }
@@ -734,6 +756,29 @@ export const headerComments = (editor: SourceEditor): E.Comment[] => {
   );
 };
 
+/**
+ * The end of a statement past the comments that follow it on its line, even when another statement
+ * follows them. A JSDoc block that runs onto later lines documents the statement below instead.
+ */
+export const statementEnd = (editor: SourceEditor, statement: Span) => {
+  const { comments } = commentsBeside(editor, statement.end);
+  const docs = comments.findIndex(
+    (comment) => isJSDoc(comment) && editor.source(comment).includes('\n')
+  );
+  return (docs === -1 ? comments : comments.slice(0, docs)).at(-1)?.end ?? statement.end;
+};
+
+// A statement leads with the comments between it and the end of the statement before it. The
+// file header above the first statement is not part of it.
+const leadingComments = (editor: SourceEditor, statement: Span): E.Comment[] => {
+  const previous = editor.program.body.findLast((node) => node.end <= statement.start);
+  const from = previous ? statementEnd(editor, previous) : 0;
+  const header = new Set(previous ? [] : headerComments(editor));
+  return editor.comments.filter(
+    (comment) => comment.start >= from && comment.end <= statement.start && !header.has(comment)
+  );
+};
+
 /**
  * Insert a statement before the first non-directive statement, above its leading comments. A file
  * header stays first: the statement goes below the leading imports, or below the header itself.
@@ -754,7 +799,7 @@ export const prependStatement = (editor: SourceEditor, text: string) => {
     const imports = statements.findIndex((statement) => statement.type !== 'ImportDeclaration');
     const lastImport = imports === -1 ? statements.at(-1) : statements[imports - 1];
     if (lastImport) {
-      editor.edits.appendLeft(lastImport.end, `\n${text}`);
+      editor.edits.appendLeft(statementEnd(editor, lastImport), `\n${text}`);
       return;
     }
     const headerEnd = header.at(-1)!.end;
@@ -774,67 +819,28 @@ export const appendStatement = (editor: SourceEditor, text: string) => {
     );
     return;
   }
-  editor.edits.appendLeft(last.end, `\n${text}`);
-};
-
-/**
- * Comments that lead a statement on their own lines, above it. The file header stays when the
- * first statement is removed.
- */
-export const leadingComments = (editor: SourceEditor, statement: Span): E.Comment[] => {
-  const { code, comments } = editor;
-  const previous = editor.program.body.filter((node) => node.end <= statement.start).at(-1);
-  const previousLineEnd = previous ? code.indexOf('\n', previous.end) : -1;
-  const from = previousLineEnd === -1 && previous ? previous.end : previousLineEnd + 1;
-  const header = new Set(previous ? [] : headerComments(editor));
-  return comments.filter(
-    (comment) => comment.start >= from && comment.end <= statement.start && !header.has(comment)
-  );
-};
-
-/**
- * Remove a statement with the comments that lead it and the comment that trails it on its line,
- * and the line itself when nothing else shares it.
- */
-/** The end of a statement, past a comment that trails it on the same line. */
-export const statementEnd = (editor: SourceEditor, statement: Span) => {
-  const { code } = editor;
-  const lineEnd = code.indexOf('\n', statement.end);
-  const trailing = editor.comments.find(
-    (comment) =>
-      comment.start >= statement.end &&
-      (lineEnd === -1 || comment.start < lineEnd) &&
-      !code.slice(statement.end, comment.start).trim()
-  );
-  return trailing && (lineEnd === -1 || trailing.end <= lineEnd) ? trailing.end : statement.end;
+  editor.edits.appendLeft(statementEnd(editor, last), `\n${text}`);
 };
 
+/** Remove a statement with the comments it owns, and its lines when nothing else shares them. */
 export const removeStatement = (editor: SourceEditor, statement: Span, atTop?: boolean) => {
   const { code } = editor;
-  const first = leadingComments(editor, statement)[0];
-  const start = (first ?? statement).start;
-  const lineStart = code.lastIndexOf('\n', start - 1) + 1;
-  const lineEnd = code.indexOf('\n', statement.end);
+  const start = (leadingComments(editor, statement)[0] ?? statement).start;
   const end = statementEnd(editor, statement);
-  const before = code.slice(lineStart, start);
-  const after = code.slice(end, lineEnd === -1 ? code.length : lineEnd);
-  if (before.trim() || after.trim()) {
+  const lineBreak = lineEnd(code, end);
+  let from = lineStart(code, start);
+  if (code.slice(from, start).trim() || code.slice(end, lineBreak).trim()) {
     editor.edits.remove(start, end);
     return;
   }
   // The statement takes the blank lines above it, so none are left behind; at the top of the
   // file it takes the ones below instead.
-  const top = atTop ?? lineStart === 0;
-  let from = lineStart;
-  let to = lineEnd === -1 ? code.length : lineEnd + 1;
-  if (top) {
+  let to = Math.min(lineBreak + 1, code.length);
+  if (atTop ?? from === 0) {
     to += /^\s*/.exec(code.slice(to))![0].length;
   } else {
-    while (
-      from > 0 &&
-      /^[ \t]*\r?\n$/.test(code.slice(code.lastIndexOf('\n', from - 2) + 1, from))
-    ) {
-      from = code.lastIndexOf('\n', from - 2) + 1;
+    while (from > 0 && !code.slice(lineStart(code, from - 1), from).trim()) {
+      from = lineStart(code, from - 1);
     }
   }
   editor.edits.remove(from, to);
@@ -926,11 +932,10 @@ const keyRange = (editor: SourceEditor, member: Property): Span => {
   if (!member.computed) {
     return member.key;
   }
-  const { code, comments } = editor;
   const key = outerSpan(member.key);
   return {
-    start: previousTokenEnd(code, comments, key.start) - 1,
-    end: nextTokenStart(code, comments, key.end) + 1,
+    start: previousTokenEnd(editor, key.start) - 1,
+    end: nextTokenStart(editor, key.end) + 1,
   };
 };
 
diff --git a/code/core/src/csf-tools/index.ts b/code/core/src/csf-tools/index.ts
index 8fe4a7efad4a..870a07f5d242 100644
--- a/code/core/src/csf-tools/index.ts
+++ b/code/core/src/csf-tools/index.ts
@@ -39,6 +39,7 @@ export {
   arrayList,
   headerComments,
   itemText,
+  lineIndent,
   objectList,
   prependMembers,
   prependStatement,
@@ -53,4 +54,5 @@ export {
   removeStatements,
   setImportSpecifiers,
   specifierList,
+  statementEnd,
 } from './estree/editor.ts';
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/vitest-setup-file.ts b/code/lib/cli-storybook/src/automigrate/fixes/vitest-setup-file.ts
index 6b6acf7968cc..54fe24ba53f6 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/vitest-setup-file.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/vitest-setup-file.ts
@@ -10,7 +10,6 @@ import {
   type ESTree as E,
   type ESTreeNode as Node,
   SourceEditor,
-  headerComments,
   walk,
   removeStatements,
   setImportSpecifiers,
@@ -500,17 +499,6 @@ export function transformSetupFile(
       setImportSpecifiers(editor, declaration, kept);
     }
   }
-  const [first] = program.body;
-  if (removedStatements.has(first)) {
-    // Comments below the file header, such as `eslint-disable-next-line`, apply to the removed statement
-    const header = new Set(headerComments(editor));
-    const leading = editor.comments.find(
-      (comment) => comment.end <= first.start && !header.has(comment)
-    );
-    if (leading) {
-      editor.edits.remove(leading.start, first.start);
-    }
-  }
   removeStatements(editor, removedStatements);
 
   return { kind: 'rewritten', code: editor.toString() };
diff --git a/code/renderers/react/src/componentManifest/generateCodeSnippet.ts b/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
index 06ee959afad8..ce2e40c51f77 100644
--- a/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
+++ b/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
@@ -11,6 +11,7 @@ import {
   createStoryArgsResolver,
   isCanonicalCsf2BindCall,
   isStringLiteral,
+  lineIndent,
   metaObject,
   normalizeStoryDeclaration,
   parseModule,
@@ -228,9 +229,7 @@ function printRange(code: string, range: { start: number; end: number }, edits:
   }
   text += code.slice(cursor, range.end);
 
-  const lineStart = code.lastIndexOf('\n', range.start - 1) + 1;
-  const indent = /^[ \t]*/.exec(code.slice(lineStart))?.[0] ?? '';
-  return reindent(text, indent, '');
+  return reindent(text, lineIndent(code, range.start), '');
 }
 
 // Whether code still reads the `args` parameter, so the snippet has to keep declaring it.

From e47441c1fc1fa1edb427348473a6fafe60077a34 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Sat, 17 Oct 2026 19:46:39 +0200
Subject: [PATCH 142/326] refactor(csf-tools): normalize line endings to LF
 where source enters

The editor kept CRLF and converted inserted text back, the printers
stripped it again, and seven other places handled a stray CR. Source
text is now normalized once before parsing, so offsets, edits and
printed code are LF everywhere; lines and columns are unchanged, and
source maps still name the file as written. Automigrations write the
files they change with LF. writeCsf without a file name now writes
back to the file it was read from.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 MIGRATION.md                                  |  4 +-
 .../csf-plugin/rollup-based-plugin.test.ts    | 22 +++++++++
 .../src/csf-plugin/webpack-loader.test.ts     | 17 +++++++
 .../src/updateVitestFile.statements.test.ts   |  4 +-
 .../utils/warnWhenUsingArgTypesRegex.ts       |  4 +-
 code/core/src/csf-tools/ConfigFile.ts         |  8 ++--
 code/core/src/csf-tools/ConfigObject.test.ts  |  1 -
 code/core/src/csf-tools/CsfFile.test.ts       | 30 +++++++-----
 code/core/src/csf-tools/CsfFile.ts            | 10 ++--
 code/core/src/csf-tools/CsfFile.write.test.ts | 35 ++++++++++++++
 code/core/src/csf-tools/CsfObject.test.ts     | 19 --------
 code/core/src/csf-tools/enrichCsf.test.ts     |  2 +-
 code/core/src/csf-tools/enrichCsf.ts          |  7 ++-
 code/core/src/csf-tools/estree/ast.test.ts    | 26 +++++++---
 code/core/src/csf-tools/estree/ast.ts         | 16 +++++--
 code/core/src/csf-tools/estree/editor.test.ts | 34 ++++++++++++--
 code/core/src/csf-tools/estree/editor.ts      | 47 ++++++++++---------
 code/core/src/csf-tools/index.ts              |  1 +
 .../component-transformer.test.ts             |  4 +-
 .../vitest-plugin/transformer.test.ts         |  4 +-
 .../csf-tools/vitest-plugin/transformer.ts    |  7 ++-
 code/core/src/mocking-utils/automock.test.ts  | 13 +++++
 code/core/src/mocking-utils/automock.ts       |  8 ++--
 code/core/src/mocking-utils/extract.test.ts   |  8 ++++
 code/core/src/mocking-utils/extract.ts        | 22 +++++----
 .../src/docgen/story-docs-args.ts             |  6 +--
 .../src/plugins/server-code-elimination.ts    |  7 +--
 .../src/automigrate/fix-files.test.ts         | 13 +++++
 .../src/automigrate/fix-files.ts              | 11 +++--
 .../fixes/addon-svelte-csf-to-core.test.ts    |  4 +-
 .../fixes/addon-svelte-csf-to-core.ts         | 12 ++---
 .../src/automigrate/pipeline.test.ts          | 12 +----
 .../cli-storybook/src/automigrate/pipeline.ts |  6 +--
 .../src/docgen/story-docs/build-story-docs.ts |  2 +-
 .../transform-template.test.ts                | 21 +++++++--
 .../transform-template/transform-template.ts  | 30 ++++--------
 36 files changed, 308 insertions(+), 169 deletions(-)
 create mode 100644 code/core/src/csf-tools/CsfFile.write.test.ts

diff --git a/MIGRATION.md b/MIGRATION.md
index 475e28aa6aac..d402893a5120 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1321,6 +1321,7 @@ Storybook no longer bundles Babel or recast to read and write story and config f
 
 - **Flow syntax is no longer supported in story files.** Babel parsed `// @flow` files with its Flow plugin; OXC does not parse Flow. A `// @flow` file whose syntax is also valid TypeScript still indexes, but Flow-only syntax such as variance (`+readOnly`) or type casts (`(value: Type)`) is a parse error, and the error names Flow. Convert such files to TypeScript or plain JavaScript.
 - `parameters.docs.source.originalSource` is now the story's source text exactly as written, where Babel reprinted it with its own formatting. "Show code" and `docs.source.transform` functions receive the authored text, with line endings normalized to `\n`.
+- `storybook automigrate` writes the files it changes with `\n` line endings, even if they used CRLF; it used to keep CRLF.
 - Parse errors use OXC's wording, and end with ` in <file>` when the file name is known. Duplicate declarations and legacy octal literals are still rejected.
 - A parse error in a module that `sb.mock()` automocks under webpack now fails that module's build, where Babel's error recovery used to mock whatever it could parse.
 
@@ -1331,11 +1332,12 @@ Storybook no longer bundles Babel or recast to read and write story and config f
 - `CsfObject#get` returns an ESTree expression, and `set`/`transform` accept expressions from `get()` or `parseExpression(code)`. Use `printExpression(node)` to read an expression's source, and `placeableTextOf(node)` to build new code around it.
 - An `experimental_enrichCsf` function receives the new `CsfFile`. Add code with `csf._appendStatement(code)` instead of pushing Babel nodes onto `csf._ast`.
 - `babelParse` is removed; use `parseModule(code, fileName)` from `storybook/internal/csf-tools`, which returns the ESTree `program` and `comments`. `babelParseFile` is removed as well; read CSF with `loadCsf(code, options)` or `readCsf(fileName, options)`.
+- Parsing normalizes line endings to `\n`. Node offsets from `parseModule`, `CsfFile._program` and `ConfigFile._program` index the normalized `code`/`_code`, not the string you passed in; lines and columns are unchanged.
 - `getHeaderComments(statement)` is replaced by `headerComments(editor)`.
 - The story-shape helpers no longer take Babel paths: `jsDocTagsForPath` is `jsDocTagsForNode`, `metaObjectPath` is `metaObject`, `RenderFunctionPath` is `RenderFunction`, and `pathForNode` and `returnedExpressionPath` are removed in favor of `returnedExpression` and plain nodes.
 - The `getAbsolutePath` wrapper helpers in `storybook/internal/common` produce source text instead of Babel nodes. `getAbsolutePathWrapperAsCallExpression(isTs, names)`, which returned the wrapper's function declaration, is replaced by `getAbsolutePathWrapperDeclaration(isTs, names)`, which returns the declaration's source for `ConfigFile#setBodyDeclaration`. `getAbsolutePathCall(config, value)` returns the source of a call to the config's wrapper. `wrapValueWithGetAbsolutePathWrapper(config, node)` is replaced by `wrapValuesWithGetAbsolutePathWrapper(config, nodes)`, which wraps every node in the array and commits the edits to `config`.
 - `new CsfFile(code, options)` and `new ConfigFile(code, fileName)` take source code instead of a Babel AST.
-- `formatCsf(csf, { sourceMaps, sourceFileName, inputSourceMap })` replaces the Babel generator options; `printCsf` and `printConfig` take no options and always print with `\n` line endings.
+- `formatCsf(csf, { sourceMaps, sourceFileName, inputSourceMap })` replaces the Babel generator options; `printCsf` and `printConfig` take no options, and all three print with `\n` line endings.
 - `ConfigFile#setBodyDeclaration(code)` takes the declaration's source text instead of a Babel node.
 - The Vitest config helpers `canUpdateVitestConfigFile`, `getTargetConfigObject`, `getEffectiveMergeConfigCall`, `getConfigObjectFromMergeArg` and `resolveExpression` moved from `storybook/internal/babel` to `storybook/internal/cli`. `canUpdateVitestConfigFile` still takes the file's source; the others take an ESTree `Program`, such as `parseModule(code, fileName).program`, instead of a Babel `File`, and return ESTree nodes. `isDefineConfigLike` and `isImportedDefineConfigLikeIdentifier` are no longer exported. `unwrapTSExpression` is now `unwrapESTreeExpression` in `storybook/internal/csf-tools`, and also unwraps non-null assertions (`value!`).
 
diff --git a/code/addons/docs/src/csf-plugin/rollup-based-plugin.test.ts b/code/addons/docs/src/csf-plugin/rollup-based-plugin.test.ts
index a24b2b556718..911f295e2595 100644
--- a/code/addons/docs/src/csf-plugin/rollup-based-plugin.test.ts
+++ b/code/addons/docs/src/csf-plugin/rollup-based-plugin.test.ts
@@ -110,6 +110,28 @@ describe('rollupBasedPlugin', () => {
     expect(entry).toMatchObject({ originalLine: positionOf(originalCode, 'play:').line });
     expect(result.map.sourcesContent).toEqual([originalCode]);
   });
+
+  it('prints a CRLF story file with LF, maps it line for line and keeps its content as written', async () => {
+    const crlf = originalCode.replaceAll('\n', '\r\n');
+    vol.fromJSON({ [id]: crlf });
+
+    const result = await transformCsf(crlf, id, {});
+    if (typeof result !== 'object') {
+      throw new Error('expected a transform result with a sourcemap');
+    }
+
+    expect(result.code).not.toMatch(/\r|\\r/);
+    const output = positionOf(result.code, 'play:');
+    const entry = new SourceMap(result.map as unknown as SourceMapPayload).findEntry(
+      output.line,
+      output.column
+    );
+    expect(entry).toMatchObject({
+      originalLine: positionOf(originalCode, 'play:').line,
+      originalColumn: positionOf(originalCode, 'play:').column,
+    });
+    expect(result.map.sourcesContent).toEqual([crlf]);
+  });
 });
 
 describe('transformCsf', () => {
diff --git a/code/addons/docs/src/csf-plugin/webpack-loader.test.ts b/code/addons/docs/src/csf-plugin/webpack-loader.test.ts
index cd08e249baac..609bd5016a73 100644
--- a/code/addons/docs/src/csf-plugin/webpack-loader.test.ts
+++ b/code/addons/docs/src/csf-plugin/webpack-loader.test.ts
@@ -99,4 +99,21 @@ describe('webpack loader', () => {
     const entry = new SourceMap(result.map).findEntry(output.line, output.column);
     expect(entry).toMatchObject({ originalLine: positionOf(originalCode, 'play:').line });
   });
+
+  it('prints a CRLF story file with LF and maps it through the incoming source map', async () => {
+    const crlf = originalCode.replaceAll('\n', '\r\n');
+    vol.fromJSON({ [id]: crlf });
+    const transpiled = transpile(crlf);
+
+    const result = await run(transpiled.code, transpiled.map);
+
+    expect(result.code).not.toMatch(/\r|\\r/);
+    const output = positionOf(result.code, 'play:');
+    const entry = new SourceMap(result.map).findEntry(output.line, output.column);
+    expect(entry).toMatchObject({
+      originalLine: positionOf(originalCode, 'play:').line,
+      originalColumn: positionOf(originalCode, 'play:').column,
+    });
+    expect(result.map.sourcesContent).toEqual([crlf]);
+  });
 });
diff --git a/code/addons/vitest/src/updateVitestFile.statements.test.ts b/code/addons/vitest/src/updateVitestFile.statements.test.ts
index d07602296e3f..6b3ff2fe07be 100644
--- a/code/addons/vitest/src/updateVitestFile.statements.test.ts
+++ b/code/addons/vitest/src/updateVitestFile.statements.test.ts
@@ -159,13 +159,13 @@ describe('updateConfigFile statements', () => {
     `);
   });
 
-  it('keeps CRLF line endings', () => {
+  it('writes a CRLF config with LF line endings', () => {
     const code = update(
       `import react from '@vitejs/plugin-react';\r\nexport default defineConfig({ test: {} });\r\n`
     );
 
     expect(code).toContain('const dirname');
-    expect(code.replaceAll('\r\n', '')).not.toContain('\n');
+    expect(code).not.toContain('\r');
   });
 
   it.each([
diff --git a/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts b/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts
index 1b931a9160d4..d14257c77643 100644
--- a/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts
+++ b/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts
@@ -23,7 +23,7 @@ export async function warnWhenUsingArgTypesRegex(
     ) ?? false;
 
   if (hasVisualTestAddon && previewConfigPath && previewContent.includes('argTypesRegex')) {
-    const { program } = parseModule(previewContent, previewConfigPath);
+    const { program, code } = parseModule(previewContent, previewConfigPath);
     walk(program, (node) => {
       if (node.type === 'Identifier' && node.name === 'argTypesRegex') {
         const message = dedent`
@@ -31,7 +31,7 @@ export async function warnWhenUsingArgTypesRegex(
             'actions.argTypesRegex'
           )} together with the visual test addon:
           
-          ${codeFrame(previewConfigPath, previewContent, node.start)}
+          ${codeFrame(previewConfigPath, code, node.start)}
           
           We recommend removing the ${picocolors.cyan(
             'argTypesRegex'
diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index 8f5d4e52aad4..bb91c57c4d92 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -1247,10 +1247,12 @@ export const formatConfig = (config: ConfigFile): string => {
   return printConfig(config).code;
 };
 
-/** Print the config with its edits; untouched code is preserved byte for byte. */
+/**
+ * Print the config with its edits and `\n` line endings; untouched code is otherwise preserved
+ * byte for byte.
+ */
 export const printConfig = (config: ConfigFile): PrintResultType => {
-  // Written files always use LF line endings, whatever the input used.
-  const code = config._editorSource.toString().replace(/\r\n?/g, '\n');
+  const code = config._editorSource.toString();
   return { code, toString: () => code };
 };
 
diff --git a/code/core/src/csf-tools/ConfigObject.test.ts b/code/core/src/csf-tools/ConfigObject.test.ts
index edd566621bc2..94859e7197e4 100644
--- a/code/core/src/csf-tools/ConfigObject.test.ts
+++ b/code/core/src/csf-tools/ConfigObject.test.ts
@@ -80,7 +80,6 @@ describe('ConfigFile mutations', () => {
     expect(config.set(['tags'], ['autodocs']).ok).toBe(true);
 
     const result = printConfig(config);
-    // Recast defaults to `os.EOL`; printed files must stay LF on Windows too.
     expect(result.code).not.toContain('\r');
     // Freshly generated nodes must reuse the source's quote style, which is
     // only inferable when token offsets align with the original code.
diff --git a/code/core/src/csf-tools/CsfFile.test.ts b/code/core/src/csf-tools/CsfFile.test.ts
index bd6a47e93872..09f7985b676a 100644
--- a/code/core/src/csf-tools/CsfFile.test.ts
+++ b/code/core/src/csf-tools/CsfFile.test.ts
@@ -36,19 +36,23 @@ const transform = (code: string, options: Partial<CsfOptions> = { makeTitle }) =
 };
 
 describe('CsfFile', () => {
-  it('prints CRLF sources with LF output', async () => {
-    const os = (await import('node:os')).default;
-    const original = os.EOL;
-    Object.defineProperty(os, 'EOL', { value: '\r\n' });
-    try {
-      const source = ['export default { title: "foo/bar" };', '', 'export const Story = {};'].join(
-        '\r\n'
-      );
-      const csf = loadCsf(source, { makeTitle }).parse();
-      expect(printCsf(csf).code).not.toContain('\r');
-    } finally {
-      Object.defineProperty(os, 'EOL', { value: original });
-    }
+  it('prints an edited CRLF source with LF line endings', () => {
+    const source = ['export default { title: "foo/bar" };', '', 'export const Story = {};'].join(
+      '\r\n'
+    );
+    const csf = loadCsf(source, { makeTitle }).parse();
+    const [story] = csf.objects({ meta: false });
+    story.set(['args', 'label'], 'Hi');
+    expect(printCsf(csf).code).toBe(
+      'export default { title: "foo/bar" };\n\nexport const Story = { args: { label: "Hi" } };'
+    );
+  });
+
+  it('reports the line and column of a CSF error in a CRLF source', () => {
+    const source = ['const title = "foo";', 'export default { title: `${title}/bar` };'].join(
+      '\r\n'
+    );
+    expect(() => loadCsf(source, { makeTitle }).parse()).toThrow('(line 2, col 24)');
   });
 
   describe('basic', () => {
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index 815280b146be..addc7e923363 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -1232,10 +1232,12 @@ export const formatCsf = (
   };
 };
 
-/** Print the file with its pending edits; untouched code is preserved byte for byte. */
+/**
+ * Print the file with its pending edits and `\n` line endings; untouched code is otherwise
+ * preserved byte for byte.
+ */
 export const printCsf = (csf: CsfFile): PrintResultType => {
-  // Written files always use LF line endings, whatever the input used.
-  const code = csf._editor.toString().replace(/\r\n?/g, '\n');
+  const code = csf._editor.toString();
   return { code, toString: () => code };
 };
 
@@ -1250,7 +1252,7 @@ export const writeCsf = async (csf: CsfFile, fileName?: string) => {
   if (!fname) {
     throw new Error('Please specify a fileName for writeCsf');
   }
-  await writeFile(fileName as string, printCsf(csf).code);
+  await writeFile(fname, printCsf(csf).code);
 };
 
 export { isFunction };
diff --git a/code/core/src/csf-tools/CsfFile.write.test.ts b/code/core/src/csf-tools/CsfFile.write.test.ts
new file mode 100644
index 000000000000..9c7f0d469703
--- /dev/null
+++ b/code/core/src/csf-tools/CsfFile.write.test.ts
@@ -0,0 +1,35 @@
+import { writeFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { fs, vol } from 'memfs';
+
+import { loadCsf, writeCsf } from './CsfFile.ts';
+
+vi.mock('node:fs/promises', { spy: true });
+
+const fileName = resolve('Button.stories.ts');
+const source = "export default { title: 'Button' };\r\nexport const Primary = {};\r\n";
+
+beforeEach(() => {
+  vol.reset();
+  vol.fromJSON({ [fileName]: source });
+  vi.mocked(writeFile).mockImplementation(async (file, data) => {
+    await fs.promises.writeFile(file.toString(), data.toString());
+  });
+});
+
+describe('writeCsf', () => {
+  it('writes an edited CRLF file back to the file it was loaded from, with LF', async () => {
+    const csf = loadCsf(source, { fileName, makeTitle: (title) => title ?? 'Untitled' }).parse();
+    const [story] = csf.objects({ meta: false });
+    story.set(['args', 'label'], 'Hi');
+
+    await writeCsf(csf);
+
+    expect(fs.readFileSync(fileName, 'utf8')).toBe(
+      "export default { title: 'Button' };\nexport const Primary = { args: { label: 'Hi' } };\n"
+    );
+  });
+});
diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index ce74e8d5c37f..9765504a4c8d 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -54,25 +54,6 @@ describe('CsfObject', () => {
     expect(csf.mutationDiagnostics).toEqual([]);
   });
 
-  it('prints CRLF sources with LF output', async () => {
-    // Recast reads `os.EOL` at print time; simulate Windows so the default is
-    // observable on any platform.
-    const os = (await import('node:os')).default;
-    const original = os.EOL;
-    Object.defineProperty(os, 'EOL', { value: '\r\n' });
-    try {
-      const source = ['const tags = ["autodocs"];', '', 'export default { tags };'].join('\r\n');
-      const csf = parse(source);
-      const [meta] = csf.objects({ stories: false });
-      expect(meta.set(['tags'], ['autodocs', 'dev']).ok).toBe(true);
-
-      const result = printCsf(csf);
-      expect(result.code).not.toContain('\r');
-    } finally {
-      Object.defineProperty(os, 'EOL', { value: original });
-    }
-  });
-
   it('keeps local bindings readable after replacing a story expression', () => {
     const csf = parse(`
       const params = { a11y: { element: '#app' } };
diff --git a/code/core/src/csf-tools/enrichCsf.test.ts b/code/core/src/csf-tools/enrichCsf.test.ts
index 17b032872177..c827435fee44 100644
--- a/code/core/src/csf-tools/enrichCsf.test.ts
+++ b/code/core/src/csf-tools/enrichCsf.test.ts
@@ -7,7 +7,7 @@ import type { EnrichCsfOptions } from './enrichCsf.ts';
 import { enrichCsf, extractSource } from './enrichCsf.ts';
 
 expect.addSnapshotSerializer({
-  print: (val: any) => val.replace(/\\r\\n/gm, '\\n'),
+  print: (val: any) => val,
   test: () => true,
 });
 
diff --git a/code/core/src/csf-tools/enrichCsf.ts b/code/core/src/csf-tools/enrichCsf.ts
index d568ae172383..72dbe6b7ff49 100644
--- a/code/core/src/csf-tools/enrichCsf.ts
+++ b/code/core/src/csf-tools/enrichCsf.ts
@@ -118,14 +118,13 @@ export const enrichCsf = async (csf: CsfFile, csfSource: CsfFile, options?: Enri
   });
 };
 
-// The story's own source text: the initializer of `const X = …`, or the function itself. Line
-// endings are normalized, so a CRLF checkout documents the same source as an LF one.
+// The story's own source text: the initializer of `const X = …`, or the function itself.
 export const extractSource = (node: Node, code: string) => {
   const src = (node?.type === 'VariableDeclarator' ? node.init : node) as
     | { start: number; end: number }
     | null
     | undefined;
-  return src ? code.slice(src.start, src.end).replace(/\r\n/g, '\n') : '';
+  return src ? code.slice(src.start, src.end) : '';
 };
 
 export const leadingComments = (node: Node | undefined, editor: SourceEditor) => {
@@ -141,7 +140,7 @@ export const extractDescription = (node: Node | undefined, editor: SourceEditor)
       }
       return (
         comment.value
-          .split(/\r?\n/)
+          .split('\n')
           // remove leading *'s and spaces from the beginning of each line
           .map((line) => line.replace(/^(\s+)?(\*+)?(\s)?/, ''))
           .join('\n')
diff --git a/code/core/src/csf-tools/estree/ast.test.ts b/code/core/src/csf-tools/estree/ast.test.ts
index b6f9c8c83eb0..50b2f3a02760 100644
--- a/code/core/src/csf-tools/estree/ast.test.ts
+++ b/code/core/src/csf-tools/estree/ast.test.ts
@@ -1,6 +1,14 @@
 import { describe, expect, it } from 'vitest';
 
-import { type E, codeFrame, expressionFromSource, outerSpan, parseModule, walk } from './ast.ts';
+import {
+  type E,
+  codeFrame,
+  expressionFromSource,
+  outerSpan,
+  parseModule,
+  textOf,
+  walk,
+} from './ast.ts';
 
 describe('parseModule', () => {
   const flowBody = 'const x: { +readOnly: number } = {};';
@@ -74,6 +82,12 @@ describe('parseModule', () => {
     expect(outerSpan(assignment)).toMatchObject({ start: 0, end: 10 });
   });
 
+  it.each(['\r\n', '\r'])('parses %j line endings as LF at the same lines and columns', (eol) => {
+    const { code } = parseModule(['const a = 1;', 'const b = 2;', ''].join(eol));
+    expect(code).toBe('const a = 1;\nconst b = 2;\n');
+    expect(() => parseModule(['const a = 1;', 'const b = ;', ''].join(eol))).toThrow(/\(2:10\)$/);
+  });
+
   it('normalizes an expression nested deeper than the call stack allows recursion', () => {
     const { program } = parseModule(`x = ${Array(20_000).fill('(a)').join(' + ')};`);
     expect(program.body).toHaveLength(1);
@@ -84,6 +98,10 @@ describe('expressionFromSource', () => {
   it.each(['a) + (b', 'a); (b', 'a)(b'])('rejects %s, which is no single expression', (code) => {
     expect(() => expressionFromSource(code)).toThrow(`Expected an expression: ${code}`);
   });
+
+  it('normalizes a CRLF fragment to LF', () => {
+    expect(textOf(expressionFromSource('{\r\n  a: 1,\r\n}'))).toBe('{\n  a: 1,\n}');
+  });
 });
 
 describe('codeFrame', () => {
@@ -92,10 +110,4 @@ describe('codeFrame', () => {
       'Button.stories.ts: (2:10)\n> 2 | const b = ;\n    |           ^'
     );
   });
-
-  it('leaves the carriage return of a CRLF line out of the frame', () => {
-    expect(codeFrame(undefined, 'const a = 1;\r\nconst b = ;\r\n', 24)).toBe(
-      '(2:10)\n> 2 | const b = ;\n    |           ^'
-    );
-  });
 });
diff --git a/code/core/src/csf-tools/estree/ast.ts b/code/core/src/csf-tools/estree/ast.ts
index 41b8c89610ac..48e4fd9cfa8d 100644
--- a/code/core/src/csf-tools/estree/ast.ts
+++ b/code/core/src/csf-tools/estree/ast.ts
@@ -75,11 +75,17 @@ const parseWith = (code: string, fileName: string | undefined, lang: Lang): Pars
   return { module: { code, program: result.program, comments: result.comments } };
 };
 
+/** Replace CRLF and lone CR line endings with `\n`, as every parse does first. */
+export const normalizeLineEndings = (code: string) => code.replace(/\r\n?/g, '\n');
+
 /**
  * Parse a module. Without a TS or JS file extension there is no grammar to pick: TSX accepts the
  * most, but rejects generic arrows and `<T>value` assertions that `.ts` allows, so TS is tried next
  * and the error of the parse that got further is reported.
  *
+ * Line endings are normalized to `\n` first, so node offsets index the returned `code`, which can
+ * be shorter than the code passed in. Lines and columns are the same in both.
+ *
  * The tree has no parenthesized nodes: `outerSpan` gives the span of the parentheses around one.
  */
 export const parseModule = (code: string, fileName?: string): ParsedModule => {
@@ -91,11 +97,12 @@ export const parseModule = (code: string, fileName?: string): ParsedModule => {
 // `parseModule`, but `textOf` can print every node of the tree.
 export const parsePrintable = (code: string, fileName?: string): ParsedModule => {
   const module = parseWithParentheses(code, fileName);
-  normalize(module.program, code);
+  normalize(module.program, module.code);
   return module;
 };
 
-const parseWithParentheses = (code: string, fileName: string | undefined): ParsedModule => {
+const parseWithParentheses = (source: string, fileName: string | undefined): ParsedModule => {
+  const code = normalizeLineEndings(source);
   const lang = fileName === undefined ? undefined : langFor(fileName);
   const attempt = lang ? parseWith(code, fileName, lang) : parseEither(code, fileName);
   if ('module' in attempt) {
@@ -166,7 +173,7 @@ export const locationOf = (code: string, start: number, end: number): SourceLoca
 /** `file: (line:column)` and the offending line with a marker under `index`, as Babel printed it. */
 export const codeFrame = (fileName: string | undefined, code: string, index: number) => {
   const { line, column } = locationOf(code, index, index).start;
-  const text = (code.split('\n')[line - 1] ?? '').replace(/\r$/, '');
+  const text = code.split('\n')[line - 1] ?? '';
   const gutter = ' '.repeat(String(line).length);
   return `${fileName ? `${fileName}: ` : ''}(${line}:${column})\n> ${line} | ${text}\n  ${gutter} | ${' '.repeat(column)}^`;
 };
@@ -406,7 +413,8 @@ export const placeableTextOf = (node: Node): string => {
 /** Parse an expression fragment, which has no file name to pick its grammar. */
 export const parseFragment = (code: string): ParsedModule => parseModule(code);
 
-export const expressionFromSource = (code: string): E.Expression => {
+export const expressionFromSource = (source: string): E.Expression => {
+  const code = normalizeLineEndings(source);
   // The line break ends a trailing line comment before the closing parenthesis.
   const wrapped = `(${code}\n)`;
   const { program, comments } = parseWithParentheses(wrapped, undefined);
diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index 4c18db6f5c5e..d5608d8ae288 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -19,6 +19,7 @@ import {
   prependStatement,
   prependToList,
   printMembers,
+  printValue,
   reindent,
   removeFromList,
   removeStatement,
@@ -64,6 +65,10 @@ describe('reindent', () => {
     expect(reindent('{\n    a: 1,\n  }', '  ', '')).toBe('{\n  a: 1,\n}');
   });
 
+  it('re-indents CRLF text with LF line endings, leaving its template literals alone', () => {
+    expect(reindent('{\r\n  a: `x\r\ny`,\r\n}', '', '  ')).toBe('{\n    a: `x\ny`,\n  }');
+  });
+
   it('leaves the lines of template literals and continued strings alone', () => {
     expect(reindent('{\n  code: `line1\nline2`,\n}', '', '  ')).toBe(
       '{\n    code: `line1\nline2`,\n  }'
@@ -292,7 +297,7 @@ describe('removeStatement', () => {
       "import a from 'a';\r\n\r\n\r\nconst b = 1;\r\nconst c = 2;\r\n"
     );
     removeStatement(editor, editor.program.body[1]);
-    expect(editor.toString()).toBe("import a from 'a';\r\nconst c = 2;\r\n");
+    expect(editor.toString()).toBe("import a from 'a';\nconst c = 2;\n");
   });
 
   it('removes every comment that trails the statement on its line', () => {
@@ -575,12 +580,12 @@ describe('parenthesized default exports', () => {
 });
 
 describe('line endings', () => {
-  it('writes inserted text with the line ending of the file', () => {
-    const csf = parse('export default {\r\n  title: "A",\r\n};\r\n');
+  it.each(['\r\n', '\r'])('prints a file with %j line endings with LF only', (eol) => {
+    const csf = parse(['export default {', '  title: "A",', '};', ''].join(eol));
     const [meta] = csf.objects({ stories: false });
     meta.set(['parameters', 'layout'], 'centered');
     expect(csf._editor.toString()).toBe(
-      'export default {\r\n  title: "A",\r\n  parameters: { layout: "centered" },\r\n};\r\n'
+      'export default {\n  title: "A",\n  parameters: { layout: "centered" },\n};\n'
     );
   });
 });
@@ -721,6 +726,13 @@ describe('printMembers', () => {
   });
 });
 
+describe('printValue', () => {
+  it('prints a function loaded from a CRLF file with LF line endings', () => {
+    const fn = Object.assign(() => 1, { toString: () => '() => {\r\n  return 1;\r\n}' });
+    expect(printValue(fn, "'")).toBe('() => {\n  return 1;\n}');
+  });
+});
+
 describe('generateMap', () => {
   const original = `const a = 1;\nconst b = 2;\nexport default { title: 'A' };\n`;
   // An earlier transform: drops the first line and maps the result back to `original`.
@@ -778,6 +790,20 @@ describe('generateMap', () => {
     expect(result.sourceRoot).toBe('webpack:///src/');
   });
 
+  it('maps a CRLF file line for line and keeps its content as written', () => {
+    const crlf = original.replaceAll('\n', '\r\n');
+    const editor = new SourceEditor(crlf, 'file.ts');
+    editOf(editor);
+    editor.commit();
+    editor.edits.appendLeft(0, '// header\n');
+    const result = editor.generateMap();
+    expect(result.sourcesContent).toEqual([crlf]);
+    expect(entryOf(result, editor.toString(), 'title')).toMatchObject({
+      originalLine: 2,
+      originalColumn: original.split('\n')[2].indexOf('title'),
+    });
+  });
+
   it('names the source as requested after a committed edit', () => {
     const editor = new SourceEditor(original, 'file.ts');
     editOf(editor);
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index d9bb37bcbd62..46e95c17ef8b 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -8,6 +8,7 @@ import {
   type Property,
   isNode,
   isValidIdentifier,
+  normalizeLineEndings,
   outerSpan,
   parseModule,
   parsePrintable,
@@ -43,7 +44,8 @@ export type InputSourceMap =
 
 /**
  * Source text plus its OXC AST. Edits accumulate in `edits`, so untouched code stays
- * byte-identical; `commit()` applies them and parses the result again.
+ * byte-identical; `commit()` applies them and parses the result again. Line endings are
+ * normalized to `\n`, so `code`, node offsets and `toString()` all use `\n`.
  */
 export class SourceEditor {
   _module: ParsedModule;
@@ -58,12 +60,16 @@ export class SourceEditor {
   // code the editor was created with.
   _committed: SourceMap[] = [];
 
+  // The code the editor was created with, line endings included: the content its maps name.
+  readonly _originalCode: string;
+
   readonly fileName: string | undefined;
 
   constructor(code: string, fileName?: string) {
     this.fileName = fileName;
+    this._originalCode = code;
     this._module = parsePrintable(code, fileName);
-    this._edits = new MagicString(code, { filename: fileName });
+    this._edits = new MagicString(this.code, { filename: fileName });
   }
 
   get code() {
@@ -125,20 +131,17 @@ export class SourceEditor {
     this._committed.push(
       this._edits.generateMap({ hires: true, includeContent: true, source: mapSource(this) })
     );
-    this.replaceSource(this._edits.toString());
-    return true;
-  }
-
-  replaceSource(code: string) {
-    this._module = parsePrintable(code, this.fileName);
+    this._module = parsePrintable(this._edits.toString(), this.fileName);
     this._scopes = undefined;
     this._parents = undefined;
-    this._edits = new MagicString(code, { filename: this.fileName });
+    this._edits = new MagicString(this.code, { filename: this.fileName });
+    return true;
   }
 
   /**
    * Hi-res map from the code the editor was created with to `toString()`, through every commit,
-   * and through `inputSourceMap` when the code came from an earlier transform.
+   * and through `inputSourceMap` when the code came from an earlier transform. Without an input
+   * map, `sourcesContent` is that code as it was passed in, line endings included.
    */
   generateMap(options: { source?: string; inputSourceMap?: InputSourceMap } = {}): GeneratedMap {
     const source = options.source ?? this.fileName ?? '';
@@ -154,6 +157,7 @@ export class SourceEditor {
     const chain = [current, ...this._committed.slice().reverse()];
     if (chain.length === 1 && !input) {
       current.sources = [source];
+      current.sourcesContent = [this._originalCode];
       return current;
     }
     const maps = chain.map((map) => map as unknown as SourceMapInput);
@@ -174,7 +178,9 @@ export class SourceEditor {
       file: composed.file ?? '',
       sources: composed.sources as string[],
       // Unknown content stays `null`, so devtools load the file instead of showing it empty.
-      sourcesContent: composed.sourcesContent as string[] | undefined,
+      sourcesContent: input
+        ? (composed.sourcesContent as string[] | undefined)
+        : composed.sources.map(() => this._originalCode),
       names: composed.names,
       // Encoded, since `decodedMappings` was not requested.
       mappings: composed.mappings as string,
@@ -185,14 +191,8 @@ export class SourceEditor {
     return map;
   }
 
-  /** Line ending of the file; inserted text is written with `\n` and converted on output. */
-  get eol(): '\n' | '\r\n' {
-    return this.code.includes('\r\n') ? '\r\n' : '\n';
-  }
-
   toString() {
-    const code = this._edits.toString();
-    return this.eol === '\r\n' ? code.replace(/\r?\n/g, '\r\n') : code;
+    return this._edits.toString();
   }
 
   /** Quote for generated strings, overriding the inferred one. */
@@ -237,7 +237,8 @@ export const printValue = (
     return 'null';
   }
   if (typeof value === 'function') {
-    return value.toString();
+    // A function prints as the text of the file it was loaded from, which may use CRLF.
+    return normalizeLineEndings(value.toString());
   }
   if (typeof value === 'string') {
     return printString(value, quote);
@@ -491,10 +492,12 @@ const reindentLines = (text: string, from: string, to: string, literals: readonl
 };
 
 /**
- * Re-indent the continuation lines of `text`, leaving string and template literal values alone.
- * Text that does not parse is returned unchanged, as its literals cannot be located.
+ * Re-indent the continuation lines of `text`, leaving string and template literal values alone,
+ * and normalize its line endings to `\n`. Text that does not parse keeps its indentation, as its
+ * literals cannot be located.
  */
-export const reindent = (text: string, from: string, to: string) => {
+export const reindent = (source: string, from: string, to: string) => {
+  const text = normalizeLineEndings(source);
   if (from === to || !text.includes('\n')) {
     return text;
   }
diff --git a/code/core/src/csf-tools/index.ts b/code/core/src/csf-tools/index.ts
index 870a07f5d242..c9a9362d32bf 100644
--- a/code/core/src/csf-tools/index.ts
+++ b/code/core/src/csf-tools/index.ts
@@ -22,6 +22,7 @@ export {
   isStringLiteral,
   isValidIdentifier,
   locationOf,
+  normalizeLineEndings,
   outerSpan,
   parseModule,
   placeableTextOf,
diff --git a/code/core/src/csf-tools/vitest-plugin/component-transformer.test.ts b/code/core/src/csf-tools/vitest-plugin/component-transformer.test.ts
index 5bd97b868fac..6de1ea2a9513 100644
--- a/code/core/src/csf-tools/vitest-plugin/component-transformer.test.ts
+++ b/code/core/src/csf-tools/vitest-plugin/component-transformer.test.ts
@@ -355,13 +355,13 @@ describe('component transformer', () => {
     `);
   });
 
-  it('writes the generated tests with the line endings of a CRLF component file', async () => {
+  it('writes a CRLF component file and its generated tests with LF line endings', async () => {
     const code = `export const Badge = () => <div />;\r\nexport default () => <span />;`;
 
     const result = await transform({ code });
 
     expect(result.code).toContain('_test("Badge"');
-    expect(result.code.replaceAll('\r\n', '')).not.toContain('\n');
+    expect(result.code).not.toContain('\r');
   });
 
   it('correctly handles aliased function and class exports', async () => {
diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
index 4bfa7c9a5656..c0c5db4ffc80 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
@@ -49,13 +49,13 @@ const transform = async ({
 };
 
 describe('transformer', () => {
-  it('writes the generated tests with the line endings of a CRLF story file', async () => {
+  it('writes a CRLF story file and its generated tests with LF line endings', async () => {
     const code = `export default { title: 'Button' };\r\nexport const Primary = {};`;
 
     const result = await transform({ code });
 
     expect(result.code).toContain('_test("Primary"');
-    expect(result.code.replaceAll('\r\n', '')).not.toContain('\n');
+    expect(result.code).not.toContain('\r');
   });
 
   describe('CSF v1/v2/v3', () => {
diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.ts b/code/core/src/csf-tools/vitest-plugin/transformer.ts
index 69f8bc1160a1..66642a67262d 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.ts
@@ -72,11 +72,10 @@ export class GeneratedTail {
 // Generated lines map to their target node, so Vitest reports each test at its story.
 export const printWithTail = (editor: SourceEditor, tail: GeneratedTail, fileName: string) => {
   const head = editor.toString();
-  const { eol } = editor;
-  const map = editor.edits.generateMap({ hires: true, source: fileName, includeContent: true });
+  const map = editor.generateMap({ source: fileName });
   const decoded = decode(map.mappings);
   const firstLine = head.split('\n').length;
-  const separator = head.endsWith('\n') ? '' : eol;
+  const separator = head.endsWith('\n') ? '' : '\n';
   tail.lines.forEach(({ text, target }, index) => {
     const line = firstLine - (separator ? 0 : 1) + index;
     while (decoded.length <= line) {
@@ -93,7 +92,7 @@ export const printWithTail = (editor: SourceEditor, tail: GeneratedTail, fileNam
   });
   map.mappings = encode(decoded);
   return {
-    code: `${head}${separator}${tail.lines.map(({ text }) => text).join(eol)}${eol}`,
+    code: `${head}${separator}${tail.lines.map(({ text }) => text).join('\n')}\n`,
     map: map as CsfSourceMap,
   };
 };
diff --git a/code/core/src/mocking-utils/automock.test.ts b/code/core/src/mocking-utils/automock.test.ts
index 5ae04a9a8bfe..fe9a49bd07a6 100644
--- a/code/core/src/mocking-utils/automock.test.ts
+++ b/code/core/src/mocking-utils/automock.test.ts
@@ -33,6 +33,19 @@ describe('getAutomockCode', () => {
     expect(() => parseModuleAst(mocked, '/mod.ts')).not.toThrow();
   });
 
+  it('mocks every export of a CRLF module', () => {
+    const code = 'export const a = 1;\r\nexport function b() {}\r\nexport default a;\r\n';
+
+    const mocked = getAutomockCode(code, false, (source) =>
+      parseModuleAst(source, '/mod.ts')
+    ).toString();
+
+    expect(mocked).toContain('["a"]: a,');
+    expect(mocked).toContain('["b"]: b,');
+    expect(mocked).toContain('["__vitest_default"]: __vitest_default,');
+    expect(() => parseModuleAst(mocked, '/mod.ts')).not.toThrow();
+  });
+
   it('mocks a .ts module with generic arrows under a Vite id with a query', () => {
     const code = 'export const identity = <T>(value: T) => value;';
 
diff --git a/code/core/src/mocking-utils/automock.ts b/code/core/src/mocking-utils/automock.ts
index 098c9ba2e4e2..ff4e364aaa64 100644
--- a/code/core/src/mocking-utils/automock.ts
+++ b/code/core/src/mocking-utils/automock.ts
@@ -7,7 +7,7 @@ import type {
 } from 'estree';
 import MagicString from 'magic-string';
 
-import { outerSpan } from '../csf-tools/estree/ast.ts';
+import { normalizeLineEndings, outerSpan } from '../csf-tools/estree/ast.ts';
 import { type Positioned, getArbitraryModuleIdentifier } from './esmWalker.ts';
 
 // An ESTree program; OXC's own `Program` type is structurally compatible with what is read here.
@@ -53,9 +53,11 @@ export function automockModule(
 ): MagicString {
   const globalThisAccessor =
     options.globalThisAccessor || JSON.stringify(__STORYBOOK_GLOBAL_THIS_ACCESSOR__);
-  const ast = parse(code) as Program;
+  // Edits apply at the parsed offsets, which index the code with `\n` line endings.
+  const text = normalizeLineEndings(code);
+  const ast = parse(text) as Program;
 
-  const m = new MagicString(code);
+  const m = new MagicString(text);
 
   const allSpecifiers: { name: string; alias?: string }[] = [];
   let importIndex = 0;
diff --git a/code/core/src/mocking-utils/extract.test.ts b/code/core/src/mocking-utils/extract.test.ts
index e2a4f30e6f6b..0c7943104482 100644
--- a/code/core/src/mocking-utils/extract.test.ts
+++ b/code/core/src/mocking-utils/extract.test.ts
@@ -224,6 +224,14 @@ describe('extractMockCalls', () => {
       `);
     });
 
+    it('rewrites a call on a later line of a CRLF file', () => {
+      const result = extractModule.rewriteSbMockImportCalls(
+        `import 'a';\r\n\r\nsb.mock(import('./bar/baz'), { spy: true });\r\n`,
+        'preview.ts'
+      );
+      expect(result.code).toBe(`import 'a';\n\nsb.mock("./bar/baz", { spy: true });\n`);
+    });
+
     it('names the file in the map and returns no map when nothing changed', () => {
       const changed = extractModule.rewriteSbMockImportCalls(
         `sb.mock(import('./bar/baz'));`,
diff --git a/code/core/src/mocking-utils/extract.ts b/code/core/src/mocking-utils/extract.ts
index 189885d66852..0725ae387c4f 100644
--- a/code/core/src/mocking-utils/extract.ts
+++ b/code/core/src/mocking-utils/extract.ts
@@ -6,10 +6,10 @@ import type { CoreConfig } from 'storybook/internal/types';
 
 import { transformSync } from 'esbuild';
 import { walk } from 'estree-walker';
-import MagicString from 'magic-string';
 import { basename, normalize } from 'pathe';
 
 import { parseModule } from '../csf-tools/estree/ast.ts';
+import { SourceEditor } from '../csf-tools/estree/editor.ts';
 import { resolveMock } from './resolve.ts';
 
 const DEFAULT_MODULE_DIRECTORIES = ['/node_modules/'];
@@ -39,11 +39,16 @@ interface ExtractMockCallsOptions {
  * Parse a module into an ESTree program. The file extension picks the grammar, so a `.ts` module
  * keeps its generic arrows; without a TS or JS extension the TSX and TS grammars are both tried.
  * Throws on syntax errors.
+ *
+ * Node offsets index `normalizeLineEndings(code)`, which differs from `code` when it uses CRLF.
  */
 export const parseModuleAst = (code: string, fileName?: string) =>
   parseModule(code, fileName).program;
 
-/** @deprecated Use `parseModuleAst`. It returns an ESTree program, no longer a Babel AST. */
+/**
+ * @deprecated Use `parseModuleAst`. It returns an ESTree program, no longer a Babel AST, and its
+ *   offsets index the code with `\n` line endings.
+ */
 export const babelParser = parseModuleAst;
 
 const isStringLiteral = (node: any): boolean =>
@@ -55,10 +60,9 @@ const isStaticImport = (node: any): boolean =>
 
 /** Utility to rewrite sb.mock(import('...'), ...) to sb.mock('...', ...) */
 export function rewriteSbMockImportCalls(code: string, fileName: string) {
-  const ast = parseModuleAst(code, fileName);
-  const edits = new MagicString(code);
+  const editor = new SourceEditor(code, fileName);
 
-  walk(ast as any, {
+  walk(editor.program as any, {
     enter(node: any) {
       if (
         node.type === 'CallExpression' &&
@@ -72,17 +76,17 @@ export function rewriteSbMockImportCalls(code: string, fileName: string) {
       ) {
         // Replace sb.mock(import('foo'), ...) with sb.mock('foo', ...)
         const [argument] = node.arguments;
-        edits.overwrite(argument.start, argument.end, JSON.stringify(argument.source.value));
+        editor.edits.overwrite(argument.start, argument.end, JSON.stringify(argument.source.value));
       }
     },
   });
-  if (!edits.hasChanged()) {
+  if (!editor.pending) {
     return { code, map: null };
   }
   // Spread into a plain object: babel-loader, next in the webpack chain, rejects a string map.
-  const map = { ...edits.generateMap({ hires: true, includeContent: true, source: fileName }) };
+  const map = { ...editor.generateMap() };
   return {
-    code: edits.toString(),
+    code: editor.toString(),
     map: { ...map, sourcesContent: map.sourcesContent as string[] },
   };
 }
diff --git a/code/frameworks/angular-vite/src/docgen/story-docs-args.ts b/code/frameworks/angular-vite/src/docgen/story-docs-args.ts
index 4b6eeac3f9a1..85ad66122db0 100644
--- a/code/frameworks/angular-vite/src/docgen/story-docs-args.ts
+++ b/code/frameworks/angular-vite/src/docgen/story-docs-args.ts
@@ -57,8 +57,7 @@ export const evaluateArgExpression = (node: Node, enums: SnippetEnum[]): string
 
 // Continuation lines keep the story file's indentation, which the snippet replaces with its own.
 // Lines inside template literals are values and keep theirs.
-const printArgSource = (source: string): string => {
-  const code = source.replace(/\r\n/g, '\n');
+const printArgSource = (code: string): string => {
   const lines = code.split('\n').slice(1);
   const last = lines.at(-1);
   const indents = lines.filter((line) => line.trim()).map((line) => /^[ \t]*/.exec(line)![0]);
@@ -80,8 +79,7 @@ const printArgSource = (source: string): string => {
 };
 
 const withoutComments = (code: string): string => {
-  const wrapped = `(${code.replace(/\r\n/g, '\n')}\n)`;
-  const { comments } = parseModule(wrapped);
+  const { code: wrapped, comments } = parseModule(`(${code}\n)`);
   let result = '';
   let cursor = 0;
   for (const comment of comments) {
diff --git a/code/frameworks/tanstack-react/src/plugins/server-code-elimination.ts b/code/frameworks/tanstack-react/src/plugins/server-code-elimination.ts
index 0bc4e9338a99..96d8f4fed6e3 100644
--- a/code/frameworks/tanstack-react/src/plugins/server-code-elimination.ts
+++ b/code/frameworks/tanstack-react/src/plugins/server-code-elimination.ts
@@ -65,12 +65,7 @@ export function serverCodeEliminationPlugin(options: { excludeFiles?: string[] }
           return null;
         }
 
-        return {
-          code: editor.toString(),
-          map: editor.edits
-            .generateMap({ source: id, includeContent: true, hires: true })
-            .toString(),
-        };
+        return { code: editor.toString(), map: editor.generateMap({ source: id }).toString() };
       },
     },
   };
diff --git a/code/lib/cli-storybook/src/automigrate/fix-files.test.ts b/code/lib/cli-storybook/src/automigrate/fix-files.test.ts
index b43ded69bbb9..10167941492a 100644
--- a/code/lib/cli-storybook/src/automigrate/fix-files.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fix-files.test.ts
@@ -77,6 +77,19 @@ describe('createFixFiles', () => {
     ).toEqual([story]);
   });
 
+  it('reads a CRLF file with LF line endings, so only a real edit rewrites it', async () => {
+    const { files, commit } = createFixFiles();
+    fs.writeFileSync(main, "export default {\r\n  addons: ['a'],\r\n};\r\n");
+
+    expect(await files.editConfig(main, () => {})).toBe(false);
+    expect(await files.editConfig(main, (config) => config.set(['framework'], 'x'))).toBe(true);
+    await commit();
+
+    expect(fs.readFileSync(main, 'utf8')).toBe(
+      "export default {\n  addons: ['a'],\n  framework: 'x',\n};\n"
+    );
+  });
+
   it('refuses to overwrite a file another writer changed after it was read', async () => {
     const { files, commit } = createFixFiles();
     await files.edit(story, (source) => source.replace('@storybook/test', 'storybook/test'));
diff --git a/code/lib/cli-storybook/src/automigrate/fix-files.ts b/code/lib/cli-storybook/src/automigrate/fix-files.ts
index 01ba4720f66b..f2315c50e97c 100644
--- a/code/lib/cli-storybook/src/automigrate/fix-files.ts
+++ b/code/lib/cli-storybook/src/automigrate/fix-files.ts
@@ -2,7 +2,12 @@ import { readFile, unlink, writeFile } from 'node:fs/promises';
 import { resolve } from 'node:path';
 
 import { HandledError } from 'storybook/internal/common';
-import { type ConfigFile, formatConfig, loadConfig } from 'storybook/internal/csf-tools';
+import {
+  type ConfigFile,
+  formatConfig,
+  loadConfig,
+  normalizeLineEndings,
+} from 'storybook/internal/csf-tools';
 
 import { editParsedFile } from './helpers/edit-parsed-file.ts';
 
@@ -21,7 +26,7 @@ const messageOf = (error: unknown) => (error instanceof Error ? error.message :
  * refuses to overwrite a file that something else (such as `add()`) changed after the fix read it.
  */
 export interface FixFiles {
-  /** Read a file, including edits staged earlier by the same fix. */
+  /** Read a file with `\n` line endings, including edits staged earlier by the same fix. */
   read(path: string): Promise<string>;
   /** Stage the complete contents of a file. */
   write(path: string, content: string): void;
@@ -58,7 +63,7 @@ export const createFixFiles = () => {
     }
     const content = await readFile(path, 'utf-8');
     originals.set(key, content);
-    return content;
+    return normalizeLineEndings(content);
   };
 
   const edit: FixFiles['edit'] = async (paths, transform) => {
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/addon-svelte-csf-to-core.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/addon-svelte-csf-to-core.test.ts
index 7f5086169f95..2d0c794c4d58 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/addon-svelte-csf-to-core.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/addon-svelte-csf-to-core.test.ts
@@ -247,7 +247,7 @@ describe('addon-svelte-csf-to-core', () => {
       expect(files[STORY]).toContain("import { defineMeta } from '@storybook/sveltekit';");
     });
 
-    it('merges imports in files with CRLF line endings', async () => {
+    it('merges imports in a CRLF file and writes it with LF line endings', async () => {
       write(
         STORY,
         "<script module>\r\n  import { defineMeta } from '@storybook/addon-svelte-csf';\r\n  import { type StoryObj } from '@storybook/sveltekit';\r\n</script>\r\n"
@@ -256,7 +256,7 @@ describe('addon-svelte-csf-to-core', () => {
       const files = await migrate();
 
       expect(files[STORY]).toBe(
-        "<script module>\r\n  import { defineMeta, type StoryObj } from '@storybook/sveltekit';\r\n</script>\r\n"
+        "<script module>\n  import { defineMeta, type StoryObj } from '@storybook/sveltekit';\n</script>\n"
       );
     });
 
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/addon-svelte-csf-to-core.ts b/code/lib/cli-storybook/src/automigrate/fixes/addon-svelte-csf-to-core.ts
index 9d13bc03eaa9..ec27df2c0aaf 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/addon-svelte-csf-to-core.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/addon-svelte-csf-to-core.ts
@@ -170,7 +170,7 @@ const renameImports = (code: string, framework: string) => {
     .sort((a, b) => b.start - a.start)
     .reduce(
       (result, { start, end }) => result.slice(0, start) + framework + result.slice(end),
-      code
+      ast.code
     );
 };
 
@@ -200,7 +200,7 @@ const mergeImports = (code: string, source: string) => {
       continue;
     }
     const specifiers = [first, ...rest].flatMap(({ specifiers }) =>
-      specifiers.map((specifier) => code.slice(specifier.start, specifier.end))
+      specifiers.map((specifier) => ast.code.slice(specifier.start, specifier.end))
     );
     edits.push({
       start: first.specifiers[0].start,
@@ -208,9 +208,9 @@ const mergeImports = (code: string, source: string) => {
       text: [...new Set(specifiers)].join(', '),
     });
     for (const node of rest) {
-      const lineStart = code.lastIndexOf('\n', node.start - 1) + 1;
-      const lineEnd = code.startsWith('\r\n', node.end) ? 2 : code[node.end] === '\n' ? 1 : 0;
-      const ownLine = code.slice(lineStart, node.start).trim() === '' && lineEnd > 0;
+      const lineStart = ast.code.lastIndexOf('\n', node.start - 1) + 1;
+      const lineEnd = ast.code[node.end] === '\n' ? 1 : 0;
+      const ownLine = ast.code.slice(lineStart, node.start).trim() === '' && lineEnd > 0;
       edits.push(
         ownLine
           ? { start: lineStart, end: node.end + lineEnd, text: '' }
@@ -223,7 +223,7 @@ const mergeImports = (code: string, source: string) => {
     .sort((a, b) => b.start - a.start)
     .reduce(
       (result, { start, end, text }) => result.slice(0, start) + text + result.slice(end),
-      code
+      ast.code
     );
 };
 
diff --git a/code/lib/cli-storybook/src/automigrate/pipeline.test.ts b/code/lib/cli-storybook/src/automigrate/pipeline.test.ts
index 72e23a42dac0..31c1cec3e96c 100644
--- a/code/lib/cli-storybook/src/automigrate/pipeline.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/pipeline.test.ts
@@ -345,7 +345,7 @@ describe('edit hooks', () => {
     expect(outcomes.get('b')).toEqual({ changed: [mainConfigPath], errors: [] });
   });
 
-  it('sees no change in a CRLF file that an edit leaves alone, and keeps CRLF when it writes', async () => {
+  it('sees no change in a CRLF file that an edit leaves alone, and writes LF when it changes it', async () => {
     vol.fromJSON({ [mainConfigPath]: 'export default {\r\n  features: {},\r\n};\r\n' });
     const untouched = { filter: { kind: ['main'] as const }, editConfig: () => {} };
 
@@ -356,18 +356,10 @@ describe('edit hooks', () => {
 
     expect(detection.get('noop')).toEqual({ changed: [], errors: [] });
     expect(fs.readFileSync(mainConfigPath, 'utf8')).toBe(
-      'export default {\r\n  features: { a: true },\r\n};\r\n\r\n// formatted'
+      'export default {\n  features: { a: true },\n};\n\n// formatted'
     );
   });
 
-  it('writes a file with mixed line endings with LF only', async () => {
-    vol.fromJSON({ [mainConfigPath]: 'export default {\r\n  features: {},\n};\n' });
-
-    await runTransforms(project, [{ fixId: 'a', hooks: [setFeature('a')] }], { write: true });
-
-    expect(fs.readFileSync(mainConfigPath, 'utf8')).not.toContain('\r');
-  });
-
   it('passes MDX stories to text handlers only', async () => {
     const mdx = '/project/src/Intro.mdx';
     vol.fromJSON({ [mdx]: "import { Meta } from '@storybook/addon-docs/blocks';" });
diff --git a/code/lib/cli-storybook/src/automigrate/pipeline.ts b/code/lib/cli-storybook/src/automigrate/pipeline.ts
index 5b3e84dbbee1..e35642b6c3c1 100644
--- a/code/lib/cli-storybook/src/automigrate/pipeline.ts
+++ b/code/lib/cli-storybook/src/automigrate/pipeline.ts
@@ -8,6 +8,7 @@ import {
   formatConfig,
   loadConfig,
   loadCsf,
+  normalizeLineEndings,
   printCsf,
 } from 'storybook/internal/csf-tools';
 
@@ -221,8 +222,7 @@ export const runTransforms = async (
     }
 
     // Printers emit `\n`, so a CRLF file would otherwise always look changed.
-    const source = raw.replaceAll('\r\n', '\n');
-    const crlf = source !== raw && !/(?<!\r)\n/.test(raw);
+    const source = normalizeLineEndings(raw);
     let code = source;
     // Kept across consecutive edits; dropped when a handler rewrites the text or an edit fails, so
     // the next edit parses `code`, the output of the last hook that succeeded.
@@ -258,7 +258,7 @@ export const runTransforms = async (
     if (write && code !== source) {
       try {
         const output = printed ? await formatExistingFile(context.id, code) : code;
-        await writeFile(context.id, crlf ? output.replace(/\r?\n/g, '\r\n') : output);
+        await writeFile(context.id, output);
       } catch (error) {
         for (const [fixId, outcome] of outcomes) {
           if (outcome.changed.includes(context.id)) {
diff --git a/code/renderers/vue3/src/docgen/story-docs/build-story-docs.ts b/code/renderers/vue3/src/docgen/story-docs/build-story-docs.ts
index 0c5ca646bf05..f642e02ff700 100644
--- a/code/renderers/vue3/src/docgen/story-docs/build-story-docs.ts
+++ b/code/renderers/vue3/src/docgen/story-docs/build-story-docs.ts
@@ -175,7 +175,7 @@ export async function buildStoryDocsPayload(
       filePath: storyPath,
       ...(context.references ?? openStoryReferences()),
     }),
-    source: storyFile,
+    source: csf._code,
   });
 
   return {
diff --git a/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.test.ts b/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.test.ts
index 0a39809e8954..dc28f2dcfa52 100644
--- a/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.test.ts
+++ b/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.test.ts
@@ -467,10 +467,9 @@ export const Primary = {
     `);
   });
 
-  it('takes the whole CRLF line when the dropped binding was written on its own', async () => {
+  it('prints a CRLF template with LF, taking the whole line of a dropped binding', async () => {
     expect(
-      (
-        await primarySnippet(`
+      await primarySnippet(`
 export const Primary = {
   args: {
     label: 'Hi',
@@ -484,7 +483,6 @@ export const Primary = {
   }),
 };
 `)
-      )?.replaceAll('\r\n', '\n')
     ).toMatchInlineSnapshot(`
       "<script lang="ts" setup>
       import MyButton from './MyButton.vue';
@@ -1868,6 +1866,19 @@ const onSubmit = () => null;
 </template>`);
   });
 
+  it('substitutes an arg in an expression across the lines of a CRLF template', () => {
+    const snippet = transformTemplate({
+      args: [prop('label', `'Hi'`)],
+      componentImports: new Map([['C', `import C from './C.vue';`]]),
+      componentName: 'C',
+      importBindings: new Map(),
+      template: `<C :title="'x' +\r\n  args.label" />`,
+      unsetArgs: new Set(),
+    })!.snippet;
+
+    expect(snippet).toContain(`<C :title="'x' +\n    'Hi'" />`);
+  });
+
   it('sorts event attributes after prop attributes', () => {
     const snippet = render([event('onSubmit', 'submit', '() => null'), prop('label', `'Send'`)]);
 
@@ -1885,7 +1896,7 @@ function render(args: ClassifiedArg[], componentName = 'C'): string {
     importBindings: new Map(),
     template: `<${componentName} v-bind="args" />`,
     unsetArgs: new Set(),
-  })!.snippet.replaceAll('\r\n', '\n');
+  })!.snippet;
 }
 
 function prop(name: string, code: string, kind: 'hoist' | 'inline' = 'inline'): ClassifiedArg {
diff --git a/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.ts b/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.ts
index ca2c89f8ffca..96214c481b7e 100644
--- a/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.ts
+++ b/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.ts
@@ -13,6 +13,7 @@ import {
   type ImportBinding,
   isStringLiteral,
   keyOf,
+  normalizeLineEndings,
   parseModule,
   propertyValue,
   unwrapExpression,
@@ -203,8 +204,10 @@ export function readTemplateRenderConfig(
 export function transformTemplate(
   input: TransformTemplateInput
 ): TransformTemplateResult | undefined {
+  // `parseModule` normalizes line endings, so template expressions must already use `\n`.
+  const template = normalizeLineEndings(input.template);
   let invalid = false;
-  const ast = parse(input.template, { onError: () => (invalid = true) });
+  const ast = parse(template, { onError: () => (invalid = true) });
   if (invalid) {
     return undefined;
   }
@@ -217,7 +220,7 @@ export function transformTemplate(
     componentImports: input.componentImports,
     componentName: input.componentName,
     importBindings: input.importBindings ?? new Map(),
-    template: input.template,
+    template,
   };
 
   if (input.setup && !seedForwardedSetup(input.setup, state)) {
@@ -238,7 +241,7 @@ export function transformTemplate(
 
   return {
     snippet: renderPreparedSfcSnippet({
-      templateCode: applyEdits(input.template, state.edits),
+      templateCode: applyEdits(template, state.edits),
       ctx: state.ctx,
     }),
   };
@@ -283,7 +286,6 @@ function appendSetupStatements(setup: ForwardableSetup, state: TransformState):
       const wrapped = wrapSubstitution(rendered, text.slice(read.end));
       text = text.slice(0, read.start) + wrapped + text.slice(read.end);
     }
-    text = text.replace(/\r\n?/g, '\n');
     state.ctx.statements.push(dedentBy(text, statement.column));
   }
   return true;
@@ -896,13 +898,8 @@ function replacementFor(prop: { loc: ElementProp['loc'] }, text: string, templat
 
   const lineStart = blankRunStart(template, start);
   const lineEnd = blankRunEnd(template, end);
-  const lineTerminator = lineTerminatorAt(template, lineEnd);
-  if (template[lineStart - 1] === '\n' && lineTerminator) {
-    return {
-      start: previousLineTerminatorStart(template, lineStart),
-      end: lineTerminator.start,
-      text,
-    };
+  if (template[lineStart - 1] === '\n' && template[lineEnd] === '\n') {
+    return { start: lineStart - 1, end: lineEnd, text };
   }
   return { start: lineStart, end, text };
 }
@@ -923,17 +920,6 @@ function blankRunEnd(template: string, index: number): number {
   return cursor;
 }
 
-function lineTerminatorAt(template: string, index: number): { start: number } | undefined {
-  if (template[index] === '\r' && template[index + 1] === '\n') {
-    return { start: index };
-  }
-  return template[index] === '\n' ? { start: index } : undefined;
-}
-
-function previousLineTerminatorStart(template: string, index: number): number {
-  return template[index - 2] === '\r' ? index - 2 : index - 1;
-}
-
 /**
  * Splices slot children into an element, opening a self-closing tag when needed.
  *

From 4a28a9d57d67551ba2999a2eb1ea04bd644b3cc7 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Sat, 17 Oct 2026 20:39:52 +0200
Subject: [PATCH 143/326] fix(csf-tools): remove each run of adjacent list
 items as one span

`removeFromList` judged each removed item on its own whether the code after
it would join the line of a `//` comment before it. With two adjacent items
removed, the first removal kept the newline the second one then deleted, so
the next kept item ended up inside the comment:

    composeStories, /* api */ // used below composeStory,

The output still parses, so the editor's reparse accepted it. A run of
adjacent removed items is now removed as one span and that check is made
once, against the code after the whole run.

Found by a differential test of 14,336 list removals.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/editor.test.ts | 11 ++++++++
 code/core/src/csf-tools/estree/editor.ts      | 28 +++++++++++--------
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index d5608d8ae288..0cee978ce648 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -217,6 +217,17 @@ describe('removeFromList', () => {
       `export default { addons: ['a' // l\n] };`
     );
   });
+
+  it.each(['\n', '\r\n'])(
+    'keeps what follows adjacent removed items off the line of the comment before them',
+    (eol) => {
+      const editor = new SourceEditor(`export default [1, /* k */ // k${eol}2,${eol}3, 4,${eol}];`);
+      const array = (editor.program.body[0] as E.ExportDefaultDeclaration)
+        .declaration as E.ArrayExpression;
+      removeFromList(editor, arrayList(editor, array), array.elements.slice(1, 3) as E.Node[]);
+      expect(editor.toString()).toBe(`export default [1, /* k */ // k\n 4,\n];`);
+    }
+  );
 });
 
 describe('removeStatement', () => {
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 46e95c17ef8b..b8c27a658080 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -649,27 +649,33 @@ export const removeFromList = (editor: SourceEditor, list: List, removedItems: r
     }
     return;
   }
-  const lastKept = items.findLastIndex((item) => !removed.has(item));
-  items.forEach((item, index) => {
-    if (!removed.has(item)) {
-      return;
+  // Each run of adjacent removed items goes as one span, so what the run leaves joined is judged
+  // once, for the whole run.
+  for (let first = 0; first < items.length; first++) {
+    if (!removed.has(items[first])) {
+      continue;
+    }
+    let last = first;
+    while (removed.has(items[last + 1])) {
+      last++;
     }
-    if (index > lastKept && separatorAfter(editor, item) === undefined) {
-      // Trailing item without a comma: drop the comma of the last kept item instead, unless that
+    if (last === items.length - 1 && separatorAfter(editor, items[last]) === undefined) {
+      // Trailing run without a comma: drop the comma of the last kept item instead, unless that
       // comma writes a hole.
-      const previous = items[lastKept];
+      const previous = items[first - 1];
       if (!isHole(previous)) {
         edits.remove(previous.end, separatorAfter(editor, previous)!);
       }
     }
-    const start = itemStart(editor, list, index);
-    const end = itemEnd(editor, list, index);
-    // Code after the item on its line must not join the line of a line comment before it.
+    const start = itemStart(editor, list, first);
+    const end = itemEnd(editor, list, last);
+    // Code after the run on its line must not join the line of a line comment before it.
     const joins =
       commentAt(editor, start, 'end')?.type === 'Line' &&
       code.slice(end, lineEnd(code, end)).trim();
     edits.remove(joins ? lineEnd(code, start) + 1 : start, end);
-  });
+    first = last;
+  }
 };
 
 export const appendMembers = (editor: SourceEditor, object: E.ObjectExpression, texts: string[]) =>

From 751f379e837f1f1cf5310b31dd30d38f53cd3235 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Sat, 17 Oct 2026 20:40:14 +0200
Subject: [PATCH 144/326] refactor(csf-tools): insert statements after a
 statement in one place

Seven call sites inserted a statement after another one, each in its own
way. Three inserted at the import's end, before the comments it owns, and
so pushed a `// @ts-expect-error` beside it onto the wrong line.

`insertStatementAfter(editor, statement, text)` now owns that: the new
statement goes on its own line after the comments the statement owns,
and code that shares that line moves below it. `insertAfterImports`
builds on it for the common case of adding an import or declaration.
`appendStatement`, `prependStatement`, `ConfigFile#setImport`, the Vitest
config merge, the Angular Vitest setup, the args-mocks codemod and the
React Native Metro setup all use them.

`statementEnd` no longer counts a next-line directive beside the
statement as the statement's own, so the directive keeps applying to the
line below it.

Inserting after an import that ends the file keeps the file without a
final newline instead of adding one, as `appendStatement` already did.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../vitest/src/angular-vitest-postinstall.ts  |  8 +---
 .../src/updateVitestFile.statements.test.ts   |  3 +-
 code/addons/vitest/src/updateVitestFile.ts    | 28 ++----------
 code/core/src/csf-tools/ConfigFile.ts         |  7 +--
 code/core/src/csf-tools/estree/editor.test.ts | 25 +++++++++++
 code/core/src/csf-tools/estree/editor.ts      | 43 ++++++++++++++++---
 code/core/src/csf-tools/index.ts              |  3 +-
 .../src/codemod/helpers/wrap-args-mocks.ts    | 12 +++---
 .../generators/REACT_NATIVE/metroConfig.ts    |  3 +-
 9 files changed, 79 insertions(+), 53 deletions(-)

diff --git a/code/addons/vitest/src/angular-vitest-postinstall.ts b/code/addons/vitest/src/angular-vitest-postinstall.ts
index d3deec7e6ffd..6dea1a0642cf 100644
--- a/code/addons/vitest/src/angular-vitest-postinstall.ts
+++ b/code/addons/vitest/src/angular-vitest-postinstall.ts
@@ -2,6 +2,7 @@ import {
   type ESTree as E,
   SourceEditor,
   arrayList,
+  insertAfterImports,
   prependToList,
   walk,
 } from 'storybook/internal/csf-tools';
@@ -110,12 +111,7 @@ export function injectAngularVitestIntoEditor(editor: SourceEditor): boolean {
 
   if (!hasAngularVitestImport(program)) {
     const statement = `import { ${ANGULAR_VITEST_PLUGIN_CALL} } from ${editor.quote}${ANGULAR_VITEST_IMPORT_SOURCE}${editor.quote};`;
-    const lastImport = program.body.findLast((node) => node.type === 'ImportDeclaration');
-    if (lastImport) {
-      editor.edits.appendLeft(lastImport.end, `\n${statement}`);
-    } else {
-      editor.edits.appendLeft(program.body[0].start, `${statement}\n`);
-    }
+    insertAfterImports(editor, statement);
   }
   return true;
 }
diff --git a/code/addons/vitest/src/updateVitestFile.statements.test.ts b/code/addons/vitest/src/updateVitestFile.statements.test.ts
index 6b3ff2fe07be..97536e817899 100644
--- a/code/addons/vitest/src/updateVitestFile.statements.test.ts
+++ b/code/addons/vitest/src/updateVitestFile.statements.test.ts
@@ -154,8 +154,7 @@ describe('updateConfigFile statements', () => {
       import { fileURLToPath } from 'node:url';
       import { dirname } from 'node:path';
       // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-      const dirname = fileURLToPath(new URL('.', import.meta.url));
-      "
+      const dirname = fileURLToPath(new URL('.', import.meta.url));"
     `);
   });
 
diff --git a/code/addons/vitest/src/updateVitestFile.ts b/code/addons/vitest/src/updateVitestFile.ts
index d3a1661c26d4..99ce8ae5f8bc 100644
--- a/code/addons/vitest/src/updateVitestFile.ts
+++ b/code/addons/vitest/src/updateVitestFile.ts
@@ -11,12 +11,12 @@ import {
   SourceEditor,
   appendToList,
   arrayList,
+  insertAfterImports,
   itemText,
   lineIndent,
   reindent,
   objectList,
   prependToList,
-  statementEnd,
 } from 'storybook/internal/csf-tools';
 
 import { normalize } from 'pathe';
@@ -351,29 +351,6 @@ const missingStatements = (source: SourceEditor, target: SourceEditor) => {
   });
 };
 
-// Insert the statements on the line after the last import and the comments it owns there. What
-// else shares that line moves below them, so the config never reads a variable before it is
-// declared.
-const insertStatements = (target: SourceEditor, text: string) => {
-  const { code, program } = target;
-  const index = program.body.findLastIndex((node) => node.type === 'ImportDeclaration');
-  if (index === -1) {
-    target.edits.appendLeft(program.body[0].start, `${text}\n\n`);
-    return;
-  }
-  const end = statementEnd(target, program.body[index]);
-  const next = end + /^[^\S\n]*/.exec(code.slice(end))![0].length;
-  if (next === code.length) {
-    target.edits.append(`\n${text}\n`);
-  } else if (code[next] === '\n') {
-    target.edits.appendLeft(next + 1, `${text}\n`);
-  } else if (next > end) {
-    target.edits.overwrite(end, next, `\n${text}\n`);
-  } else {
-    target.edits.appendLeft(next, `\n${text}\n`);
-  }
-};
-
 // Returns whether the config was updated; the edits are committed to `target` only when it was.
 export const updateConfigFile = (sourceCode: string, target: SourceEditor): boolean => {
   const source = new SourceEditor(sourceCode);
@@ -392,7 +369,8 @@ export const updateConfigFile = (sourceCode: string, target: SourceEditor): bool
 
   const statements = missingStatements(source, target);
   if (statements.length > 0) {
-    insertStatements(target, statements.join('\n'));
+    // After the imports, so the config never reads a variable before it is declared.
+    insertAfterImports(target, statements.join('\n'));
   }
 
   mergeTemplateIntoConfigObject({ source, target }, targetConfig, () => templateConfig()!);
diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index bb91c57c4d92..b18dcc58a6d6 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -33,6 +33,7 @@ import {
   appendStatement,
   appendToList,
   arrayList,
+  insertStatementAfter,
   objectList,
   prependStatement,
   printString,
@@ -40,7 +41,6 @@ import {
   removeFromList,
   removeStatement,
   setImportSpecifiers,
-  statementEnd,
 } from './estree/editor.ts';
 import { findVarInitialization } from './findVarInitialization.ts';
 
@@ -979,10 +979,7 @@ export class ConfigFile implements CsfObject {
       } else if (merged) {
         setImportSpecifiers(editor, importDeclaration, importDeclaration.specifiers, merged);
       } else {
-        editor.edits.appendLeft(
-          statementEnd(editor, importDeclaration),
-          `\nimport ${clause} from ${source};`
-        );
+        insertStatementAfter(editor, importDeclaration, `import ${clause} from ${source};`);
       }
     };
 
diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index 0cee978ce648..ba41d09da2a3 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -16,6 +16,7 @@ import {
   appendStatement,
   appendToList,
   arrayList,
+  insertAfterImports,
   prependStatement,
   prependToList,
   printMembers,
@@ -399,6 +400,30 @@ describe('prependStatement', () => {
   });
 });
 
+describe('insertAfterImports', () => {
+  const insert = (code: string) => {
+    const editor = new SourceEditor(code);
+    insertAfterImports(editor, `const b = 2;`);
+    return editor.toString();
+  };
+
+  it('leaves a next-line directive beside the last import above the line it is about', () => {
+    expect(insert(`import a from 'a'; // @ts-expect-error\nfoo();`)).toBe(
+      `import a from 'a';\nconst b = 2;\n// @ts-expect-error\nfoo();`
+    );
+  });
+
+  it('moves code sharing the line of the last import below the statement', () => {
+    expect(insert(`import a from 'a'; /* a */ foo();`)).toBe(
+      `import a from 'a'; /* a */\nconst b = 2;\nfoo();`
+    );
+  });
+
+  it('inserts as the first statement without imports', () => {
+    expect(insert(`'use client';\nfoo();`)).toBe(`'use client';\nconst b = 2;\nfoo();`);
+  });
+});
+
 describe('appendStatement', () => {
   it('appends below the comments trailing the last statement', () => {
     const editor = new SourceEditor(`export const a = 1; /* a */ // a`);
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index b8c27a658080..b2325fde1964 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -767,14 +767,45 @@ export const headerComments = (editor: SourceEditor): E.Comment[] => {
 
 /**
  * The end of a statement past the comments that follow it on its line, even when another statement
- * follows them. A JSDoc block that runs onto later lines documents the statement below instead.
+ * follows them. A next-line directive, or a JSDoc block that runs onto later lines, is about the
+ * code below instead, and so is everything after it.
  */
 export const statementEnd = (editor: SourceEditor, statement: Span) => {
   const { comments } = commentsBeside(editor, statement.end);
-  const docs = comments.findIndex(
-    (comment) => isJSDoc(comment) && editor.source(comment).includes('\n')
+  const below = comments.findIndex(
+    (comment) =>
+      NEXT_LINE_DIRECTIVE.test(comment.value) ||
+      (isJSDoc(comment) && editor.source(comment).includes('\n'))
   );
-  return (docs === -1 ? comments : comments.slice(0, docs)).at(-1)?.end ?? statement.end;
+  return (below === -1 ? comments : comments.slice(0, below)).at(-1)?.end ?? statement.end;
+};
+
+/**
+ * Insert a statement on its own line right after a statement and the comments it owns. What else
+ * shares that line moves below the inserted statement.
+ */
+export const insertStatementAfter = (editor: SourceEditor, statement: Span, text: string) => {
+  const { code, edits } = editor;
+  const end = statementEnd(editor, statement);
+  const next = end + /^[^\S\n]*/.exec(code.slice(end))![0].length;
+  if (next === code.length || code[next] === '\n') {
+    edits.appendLeft(end, `\n${text}`);
+    return;
+  }
+  if (next > end) {
+    edits.remove(end, next);
+  }
+  edits.appendLeft(end, `\n${text}\n`);
+};
+
+/** Insert a statement after the last import, or as the first statement when there is none. */
+export const insertAfterImports = (editor: SourceEditor, text: string) => {
+  const lastImport = editor.program.body.findLast((node) => node.type === 'ImportDeclaration');
+  if (lastImport) {
+    insertStatementAfter(editor, lastImport, text);
+  } else {
+    prependStatement(editor, text);
+  }
 };
 
 // A statement leads with the comments between it and the end of the statement before it. The
@@ -808,7 +839,7 @@ export const prependStatement = (editor: SourceEditor, text: string) => {
     const imports = statements.findIndex((statement) => statement.type !== 'ImportDeclaration');
     const lastImport = imports === -1 ? statements.at(-1) : statements[imports - 1];
     if (lastImport) {
-      editor.edits.appendLeft(statementEnd(editor, lastImport), `\n${text}`);
+      insertStatementAfter(editor, lastImport, text);
       return;
     }
     const headerEnd = header.at(-1)!.end;
@@ -828,7 +859,7 @@ export const appendStatement = (editor: SourceEditor, text: string) => {
     );
     return;
   }
-  editor.edits.appendLeft(statementEnd(editor, last), `\n${text}`);
+  insertStatementAfter(editor, last, text);
 };
 
 /** Remove a statement with the comments it owns, and its lines when nothing else shares them. */
diff --git a/code/core/src/csf-tools/index.ts b/code/core/src/csf-tools/index.ts
index c9a9362d32bf..9932cb498fb8 100644
--- a/code/core/src/csf-tools/index.ts
+++ b/code/core/src/csf-tools/index.ts
@@ -39,6 +39,8 @@ export {
   appendToList,
   arrayList,
   headerComments,
+  insertAfterImports,
+  insertStatementAfter,
   itemText,
   lineIndent,
   objectList,
@@ -55,5 +57,4 @@ export {
   removeStatements,
   setImportSpecifiers,
   specifierList,
-  statementEnd,
 } from './estree/editor.ts';
diff --git a/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.ts b/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.ts
index 5c7ee5a195a1..785fca0faa18 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.ts
@@ -4,6 +4,7 @@ import {
   type ESTreeNode as Node,
   type SourceEditor,
   generateUid,
+  insertAfterImports,
   walk,
   setImportSpecifiers,
 } from 'storybook/internal/csf-tools';
@@ -204,13 +205,10 @@ export function wrapArgsMocks(editor: SourceEditor) {
     if (namedImport) {
       setImportSpecifiers(editor, namedImport, namedImport.specifiers, { named: [specifier] });
     } else {
-      const lastImport = program.body.findLast((node) => node.type === 'ImportDeclaration');
-      const declaration = `import { ${specifier} } from ${editor.quote}storybook/test${editor.quote};`;
-      if (lastImport) {
-        editor.edits.appendLeft(lastImport.end, `\n${declaration}`);
-      } else {
-        editor.edits.prepend(`${declaration}\n`);
-      }
+      insertAfterImports(
+        editor,
+        `import { ${specifier} } from ${editor.quote}storybook/test${editor.quote};`
+      );
     }
   }
 
diff --git a/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.ts b/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.ts
index 1bfca0bfd895..70a1c748a786 100644
--- a/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.ts
+++ b/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.ts
@@ -6,6 +6,7 @@ import {
   type ESTree as E,
   type ESTreeNode as Node,
   SourceEditor,
+  insertStatementAfter,
   isStringLiteral,
   parseModule,
   walk,
@@ -206,7 +207,7 @@ const injectWithStorybookImport = (editor: SourceEditor, useEsmImport: boolean)
   const { body } = editor.program;
   const lastImport = body.findLast((statement) => statement.type === 'ImportDeclaration');
   if (useEsmImport && lastImport) {
-    editor.edits.appendLeft(lastImport.end, `\n${WITH_STORYBOOK_IMPORT}`);
+    insertStatementAfter(editor, lastImport, WITH_STORYBOOK_IMPORT);
     return;
   }
 

From badd8ff8a5f2db1cd761b2f9be45a367bb6227c1 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Sat, 17 Oct 2026 20:40:31 +0200
Subject: [PATCH 145/326] refactor(mocking-utils)!: parse modules inside
 automock and extractMockCalls

`getAutomockCode` and `extractMockCalls` took a parser callback, a leftover
from the Babel API. Their edits rely on what Storybook's own parse gives
them: offsets into code with `\n` line endings, and the outer span of a
parenthesized expression. Another ESTree parser gives neither, so the
callback could only produce wrong output, such as `= x);` for
`export default (x);`.

Both now parse themselves. `getAutomockCode(code, isSpy, fileName)` takes
the module's file name to pick the grammar, like
`rewriteSbMockImportCalls(code, fileName)` already did, and
`extractMockCalls(options, root, findMockRedirect)` drops the parser.
`parseModuleAst` and its deprecated `babelParser` alias are removed.

BREAKING CHANGE: builders that call `getAutomockCode` or `extractMockCalls`
from `storybook/internal/mocking-utils` drop the parser argument.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 MIGRATION.md                                  |  1 +
 .../plugins/storybook-optimize-deps-plugin.ts |  7 +-----
 .../src/plugins/vite-mock/plugin.ts           | 14 +++---------
 .../src/loaders/webpack-automock-loader.ts    |  4 ++--
 .../src/plugins/webpack-mock-plugin.ts        |  2 --
 code/core/src/mocking-utils/automock.test.ts  | 22 ++++++-------------
 code/core/src/mocking-utils/automock.ts       | 16 ++++++--------
 code/core/src/mocking-utils/extract.test.ts   | 10 ---------
 code/core/src/mocking-utils/extract.ts        | 19 +---------------
 code/frameworks/angular-vite/src/preset.ts    |  6 ++---
 10 files changed, 24 insertions(+), 77 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index d402893a5120..ee9e6f4b1fcd 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1334,6 +1334,7 @@ Storybook no longer bundles Babel or recast to read and write story and config f
 - `babelParse` is removed; use `parseModule(code, fileName)` from `storybook/internal/csf-tools`, which returns the ESTree `program` and `comments`. `babelParseFile` is removed as well; read CSF with `loadCsf(code, options)` or `readCsf(fileName, options)`.
 - Parsing normalizes line endings to `\n`. Node offsets from `parseModule`, `CsfFile._program` and `ConfigFile._program` index the normalized `code`/`_code`, not the string you passed in; lines and columns are unchanged.
 - `getHeaderComments(statement)` is replaced by `headerComments(editor)`.
+- `getAutomockCode(code, isSpy, fileName)` and `extractMockCalls(options, root, findMockRedirect)` in `storybook/internal/mocking-utils` parse the code themselves and no longer take a parser: drop the parser argument and pass the module's file name to `getAutomockCode`. `babelParser` is removed.
 - The story-shape helpers no longer take Babel paths: `jsDocTagsForPath` is `jsDocTagsForNode`, `metaObjectPath` is `metaObject`, `RenderFunctionPath` is `RenderFunction`, and `pathForNode` and `returnedExpressionPath` are removed in favor of `returnedExpression` and plain nodes.
 - The `getAbsolutePath` wrapper helpers in `storybook/internal/common` produce source text instead of Babel nodes. `getAbsolutePathWrapperAsCallExpression(isTs, names)`, which returned the wrapper's function declaration, is replaced by `getAbsolutePathWrapperDeclaration(isTs, names)`, which returns the declaration's source for `ConfigFile#setBodyDeclaration`. `getAbsolutePathCall(config, value)` returns the source of a call to the config's wrapper. `wrapValueWithGetAbsolutePathWrapper(config, node)` is replaced by `wrapValuesWithGetAbsolutePathWrapper(config, nodes)`, which wraps every node in the array and commits the edits to `config`.
 - `new CsfFile(code, options)` and `new ConfigFile(code, fileName)` take source code instead of a Babel AST.
diff --git a/code/builders/builder-vite/src/plugins/storybook-optimize-deps-plugin.ts b/code/builders/builder-vite/src/plugins/storybook-optimize-deps-plugin.ts
index cc56dbcd513a..a953da6244ea 100644
--- a/code/builders/builder-vite/src/plugins/storybook-optimize-deps-plugin.ts
+++ b/code/builders/builder-vite/src/plugins/storybook-optimize-deps-plugin.ts
@@ -1,10 +1,6 @@
 import { loadPreviewOrConfigFile } from 'storybook/internal/common';
 import type { StoryIndexGenerator } from 'storybook/internal/core-server';
-import {
-  parseModuleAst,
-  extractMockCalls,
-  findMockRedirect,
-} from 'storybook/internal/mocking-utils';
+import { extractMockCalls, findMockRedirect } from 'storybook/internal/mocking-utils';
 import type { Options, PreviewAnnotation, StoryIndex } from 'storybook/internal/types';
 
 import { resolve } from 'pathe';
@@ -69,7 +65,6 @@ export function storybookOptimizeDepsPlugin(options: Options): Plugin {
                 coreOptions: { disableTelemetry: true },
                 configDir: options.configDir,
               },
-              parseModuleAst,
               projectRoot,
               findMockRedirect
             )
diff --git a/code/builders/builder-vite/src/plugins/vite-mock/plugin.ts b/code/builders/builder-vite/src/plugins/vite-mock/plugin.ts
index e5ad8a1b9a71..c09e8c492b21 100644
--- a/code/builders/builder-vite/src/plugins/vite-mock/plugin.ts
+++ b/code/builders/builder-vite/src/plugins/vite-mock/plugin.ts
@@ -1,7 +1,6 @@
 import { readFileSync } from 'node:fs';
 
 import {
-  parseModuleAst,
   extractMockCalls,
   findMockRedirect,
   getAutomockCode,
@@ -56,7 +55,7 @@ export function viteMockPlugin(options: MockPluginOptions): Plugin[] {
       },
 
       buildStart() {
-        mockCalls = extractMockCalls(options, parseModuleAst, viteConfig.root, findMockRedirect);
+        mockCalls = extractMockCalls(options, viteConfig.root, findMockRedirect);
       },
 
       configureServer(server) {
@@ -65,12 +64,7 @@ export function viteMockPlugin(options: MockPluginOptions): Plugin[] {
             // Store the old mocks before updating
             const oldMockCalls = mockCalls;
             // Re-extract mocks to get the latest list
-            mockCalls = extractMockCalls(
-              options,
-              parseModuleAst,
-              viteConfig.root,
-              findMockRedirect
-            );
+            mockCalls = extractMockCalls(options, viteConfig.root, findMockRedirect);
 
             // Invalidate the preview file
             const previewMod = server.moduleGraph.getModuleById(options.previewConfigPath);
@@ -149,9 +143,7 @@ export function viteMockPlugin(options: MockPluginOptions): Plugin[] {
 
             try {
               if (!call.redirectPath) {
-                const automockedCode = getAutomockCode(code, call.spy, (source) =>
-                  parseModuleAst(source, id)
-                );
+                const automockedCode = getAutomockCode(code, call.spy, id);
 
                 return {
                   code: automockedCode.toString(),
diff --git a/code/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts b/code/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts
index 7493e52bf1a0..1dec67c76771 100644
--- a/code/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts
+++ b/code/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts
@@ -1,4 +1,4 @@
-import { parseModuleAst, getAutomockCode } from 'storybook/internal/mocking-utils';
+import { getAutomockCode } from 'storybook/internal/mocking-utils';
 
 import type { LoaderContext } from 'webpack';
 
@@ -31,7 +31,7 @@ export default function webpackAutomockLoader(
   const isSpy = options.spy === 'true';
 
   // Generate the mocked source code using the utility from @vitest/mocker.
-  const mocked = getAutomockCode(source, isSpy, (code) => parseModuleAst(code, this.resourcePath));
+  const mocked = getAutomockCode(source, isSpy, this.resourcePath);
 
   // Return the transformed code to Webpack for further processing.
   return mocked.toString();
diff --git a/code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts b/code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts
index d36ba0a4c654..af31f1c2908b 100644
--- a/code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts
+++ b/code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts
@@ -2,7 +2,6 @@ import { dirname, isAbsolute } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 import {
-  parseModuleAst,
   extractMockCalls,
   findMockRedirect,
   getIsExternal,
@@ -158,7 +157,6 @@ export class WebpackMockPlugin {
     // Use extractMockCalls to get all mocks from the transformed preview file
     const mocks = extractMockCalls(
       { previewConfigPath, configDir: dirname(previewConfigPath) },
-      parseModuleAst,
       compiler.context,
       findMockRedirect
     );
diff --git a/code/core/src/mocking-utils/automock.test.ts b/code/core/src/mocking-utils/automock.test.ts
index fe9a49bd07a6..dec94109fab7 100644
--- a/code/core/src/mocking-utils/automock.test.ts
+++ b/code/core/src/mocking-utils/automock.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 
 import { getAutomockCode } from './automock.ts';
-import { parseModuleAst } from './extract.ts';
+import { parseModule } from '../csf-tools/estree/ast.ts';
 
 describe('getAutomockCode', () => {
   it('mocks destructured exports, including ones with defaults', () => {
@@ -12,9 +12,7 @@ describe('getAutomockCode', () => {
       export async function getUser() {}
     `;
 
-    const mocked = getAutomockCode(code, false, (source) =>
-      parseModuleAst(source, '/mod.ts')
-    ).toString();
+    const mocked = getAutomockCode(code, false, '/mod.ts').toString();
 
     for (const name of ['a', 'renamed', 'first', 'getUser']) {
       expect(mocked).toContain(`["${name}"]: ${name},`);
@@ -25,33 +23,27 @@ describe('getAutomockCode', () => {
     ['export default (x);', 'const __vitest_default = (x);'],
     ['export /* a */ default /* b */ ((x));', 'const __vitest_default = ((x));'],
   ])('keeps the parentheses of %s', (code, declaration) => {
-    const mocked = getAutomockCode(code, false, (source) =>
-      parseModuleAst(source, '/mod.ts')
-    ).toString();
+    const mocked = getAutomockCode(code, false, '/mod.ts').toString();
 
     expect(mocked.startsWith(declaration)).toBe(true);
-    expect(() => parseModuleAst(mocked, '/mod.ts')).not.toThrow();
+    expect(() => parseModule(mocked, '/mod.ts')).not.toThrow();
   });
 
   it('mocks every export of a CRLF module', () => {
     const code = 'export const a = 1;\r\nexport function b() {}\r\nexport default a;\r\n';
 
-    const mocked = getAutomockCode(code, false, (source) =>
-      parseModuleAst(source, '/mod.ts')
-    ).toString();
+    const mocked = getAutomockCode(code, false, '/mod.ts').toString();
 
     expect(mocked).toContain('["a"]: a,');
     expect(mocked).toContain('["b"]: b,');
     expect(mocked).toContain('["__vitest_default"]: __vitest_default,');
-    expect(() => parseModuleAst(mocked, '/mod.ts')).not.toThrow();
+    expect(() => parseModule(mocked, '/mod.ts')).not.toThrow();
   });
 
   it('mocks a .ts module with generic arrows under a Vite id with a query', () => {
     const code = 'export const identity = <T>(value: T) => value;';
 
-    const mocked = getAutomockCode(code, false, (source) =>
-      parseModuleAst(source, '/src/api.ts?v=abc')
-    ).toString();
+    const mocked = getAutomockCode(code, false, '/src/api.ts?v=abc').toString();
 
     expect(mocked).toContain('["identity"]: identity,');
   });
diff --git a/code/core/src/mocking-utils/automock.ts b/code/core/src/mocking-utils/automock.ts
index ff4e364aaa64..b32468a391c1 100644
--- a/code/core/src/mocking-utils/automock.ts
+++ b/code/core/src/mocking-utils/automock.ts
@@ -7,16 +7,14 @@ import type {
 } from 'estree';
 import MagicString from 'magic-string';
 
-import { normalizeLineEndings, outerSpan } from '../csf-tools/estree/ast.ts';
+import { outerSpan, parseModule } from '../csf-tools/estree/ast.ts';
 import { type Positioned, getArbitraryModuleIdentifier } from './esmWalker.ts';
 
-// An ESTree program; OXC's own `Program` type is structurally compatible with what is read here.
-type ParseFn = (code: string) => unknown;
-
 export const __STORYBOOK_GLOBAL_THIS_ACCESSOR__ = '__vitest_mocker__';
 
-export function getAutomockCode(originalCode: string, isSpy: boolean, parse: ParseFn) {
-  const mocked = automockModule(originalCode, isSpy ? 'autospy' : 'automock', parse, {
+/** Mock the exports of a module. The file name picks the grammar it is parsed with. */
+export function getAutomockCode(originalCode: string, isSpy: boolean, fileName?: string) {
+  const mocked = automockModule(originalCode, isSpy ? 'autospy' : 'automock', fileName, {
     globalThisAccessor: JSON.stringify(__STORYBOOK_GLOBAL_THIS_ACCESSOR__),
   });
   return mocked;
@@ -48,14 +46,14 @@ export function getAutomockCode(originalCode: string, isSpy: boolean, parse: Par
 export function automockModule(
   code: string,
   mockType: 'automock' | 'autospy',
-  parse: (code: string) => any,
+  fileName: string | undefined,
   options: any = {}
 ): MagicString {
   const globalThisAccessor =
     options.globalThisAccessor || JSON.stringify(__STORYBOOK_GLOBAL_THIS_ACCESSOR__);
   // Edits apply at the parsed offsets, which index the code with `\n` line endings.
-  const text = normalizeLineEndings(code);
-  const ast = parse(text) as Program;
+  const { code: text, program } = parseModule(code, fileName);
+  const ast = program as unknown as Program;
 
   const m = new MagicString(text);
 
diff --git a/code/core/src/mocking-utils/extract.test.ts b/code/core/src/mocking-utils/extract.test.ts
index 0c7943104482..61e6d18770ea 100644
--- a/code/core/src/mocking-utils/extract.test.ts
+++ b/code/core/src/mocking-utils/extract.test.ts
@@ -40,8 +40,6 @@ vi.mock('storybook/internal/telemetry', () => ({
   telemetry: vi.fn(),
 }));
 
-const parser = extractModule.parseModuleAst;
-
 describe('isModuleDirectory', () => {
   it('returns true for node_modules path', () => {
     expect(extractModule.isModuleDirectory('/foo/node_modules/bar')).toBe(true);
@@ -64,7 +62,6 @@ describe('extractMockCalls', () => {
     vi.mocked(readFileSync).mockReturnValue(previewContent);
     return extractModule.extractMockCalls(
       { previewConfigPath, configDir, coreOptions },
-      parser,
       root,
       findMockRedirect
     );
@@ -246,13 +243,6 @@ describe('extractMockCalls', () => {
       expect(unchanged).toEqual({ code: `export default {};`, map: null });
     });
 
-    it('parses .ts modules with the TS grammar and fails on syntax errors', () => {
-      const code = `export const identity = <T>(value: T) => value;`;
-      expect(extractModule.parseModuleAst(code, '/project/util.ts').body).toHaveLength(1);
-      expect(extractModule.parseModuleAst(code).body).toHaveLength(1);
-      expect(() => extractModule.parseModuleAst('export const = ;', '/project/util.ts')).toThrow();
-    });
-
     it('rewrites sb.mock(import("<xyz>")) to sb.mock("<xyz>")', () => {
       const code = `
         sb.mock(import('./bar/baz'));
diff --git a/code/core/src/mocking-utils/extract.ts b/code/core/src/mocking-utils/extract.ts
index 0725ae387c4f..2b48efcddbfd 100644
--- a/code/core/src/mocking-utils/extract.ts
+++ b/code/core/src/mocking-utils/extract.ts
@@ -35,22 +35,6 @@ interface ExtractMockCallsOptions {
   configDir: string;
 }
 
-/**
- * Parse a module into an ESTree program. The file extension picks the grammar, so a `.ts` module
- * keeps its generic arrows; without a TS or JS extension the TSX and TS grammars are both tried.
- * Throws on syntax errors.
- *
- * Node offsets index `normalizeLineEndings(code)`, which differs from `code` when it uses CRLF.
- */
-export const parseModuleAst = (code: string, fileName?: string) =>
-  parseModule(code, fileName).program;
-
-/**
- * @deprecated Use `parseModuleAst`. It returns an ESTree program, no longer a Babel AST, and its
- *   offsets index the code with `\n` line endings.
- */
-export const babelParser = parseModuleAst;
-
 const isStringLiteral = (node: any): boolean =>
   node?.type === 'Literal' && typeof node.value === 'string';
 
@@ -98,7 +82,6 @@ export function rewriteSbMockImportCalls(code: string, fileName: string) {
  */
 export function extractMockCalls(
   options: ExtractMockCallsOptions,
-  parse: (input: string) => unknown,
   root: string,
   findMockRedirect: (
     root: string,
@@ -109,7 +92,7 @@ export function extractMockCalls(
   try {
     const previewConfigCode = readFileSync(options.previewConfigPath, 'utf-8');
     const { code: jsCode } = transformSync(previewConfigCode, { loader: 'tsx', format: 'esm' });
-    const ast = parse(jsCode);
+    const ast = parseModule(jsCode, options.previewConfigPath).program;
     const mocks: MockCall[] = [];
 
     /** Helper to check if an ObjectExpression node has spy: true */
diff --git a/code/frameworks/angular-vite/src/preset.ts b/code/frameworks/angular-vite/src/preset.ts
index 4a2f617ad891..93cacf5ca03e 100644
--- a/code/frameworks/angular-vite/src/preset.ts
+++ b/code/frameworks/angular-vite/src/preset.ts
@@ -1,6 +1,5 @@
 import { findConfigFile } from 'storybook/internal/common';
 import {
-  parseModuleAst,
   extractMockCalls,
   findMockRedirect,
   getAutomockCode,
@@ -534,7 +533,7 @@ export function angularOptionsPlugin(
 // the same mock calls and re-applies them on whatever analogjs produced:
 //   - `__mocks__/…` redirect → return the redirect file contents.
 //   - plain `sb.mock(...)` automock → wrap the post-analogjs exports with
-//     `getAutomockCode(code, spy, parse)`.
+//     `getAutomockCode(code, spy, id)`.
 function angularViteRedirectReapplyPlugin(options?: StandaloneOptions): Plugin {
   let viteConfig: { resolve?: { preserveSymlinks?: boolean } } = {};
   let redirects: Array<{ absolutePath: string; redirectPath: string }> = [];
@@ -555,7 +554,6 @@ function angularViteRedirectReapplyPlugin(options?: StandaloneOptions): Plugin {
       try {
         const calls = extractMockCalls(
           { previewConfigPath, configDir: options.configDir },
-          parseModuleAst,
           (viteConfig as any).root ?? process.cwd(),
           findMockRedirect
         );
@@ -608,7 +606,7 @@ function angularViteRedirectReapplyPlugin(options?: StandaloneOptions): Plugin {
           return null;
         }
         try {
-          const automocked = getAutomockCode(code, a.spy, (source) => parseModuleAst(source, id));
+          const automocked = getAutomockCode(code, a.spy, id);
           return {
             code: automocked.toString(),
             map: automocked.generateMap(),

From 0cd45f5eced54b82ad38f427e9413a9832519f1f Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Sat, 17 Oct 2026 20:40:44 +0200
Subject: [PATCH 146/326] fix(addon-vitest): reuse `import { default as path }`
 when merging the config

`importedExport` told a default import and `{ default as path }` apart,
so a config importing path that way fell back to manual setup. Both
read the module's default export, which for `node:path` is the same
object as its namespace.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../vitest/src/updateVitestFile.statements.test.ts | 14 ++++++++++++++
 code/addons/vitest/src/updateVitestFile.ts         |  9 +++++----
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/code/addons/vitest/src/updateVitestFile.statements.test.ts b/code/addons/vitest/src/updateVitestFile.statements.test.ts
index 97536e817899..0e88e6234bee 100644
--- a/code/addons/vitest/src/updateVitestFile.statements.test.ts
+++ b/code/addons/vitest/src/updateVitestFile.statements.test.ts
@@ -200,6 +200,20 @@ describe('updateConfigFile statements', () => {
     expect(code).toContain("path.join(import.meta.dirname, '.storybook')");
   });
 
+  it('reuses a default import of path written as a named import', async () => {
+    const target = new SourceEditor(dedent`
+      import { default as path } from 'node:path';
+      export default defineConfig({ test: {} });
+    `);
+
+    expect(updateConfigFile(await realTemplate(), target)).toBe(true);
+    const code = target.toString();
+    expect(code.match(/^import .* from '(node:)?path';$/gm)).toEqual([
+      "import { default as path } from 'node:path';",
+    ]);
+    expect(code).toContain("path.join(import.meta.dirname, '.storybook')");
+  });
+
   it('adds the path import next to named imports from node:path', async () => {
     const target = new SourceEditor(dedent`
       import { join } from 'node:path';
diff --git a/code/addons/vitest/src/updateVitestFile.ts b/code/addons/vitest/src/updateVitestFile.ts
index 99ce8ae5f8bc..c79833def7b0 100644
--- a/code/addons/vitest/src/updateVitestFile.ts
+++ b/code/addons/vitest/src/updateVitestFile.ts
@@ -302,8 +302,8 @@ const findWritableConfigObject = (
   );
 };
 
-// The export an import binding reads: `node:path` and `path` are one module, and its default and
-// namespace imports the same object.
+// The export an import binding reads: `node:path` and `path` are one module, and its default
+// export, however it is imported, the same object as its namespace.
 const importedExport = (binding: Binding) => {
   if (binding.kind !== 'import' || binding.declaration?.type !== 'ImportDeclaration') {
     return undefined;
@@ -314,8 +314,9 @@ const importedExport = (binding: Binding) => {
       ? specifier.imported.type === 'Literal'
         ? specifier.imported.value
         : specifier.imported.name
-      : '*';
-  return `${name} from ${binding.declaration.source.value.replace(/^node:/, '')}`;
+      : 'default';
+  const source = binding.declaration.source.value.replace(/^node:/, '');
+  return `${name === 'default' ? '*' : name} from ${source}`;
 };
 
 // Whether the target binds a name the merged template code reads to anything but the same import.

From 04b7367e1cfd79a66339b09817e7ff3fbf2177a0 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Sat, 17 Oct 2026 20:40:46 +0200
Subject: [PATCH 147/326] fix(cli): parenthesize conditional and constructor
 types in custom args intersections

The CSF factory codemod joins the custom args types of a story with `&`.
It parenthesized unions and function types, but not conditional and
constructor types, so `A extends B ? C : D` intersected with `E` turned
into `A extends B ? C : D & E`.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/codemod/helpers/custom-args-type.ts       | 10 +++++++++-
 .../codemod/helpers/story-to-csf-factory.test.ts  | 15 +++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/code/lib/cli-storybook/src/codemod/helpers/custom-args-type.ts b/code/lib/cli-storybook/src/codemod/helpers/custom-args-type.ts
index 9173430e0e49..234282753bbc 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/custom-args-type.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/custom-args-type.ts
@@ -3,6 +3,14 @@ import type { ESTree as E, ESTreeNode as Node, SourceEditor } from 'storybook/in
 // `ComponentMeta` and `ComponentStory` are left out: their type argument is always a component.
 const argsTypeNames = new Set(['Meta', 'MetaObj', 'Story', 'StoryFn', 'StoryObj']);
 
+// Types that `&` binds tighter than, so they need parentheses in an intersection.
+const LOOSER_THAN_INTERSECTION = new Set([
+  'TSUnionType',
+  'TSFunctionType',
+  'TSConstructorType',
+  'TSConditionalType',
+]);
+
 // The component is never a custom args type: `preview.meta()` infers its args from `component`.
 export function customArgsTypes(editor: SourceEditor, component: Node | undefined) {
   const argsTypeLocalNames = new Set<string>();
@@ -125,7 +133,7 @@ export function customArgsTypes(editor: SourceEditor, component: Node | undefine
         types.length > 1
           ? types
               .map((type) =>
-                type.type === 'TSUnionType' || type.type === 'TSFunctionType'
+                LOOSER_THAN_INTERSECTION.has(type.type)
                   ? `(${editor.source(type)})`
                   : editor.source(type)
               )
diff --git a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
index 6c7c8a7548fb..29fe2054c1be 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
@@ -1154,6 +1154,21 @@ describe('stories codemod', () => {
         ).resolves.toContain('meta.type<{ args: (Small | Wide) & Themed }>().story()');
       });
 
+      it('puts a conditional type in parentheses when it is intersected', async () => {
+        await expect(
+          transform(dedent`
+            import type { Meta, StoryObj } from '@storybook/react';
+            import { Button } from './Button';
+            import type { Small, Themed } from './types';
+
+            export default { component: Button } satisfies Meta<typeof Button>;
+
+            export const Default: StoryObj<typeof Button> = {};
+            export const Sized: StoryObj<Small extends Themed ? Small : never> = {} satisfies StoryObj<Themed>;
+          `)
+        ).resolves.toContain('.type<{ args: (Small extends Themed ? Small : never) & Themed }>()');
+      });
+
       it('leaves out of the custom args type of a story what the meta already has', async () => {
         await expect(
           transform(dedent`

From d892a52a9b554c07c2681d4929afa46fb7961e8e Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Sat, 17 Oct 2026 20:40:48 +0200
Subject: [PATCH 148/326] test: resolve oxc-parser to its Node build in every
 test project

oxc-parser 0.153 maps the `browser` export condition to a WASM build
that is not installed. The Svelte and docgen harness test projects
resolve that condition, so every test that loads csf-tools there failed
to import oxc-parser. Storybook parses in Node with the native binding,
so the tests now do too.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 code/vitest.shared.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/code/vitest.shared.ts b/code/vitest.shared.ts
index 87ab957f9f83..e032a8b1f040 100644
--- a/code/vitest.shared.ts
+++ b/code/vitest.shared.ts
@@ -21,6 +21,11 @@ export const textAssetLoaderPlugins: Plugin[] = ['.md', '.html'].map((extension)
 }));
 
 export const vitestCommonConfig = defineConfig({
+  resolve: {
+    // Projects that resolve the `browser` condition, such as Svelte's, would get the WASM build of
+    // oxc-parser, which is not installed. Storybook parses in Node, with the native binding.
+    alias: [{ find: /^oxc-parser$/, replacement: require.resolve('oxc-parser') }],
+  },
   test: {
     passWithNoTests: true,
     clearMocks: true,

From 15fa179be2f11e75b9583ce07e14efa0f77bbbfd Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Sat, 17 Oct 2026 20:40:50 +0200
Subject: [PATCH 149/326] docs(migration): every file Storybook edits is
 written with LF line endings

The LF note named only `storybook automigrate`, but the codemods, the
setup steps of `storybook init` and `storybook add`, and the builders'
transforms normalize line endings too.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 MIGRATION.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index ee9e6f4b1fcd..c344287a618d 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1321,7 +1321,7 @@ Storybook no longer bundles Babel or recast to read and write story and config f
 
 - **Flow syntax is no longer supported in story files.** Babel parsed `// @flow` files with its Flow plugin; OXC does not parse Flow. A `// @flow` file whose syntax is also valid TypeScript still indexes, but Flow-only syntax such as variance (`+readOnly`) or type casts (`(value: Type)`) is a parse error, and the error names Flow. Convert such files to TypeScript or plain JavaScript.
 - `parameters.docs.source.originalSource` is now the story's source text exactly as written, where Babel reprinted it with its own formatting. "Show code" and `docs.source.transform` functions receive the authored text, with line endings normalized to `\n`.
-- `storybook automigrate` writes the files it changes with `\n` line endings, even if they used CRLF; it used to keep CRLF.
+- Files Storybook edits, with `storybook automigrate`, its codemods, or the setup steps of `storybook init` and `storybook add`, are written with `\n` line endings, even if they used CRLF; they used to keep CRLF. Code the builders transform, for example for `sb.mock()`, has `\n` line endings too.
 - Parse errors use OXC's wording, and end with ` in <file>` when the file name is known. Duplicate declarations and legacy octal literals are still rejected.
 - A parse error in a module that `sb.mock()` automocks under webpack now fails that module's build, where Babel's error recovery used to mock whatever it could parse.
 

From e3718c2512e28f1178cb18325a76f272785ce5e5 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Sat, 17 Oct 2026 20:45:21 +0200
Subject: [PATCH 150/326] refactor(create-storybook): insert the Metro
 withStorybook import with the shared primitives

`getTopInsertionPosition` decided comment ownership on its own: only a
comment at offset 0 counted as a file pragma, so the generated `require`
landed between a `// @ts-expect-error` and the statement it is about.
The ESM import now goes through `insertAfterImports` and the CommonJS
require through `prependStatement`, which own those rules for every
other insertion. The require no longer gets a blank line below it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../REACT_NATIVE/metroConfig.test.ts          | 16 ++++++--
 .../generators/REACT_NATIVE/metroConfig.ts    | 39 +++----------------
 2 files changed, 18 insertions(+), 37 deletions(-)

diff --git a/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.test.ts b/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.test.ts
index 0addcd7a5df6..b4411e1de296 100644
--- a/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.test.ts
+++ b/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.test.ts
@@ -68,7 +68,6 @@ describe('metroConfig codemod', () => {
     expect(after).not.toBe(before);
     expect(await getFormattedDiff(before, after, filePath)).toMatchInlineSnapshot(`
       "+ const { withStorybook } = require('@storybook/react-native/withStorybook');
-      + 
       + 
         const defaultConfig = {};
         
@@ -96,7 +95,6 @@ describe('metroConfig codemod', () => {
       "- module.exports = withExpo(defaultConfig);
       - 
       + const { withStorybook } = require('@storybook/react-native/withStorybook');
-      + 
       + module.exports = withStorybook(withExpo(defaultConfig));
       + "
     `);
@@ -117,7 +115,6 @@ export default async function makeMetroConfig() {
         "- export default async function makeMetroConfig() {
         - 
         + import { withStorybook } from '@storybook/react-native/withStorybook';
-        + 
         + export default withStorybook(async function makeMetroConfig() {
         + 
             return { resolver: {} };
@@ -130,6 +127,18 @@ export default async function makeMetroConfig() {
     }
   });
 
+  it('keeps a next-line directive above the statement it is about', () => {
+    const before = `// @ts-expect-error\nmodule.exports = unknownConfig;\n`;
+    const transformed = transformMetroConfigSource(before, path.join(tempDir, 'metro.config.js'));
+
+    expect(transformed.action).toBe('updated');
+    if (transformed.action === 'updated') {
+      expect(transformed.code).toBe(
+        `const { withStorybook } = require('@storybook/react-native/withStorybook');\n// @ts-expect-error\nmodule.exports = withStorybook(unknownConfig);\n`
+      );
+    }
+  });
+
   it('uses ESM import for a .js config that uses export default', () => {
     const before = 'export default {};\n';
     const transformed = transformMetroConfigSource(before, path.join(tempDir, 'metro.config.js'));
@@ -216,7 +225,6 @@ module.exports = {};
     if (transformed.action === 'updated') {
       expect(await getFormattedDiff(before, transformed.code, filePath)).toMatchInlineSnapshot(`
         "+ const { withStorybook } = require('@storybook/react-native/withStorybook');
-        + 
         + 
           const hint = \`
           import { something } from 'somewhere'
diff --git a/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.ts b/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.ts
index 70a1c748a786..763cbf60f471 100644
--- a/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.ts
+++ b/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.ts
@@ -6,9 +6,10 @@ import {
   type ESTree as E,
   type ESTreeNode as Node,
   SourceEditor,
-  insertStatementAfter,
+  insertAfterImports,
   isStringLiteral,
   parseModule,
+  prependStatement,
   walk,
 } from 'storybook/internal/csf-tools';
 import { logger, prompt } from 'storybook/internal/node-logger';
@@ -184,40 +185,12 @@ const hasWithStorybookBinding = (program: E.Program) => {
   return undefined;
 };
 
-// After directives and a pragma comment at the very start of the file (`// @ts-nocheck`), but above
-// the first statement's other leading comments.
-const getTopInsertionPosition = (editor: SourceEditor) => {
-  const { body } = editor.program;
-  const firstStatement = body.find(
-    (statement) =>
-      !(statement.type === 'ExpressionStatement' && isStringLiteral(statement.expression))
-  );
-  if (!firstStatement) {
-    return undefined;
-  }
-  const previousEnd = body[body.indexOf(firstStatement) - 1]?.end ?? 0;
-  const leadingComment = editor.comments.find(
-    (comment) =>
-      comment.start > 0 && comment.start >= previousEnd && comment.end <= firstStatement.start
-  );
-  return leadingComment?.start ?? firstStatement.start;
-};
-
 const injectWithStorybookImport = (editor: SourceEditor, useEsmImport: boolean) => {
-  const { body } = editor.program;
-  const lastImport = body.findLast((statement) => statement.type === 'ImportDeclaration');
-  if (useEsmImport && lastImport) {
-    insertStatementAfter(editor, lastImport, WITH_STORYBOOK_IMPORT);
-    return;
-  }
-
-  const statement = useEsmImport ? WITH_STORYBOOK_IMPORT : WITH_STORYBOOK_REQUIRE;
-  const position = getTopInsertionPosition(editor);
-  if (position === undefined) {
-    editor.edits.append(`\n${statement}\n`);
-    return;
+  if (useEsmImport) {
+    insertAfterImports(editor, WITH_STORYBOOK_IMPORT);
+  } else {
+    prependStatement(editor, WITH_STORYBOOK_REQUIRE);
   }
-  editor.edits.appendRight(position, `${statement}\n\n`);
 };
 
 const WITH_STORYBOOK_IMPORT =

From 7375e3cf14d53ba5a8f067629ef381cf5cb4514a Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Sat, 17 Oct 2026 21:08:12 +0200
Subject: [PATCH 151/326] fix(csf-tools): keep inserted and removed statements
 on clean lines

Follow-ups to the statement primitives from review:

- `insertStatementAfter` prefixes `;` when the text starts with `(`,
  `[`, a backtick, `+`, `-` or `/` and the statement before it has no
  `;`, so `[1].forEach(f)` no longer continues `const a = 1`.
- Several statements inserted after one statement share one line break
  before the code moved below them, instead of each adding a blank line.
  At the end of a line, they go after the spaces ending it.
- `removeStatement` takes the spaces between the statement and the code
  it shares its line with, so `foo(); bar();` without `bar` is `foo();`.
- Dropping a trailing run from a list removes only the comma of the last
  kept item, not the comments around it.
- The CSF meta and the Vitest component transform insert their
  `export default` with `insertStatementAfter`, and the CSF factory
  codemod appends to an export-less preview with `appendStatement`.
- `insertStatementAfter` is no longer exported from
  `storybook/internal/csf-tools`: only core uses it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 code/core/src/csf-tools/CsfFile.ts            |  3 +-
 code/core/src/csf-tools/estree/editor.test.ts | 50 +++++++++++++++++--
 code/core/src/csf-tools/estree/editor.ts      | 30 ++++++++---
 code/core/src/csf-tools/index.ts              |  1 -
 .../vitest-plugin/component-transformer.ts    |  3 +-
 .../codemod/helpers/config-to-csf-factory.ts  |  5 +-
 6 files changed, 75 insertions(+), 17 deletions(-)

diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index addc7e923363..13cdf59b8b82 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -41,6 +41,7 @@ import {
   type InputSourceMap,
   SourceEditor,
   appendStatement,
+  insertStatementAfter,
 } from './estree/editor.ts';
 import { generateUid } from './estree/scope.ts';
 import { findVarInitialization } from './findVarInitialization.ts';
@@ -645,7 +646,7 @@ export class CsfFile {
         outerSpan(declaration).start,
         `const ${metaName} = `
       );
-      this._editor.edits.appendLeft(node.end, `\nexport default ${metaName};`);
+      insertStatementAfter(this._editor, node, `export default ${metaName};`);
       this._metaStatement = node;
       decl = declaration;
     } else if (isVariableReference) {
diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index ba41d09da2a3..a3bfcebf84ea 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -219,6 +219,12 @@ describe('removeFromList', () => {
     );
   });
 
+  it('removes only the comma of the last kept item before a removed trailing run', () => {
+    expect(removeElement(`export default { addons: [1 // one\n, 2 // two\n, 3] };`, 2)).toBe(
+      `export default { addons: [1 // one\n, 2 // two\n] };`
+    );
+  });
+
   it.each(['\n', '\r\n'])(
     'keeps what follows adjacent removed items off the line of the comment before them',
     (eol) => {
@@ -328,11 +334,21 @@ describe('removeStatement', () => {
     const code = `const a = 1; /**\n * Docs for B\n */\nexport const B = 2;`;
     const first = new SourceEditor(code);
     removeStatement(first, first.program.body[0]);
-    expect(first.toString()).toBe(` /**\n * Docs for B\n */\nexport const B = 2;`);
+    expect(first.toString()).toBe(`/**\n * Docs for B\n */\nexport const B = 2;`);
 
     const second = new SourceEditor(code);
     removeStatement(second, second.program.body[1]);
-    expect(second.toString()).toBe(`const a = 1; `);
+    expect(second.toString()).toBe(`const a = 1;`);
+  });
+
+  it('takes the spaces between it and the code it shares its line with', () => {
+    const before = new SourceEditor(`foo(); // @ts-expect-error\nbar();`);
+    removeStatement(before, before.program.body[0]);
+    expect(before.toString()).toBe(`// @ts-expect-error\nbar();`);
+
+    const after = new SourceEditor(`foo(); bar();\nbaz();`);
+    removeStatement(after, after.program.body[1]);
+    expect(after.toString()).toBe(`foo();\nbaz();`);
   });
 
   it('removes a statement below a blank first line', () => {
@@ -344,7 +360,7 @@ describe('removeStatement', () => {
   it('leaves the comment trailing the previous statement on a shared last line', () => {
     const editor = new SourceEditor(`import a from 'a'; /* a */ import b from 'b';`);
     removeStatement(editor, editor.program.body[1]);
-    expect(editor.toString()).toBe(`import a from 'a'; /* a */ `);
+    expect(editor.toString()).toBe(`import a from 'a'; /* a */`);
   });
 });
 
@@ -419,6 +435,34 @@ describe('insertAfterImports', () => {
     );
   });
 
+  it('inserts below the comments the last import owns', () => {
+    expect(insert(`import x from 'x'; // x\nfoo();`)).toBe(
+      `import x from 'x'; // x\nconst b = 2;\nfoo();`
+    );
+    expect(insert(`import x from 'x'; /* x\n y */`)).toBe(
+      `import x from 'x'; /* x\n y */\nconst b = 2;`
+    );
+  });
+
+  it('keeps the spaces ending the line of the last import on that line', () => {
+    expect(insert(`import a from 'a';   \nfoo();`)).toBe(
+      `import a from 'a';   \nconst b = 2;\nfoo();`
+    );
+  });
+
+  it('inserts several statements in order, with one line break before the code moved below', () => {
+    const editor = new SourceEditor(`import a from 'a'; foo();`);
+    insertAfterImports(editor, `const b = 2;`);
+    insertAfterImports(editor, `const c = 3;`);
+    expect(editor.toString()).toBe(`import a from 'a';\nconst b = 2;\nconst c = 3;\nfoo();`);
+  });
+
+  it('separates a statement that would continue the one before it', () => {
+    const editor = new SourceEditor(`import a from 'a'\nfoo()`);
+    insertAfterImports(editor, `[1, 2].forEach(a);`);
+    expect(editor.toString()).toBe(`import a from 'a'\n;[1, 2].forEach(a);\nfoo()`);
+  });
+
   it('inserts as the first statement without imports', () => {
     expect(insert(`'use client';\nfoo();`)).toBe(`'use client';\nconst b = 2;\nfoo();`);
   });
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index b2325fde1964..5e37a9bf689f 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -661,10 +661,11 @@ export const removeFromList = (editor: SourceEditor, list: List, removedItems: r
     }
     if (last === items.length - 1 && separatorAfter(editor, items[last]) === undefined) {
       // Trailing run without a comma: drop the comma of the last kept item instead, unless that
-      // comma writes a hole.
+      // comma writes a hole. Only the comma: the comments around it stay with the kept item.
       const previous = items[first - 1];
       if (!isHole(previous)) {
-        edits.remove(previous.end, separatorAfter(editor, previous)!);
+        const comma = separatorAfter(editor, previous)!;
+        edits.remove(comma - 1, comma);
       }
     }
     const start = itemStart(editor, list, first);
@@ -780,22 +781,29 @@ export const statementEnd = (editor: SourceEditor, statement: Span) => {
   return (below === -1 ? comments : comments.slice(0, below)).at(-1)?.end ?? statement.end;
 };
 
+// Text that would continue a statement not ended by `;` on the line before, such as `[1].map(f)`.
+const CONTINUES_STATEMENT = /^[([`+\-/]/;
+
 /**
  * Insert a statement on its own line right after a statement and the comments it owns. What else
- * shares that line moves below the inserted statement.
+ * shares that line moves below the inserted statements.
  */
 export const insertStatementAfter = (editor: SourceEditor, statement: Span, text: string) => {
   const { code, edits } = editor;
   const end = statementEnd(editor, statement);
   const next = end + /^[^\S\n]*/.exec(code.slice(end))![0].length;
+  const separator = code[statement.end - 1] !== ';' && CONTINUES_STATEMENT.test(text) ? ';' : '';
   if (next === code.length || code[next] === '\n') {
-    edits.appendLeft(end, `\n${text}`);
+    edits.appendLeft(next, `\n${separator}${text}`);
     return;
   }
+  edits.appendLeft(end, `\n${separator}${text}`);
+  // The same line break for every statement inserted here.
   if (next > end) {
-    edits.remove(end, next);
+    edits.overwrite(end, next, '\n');
+  } else {
+    edits.appendRight(next, '\n');
   }
-  edits.appendLeft(end, `\n${text}\n`);
 };
 
 /** Insert a statement after the last import, or as the first statement when there is none. */
@@ -869,8 +877,14 @@ export const removeStatement = (editor: SourceEditor, statement: Span, atTop?: b
   const end = statementEnd(editor, statement);
   const lineBreak = lineEnd(code, end);
   let from = lineStart(code, start);
-  if (code.slice(from, start).trim() || code.slice(end, lineBreak).trim()) {
-    editor.edits.remove(start, end);
+  if (code.slice(end, lineBreak).trim()) {
+    // Code stays after it on the line: take the spaces before that code.
+    editor.edits.remove(start, end + /^[^\S\n]*/.exec(code.slice(end))![0].length);
+    return;
+  }
+  if (code.slice(from, start).trim()) {
+    // Code stays before it on the line: take the spaces after that code.
+    editor.edits.remove(start - /[^\S\n]*$/.exec(code.slice(from, start))![0].length, end);
     return;
   }
   // The statement takes the blank lines above it, so none are left behind; at the top of the
diff --git a/code/core/src/csf-tools/index.ts b/code/core/src/csf-tools/index.ts
index 9932cb498fb8..a4a77dcfe6b3 100644
--- a/code/core/src/csf-tools/index.ts
+++ b/code/core/src/csf-tools/index.ts
@@ -40,7 +40,6 @@ export {
   arrayList,
   headerComments,
   insertAfterImports,
-  insertStatementAfter,
   itemText,
   lineIndent,
   objectList,
diff --git a/code/core/src/csf-tools/vitest-plugin/component-transformer.ts b/code/core/src/csf-tools/vitest-plugin/component-transformer.ts
index e508f0d6dce1..dcefd15d2945 100644
--- a/code/core/src/csf-tools/vitest-plugin/component-transformer.ts
+++ b/code/core/src/csf-tools/vitest-plugin/component-transformer.ts
@@ -10,6 +10,7 @@ import { type E, type Node, outerSpan, unwrapExpression, walk } from '../estree/
 import {
   SourceEditor,
   appendToList,
+  insertStatementAfter,
   prependStatement,
   printKey,
   printValue,
@@ -164,7 +165,7 @@ const collectComponentExports = (editor: SourceEditor, fileName: string) => {
         const identifierName = createComponentNameFromFileName(fileName);
         const identifier = generateUid(scopes, identifierName);
         editor.edits.overwrite(node.start, outerSpan(declaration).start, `const ${identifier} = `);
-        editor.edits.appendLeft(node.end, `\nexport default ${identifier};`);
+        insertStatementAfter(editor, node, `export default ${identifier};`);
 
         if (declaration.type === 'CallExpression') {
           // Assume wrapped exports are components without detecting JSX to filter out. We can do that if needed in the future based on feedback.
diff --git a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts
index 6e60701e9b93..d0fd14c6b35a 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts
@@ -1,6 +1,7 @@
 import { formatFileContent } from 'storybook/internal/common';
 import {
   type ESTree as E,
+  appendStatement,
   type ESTreeNode as Node,
   loadConfig,
   printConfig,
@@ -189,9 +190,7 @@ export async function configToCsfFactory(
      * This is needed because story files using CSF factories import from preview, so the preview
      * file must have a default export.
      */
-    editor.edits.append(
-      `${editor.code && !editor.code.endsWith('\n') ? '\n' : ''}export default ${methodName}({});`
-    );
+    appendStatement(editor, `export default ${methodName}({});`);
   }
   config._commit();
 

From 80d21ce707b637d44cf468ef8023cdf175fd355f Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Sat, 17 Oct 2026 21:08:26 +0200
Subject: [PATCH 152/326] refactor(csf-tools): one rule for where prepended
 statements and new imports go

`prependStatement` had two rules: above the first statement, unless the
file had a header such as a license, in which case after the leading
imports. A new import's place so depended on a comment, and several
prepends to a header-less file ended up in reverse order.

`prependStatement` now has one rule: the first statement after the
directives, above the comments it owns. The file header stays above it.
`ConfigFile#setImport` adds a new import with `insertAfterImports`, so
new imports follow the existing ones in the order they are added and
existing imports keep their evaluation order.

Visible in the automigrations: `getAbsolutePath` adds `dirname` before
`fileURLToPath`, preview addon annotations follow the existing imports,
and no blank line is added between a header-prepended import and the
code below it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../utils/sync-main-preview-addons.test.ts    |  6 +--
 code/core/src/csf-tools/ConfigFile.test.ts    |  2 -
 code/core/src/csf-tools/ConfigFile.ts         |  9 +++--
 .../src/csf-tools/__corpus__/transforms.json  |  4 +-
 code/core/src/csf-tools/estree/editor.test.ts | 40 ++++++-------------
 code/core/src/csf-tools/estree/editor.ts      | 25 +++---------
 .../fixes/wrap-getAbsolutePath.test.ts        | 20 +++++-----
 .../helpers/config-to-csf-factory.test.ts     |  1 -
 .../helpers/story-to-csf-factory.test.ts      |  1 -
 scripts/tasks/sandbox-parts.test.ts           |  4 +-
 10 files changed, 39 insertions(+), 73 deletions(-)

diff --git a/code/core/src/common/utils/sync-main-preview-addons.test.ts b/code/core/src/common/utils/sync-main-preview-addons.test.ts
index a5e89365e2c3..0213a4d22890 100644
--- a/code/core/src/common/utils/sync-main-preview-addons.test.ts
+++ b/code/core/src/common/utils/sync-main-preview-addons.test.ts
@@ -40,9 +40,9 @@ describe('syncPreviewAddonsWithMainConfig', () => {
 
     const result = await syncPreviewAddonsWithMainConfig(mainConfig, preview, configDir);
     expect(printConfig(result).code).toMatchInlineSnapshot(`
-      import * as addonA11yAnnotations from "@storybook/addon-a11y/preview";
       import * as myAddonAnnotations from "custom-addon/preview";
             import { definePreview } from "@storybook/react/preview";
+      import * as addonA11yAnnotations from "@storybook/addon-a11y/preview";
 
             export default definePreview({
               addons: [myAddonAnnotations, addonA11yAnnotations],
@@ -70,9 +70,9 @@ describe('syncPreviewAddonsWithMainConfig', () => {
 
     const result = await syncPreviewAddonsWithMainConfig(mainConfig, preview, configDir);
     expect(printConfig(result).code).toMatchInlineSnapshot(`
-      import addonA11yAnnotations from "@storybook/addon-a11y";
       import * as myAddonAnnotations from "custom-addon/preview";
             import { definePreview } from "@storybook/react/preview";
+      import addonA11yAnnotations from "@storybook/addon-a11y";
 
             export default definePreview({
               addons: [myAddonAnnotations, addonA11yAnnotations()],
@@ -96,8 +96,8 @@ describe('syncPreviewAddonsWithMainConfig', () => {
 
     const result = await syncPreviewAddonsWithMainConfig(mainConfig, preview, configDir);
     expect(printConfig(result).code).toMatchInlineSnapshot(`
-      import * as addonA11yAnnotations from "@storybook/addon-a11y/preview";
       import { definePreview } from "@storybook/react/preview";
+      import * as addonA11yAnnotations from "@storybook/addon-a11y/preview";
 
       export default definePreview({
         tags: [],
diff --git a/code/core/src/csf-tools/ConfigFile.test.ts b/code/core/src/csf-tools/ConfigFile.test.ts
index 4c98ce71f1a0..57026aad4967 100644
--- a/code/core/src/csf-tools/ConfigFile.test.ts
+++ b/code/core/src/csf-tools/ConfigFile.test.ts
@@ -1458,7 +1458,6 @@ describe('ConfigFile', () => {
         // Copyright Example
 
         import { dirname } from "node:path";
-
         // @ts-expect-error not a number
         const config: number = {};
         export default config;
@@ -1479,7 +1478,6 @@ describe('ConfigFile', () => {
         // Copyright Example
 
         const { dirname } = require("node:path");
-
         module.exports = { stories: [] };
       `);
     });
diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index b18dcc58a6d6..e78385e419f4 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -33,6 +33,7 @@ import {
   appendStatement,
   appendToList,
   arrayList,
+  insertAfterImports,
   insertStatementAfter,
   objectList,
   prependStatement,
@@ -971,11 +972,11 @@ export class ConfigFile implements CsfObject {
               ? isIdentifier((specifier as E.ImportSpecifier).imported, name)
               : specifier.local.name === name))
       );
-    // A clause the declaration cannot take gets a declaration of its own right after it, which
-    // keeps the module evaluation order.
+    // A new import goes after the existing ones, and a clause the declaration cannot take gets a
+    // declaration of its own right after it, which keeps the module evaluation order.
     const addImport = (clause: string, merged?: { default?: string; named?: string[] }) => {
       if (!importDeclaration) {
-        prependStatement(editor, `import ${clause} from ${source};`);
+        insertAfterImports(editor, `import ${clause} from ${source};`);
       } else if (merged) {
         setImportSpecifiers(editor, importDeclaration, importDeclaration.specifiers, merged);
       } else {
@@ -986,7 +987,7 @@ export class ConfigFile implements CsfObject {
     // Handle side-effect imports (e.g., import 'foo')
     if (importSpecifier === null) {
       if (!importDeclaration) {
-        prependStatement(editor, `import ${source};`);
+        insertAfterImports(editor, `import ${source};`);
       }
       // Handle default imports e.g. import foo from 'bar'
     } else if (typeof importSpecifier === 'string') {
diff --git a/code/core/src/csf-tools/__corpus__/transforms.json b/code/core/src/csf-tools/__corpus__/transforms.json
index c16b95dabfd3..3d90b81e3176 100644
--- a/code/core/src/csf-tools/__corpus__/transforms.json
+++ b/code/core/src/csf-tools/__corpus__/transforms.json
@@ -58,7 +58,7 @@
       "context_prop_is_available": "{\n  parameters: { chromatic: { disableSnapshot: true } },\n  async play({ context, canvasElement }) {\n    await expect(context.canvasElement).toEqual(canvasElement);\n  },\n}",
       "step_and_canvas_element_can_be_used_in_loaders_and_before_each": "{\n  parameters: { chromatic: { disableSnapshot: true } },\n  loaders({ step, canvasElement }) {\n    step('loaders', async () => {\n      await expect(canvasElement).toBeInTheDocument();\n    });\n  },\n  beforeEach({ step, canvasElement }) {\n    step('before each', async () => {\n      await expect(canvasElement).toBeInTheDocument();\n    });\n  },\n}"
     },
-    "vitest": "/* eslint-disable storybook/prefer-pascal-case */\nimport { expect } from \"storybook/test\";\nimport { test as _test, expect as _expect } from \"vitest\";\nimport {\n  testStory as _testStory,\n  convertToFilePath,\n} from \"@storybook/addon-vitest/internal/test-utils\";\nconst meta = {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Button,\n  args: { label: \"Button\" },\n  title: \"core-before-each\",\n};\nexport default meta;\nexport const before_each_and_loaders_can_extend_context = {\n  parameters: { chromatic: { disableSnapshot: true } },\n  loaders(context) {\n    context.foo = [\"bar\"];\n  },\n  beforeEach(context) {\n    context.foo = [...context.foo, \"baz\"];\n  },\n  async play({ foo }) {\n    await expect(foo).toEqual([\"bar\", \"baz\"]);\n  },\n};\nexport const context_prop_is_available = {\n  parameters: { chromatic: { disableSnapshot: true } },\n  async play({ context, canvasElement }) {\n    await expect(context.canvasElement).toEqual(canvasElement);\n  },\n};\nexport const step_and_canvas_element_can_be_used_in_loaders_and_before_each = {\n  parameters: { chromatic: { disableSnapshot: true } },\n  loaders({ step, canvasElement }) {\n    step(\"loaders\", async () => {\n      await expect(canvasElement).toBeInTheDocument();\n    });\n  },\n  beforeEach({ step, canvasElement }) {\n    step(\"before each\", async () => {\n      await expect(canvasElement).toBeInTheDocument();\n    });\n  },\n};\nconst _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(\n  globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath,\n);\nif (_isRunningFromThisFile) {\n  _test(\n    \"Before Each And Loaders Can Extend Context\",\n    _testStory({\n      exportName: \"before_each_and_loaders_can_extend_context\",\n      story: before_each_and_loaders_can_extend_context,\n      meta: meta,\n      skipTags: [],\n      storyId: \"core-before-each--before-each-and-loaders-can-extend-context\",\n    }),\n  );\n  _test(\n    \"Context Prop Is Available\",\n    _testStory({\n      exportName: \"context_prop_is_available\",\n      story: context_prop_is_available,\n      meta: meta,\n      skipTags: [],\n      storyId: \"core-before-each--context-prop-is-available\",\n    }),\n  );\n  _test(\n    \"Step And Canvas Element Can Be Used In Loaders And Before Each\",\n    _testStory({\n      exportName:\n        \"step_and_canvas_element_can_be_used_in_loaders_and_before_each\",\n      story: step_and_canvas_element_can_be_used_in_loaders_and_before_each,\n      meta: meta,\n      skipTags: [],\n      storyId:\n        \"core-before-each--step-and-canvas-element-can-be-used-in-loaders-and-before-each\",\n    }),\n  );\n}\n"
+    "vitest": "/* eslint-disable storybook/prefer-pascal-case */\nimport { test as _test, expect as _expect } from \"vitest\";\nimport {\n  testStory as _testStory,\n  convertToFilePath,\n} from \"@storybook/addon-vitest/internal/test-utils\";\nimport { expect } from \"storybook/test\";\nconst meta = {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Button,\n  args: { label: \"Button\" },\n  title: \"core-before-each\",\n};\nexport default meta;\nexport const before_each_and_loaders_can_extend_context = {\n  parameters: { chromatic: { disableSnapshot: true } },\n  loaders(context) {\n    context.foo = [\"bar\"];\n  },\n  beforeEach(context) {\n    context.foo = [...context.foo, \"baz\"];\n  },\n  async play({ foo }) {\n    await expect(foo).toEqual([\"bar\", \"baz\"]);\n  },\n};\nexport const context_prop_is_available = {\n  parameters: { chromatic: { disableSnapshot: true } },\n  async play({ context, canvasElement }) {\n    await expect(context.canvasElement).toEqual(canvasElement);\n  },\n};\nexport const step_and_canvas_element_can_be_used_in_loaders_and_before_each = {\n  parameters: { chromatic: { disableSnapshot: true } },\n  loaders({ step, canvasElement }) {\n    step(\"loaders\", async () => {\n      await expect(canvasElement).toBeInTheDocument();\n    });\n  },\n  beforeEach({ step, canvasElement }) {\n    step(\"before each\", async () => {\n      await expect(canvasElement).toBeInTheDocument();\n    });\n  },\n};\nconst _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(\n  globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath,\n);\nif (_isRunningFromThisFile) {\n  _test(\n    \"Before Each And Loaders Can Extend Context\",\n    _testStory({\n      exportName: \"before_each_and_loaders_can_extend_context\",\n      story: before_each_and_loaders_can_extend_context,\n      meta: meta,\n      skipTags: [],\n      storyId: \"core-before-each--before-each-and-loaders-can-extend-context\",\n    }),\n  );\n  _test(\n    \"Context Prop Is Available\",\n    _testStory({\n      exportName: \"context_prop_is_available\",\n      story: context_prop_is_available,\n      meta: meta,\n      skipTags: [],\n      storyId: \"core-before-each--context-prop-is-available\",\n    }),\n  );\n  _test(\n    \"Step And Canvas Element Can Be Used In Loaders And Before Each\",\n    _testStory({\n      exportName:\n        \"step_and_canvas_element_can_be_used_in_loaders_and_before_each\",\n      story: step_and_canvas_element_can_be_used_in_loaders_and_before_each,\n      meta: meta,\n      skipTags: [],\n      storyId:\n        \"core-before-each--step-and-canvas-element-can-be-used-in-loaders-and-before-each\",\n    }),\n  );\n}\n"
   },
   "core-component-test.basics.stories.ts": {
     "enriched": "import { global as globalThis } from \"@storybook/global\";\nimport {\n  expect,\n  fireEvent,\n  fn,\n  userEvent as testUserEvent,\n  waitFor,\n  waitForElementToBeRemoved,\n  within,\n} from \"storybook/test\";\nexport default {\n  component: globalThis.__TEMPLATE_COMPONENTS__.Form,\n  args: { onSuccess: fn() },\n  globals: { sb_theme: \"light\" },\n  tags: [\"!vitest\"],\n};\nexport const Validation = {\n  play: async (context) => {\n    const { args, canvasElement, step } = context;\n    const canvas = within(canvasElement);\n    await step(\"Submit\", async () =>\n      fireEvent.click(canvas.getByRole(\"button\")),\n    );\n    await expect(args.onSuccess).not.toHaveBeenCalled();\n  },\n};\nexport const Type = {\n  play: async ({ canvasElement, userEvent }) => {\n    const canvas = within(canvasElement);\n    await userEvent.type(canvas.getByTestId(\"value\"), \"foobar\");\n  },\n};\nexport const Step = {\n  play: async ({ step }) => {\n    await step(\"Enter value\", Type.play);\n  },\n};\nexport const TypeAndClear = {\n  play: async ({ canvasElement, userEvent }) => {\n    const canvas = within(canvasElement);\n    await userEvent.type(canvas.getByTestId(\"value\"), \"initial value\");\n    await userEvent.clear(canvas.getByTestId(\"value\"));\n    await userEvent.type(canvas.getByTestId(\"value\"), \"final value\");\n  },\n};\nexport const Callback = {\n  play: async ({ args, canvasElement, step }) => {\n    const canvas = within(canvasElement);\n    await step(\"Enter value\", Type.play);\n    await step(\"Submit\", async () => {\n      await fireEvent.click(canvas.getByRole(\"button\"));\n    });\n    await expect(args.onSuccess).toHaveBeenCalled();\n  },\n};\n// NOTE: of course you can use `findByText()` to implicitly waitFor, but we want\n// an explicit test here\nexport const SyncWaitFor = {\n  play: async ({ canvasElement, step }) => {\n    const canvas = within(canvasElement);\n    await step(\"Submit form\", Callback.play);\n    await waitFor(() => canvas.getByText(\"Completed!!\"));\n    await waitForElementToBeRemoved(() => canvas.queryByText(\"Completed!!\"), {\n      timeout: 2000,\n    });\n  },\n};\nexport const AsyncWaitFor = {\n  play: async ({ canvasElement, step }) => {\n    const canvas = within(canvasElement);\n    await step(\"Submit form\", Callback.play);\n    await waitFor(async () => canvas.getByText(\"Completed!!\"));\n    await waitForElementToBeRemoved(() => canvas.queryByText(\"Completed!!\"), {\n      timeout: 2000,\n    });\n  },\n};\nexport const WithLoaders = {\n  loaders: [async () => new Promise((resolve) => setTimeout(resolve, 2000))],\n  play: async ({ step }) => {\n    await step(\"Submit form\", Callback.play);\n  },\n};\nconst UserEventSetup = {\n  play: async (context) => {\n    const { args, canvasElement, step, userEvent } = context;\n    const canvas = within(canvasElement);\n    await step(\n      \"Select and type on input using user-event v14 setup\",\n      async () => {\n        const input = canvas.getByRole(\"textbox\");\n        await userEvent.click(input);\n        await userEvent.type(input, \"Typing ...\");\n      },\n    );\n    await step(\"Tab and press enter on submit button\", async () => {\n      // Vitest's userEvent does not support pointer events, so we use storybook's\n      await testUserEvent.pointer([\n        { keys: \"[TouchA>]\", target: canvas.getByRole(\"textbox\") },\n        { keys: \"[/TouchA]\" },\n      ]);\n      const submitButton = await canvas.findByRole(\"button\");\n      if (navigator.userAgent.toLowerCase().includes(\"firefox\")) {\n        // user event has a few issues on firefox, therefore we do it differently\n        await fireEvent.click(submitButton);\n      } else {\n        await userEvent.tab();\n        await userEvent.keyboard(\"{enter}\");\n        await expect(submitButton).toHaveFocus();\n      }\n      await expect(args.onSuccess).toHaveBeenCalled();\n    });\n  },\n};\nexport { UserEventSetup };\nValidation.parameters = {\n  ...Validation.parameters,\n  docs: {\n    ...Validation.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  play: async (context) => {\\n    const { args, canvasElement, step } = context;\\n    const canvas = within(canvasElement);\\n\\n    await step('Submit', async () => fireEvent.click(canvas.getByRole('button')));\\n\\n    await expect(args.onSuccess).not.toHaveBeenCalled();\\n  },\\n}\",\n      ...Validation.parameters?.docs?.source,\n    },\n  },\n};\nType.parameters = {\n  ...Type.parameters,\n  docs: {\n    ...Type.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  play: async ({ canvasElement, userEvent }) => {\\n    const canvas = within(canvasElement);\\n    await userEvent.type(canvas.getByTestId('value'), 'foobar');\\n  },\\n}\",\n      ...Type.parameters?.docs?.source,\n    },\n  },\n};\nStep.parameters = {\n  ...Step.parameters,\n  docs: {\n    ...Step.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  play: async ({ step }) => {\\n    await step('Enter value', Type.play);\\n  },\\n}\",\n      ...Step.parameters?.docs?.source,\n    },\n  },\n};\nTypeAndClear.parameters = {\n  ...TypeAndClear.parameters,\n  docs: {\n    ...TypeAndClear.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  play: async ({ canvasElement, userEvent }) => {\\n    const canvas = within(canvasElement);\\n    await userEvent.type(canvas.getByTestId('value'), 'initial value');\\n    await userEvent.clear(canvas.getByTestId('value'));\\n    await userEvent.type(canvas.getByTestId('value'), 'final value');\\n  },\\n}\",\n      ...TypeAndClear.parameters?.docs?.source,\n    },\n  },\n};\nCallback.parameters = {\n  ...Callback.parameters,\n  docs: {\n    ...Callback.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  play: async ({ args, canvasElement, step }) => {\\n    const canvas = within(canvasElement);\\n    await step('Enter value', Type.play);\\n\\n    await step('Submit', async () => {\\n      await fireEvent.click(canvas.getByRole('button'));\\n    });\\n\\n    await expect(args.onSuccess).toHaveBeenCalled();\\n  },\\n}\",\n      ...Callback.parameters?.docs?.source,\n    },\n  },\n};\nSyncWaitFor.parameters = {\n  ...SyncWaitFor.parameters,\n  docs: {\n    ...SyncWaitFor.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  play: async ({ canvasElement, step }) => {\\n    const canvas = within(canvasElement);\\n    await step('Submit form', Callback.play);\\n    await waitFor(() => canvas.getByText('Completed!!'));\\n    await waitForElementToBeRemoved(() => canvas.queryByText('Completed!!'), {\\n      timeout: 2000,\\n    });\\n  },\\n}\",\n      ...SyncWaitFor.parameters?.docs?.source,\n    },\n  },\n};\nAsyncWaitFor.parameters = {\n  ...AsyncWaitFor.parameters,\n  docs: {\n    ...AsyncWaitFor.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  play: async ({ canvasElement, step }) => {\\n    const canvas = within(canvasElement);\\n    await step('Submit form', Callback.play);\\n    await waitFor(async () => canvas.getByText('Completed!!'));\\n    await waitForElementToBeRemoved(() => canvas.queryByText('Completed!!'), {\\n      timeout: 2000,\\n    });\\n  },\\n}\",\n      ...AsyncWaitFor.parameters?.docs?.source,\n    },\n  },\n};\nWithLoaders.parameters = {\n  ...WithLoaders.parameters,\n  docs: {\n    ...WithLoaders.parameters?.docs,\n    source: {\n      originalSource:\n        \"{\\n  loaders: [async () => new Promise((resolve) => setTimeout(resolve, 2000))],\\n  play: async ({ step }) => {\\n    await step('Submit form', Callback.play);\\n  },\\n}\",\n      ...WithLoaders.parameters?.docs?.source,\n    },\n  },\n};\n",
@@ -265,6 +265,6 @@
       "HoistedArgs": "{\n  args: {\n    label: 'Save',\n    // The bare Error is the fixture: this file stands in for a user's story, not for repo code.\n    // eslint-disable-next-line local-rules/no-uncategorized-errors\n    loadingError: new Error('Failed to load cards.'),\n    items: Array.from({ length: 3 }, (_, index) => index),\n  },\n}",
       "SpreadCrossFileArgs": "{ args: { ...BaseStories.Base.args, label: 'overridden' } }"
     },
-    "vitest": "// The story shapes the server snippet generator has to tell apart, one export per shape. Shapes\n// whose markup or args cannot be read statically must yield NO snippet (recorded as a sentinel),\n// never a fabricated element.\nimport { ShapeButtonComponent } from \"./shape-button.component.ts\";\nimport { IMPORTED_TEMPLATE } from \"./templates.ts\";\nimport * as BaseStories from \"./base-args.stories.ts\";\nimport { argsToTemplate } from \"@storybook/angular-vite\";\nimport { test as _test, expect as _expect } from \"vitest\";\nimport {\n  testStory as _testStory,\n  convertToFilePath,\n} from \"@storybook/addon-vitest/internal/test-utils\";\ntype LooseStory = {\n  args?: Record<string, unknown>;\n  render?: (args: Record<string, unknown>) => unknown;\n  template?: string;\n};\nconst HOISTED_TEMPLATE = \"<sb-shape-button hoisted></sb-shape-button>\";\nconst HEADER = \"<h1>Shapes</h1>\";\nconst INCLUDES = [\"label\"];\nconst base = { args: { label: \"From base\" } };\nconst Template = (args: Record<string, unknown>) => ({\n  props: args,\n  template: '<div class=\"bound\"><sb-shape-button></sb-shape-button></div>',\n});\nlet MUTABLE_TEMPLATE = \"<sb-shape-button first></sb-shape-button>\";\nMUTABLE_TEMPLATE = \"<sb-shape-button second></sb-shape-button>\";\nconst extraArgs = { count: 3 };\nconst _meta = {\n  title: \"AngularShapes/button-shapes\",\n  component: ShapeButtonComponent,\n};\nexport default _meta;\nexport const OwnTemplate = {\n  template: \"<sb-shape-button emphasis>hi</sb-shape-button>\",\n};\nexport const RenderTemplate = {\n  render: () => ({ template: \"<sb-shape-button rendered></sb-shape-button>\" }),\n};\nexport const MethodRender = {\n  args: { label: \"Save\" },\n  render(_args: Record<string, unknown>) {\n    return {\n      template: '<div class=\"wrap\"><sb-shape-button></sb-shape-button></div>',\n    };\n  },\n};\nexport const ArgsToTemplateWrapper = {\n  args: { label: \"Save\", count: 7, clicked: () => {} },\n  render: (args: Record<string, unknown>) => ({\n    props: args,\n    template: `<div class=\"wrap\"><sb-shape-button ${argsToTemplate(args)}></sb-shape-button></div>`,\n  }),\n};\nexport const ArgsToTemplateInclude = {\n  args: { label: \"Save\", count: 7 },\n  render: (args: Record<string, unknown>) => ({\n    props: args,\n    template: `<sb-shape-button ${argsToTemplate(args, { include: [\"label\"] })}></sb-shape-button>`,\n  }),\n};\nexport const SlotInterpolation = {\n  args: { label: \"Save\", footer: \"Bye\" },\n  render: ({ footer, ...args }: Record<string, unknown>) => ({\n    props: args,\n    template: `<sb-shape-button>${footer}</sb-shape-button>`,\n  }),\n};\nexport const ModuleConstant = {\n  args: { label: \"Save\" },\n  render: (args: Record<string, unknown>) => ({\n    props: args,\n    template: `${HEADER}<sb-shape-button></sb-shape-button>`,\n  }),\n};\nexport const HoistedTemplate = { template: HOISTED_TEMPLATE };\nexport const QuotedArgs = {\n  args: { label: `it's \"quoted\" & Tom &amp; Jerry` },\n};\nexport const ImportedTemplate = {\n  template: IMPORTED_TEMPLATE,\n  args: { count: 5 },\n};\nexport const SpreadShadowedRender = {\n  render: () => ({\n    template: \"<sb-shape-button from-story></sb-shape-button>\",\n  }),\n  ...base,\n};\nexport const SpreadArgs = { args: { label: \"Save\", ...extraArgs } };\nexport const AccessorRender = {\n  args: { label: \"Save\" },\n  get render() {\n    return () => ({\n      template: \"<sb-shape-button from-getter></sb-shape-button>\",\n    });\n  },\n};\nexport const MultiExitRender = {\n  args: { count: 1 },\n  render: (args: { count?: number }) => {\n    if (args.count) {\n      return { template: \"<sb-shape-button first></sb-shape-button>\" };\n    }\n    return { template: \"<sb-shape-button second></sb-shape-button>\" };\n  },\n};\nexport const DynamicOptions = {\n  args: { label: \"Save\" },\n  render: (args: Record<string, unknown>) => ({\n    props: args,\n    template: `<sb-shape-button ${argsToTemplate(args, { include: INCLUDES })}></sb-shape-button>`,\n  }),\n};\nexport const TemplateBind = Template.bind({}) as typeof Template & LooseStory;\nTemplateBind.args = { label: \"Bound\" };\nexport const MemberAssignedRender: LooseStory = { args: { label: \"Save\" } };\nMemberAssignedRender.render = () => ({\n  template: '<div class=\"assigned\"><sb-shape-button></sb-shape-button></div>',\n});\nexport const ReassignedTemplate = { template: MUTABLE_TEMPLATE };\nexport const SpreadStoryArgs = { args: { ...QuotedArgs.args, count: 9 } };\n// Values an Angular template expression cannot carry: `new` is not in the grammar at all, and\n// `Array` is not a name the host component resolves. Both are ordinary TypeScript in a class body.\nexport const HoistedArgs = {\n  args: {\n    label: \"Save\",\n    // The bare Error is the fixture: this file stands in for a user's story, not for repo code.\n    // eslint-disable-next-line local-rules/no-uncategorized-errors\n    loadingError: new Error(\"Failed to load cards.\"),\n    items: Array.from({ length: 3 }, (_, index) => index),\n  },\n};\nexport const SpreadCrossFileArgs = {\n  args: { ...BaseStories.Base.args, label: \"overridden\" },\n};\nconst _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(\n  globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath,\n);\nif (_isRunningFromThisFile) {\n  _test(\n    \"Own Template\",\n    _testStory({\n      exportName: \"OwnTemplate\",\n      story: OwnTemplate,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--own-template\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Render Template\",\n    _testStory({\n      exportName: \"RenderTemplate\",\n      story: RenderTemplate,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--render-template\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Method Render\",\n    _testStory({\n      exportName: \"MethodRender\",\n      story: MethodRender,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--method-render\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Args To Template Wrapper\",\n    _testStory({\n      exportName: \"ArgsToTemplateWrapper\",\n      story: ArgsToTemplateWrapper,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--args-to-template-wrapper\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Args To Template Include\",\n    _testStory({\n      exportName: \"ArgsToTemplateInclude\",\n      story: ArgsToTemplateInclude,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--args-to-template-include\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Slot Interpolation\",\n    _testStory({\n      exportName: \"SlotInterpolation\",\n      story: SlotInterpolation,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--slot-interpolation\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Module Constant\",\n    _testStory({\n      exportName: \"ModuleConstant\",\n      story: ModuleConstant,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--module-constant\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Hoisted Template\",\n    _testStory({\n      exportName: \"HoistedTemplate\",\n      story: HoistedTemplate,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--hoisted-template\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Quoted Args\",\n    _testStory({\n      exportName: \"QuotedArgs\",\n      story: QuotedArgs,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--quoted-args\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Imported Template\",\n    _testStory({\n      exportName: \"ImportedTemplate\",\n      story: ImportedTemplate,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--imported-template\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Spread Shadowed Render\",\n    _testStory({\n      exportName: \"SpreadShadowedRender\",\n      story: SpreadShadowedRender,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--spread-shadowed-render\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Spread Args\",\n    _testStory({\n      exportName: \"SpreadArgs\",\n      story: SpreadArgs,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--spread-args\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Accessor Render\",\n    _testStory({\n      exportName: \"AccessorRender\",\n      story: AccessorRender,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--accessor-render\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Multi Exit Render\",\n    _testStory({\n      exportName: \"MultiExitRender\",\n      story: MultiExitRender,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--multi-exit-render\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Dynamic Options\",\n    _testStory({\n      exportName: \"DynamicOptions\",\n      story: DynamicOptions,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--dynamic-options\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Template Bind\",\n    _testStory({\n      exportName: \"TemplateBind\",\n      story: TemplateBind,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--template-bind\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Member Assigned Render\",\n    _testStory({\n      exportName: \"MemberAssignedRender\",\n      story: MemberAssignedRender,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--member-assigned-render\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Reassigned Template\",\n    _testStory({\n      exportName: \"ReassignedTemplate\",\n      story: ReassignedTemplate,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--reassigned-template\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Spread Story Args\",\n    _testStory({\n      exportName: \"SpreadStoryArgs\",\n      story: SpreadStoryArgs,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--spread-story-args\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Hoisted Args\",\n    _testStory({\n      exportName: \"HoistedArgs\",\n      story: HoistedArgs,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--hoisted-args\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Spread Cross File Args\",\n    _testStory({\n      exportName: \"SpreadCrossFileArgs\",\n      story: SpreadCrossFileArgs,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--spread-cross-file-args\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n}\n"
+    "vitest": "// The story shapes the server snippet generator has to tell apart, one export per shape. Shapes\n// whose markup or args cannot be read statically must yield NO snippet (recorded as a sentinel),\n// never a fabricated element.\nimport { test as _test, expect as _expect } from \"vitest\";\nimport {\n  testStory as _testStory,\n  convertToFilePath,\n} from \"@storybook/addon-vitest/internal/test-utils\";\nimport { ShapeButtonComponent } from \"./shape-button.component.ts\";\nimport { IMPORTED_TEMPLATE } from \"./templates.ts\";\nimport * as BaseStories from \"./base-args.stories.ts\";\nimport { argsToTemplate } from \"@storybook/angular-vite\";\ntype LooseStory = {\n  args?: Record<string, unknown>;\n  render?: (args: Record<string, unknown>) => unknown;\n  template?: string;\n};\nconst HOISTED_TEMPLATE = \"<sb-shape-button hoisted></sb-shape-button>\";\nconst HEADER = \"<h1>Shapes</h1>\";\nconst INCLUDES = [\"label\"];\nconst base = { args: { label: \"From base\" } };\nconst Template = (args: Record<string, unknown>) => ({\n  props: args,\n  template: '<div class=\"bound\"><sb-shape-button></sb-shape-button></div>',\n});\nlet MUTABLE_TEMPLATE = \"<sb-shape-button first></sb-shape-button>\";\nMUTABLE_TEMPLATE = \"<sb-shape-button second></sb-shape-button>\";\nconst extraArgs = { count: 3 };\nconst _meta = {\n  title: \"AngularShapes/button-shapes\",\n  component: ShapeButtonComponent,\n};\nexport default _meta;\nexport const OwnTemplate = {\n  template: \"<sb-shape-button emphasis>hi</sb-shape-button>\",\n};\nexport const RenderTemplate = {\n  render: () => ({ template: \"<sb-shape-button rendered></sb-shape-button>\" }),\n};\nexport const MethodRender = {\n  args: { label: \"Save\" },\n  render(_args: Record<string, unknown>) {\n    return {\n      template: '<div class=\"wrap\"><sb-shape-button></sb-shape-button></div>',\n    };\n  },\n};\nexport const ArgsToTemplateWrapper = {\n  args: { label: \"Save\", count: 7, clicked: () => {} },\n  render: (args: Record<string, unknown>) => ({\n    props: args,\n    template: `<div class=\"wrap\"><sb-shape-button ${argsToTemplate(args)}></sb-shape-button></div>`,\n  }),\n};\nexport const ArgsToTemplateInclude = {\n  args: { label: \"Save\", count: 7 },\n  render: (args: Record<string, unknown>) => ({\n    props: args,\n    template: `<sb-shape-button ${argsToTemplate(args, { include: [\"label\"] })}></sb-shape-button>`,\n  }),\n};\nexport const SlotInterpolation = {\n  args: { label: \"Save\", footer: \"Bye\" },\n  render: ({ footer, ...args }: Record<string, unknown>) => ({\n    props: args,\n    template: `<sb-shape-button>${footer}</sb-shape-button>`,\n  }),\n};\nexport const ModuleConstant = {\n  args: { label: \"Save\" },\n  render: (args: Record<string, unknown>) => ({\n    props: args,\n    template: `${HEADER}<sb-shape-button></sb-shape-button>`,\n  }),\n};\nexport const HoistedTemplate = { template: HOISTED_TEMPLATE };\nexport const QuotedArgs = {\n  args: { label: `it's \"quoted\" & Tom &amp; Jerry` },\n};\nexport const ImportedTemplate = {\n  template: IMPORTED_TEMPLATE,\n  args: { count: 5 },\n};\nexport const SpreadShadowedRender = {\n  render: () => ({\n    template: \"<sb-shape-button from-story></sb-shape-button>\",\n  }),\n  ...base,\n};\nexport const SpreadArgs = { args: { label: \"Save\", ...extraArgs } };\nexport const AccessorRender = {\n  args: { label: \"Save\" },\n  get render() {\n    return () => ({\n      template: \"<sb-shape-button from-getter></sb-shape-button>\",\n    });\n  },\n};\nexport const MultiExitRender = {\n  args: { count: 1 },\n  render: (args: { count?: number }) => {\n    if (args.count) {\n      return { template: \"<sb-shape-button first></sb-shape-button>\" };\n    }\n    return { template: \"<sb-shape-button second></sb-shape-button>\" };\n  },\n};\nexport const DynamicOptions = {\n  args: { label: \"Save\" },\n  render: (args: Record<string, unknown>) => ({\n    props: args,\n    template: `<sb-shape-button ${argsToTemplate(args, { include: INCLUDES })}></sb-shape-button>`,\n  }),\n};\nexport const TemplateBind = Template.bind({}) as typeof Template & LooseStory;\nTemplateBind.args = { label: \"Bound\" };\nexport const MemberAssignedRender: LooseStory = { args: { label: \"Save\" } };\nMemberAssignedRender.render = () => ({\n  template: '<div class=\"assigned\"><sb-shape-button></sb-shape-button></div>',\n});\nexport const ReassignedTemplate = { template: MUTABLE_TEMPLATE };\nexport const SpreadStoryArgs = { args: { ...QuotedArgs.args, count: 9 } };\n// Values an Angular template expression cannot carry: `new` is not in the grammar at all, and\n// `Array` is not a name the host component resolves. Both are ordinary TypeScript in a class body.\nexport const HoistedArgs = {\n  args: {\n    label: \"Save\",\n    // The bare Error is the fixture: this file stands in for a user's story, not for repo code.\n    // eslint-disable-next-line local-rules/no-uncategorized-errors\n    loadingError: new Error(\"Failed to load cards.\"),\n    items: Array.from({ length: 3 }, (_, index) => index),\n  },\n};\nexport const SpreadCrossFileArgs = {\n  args: { ...BaseStories.Base.args, label: \"overridden\" },\n};\nconst _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(\n  globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath,\n);\nif (_isRunningFromThisFile) {\n  _test(\n    \"Own Template\",\n    _testStory({\n      exportName: \"OwnTemplate\",\n      story: OwnTemplate,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--own-template\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Render Template\",\n    _testStory({\n      exportName: \"RenderTemplate\",\n      story: RenderTemplate,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--render-template\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Method Render\",\n    _testStory({\n      exportName: \"MethodRender\",\n      story: MethodRender,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--method-render\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Args To Template Wrapper\",\n    _testStory({\n      exportName: \"ArgsToTemplateWrapper\",\n      story: ArgsToTemplateWrapper,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--args-to-template-wrapper\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Args To Template Include\",\n    _testStory({\n      exportName: \"ArgsToTemplateInclude\",\n      story: ArgsToTemplateInclude,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--args-to-template-include\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Slot Interpolation\",\n    _testStory({\n      exportName: \"SlotInterpolation\",\n      story: SlotInterpolation,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--slot-interpolation\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Module Constant\",\n    _testStory({\n      exportName: \"ModuleConstant\",\n      story: ModuleConstant,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--module-constant\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Hoisted Template\",\n    _testStory({\n      exportName: \"HoistedTemplate\",\n      story: HoistedTemplate,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--hoisted-template\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Quoted Args\",\n    _testStory({\n      exportName: \"QuotedArgs\",\n      story: QuotedArgs,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--quoted-args\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Imported Template\",\n    _testStory({\n      exportName: \"ImportedTemplate\",\n      story: ImportedTemplate,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--imported-template\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Spread Shadowed Render\",\n    _testStory({\n      exportName: \"SpreadShadowedRender\",\n      story: SpreadShadowedRender,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--spread-shadowed-render\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Spread Args\",\n    _testStory({\n      exportName: \"SpreadArgs\",\n      story: SpreadArgs,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--spread-args\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Accessor Render\",\n    _testStory({\n      exportName: \"AccessorRender\",\n      story: AccessorRender,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--accessor-render\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Multi Exit Render\",\n    _testStory({\n      exportName: \"MultiExitRender\",\n      story: MultiExitRender,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--multi-exit-render\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Dynamic Options\",\n    _testStory({\n      exportName: \"DynamicOptions\",\n      story: DynamicOptions,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--dynamic-options\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Template Bind\",\n    _testStory({\n      exportName: \"TemplateBind\",\n      story: TemplateBind,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--template-bind\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Member Assigned Render\",\n    _testStory({\n      exportName: \"MemberAssignedRender\",\n      story: MemberAssignedRender,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--member-assigned-render\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Reassigned Template\",\n    _testStory({\n      exportName: \"ReassignedTemplate\",\n      story: ReassignedTemplate,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--reassigned-template\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Spread Story Args\",\n    _testStory({\n      exportName: \"SpreadStoryArgs\",\n      story: SpreadStoryArgs,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--spread-story-args\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Hoisted Args\",\n    _testStory({\n      exportName: \"HoistedArgs\",\n      story: HoistedArgs,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--hoisted-args\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n  _test(\n    \"Spread Cross File Args\",\n    _testStory({\n      exportName: \"SpreadCrossFileArgs\",\n      story: SpreadCrossFileArgs,\n      meta: _meta,\n      skipTags: [],\n      storyId: \"angularshapes-button-shapes--spread-cross-file-args\",\n      componentPath: \"./shape-button.component.ts\",\n      componentName: \"ShapeButtonComponent\",\n    }),\n  );\n}\n"
   }
 }
diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index a3bfcebf84ea..379ef1ec8317 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -373,46 +373,30 @@ describe('prependStatement', () => {
     );
   });
 
-  it('inserts below a copyright comment directly above the first import', () => {
+  it('inserts below a file header', () => {
     const editor = new SourceEditor(`// Copyright Storybook\nimport a from 'a';\nconst b = 1;`);
     prependStatement(editor, `import c from 'c';`);
     expect(editor.toString()).toBe(
-      `// Copyright Storybook\nimport a from 'a';\nimport c from 'c';\nconst b = 1;`
+      `// Copyright Storybook\nimport c from 'c';\nimport a from 'a';\nconst b = 1;`
     );
   });
 
-  it('inserts below a JSDoc header directly above the first import', () => {
-    const editor = new SourceEditor(
-      `/**\n * Copyright ACME\n */\nimport a from 'a';\nconst b = 1;`
-    );
-    prependStatement(editor, `import c from 'c';`);
-    expect(editor.toString()).toBe(
-      `/**\n * Copyright ACME\n */\nimport a from 'a';\nimport c from 'c';\nconst b = 1;`
+  it('inserts below a JSDoc header above an import, and above a JSDoc on a declaration', () => {
+    const header = new SourceEditor(`/**\n * Copyright ACME\n */\nimport a from 'a';`);
+    prependStatement(header, `import c from 'c';`);
+    expect(header.toString()).toBe(
+      `/**\n * Copyright ACME\n */\nimport c from 'c';\nimport a from 'a';`
     );
+
+    const docs = new SourceEditor(`/** Docs for a */\nconst a = 1;`);
+    prependStatement(docs, `import c from 'c';`);
+    expect(docs.toString()).toBe(`import c from 'c';\n/** Docs for a */\nconst a = 1;`);
   });
 
   it('inserts below a JSDoc pragma directly above the first statement', () => {
     const editor = new SourceEditor(`/** @license MIT */\nconst a = 1;`);
     prependStatement(editor, `import b from 'b';`);
-    expect(editor.toString()).toBe(`/** @license MIT */\nimport b from 'b';\n\nconst a = 1;`);
-  });
-
-  it('inserts below the comment trailing the last import under a file header', () => {
-    const editor = new SourceEditor(
-      `// Copyright Storybook\nimport x from 'x'; // x\nconst b = 1;`
-    );
-    prependStatement(editor, `import z from 'z';`);
-    expect(editor.toString()).toBe(
-      `// Copyright Storybook\nimport x from 'x'; // x\nimport z from 'z';\nconst b = 1;`
-    );
-  });
-
-  it('inserts below a block comment that starts beside the last import', () => {
-    const editor = new SourceEditor(`// Copyright Storybook\nimport x from 'x'; /* x\n y */`);
-    prependStatement(editor, `import z from 'z';`);
-    expect(editor.toString()).toBe(
-      `// Copyright Storybook\nimport x from 'x'; /* x\n y */\nimport z from 'z';`
-    );
+    expect(editor.toString()).toBe(`/** @license MIT */\nimport b from 'b';\nconst a = 1;`);
   });
 });
 
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 5e37a9bf689f..533399471728 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -828,35 +828,20 @@ const leadingComments = (editor: SourceEditor, statement: Span): E.Comment[] =>
 };
 
 /**
- * Insert a statement before the first non-directive statement, above its leading comments. A file
- * header stays first: the statement goes below the leading imports, or below the header itself.
+ * Insert a statement as the first statement after the directives, above the comments it owns. A file
+ * header stays above it.
  */
 export const prependStatement = (editor: SourceEditor, text: string) => {
   const { body } = editor.program;
   const directives = leadingDirectives(editor);
-  const after =
-    directives.at(-1)?.end ?? (editor.code.startsWith('#!') ? editor.code.indexOf('\n') + 1 : 0);
   const first = body[directives.length];
   if (!first) {
+    const after =
+      directives.at(-1)?.end ?? (editor.code.startsWith('#!') ? editor.code.indexOf('\n') + 1 : 0);
     editor.edits.appendLeft(after, `${after > 0 ? '\n' : ''}${text}\n`);
     return;
   }
-  const header = headerComments(editor);
-  if (header.length > 0) {
-    const statements = body.slice(directives.length);
-    const imports = statements.findIndex((statement) => statement.type !== 'ImportDeclaration');
-    const lastImport = imports === -1 ? statements.at(-1) : statements[imports - 1];
-    if (lastImport) {
-      insertStatementAfter(editor, lastImport, text);
-      return;
-    }
-    const headerEnd = header.at(-1)!.end;
-    const next = headerEnd + /^\s*/.exec(editor.code.slice(headerEnd))![0].length;
-    editor.edits.appendRight(next, `${text}\n\n`);
-    return;
-  }
-  const start = after + /^\s*/.exec(editor.code.slice(after))![0].length;
-  editor.edits.appendRight(start, `${text}\n`);
+  editor.edits.appendRight((leadingComments(editor, first)[0] ?? first).start, `${text}\n`);
 };
 
 export const appendStatement = (editor: SourceEditor, text: string) => {
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.test.ts
index 9e6111655cbf..9a2ba3b7177b 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.test.ts
@@ -74,8 +74,8 @@ describe('wrapGetAbsolutePath', () => {
       const call = writeFile.mock.calls[0];
 
       expect(call[1]).toMatchInlineSnapshot(`
-        "import { fileURLToPath } from 'node:url';
-        import { dirname } from 'node:path';
+        "import { dirname } from 'node:path';
+        import { fileURLToPath } from 'node:url';
         const config = {
           stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
           addons: [
@@ -152,8 +152,8 @@ describe('wrapGetAbsolutePath', () => {
       const output = String(writeFile.mock.calls.at(-1)?.[1]);
 
       expect(output).toMatchInlineSnapshot(`
-        "import { fileURLToPath } from 'node:url';
-        import { dirname as value } from 'node:path';
+        "import { dirname as value } from 'node:path';
+        import { fileURLToPath } from 'node:url';
 
         const config = {
           stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
@@ -184,9 +184,9 @@ describe('wrapGetAbsolutePath', () => {
 
       expect(() => parseModule(output, 'main.js')).not.toThrow();
       expect(output).toMatchInlineSnapshot(`
-        "import { fileURLToPath } from 'node:url';
-        import { dirname as pathDirname } from 'node:path';
+        "import { dirname as pathDirname } from 'node:path';
         import path from 'node:path';
+        import { fileURLToPath } from 'node:url';
 
         const { dirname } = path;
 
@@ -218,8 +218,8 @@ describe('wrapGetAbsolutePath', () => {
       const output = String(writeFile.mock.calls.at(-1)?.[1]);
 
       expect(output).toMatchInlineSnapshot(`
-        "import { fileURLToPath } from 'node:url';
-        import { dirname as pathDirname } from 'path';
+        "import { dirname as pathDirname } from 'path';
+        import { fileURLToPath } from 'node:url';
 
         const config = {
           stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
@@ -249,8 +249,8 @@ describe('wrapGetAbsolutePath', () => {
       const output = String(writeFile.mock.calls[0]?.[1]);
 
       expect(output).toMatchInlineSnapshot(`
-        "import { fileURLToPath } from 'node:url';
-        import { dirname } from 'node:path';
+        "import { dirname } from 'node:path';
+        import { fileURLToPath } from 'node:url';
         const config = {
           stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
           addons: [
diff --git a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.test.ts b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.test.ts
index 2ce762c3fd65..8d8d27c81448 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.test.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.test.ts
@@ -75,7 +75,6 @@ describe('main/preview codemod: general parsing functionality', () => {
       // @ts-check
       /** @license MIT */
       import { defineMain } from '@storybook/react-vite/node';
-
       export default defineMain({
         stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
         framework: '@storybook/react-vite',
diff --git a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
index 29fe2054c1be..066f99e5a688 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
@@ -63,7 +63,6 @@ describe('stories codemod', () => {
          * Copyright 2024
          */
         import preview from "#.storybook/preview";
-
         const meta = preview.meta({ title: "Component" });
         export const A = meta.story();
       `);
diff --git a/scripts/tasks/sandbox-parts.test.ts b/scripts/tasks/sandbox-parts.test.ts
index 1b54c41dadfd..cb793cc07815 100644
--- a/scripts/tasks/sandbox-parts.test.ts
+++ b/scripts/tasks/sandbox-parts.test.ts
@@ -137,9 +137,9 @@ it('wires Compodoc into an Angular Vite preview that opts out of server docgen',
   );
 
   expect(await readFile(PREVIEW_PATH, 'utf-8')).toMatchInlineSnapshot(`
-    "import { sb } from \"storybook/test\";
+    "import { setCompodocJson } from \"@storybook/addon-docs/angular\";
     import docJson from \"../documentation.json\";
-    import { setCompodocJson } from \"@storybook/addon-docs/angular\";
+    import { sb } from \"storybook/test\";
     sb.mock('../template-stories/core/test/ModuleMocking.utils.ts');
     sb.mock('../template-stories/core/test/ModuleSpyMocking.utils.ts', { spy: true });
     sb.mock('../template-stories/core/test/ModuleAutoMocking.utils.ts');

From a43d62917228546b5e1250f0fc3e81d79f2949dc Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Sat, 17 Oct 2026 21:08:29 +0200
Subject: [PATCH 153/326] fix(addon-vitest): only equate default and namespace
 imports of Node builtins

`importedExport` keyed every default import like a namespace import.
That holds for `node:path`, whose default export is its namespace, but
not for a module in general. Default imports, including
`{ default as x }`, now key as `default`, which equals the namespace
only for a Node builtin.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 code/addons/vitest/src/updateVitestFile.ts | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/code/addons/vitest/src/updateVitestFile.ts b/code/addons/vitest/src/updateVitestFile.ts
index c79833def7b0..5b409a43cecf 100644
--- a/code/addons/vitest/src/updateVitestFile.ts
+++ b/code/addons/vitest/src/updateVitestFile.ts
@@ -1,3 +1,5 @@
+import { isBuiltin } from 'node:module';
+
 import {
   findExportDefault,
   getConfigObjectFromMergeArg,
@@ -302,21 +304,23 @@ const findWritableConfigObject = (
   );
 };
 
-// The export an import binding reads: `node:path` and `path` are one module, and its default
-// export, however it is imported, the same object as its namespace.
+// The export an import binding reads. `node:path` and `path` are one module, and the default
+// export of a Node builtin is the same object as its namespace.
 const importedExport = (binding: Binding) => {
   if (binding.kind !== 'import' || binding.declaration?.type !== 'ImportDeclaration') {
     return undefined;
   }
   const specifier = binding.node as E.ImportDeclarationSpecifier;
-  const name =
-    specifier.type === 'ImportSpecifier'
-      ? specifier.imported.type === 'Literal'
-        ? specifier.imported.value
-        : specifier.imported.name
-      : 'default';
   const source = binding.declaration.source.value.replace(/^node:/, '');
-  return `${name === 'default' ? '*' : name} from ${source}`;
+  const name =
+    specifier.type === 'ImportNamespaceSpecifier'
+      ? '*'
+      : specifier.type === 'ImportDefaultSpecifier'
+        ? 'default'
+        : specifier.imported.type === 'Literal'
+          ? specifier.imported.value
+          : specifier.imported.name;
+  return `${name === 'default' && isBuiltin(source) ? '*' : name} from ${source}`;
 };
 
 // Whether the target binds a name the merged template code reads to anything but the same import.

From 8908111c39d374e326ab6f3112ad5d46eb0601ff Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Sat, 17 Oct 2026 21:08:32 +0200
Subject: [PATCH 154/326] refactor(mocking-utils): stop exporting
 automockModule

`getAutomockCode` is the entry point every builder uses. Nothing in the
repo or among known external builders calls the vendored
`automockModule` directly, so its signature change needs no migration.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 code/core/src/mocking-utils/automock.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/core/src/mocking-utils/automock.ts b/code/core/src/mocking-utils/automock.ts
index b32468a391c1..32bd340d7b4f 100644
--- a/code/core/src/mocking-utils/automock.ts
+++ b/code/core/src/mocking-utils/automock.ts
@@ -43,7 +43,7 @@ export function getAutomockCode(originalCode: string, isSpy: boolean, fileName?:
  * DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
-export function automockModule(
+function automockModule(
   code: string,
   mockType: 'automock' | 'autospy',
   fileName: string | undefined,

From c35d2f03f1c6a8b1316f65c1ac8736a9eab01aa5 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Sat, 17 Oct 2026 21:08:34 +0200
Subject: [PATCH 155/326] docs(migration): saving stories from the UI writes LF
 line endings too

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 MIGRATION.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index c344287a618d..dbac0f4694ec 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1321,7 +1321,7 @@ Storybook no longer bundles Babel or recast to read and write story and config f
 
 - **Flow syntax is no longer supported in story files.** Babel parsed `// @flow` files with its Flow plugin; OXC does not parse Flow. A `// @flow` file whose syntax is also valid TypeScript still indexes, but Flow-only syntax such as variance (`+readOnly`) or type casts (`(value: Type)`) is a parse error, and the error names Flow. Convert such files to TypeScript or plain JavaScript.
 - `parameters.docs.source.originalSource` is now the story's source text exactly as written, where Babel reprinted it with its own formatting. "Show code" and `docs.source.transform` functions receive the authored text, with line endings normalized to `\n`.
-- Files Storybook edits, with `storybook automigrate`, its codemods, or the setup steps of `storybook init` and `storybook add`, are written with `\n` line endings, even if they used CRLF; they used to keep CRLF. Code the builders transform, for example for `sb.mock()`, has `\n` line endings too.
+- Storybook writes every file it edits with `\n` line endings, even if the file used CRLF; it used to keep CRLF. This covers `storybook automigrate`, codemods, `storybook init` and `storybook add`, and saving stories from the UI. Code the builders transform, such as `sb.mock()` automocks, uses `\n` as well.
 - Parse errors use OXC's wording, and end with ` in <file>` when the file name is known. Duplicate declarations and legacy octal literals are still rejected.
 - A parse error in a module that `sb.mock()` automocks under webpack now fails that module's build, where Babel's error recovery used to mock whatever it could parse.
 

From 5f149f021c2a3fab1707f924bd0ff812073d60c8 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Sat, 17 Oct 2026 22:52:21 +0200
Subject: [PATCH 156/326] refactor(csf-tools): one commit path, and stale nodes
 fail loudly

`csf._commit()` refreshed the story indexes, `csf._editor.commit()` did not,
and codemods called the latter. Committing now always goes through the
`SourceEditor`, which takes an `onCommit` callback: `CsfFile` and `ConfigFile`
derive their state again from it, so `_commit` is gone and so is the
`commit` member of `CsfObjectHost`.

Nodes from before a commit index text that no longer exists, and editing with
them silently corrupted the output. Each node of a printable parse already
recorded its code; it now records its parse, so `editor.source()` and the
editing primitives throw for a node of another parse with one WeakMap lookup.
Raw `editor.edits` calls stay unguarded. `objectList` takes the editor like the
other list constructors, so a list is checked where it is built.

`ConfigFile._editorSource` is now `_editor`, so `_editor` is the
`SourceEditor` on both files; the method that returned an object editor is
`_objectEditor`.

csf-2-to-3 reads its templates before committing, as the re-derived file no
longer binds them.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 MIGRATION.md                                  |  2 +-
 code/addons/vitest/src/updateVitestFile.ts    | 14 ++--
 .../utils/wrap-getAbsolutePath-utils.ts       | 10 +--
 .../duplicate-story-with-new-name.ts          |  4 +-
 code/core/src/csf-tools/ConfigFile.ts         | 84 +++++++++----------
 code/core/src/csf-tools/ConfigObject.ts       |  5 +-
 code/core/src/csf-tools/CsfFile.ts            | 13 +--
 code/core/src/csf-tools/CsfObject.ts          | 15 ++--
 code/core/src/csf-tools/CsfObjectDiscovery.ts |  1 -
 code/core/src/csf-tools/estree/ast.ts         | 30 ++++---
 code/core/src/csf-tools/estree/editor.test.ts | 20 +++++
 code/core/src/csf-tools/estree/editor.ts      | 64 ++++++++++----
 .../fixes/angular-vite-remove-compodoc.ts     |  2 +-
 .../fixes/web-components-runtime-manifest.ts  |  6 +-
 .../src/automigrate/helpers/preview-call.ts   |  4 +-
 .../codemod/helpers/config-to-csf-factory.ts  |  8 +-
 code/lib/codemod/src/transforms/csf-2-to-3.ts |  4 +-
 17 files changed, 165 insertions(+), 121 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index dbac0f4694ec..9603d084e7cb 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1328,7 +1328,7 @@ Storybook no longer bundles Babel or recast to read and write story and config f
 #### Changes for tooling that imports Storybook's internal entry points
 
 - `storybook/internal/babel` is removed. Import Babel from your own `@babel/*` dependencies if you still need it.
-- The nodes exposed by `storybook/internal/csf-tools` are ESTree (OXC) nodes instead of Babel nodes, for example `Literal` instead of `StringLiteral` and `Property` instead of `ObjectProperty`/`ObjectMethod`. `CsfFile._ast` and the `NodePath` fields are removed; use `CsfFile._program` and `CsfFile._editor`. `ConfigFile._ast` is removed as well; use `ConfigFile._program`, edit through `ConfigFile._editorSource` and call `ConfigFile._commit()` to apply pending edits and parse the result again.
+- The nodes exposed by `storybook/internal/csf-tools` are ESTree (OXC) nodes instead of Babel nodes, for example `Literal` instead of `StringLiteral` and `Property` instead of `ObjectProperty`/`ObjectMethod`. `CsfFile._ast` and the `NodePath` fields are removed; use `CsfFile._program` and `CsfFile._editor`. `ConfigFile._ast` is removed as well; use `ConfigFile._program` and `ConfigFile._editor`. Both `_editor`s are a `SourceEditor`: call `_editor.commit()` to apply pending edits, after which the file parses the result again. Nodes from before a commit are stale, and editing with them throws.
 - `CsfObject#get` returns an ESTree expression, and `set`/`transform` accept expressions from `get()` or `parseExpression(code)`. Use `printExpression(node)` to read an expression's source, and `placeableTextOf(node)` to build new code around it.
 - An `experimental_enrichCsf` function receives the new `CsfFile`. Add code with `csf._appendStatement(code)` instead of pushing Babel nodes onto `csf._ast`.
 - `babelParse` is removed; use `parseModule(code, fileName)` from `storybook/internal/csf-tools`, which returns the ESTree `program` and `comments`. `babelParseFile` is removed as well; read CSF with `loadCsf(code, options)` or `readCsf(fileName, options)`.
diff --git a/code/addons/vitest/src/updateVitestFile.ts b/code/addons/vitest/src/updateVitestFile.ts
index 5b409a43cecf..0d7e0f3da54b 100644
--- a/code/addons/vitest/src/updateVitestFile.ts
+++ b/code/addons/vitest/src/updateVitestFile.ts
@@ -67,7 +67,7 @@ const isProjectsArrayProp = (
   keyName(member) === 'projects' && (member as E.ObjectProperty).value.type === 'ArrayExpression';
 
 const memberTexts = (editor: SourceEditor, object: E.ObjectExpression, members: Member[]) =>
-  members.map((member) => itemText(editor, objectList(object), member));
+  members.map((member) => itemText(editor, objectList(editor, object), member));
 
 const elementTexts = (editor: SourceEditor, array: E.ArrayExpression) =>
   arrayList(editor, array).items.map((element) =>
@@ -128,7 +128,7 @@ const mergeProperties = (
     }
   }
   if (appended.length > 0) {
-    appendItems(target, objectList(into), appended);
+    appendItems(target, objectList(target, into), appended);
   }
 };
 
@@ -159,7 +159,7 @@ const appendToExistingProjects = (
     if (added.length > 0) {
       appendItems(
         merge.target,
-        objectList(testObject),
+        objectList(merge.target, testObject),
         memberTexts(merge.source, templateTestObject, added)
       );
     }
@@ -232,7 +232,11 @@ const wrapTestConfigAsProject = (
 
   prependToList(source, arrayList(source, templateProjects.value), [project], '');
   if (hoisted.length > 0) {
-    prependToList(source, objectList(templateTestObject), memberTexts(target, testObject, hoisted));
+    prependToList(
+      source,
+      objectList(source, templateTestObject),
+      memberTexts(target, testObject, hoisted)
+    );
   }
   source.commit();
 
@@ -242,7 +246,7 @@ const wrapTestConfigAsProject = (
     existingTest.start,
     existingTest.end,
     reindent(
-      itemText(source, objectList(config), templateTest),
+      itemText(source, objectList(source, config), templateTest),
       '',
       lineIndent(target.code, existingTest.start)
     )
diff --git a/code/core/src/common/utils/wrap-getAbsolutePath-utils.ts b/code/core/src/common/utils/wrap-getAbsolutePath-utils.ts
index 52d72df66c76..78b2359cb822 100644
--- a/code/core/src/common/utils/wrap-getAbsolutePath-utils.ts
+++ b/code/core/src/common/utils/wrap-getAbsolutePath-utils.ts
@@ -155,7 +155,7 @@ export function wrapValuesWithGetAbsolutePathWrapper(config: ConfigFile, nodes:
   const wrap = (node: Node) =>
     isGetAbsolutePathWrapperNecessary(node, (target) => {
       if (isStringLiteral(target)) {
-        config._editorSource.edits.overwrite(
+        config._editor.edits.overwrite(
           target.start,
           target.end,
           getAbsolutePathCall(config, target.value)
@@ -165,7 +165,7 @@ export function wrapValuesWithGetAbsolutePathWrapper(config: ConfigFile, nodes:
       }
     });
   nodes.forEach(wrap);
-  config._commit();
+  config._editor.commit();
 }
 
 /**
@@ -191,7 +191,7 @@ export function ensureNamedImport(config: ConfigFile, imported: string, source:
     }
   }
 
-  const taken = config._editorSource.scopes.program.bindings;
+  const taken = config._editor.scopes.program.bindings;
   if (!taken.has(imported)) {
     config.setImport([imported], source);
     return imported;
@@ -202,9 +202,9 @@ export function ensureNamedImport(config: ConfigFile, imported: string, source:
     local = `_${local}`;
   }
   prependStatement(
-    config._editorSource,
+    config._editor,
     `import { ${imported} as ${local} } from ${printString(source, config._quote)};`
   );
-  config._commit();
+  config._editor.commit();
   return local;
 }
diff --git a/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.ts b/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.ts
index b54f2ef6bfeb..e8dc10fe4c37 100644
--- a/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.ts
+++ b/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.ts
@@ -40,7 +40,7 @@ export const duplicateStoryWithNewName = (csfFile: In, storyName: string, newSto
         property.type === 'Property' && !property.computed && identifierKey(property) === 'args'
     );
     if (args.length > 0) {
-      removeFromList(copy, objectList(child), args);
+      removeFromList(copy, objectList(copy, child), args);
     }
   });
   const initCode = copy.toString().slice(1, -1);
@@ -50,7 +50,7 @@ export const duplicateStoryWithNewName = (csfFile: In, storyName: string, newSto
       : '';
 
   appendStatement(csfFile._editor, `export const ${newStoryName}${typeAnnotation} = ${initCode};`);
-  csfFile._commit();
+  csfFile._editor.commit();
 
   const duplicated = csfFile._storyExports[newStoryName];
   return (duplicated?.type === 'VariableDeclarator' ? duplicated.init : duplicated) as Node;
diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index e78385e419f4..cf81ec3b0704 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -203,7 +203,7 @@ export class ConfigFile implements CsfObject {
    * ```
    */
   get(path: readonly string[]): CsfExpression | undefined {
-    const editor = this._editor('read');
+    const editor = this._objectEditor('read');
     return editor.ok ? editor.object.get(path) : undefined;
   }
 
@@ -220,7 +220,7 @@ export class ConfigFile implements CsfObject {
    * ```
    */
   getValue(path: readonly string[]): CsfValue {
-    const editor = this._editor('read');
+    const editor = this._objectEditor('read');
     return editor.ok ? editor.object.getValue(path) : undefined;
   }
 
@@ -323,13 +323,13 @@ export class ConfigFile implements CsfObject {
   }
 
   _mutate(operation: (object: CsfObject) => CsfMutationResult): CsfMutationResult {
-    const editor = this._editor('mutate');
+    const editor = this._objectEditor('mutate');
     return editor.ok === true
       ? operation(editor.object)
       : { ok: false, changed: false, diagnostic: editor.diagnostic };
   }
 
-  _editor(mode: 'read' | 'mutate') {
+  _objectEditor(mode: 'read' | 'mutate') {
     const editor = createConfigObject(
       this,
       mode,
@@ -344,7 +344,7 @@ export class ConfigFile implements CsfObject {
     return editor;
   }
 
-  _editorSource: SourceEditor;
+  _editor: SourceEditor;
 
   _exports: Record<string, Node> = {};
 
@@ -362,27 +362,22 @@ export class ConfigFile implements CsfObject {
   hasDefaultExport = false;
 
   constructor(code: string, fileName?: string) {
-    this._editorSource = new SourceEditor(code, fileName);
+    this._editor = new SourceEditor(code, fileName, () => {
+      this._exports = {};
+      this._exportDecls = {};
+      this._exportsObject = undefined;
+      this.hasDefaultExport = false;
+      this.parse();
+    });
     this.fileName = fileName;
   }
 
   get _program(): E.Program {
-    return this._editorSource.program;
+    return this._editor.program;
   }
 
   get _code(): string {
-    return this._editorSource.code;
-  }
-
-  _commit() {
-    if (!this._editorSource.commit()) {
-      return;
-    }
-    this._exports = {};
-    this._exportDecls = {};
-    this._exportsObject = undefined;
-    this.hasDefaultExport = false;
-    this.parse();
+    return this._editor.code;
   }
 
   _parseExportsObject(exportsObject: E.ObjectExpression) {
@@ -418,7 +413,7 @@ export class ConfigFile implements CsfObject {
 
   parse() {
     // Read before any edit: a mutation may remove the string literals the style is inferred from.
-    this._editorSource.preferredQuote = this._quote;
+    this._editor.preferredQuote = this._quote;
     walk(this._program, (node, parent) => {
       const isTopLevel = parent?.type === 'Program';
       if (node.type === 'ExportDefaultDeclaration') {
@@ -684,11 +679,11 @@ export class ConfigFile implements CsfObject {
   }
 
   removeField(path: string[]) {
-    const editor = this._editorSource;
+    const editor = this._editor;
     const removeProperty = (object: E.ObjectExpression, prop: string) => {
       const member = object.properties.find((p) => propKey(p) === prop);
       if (member) {
-        removeFromList(editor, objectList(object), [member]);
+        removeFromList(editor, objectList(editor, object), [member]);
       }
     };
     // the structure of this._exports doesn't work for this use case
@@ -716,7 +711,7 @@ export class ConfigFile implements CsfObject {
       }
 
       if (removedRootProperty) {
-        this._commit();
+        this._editor.commit();
         return;
       }
     }
@@ -725,7 +720,7 @@ export class ConfigFile implements CsfObject {
     const parentNode = _getPath(rest.slice(0, -1), this._exports[root]);
     if (this._exports[root] && parentNode?.type === 'ObjectExpression') {
       removeProperty(parentNode, path.at(-1)!);
-      this._commit();
+      this._editor.commit();
     }
   }
 
@@ -743,8 +738,8 @@ export class ConfigFile implements CsfObject {
     if (!current) {
       this.set(path, parseExpression(`[${source}]`));
     } else if (current.type === 'ArrayExpression') {
-      appendToList(this._editorSource, arrayList(this._editorSource, current), [source], '');
-      this._commit();
+      appendToList(this._editor, arrayList(this._editor, current), [source], '');
+      this._editor.commit();
     } else {
       throw new Error(`Expected array at '${path.join('.')}', got '${current.type}'`);
     }
@@ -772,8 +767,8 @@ export class ConfigFile implements CsfObject {
         return element ? this._getWrappedValue(element) === value : false;
       });
       if (element) {
-        removeFromList(this._editorSource, arrayList(this._editorSource, current), [element]);
-        this._commit();
+        removeFromList(this._editor, arrayList(this._editor, current), [element]);
+        this._editor.commit();
       } else {
         throw new Error(`Could not find '${value}' in array at '${path.join('.')}'`);
       }
@@ -839,13 +834,12 @@ export class ConfigFile implements CsfObject {
     const calls = findCallArguments(this, options, report);
     return calls.map((_, index) => {
       const host: CsfObjectHost = {
-        editor: this._editorSource,
+        editor: this._editor,
         root: () => {
           // Edits re-parse the file, so the argument is found again by its position among calls.
           const node = findCallArguments(this, options, () => {})[index];
-          return node && literalRoot(this._editorSource, node);
+          return node && literalRoot(this._editor, node);
         },
-        commit: () => this._commit(),
       };
       return createCsfObject(target, host, [], report, () => {
         this._changed = true;
@@ -855,8 +849,8 @@ export class ConfigFile implements CsfObject {
 
   /** Appends a statement, given as source, to the end of the file. */
   setBodyDeclaration(declaration: string) {
-    appendStatement(this._editorSource, declaration);
-    this._commit();
+    appendStatement(this._editor, declaration);
+    this._editor.commit();
   }
 
   /**
@@ -885,7 +879,7 @@ export class ConfigFile implements CsfObject {
       ).value;
     }
     const source = printString(fromImport, this._quote);
-    const editor = this._editorSource;
+    const editor = this._editor;
 
     // if the import specifier is a string, we're dealing with default imports
     if (typeof importSpecifier === 'string') {
@@ -908,10 +902,10 @@ export class ConfigFile implements CsfObject {
       if (!pattern) {
         prependStatement(editor, `const { ${names.join(', ')} } = require(${source});`);
       } else if (pattern.type === 'ObjectPattern' && names.length > 0) {
-        appendToList(editor, objectList(pattern), names);
+        appendToList(editor, objectList(editor, pattern), names);
       }
     }
-    this._commit();
+    this._editor.commit();
   }
 
   _findRequire(fromImport: string) {
@@ -961,7 +955,7 @@ export class ConfigFile implements CsfObject {
     if (importDeclaration) {
       fromImport = importDeclaration.source.value;
     }
-    const editor = this._editorSource;
+    const editor = this._editor;
     const source = printString(fromImport, this._quote);
     const has = (type: string, name?: string) =>
       !!importDeclaration?.specifiers.some(
@@ -1013,7 +1007,7 @@ export class ConfigFile implements CsfObject {
     ) {
       addImport(`* as ${importSpecifier.namespace}`);
     }
-    this._commit();
+    this._editor.commit();
   }
 
   _removeRequireImport(
@@ -1026,7 +1020,7 @@ export class ConfigFile implements CsfObject {
       return;
     }
     const declarator = requireDeclaration.declarations[0];
-    const editor = this._editorSource;
+    const editor = this._editor;
 
     // Handle default requires e.g. const foo = require('bar')
     if (typeof importSpecifier === 'string') {
@@ -1049,7 +1043,7 @@ export class ConfigFile implements CsfObject {
       if (removed.length === pattern.properties.length) {
         removeStatement(editor, requireDeclaration);
       } else if (removed.length > 0) {
-        removeFromList(editor, objectList(pattern), removed);
+        removeFromList(editor, objectList(editor, pattern), removed);
       }
     }
   }
@@ -1062,7 +1056,7 @@ export class ConfigFile implements CsfObject {
     if (!importDeclaration) {
       return;
     }
-    const editor = this._editorSource;
+    const editor = this._editor;
 
     // Remove side-effect imports (e.g., import 'foo') if exact match, else do nothing.
     if (importSpecifier === null) {
@@ -1138,9 +1132,9 @@ export class ConfigFile implements CsfObject {
     fromImport: string
   ) {
     this._removeRequireImport(importSpecifier, fromImport);
-    this._commit();
+    this._editor.commit();
     this._removeImport(importSpecifier, fromImport);
-    this._commit();
+    this._editor.commit();
   }
 }
 
@@ -1150,7 +1144,7 @@ const findCallArguments = (
   { importedName, methodName, moduleNames }: CallArgumentsOptions,
   report: (diagnostic: CsfMutationDiagnostic) => void
 ): E.ObjectExpression[] => {
-  const editor = config._editorSource;
+  const editor = config._editor;
   const modules = new Set(moduleNames);
   const imports = new Map<string, Set<Node>>();
   const addImport = (name: string, node: Node) =>
@@ -1250,7 +1244,7 @@ export const formatConfig = (config: ConfigFile): string => {
  * byte for byte.
  */
 export const printConfig = (config: ConfigFile): PrintResultType => {
-  const code = config._editorSource.toString();
+  const code = config._editor.toString();
   return { code, toString: () => code };
 };
 
diff --git a/code/core/src/csf-tools/ConfigObject.ts b/code/core/src/csf-tools/ConfigObject.ts
index bf7bb6b93fe0..4f46fb56b4d9 100644
--- a/code/core/src/csf-tools/ConfigObject.ts
+++ b/code/core/src/csf-tools/ConfigObject.ts
@@ -82,7 +82,7 @@ export const locateConfigRoot = (
   config: ConfigFile,
   mode: 'read' | 'mutate'
 ): { ok: true; root: ObjectRoot } | Rejection => {
-  const editor = config._editorSource;
+  const editor = config._editor;
   const { program } = editor;
   const reject = (
     node: Node | Span | undefined,
@@ -492,12 +492,11 @@ export function createConfigObject(
     return located;
   }
   const host: CsfObjectHost = {
-    editor: config._editorSource,
+    editor: config._editor,
     root: () => {
       const current = locateConfigRoot(config, mode);
       return current.ok ? current.root : undefined;
     },
-    commit: () => config._commit(),
   };
   return { ok: true, object: createCsfObject({ kind: 'config' }, host, [], report, markChanged) };
 }
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index 13cdf59b8b82..97005b1e484b 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -386,7 +386,10 @@ export class CsfFile {
   _tests: StoryTest[] = [];
 
   constructor(code: string, options: CsfOptions) {
-    this._editor = new SourceEditor(code, options.fileName);
+    this._editor = new SourceEditor(code, options.fileName, () => {
+      this._reset();
+      this.parse();
+    });
     this._options = options;
     this.imports = [];
     mutationStates.set(this, { diagnostics: [], changed: false });
@@ -471,14 +474,6 @@ export class CsfFile {
     appendStatement(this._editor, code);
   }
 
-  _commit() {
-    if (!this._editor.commit()) {
-      return;
-    }
-    this._reset();
-    this.parse();
-  }
-
   _reset() {
     this._rawComponentPath = undefined;
     this._componentImportSpecifier = undefined;
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index 1002a38dea8c..8561ec4171b2 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -270,7 +270,6 @@ export interface CsfObjectHost {
   readonly editor: SourceEditor;
   // Located again after every commit.
   root(): ObjectRoot | undefined;
-  commit(): void;
 }
 
 export const literalRoot = (editor: SourceEditor, object: E.ObjectExpression): ObjectRoot => ({
@@ -530,7 +529,7 @@ class CsfObjectEditor implements CsfObject {
       return this.failure(removal.code, path, removal.node);
     }
     inspected.parent.root.remove([inspected.property]);
-    this.commit();
+    this.editor.commit();
     this.removeEmptyParents(logicalPath);
     return this.success();
   }
@@ -600,13 +599,13 @@ class CsfObjectEditor implements CsfObject {
     // Insert first: if that throws, nothing has been committed. The source is removed afterwards,
     // looked up again since the insertion moved its spans.
     this.insert(destinationPath, [{ ...moved, key }]);
-    this.commit();
+    this.editor.commit();
     const remaining = this.inspect(sourcePath);
     if (remaining.ok === false || !remaining.property || !remaining.parent) {
       throw new Error(`CsfObject: ${sourcePath.join('.')} was not found again after moving it`);
     }
     remaining.parent.root.remove([remaining.property]);
-    this.commit();
+    this.editor.commit();
     this.removeEmptyParents(sourcePath);
     return this.success();
   }
@@ -790,7 +789,7 @@ class CsfObjectEditor implements CsfObject {
         return;
       }
       ancestor.parent.root.remove([ancestor.property]);
-      this.commit();
+      this.editor.commit();
     }
   }
 
@@ -878,10 +877,6 @@ class CsfObjectEditor implements CsfObject {
     return this.editor.program;
   }
 
-  private commit() {
-    this.host.commit();
-  }
-
   private failure(
     code: CsfMutationDiagnosticCode,
     path: readonly string[],
@@ -903,7 +898,7 @@ class CsfObjectEditor implements CsfObject {
   }
 
   private success(): CsfMutationResult {
-    this.commit();
+    this.editor.commit();
     this.#changed = true;
     this.markChanged();
     return { ok: true, changed: true };
diff --git a/code/core/src/csf-tools/CsfObjectDiscovery.ts b/code/core/src/csf-tools/CsfObjectDiscovery.ts
index a56e8de8cdf1..a6da4bc8b295 100644
--- a/code/core/src/csf-tools/CsfObjectDiscovery.ts
+++ b/code/core/src/csf-tools/CsfObjectDiscovery.ts
@@ -423,7 +423,6 @@ export const discoverCsfObjects = (
         );
         return current && literalRoot(csf._editor, current.node);
       },
-      commit: () => csf._commit(),
     };
     return createCsfObject(target, host, prefix, report, markChanged);
   });
diff --git a/code/core/src/csf-tools/estree/ast.ts b/code/core/src/csf-tools/estree/ast.ts
index 48e4fd9cfa8d..408d4c4250ab 100644
--- a/code/core/src/csf-tools/estree/ast.ts
+++ b/code/core/src/csf-tools/estree/ast.ts
@@ -94,10 +94,10 @@ export const parseModule = (code: string, fileName?: string): ParsedModule => {
   return module;
 };
 
-// `parseModule`, but `textOf` can print every node of the tree.
+// `parseModule`, but `textOf` can print every node of the tree and `moduleOf` finds its parse.
 export const parsePrintable = (code: string, fileName?: string): ParsedModule => {
   const module = parseWithParentheses(code, fileName);
-  normalize(module.program, module.code);
+  normalize(module.program, module);
   return module;
 };
 
@@ -313,8 +313,11 @@ type Span = { start: number; end: number };
 
 export const sourceOf = (code: string, node: Span) => code.slice(node.start, node.end);
 
-// The code each parsed node came from, so a node can be printed without its module.
-const nodeSources = new WeakMap<object, string>();
+// The parse each node came from, so a node can be printed without its module.
+const nodeModules = new WeakMap<object, ParsedModule>();
+
+/** The parse a node of `parsePrintable` or `expressionFromSource` came from. */
+export const moduleOf = (node: object): ParsedModule | undefined => nodeModules.get(node);
 
 const outerSpans = new WeakMap<object, Span>();
 
@@ -337,15 +340,15 @@ const withoutParentheses = (node: Node): Node => {
 const childKeys = new Map<string, readonly string[]>(Object.entries(visitorKeys));
 
 // Replaces every parenthesized node under `root` by the node inside it, in one pass that also
-// records the code each node came from, if given. It keeps its own stack, so a deeply nested
+// records the parse each node came from, if given. It keeps its own stack, so a deeply nested
 // expression cannot overflow the call stack; tracking the size itself is faster than push and pop.
-const normalize = (root: Node, code: string | undefined) => {
+const normalize = (root: Node, module: ParsedModule | undefined) => {
   const stack = [root];
   let size = 1;
   while (size > 0) {
     const node = stack[--size];
-    if (code !== undefined) {
-      nodeSources.set(node, code);
+    if (module !== undefined) {
+      nodeModules.set(node, module);
     }
     const keys = childKeys.get(node.type);
     if (keys === undefined) {
@@ -383,8 +386,8 @@ export const textOf = (node: Node): string | undefined => {
   if (fragment) {
     return fragment.text;
   }
-  const code = nodeSources.get(node);
-  return code === undefined ? undefined : sourceOf(code, node as Node & Span);
+  const module = nodeModules.get(node);
+  return module === undefined ? undefined : sourceOf(module.code, node as Node & Span);
 };
 
 /**
@@ -397,7 +400,7 @@ export const placeableTextOf = (node: Node): string => {
   if (fragment) {
     return fragment.placeable;
   }
-  const code = nodeSources.get(node);
+  const code = nodeModules.get(node)?.code;
   if (code === undefined) {
     throw new Error(
       `Cannot print a ${node.type} node whose source is unknown: expressions must come from \`get\`, \`transform\` or \`parseExpression\``
@@ -417,14 +420,15 @@ export const expressionFromSource = (source: string): E.Expression => {
   const code = normalizeLineEndings(source);
   // The line break ends a trailing line comment before the closing parenthesis.
   const wrapped = `(${code}\n)`;
-  const { program, comments } = parseWithParentheses(wrapped, undefined);
+  const module = parseWithParentheses(wrapped, undefined);
+  const { program, comments } = module;
   const statement = program.body[0] as E.Statement | undefined;
   const wrapper = statement?.type === 'ExpressionStatement' ? statement.expression : undefined;
   if (wrapper?.type !== 'ParenthesizedExpression' || wrapper.end !== wrapped.length) {
     throw new SyntaxError(`Expected an expression: ${code}`);
   }
   const parenthesized = wrapper.expression.type === 'ParenthesizedExpression';
-  normalize(program, wrapped);
+  normalize(program, module);
   const expression = (statement as E.ExpressionStatement).expression;
   // The wrapper's parentheses are not part of the fragment.
   outerSpans.delete(expression);
diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index 379ef1ec8317..ae3931b92f3e 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -111,6 +111,26 @@ describe('reindent', () => {
   });
 });
 
+describe('commit', () => {
+  it('throws for a node of the parse before a commit', () => {
+    const editor = new SourceEditor("import z from 'z';\nimport { a } from 'a';\n");
+    const [stale] = editor.program.body;
+    editor.edits.overwrite(stale.start, stale.end, "import z from 'zzzzzzzz';");
+    editor.commit();
+    expect(() => removeStatement(editor, stale)).toThrow('stale after `commit()`');
+    expect(() => editor.source(stale)).toThrow('stale after `commit()`');
+    removeStatement(editor, editor.program.body[0]);
+    expect(editor.toString()).toBe("import { a } from 'a';\n");
+  });
+
+  it('derives the story exports of a CsfFile again', () => {
+    const csf = parse('export default {};\nexport const A = {};\n');
+    appendStatement(csf._editor, 'export const B = {};');
+    csf._editor.commit();
+    expect(Object.keys(csf._stories)).toEqual(['A', 'B']);
+  });
+});
+
 describe('parenthesized array elements', () => {
   it('appends after a comma expression and removes a doubly parenthesized one whole', () => {
     const editor = new SourceEditor(`export default { addons: [(a, b)] };`);
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 533399471728..6f353c302726 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -8,6 +8,7 @@ import {
   type Property,
   isNode,
   isValidIdentifier,
+  moduleOf,
   normalizeLineEndings,
   outerSpan,
   parseModule,
@@ -44,8 +45,10 @@ export type InputSourceMap =
 
 /**
  * Source text plus its OXC AST. Edits accumulate in `edits`, so untouched code stays
- * byte-identical; `commit()` applies them and parses the result again. Line endings are
- * normalized to `\n`, so `code`, node offsets and `toString()` all use `\n`.
+ * byte-identical; `commit()` applies them, parses the result again and calls `onCommit`, so whoever
+ * derived state from the old tree derives it again. Nodes of an earlier parse index code that is
+ * gone: `source()` and the editing functions throw for them. Line endings are normalized to `\n`,
+ * so `code`, node offsets and `toString()` all use `\n`.
  */
 export class SourceEditor {
   _module: ParsedModule;
@@ -65,8 +68,11 @@ export class SourceEditor {
 
   readonly fileName: string | undefined;
 
-  constructor(code: string, fileName?: string) {
+  readonly _onCommit: (() => void) | undefined;
+
+  constructor(code: string, fileName?: string, onCommit?: () => void) {
     this.fileName = fileName;
+    this._onCommit = onCommit;
     this._originalCode = code;
     this._module = parsePrintable(code, fileName);
     this._edits = new MagicString(this.code, { filename: fileName });
@@ -120,9 +126,20 @@ export class SourceEditor {
   }
 
   source(node: Span) {
+    this.assertCurrent(node);
     return sourceOf(this.code, node);
   }
 
+  /** Throw for a node of another parse, such as one from before a commit. */
+  assertCurrent(node: Span) {
+    const module = moduleOf(node);
+    if (module && module !== this._module) {
+      throw new Error(
+        `Cannot edit a ${(node as Node).type} node of another parse: nodes are stale after \`commit()\`, look them up again`
+      );
+    }
+  }
+
   /** Apply pending edits and parse the result again. Returns whether anything changed. */
   commit() {
     if (!this.pending) {
@@ -135,6 +152,7 @@ export class SourceEditor {
     this._scopes = undefined;
     this._parents = undefined;
     this._edits = new MagicString(this.code, { filename: this.fileName });
+    this._onCommit?.();
     return true;
   }
 
@@ -368,6 +386,7 @@ export const specifierList = (
   editor: SourceEditor,
   declaration: E.ImportDeclaration | E.ExportNamedDeclaration
 ): List => {
+  editor.assertCurrent(declaration);
   const { code } = editor;
   const items = declaration.specifiers.filter(
     (specifier) => specifier.type === 'ImportSpecifier' || specifier.type === 'ExportSpecifier'
@@ -380,17 +399,20 @@ export const specifierList = (
   };
 };
 
-export const objectList = (object: E.ObjectExpression | E.ObjectPattern): List => ({
-  open: object.start + 1,
-  close: object.end - 1,
-  items: object.properties,
-});
+export const objectList = (
+  editor: SourceEditor,
+  object: E.ObjectExpression | E.ObjectPattern
+): List => {
+  editor.assertCurrent(object);
+  return { open: object.start + 1, close: object.end - 1, items: object.properties };
+};
 
 // A hole (`[a, , b]`) is an empty item right before the comma that writes it.
 const isHole = (item: Span) => item.start === item.end;
 
 // An element's item spans the parentheses around it.
 export const arrayList = (editor: SourceEditor, array: E.ArrayExpression): List => {
+  editor.assertCurrent(array);
   const open = array.start + 1;
   const close = array.end - 1;
   let cursor = open;
@@ -551,16 +573,18 @@ const itemTextWith = (
  * Text of an item including the comments that lead it, with continuation lines dedented. The
  * comments that trail the item on its line move above it, so a comma can follow the text.
  */
-export const itemText = (editor: SourceEditor, list: List, item: Span) =>
-  itemTextWith(editor, list, list.items.indexOf(item), (start) =>
+export const itemText = (editor: SourceEditor, list: List, item: Span) => {
+  editor.assertCurrent(item);
+  return itemTextWith(editor, list, list.items.indexOf(item), (start) =>
     dedentSource(editor, start, item.end, lineIndent(editor.code, item.start))
   );
+};
 
 export const memberText = (
   editor: SourceEditor,
   object: E.ObjectExpression,
   member: E.ObjectPropertyKind
-) => itemText(editor, objectList(object), member);
+) => itemText(editor, objectList(editor, object), member);
 
 export const appendToList = (
   editor: SourceEditor,
@@ -635,6 +659,7 @@ export const prependToList = (editor: SourceEditor, list: List, texts: string[],
 
 /** Remove items with their separators and the comments that lead and trail them from a list. */
 export const removeFromList = (editor: SourceEditor, list: List, removedItems: readonly Span[]) => {
+  removedItems.forEach((item) => editor.assertCurrent(item));
   const { code, edits } = editor;
   const { items } = list;
   // A list item may be a widened span, so an item is removed when it contains a removed span.
@@ -680,10 +705,10 @@ export const removeFromList = (editor: SourceEditor, list: List, removedItems: r
 };
 
 export const appendMembers = (editor: SourceEditor, object: E.ObjectExpression, texts: string[]) =>
-  appendToList(editor, objectList(object), texts);
+  appendToList(editor, objectList(editor, object), texts);
 
 export const prependMembers = (editor: SourceEditor, object: E.ObjectExpression, texts: string[]) =>
-  prependToList(editor, objectList(object), texts);
+  prependToList(editor, objectList(editor, object), texts);
 
 /** Replace contiguous members with `key: { …members }`, keeping the first member's comments. */
 export const groupMembers = (
@@ -692,7 +717,8 @@ export const groupMembers = (
   members: Property[],
   key: string
 ) => {
-  const list = objectList(object);
+  const list = objectList(editor, object);
+  members.forEach((member) => editor.assertCurrent(member));
   const texts = members.map((member) => memberText(editor, object, member));
   const first = list.items.indexOf(members[0]);
   const multiline = editor.code.slice(object.start, object.end).includes('\n');
@@ -719,7 +745,7 @@ export const removeMembers = (
   editor: SourceEditor,
   object: E.ObjectExpression,
   members: readonly E.ObjectPropertyKind[]
-) => removeFromList(editor, objectList(object), members);
+) => removeFromList(editor, objectList(editor, object), members);
 
 const NEXT_LINE_DIRECTIVE =
   /^\s*(@ts-(expect-error|ignore)|[a-z]+-disable-next-line|prettier-ignore|biome-ignore)\b/;
@@ -772,6 +798,7 @@ export const headerComments = (editor: SourceEditor): E.Comment[] => {
  * code below instead, and so is everything after it.
  */
 export const statementEnd = (editor: SourceEditor, statement: Span) => {
+  editor.assertCurrent(statement);
   const { comments } = commentsBeside(editor, statement.end);
   const below = comments.findIndex(
     (comment) =>
@@ -857,6 +884,7 @@ export const appendStatement = (editor: SourceEditor, text: string) => {
 
 /** Remove a statement with the comments it owns, and its lines when nothing else shares them. */
 export const removeStatement = (editor: SourceEditor, statement: Span, atTop?: boolean) => {
+  editor.assertCurrent(statement);
   const { code } = editor;
   const start = (leadingComments(editor, statement)[0] ?? statement).start;
   const end = statementEnd(editor, statement);
@@ -887,6 +915,7 @@ export const removeStatement = (editor: SourceEditor, statement: Span, atTop?: b
 
 /** Remove top-level statements, each with a `;` that directly follows it. */
 export const removeStatements = (editor: SourceEditor, statements: ReadonlySet<Node>) => {
+  statements.forEach((statement) => editor.assertCurrent(statement));
   const { body } = editor.program;
   let keptBefore = false;
   body.forEach((statement, index) => {
@@ -912,6 +941,7 @@ export const setImportSpecifiers = (
   kept: readonly E.ImportDeclaration['specifiers'][number][],
   added: { default?: string; named?: string[] } = {}
 ) => {
+  editor.assertCurrent(declaration);
   const { specifiers } = declaration;
   const named = specifiers.filter((specifier) => specifier.type === 'ImportSpecifier');
   const others = specifiers.filter((specifier) => specifier.type !== 'ImportSpecifier');
@@ -946,6 +976,7 @@ export const setImportSpecifiers = (
 };
 
 export const replaceValue = (editor: SourceEditor, member: Property, text: string) => {
+  editor.assertCurrent(member);
   if (member.shorthand) {
     editor.edits.overwrite(member.start, member.end, `${editor.source(member.key)}: ${text}`);
     return;
@@ -968,6 +999,7 @@ export const keySource = (editor: SourceEditor, member: Property) =>
 
 // A computed key's span includes its brackets: the tokens around the key and its parentheses.
 const keyRange = (editor: SourceEditor, member: Property): Span => {
+  editor.assertCurrent(member);
   if (!member.computed) {
     return member.key;
   }
@@ -995,7 +1027,7 @@ export const renamedMemberText = (
   member: Property,
   key: string
 ) => {
-  const list = objectList(object);
+  const list = objectList(editor, object);
   const indent = lineIndent(editor.code, member.start);
   const dedent = (start: number, end: number) => dedentSource(editor, start, end, indent);
   return itemTextWith(editor, list, list.items.indexOf(member), (start) => {
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/angular-vite-remove-compodoc.ts b/code/lib/cli-storybook/src/automigrate/fixes/angular-vite-remove-compodoc.ts
index ea3ba65692a4..05dab861c726 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/angular-vite-remove-compodoc.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/angular-vite-remove-compodoc.ts
@@ -428,7 +428,7 @@ const removePreviewWiring = (preview: ConfigFile, previewConfigPath: string): vo
   if (!result.removed) {
     manualRemovalHint(
       previewConfigPath,
-      countReferences(preview._editorSource, SET_COMPODOC_JSON) > 0
+      countReferences(preview._editor, SET_COMPODOC_JSON) > 0
         ? result.reason
         : `no ${SET_COMPODOC_JSON} call is visible here, only a documentation.json import`
     );
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/web-components-runtime-manifest.ts b/code/lib/cli-storybook/src/automigrate/fixes/web-components-runtime-manifest.ts
index 25e661b4de73..e21b7a23cd54 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/web-components-runtime-manifest.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/web-components-runtime-manifest.ts
@@ -291,7 +291,7 @@ const findManifestImports = (
 };
 
 const removeDefaultImport = (preview: ConfigFile, name: string): void => {
-  const editor = preview._editorSource;
+  const editor = preview._editor;
   const statementsToDrop = new Set<Node>();
   for (const node of editor.program.body) {
     if (node.type !== 'ImportDeclaration') {
@@ -307,7 +307,7 @@ const removeDefaultImport = (preview: ConfigFile, name: string): void => {
     }
   }
   removeStatements(editor, statementsToDrop);
-  preview._commit();
+  preview._editor.commit();
 };
 
 const removePreviewWiring = (
@@ -345,7 +345,7 @@ const removePreviewWiring = (
   }
 
   for (const [name, specifier] of keptImports) {
-    const editor = preview._editorSource;
+    const editor = preview._editor;
     // A setter call left in place already got the manual-removal hint.
     const readers = topLevelReaders(editor, name).filter(
       (node) => !SETTER_NAMES.some((setterName) => isTopLevelCall(node, setterName))
diff --git a/code/lib/cli-storybook/src/automigrate/helpers/preview-call.ts b/code/lib/cli-storybook/src/automigrate/helpers/preview-call.ts
index ceb2bdf53965..84329bd6a0c3 100644
--- a/code/lib/cli-storybook/src/automigrate/helpers/preview-call.ts
+++ b/code/lib/cli-storybook/src/automigrate/helpers/preview-call.ts
@@ -78,7 +78,7 @@ export const removeTopLevelCall = (
   preview: ConfigFile,
   { callee, calleeSources }: { callee: string; calleeSources: ReadonlySet<string> }
 ): RemoveTopLevelCallResult => {
-  const editor = preview._editorSource;
+  const editor = preview._editor;
   const callsToDrop = topLevelCalls(editor.program, callee);
   if (callsToDrop.length === 0) {
     return { removed: false, reason: `${callee} is not called at the top level` };
@@ -118,6 +118,6 @@ export const removeTopLevelCall = (
     }
   }
   removeStatements(editor, statementsToDrop);
-  preview._commit();
+  preview._editor.commit();
   return { removed: true, keptArguments };
 };
diff --git a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts
index d0fd14c6b35a..53fefa134b7d 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts
@@ -47,7 +47,7 @@ export async function configToCsfFactory(
   }
 
   const methodName = configType === 'main' ? 'defineMain' : 'definePreview';
-  const editor = config._editorSource;
+  const editor = config._editor;
   const exportDecls = config._exportDecls;
   const quote = config._quote;
 
@@ -155,7 +155,7 @@ export async function configToCsfFactory(
     const { at, text } = prependMembers(editor.code, config._exportsObject, defineConfigProps);
     editor.edits.appendRight(at, text);
     removeExportDeclarations(editor, exportDecls);
-    config._commit();
+    config._editor.commit();
     wrapDefaultExport(false);
   } else if (config._exportsObject) {
     /**
@@ -192,7 +192,7 @@ export async function configToCsfFactory(
      */
     appendStatement(editor, `export default ${methodName}({});`);
   }
-  config._commit();
+  config._editor.commit();
 
   // Check whether @storybook/framework import already exists
   const existingImport = findFrameworkImport();
@@ -210,7 +210,7 @@ export async function configToCsfFactory(
       `import { ${methodName} } from ${quote}${expectedImportSource}${quote};`
     );
   }
-  config._commit();
+  config._editor.commit();
 
   // Remove type imports – now inferred – from @storybook/* packages
   const disallowList = ['StorybookConfig', 'Preview'];
diff --git a/code/lib/codemod/src/transforms/csf-2-to-3.ts b/code/lib/codemod/src/transforms/csf-2-to-3.ts
index c1911dbc3119..23cf594812d6 100644
--- a/code/lib/codemod/src/transforms/csf-2-to-3.ts
+++ b/code/lib/codemod/src/transforms/csf-2-to-3.ts
@@ -152,6 +152,8 @@ export default async function transform(info: FileInfo, api: API, options: { par
 
   const editor = csf._editor;
   const importHelper = new StorybookImportHelper(editor);
+  // Read before the commit below, after which the stories no longer bind their templates.
+  const templates = Object.keys(csf._templates);
 
   const objectExports = new Set<string>();
   Object.entries(csf._storyExports).forEach(([key, decl]) => {
@@ -204,7 +206,7 @@ export default async function transform(info: FileInfo, api: API, options: { par
   editor.commit();
 
   upgradeDeprecatedTypes(editor);
-  removeUnusedTemplates(editor, Object.keys(csf._templates));
+  removeUnusedTemplates(editor, templates);
 
   let output = printCsf(csf).code;
 

From 43834157a53be62254558a3155aa8546339bfd8f Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Sat, 17 Oct 2026 23:02:56 +0200
Subject: [PATCH 157/326] refactor(csf-tools): one quote rule and one
 indentation rule, owned by SourceEditor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`SourceEditor.quote` took the first string literal (default `'`) while
`ConfigFile` took a majority vote (default `"`), and `preferredQuote` papered
over the disagreement. The editor now owns the one rule: the quote most string
literals use, with a tie going to the first literal. JSX attributes are left
out, since files that single-quote their code still double-quote JSX. A file
without string literals gets `"`, the default of Prettier, oxfmt and Biome,
which such a file is most likely formatted with. This changes generated
strings in story files without any string literal from `'` to `"` (one
codemod snapshot and one eslint test updated on purpose).

Indentation follows the same pattern: `indent` is the step from the file's
first multi-line block to its first item, else two spaces. `appendToList`,
`groupMembers`, `printMembers` and expanded `printValue` all use it, so a
tab-indented file no longer gets two-space lines from some edits.

Both are inferred once, from the code the editor was created with, so an edit
that removes the literals cannot flip the style mid-migration. This replaces
ConfigFile's `_inferQuotes`, `_quotes`, `_quote` and `preferredQuote`, and the
per-object `indentUnit`. Hand-built `${quote}…${quote}` strings now go through
`printString(value, editor.quote)`, including the `flat/recommended` key the
eslint setup wrote with fixed double quotes.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../vitest/src/angular-vitest-postinstall.ts  |  3 +-
 code/core/src/cli/eslintPlugin.test.ts        | 24 ++---
 code/core/src/cli/eslintPlugin.ts             |  2 +-
 .../utils/setup-addon-in-config.test.ts       |  2 +-
 .../utils/wrap-getAbsolutePath-utils.ts       |  4 +-
 .../save-story/update-args-in-csf-file.ts     |  7 +-
 .../utils/save-story/valueToSource.ts         |  6 +-
 code/core/src/csf-tools/ConfigFile.ts         | 28 +-----
 code/core/src/csf-tools/CsfObject.ts          |  6 +-
 code/core/src/csf-tools/estree/editor.test.ts | 31 ++++++-
 code/core/src/csf-tools/estree/editor.ts      | 92 +++++++++++++------
 .../codemod/helpers/config-to-csf-factory.ts  |  4 +-
 .../helpers/story-to-csf-factory.test.ts      |  2 +-
 .../codemod/helpers/story-to-csf-factory.ts   |  9 +-
 .../src/codemod/helpers/wrap-args-mocks.ts    |  3 +-
 15 files changed, 137 insertions(+), 86 deletions(-)

diff --git a/code/addons/vitest/src/angular-vitest-postinstall.ts b/code/addons/vitest/src/angular-vitest-postinstall.ts
index 6dea1a0642cf..b818b63cfa42 100644
--- a/code/addons/vitest/src/angular-vitest-postinstall.ts
+++ b/code/addons/vitest/src/angular-vitest-postinstall.ts
@@ -4,6 +4,7 @@ import {
   arrayList,
   insertAfterImports,
   prependToList,
+  printString,
   walk,
 } from 'storybook/internal/csf-tools';
 
@@ -110,7 +111,7 @@ export function injectAngularVitestIntoEditor(editor: SourceEditor): boolean {
   }
 
   if (!hasAngularVitestImport(program)) {
-    const statement = `import { ${ANGULAR_VITEST_PLUGIN_CALL} } from ${editor.quote}${ANGULAR_VITEST_IMPORT_SOURCE}${editor.quote};`;
+    const statement = `import { ${ANGULAR_VITEST_PLUGIN_CALL} } from ${printString(ANGULAR_VITEST_IMPORT_SOURCE, editor.quote)};`;
     insertAfterImports(editor, statement);
   }
   return true;
diff --git a/code/core/src/cli/eslintPlugin.test.ts b/code/core/src/cli/eslintPlugin.test.ts
index 930277eaf1be..a8f43bbd4a69 100644
--- a/code/core/src/cli/eslintPlugin.test.ts
+++ b/code/core/src/cli/eslintPlugin.test.ts
@@ -331,7 +331,7 @@ describe('configureEslintPlugin', () => {
             require.resolve('@acme/eslint-config/react'),
           ),
           cypress.configs.recommended,
-          ...storybook.configs["flat/recommended"],
+          ...storybook.configs['flat/recommended'],
         ];"
       `);
       expect(content).not.toContain('import storybook');
@@ -362,7 +362,7 @@ describe('configureEslintPlugin', () => {
 
         module.exports = [
           { rules: { 'no-console': 'error' } },
-          ...storybook.configs["flat/recommended"],
+          ...storybook.configs['flat/recommended'],
         ];"
       `);
     });
@@ -413,7 +413,7 @@ describe('configureEslintPlugin', () => {
         const storybook = require('eslint-plugin-storybook');
         const { defineConfig } = require('eslint/config');
 
-        module.exports = defineConfig([{ rules: { 'no-console': 'error' } }, ...storybook.configs["flat/recommended"]]);"
+        module.exports = defineConfig([{ rules: { 'no-console': 'error' } }, ...storybook.configs['flat/recommended']]);"
       `);
       expect(logger.warn).not.toHaveBeenCalled();
     });
@@ -433,7 +433,7 @@ describe('configureEslintPlugin', () => {
         const storybook = require('eslint-plugin-storybook');
         const tseslint = require('typescript-eslint');
 
-        module.exports = tseslint.config(tseslint.configs.recommended, storybook.configs["flat/recommended"]);"
+        module.exports = tseslint.config(tseslint.configs.recommended, storybook.configs['flat/recommended']);"
       `);
       expect(logger.warn).not.toHaveBeenCalled();
     });
@@ -449,7 +449,7 @@ describe('configureEslintPlugin', () => {
       );
 
       expect(output).toContain(
-        'export default tseslint.config(tseslint.configs.recommended, (local), storybook.configs["flat/recommended"]);'
+        "export default tseslint.config(tseslint.configs.recommended, (local), storybook.configs['flat/recommended']);"
       );
     });
 
@@ -464,7 +464,7 @@ describe('configureEslintPlugin', () => {
 
       expect(output).toMatchInlineSnapshot(`
         "const storybook = require('eslint-plugin-storybook');
-        const config = [{ rules: { 'no-console': 'error' } }, ...storybook.configs["flat/recommended"]];
+        const config = [{ rules: { 'no-console': 'error' } }, ...storybook.configs['flat/recommended']];
 
         module.exports = config;"
       `);
@@ -483,7 +483,7 @@ describe('configureEslintPlugin', () => {
       );
 
       expect(output).toContain("const _storybook = require('eslint-plugin-storybook');");
-      expect(output).toContain('..._storybook.configs["flat/recommended"]');
+      expect(output).toContain("..._storybook.configs['flat/recommended']");
     });
 
     it('preserves computed CommonJS exports and warns', async () => {
@@ -518,7 +518,7 @@ describe('configureEslintPlugin', () => {
       );
 
       expect(output).toContain("const storybook = require('eslint-plugin-storybook');");
-      expect(output).toContain('...storybook.configs["flat/recommended"]');
+      expect(output).toContain("...storybook.configs['flat/recommended']");
       expect(output).not.toContain('...nestedStorybook.configs');
     });
 
@@ -532,7 +532,7 @@ describe('configureEslintPlugin', () => {
         'eslint.config.js'
       );
 
-      expect(output).toContain("const _storybook = require('eslint-plugin-storybook');");
+      expect(output).toContain('const _storybook = require("eslint-plugin-storybook");');
       expect(output).toContain('..._storybook.configs["flat/recommended"]');
     });
 
@@ -544,7 +544,7 @@ describe('configureEslintPlugin', () => {
       const output = await configureFlatConfig(input, 'eslint.config.js');
 
       expect(output).toContain("const _storybook = require('eslint-plugin-storybook');");
-      expect(output).toContain('..._storybook.configs["flat/recommended"]');
+      expect(output).toContain("..._storybook.configs['flat/recommended']");
       await expect(configureFlatConfig(output, 'eslint.config.js')).resolves.toBe(output);
     });
 
@@ -632,7 +632,7 @@ describe('configureEslintPlugin', () => {
         import somePlugin from 'some-plugin';
         export default [
           somePlugin,
-          ...storybook.configs["flat/recommended"],
+          ...storybook.configs['flat/recommended'],
         ]"
       `);
     });
@@ -661,7 +661,7 @@ describe('configureEslintPlugin', () => {
         import storybook from 'eslint-plugin-storybook';
         import somePlugin from 'some-plugin';
         import tseslint from 'typescript-eslint';
-        export default tseslint.config(somePlugin, storybook.configs["flat/recommended"]);"
+        export default tseslint.config(somePlugin, storybook.configs['flat/recommended']);"
       `);
     });
 
diff --git a/code/core/src/cli/eslintPlugin.ts b/code/core/src/cli/eslintPlugin.ts
index 92e56bf55f3e..e7ff1eb66e66 100644
--- a/code/core/src/cli/eslintPlugin.ts
+++ b/code/core/src/cli/eslintPlugin.ts
@@ -165,7 +165,7 @@ function findConfigTarget(
 }
 
 function addStorybookConfig(editor: SourceEditor, target: ConfigTarget, localName: string) {
-  const storybookConfig = `${localName}.configs["flat/recommended"]`;
+  const storybookConfig = `${localName}.configs[${printString('flat/recommended', editor.quote)}]`;
   if (target.type === 'ArrayExpression') {
     appendToList(editor, arrayList(editor, target), [`...${storybookConfig}`], '');
   } else {
diff --git a/code/core/src/common/utils/setup-addon-in-config.test.ts b/code/core/src/common/utils/setup-addon-in-config.test.ts
index 0e91f39553bc..0c14e29ddd7b 100644
--- a/code/core/src/common/utils/setup-addon-in-config.test.ts
+++ b/code/core/src/common/utils/setup-addon-in-config.test.ts
@@ -22,7 +22,7 @@ describe('setupAddonInConfig', () => {
     vi.clearAllMocks();
 
     mockMain = {
-      _quote: "'",
+      _editor: { quote: "'" },
       getBodyDeclarations: () => [],
       getFieldNode: vi.fn(),
       appendNodeToArray: vi.fn(),
diff --git a/code/core/src/common/utils/wrap-getAbsolutePath-utils.ts b/code/core/src/common/utils/wrap-getAbsolutePath-utils.ts
index 78b2359cb822..347fe1fdd927 100644
--- a/code/core/src/common/utils/wrap-getAbsolutePath-utils.ts
+++ b/code/core/src/common/utils/wrap-getAbsolutePath-utils.ts
@@ -52,7 +52,7 @@ export function getAbsolutePathWrapperName(config: ConfigFile) {
 /** Source of a call to the config's getAbsolutePath wrapper, such as `getAbsolutePath('x')`. */
 export function getAbsolutePathCall(config: ConfigFile, value: string) {
   const wrapper = getAbsolutePathWrapperName(config) ?? PREFERRED_GET_ABSOLUTE_PATH_WRAPPER_NAME;
-  return `${wrapper}(${printString(value, config._quote)})`;
+  return `${wrapper}(${printString(value, config._editor.quote)})`;
 }
 
 // Relative paths resolve from the config dir; the wrapper's `${value}/package.json` lookup breaks them.
@@ -203,7 +203,7 @@ export function ensureNamedImport(config: ConfigFile, imported: string, source:
   }
   prependStatement(
     config._editor,
-    `import { ${imported} as ${local} } from ${printString(source, config._quote)};`
+    `import { ${imported} as ${local} } from ${printString(source, config._editor.quote)};`
   );
   config._editor.commit();
   return local;
diff --git a/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts b/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts
index 8651938d5b75..f67d8caf6573 100644
--- a/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts
+++ b/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts
@@ -33,7 +33,7 @@ export const updateArgsInCsfFile = async (
       if (!isValidIdentifier(k, false)) {
         throw new SaveStoryError(`Invalid arg name: ${JSON.stringify(k)}`);
       }
-      return [k, valueToSource(v, editor.quote)];
+      return [k, valueToSource(v, editor)];
     })
   );
 
@@ -70,7 +70,10 @@ export const updateArgsInCsfFile = async (
 
   if (!argsProperty) {
     prependMembers(editor, story, [
-      `args: ${printMembers(Object.entries(args).map(([key, value]) => `${key}: ${value}`))}`,
+      `args: ${printMembers(
+        Object.entries(args).map(([key, value]) => `${key}: ${value}`),
+        editor.indent
+      )}`,
     ]);
     return;
   }
diff --git a/code/core/src/core-server/utils/save-story/valueToSource.ts b/code/core/src/core-server/utils/save-story/valueToSource.ts
index db0bc853be69..04a43b6468bc 100644
--- a/code/core/src/core-server/utils/save-story/valueToSource.ts
+++ b/code/core/src/core-server/utils/save-story/valueToSource.ts
@@ -23,5 +23,7 @@ const withoutUndefined = (value: unknown): unknown => {
 };
 
 /** Print an arg value as source, with objects expanded one member per line. */
-export const valueToSource = (value: unknown, quote = '"'): string =>
-  printValue(withoutUndefined(value), quote, { expanded: true });
+export const valueToSource = (
+  value: unknown,
+  { quote, indent }: { quote: string; indent: string } = { quote: '"', indent: '  ' }
+): string => printValue(withoutUndefined(value), quote, { indent });
diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index cf81ec3b0704..6bc6dfb6b402 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -355,8 +355,6 @@ export class ConfigFile implements CsfObject {
 
   _exportsObject: E.ObjectExpression | undefined;
 
-  _quotes: 'single' | 'double' | undefined;
-
   fileName?: string;
 
   hasDefaultExport = false;
@@ -412,8 +410,6 @@ export class ConfigFile implements CsfObject {
   };
 
   parse() {
-    // Read before any edit: a mutation may remove the string literals the style is inferred from.
-    this._editor.preferredQuote = this._quote;
     walk(this._program, (node, parent) => {
       const isTopLevel = parent?.type === 'Program';
       if (node.type === 'ExportDefaultDeclaration') {
@@ -777,26 +773,8 @@ export class ConfigFile implements CsfObject {
     }
   }
 
-  _inferQuotes() {
-    if (!this._quotes) {
-      const occurrences = { "'": 0, '"': 0 };
-      walk(this._program, (node) => {
-        const raw = isStringLiteral(node) ? node.raw : undefined;
-        if (typeof raw === 'string' && (raw[0] === "'" || raw[0] === '"')) {
-          occurrences[raw[0] as "'" | '"'] += 1;
-        }
-      });
-      this._quotes = occurrences["'"] > occurrences['"'] ? 'single' : 'double';
-    }
-    return this._quotes;
-  }
-
-  get _quote() {
-    return this._inferQuotes() === 'single' ? "'" : '"';
-  }
-
   valueToNode(value: any): CsfExpression | undefined {
-    return parseExpression(printValue(value, this._quote));
+    return parseExpression(printValue(value, this._editor.quote));
   }
 
   getBodyDeclarations(): Node[] {
@@ -878,7 +856,7 @@ export class ConfigFile implements CsfObject {
           .arguments[0] as E.StringLiteral
       ).value;
     }
-    const source = printString(fromImport, this._quote);
+    const source = printString(fromImport, this._editor.quote);
     const editor = this._editor;
 
     // if the import specifier is a string, we're dealing with default imports
@@ -956,7 +934,7 @@ export class ConfigFile implements CsfObject {
       fromImport = importDeclaration.source.value;
     }
     const editor = this._editor;
-    const source = printString(fromImport, this._quote);
+    const source = printString(fromImport, this._editor.quote);
     const has = (type: string, name?: string) =>
       !!importDeclaration?.specifiers.some(
         (specifier) =>
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index 8561ec4171b2..e060f19e7618 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -14,7 +14,6 @@ import {
   type SourceEditor,
   appendMembers,
   groupMembers,
-  indentUnit,
   isSpan,
   keySource,
   prependMembers,
@@ -839,8 +838,7 @@ class CsfObjectEditor implements CsfObject {
   // Parents may not exist yet; the caller has validated the path.
   private insert(path: readonly string[], members: MemberInsert[]) {
     let parent = this.root();
-    const quote = this.editor.quote;
-    const unit = indentUnit(this.editor.code, parent.node);
+    const { quote, indent } = this.editor;
     for (const [index, name] of path.slice(0, -1).entries()) {
       const lookup = lookupProperty(parent.properties, name);
       if (lookup.ok === false) {
@@ -851,7 +849,7 @@ class CsfObjectEditor implements CsfObject {
         // Comments travel with moved members; a line comment needs the object to span lines.
         const multiline = members.some((member) => member.text.includes('\n'));
         const block = (texts: string[]) =>
-          multiline ? printMembers(texts, unit) : `{ ${texts.join(', ')} }`;
+          multiline ? printMembers(texts, indent) : `{ ${texts.join(', ')} }`;
         const nested = missing
           .slice(1)
           .reverse()
diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index ae3931b92f3e..3a364dc02346 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -131,6 +131,35 @@ describe('commit', () => {
   });
 });
 
+describe('style', () => {
+  it('quotes like most string literals, leaving JSX attributes out', () => {
+    expect(new SourceEditor('import a from \'a\';\nconst x = <A b="1" c="2" />;').quote).toBe("'");
+    expect(new SourceEditor("const a = \"a\";\nconst b = 'b';\nconst c = 'c';").quote).toBe("'");
+  });
+
+  it('breaks a tie with the first literal and defaults to double quotes', () => {
+    expect(new SourceEditor('const a = "a";\nconst b = \'b\';').quote).toBe('"');
+    expect(new SourceEditor('const a = 1;').quote).toBe('"');
+  });
+
+  it('keeps the style of the code it was created with after a commit', () => {
+    const editor = new SourceEditor("const a = 'a';\n");
+    editor.edits.overwrite(10, 13, '1');
+    editor.commit();
+    expect(editor.quote).toBe("'");
+  });
+
+  it('indents generated lines with the step of the first multi-line block', () => {
+    const editor = new SourceEditor('const a = {\n\tb: 1,\n};\nconst c = [];\n');
+    const array = (editor.program.body[1] as E.VariableDeclaration).declarations[0]
+      .init as E.ArrayExpression;
+    appendToList(editor, arrayList(editor, array), ['{\n\td: 1,\n}']);
+    expect(editor.toString()).toBe(
+      'const a = {\n\tb: 1,\n};\nconst c = [\n\t{\n\t\td: 1,\n\t},\n];\n'
+    );
+  });
+});
+
 describe('parenthesized array elements', () => {
   it('appends after a comma expression and removes a doubly parenthesized one whole', () => {
     const editor = new SourceEditor(`export default { addons: [(a, b)] };`);
@@ -804,7 +833,7 @@ describe('tab-indented files', () => {
 
 describe('printMembers', () => {
   it('leaves the template literal of a function value alone', () => {
-    expect(printMembers(['fn: () => {\n  return `a\nb`;\n}'])).toBe(
+    expect(printMembers(['fn: () => {\n  return `a\nb`;\n}'], '  ')).toBe(
       '{\n  fn: () => {\n    return `a\nb`;\n  },\n}'
     );
   });
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 6f353c302726..8b5c8863b523 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -7,6 +7,7 @@ import {
   type ParsedModule,
   type Property,
   isNode,
+  isStringLiteral,
   isValidIdentifier,
   moduleOf,
   normalizeLineEndings,
@@ -70,6 +71,8 @@ export class SourceEditor {
 
   readonly _onCommit: (() => void) | undefined;
 
+  _style: Style | undefined;
+
   constructor(code: string, fileName?: string, onCommit?: () => void) {
     this.fileName = fileName;
     this._onCommit = onCommit;
@@ -145,6 +148,7 @@ export class SourceEditor {
     if (!this.pending) {
       return false;
     }
+    this._style ??= inferStyle(this._module);
     this._committed.push(
       this._edits.generateMap({ hires: true, includeContent: true, source: mapSource(this) })
     );
@@ -213,19 +217,62 @@ export class SourceEditor {
     return this._edits.toString();
   }
 
-  /** Quote for generated strings, overriding the inferred one. */
-  preferredQuote: "'" | '"' | undefined;
+  /** Quote for generated strings: the one most string literals of the file use. */
+  get quote() {
+    this._style ??= inferStyle(this._module);
+    return this._style.quote;
+  }
 
-  /** Quote for generated strings; defaults to the style of the first string literal. */
-  get quote(): "'" | '"' {
-    if (this.preferredQuote) {
-      return this.preferredQuote;
-    }
-    const match = /(?:^|[\s,:([{=])(['"])/.exec(this.code);
-    return match?.[1] === '"' ? '"' : "'";
+  /** Indent step for generated lines: the one of the file's first multi-line block. */
+  get indent() {
+    this._style ??= inferStyle(this._module);
+    return this._style.indent;
   }
 }
 
+type Style = { quote: "'" | '"'; indent: string };
+
+// The style of the code the editor was created with, so edits do not change it. A tie between
+// quotes goes to the first literal; JSX attributes are left out, as they keep double quotes.
+const inferStyle = ({ code, program }: ParsedModule): Style => {
+  const counts = { "'": 0, '"': 0 };
+  let first: "'" | '"' | undefined;
+  let indent: string | undefined;
+  walk(program, (node, parent) => {
+    if (isStringLiteral(node) && parent?.type !== 'JSXAttribute') {
+      const quote = node.raw?.[0];
+      if (quote === "'" || quote === '"') {
+        counts[quote]++;
+        first ??= quote;
+      }
+    }
+    indent ??= blockIndent(code, node);
+  });
+  const quote =
+    counts["'"] === counts['"'] ? (first ?? '"') : counts["'"] > counts['"'] ? "'" : '"';
+  return { quote, indent: indent ?? '  ' };
+};
+
+// The indent step from a block's line to the line of its first item, if that is a deeper one.
+const blockIndent = (code: string, node: Node) => {
+  const first =
+    node.type === 'ObjectExpression'
+      ? node.properties[0]
+      : node.type === 'ArrayExpression'
+        ? node.elements[0]
+        : node.type === 'BlockStatement'
+          ? node.body[0]
+          : undefined;
+  if (!first || !code.slice(node.start, first.start).includes('\n')) {
+    return undefined;
+  }
+  const outer = lineIndent(code, node.start);
+  const inner = lineIndent(code, first.start);
+  return inner.length > outer.length && inner.startsWith(outer)
+    ? inner.slice(outer.length)
+    : undefined;
+};
+
 export const printKey = (name: string, quote: string) =>
   isValidIdentifier(name, false) ? name : printString(name, quote);
 
@@ -237,16 +284,16 @@ export const printString = (value: string, quote: string) => {
 };
 
 /** An object literal laid out one member per line, so formatters keep it expanded. */
-export const printMembers = (members: string[], unit = '  ') =>
+export const printMembers = (members: string[], indent: string) =>
   members.length === 0
     ? '{}'
-    : `{\n${members.map((member) => `${unit}${reindent(member, '', unit)},`).join('\n')}\n}`;
+    : `{\n${members.map((member) => `${indent}${reindent(member, '', indent)},`).join('\n')}\n}`;
 
-/** Print a JS value as source. `expanded` lays objects out one member per line. */
+/** Print a JS value as source. With an `indent`, objects are laid out one member per line. */
 export const printValue = (
   value: unknown,
   quote: string,
-  options: { expanded?: boolean } = {}
+  options: { indent?: string } = {}
 ): string => {
   if (value === undefined) {
     return 'undefined';
@@ -286,8 +333,8 @@ export const printValue = (
     const members = Object.entries(value as Record<string, unknown>).map(
       ([key, item]) => `${printKey(key, quote)}: ${printValue(item, quote, options)}`
     );
-    if (options.expanded) {
-      return printMembers(members);
+    if (options.indent) {
+      return printMembers(members, options.indent);
     }
     return members.length === 0 ? '{}' : `{ ${members.join(', ')} }`;
   }
@@ -440,17 +487,6 @@ const separatorAfter = (editor: SourceEditor, item: Span) => {
 export const lineIndent = (code: string, index: number) =>
   /^[ \t]*/.exec(code.slice(lineStart(code, index)))![0];
 
-/** Indent step of the file: from an object's line to its first member's, else two spaces. */
-export const indentUnit = (code: string, object: E.ObjectExpression | undefined) => {
-  const first = object?.properties[0];
-  if (!object || !first || !code.slice(object.start, first.start).includes('\n')) {
-    return '  ';
-  }
-  const outer = lineIndent(code, object.start);
-  const inner = lineIndent(code, first.start);
-  return inner.length > outer.length && inner.startsWith(outer) ? inner.slice(outer.length) : '  ';
-};
-
 const isMultiline = (code: string, list: List) => code.slice(list.open, list.close).includes('\n');
 
 // Spans of the literals under `root` whose line breaks are part of their value: strings, regexes
@@ -600,7 +636,7 @@ export const appendToList = (
     if ((inner.includes('\n') && inner.trim()) || texts.some((text) => text.includes('\n'))) {
       // Multi-line items, or only comments inside: lay the items out one per line.
       const outer = lineIndent(code, list.open - 1);
-      const indent = `${outer}  `;
+      const indent = `${outer}${editor.indent}`;
       const lead = inner.trim() ? '' : '\n';
       if (!inner.trim() && list.close > list.open) {
         edits.remove(list.open, list.close);
@@ -726,7 +762,7 @@ export const groupMembers = (
   const { start } = members[0];
   const indent = /[ \t]*$/.exec(editor.code.slice(lineStart(editor.code, start), start))![0];
   const inner = multiline
-    ? reindent(printMembers(texts, indentUnit(editor.code, object)), '', indent)
+    ? reindent(printMembers(texts, editor.indent), '', indent)
     : `{ ${texts.join(', ')} }`;
   // The comments of the first member move into the group with it.
   const lead = multiline ? `\n${indent}` : ' ';
diff --git a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts
index 53fefa134b7d..467632f77763 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts
@@ -5,6 +5,7 @@ import {
   type ESTreeNode as Node,
   loadConfig,
   printConfig,
+  printString,
   removeStatements,
   setImportSpecifiers,
   prependStatement,
@@ -49,7 +50,6 @@ export async function configToCsfFactory(
   const methodName = configType === 'main' ? 'defineMain' : 'definePreview';
   const editor = config._editor;
   const exportDecls = config._exportDecls;
-  const quote = config._quote;
 
   const defineConfigProps = getConfigProperties(editor, exportDecls, { configType });
   const hasNamedExports = defineConfigProps.length > 0;
@@ -207,7 +207,7 @@ export async function configToCsfFactory(
     // if not, add import { defineMain } from '@storybook/framework'
     prependStatement(
       editor,
-      `import { ${methodName} } from ${quote}${expectedImportSource}${quote};`
+      `import { ${methodName} } from ${printString(expectedImportSource, editor.quote)};`
     );
   }
   config._editor.commit();
diff --git a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
index 066f99e5a688..875caaf66b63 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
@@ -476,7 +476,7 @@ describe('stories codemod', () => {
           )
         )
       ).resolves.toMatchInlineSnapshot(`
-        import preview from '../.rnstorybook/preview';
+        import preview from "../.rnstorybook/preview";
         const meta = preview.meta({});
         export const A = meta.story();
       `);
diff --git a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
index 1a8159646945..14bceb0cfdde 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
@@ -4,6 +4,7 @@ import {
   isValidPreviewPath,
   loadCsf,
   printCsf,
+  printString,
   outerSpan,
   walk,
   removeStatements,
@@ -109,7 +110,6 @@ export async function storyToCsfFactory(
 
   const editor = csf._editor;
   const { program, scopes } = editor;
-  const quote = editor.quote;
 
   // Check if a root-level constant named 'preview' exists
   const hasRootLevelConfig = program.body.some(
@@ -452,11 +452,14 @@ export async function storyToCsfFactory(
       editor.edits.overwrite(
         previewImport.source.start,
         previewImport.source.end,
-        `${quote}${previewPath}${quote}`
+        printString(previewPath, editor.quote)
       );
     }
   } else if (hasMeta) {
-    prependStatement(editor, `import ${sbConfigImportName} from ${quote}${previewPath}${quote};`);
+    prependStatement(
+      editor,
+      `import ${sbConfigImportName} from ${printString(previewPath, editor.quote)};`
+    );
   }
 
   editor.commit();
diff --git a/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.ts b/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.ts
index 785fca0faa18..9c6518ca5c4e 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.ts
@@ -5,6 +5,7 @@ import {
   type SourceEditor,
   generateUid,
   insertAfterImports,
+  printString,
   walk,
   setImportSpecifiers,
 } from 'storybook/internal/csf-tools';
@@ -207,7 +208,7 @@ export function wrapArgsMocks(editor: SourceEditor) {
     } else {
       insertAfterImports(
         editor,
-        `import { ${specifier} } from ${editor.quote}storybook/test${editor.quote};`
+        `import { ${specifier} } from ${printString('storybook/test', editor.quote)};`
       );
     }
   }

From 6e187a7d34ccf82be5826265dd2eef74aea21ff6 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Sat, 17 Oct 2026 23:11:25 +0200
Subject: [PATCH 158/326] refactor(csf-tools): lists own their layout

Adding the first item to an empty one-line list overwrote everything between
its delimiters, so `{ /* todo */ }` lost its comment. The items now go after
the comments that are there.

Every caller passed the padding of a one-line list (`''` for arrays, `' '` for
objects) at every call. It belongs to the list, so the constructors set
`List.padding` and the parameter is gone.

Items added to a one-line list now get their continuation lines indented like
the list's line, as they already did in multi-line lists, which makes
addon-vitest's `appendItems` workaround unnecessary. The template project
prepended to a one-line `projects` array is indented accordingly (snapshots
updated on purpose).

addon-vitest copied each template statement up to the start of the next one,
taking the next statement's leading comments along: the template's
"More info" comment above `export default` landed after the inserted imports.
`statementSpan` gives a statement with the comments it owns, the span
`removeStatement` removes, and the copy now uses it (snapshots updated on
purpose).

`argumentList` and `declaratorList` join the list constructors and replace the
hand-built lists in the eslint setup, ConfigObject and csf-2-to-3. The former
finds the `(` past type arguments, `?.` and comments, where a text search for
`(` could land inside a comment.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../vitest/src/angular-vitest-postinstall.ts  |  11 +-
 .../src/updateVitestFile.config.4.test.ts     | 102 ------------------
 .../src/updateVitestFile.statements.test.ts   |  38 ++++---
 code/addons/vitest/src/updateVitestFile.ts    |  38 ++-----
 code/core/src/cli/eslintPlugin.ts             |   9 +-
 code/core/src/csf-tools/ConfigFile.ts         |   2 +-
 code/core/src/csf-tools/ConfigObject.ts       |  12 +--
 code/core/src/csf-tools/estree/editor.test.ts |  69 ++++++++++--
 code/core/src/csf-tools/estree/editor.ts      |  94 ++++++++++------
 code/core/src/csf-tools/index.ts              |   3 +
 code/lib/codemod/src/transforms/csf-2-to-3.ts |  10 +-
 11 files changed, 169 insertions(+), 219 deletions(-)

diff --git a/code/addons/vitest/src/angular-vitest-postinstall.ts b/code/addons/vitest/src/angular-vitest-postinstall.ts
index b818b63cfa42..c3040f0edc02 100644
--- a/code/addons/vitest/src/angular-vitest-postinstall.ts
+++ b/code/addons/vitest/src/angular-vitest-postinstall.ts
@@ -100,14 +100,9 @@ export function injectAngularVitestIntoEditor(editor: SourceEditor): boolean {
 
   const bridge = new Set([ANGULAR_VITEST_PLUGIN_CALL]);
   if (!pluginsArray.elements.some((element) => isCallTo(element, bridge))) {
-    prependToList(
-      editor,
-      arrayList(editor, pluginsArray),
-      [
-        `// Forwards Angular build options (styles, assets, zoneless, …) into standalone vitest runs\n${ANGULAR_VITEST_PLUGIN_CALL}({})`,
-      ],
-      ''
-    );
+    prependToList(editor, arrayList(editor, pluginsArray), [
+      `// Forwards Angular build options (styles, assets, zoneless, …) into standalone vitest runs\n${ANGULAR_VITEST_PLUGIN_CALL}({})`,
+    ]);
   }
 
   if (!hasAngularVitestImport(program)) {
diff --git a/code/addons/vitest/src/updateVitestFile.config.4.test.ts b/code/addons/vitest/src/updateVitestFile.config.4.test.ts
index 68c1e511767a..8a4ab1a4fd26 100644
--- a/code/addons/vitest/src/updateVitestFile.config.4.test.ts
+++ b/code/addons/vitest/src/updateVitestFile.config.4.test.ts
@@ -63,10 +63,6 @@ describe('updateConfigFile', () => {
       + import { playwright } from '@vitest/browser-playwright';
       + 
         
-        
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-      + 
-      + 
               // https://vite.dev/config/
               export default defineConfig({
                 plugins: [react()],
@@ -141,10 +137,6 @@ describe('updateConfigFile', () => {
       + import { playwright } from '@vitest/browser-playwright';
       + 
         
-        
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-      + 
-      + 
               // https://vite.dev/config/
               export default {
                 plugins: [react()],
@@ -227,10 +219,6 @@ describe('updateConfigFile', () => {
       + import { playwright } from '@vitest/browser-playwright';
       + 
         
-        
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-      + 
-      + 
               // https://vitejs.dev/config/
               export default defineConfig(({ mode }) => {
                 return {
@@ -369,10 +357,6 @@ describe('updateConfigFile', () => {
       + import { playwright } from '@vitest/browser-playwright';
       + 
         
-        
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-      + 
-      + 
               // https://vite.dev/config/
               export default defineConfig({
                 plugins: [react()],
@@ -448,10 +432,6 @@ b'],
       + import { playwright } from '@vitest/browser-playwright';
       + 
         
-        
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-      + 
-      + 
               export default defineConfig({
                 test: {
         
@@ -541,14 +521,9 @@ b'],
       + import { playwright } from '@vitest/browser-playwright';
       + 
         
-        
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-      + 
-      + 
               const config = defineConfig({
                 resolve: {
                   preserveSymlinks: true,
-                  alias: {
       ...
                 plugins: [
                   viteReact(),
@@ -625,10 +600,6 @@ b'],
       + import { playwright } from '@vitest/browser-playwright';
       + 
         
-        
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-      + 
-      + 
               // https://vite.dev/config/
               export default defineConfig({
                 plugins: [react()],
@@ -702,10 +673,6 @@ b'],
       + import { playwright } from '@vitest/browser-playwright';
       + 
         
-        
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-      + 
-      + 
               // https://vite.dev/config/
               export default defineConfig({
                 plugins: [react()],
@@ -783,10 +750,6 @@ b'],
       + import { playwright } from '@vitest/browser-playwright';
       + 
         
-        
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-      + 
-      + 
               // https://vite.dev/config/
               export default defineConfig({
                 plugins: [react()],
@@ -863,10 +826,6 @@ b'],
       + import { playwright } from '@vitest/browser-playwright';
       + 
         
-        
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-      + 
-      + 
               export default mergeConfig(
                 viteConfig,
                 defineConfig({
@@ -951,10 +910,6 @@ b'],
       + import { playwright } from '@vitest/browser-playwright';
       + 
         
-        
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-      + 
-      + 
               export default mergeConfig(
                 viteConfig,
                 {
@@ -1036,10 +991,6 @@ b'],
       + import { playwright } from '@vitest/browser-playwright';
       + 
         
-        
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-      + 
-      + 
               export default mergeConfig(
                 viteConfig,
                 defineConfig({
@@ -1116,10 +1067,6 @@ b'],
       + import { playwright } from '@vitest/browser-playwright';
       + 
         
-        
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-      + 
-      + 
               // https://vite.dev/config/
               export default mergeConfig(
                 viteConfig,
@@ -1211,14 +1158,9 @@ b'],
       + import { playwright } from '@vitest/browser-playwright';
       + 
         
-        
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-      + 
-      + 
               export default mergeConfig(
                 viteConfig,
                 defineConfig({
-                  test: {
       ...
                         extends: "./vite.config.ts",
                         test: { name: "server" },
@@ -1299,10 +1241,6 @@ b'],
       + import { playwright } from '@vitest/browser-playwright';
       + 
         
-        
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-      + 
-      + 
               export default mergeConfig(
                 viteConfig,
                 defineConfig({
@@ -1403,10 +1341,6 @@ b'],
       + import { playwright } from '@vitest/browser-playwright';
       + 
         
-        
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-      + 
-      + 
               export default mergeConfig(
                 viteConfig,
                 defineConfig({
@@ -1493,10 +1427,6 @@ b'],
       + import { playwright } from '@vitest/browser-playwright';
       + 
         
-        
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-      + 
-      + 
               export default defineConfig(mergeConfig(viteConfig, {
                 test: {
         
@@ -1577,10 +1507,6 @@ b'],
       + import { playwright } from '@vitest/browser-playwright';
       + 
         
-        
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-      + 
-      + 
               export default defineConfig(
                 mergeConfig(viteConfig, {
                   test: {
@@ -1662,10 +1588,6 @@ b'],
       + import { playwright } from '@vitest/browser-playwright';
       + 
         
-        
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-      + 
-      + 
               export default mergeConfig(viteConfig, {
                 test: {
         
@@ -1743,10 +1665,6 @@ b'],
       + import { playwright } from '@vitest/browser-playwright';
       + 
         
-        
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-      + 
-      + 
               const test = {
                 name: 'node',
                 environment: 'happy-dom',
@@ -1830,10 +1748,6 @@ b'],
       + import { playwright } from '@vitest/browser-playwright';
       + 
         
-        
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-      + 
-      + 
               const config = mergeConfig(
                 viteConfig,
                 defineConfig({
@@ -1913,10 +1827,6 @@ b'],
       + import { playwright } from '@vitest/browser-playwright';
       + 
         
-        
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-      + 
-      + 
               export default defineProject({
                 test: {
         
@@ -1996,8 +1906,6 @@ b'],
       + import path from 'node:path';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + 
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
           
                 export const config = mergeConfig(
@@ -2081,8 +1989,6 @@ b'],
       + import { defineConfig } from 'vitest/config';
       + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       + import { playwright } from '@vitest/browser-playwright';
-      + 
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
           
                 export const vitestConfig = {
@@ -2166,10 +2072,6 @@ b'],
       + import { playwright } from '@vitest/browser-playwright';
       + 
         
-        
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-      + 
-      + 
               const vitestConfig = {
                 test: {
         
@@ -2391,10 +2293,6 @@ b'],
       + import { playwright } from '@vitest/browser-playwright';
       + 
         
-        
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-      + 
-      + 
               export default mergeConfig(
                 viteConfig,
                 defineConfig({
diff --git a/code/addons/vitest/src/updateVitestFile.statements.test.ts b/code/addons/vitest/src/updateVitestFile.statements.test.ts
index 0e88e6234bee..936b40f4d288 100644
--- a/code/addons/vitest/src/updateVitestFile.statements.test.ts
+++ b/code/addons/vitest/src/updateVitestFile.statements.test.ts
@@ -44,9 +44,9 @@ describe('updateConfigFile statements', () => {
       const x = 1
       export default defineConfig({ test: {
         projects: [{
-      extends: true,
-      test: {},
-      }, { extends: true, test: { name: 'storybook' } }],
+          extends: true,
+          test: {},
+        }, { extends: true, test: { name: 'storybook' } }],
       } })
       "
     `);
@@ -66,9 +66,9 @@ describe('updateConfigFile statements', () => {
       const dirname = fileURLToPath(new URL('.', import.meta.url));
       export default defineConfig({ test: {
         projects: [{
-      extends: true,
-      test: {},
-      }, { extends: true, test: { name: 'storybook' } }],
+          extends: true,
+          test: {},
+        }, { extends: true, test: { name: 'storybook' } }],
       } })"
     `);
   });
@@ -87,9 +87,9 @@ describe('updateConfigFile statements', () => {
       const dirname = fileURLToPath(new URL('.', import.meta.url));
       export default defineConfig({ test: {
         projects: [{
-      extends: true,
-      test: {},
-      }, { extends: true, test: { name: 'storybook' } }],
+          extends: true,
+          test: {},
+        }, { extends: true, test: { name: 'storybook' } }],
       } })
       "
     `);
@@ -111,9 +111,9 @@ describe('updateConfigFile statements', () => {
        */
       export default defineConfig({ test: {
         projects: [{
-      extends: true,
-      test: {},
-      }, { extends: true, test: { name: 'storybook' } }],
+          extends: true,
+          test: {},
+        }, { extends: true, test: { name: 'storybook' } }],
       } })
       "
     `);
@@ -132,9 +132,9 @@ describe('updateConfigFile statements', () => {
       const dirname = fileURLToPath(new URL('.', import.meta.url));
       export default defineConfig({ test: {
         projects: [{
-      extends: true,
-      test: {},
-      }, { extends: true, test: { name: 'storybook' } }],
+          extends: true,
+          test: {},
+        }, { extends: true, test: { name: 'storybook' } }],
       } })
       "
     `);
@@ -146,9 +146,9 @@ describe('updateConfigFile statements', () => {
     expect(code).toMatchInlineSnapshot(`
       "export default defineConfig({ test: {
         projects: [{
-      extends: true,
-      test: {},
-      }, { extends: true, test: { name: 'storybook' } }],
+          extends: true,
+          test: {},
+        }, { extends: true, test: { name: 'storybook' } }],
       } })
       import react from 'x'
       import { fileURLToPath } from 'node:url';
@@ -301,8 +301,6 @@ describe('updateConfigFile statements', () => {
       import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       import { playwright } from '@vitest/browser-playwright';
 
-      // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-
       export default defineConfig({
         plugins: [react()],
         resolve: { alias: { '@': path.resolve(import.meta.dirname, 'src') } },
diff --git a/code/addons/vitest/src/updateVitestFile.ts b/code/addons/vitest/src/updateVitestFile.ts
index 0d7e0f3da54b..cee98d8b4d72 100644
--- a/code/addons/vitest/src/updateVitestFile.ts
+++ b/code/addons/vitest/src/updateVitestFile.ts
@@ -19,6 +19,7 @@ import {
   reindent,
   objectList,
   prependToList,
+  statementSpan,
 } from 'storybook/internal/csf-tools';
 
 import { normalize } from 'pathe';
@@ -76,23 +77,6 @@ const elementTexts = (editor: SourceEditor, array: E.ArrayExpression) =>
 
 const indent = (text: string, prefix: string) => prefix + reindent(text, '', prefix);
 
-// `appendToList` re-indents multi-line items only when the list itself spans lines.
-const appendItems = (
-  editor: SourceEditor,
-  list: ReturnType<typeof arrayList>,
-  texts: string[],
-  padding?: string
-) => {
-  const inline = list.items.length > 0 && !editor.code.slice(list.open, list.close).includes('\n');
-  const continuation = `\n${lineIndent(editor.code, list.open)}`;
-  appendToList(
-    editor,
-    list,
-    inline ? texts.map((text) => text.replaceAll('\n', continuation)) : texts,
-    padding
-  );
-};
-
 // Nested objects are merged, arrays concatenated, other values overwritten.
 const mergeProperties = (
   { source, target }: Merge,
@@ -116,7 +100,7 @@ const mergeProperties = (
     if (sourceValue.type === 'ObjectExpression' && targetValue.type === 'ObjectExpression') {
       mergeProperties({ source, target }, sourceValue, targetValue);
     } else if (sourceValue.type === 'ArrayExpression' && targetValue.type === 'ArrayExpression') {
-      appendItems(target, arrayList(target, targetValue), elementTexts(source, sourceValue), '');
+      appendToList(target, arrayList(target, targetValue), elementTexts(source, sourceValue));
     } else if (targetProp.shorthand) {
       target.edits.overwrite(
         targetProp.start,
@@ -128,7 +112,7 @@ const mergeProperties = (
     }
   }
   if (appended.length > 0) {
-    appendItems(target, objectList(target, into), appended);
+    appendToList(target, objectList(target, into), appended);
   }
 };
 
@@ -144,11 +128,10 @@ const appendToExistingProjects = (
     const templateTestObject = templateTest.value;
     const templateProjects = templateTestObject.properties.find(isProjectsArrayProp);
     if (templateProjects) {
-      appendItems(
+      appendToList(
         merge.target,
         arrayList(merge.target, existingProjects),
-        elementTexts(merge.source, templateProjects.value),
-        ''
+        elementTexts(merge.source, templateProjects.value)
       );
     }
     const existingNames = new Set(testObject.properties.map(keyName));
@@ -157,7 +140,7 @@ const appendToExistingProjects = (
       return name !== undefined && name !== 'projects' && !existingNames.has(name);
     });
     if (added.length > 0) {
-      appendItems(
+      appendToList(
         merge.target,
         objectList(merge.target, testObject),
         memberTexts(merge.source, templateTestObject, added)
@@ -230,7 +213,7 @@ const wrapTestConfigAsProject = (
     .join('');
   const project = `{\n  extends: true,\n  test: {${projectTest}${projectTest ? '\n  ' : ''}},\n}`;
 
-  prependToList(source, arrayList(source, templateProjects.value), [project], '');
+  prependToList(source, arrayList(source, templateProjects.value), [project]);
   if (hoisted.length > 0) {
     prependToList(
       source,
@@ -340,14 +323,13 @@ const hasConflictingBinding = (source: SourceEditor, target: SourceEditor, at: E
   });
 };
 
-// Template imports and variables the target lacks, each with the comments that follow it.
+// Template imports and variables the target lacks, each with the comments it owns.
 const missingStatements = (source: SourceEditor, target: SourceEditor) => {
-  const { body } = source.program;
   // Any top-level binding counts, so a name the config declares in another form is not declared
   // a second time.
   const declared = (name: string) => target.scopes.program.bindings.has(name);
-  return body.flatMap((node, index) => {
-    const text = source.code.slice(node.start, body[index + 1]?.start ?? source.code.length).trim();
+  return source.program.body.flatMap((node) => {
+    const text = source.source(statementSpan(source, node));
     if (node.type === 'ImportDeclaration') {
       const name = node.specifiers[0]?.local.name;
       return name && !declared(name) ? [text] : [];
diff --git a/code/core/src/cli/eslintPlugin.ts b/code/core/src/cli/eslintPlugin.ts
index e7ff1eb66e66..7657a8eccfa3 100644
--- a/code/core/src/cli/eslintPlugin.ts
+++ b/code/core/src/cli/eslintPlugin.ts
@@ -7,11 +7,11 @@ import {
   type ESTreeNode as Node,
   SourceEditor,
   appendToList,
+  argumentList,
   arrayList,
   generateUid,
   importedName,
   isStringLiteral,
-  outerSpan,
   prependStatement,
   printString,
   readConfig,
@@ -167,12 +167,9 @@ function findConfigTarget(
 function addStorybookConfig(editor: SourceEditor, target: ConfigTarget, localName: string) {
   const storybookConfig = `${localName}.configs[${printString('flat/recommended', editor.quote)}]`;
   if (target.type === 'ArrayExpression') {
-    appendToList(editor, arrayList(editor, target), [`...${storybookConfig}`], '');
+    appendToList(editor, arrayList(editor, target), [`...${storybookConfig}`]);
   } else {
-    const open = editor.code.indexOf('(', target.callee.end) + 1;
-    // An argument's item spans the parentheses around it.
-    const items = target.arguments.map(outerSpan);
-    appendToList(editor, { open, close: target.end - 1, items }, [storybookConfig]);
+    appendToList(editor, argumentList(editor, target), [storybookConfig]);
   }
 }
 
diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index 6bc6dfb6b402..b6db182ac911 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -734,7 +734,7 @@ export class ConfigFile implements CsfObject {
     if (!current) {
       this.set(path, parseExpression(`[${source}]`));
     } else if (current.type === 'ArrayExpression') {
-      appendToList(this._editor, arrayList(this._editor, current), [source], '');
+      appendToList(this._editor, arrayList(this._editor, current), [source]);
       this._editor.commit();
     } else {
       throw new Error(`Expected array at '${path.join('.')}', got '${current.type}'`);
diff --git a/code/core/src/csf-tools/ConfigObject.ts b/code/core/src/csf-tools/ConfigObject.ts
index 4f46fb56b4d9..7329c7ce4360 100644
--- a/code/core/src/csf-tools/ConfigObject.ts
+++ b/code/core/src/csf-tools/ConfigObject.ts
@@ -23,6 +23,7 @@ import {
   type List,
   type SourceEditor,
   appendStatement,
+  declaratorList,
   printKey,
   printString,
   removeFromList,
@@ -324,12 +325,6 @@ export const locateConfigRoot = (
   return { ok: true, root: namedExportsRoot(editor, entries) };
 };
 
-const declaratorList = (statement: E.VariableDeclaration): List => ({
-  open: statement.start + statement.kind.length,
-  close: statement.declarations.at(-1)!.end,
-  items: statement.declarations,
-});
-
 const exportedName = (node: E.ModuleExportName) =>
   node.type === 'Identifier' ? node.name : (node as E.StringLiteral).value;
 
@@ -382,7 +377,10 @@ const namedExportsRoot = (editor: SourceEditor, entries: NamedEntry[]): ObjectRo
         }
       : {
           statement: exportStatement ?? statement,
-          list: statement.type === 'VariableDeclaration' ? declaratorList(statement) : undefined,
+          list:
+            statement.type === 'VariableDeclaration'
+              ? declaratorList(editor, statement)
+              : undefined,
           item: declaration,
         };
 
diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index 3a364dc02346..1e34bd81d0b0 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -15,8 +15,11 @@ import {
   SourceEditor,
   appendStatement,
   appendToList,
+  argumentList,
   arrayList,
+  declaratorList,
   insertAfterImports,
+  objectList,
   prependStatement,
   prependToList,
   printMembers,
@@ -160,10 +163,60 @@ describe('style', () => {
   });
 });
 
+describe('lists', () => {
+  const firstStatement = (code: string) => {
+    const editor = new SourceEditor(code);
+    return { editor, statement: editor.program.body[0] };
+  };
+  const expressionOf = (statement: E.Node) => (statement as E.ExpressionStatement).expression;
+
+  it('keeps the comments of an empty one-line list when adding its first item', () => {
+    const object = firstStatement('({ /* todo */ });');
+    appendToList(
+      object.editor,
+      objectList(object.editor, expressionOf(object.statement) as E.ObjectExpression),
+      ['a: 1']
+    );
+    expect(object.editor.toString()).toBe('({ /* todo */ a: 1 });');
+
+    const call = firstStatement('config(/* none */);');
+    appendToList(
+      call.editor,
+      argumentList(call.editor, expressionOf(call.statement) as E.CallExpression),
+      ['a']
+    );
+    expect(call.editor.toString()).toBe('config(/* none */ a);');
+  });
+
+  it('finds the arguments of an optional call with type arguments past comments', () => {
+    const { editor, statement } = firstStatement('f?.<T>(/* ( */ a);');
+    const chain = expressionOf(statement) as E.ChainExpression;
+    appendToList(editor, argumentList(editor, chain.expression as E.CallExpression), ['b']);
+    expect(editor.toString()).toBe('f?.<T>(/* ( */ a, b);');
+  });
+
+  it('indents the continuation lines of an item added to a one-line list like its line', () => {
+    const { editor } = firstStatement('const a = {\n  b: [1],\n};');
+    const array = editor.program.body[0] as E.VariableDeclaration;
+    const object = array.declarations[0].init as E.ObjectExpression;
+    const value = (object.properties[0] as E.ObjectProperty).value as E.ArrayExpression;
+    appendToList(editor, arrayList(editor, value), ['{\n  c: 2,\n}']);
+    expect(editor.toString()).toBe('const a = {\n  b: [1, {\n    c: 2,\n  }],\n};');
+  });
+
+  it('removes a declarator with its comma', () => {
+    const { editor, statement } = firstStatement('const a = 1, b = 2, c = 3;');
+    const declaration = statement as E.VariableDeclaration;
+    removeFromList(editor, declaratorList(editor, declaration), [declaration.declarations[0]]);
+    removeFromList(editor, declaratorList(editor, declaration), [declaration.declarations[2]]);
+    expect(editor.toString()).toBe('const b = 2;');
+  });
+});
+
 describe('parenthesized array elements', () => {
   it('appends after a comma expression and removes a doubly parenthesized one whole', () => {
     const editor = new SourceEditor(`export default { addons: [(a, b)] };`);
-    appendToList(editor, arrayList(editor, defaultExportArray(editor)), [`'c'`], '');
+    appendToList(editor, arrayList(editor, defaultExportArray(editor)), [`'c'`]);
     expect(editor.toString()).toBe(`export default { addons: [(a, b), 'c'] };`);
 
     const removal = new SourceEditor(`export default { addons: ['c', ((a, b))] };`);
@@ -174,7 +227,7 @@ describe('parenthesized array elements', () => {
 
   it('appends after a parenthesized last element and removes it whole', () => {
     const editor = new SourceEditor(`export default { addons: [(cond ? 'a' : 'c')] };`);
-    appendToList(editor, arrayList(editor, defaultExportArray(editor)), [`'b'`], '');
+    appendToList(editor, arrayList(editor, defaultExportArray(editor)), [`'b'`]);
     expect(editor.toString()).toBe(`export default { addons: [(cond ? 'a' : 'c'), 'b'] };`);
 
     const removal = new SourceEditor(`export default { addons: ['b', (cond ? 'a' : 'c')] };`);
@@ -185,7 +238,7 @@ describe('parenthesized array elements', () => {
 
   it('skips the comments between the parentheses and the element', () => {
     const editor = new SourceEditor(`export default { addons: [(/* c */ cond ? 'a' : 'c')] };`);
-    appendToList(editor, arrayList(editor, defaultExportArray(editor)), [`'b'`], '');
+    appendToList(editor, arrayList(editor, defaultExportArray(editor)), [`'b'`]);
     expect(editor.toString()).toBe(`export default { addons: [(/* c */ cond ? 'a' : 'c'), 'b'] };`);
 
     const removal = new SourceEditor(
@@ -196,12 +249,12 @@ describe('parenthesized array elements', () => {
     expect(removal.toString()).toBe(`export default { addons: [(/* c */ cond ? 'a' : 'c')] };`);
 
     const after = new SourceEditor(`export default { addons: [(x /* after */)] };`);
-    appendToList(after, arrayList(after, defaultExportArray(after)), [`'b'`], '');
+    appendToList(after, arrayList(after, defaultExportArray(after)), [`'b'`]);
     expect(after.toString()).toBe(`export default { addons: [(x /* after */), 'b'] };`);
 
     // The list spans lines because of the comment, so the item lands on its own line.
     const line = new SourceEditor(`export default { addons: [(x // after\n)] };`);
-    appendToList(line, arrayList(line, defaultExportArray(line)), [`'b'`], '');
+    appendToList(line, arrayList(line, defaultExportArray(line)), [`'b'`]);
     expect(line.toString()).toBe(`export default { addons: [(x // after\n),\n'b'] };`);
   });
 });
@@ -217,7 +270,7 @@ describe('array holes', () => {
 
   it('keeps leading holes when appending to and emptying an array', () => {
     const editor = new SourceEditor(`export default { addons: [, 'a'] };`);
-    appendToList(editor, arrayList(editor, defaultExportArray(editor)), [`'b'`], '');
+    appendToList(editor, arrayList(editor, defaultExportArray(editor)), [`'b'`]);
     expect(editor.toString()).toBe(`export default { addons: [, 'a', 'b'] };`);
 
     expect(removeElement(`export default { addons: [, 'a'] };`, 1)).toBe(
@@ -239,14 +292,14 @@ describe('array holes', () => {
 
   it('appends after a trailing hole', () => {
     const editor = new SourceEditor(`export default { addons: ['a', ,] };`);
-    appendToList(editor, arrayList(editor, defaultExportArray(editor)), [`'b'`], '');
+    appendToList(editor, arrayList(editor, defaultExportArray(editor)), [`'b'`]);
     expect(editor.toString()).toBe(`export default { addons: ['a', , 'b'] };`);
     expect(lengthOf(editor.toString())).toBe(3);
   });
 
   it('prepends before a leading hole', () => {
     const editor = new SourceEditor(`export default { addons: [, 'a'] };`);
-    prependToList(editor, arrayList(editor, defaultExportArray(editor)), [`'b'`], '');
+    prependToList(editor, arrayList(editor, defaultExportArray(editor)), [`'b'`]);
     expect(editor.toString()).toBe(`export default { addons: ['b', , 'a'] };`);
   });
 });
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 8b5c8863b523..9f664c1c870d 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -419,13 +419,15 @@ const commentsBeside = (editor: SourceEditor, index: number) =>
   triviaAfter(editor, index, SPACE_ON_LINE);
 
 /**
- * A comma-separated list in the source: object members, array elements, import specifiers. `open`
- * is the index right after the opening token, `close` the index of the closing token.
+ * A comma-separated list in the source: object members, array elements, call arguments, import
+ * specifiers. `open` is the index right after the opening token, `close` the index of the closing
+ * token, and `padding` the space inside them when the list is on one line: `{ a }` but `[a]`.
  */
 export interface List {
   open: number;
   close: number;
   items: readonly Span[];
+  padding: string;
 }
 
 /** The `{ … }` of an import or export with at least one named specifier. */
@@ -443,6 +445,7 @@ export const specifierList = (
     open: previousTokenEnd(editor, items[0].start),
     close: code[afterLast] === ',' ? nextTokenStart(editor, afterLast + 1) : afterLast,
     items,
+    padding: ' ',
   };
 };
 
@@ -451,7 +454,7 @@ export const objectList = (
   object: E.ObjectExpression | E.ObjectPattern
 ): List => {
   editor.assertCurrent(object);
-  return { open: object.start + 1, close: object.end - 1, items: object.properties };
+  return { open: object.start + 1, close: object.end - 1, items: object.properties, padding: ' ' };
 };
 
 // A hole (`[a, , b]`) is an empty item right before the comma that writes it.
@@ -474,7 +477,28 @@ export const arrayList = (editor: SourceEditor, array: E.ArrayExpression): List
     cursor = separatorAfter(editor, item) ?? item.end;
     return item;
   });
-  return { open, close, items };
+  return { open, close, items, padding: '' };
+};
+
+// An argument's item spans the parentheses around it.
+export const argumentList = (editor: SourceEditor, call: E.CallExpression): List => {
+  editor.assertCurrent(call);
+  let open = nextTokenStart(editor, (call.typeArguments ?? outerSpan(call.callee)).end);
+  if (call.optional && !call.typeArguments) {
+    open = nextTokenStart(editor, open + '?.'.length);
+  }
+  return { open: open + 1, close: call.end - 1, items: call.arguments.map(outerSpan), padding: '' };
+};
+
+/** The declarators of a declaration, from its keyword to its last declarator. */
+export const declaratorList = (editor: SourceEditor, declaration: E.VariableDeclaration): List => {
+  editor.assertCurrent(declaration);
+  return {
+    open: previousTokenEnd(editor, declaration.declarations[0].start),
+    close: declaration.declarations.at(-1)!.end,
+    items: declaration.declarations,
+    padding: ' ',
+  };
 };
 
 // Position right after the comma that follows an item, if it has one.
@@ -622,36 +646,36 @@ export const memberText = (
   member: E.ObjectPropertyKind
 ) => itemText(editor, objectList(editor, object), member);
 
-export const appendToList = (
-  editor: SourceEditor,
-  list: List,
-  texts: string[],
-  // Padding inside an empty single-line list: `{ a }` for objects, `[a]` for arrays.
-  padding = ' '
-) => {
+// Items joined on the line of a one-line list, their continuation lines indented like it.
+const inline = (editor: SourceEditor, list: List, texts: string[]) => {
+  const indent = lineIndent(editor.code, list.open);
+  return texts.map((text) => reindent(text, '', indent)).join(', ');
+};
+
+export const appendToList = (editor: SourceEditor, list: List, texts: string[]) => {
   const { code, edits } = editor;
-  const { items } = list;
+  const { items, padding } = list;
   if (items.length === 0) {
+    // Only comments can be inside an empty list, and the items go after them.
     const inner = code.slice(list.open, list.close);
-    if ((inner.includes('\n') && inner.trim()) || texts.some((text) => text.includes('\n'))) {
-      // Multi-line items, or only comments inside: lay the items out one per line.
+    const end = list.open + inner.trimEnd().length;
+    if ((inner.includes('\n') && end > list.open) || texts.some((text) => text.includes('\n'))) {
+      // Multi-line items, or comments on lines of their own: lay the items out one per line.
       const outer = lineIndent(code, list.open - 1);
       const indent = `${outer}${editor.indent}`;
-      const lead = inner.trim() ? '' : '\n';
-      if (!inner.trim() && list.close > list.open) {
-        edits.remove(list.open, list.close);
+      if (list.close > end) {
+        edits.remove(end, list.close);
       }
       edits.appendLeft(
-        list.close,
-        `${lead}${texts.map((text) => `${indent}${reindent(text, '', indent)},`).join('\n')}\n${outer}`
+        end,
+        `\n${texts.map((text) => `${indent}${reindent(text, '', indent)},`).join('\n')}\n${outer}`
       );
-      return;
-    }
-    const content = `${padding}${texts.join(', ')}${padding}`;
-    if (list.close > list.open) {
-      edits.overwrite(list.open, list.close, content);
+    } else if (end > list.open) {
+      edits.appendLeft(end, ` ${texts.join(', ')}${end === list.close ? padding : ''}`);
+    } else if (list.close > list.open) {
+      edits.overwrite(list.open, list.close, `${padding}${texts.join(', ')}${padding}`);
     } else {
-      edits.appendLeft(list.open, content);
+      edits.appendLeft(list.open, `${padding}${texts.join(', ')}${padding}`);
     }
     return;
   }
@@ -669,17 +693,17 @@ export const appendToList = (
     return;
   }
   if (comma !== undefined) {
-    edits.appendLeft(comma, ` ${texts.join(', ')}${trailingComma}`);
+    edits.appendLeft(comma, ` ${inline(editor, list, texts)}${trailingComma}`);
   } else {
-    edits.appendLeft(last.end, `, ${texts.join(', ')}`);
+    edits.appendLeft(last.end, `, ${inline(editor, list, texts)}`);
   }
 };
 
-export const prependToList = (editor: SourceEditor, list: List, texts: string[], padding = ' ') => {
+export const prependToList = (editor: SourceEditor, list: List, texts: string[]) => {
   const { code, edits } = editor;
   const [first] = list.items;
   if (!first) {
-    appendToList(editor, list, texts, padding);
+    appendToList(editor, list, texts);
     return;
   }
   if (isMultiline(code, list)) {
@@ -690,7 +714,7 @@ export const prependToList = (editor: SourceEditor, list: List, texts: string[],
     );
     return;
   }
-  edits.appendRight(first.start, `${texts.join(', ')}, `);
+  edits.appendRight(first.start, `${inline(editor, list, texts)}, `);
 };
 
 /** Remove items with their separators and the comments that lead and trail them from a list. */
@@ -918,12 +942,16 @@ export const appendStatement = (editor: SourceEditor, text: string) => {
   insertStatementAfter(editor, last, text);
 };
 
+/** The span of a statement with the comments it owns. */
+export const statementSpan = (editor: SourceEditor, statement: Span): Span => ({
+  start: (leadingComments(editor, statement)[0] ?? statement).start,
+  end: statementEnd(editor, statement),
+});
+
 /** Remove a statement with the comments it owns, and its lines when nothing else shares them. */
 export const removeStatement = (editor: SourceEditor, statement: Span, atTop?: boolean) => {
-  editor.assertCurrent(statement);
   const { code } = editor;
-  const start = (leadingComments(editor, statement)[0] ?? statement).start;
-  const end = statementEnd(editor, statement);
+  const { start, end } = statementSpan(editor, statement);
   const lineBreak = lineEnd(code, end);
   let from = lineStart(code, start);
   if (code.slice(end, lineBreak).trim()) {
diff --git a/code/core/src/csf-tools/index.ts b/code/core/src/csf-tools/index.ts
index a4a77dcfe6b3..48e6f562022a 100644
--- a/code/core/src/csf-tools/index.ts
+++ b/code/core/src/csf-tools/index.ts
@@ -37,7 +37,9 @@ export {
   appendMembers,
   appendStatement,
   appendToList,
+  argumentList,
   arrayList,
+  declaratorList,
   headerComments,
   insertAfterImports,
   itemText,
@@ -56,4 +58,5 @@ export {
   removeStatements,
   setImportSpecifiers,
   specifierList,
+  statementSpan,
 } from './estree/editor.ts';
diff --git a/code/lib/codemod/src/transforms/csf-2-to-3.ts b/code/lib/codemod/src/transforms/csf-2-to-3.ts
index 23cf594812d6..b4c6d67a96ec 100644
--- a/code/lib/codemod/src/transforms/csf-2-to-3.ts
+++ b/code/lib/codemod/src/transforms/csf-2-to-3.ts
@@ -3,9 +3,11 @@ import {
   type ESTree as E,
   type ESTreeNode as Node,
   type SourceEditor,
+  declaratorList,
   loadCsf,
   placeableTextOf,
   printCsf,
+  removeFromList,
   removeStatement,
   walk,
 } from 'storybook/internal/csf-tools';
@@ -124,14 +126,10 @@ function removeUnusedTemplates(editor: SourceEditor, templates: string[]) {
     }
     const declarator = reference.parent;
     const declaration = editor.parentOf(declarator) as E.VariableDeclaration;
-    const { declarations } = declaration;
-    const index = declarations.indexOf(declarator);
-    if (declarations.length === 1) {
+    if (declaration.declarations.length === 1) {
       removeStatement(editor, declaration);
-    } else if (index < declarations.length - 1) {
-      editor.edits.remove(declarator.start, declarations[index + 1].start);
     } else {
-      editor.edits.remove(declarations[index - 1].end, declarator.end);
+      removeFromList(editor, declaratorList(editor, declaration), [declarator]);
     }
   });
   editor.commit();

From dcfdfb0ff74195d3ba7d3e1b347d0b0840fa6786 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Sat, 17 Oct 2026 23:13:25 +0200
Subject: [PATCH 159/326] refactor(csf-tools): one way to wrap an expression

`wrapExpression(editor, node, before, after)` writes text around an
expression and the parentheses written around it. Three callers wrapped by
hand; the Metro config setup and the args-mocks codemod used the node's own
span, which leaves the parentheses outside: `(setup(), config)` became
`withStorybook(setup(), config)`, a call with two arguments. They now wrap the
outer span, which keeps the comma expression one argument.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/editor.ts               |  8 ++++++++
 code/core/src/csf-tools/index.ts                       |  1 +
 .../src/codemod/helpers/story-to-csf-factory.ts        | 10 +++++-----
 .../src/codemod/helpers/wrap-args-mocks.ts             |  4 ++--
 .../src/generators/REACT_NATIVE/metroConfig.test.ts    | 10 ++++++++++
 .../src/generators/REACT_NATIVE/metroConfig.ts         |  4 ++--
 6 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 9f664c1c870d..eb09c7a14e0e 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -1058,6 +1058,14 @@ export const replaceValue = (editor: SourceEditor, member: Property, text: strin
   editor.edits.overwrite(value.start, value.end, text);
 };
 
+/** Write `before` and `after` around an expression and the parentheses written around it. */
+export const wrapExpression = (editor: SourceEditor, node: Node, before: string, after: string) => {
+  editor.assertCurrent(node);
+  const { start, end } = outerSpan(node);
+  editor.edits.appendRight(start, before);
+  editor.edits.appendLeft(end, after);
+};
+
 export const keySource = (editor: SourceEditor, member: Property) =>
   editor.source(keyRange(editor, member));
 
diff --git a/code/core/src/csf-tools/index.ts b/code/core/src/csf-tools/index.ts
index 48e6f562022a..217c21695960 100644
--- a/code/core/src/csf-tools/index.ts
+++ b/code/core/src/csf-tools/index.ts
@@ -59,4 +59,5 @@ export {
   setImportSpecifiers,
   specifierList,
   statementSpan,
+  wrapExpression,
 } from './estree/editor.ts';
diff --git a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
index 14bceb0cfdde..13749d4a569e 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
@@ -7,6 +7,7 @@ import {
   printString,
   outerSpan,
   walk,
+  wrapExpression,
   removeStatements,
   setImportSpecifiers,
   prependStatement,
@@ -351,12 +352,11 @@ export async function storyToCsfFactory(
   // Wraps `inner` in `before…after`, dropping the type cast of `outer` around it. The parentheses
   // of `(inner) satisfies T` stay with `inner`.
   const wrap = (outer: Node, inner: Node, before: string, after: string) => {
-    const span = outerSpan(inner);
-    if (span.end < outer.end) {
-      editor.edits.remove(span.end, outer.end);
+    const { end } = outerSpan(inner);
+    if (end < outer.end) {
+      editor.edits.remove(end, outer.end);
     }
-    editor.edits.appendRight(span.start, before);
-    editor.edits.appendLeft(span.end, after);
+    wrapExpression(editor, inner, before, after);
   };
 
   // modify meta
diff --git a/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.ts b/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.ts
index 9c6518ca5c4e..49f05c16b293 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.ts
@@ -8,6 +8,7 @@ import {
   printString,
   walk,
   setImportSpecifiers,
+  wrapExpression,
 } from 'storybook/internal/csf-tools';
 
 const mockMembers = [
@@ -214,7 +215,6 @@ export function wrapArgsMocks(editor: SourceEditor) {
   }
 
   for (const target of targets) {
-    editor.edits.appendRight(target.start, `${callee}(`);
-    editor.edits.appendLeft(target.end, ')');
+    wrapExpression(editor, target, `${callee}(`, ')');
   }
 }
diff --git a/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.test.ts b/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.test.ts
index b4411e1de296..8843c77e6b08 100644
--- a/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.test.ts
+++ b/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.test.ts
@@ -170,6 +170,16 @@ export default {};
     }
   });
 
+  it('wraps a parenthesized comma expression as one argument', () => {
+    const before = 'module.exports = (setup(), config);\n';
+    const transformed = transformMetroConfigSource(before, path.join(tempDir, 'metro.config.js'));
+
+    expect(transformed.action).toBe('updated');
+    if (transformed.action === 'updated') {
+      expect(transformed.code).toContain('module.exports = withStorybook((setup(), config));');
+    }
+  });
+
   it('treats aliased ESM withStorybook wrapper as already configured', () => {
     const before = `
 import { withStorybook as wrapMetro } from '@storybook/react-native/withStorybook';
diff --git a/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.ts b/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.ts
index 763cbf60f471..cc3a56a76e5d 100644
--- a/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.ts
+++ b/code/lib/create-storybook/src/generators/REACT_NATIVE/metroConfig.ts
@@ -11,6 +11,7 @@ import {
   parseModule,
   prependStatement,
   walk,
+  wrapExpression,
 } from 'storybook/internal/csf-tools';
 import { logger, prompt } from 'storybook/internal/node-logger';
 
@@ -214,8 +215,7 @@ export const transformMetroConfigSource = (source: string, filePath: string): Tr
   let changed = false;
 
   const wrap = (node: Node) => {
-    editor.edits.appendRight(node.start, `${withStorybookLocalName}(`);
-    editor.edits.appendLeft(node.end, ')');
+    wrapExpression(editor, node, `${withStorybookLocalName}(`, ')');
     changed = true;
   };
 

From 91b7cb4447b42f15e9a97236d76a95af5d364a02 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Sat, 17 Oct 2026 23:27:24 +0200
Subject: [PATCH 160/326] refactor(csf-tools): trim the API and delete
 duplicate helpers

Reading a node's text had three names: `textOf` returned `undefined` for a
node of unknown source, and `codeOf` and `printExpression` wrapped it to
throw. No caller wanted `undefined`, so `textOf` throws and the wrappers are
gone; `placeableTextOf` stays for placing text as a value.

Five functions read an object member's key. `identifierKey`, ConfigFile's
`propKey` and addon-vitest's `keyName` read `{ [foo]: 1 }` as key `foo`, so a
computed key could stand in for the field it shadows. `staticKey` is the one
reader left: it takes any member, reads a computed key only when it is a
literal, and returns `undefined` for spreads. story-shape's `keyOf` and
Angular's `keyNameOf` were the same function and are gone too. The
args-mocks codemod keeps a reader for member-access and import names, which
are not member keys, now called `nameOf`.

`ConfigFile._unwrap`, ConfigObject's `TS_WRAPPERS` and the args-mocks
`withoutTypeCast`/`isTypeCast` copied `unwrapExpression`; `isTSWrapper` now
names the wrapper test for walking up. ConfigObject's ASCII
`isValidIdentifier` accepted keywords as export names; the Unicode one in
ast.ts is the one kept. `Span` is declared once. config-to-csf-factory's
private `prependMembers` duplicated `prependToList`, which keeps the
comments of the first member with it (one snapshot updated on purpose).

`unwrapExpression` was exported twice, once as `unwrapESTreeExpression`; it
is exported once under its own name. story-shape's `sourceOf` meant "text on
one line" while ast.ts's means "slice of the code", so the former is
`oneLineTextOf`. Nothing outside csf-tools imported `printKey`,
`removeMembers`, `appendMembers`, `prependMembers`, `locationOf`,
`analyzeScopes` or `SourceLocation` through the entry point, so they are no
longer exported; callers use the list functions. enrichCsf's
`leadingComments` is private. The csf-tools README no longer says Babel.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 MIGRATION.md                                  |  4 +-
 code/addons/vitest/src/updateVitestFile.ts    | 28 ++++-----
 code/core/src/cli/eslintPlugin.ts             |  2 +-
 .../common/utils/resolve-meta-component.ts    |  7 +--
 .../utils/setup-addon-in-config.test.ts       |  2 +-
 .../duplicate-story-with-new-name.ts          |  4 +-
 .../save-story/update-args-in-csf-file.ts     |  7 +--
 code/core/src/csf-tools/ConfigFile.test.ts    | 11 ++++
 code/core/src/csf-tools/ConfigFile.ts         | 44 +++++---------
 code/core/src/csf-tools/ConfigObject.test.ts  | 10 ++--
 code/core/src/csf-tools/ConfigObject.ts       | 14 ++---
 code/core/src/csf-tools/CsfFile.ts            | 16 +++--
 code/core/src/csf-tools/CsfObject.test.ts     | 13 +++--
 code/core/src/csf-tools/CsfObject.ts          | 15 -----
 code/core/src/csf-tools/README.md             |  8 +--
 code/core/src/csf-tools/enrichCsf.ts          |  8 +--
 code/core/src/csf-tools/estree/ast.ts         | 58 ++++++++++---------
 code/core/src/csf-tools/estree/editor.ts      |  3 +-
 code/core/src/csf-tools/index.ts              | 15 ++---
 .../csf-tools/story-shape/authored-source.ts  | 10 ++--
 code/core/src/csf-tools/story-shape/index.ts  |  5 +-
 code/core/src/csf-tools/story-shape/render.ts |  6 +-
 .../story-shape/resolve-arg-value.test.ts     |  4 +-
 .../story-shape/resolve-arg-value.ts          | 18 +++---
 .../story-shape/resolve-members.test.ts       |  6 +-
 .../csf-tools/story-shape/resolve-members.ts  | 39 +++++--------
 .../story-shape/resolve-story-args.ts         |  4 +-
 .../src/csf-tools/story-shape/utils.test.ts   | 31 +++++-----
 code/core/src/csf-tools/story-shape/utils.ts  | 25 +++-----
 .../csf-tools/vitest-plugin/transformer.ts    |  4 +-
 .../src/docgen/story-docs-args.ts             | 12 ++--
 .../src/docgen/story-docs-build.ts            |  6 +-
 .../src/docgen/story-docs-markup.ts           | 36 +++++-------
 .../src/docgen/story-docs-ng-modules.ts       |  4 +-
 .../helpers/config-to-csf-factory.test.ts     |  2 +-
 .../codemod/helpers/config-to-csf-factory.ts  | 25 +++-----
 .../src/codemod/helpers/wrap-args-mocks.ts    | 37 +++++-------
 .../componentManifest/generateCodeSnippet.ts  |  6 +-
 .../vue3/src/docgen/shared/classify-value.ts  |  4 +-
 .../src/docgen/story-docs/build-story-docs.ts |  6 +-
 .../classify-args/classify-args.test.ts       | 10 +++-
 .../src/docgen/story-docs/print-h/print-h.ts  | 10 ++--
 .../transform-template/forward-setup.ts       |  4 +-
 .../transform-template/transform-template.ts  |  8 +--
 .../src/docgen/story-docs/arg-values.ts       | 10 ++--
 .../src/docgen/story-docs/build-story-docs.ts | 10 ++--
 .../src/docgen/story-docs/template-holes.ts   | 20 +++----
 .../src/docgen/story-docs/template-print.ts   | 10 ++--
 .../src/docgen/story-docs/template-scope.ts   | 16 ++---
 49 files changed, 295 insertions(+), 362 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 9603d084e7cb..c3af44e17455 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1329,7 +1329,7 @@ Storybook no longer bundles Babel or recast to read and write story and config f
 
 - `storybook/internal/babel` is removed. Import Babel from your own `@babel/*` dependencies if you still need it.
 - The nodes exposed by `storybook/internal/csf-tools` are ESTree (OXC) nodes instead of Babel nodes, for example `Literal` instead of `StringLiteral` and `Property` instead of `ObjectProperty`/`ObjectMethod`. `CsfFile._ast` and the `NodePath` fields are removed; use `CsfFile._program` and `CsfFile._editor`. `ConfigFile._ast` is removed as well; use `ConfigFile._program` and `ConfigFile._editor`. Both `_editor`s are a `SourceEditor`: call `_editor.commit()` to apply pending edits, after which the file parses the result again. Nodes from before a commit are stale, and editing with them throws.
-- `CsfObject#get` returns an ESTree expression, and `set`/`transform` accept expressions from `get()` or `parseExpression(code)`. Use `printExpression(node)` to read an expression's source, and `placeableTextOf(node)` to build new code around it.
+- `CsfObject#get` returns an ESTree expression, and `set`/`transform` accept expressions from `get()` or `parseExpression(code)`. Use `textOf(node)` to read an expression's source, and `placeableTextOf(node)` to build new code around it.
 - An `experimental_enrichCsf` function receives the new `CsfFile`. Add code with `csf._appendStatement(code)` instead of pushing Babel nodes onto `csf._ast`.
 - `babelParse` is removed; use `parseModule(code, fileName)` from `storybook/internal/csf-tools`, which returns the ESTree `program` and `comments`. `babelParseFile` is removed as well; read CSF with `loadCsf(code, options)` or `readCsf(fileName, options)`.
 - Parsing normalizes line endings to `\n`. Node offsets from `parseModule`, `CsfFile._program` and `ConfigFile._program` index the normalized `code`/`_code`, not the string you passed in; lines and columns are unchanged.
@@ -1340,7 +1340,7 @@ Storybook no longer bundles Babel or recast to read and write story and config f
 - `new CsfFile(code, options)` and `new ConfigFile(code, fileName)` take source code instead of a Babel AST.
 - `formatCsf(csf, { sourceMaps, sourceFileName, inputSourceMap })` replaces the Babel generator options; `printCsf` and `printConfig` take no options, and all three print with `\n` line endings.
 - `ConfigFile#setBodyDeclaration(code)` takes the declaration's source text instead of a Babel node.
-- The Vitest config helpers `canUpdateVitestConfigFile`, `getTargetConfigObject`, `getEffectiveMergeConfigCall`, `getConfigObjectFromMergeArg` and `resolveExpression` moved from `storybook/internal/babel` to `storybook/internal/cli`. `canUpdateVitestConfigFile` still takes the file's source; the others take an ESTree `Program`, such as `parseModule(code, fileName).program`, instead of a Babel `File`, and return ESTree nodes. `isDefineConfigLike` and `isImportedDefineConfigLikeIdentifier` are no longer exported. `unwrapTSExpression` is now `unwrapESTreeExpression` in `storybook/internal/csf-tools`, and also unwraps non-null assertions (`value!`).
+- The Vitest config helpers `canUpdateVitestConfigFile`, `getTargetConfigObject`, `getEffectiveMergeConfigCall`, `getConfigObjectFromMergeArg` and `resolveExpression` moved from `storybook/internal/babel` to `storybook/internal/cli`. `canUpdateVitestConfigFile` still takes the file's source; the others take an ESTree `Program`, such as `parseModule(code, fileName).program`, instead of a Babel `File`, and return ESTree nodes. `isDefineConfigLike` and `isImportedDefineConfigLikeIdentifier` are no longer exported. `unwrapTSExpression` is now `unwrapExpression` in `storybook/internal/csf-tools`, and also unwraps non-null assertions (`value!`).
 
 Babel itself is still used where it compiles your code, for example by `@storybook/nextjs` and the webpack Babel compiler addon.
 
diff --git a/code/addons/vitest/src/updateVitestFile.ts b/code/addons/vitest/src/updateVitestFile.ts
index cee98d8b4d72..ff871f17e5d5 100644
--- a/code/addons/vitest/src/updateVitestFile.ts
+++ b/code/addons/vitest/src/updateVitestFile.ts
@@ -20,6 +20,7 @@ import {
   objectList,
   prependToList,
   statementSpan,
+  staticKey,
 } from 'storybook/internal/csf-tools';
 
 import { normalize } from 'pathe';
@@ -51,21 +52,20 @@ interface Merge {
   target: SourceEditor;
 }
 
-const keyName = (member: Member) =>
-  member.type === 'Property' &&
-  !member.method &&
-  member.kind === 'init' &&
-  member.key.type === 'Identifier'
-    ? member.key.name
-    : undefined;
-
+// A method or accessor has no value expression to merge.
 const findNamedProp = (members: Member[], name: string) =>
-  members.find((member): member is E.ObjectProperty => keyName(member) === name);
+  members.find(
+    (member): member is E.ObjectProperty =>
+      member.type === 'Property' &&
+      !member.method &&
+      member.kind === 'init' &&
+      staticKey(member) === name
+  );
 
 const isProjectsArrayProp = (
   member: Member
 ): member is E.ObjectProperty & { value: E.ArrayExpression } =>
-  keyName(member) === 'projects' && (member as E.ObjectProperty).value.type === 'ArrayExpression';
+  staticKey(member) === 'projects' && (member as E.ObjectProperty).value.type === 'ArrayExpression';
 
 const memberTexts = (editor: SourceEditor, object: E.ObjectExpression, members: Member[]) =>
   members.map((member) => itemText(editor, objectList(editor, object), member));
@@ -86,7 +86,7 @@ const mergeProperties = (
 ) => {
   const appended: string[] = [];
   for (const sourceProp of fromMembers) {
-    const name = keyName(sourceProp);
+    const name = staticKey(sourceProp);
     if (!name) {
       continue;
     }
@@ -134,9 +134,9 @@ const appendToExistingProjects = (
         elementTexts(merge.source, templateProjects.value)
       );
     }
-    const existingNames = new Set(testObject.properties.map(keyName));
+    const existingNames = new Set(testObject.properties.map(staticKey));
     const added = templateTestObject.properties.filter((member) => {
-      const name = keyName(member);
+      const name = staticKey(member);
       return name !== undefined && name !== 'projects' && !existingNames.has(name);
     });
     if (added.length > 0) {
@@ -152,7 +152,7 @@ const appendToExistingProjects = (
     merge,
     templateConfig,
     targetConfig,
-    templateConfig.properties.filter((member) => keyName(member) !== 'test')
+    templateConfig.properties.filter((member) => staticKey(member) !== 'test')
   );
 };
 
diff --git a/code/core/src/cli/eslintPlugin.ts b/code/core/src/cli/eslintPlugin.ts
index 7657a8eccfa3..01aeea0ad3bb 100644
--- a/code/core/src/cli/eslintPlugin.ts
+++ b/code/core/src/cli/eslintPlugin.ts
@@ -15,7 +15,7 @@ import {
   prependStatement,
   printString,
   readConfig,
-  unwrapESTreeExpression as unwrapExpression,
+  unwrapExpression,
   walk,
   writeConfig,
 } from 'storybook/internal/csf-tools';
diff --git a/code/core/src/common/utils/resolve-meta-component.ts b/code/core/src/common/utils/resolve-meta-component.ts
index 8a2e2d7a0683..45eca7a93c2a 100644
--- a/code/core/src/common/utils/resolve-meta-component.ts
+++ b/code/core/src/common/utils/resolve-meta-component.ts
@@ -1,14 +1,13 @@
 import type { CsfFile } from 'storybook/internal/csf-tools';
 
-import type { E, Node } from '../../csf-tools/estree/ast.ts';
+import { type E, type Node, unwrapExpression } from '../../csf-tools/estree/ast.ts';
 import { parseReferenceModule } from '../../csf-tools/story-shape/reference-context.ts';
 import { isSelfContained } from '../../csf-tools/story-shape/resolve-arg-value.ts';
 import {
   type ReferenceModule,
   resolveReferencedValue,
-  sourceOf,
+  oneLineTextOf,
 } from '../../csf-tools/story-shape/resolve-members.ts';
-import { unwrapExpression } from '../../csf-tools/story-shape/utils.ts';
 import { jsTsSourceExtensions } from '../../shared/constants/extensions.ts';
 import { createModuleResolver } from './module-resolver.ts';
 
@@ -144,7 +143,7 @@ export function createMetaComponentResolver(options: MetaComponentResolverOption
       }
     }
 
-    return { reason: 'unreadable-component-expression', expression: sourceOf(node) };
+    return { reason: 'unreadable-component-expression', expression: oneLineTextOf(node) };
   };
 }
 
diff --git a/code/core/src/common/utils/setup-addon-in-config.test.ts b/code/core/src/common/utils/setup-addon-in-config.test.ts
index 0c14e29ddd7b..6938324b06cc 100644
--- a/code/core/src/common/utils/setup-addon-in-config.test.ts
+++ b/code/core/src/common/utils/setup-addon-in-config.test.ts
@@ -76,7 +76,7 @@ describe('setupAddonInConfig', () => {
 
     const [path, node] = vi.mocked(mockMain.appendNodeToArray).mock.calls[0];
     expect(path).toEqual(['addons']);
-    expect(csfTools.printExpression(node)).toBe("getAbsolutePath('@storybook/addon-docs')");
+    expect(csfTools.textOf(node)).toBe("getAbsolutePath('@storybook/addon-docs')");
     expect(mockMain.appendValueToArray).not.toHaveBeenCalled();
     expect(csfTools.writeConfig).toHaveBeenCalledWith(mockMain);
     expect(loadMainConfigModule.loadMainConfig).toHaveBeenCalledWith({
diff --git a/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.ts b/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.ts
index e8dc10fe4c37..2bc4c2e22a38 100644
--- a/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.ts
+++ b/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.ts
@@ -1,6 +1,6 @@
 import type { CsfFile } from 'storybook/internal/csf-tools';
 
-import { type E, type Node, identifierKey, walk } from '../../../csf-tools/estree/ast.ts';
+import { type E, type Node, staticKey, walk } from '../../../csf-tools/estree/ast.ts';
 import {
   SourceEditor,
   appendStatement,
@@ -37,7 +37,7 @@ export const duplicateStoryWithNewName = (csfFile: In, storyName: string, newSto
     }
     const args = child.properties.filter(
       (property): property is E.ObjectProperty =>
-        property.type === 'Property' && !property.computed && identifierKey(property) === 'args'
+        property.type === 'Property' && staticKey(property) === 'args'
     );
     if (args.length > 0) {
       removeFromList(copy, objectList(copy, child), args);
diff --git a/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts b/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts
index f67d8caf6573..1eaa2f480d57 100644
--- a/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts
+++ b/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts
@@ -3,7 +3,7 @@ import type { CsfFile } from 'storybook/internal/csf-tools';
 import {
   type E,
   type Node,
-  identifierKey,
+  staticKey,
   isValidIdentifier,
   walk,
 } from '../../../csf-tools/estree/ast.ts';
@@ -65,7 +65,7 @@ export const updateArgsInCsfFile = async (
 
   const argsProperty = story.properties.find(
     (property): property is E.ObjectProperty =>
-      property.type === 'Property' && !property.computed && identifierKey(property) === 'args'
+      property.type === 'Property' && staticKey(property) === 'args'
   );
 
   if (!argsProperty) {
@@ -82,8 +82,7 @@ export const updateArgsInCsfFile = async (
     return;
   }
   for (const property of argsProperty.value.properties) {
-    const key =
-      property.type === 'Property' && !property.computed ? identifierKey(property) : undefined;
+    const key = staticKey(property);
     if (property.type === 'Property' && key && key in args) {
       replaceValue(editor, property, args[key]);
       delete args[key];
diff --git a/code/core/src/csf-tools/ConfigFile.test.ts b/code/core/src/csf-tools/ConfigFile.test.ts
index 57026aad4967..687621215b96 100644
--- a/code/core/src/csf-tools/ConfigFile.test.ts
+++ b/code/core/src/csf-tools/ConfigFile.test.ts
@@ -189,6 +189,17 @@ describe('ConfigFile', () => {
           )
         ).toBeUndefined();
       });
+      it('computed key named like the field', () => {
+        expect(
+          getField(
+            ['core', 'builder'],
+            dedent`
+            const builder = 'other';
+            export const core = { [builder]: 'webpack5' }
+            `
+          )
+        ).toBeUndefined();
+      });
       it('found scalar', () => {
         expect(
           getField(
diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index b6db182ac911..61be8283081e 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -25,6 +25,7 @@ import {
   isStringLiteral,
   locationOf,
   placeableTextOf,
+  staticKey,
   unwrapExpression,
   walk,
 } from './estree/ast.ts';
@@ -68,26 +69,15 @@ const getCsfParsingErrorMessage = ({
     `;
 };
 
-const propKey = (p: Node) => {
-  if (p.type !== 'Property') {
-    return null;
-  }
-  if (p.key.type === 'Identifier') {
-    return p.key.name;
-  }
-  if (isStringLiteral(p.key)) {
-    return p.key.value;
-  }
-  return null;
-};
-
 const _getPath = (path: string[], node: Node | null | undefined): Node | undefined => {
   if (path.length === 0) {
     return node ?? undefined;
   }
   if (node?.type === 'ObjectExpression') {
     const [first, ...rest] = path;
-    const field = node.properties.find((p) => propKey(p) === first) as E.ObjectProperty | undefined;
+    const field = node.properties.find((p) => staticKey(p) === first) as
+      | E.ObjectProperty
+      | undefined;
     if (field) {
       return _getPath(rest, field.value);
     }
@@ -104,7 +94,9 @@ const _getPathProperties = (path: string[], node: Node): E.ObjectProperty[] | un
   }
   if (node.type === 'ObjectExpression') {
     const [first, ...rest] = path;
-    const field = node.properties.find((p) => propKey(p) === first) as E.ObjectProperty | undefined;
+    const field = node.properties.find((p) => staticKey(p) === first) as
+      | E.ObjectProperty
+      | undefined;
     if (field) {
       // FXIME handle spread etc.
       if (rest.length === 0) {
@@ -381,30 +373,22 @@ export class ConfigFile implements CsfObject {
   _parseExportsObject(exportsObject: E.ObjectExpression) {
     this._exportsObject = exportsObject;
     for (const p of exportsObject.properties) {
-      const exportName = propKey(p);
+      const exportName = staticKey(p);
       if (exportName) {
         this._exports[exportName] = this._resolveDeclaration((p as E.ObjectProperty).value);
       }
     }
   }
 
-  /** Unwraps TS assertions/satisfies from a node, to get the underlying node. */
-  _unwrap = (node: Node | undefined | null): any => {
-    if (node?.type === 'TSAsExpression' || node?.type === 'TSSatisfiesExpression') {
-      return this._unwrap(node.expression);
-    }
-    return node;
-  };
-
   /**
    * Resolve a declaration node by unwrapping TS assertions/satisfies and following identifiers to
    * resolve the correct node in case it's an identifier.
    */
   _resolveDeclaration = (node: Node, isTopLevel = true) => {
-    const decl = this._unwrap(node);
+    const decl = unwrapExpression(node);
     if (decl?.type === 'Identifier' && isTopLevel) {
       const initialization = findVarInitialization(decl.name, this._program);
-      return initialization ? this._unwrap(initialization) : decl;
+      return initialization ? unwrapExpression(initialization) : decl;
     }
     return decl;
   };
@@ -491,7 +475,9 @@ export class ConfigFile implements CsfObject {
                 this._parseExportsObject(value);
                 continue;
               }
-              this._exports[exportName] = value;
+              if (value) {
+                this._exports[exportName] = value;
+              }
               this._exportDecls[exportName] = decl;
             }
           }
@@ -521,7 +507,7 @@ export class ConfigFile implements CsfObject {
           if (exportObject?.type === 'ObjectExpression') {
             this._exportsObject = exportObject;
             for (const p of exportObject.properties as Node[]) {
-              const exportName = propKey(p);
+              const exportName = staticKey(p);
               if (exportName) {
                 this._exports[exportName] = this._resolveDeclaration(
                   (p as E.ObjectProperty).value,
@@ -677,7 +663,7 @@ export class ConfigFile implements CsfObject {
   removeField(path: string[]) {
     const editor = this._editor;
     const removeProperty = (object: E.ObjectExpression, prop: string) => {
-      const member = object.properties.find((p) => propKey(p) === prop);
+      const member = object.properties.find((p) => staticKey(p) === prop);
       if (member) {
         removeFromList(editor, objectList(editor, object), [member]);
       }
diff --git a/code/core/src/csf-tools/ConfigObject.test.ts b/code/core/src/csf-tools/ConfigObject.test.ts
index 94859e7197e4..dc97ecd28eaf 100644
--- a/code/core/src/csf-tools/ConfigObject.test.ts
+++ b/code/core/src/csf-tools/ConfigObject.test.ts
@@ -1,8 +1,8 @@
 import { describe, expect, it } from 'vitest';
 
 import { loadConfig, printConfig } from './ConfigFile.ts';
-import { parseExpression, printExpression } from './CsfObject.ts';
-import type { E } from './estree/ast.ts';
+import { parseExpression } from './CsfObject.ts';
+import { type E, textOf } from './estree/ast.ts';
 
 const configurations = [
   `export default { parameters: { a11y: { element: '#root' } } };`,
@@ -260,7 +260,7 @@ describe('ConfigFile mutations', () => {
         if (value.type !== 'FunctionExpression') {
           throw new Error('Expected a function expression');
         }
-        const source = printExpression(value);
+        const source = textOf(value);
         return parseExpression(`${source.slice(0, source.lastIndexOf('}'))} spy(); }`);
       })
     ).toEqual({ ok: true, changed: true });
@@ -376,8 +376,8 @@ describe('ConfigFile mutations', () => {
     expect(config.move(['parameters', 'a'], ['first'])).toEqual({ ok: true, changed: true });
 
     const output = loadConfig(printConfig(config).code).parse();
-    expect(printExpression(output.get(['first'])!)).toBe('f(), 1');
-    expect(printExpression(output.get(['custom-field'])!)).toBe('g(), 2');
+    expect(textOf(output.get(['first'])!)).toBe('f(), 1');
+    expect(textOf(output.get(['custom-field'])!)).toBe('g(), 2');
   });
 
   it('keeps the parentheses of a comma expression it copies or appends to an array', () => {
diff --git a/code/core/src/csf-tools/ConfigObject.ts b/code/core/src/csf-tools/ConfigObject.ts
index 7329c7ce4360..8ee1f730e400 100644
--- a/code/core/src/csf-tools/ConfigObject.ts
+++ b/code/core/src/csf-tools/ConfigObject.ts
@@ -12,11 +12,13 @@ import {
   type E,
   type Node,
   type Property,
+  type Span,
   isIdentifier,
   isStringLiteral,
+  isTSWrapper,
+  isValidIdentifier,
   locationOf,
   outerSpan,
-  staticKey,
   walk,
 } from './estree/ast.ts';
 import {
@@ -33,8 +35,6 @@ import {
 import { generateUid } from './estree/scope.ts';
 import { placeableValueSource } from './estree/values.ts';
 
-type Span = { start: number; end: number };
-
 const isConfigFactory = (editor: SourceEditor, callee: Node): boolean => {
   if (callee.type !== 'Identifier') {
     return false;
@@ -58,10 +58,6 @@ const isModuleExports = (node: Node) =>
   (isIdentifier(node.property, 'exports') || isStringLiteral(node.property)) &&
   (node.property.type === 'Identifier' || (node.property as E.StringLiteral).value === 'exports');
 
-const TS_WRAPPERS = new Set(['TSAsExpression', 'TSSatisfiesExpression', 'TSNonNullExpression']);
-
-const isValidIdentifier = (name: string) => /^[A-Za-z_$][\w$]*$/.test(name);
-
 // `custom-field` → `customField`
 const toIdentifier = (name: string) =>
   name
@@ -132,7 +128,7 @@ export const locateConfigRoot = (
       return true;
     }
     let parent = parents.get(reference);
-    while (parent && TS_WRAPPERS.has(parent.type)) {
+    while (parent && isTSWrapper(parent)) {
       parent = parents.get(parent);
     }
     return (
@@ -498,5 +494,3 @@ export function createConfigObject(
   };
   return { ok: true, object: createCsfObject({ kind: 'config' }, host, [], report, markChanged) };
 }
-
-export { staticKey };
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index 97005b1e484b..c5da8d5fb119 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -27,7 +27,7 @@ import {
   type Node,
   type SourceLocation,
   children,
-  identifierKey,
+  staticKey,
   isFunction,
   isIdentifier,
   isRegExpLiteral,
@@ -146,7 +146,7 @@ function parseTestTags(optionsNode: Node | null | undefined, program: E.Program)
   if (node?.type === 'ObjectExpression') {
     const tagsProp = node.properties.find(
       (property): property is E.ObjectProperty =>
-        property.type === 'Property' && identifierKey(property) === 'tags' && !property.method
+        property.type === 'Property' && staticKey(property) === 'tags' && !property.method
     );
 
     if (tagsProp) {
@@ -227,9 +227,7 @@ const hasMount = (play: Node | undefined) => {
   ) {
     const [arg] = play.params;
     if (arg?.type === 'ObjectPattern') {
-      return arg.properties.some(
-        (prop) => prop.type === 'Property' && identifierKey(prop) === 'mount'
-      );
+      return arg.properties.some((prop) => prop.type === 'Property' && staticKey(prop) === 'mount');
     }
   }
   return false;
@@ -523,7 +521,7 @@ export class CsfFile {
     this._metaNode = declaration;
     const meta: StaticMeta = {};
     for (const p of declaration.properties) {
-      const key = identifierKey(p);
+      const key = staticKey(p);
       if (p.type !== 'Property' || key === undefined) {
         continue;
       }
@@ -757,7 +755,7 @@ export class CsfFile {
           parameters.__isArgsStory = true; // assume default render is an args story
           // CSF3 object export
           for (const p of storyNode.properties) {
-            const key = identifierKey(p);
+            const key = staticKey(p);
             if (p.type !== 'Property' || key === undefined) {
               continue;
             }
@@ -776,7 +774,7 @@ export class CsfFile {
             } else if (key === 'parameters' && p.value.type === 'ObjectExpression') {
               const idProperty = p.value.properties.find(
                 (property): property is E.ObjectProperty =>
-                  property.type === 'Property' && identifierKey(property) === '__id'
+                  property.type === 'Property' && staticKey(property) === '__id'
               );
               if (idProperty) {
                 parameters.__id = (idProperty.value as E.StringLiteral).value;
@@ -827,7 +825,7 @@ export class CsfFile {
           const storyNode = decl;
           if (storyNode?.type === 'ObjectExpression') {
             for (const p of storyNode.properties) {
-              const key = identifierKey(p);
+              const key = staticKey(p);
               if (p.type === 'Property' && key !== undefined) {
                 annotations[key] = p.value;
               }
diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index 9765504a4c8d..0e2eae45acf9 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -2,7 +2,8 @@ import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import { loadCsf, printCsf } from './CsfFile.ts';
 import { loadConfig, printConfig } from './ConfigFile.ts';
-import { type CsfValue, parseExpression, printExpression } from './CsfObject.ts';
+import { type CsfValue, parseExpression } from './CsfObject.ts';
+import { textOf } from './estree/ast.ts';
 
 const parse = (source: string) =>
   loadCsf(source, { makeTitle: (title) => title ?? 'title' }).parse();
@@ -19,8 +20,8 @@ describe('CsfObject', () => {
       }).parse();
       const [meta] = csf.objects({ stories: false });
 
-      expect(printExpression(meta.get(['parameters'])!)).toBe(expression);
-      expect(printExpression(parseExpression(expression))).toBe(expression);
+      expect(textOf(meta.get(['parameters'])!)).toBe(expression);
+      expect(textOf(parseExpression(expression))).toBe(expression);
     }
   );
 
@@ -147,7 +148,7 @@ describe('CsfObject', () => {
     expect(story.set(['c'], parseExpression('1 //x'))).toEqual({ ok: true, changed: true });
 
     const [, again] = parse(printCsf(csf).code).objects();
-    expect(printExpression(again.get(['b'])!)).toBe('1, 2');
+    expect(textOf(again.get(['b'])!)).toBe('1, 2');
     expect(again.getValue(['c'])).toBe(1);
     expect(csf.mutationDiagnostics).toEqual([]);
   });
@@ -224,7 +225,7 @@ describe('CsfObject', () => {
       if (value.type !== 'FunctionExpression') {
         throw new Error('Expected a function expression');
       }
-      const source = printExpression(value);
+      const source = textOf(value);
       return parseExpression(`${source.slice(0, source.lastIndexOf('}'))} return true; }`);
     });
     expect(printCsf(csf).code).toContain('beforeEach()');
@@ -564,7 +565,7 @@ describe('CsfObject', () => {
     expect(
       meta.transform(['parameters', 'backgrounds', 'values'], (values) =>
         values.type === 'ArrayExpression' && values.elements[0]
-          ? parseExpression(`{\n  gray: ${printExpression(values.elements[0])}\n}`)
+          ? parseExpression(`{\n  gray: ${textOf(values.elements[0])}\n}`)
           : undefined
       )
     ).toEqual({ ok: true, changed: true });
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index e060f19e7618..1273f7325042 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -7,7 +7,6 @@ import {
   expressionFromSource,
   placeableTextOf,
   staticKey,
-  textOf,
   unwrapExpression,
 } from './estree/ast.ts';
 import {
@@ -91,20 +90,6 @@ export type CsfExpression = E.Expression;
  */
 export const parseExpression = (code: string): CsfExpression => expressionFromSource(code);
 
-/**
- * Source of an expression returned by `get` or `parseExpression`, or of any node inside one. To
- * build new code around it, use `placeableTextOf`, which keeps the parentheses of a comma expression.
- */
-export const printExpression = (node: Node): string => {
-  const source = textOf(node);
-  if (source === undefined) {
-    throw new Error(
-      'CsfObject: expressions must come from `get`, `transform` or `parseExpression`'
-    );
-  }
-  return source;
-};
-
 export interface CsfObject {
   /**
    * Identify the config, meta, story, annotation, or call argument this editor represents.
diff --git a/code/core/src/csf-tools/README.md b/code/core/src/csf-tools/README.md
index 7e629cb2e939..1bd50dc4b1fa 100644
--- a/code/core/src/csf-tools/README.md
+++ b/code/core/src/csf-tools/README.md
@@ -2,10 +2,10 @@
 
 An experimental library to read, analyze, transform, and write CSF programmatically.
 
-- Read - Parse a CSF file with Babel
-- Analyze - Extract its metadata & stories based on the Babel AST
+- Read - Parse a CSF file with OXC
+- Analyze - Extract its metadata & stories from the ESTree AST
 - Transform - Edit stories through `CsfFile.objects()` and preview or main configuration directly through `ConfigFile`
-- Write - Write the AST back to a file
+- Write - Write the edited source back to a file; code no edit touches stays as written
 
 It can parse MDX into CSF.
 
@@ -16,7 +16,7 @@ It can parse MDX into CSF.
 
 Each editor reads and writes static property paths with `get`, `getValue`, `set`, `transform`, `remove`, `rename`, `move`, and `group`.
 `get` returns an AST expression; `getValue` reads plain values from literals, nested arrays and objects, and local constants without executing code. Missing fields return `undefined`. Values that cannot be resolved statically return `undefined` and add a mutation diagnostic; reads never return a partially decoded object.
-`set` accepts Babel expressions or plain strings, numbers, booleans, `null`, `undefined`, and nested arrays or objects of those values. Values are copied into the AST; subsequent changes to the input do not affect the file. Top-level expression-shaped objects are interpreted as AST nodes.
+`set` accepts an expression from `get` or `parseExpression`, or plain strings, numbers, booleans, `null`, `undefined`, and nested arrays or objects of those values. Plain values are printed into the source, so later changes to the input do not affect the file.
 Successful removals and moves recursively remove empty source parents, stopping at the editor's root object or an empty parent that shadows an earlier spread or computed key. Removing a field that could reveal an earlier spread value produces a diagnostic. Moves clean up after inserting the destination, so shared ancestors remain intact. Unrelated empty objects are preserved.
 Nested object paths can follow local constants used only by that object; shared or reassigned references remain untouched.
 Nodes reused by `transform` keep their original source, so relocating a value prints it as written instead of pretty-printing it.
diff --git a/code/core/src/csf-tools/enrichCsf.ts b/code/core/src/csf-tools/enrichCsf.ts
index 72dbe6b7ff49..2fbf7469fa46 100644
--- a/code/core/src/csf-tools/enrichCsf.ts
+++ b/code/core/src/csf-tools/enrichCsf.ts
@@ -1,7 +1,7 @@
 import { type CsfEnricher } from 'storybook/internal/types';
 
 import type { CsfFile } from './CsfFile.ts';
-import { type E, type Node, identifierKey } from './estree/ast.ts';
+import { type E, type Node, staticKey } from './estree/ast.ts';
 import {
   type SourceEditor,
   appendMembers,
@@ -64,7 +64,7 @@ const addComponentDescription = (
 ) => {
   if (!path.length) {
     const hasExistingComponent = node.properties.some(
-      (p) => p.type === 'Property' && identifierKey(p) === 'component'
+      (p) => p.type === 'Property' && staticKey(p) === 'component'
     );
     if (!hasExistingComponent) {
       // make this the lowest-priority so that if the user is object-spreading on top of it,
@@ -76,7 +76,7 @@ const addComponentDescription = (
   const [first, ...rest] = path;
   const existing = node.properties.find(
     (p): p is E.ObjectProperty =>
-      p.type === 'Property' && identifierKey(p) === first && p.value.type === 'ObjectExpression'
+      p.type === 'Property' && staticKey(p) === first && p.value.type === 'ObjectExpression'
   );
   if (existing) {
     addComponentDescription(editor, existing.value as E.ObjectExpression, rest, value);
@@ -127,7 +127,7 @@ export const extractSource = (node: Node, code: string) => {
   return src ? code.slice(src.start, src.end) : '';
 };
 
-export const leadingComments = (node: Node | undefined, editor: SourceEditor) => {
+const leadingComments = (node: Node | undefined, editor: SourceEditor) => {
   const start = (node as { start?: number } | undefined)?.start;
   return start === undefined ? [] : triviaBefore(editor, start).comments;
 };
diff --git a/code/core/src/csf-tools/estree/ast.ts b/code/core/src/csf-tools/estree/ast.ts
index 408d4c4250ab..97549e0c75d6 100644
--- a/code/core/src/csf-tools/estree/ast.ts
+++ b/code/core/src/csf-tools/estree/ast.ts
@@ -270,10 +270,13 @@ const WRAPPERS = new Set([
   'TSTypeAssertion',
 ]);
 
+/** Whether a node is a TS assertion, satisfies or non-null wrapper around an expression. */
+export const isTSWrapper = (node: Node) => WRAPPERS.has(node.type);
+
 /** Peel TS assertion/satisfies wrappers off an expression node. */
 export const unwrapExpression = <T extends Node | null | undefined>(node: T): T => {
   let current: Node | null | undefined = node;
-  while (current && WRAPPERS.has(current.type)) {
+  while (current && isTSWrapper(current)) {
     current = (current as { expression: Node }).expression;
   }
   return current as T;
@@ -282,8 +285,15 @@ export const unwrapExpression = <T extends Node | null | undefined>(node: T): T
 // Object literal properties written as `key: value`, methods or accessors (not spreads).
 export type Property = E.ObjectProperty;
 
-// Static key of an object member, or `undefined` when only running the code would produce it.
-export const staticKey = (member: Property): string | undefined => {
+/**
+ * Static key of an object member, or `undefined` for a spread or a key only running the code would
+ * produce. A computed key written as a literal is static: `{ ['a']: 1 }` names `a`, `{ [a]: 1 }`
+ * does not.
+ */
+export const staticKey = (member: Node): string | undefined => {
+  if (member.type !== 'Property') {
+    return undefined;
+  }
   const key = member.key as Node;
   if (isStringLiteral(key)) {
     return key.value;
@@ -300,16 +310,12 @@ export const staticKey = (member: Property): string | undefined => {
   return undefined;
 };
 
-// Ignores `computed` on purpose, matching the Babel `t.isIdentifier(p.key)` checks.
-export const identifierKey = (member: Node): string | undefined =>
-  member.type === 'Property' && member.key.type === 'Identifier' ? member.key.name : undefined;
-
 export const objectProperty = (object: E.ObjectExpression, name: string): Property | undefined =>
   object.properties.find(
     (member): member is Property => member.type === 'Property' && staticKey(member) === name
   );
 
-type Span = { start: number; end: number };
+export type Span = { start: number; end: number };
 
 export const sourceOf = (code: string, node: Span) => code.slice(node.start, node.end);
 
@@ -377,35 +383,33 @@ const normalize = (root: Node, module: ParsedModule | undefined) => {
 // The text of each expression `expressionFromSource` returns: as written, and as it is placed.
 const fragments = new WeakMap<object, { text: string; placeable: string }>();
 
-/**
- * Original source text of a node from `SourceEditor` or `expressionFromSource`, or `undefined` for
- * any other node, such as one from `parseModule`.
- */
-export const textOf = (node: Node): string | undefined => {
-  const fragment = fragments.get(node);
-  if (fragment) {
-    return fragment.text;
+const codeOf = (node: Node) => {
+  const code = nodeModules.get(node)?.code;
+  if (code === undefined) {
+    throw new Error(
+      `Cannot print a ${node.type} node whose source is unknown: expressions must come from \`get\`, \`transform\` or \`parseExpression\``
+    );
   }
-  const module = nodeModules.get(node);
-  return module === undefined ? undefined : sourceOf(module.code, node as Node & Span);
+  return code;
 };
 
 /**
- * Source text of a node from `SourceEditor` or `expressionFromSource` that can be placed as a value:
- * a comma expression keeps its parentheses or gets them, and a trailing line comment ends its line.
- * Unlike `textOf`, it throws for any other node.
+ * Source text of a node from `SourceEditor` or `expressionFromSource`, as written. Throws for any
+ * other node, such as one from `parseModule`.
+ */
+export const textOf = (node: Node): string =>
+  fragments.get(node)?.text ?? sourceOf(codeOf(node), node as Node & Span);
+
+/**
+ * `textOf` for placing a node as a value: a comma expression keeps its parentheses or gets them,
+ * and a trailing line comment ends its line.
  */
 export const placeableTextOf = (node: Node): string => {
   const fragment = fragments.get(node);
   if (fragment) {
     return fragment.placeable;
   }
-  const code = nodeModules.get(node)?.code;
-  if (code === undefined) {
-    throw new Error(
-      `Cannot print a ${node.type} node whose source is unknown: expressions must come from \`get\`, \`transform\` or \`parseExpression\``
-    );
-  }
+  const code = codeOf(node);
   if (node.type !== 'SequenceExpression') {
     return sourceOf(code, node as Node & Span);
   }
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index eb09c7a14e0e..80bdd78a224f 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -6,6 +6,7 @@ import {
   type Node,
   type ParsedModule,
   type Property,
+  type Span,
   isNode,
   isStringLiteral,
   isValidIdentifier,
@@ -19,8 +20,6 @@ import {
 } from './ast.ts';
 import { type ScopeInfo, analyzeScopes } from './scope.ts';
 
-type Span = { start: number; end: number };
-
 // Maps in a chain are matched by source name, so every map of an editor uses the same one. A
 // private member would make the class nominal and break assignability between `src` and `dist`.
 const mapSource = (editor: { fileName: string | undefined }) => editor.fileName ?? 'source';
diff --git a/code/core/src/csf-tools/index.ts b/code/core/src/csf-tools/index.ts
index 217c21695960..b3f24a1fe7b7 100644
--- a/code/core/src/csf-tools/index.ts
+++ b/code/core/src/csf-tools/index.ts
@@ -9,32 +9,32 @@ export type {
   CsfObjectTarget,
   CsfValue,
 } from './CsfObject.ts';
-export { parseExpression, printExpression } from './CsfObject.ts';
+export { parseExpression } from './CsfObject.ts';
 export * from './ConfigFile.ts';
 export * from './jsdoc.ts';
 export * from './enrichCsf.ts';
 export { vitestTransform } from './vitest-plugin/transformer.ts';
 export { componentTransform } from './vitest-plugin/component-transformer.ts';
 export * from './story-shape/index.ts';
-export type { E as ESTree, Node as ESTreeNode, SourceLocation } from './estree/ast.ts';
+export type { E as ESTree, Node as ESTreeNode } from './estree/ast.ts';
 export {
   expressionFromSource,
   isStringLiteral,
+  isTSWrapper,
   isValidIdentifier,
-  locationOf,
   normalizeLineEndings,
   outerSpan,
   parseModule,
   placeableTextOf,
+  staticKey,
   textOf,
-  unwrapExpression as unwrapESTreeExpression,
+  unwrapExpression,
   walk,
 } from './estree/ast.ts';
 export { SourceEditor } from './estree/editor.ts';
-export { analyzeScopes, generateUid, type Binding, type ScopeInfo } from './estree/scope.ts';
+export { generateUid, type Binding, type ScopeInfo } from './estree/scope.ts';
 export {
   type List,
-  appendMembers,
   appendStatement,
   appendToList,
   argumentList,
@@ -45,15 +45,12 @@ export {
   itemText,
   lineIndent,
   objectList,
-  prependMembers,
   prependStatement,
   prependToList,
-  printKey,
   printString,
   printValue,
   reindent,
   removeFromList,
-  removeMembers,
   removeStatement,
   removeStatements,
   setImportSpecifiers,
diff --git a/code/core/src/csf-tools/story-shape/authored-source.ts b/code/core/src/csf-tools/story-shape/authored-source.ts
index 28504d963862..0f159ba262d1 100644
--- a/code/core/src/csf-tools/story-shape/authored-source.ts
+++ b/code/core/src/csf-tools/story-shape/authored-source.ts
@@ -1,9 +1,9 @@
-import { type Node, isStringLiteral } from '../estree/ast.ts';
+import { type Node, isStringLiteral, unwrapExpression } from '../estree/ast.ts';
 import type { ReferenceContext, ResolvedMembers } from './resolve-members.ts';
-import { resolveObjectMembers, sourceOf } from './resolve-members.ts';
+import { oneLineTextOf, resolveObjectMembers } from './resolve-members.ts';
 import { resolveArgValue } from './resolve-arg-value.ts';
 import type { ResolvedStoryArgs } from './resolve-story-args.ts';
-import { templateParts, unwrapExpression } from './utils.ts';
+import { templateParts } from './utils.ts';
 
 export type AuthoredSource =
   | { kind: 'missing' }
@@ -54,7 +54,7 @@ export const authoredSource = (
     if (parts && parts.expressions.length === 0) {
       return { kind: 'code', code: parts.quasis[0] ?? '' };
     }
-    return { kind: 'unresolvable', source: sourceOf(code.node) };
+    return { kind: 'unresolvable', source: oneLineTextOf(code.node) };
   }
   return { kind: 'missing' };
 };
@@ -77,7 +77,7 @@ const memberAt = (
         return { kind: 'missing' };
       }
       if (isOpaqueValue(object)) {
-        return { kind: 'unresolvable', source: sourceOf(original) };
+        return { kind: 'unresolvable', source: oneLineTextOf(original) };
       }
       return depth === 0 ? { kind: 'missing' } : { kind: 'masked' };
     }
diff --git a/code/core/src/csf-tools/story-shape/index.ts b/code/core/src/csf-tools/story-shape/index.ts
index 918622025abd..f428de5249d8 100644
--- a/code/core/src/csf-tools/story-shape/index.ts
+++ b/code/core/src/csf-tools/story-shape/index.ts
@@ -24,12 +24,11 @@ export {
 } from './reference-context.ts';
 export { isSelfContained, resolveArgValue, type ResolvedArgValue } from './resolve-arg-value.ts';
 export {
-  codeOf,
   resolveArgsRecord,
   resolveBindingMembers,
   resolveObjectMembers,
   resolveReferencedValue,
-  sourceOf,
+  oneLineTextOf,
   type ReferenceContext,
   type ReferenceModule,
   type ResolvedMembers,
@@ -53,14 +52,12 @@ export {
   csfFactoryReceiver,
   isCanonicalCsf2BindCall,
   isCsfFactoryCall,
-  keyOf,
   metaObject,
   propertyValue,
   resolveIdentifierInit,
   resolveReturnedObjectExpression,
   returnedExpression,
   templateParts,
-  unwrapExpression,
   withoutTypeCalls,
   type FunctionNode,
   type TemplateParts,
diff --git a/code/core/src/csf-tools/story-shape/render.ts b/code/core/src/csf-tools/story-shape/render.ts
index 8b8cb826ef43..401be1bd51df 100644
--- a/code/core/src/csf-tools/story-shape/render.ts
+++ b/code/core/src/csf-tools/story-shape/render.ts
@@ -1,5 +1,5 @@
 import type { CsfFile } from '../CsfFile.ts';
-import type { E, Node } from '../estree/ast.ts';
+import { type E, type Node, staticKey } from '../estree/ast.ts';
 import type { SourceEditor } from '../estree/editor.ts';
 import { normalizeStoryDeclaration, storyShapeError } from './normalize-story.ts';
 import {
@@ -7,7 +7,7 @@ import {
   type ResolvedMembers,
   resolveObjectMembers,
 } from './resolve-members.ts';
-import { type FunctionNode, keyOf, metaObject, resolveIdentifierInit } from './utils.ts';
+import { type FunctionNode, metaObject, resolveIdentifierInit } from './utils.ts';
 
 /** A function a story or meta supplies through `render`; a method shorthand is its function. */
 export type RenderFunction = FunctionNode;
@@ -114,7 +114,7 @@ const readRender = (
   let renderIndex = -1;
   for (let index = properties.length - 1; index >= 0; index -= 1) {
     const property = properties[index];
-    if (property.type === 'Property' && keyOf(property) === 'render') {
+    if (property.type === 'Property' && staticKey(property) === 'render') {
       renderIndex = index;
       break;
     }
diff --git a/code/core/src/csf-tools/story-shape/resolve-arg-value.test.ts b/code/core/src/csf-tools/story-shape/resolve-arg-value.test.ts
index 367ebd495f27..aff5d0c90917 100644
--- a/code/core/src/csf-tools/story-shape/resolve-arg-value.test.ts
+++ b/code/core/src/csf-tools/story-shape/resolve-arg-value.test.ts
@@ -6,7 +6,7 @@ import {
   type ReferenceContext,
   resolveArgsRecord,
   resolveBindingMembers,
-  sourceOf,
+  oneLineTextOf,
 } from './resolve-members.ts';
 
 const indexed = (editor: SourceEditor) => {
@@ -23,7 +23,7 @@ const valueOf = (code: string, expression: string) => {
   const record = resolveArgsRecord(resolveBindingMembers(ctx, 'Story')?.properties.args, ctx);
   const resolved = resolveArgValue(record.properties.v, ctx);
   return {
-    node: sourceOf(resolved.node),
+    node: oneLineTextOf(resolved.node),
     imports: resolved.imports.map((ref) => `${ref.localImportName}:${ref.importId}`),
     unresolved: resolved.unresolved,
   };
diff --git a/code/core/src/csf-tools/story-shape/resolve-arg-value.ts b/code/core/src/csf-tools/story-shape/resolve-arg-value.ts
index 1997943beaae..416566b8db22 100644
--- a/code/core/src/csf-tools/story-shape/resolve-arg-value.ts
+++ b/code/core/src/csf-tools/story-shape/resolve-arg-value.ts
@@ -7,12 +7,14 @@ import {
   parseFragment,
   isValidIdentifier,
   placeableTextOf,
+  staticKey,
+  textOf,
+  unwrapExpression,
 } from '../estree/ast.ts';
 import { analyzeScopes } from '../estree/scope.ts';
 import { type ImportRef } from './import-statements.ts';
 import { type ImportBinding, collectImportBindings } from './imports.ts';
-import { type ReferenceContext, codeOf, resolveArgsRecord } from './resolve-members.ts';
-import { keyOf, unwrapExpression } from './utils.ts';
+import { type ReferenceContext, resolveArgsRecord } from './resolve-members.ts';
 
 /** An arg value read through to the definition it names, and what printing it still depends on. */
 export interface ResolvedArgValue {
@@ -100,7 +102,7 @@ const inlineSpreads = (node: Node, ctx: ReferenceContext, unresolved: string[]):
           element === null
             ? ''
             : element.type === 'SpreadElement'
-              ? codeOf(element)
+              ? textOf(element)
               : placeableTextOf(inlineSpreads(element, ctx, unresolved))
         )
         .join(', ')}]`
@@ -167,12 +169,12 @@ const objectFrom = (
       if (property.method || property.kind !== 'init') {
         return undefined;
       }
-      const name = keyOf(property);
+      const name = staticKey(property);
       key = property.computed
         ? `[${placeableTextOf(property.key)}]`
-        : name !== null && isValidIdentifier(name, false)
+        : name !== undefined && isValidIdentifier(name, false)
           ? name
-          : codeOf(property.key);
+          : textOf(property.key);
       original = property.value;
     } else {
       if (property.value.type === 'Property') {
@@ -216,9 +218,9 @@ const followValue = (node: Node, ctx: ReferenceContext, seen: Set<string>): Node
 
 const freeNames = (node: Node): Set<string> => {
   if (node.type === 'Property') {
-    return unboundNames(`({ ${codeOf(node)} })`);
+    return unboundNames(`({ ${textOf(node)} })`);
   }
-  return unboundNames(`(${codeOf(node)})`);
+  return unboundNames(`(${textOf(node)})`);
 };
 
 // Names every scope has, so a snippet never needs to import them.
diff --git a/code/core/src/csf-tools/story-shape/resolve-members.test.ts b/code/core/src/csf-tools/story-shape/resolve-members.test.ts
index f515a39fa20d..b2678374f1ad 100644
--- a/code/core/src/csf-tools/story-shape/resolve-members.test.ts
+++ b/code/core/src/csf-tools/story-shape/resolve-members.test.ts
@@ -11,7 +11,7 @@ import {
   resolveArgsRecord,
   resolveBindingMembers,
   resolveReferencedValue,
-  sourceOf,
+  oneLineTextOf,
 } from './resolve-members.ts';
 
 const indexed = (editor: SourceEditor) => {
@@ -44,7 +44,7 @@ const argsOf = (code: string, storyName: string, ctx = contextOf({ 'entry.ts': c
   const record = resolveArgsRecord(story?.properties.args, ctx);
   return {
     args: Object.fromEntries(
-      Object.entries(record.properties).map(([key, node]) => [key, sourceOf(node)])
+      Object.entries(record.properties).map(([key, node]) => [key, oneLineTextOf(node)])
     ),
     unresolved: [...(story?.unresolved ?? []), ...record.unresolved],
   };
@@ -670,7 +670,7 @@ describe('resolveReferencedValue', () => {
   const valueOf = (ctx: ReferenceContext, expression: string) => {
     const node = expressionFromSource(expression);
     const resolved = resolveReferencedValue(ctx, node);
-    return resolved && { value: sourceOf(resolved.node), filePath: resolved.ctx.filePath };
+    return resolved && { value: oneLineTextOf(resolved.node), filePath: resolved.ctx.filePath };
   };
 
   it('reads a member of a local object', () => {
diff --git a/code/core/src/csf-tools/story-shape/resolve-members.ts b/code/core/src/csf-tools/story-shape/resolve-members.ts
index c1f358377e88..2fafec2f570b 100644
--- a/code/core/src/csf-tools/story-shape/resolve-members.ts
+++ b/code/core/src/csf-tools/story-shape/resolve-members.ts
@@ -6,17 +6,13 @@ import {
   expressionFromSource,
   isStringLiteral,
   placeableTextOf,
+  staticKey,
   textOf,
+  unwrapExpression,
 } from '../estree/ast.ts';
 import type { SourceEditor } from '../estree/editor.ts';
 import { importedName, isTypeSpecifier } from './imports.ts';
-import {
-  csfFactoryReceiver,
-  isCanonicalCsf2BindCall,
-  isCsfFactoryCall,
-  keyOf,
-  unwrapExpression,
-} from './utils.ts';
+import { csfFactoryReceiver, isCanonicalCsf2BindCall, isCsfFactoryCall } from './utils.ts';
 import { isFunction } from '../estree/ast.ts';
 
 /** Members of an object, and what reading it statically could not account for. */
@@ -66,17 +62,8 @@ export interface StoryReferences extends StoryReferenceResolver {
   filePath: string;
 }
 
-/** Source text of a node exactly as written, for printing it or building code around it. */
-export const codeOf = (node: Node): string => {
-  const text = textOf(node);
-  if (text === undefined) {
-    throw new Error(`Cannot print a ${node.type} node whose source is unknown`);
-  }
-  return text;
-};
-
 /** Source text of a node on one line, for naming an expression a static pass could not read. */
-export const sourceOf = (node: Node): string => codeOf(node).replace(/\s*\n\s*/g, ' ');
+export const oneLineTextOf = (node: Node): string => textOf(node).replace(/\s*\n\s*/g, ' ');
 
 const complete = (properties: Record<string, Node> = {}): ResolvedMembers => ({
   properties,
@@ -122,7 +109,7 @@ export const resolveArgsRecord = (
     : {
         properties: {},
         shadowed: [],
-        unresolved: [`args: ${sourceOf(unwrapped)}`],
+        unresolved: [`args: ${oneLineTextOf(unwrapped)}`],
       };
 };
 
@@ -137,7 +124,7 @@ const asArgsRecord = (members: ResolvedMembers): ResolvedMembers => {
   const unresolved = [...members.unresolved];
   for (const [key, node] of methods) {
     delete properties[key];
-    unresolved.push(sourceOf(node));
+    unresolved.push(oneLineTextOf(node));
   }
   return {
     properties,
@@ -230,7 +217,7 @@ const membersOf = (
     if (property.type === 'SpreadElement') {
       const spread = spreadMembers(ctx, property, visited);
       if (spread === undefined || spread.unresolved.length > 0) {
-        shadowKnownMembers(sourceOf(property));
+        shadowKnownMembers(oneLineTextOf(property));
         continue;
       }
       for (const [key, value] of Object.entries(spread.properties)) {
@@ -242,10 +229,10 @@ const membersOf = (
       continue;
     }
 
-    const key = keyOf(property);
-    if (key === null) {
+    const key = staticKey(property);
+    if (key === undefined) {
       // A dynamic key can supply or shadow any member at runtime.
-      shadowKnownMembers(sourceOf(property));
+      shadowKnownMembers(oneLineTextOf(property));
       continue;
     }
     if (property.kind !== 'init' || (property.method && (property.value as E.Function).generator)) {
@@ -253,7 +240,7 @@ const membersOf = (
       // the story produces.
       delete properties[key];
       shadowed.delete(key);
-      unresolved.push(sourceOf(property));
+      unresolved.push(oneLineTextOf(property));
       continue;
     }
     properties[key] = property.method ? property : property.value;
@@ -566,7 +553,7 @@ const declaredMembers = (
       members: {
         properties: {},
         shadowed: [],
-        unresolved: [sourceOf(unwrapped)],
+        unresolved: [oneLineTextOf(unwrapped)],
       },
     };
   }
@@ -749,7 +736,7 @@ const assignedMembers = (
       continue;
     }
     if (depth > 1 || outermost === undefined || assignment.operator !== '=') {
-      unresolved.push(sourceOf(assignment));
+      unresolved.push(oneLineTextOf(assignment));
       continue;
     }
     properties[outermost] = assignment.right;
diff --git a/code/core/src/csf-tools/story-shape/resolve-story-args.ts b/code/core/src/csf-tools/story-shape/resolve-story-args.ts
index fd2bb2806276..b22800bc624f 100644
--- a/code/core/src/csf-tools/story-shape/resolve-story-args.ts
+++ b/code/core/src/csf-tools/story-shape/resolve-story-args.ts
@@ -12,7 +12,7 @@ import {
   resolveArgsRecord,
   resolveBindingMembers,
   resolveObjectMembers,
-  sourceOf,
+  oneLineTextOf,
 } from './resolve-members.ts';
 
 /** Everything reading one story's args statically produced. */
@@ -67,7 +67,7 @@ export function createStoryArgsResolver(
         shadowed: [],
         unresolved: [
           csf._storyStatements[storyExport]
-            ? sourceOf(csf._storyStatements[storyExport])
+            ? oneLineTextOf(csf._storyStatements[storyExport])
             : storyExport,
         ],
       };
diff --git a/code/core/src/csf-tools/story-shape/utils.test.ts b/code/core/src/csf-tools/story-shape/utils.test.ts
index e6e2a813811b..7a4438c1d490 100644
--- a/code/core/src/csf-tools/story-shape/utils.test.ts
+++ b/code/core/src/csf-tools/story-shape/utils.test.ts
@@ -3,16 +3,21 @@ import { describe, expect, it } from 'vitest';
 import { dedent } from 'ts-dedent';
 
 import { loadCsf } from '../CsfFile.ts';
-import { type E, type Node, expressionFromSource, textOf } from '../estree/ast.ts';
+import {
+  type E,
+  type Node,
+  expressionFromSource,
+  staticKey,
+  textOf,
+  unwrapExpression,
+} from '../estree/ast.ts';
 import {
   csfFactoryReceiver,
   isCanonicalCsf2BindCall,
   isCsfFactoryCall,
-  keyOf,
   metaObject,
   resolveIdentifierInit,
   returnedExpression,
-  unwrapExpression,
 } from './utils.ts';
 
 const parse = (code: string) => {
@@ -97,8 +102,8 @@ describe('isCsfFactoryCall', () => {
   });
 });
 
-describe('keyOf', () => {
-  it('returns literal object member keys and skips dynamic keys', () => {
+describe('staticKey', () => {
+  it('returns literal object member keys and skips spreads and dynamic keys', () => {
     const meta = metaObject(
       parse(dedent`
         const computed = 'dynamic';
@@ -108,7 +113,7 @@ describe('keyOf', () => {
           label: 'Save',
           'aria-label': 'Close',
           [computed]: 'ignored',
-          1: 'ignored',
+          1: 'one',
           method() {},
           'method-label'() {},
           [computed]() {},
@@ -117,20 +122,16 @@ describe('keyOf', () => {
       `)
     );
 
-    const keys = meta?.properties.map((property) =>
-      property.type === 'SpreadElement' ? null : keyOf(property)
-    );
-
-    expect(keys).toEqual([
+    expect(meta?.properties.map(staticKey)).toEqual([
       'title',
       'label',
       'aria-label',
-      null,
-      null,
+      undefined,
+      '1',
       'method',
       'method-label',
-      null,
-      null,
+      undefined,
+      undefined,
     ]);
   });
 });
diff --git a/code/core/src/csf-tools/story-shape/utils.ts b/code/core/src/csf-tools/story-shape/utils.ts
index a915486dadec..9039070fe70a 100644
--- a/code/core/src/csf-tools/story-shape/utils.ts
+++ b/code/core/src/csf-tools/story-shape/utils.ts
@@ -1,7 +1,13 @@
 import type { CsfFile } from '../CsfFile.ts';
-import { type E, type Node, isFunction, isStringLiteral, unwrapExpression } from '../estree/ast.ts';
+import {
+  type E,
+  type Node,
+  isFunction,
+  isStringLiteral,
+  staticKey,
+  unwrapExpression,
+} from '../estree/ast.ts';
 
-export { unwrapExpression };
 export {
   csfFactoryReceiver,
   isCanonicalCsf2BindCall,
@@ -41,19 +47,6 @@ const isStringRawTag = (tag: Node): boolean =>
   tag.property.type === 'Identifier' &&
   tag.property.name === 'raw';
 
-/**
- * Static key of an object member, or `null` when it is computed from something else.
- *
- * A computed key written as a string literal is static: `{ ['args']: … }` names the same member as
- * `{ args: … }`, so it reads as that name rather than as a key only running the story would produce.
- */
-export const keyOf = (p: E.ObjectProperty): string | null =>
-  isStringLiteral(p.key)
-    ? p.key.value
-    : !p.computed && p.key.type === 'Identifier'
-      ? p.key.name
-      : null;
-
 /** Value of an object expression's own property, when it has one. */
 export const propertyValue = (
   object: E.ObjectExpression | undefined | null,
@@ -61,7 +54,7 @@ export const propertyValue = (
 ): Node | undefined =>
   object?.properties.find(
     (candidate): candidate is E.ObjectProperty =>
-      candidate.type === 'Property' && !candidate.method && keyOf(candidate) === name
+      candidate.type === 'Property' && !candidate.method && staticKey(candidate) === name
   )?.value;
 
 /**
diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.ts b/code/core/src/csf-tools/vitest-plugin/transformer.ts
index 66642a67262d..9e2c506f34aa 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.ts
@@ -8,7 +8,7 @@ import { decode, encode } from '@jridgewell/sourcemap-codec';
 import { dedent } from 'ts-dedent';
 
 import { type CsfSourceMap, type StoryTest, loadCsf } from '../CsfFile.ts';
-import { type Node, identifierKey, locationOf } from '../estree/ast.ts';
+import { type Node, staticKey, locationOf } from '../estree/ast.ts';
 import { type SourceEditor, appendMembers, prependStatement } from '../estree/editor.ts';
 import { generateUid } from '../estree/scope.ts';
 
@@ -147,7 +147,7 @@ export async function vitestTransform({
   }
 
   const metaTitleProperty = metaNode.properties.find(
-    (prop) => prop.type === 'Property' && identifierKey(prop) === 'title'
+    (prop) => prop.type === 'Property' && staticKey(prop) === 'title'
   );
 
   const metaTitle = q(parsed._meta?.title || 'unknown');
diff --git a/code/frameworks/angular-vite/src/docgen/story-docs-args.ts b/code/frameworks/angular-vite/src/docgen/story-docs-args.ts
index 85ad66122db0..e3e9484b2613 100644
--- a/code/frameworks/angular-vite/src/docgen/story-docs-args.ts
+++ b/code/frameworks/angular-vite/src/docgen/story-docs-args.ts
@@ -2,9 +2,9 @@
 // themselves - following spreads and names - is the shared CSF pass in `story-shape`.
 import {
   type ESTreeNode as Node,
-  codeOf,
+  textOf,
   expressionFromSource,
-  keyOf,
+  staticKey,
   parseModule,
   reindent,
   unwrapExpression,
@@ -42,7 +42,7 @@ export const evaluateArgLiteral = (node: Node, enums: SnippetEnum[]): string | u
   return value === EVAL_FAILED ? undefined : printExpressionValue(value, new Set());
 };
 
-export const argFieldValue = (node: Node): string => printArgSource(codeOf(unwrapExpression(node)));
+export const argFieldValue = (node: Node): string => printArgSource(textOf(unwrapExpression(node)));
 
 // An arg no static evaluation could reduce to a value falls back to its source text, without the
 // comments a template expression cannot take (a class field keeps them). Every expression is
@@ -51,7 +51,7 @@ export const argFieldValue = (node: Node): string => printArgSource(codeOf(unwra
 export const evaluateArgExpression = (node: Node, enums: SnippetEnum[]): string => {
   const literal = evaluateArgLiteral(node, enums);
   return escapeAttributeExpression(
-    literal ?? printArgSource(withoutComments(codeOf(unwrapExpression(node))))
+    literal ?? printArgSource(withoutComments(textOf(unwrapExpression(node))))
   );
 };
 
@@ -179,8 +179,8 @@ const evaluateNode = (node: Node, enums: SnippetEnum[]): unknown => {
       if (property.type !== 'Property' || property.method || property.kind !== 'init') {
         return EVAL_FAILED;
       }
-      const key = keyOf(property);
-      if (key === null) {
+      const key = staticKey(property);
+      if (key === undefined) {
         return EVAL_FAILED;
       }
       const propertyValue = evaluateNode(property.value, enums);
diff --git a/code/frameworks/angular-vite/src/docgen/story-docs-build.ts b/code/frameworks/angular-vite/src/docgen/story-docs-build.ts
index 4809f7055a80..ec1424771fe4 100644
--- a/code/frameworks/angular-vite/src/docgen/story-docs-build.ts
+++ b/code/frameworks/angular-vite/src/docgen/story-docs-build.ts
@@ -32,7 +32,7 @@ import {
   evaluateArgLiteral,
 } from './story-docs-args.ts';
 import type { Bindings, StoryShape } from './story-docs-markup.ts';
-import { sourceOf, userTemplate } from './story-docs-markup.ts';
+import { oneLineTextOf, userTemplate } from './story-docs-markup.ts';
 import type { StoryNgModules } from './story-docs-ng-modules.ts';
 import { ngModulesFromDecorators, storyNgModules } from './story-docs-ng-modules.ts';
 import type { HostComponentSnippet } from './story-docs-snippet.ts';
@@ -231,7 +231,7 @@ const storyShape = (exportName: string, deps: StoryDocDeps): StoryShape => {
     // expression that only names what it declares itself - a handler's own parameters - needs
     // nothing from the host.
     if (evaluateArgLiteral(value, enums) === undefined && !isSelfContained(value)) {
-      unresolved.push(sourceOf(value));
+      unresolved.push(oneLineTextOf(value));
     }
   }
 
@@ -359,7 +359,7 @@ const referencedArgFields = (
     }
     const value = evaluateArgLiteral(node, enums);
     if (value === undefined) {
-      unresolved.push(sourceOf(node));
+      unresolved.push(oneLineTextOf(node));
       continue;
     }
     fields.push({ name, value });
diff --git a/code/frameworks/angular-vite/src/docgen/story-docs-markup.ts b/code/frameworks/angular-vite/src/docgen/story-docs-markup.ts
index 36aaf3dc4fdc..2953109955cd 100644
--- a/code/frameworks/angular-vite/src/docgen/story-docs-markup.ts
+++ b/code/frameworks/angular-vite/src/docgen/story-docs-markup.ts
@@ -11,7 +11,8 @@ import {
   importedName,
   isCanonicalCsf2BindCall,
   isStringLiteral,
-  sourceOf,
+  oneLineTextOf,
+  staticKey,
   templateParts,
   type TemplateParts,
   unwrapExpression,
@@ -33,7 +34,7 @@ export interface StoryShape {
   unresolvedArgs: string[];
 }
 
-export { sourceOf };
+export { oneLineTextOf };
 
 /** Bindings the generated snippet would carry, which is also what `argsToTemplate` expands to. */
 export interface Bindings {
@@ -141,7 +142,7 @@ export const userTemplate = (
   if (csf2) {
     const templateProperty = resolvedProperty(csf2.returned, 'template');
     if (templateProperty.kind === 'unresolvable') {
-      return { kind: 'unresolvable', source: sourceOf(csf2.returned) };
+      return { kind: 'unresolvable', source: oneLineTextOf(csf2.returned) };
     }
     const fromCsf2 = templateFrom(
       templateProperty.kind === 'value' ? templateProperty.node : undefined,
@@ -165,7 +166,10 @@ const shapeTemplate = (
 ): TemplateResult | undefined => {
   const template = resolvedMember(members, 'template');
   if (template.kind === 'unresolvable') {
-    return { kind: 'unresolvable', ...(template.node ? { source: sourceOf(template.node) } : {}) };
+    return {
+      kind: 'unresolvable',
+      ...(template.node ? { source: oneLineTextOf(template.node) } : {}),
+    };
   }
   if (template.kind === 'value') {
     const own = templateFrom(declaredValue(shape, template.node), shape, bindings, NO_SCOPE);
@@ -181,17 +185,17 @@ const shapeTemplate = (
   // A story whose `render` exists but cannot be read must not inherit the meta's markup, which is
   // for code the story never runs.
   if (render.kind === 'unresolvable') {
-    return { kind: 'unresolvable', ...(render.node ? { source: sourceOf(render.node) } : {}) };
+    return { kind: 'unresolvable', ...(render.node ? { source: oneLineTextOf(render.node) } : {}) };
   }
 
   const fn = declaredValue(shape, render.node);
   const returned = returnedObject(fn);
   if (!returned) {
-    return { kind: 'unresolvable', source: `render: ${sourceOf(render.node)}` };
+    return { kind: 'unresolvable', source: `render: ${oneLineTextOf(render.node)}` };
   }
   const templateProperty = resolvedProperty(returned, 'template');
   return templateProperty.kind === 'unresolvable'
-    ? { kind: 'unresolvable', source: `render: ${sourceOf(render.node)}` }
+    ? { kind: 'unresolvable', source: `render: ${oneLineTextOf(render.node)}` }
     : templateFrom(
         templateProperty.kind === 'value' ? templateProperty.node : undefined,
         shape,
@@ -222,10 +226,10 @@ const templateFrom = (
     const expansions: TemplateExpansion[] = [];
     const markup = interpolate(parts, shape, bindings, scope, representedArgs, expansions);
     return markup === undefined
-      ? { kind: 'unresolvable', source: sourceOf(node) }
+      ? { kind: 'unresolvable', source: oneLineTextOf(node) }
       : literalTemplate(markup, representedArgs, expansions);
   }
-  return { kind: 'unresolvable', source: sourceOf(node) };
+  return { kind: 'unresolvable', source: oneLineTextOf(node) };
 };
 
 const literalTemplate = (
@@ -444,7 +448,7 @@ export const resolvedProperty = (object: E.ObjectExpression, key: string): Prope
       opaqueAfter = property;
       return;
     }
-    const name = keyNameOf(property);
+    const name = staticKey(property);
     if (name === key) {
       found = property;
       opaqueAfter = undefined;
@@ -467,14 +471,6 @@ export const resolvedProperty = (object: E.ObjectExpression, key: string): Prope
   return { kind: 'value', node: found.value };
 };
 
-// A string-literal computed key has the exact runtime semantics of a plain string key.
-export const keyNameOf = (property: E.ObjectProperty | E.BindingProperty): string | undefined => {
-  if (property.key.type === 'Identifier' && !property.computed) {
-    return property.key.name;
-  }
-  return isStringLiteral(property.key) ? property.key.value : undefined;
-};
-
 const isPlainMethod = (node: Node | undefined): node is E.ObjectProperty & { value: E.Function } =>
   node?.type === 'Property' &&
   node.method &&
@@ -568,7 +564,7 @@ const functionScope = (node: Node | undefined): FunctionScope => {
       if (property.type !== 'Property' || property.computed) {
         continue;
       }
-      const argName = keyNameOf(property);
+      const argName = staticKey(property);
       const local =
         property.value.type === 'AssignmentPattern' ? property.value.left : property.value;
       if (argName !== undefined && local.type === 'Identifier') {
@@ -599,7 +595,7 @@ const functionScope = (node: Node | undefined): FunctionScope => {
       if (property.type === 'RestElement' && property.argument.type === 'Identifier') {
         rest = property.argument.name;
       } else if (property.type === 'Property') {
-        const key = property.computed ? undefined : keyNameOf(property);
+        const key = property.computed ? undefined : staticKey(property);
         if (key !== undefined) {
           destructured.push(key);
         } else {
diff --git a/code/frameworks/angular-vite/src/docgen/story-docs-ng-modules.ts b/code/frameworks/angular-vite/src/docgen/story-docs-ng-modules.ts
index 4e12dfc3a8d2..0fe9f349e655 100644
--- a/code/frameworks/angular-vite/src/docgen/story-docs-ng-modules.ts
+++ b/code/frameworks/angular-vite/src/docgen/story-docs-ng-modules.ts
@@ -1,7 +1,7 @@
 import type { ESTreeNode as Node, collectImportBindings } from 'storybook/internal/csf-tools';
 import {
   buildImportStatements,
-  keyOf,
+  staticKey,
   resolveComponentImport,
   unwrapExpression,
 } from 'storybook/internal/csf-tools';
@@ -54,7 +54,7 @@ export const ngModulesFromDecorators = (
       if (property.type !== 'Property' || property.method || property.kind !== 'init') {
         continue;
       }
-      const key = keyOf(property);
+      const key = staticKey(property);
       const value = unwrapExpression(property.value);
       if ((key !== 'imports' && key !== 'declarations') || value.type !== 'ArrayExpression') {
         continue;
diff --git a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.test.ts b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.test.ts
index 8d8d27c81448..c8ea7a49ffcb 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.test.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.test.ts
@@ -372,8 +372,8 @@ describe('preview specific functionality', () => {
       import { definePreview } from '@storybook/react-vite';
 
       export default definePreview({
-
         decorators: [],
+
         parameters: {
           options: {}
         }
diff --git a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts
index 467632f77763..3851af7bb24a 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts
@@ -4,11 +4,14 @@ import {
   appendStatement,
   type ESTreeNode as Node,
   loadConfig,
+  objectList,
+  prependToList,
   printConfig,
   printString,
   removeStatements,
   setImportSpecifiers,
   prependStatement,
+  unwrapExpression,
 } from 'storybook/internal/csf-tools';
 import { logger } from 'storybook/internal/node-logger';
 
@@ -21,19 +24,6 @@ import {
   removeExportDeclarations,
 } from './csf-factories-utils.ts';
 
-// Inserts members at the start of an object, one per line when the object spans several lines.
-function prependMembers(code: string, object: E.ObjectExpression, members: string[]) {
-  const [first] = object.properties;
-  if (!first) {
-    return { at: object.start + 1, text: ` ${members.join(', ')} ` };
-  }
-  const lineStart = code.lastIndexOf('\n', first.start - 1) + 1;
-  const indent = code.slice(lineStart, first.start);
-  return code.slice(object.start, first.start).includes('\n') && !indent.trim()
-    ? { at: first.start, text: members.map((member) => `${member},\n${indent}`).join('') }
-    : { at: first.start, text: members.map((member) => `${member}, `).join('') };
-}
-
 export async function configToCsfFactory(
   info: FileInfo,
   { configType, frameworkPackage }: { configType: 'main' | 'preview'; frameworkPackage: string },
@@ -59,7 +49,7 @@ export async function configToCsfFactory(
     if (node.type !== 'ExportDefaultDeclaration') {
       return false;
     }
-    const declaration = config._unwrap(node.declaration);
+    const declaration = unwrapExpression(node.declaration);
     return (
       declaration?.type === 'CallExpression' &&
       declaration.callee.type === 'Identifier' &&
@@ -102,7 +92,7 @@ export async function configToCsfFactory(
           (d) =>
             d.id.type === 'Identifier' &&
             d.id.name === declarationName &&
-            config._unwrap(d.init)?.type === 'ObjectExpression'
+            unwrapExpression(d.init)?.type === 'ObjectExpression'
         )
     );
 
@@ -117,7 +107,7 @@ export async function configToCsfFactory(
       if (node.type !== 'ExportDefaultDeclaration') {
         continue;
       }
-      const declaration = unwrapIdentifier ? config._unwrap(node.declaration) : node.declaration;
+      const declaration = unwrapIdentifier ? unwrapExpression(node.declaration) : node.declaration;
       if (declaration?.type === 'Identifier') {
         const declarationNode = findObjectDeclaration(declaration.name);
         if (!declarationNode) {
@@ -152,8 +142,7 @@ export async function configToCsfFactory(
      * Transform into: `export default defineMain({ tags: [], parameters: {} })`
      */
     // when merging named exports with default exports, add the named exports first in the list
-    const { at, text } = prependMembers(editor.code, config._exportsObject, defineConfigProps);
-    editor.edits.appendRight(at, text);
+    prependToList(editor, objectList(editor, config._exportsObject), defineConfigProps);
     removeExportDeclarations(editor, exportDecls);
     config._editor.commit();
     wrapDefaultExport(false);
diff --git a/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.ts b/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.ts
index 49f05c16b293..bbd30db8e5c7 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.ts
@@ -5,9 +5,12 @@ import {
   type SourceEditor,
   generateUid,
   insertAfterImports,
+  isTSWrapper,
   printString,
   walk,
   setImportSpecifiers,
+  staticKey,
+  unwrapExpression,
   wrapExpression,
 } from 'storybook/internal/csf-tools';
 
@@ -31,7 +34,8 @@ const mockMembers = [
   'mockRejectedValueOnce',
 ];
 
-function keyName(node: Node) {
+// The name a member access or an import specifier spells.
+function nameOf(node: Node) {
   if (node.type === 'Identifier') {
     return node.name;
   }
@@ -42,27 +46,14 @@ function withoutDefault(node: Node) {
   return node.type === 'AssignmentPattern' ? node.left : node;
 }
 
-function withoutTypeCast(node: Node): Node {
-  return node.type === 'TSNonNullExpression' ||
-    node.type === 'TSAsExpression' ||
-    node.type === 'TSSatisfiesExpression'
-    ? withoutTypeCast(node.expression)
-    : node;
-}
-
-const isTypeCast = (node: Node) =>
-  node.type === 'TSAsExpression' ||
-  node.type === 'TSSatisfiesExpression' ||
-  node.type === 'TSNonNullExpression';
-
 function isRender(editor: SourceEditor, fn: Node) {
   let value = fn;
   let owner = editor.parentOf(fn);
-  while (owner && isTypeCast(owner)) {
+  while (owner && isTSWrapper(owner)) {
     value = owner;
     owner = editor.parentOf(owner);
   }
-  return owner?.type === 'Property' && owner.value === value && keyName(owner.key) === 'render';
+  return owner?.type === 'Property' && owner.value === value && staticKey(owner) === 'render';
 }
 
 function isMember(node: Node): node is E.MemberExpression {
@@ -98,8 +89,8 @@ export function wrapArgsMocks(editor: SourceEditor) {
   };
 
   const isArgsObject = (expression: Node) => {
-    const node = withoutTypeCast(expression);
-    return isBoundIn(argsObjects, node) || (isMember(node) && keyName(node.property) === 'args');
+    const node = unwrapExpression(expression);
+    return isBoundIn(argsObjects, node) || (isMember(node) && nameOf(node.property) === 'args');
   };
 
   const addArgs = (pattern: Node) => {
@@ -120,20 +111,20 @@ export function wrapArgsMocks(editor: SourceEditor) {
       return;
     }
     for (const property of target.properties) {
-      if (property.type === 'Property' && keyName(property.key) === 'args') {
+      if (property.type === 'Property' && staticKey(property) === 'args') {
         addArgs(property.value);
       }
     }
   };
 
   const collectTarget = (node: E.MemberExpression) => {
-    if (!isMember(node) || !mockMembers.includes(keyName(node.property) ?? '')) {
+    if (!isMember(node) || !mockMembers.includes(nameOf(node.property) ?? '')) {
       return;
     }
     if (node.object.type === 'TSAsExpression') {
       return;
     }
-    const object = withoutTypeCast(node.object);
+    const object = unwrapExpression(node.object);
     if (isBoundIn(argValues, object) || (isMember(object) && isArgsObject(object.object))) {
       targets.push(node.object);
     }
@@ -154,7 +145,7 @@ export function wrapArgsMocks(editor: SourceEditor) {
       });
     } else if (node.type === 'VariableDeclarator') {
       const { id, init } = node;
-      const value = init && withoutTypeCast(init);
+      const value = init && unwrapExpression(init);
       if (init && isArgsObject(init)) {
         addArgs(id);
       } else if (value && isMember(value) && isArgsObject(value.object)) {
@@ -182,7 +173,7 @@ export function wrapArgsMocks(editor: SourceEditor) {
     (specifier): specifier is E.ImportSpecifier =>
       specifier.type === 'ImportSpecifier' &&
       specifier.importKind !== 'type' &&
-      keyName(specifier.imported) === 'mocked'
+      nameOf(specifier.imported) === 'mocked'
   );
   const namespace = specifiers.find((specifier) => specifier.type === 'ImportNamespaceSpecifier');
 
diff --git a/code/renderers/react/src/componentManifest/generateCodeSnippet.ts b/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
index ce2e40c51f77..013f31335d50 100644
--- a/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
+++ b/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
@@ -6,7 +6,7 @@ import {
   type ImportRef,
   type RenderResolution,
   type StoryArgsResolver,
-  codeOf,
+  textOf,
   collectImportBindings,
   createStoryArgsResolver,
   isCanonicalCsf2BindCall,
@@ -92,7 +92,7 @@ function importedBoundStory(
   );
   const argsObject = values.length ? `{\n${values.join(',\n')}\n}` : '{}';
   return {
-    code: `const ${storyName} = () => ${codeOf(declaration.init)}(${argsObject});`,
+    code: `const ${storyName} = () => ${textOf(declaration.init)}(${argsObject});`,
     importRef: {
       localImportName: local,
       importId: binding.importId,
@@ -285,7 +285,7 @@ const toJsxChildren = (node: Node | null | undefined) =>
     : isStringLiteral(node)
       ? node.value
       : isJsx(node)
-        ? codeOf(node)
+        ? textOf(node)
         : `{${placeableTextOf(node)}}`;
 
 /** Return `key` if expression is `args.key` (incl. optional chaining), else `null`. */
diff --git a/code/renderers/vue3/src/docgen/shared/classify-value.ts b/code/renderers/vue3/src/docgen/shared/classify-value.ts
index 35fb99611a90..20842af419e1 100644
--- a/code/renderers/vue3/src/docgen/shared/classify-value.ts
+++ b/code/renderers/vue3/src/docgen/shared/classify-value.ts
@@ -1,7 +1,7 @@
 import {
   type ESTree as E,
   type ESTreeNode as Node,
-  codeOf,
+  textOf,
   isStringLiteral,
   unwrapExpression,
   walk,
@@ -91,7 +91,7 @@ export function classifyValue(node: Node): ValuePlan {
 
 // Strips the story file's nesting from continuation lines so the value reads naturally when hoisted.
 export function printValue(node: Node): string {
-  const source = codeOf(node);
+  const source = textOf(node);
   const lines = source.split('\n');
   if (lines.length === 1) {
     return source;
diff --git a/code/renderers/vue3/src/docgen/story-docs/build-story-docs.ts b/code/renderers/vue3/src/docgen/story-docs/build-story-docs.ts
index f642e02ff700..2cab02bda1d1 100644
--- a/code/renderers/vue3/src/docgen/story-docs/build-story-docs.ts
+++ b/code/renderers/vue3/src/docgen/story-docs/build-story-docs.ts
@@ -21,7 +21,7 @@ import {
   createStoryReferenceResolver,
   extractStoryJSDocInfo,
   jsDocTagsForNode,
-  keyOf,
+  staticKey,
   loadCsf,
   metaObject,
   noSnippetWarning,
@@ -495,7 +495,7 @@ function setupReturnedRenderExpression(renderObject: E.ObjectExpression): E.Expr
     if (property.type === 'SpreadElement') {
       return false;
     }
-    const key = keyOf(property);
+    const key = staticKey(property);
     return key === 'setup' || key === 'components' || key === 'inheritAttrs';
   });
   if (!supported) {
@@ -504,7 +504,7 @@ function setupReturnedRenderExpression(renderObject: E.ObjectExpression): E.Expr
 
   const setup = renderObject.properties.find(
     (property): property is E.ObjectProperty =>
-      property.type === 'Property' && keyOf(property) === 'setup'
+      property.type === 'Property' && staticKey(property) === 'setup'
   );
   const setupFn = setup && unwrapExpression(setup.value);
   if (!setupFn || !isFunction(setupFn)) {
diff --git a/code/renderers/vue3/src/docgen/story-docs/classify-args/classify-args.test.ts b/code/renderers/vue3/src/docgen/story-docs/classify-args/classify-args.test.ts
index a6d22cb1f64d..5f914e3e3856 100644
--- a/code/renderers/vue3/src/docgen/story-docs/classify-args/classify-args.test.ts
+++ b/code/renderers/vue3/src/docgen/story-docs/classify-args/classify-args.test.ts
@@ -1,6 +1,10 @@
 import { describe, expect, it } from 'vitest';
 
-import { type ESTreeNode as Node, expressionFromSource, keyOf } from 'storybook/internal/csf-tools';
+import {
+  type ESTreeNode as Node,
+  expressionFromSource,
+  staticKey,
+} from 'storybook/internal/csf-tools';
 
 import { classifyArgs, type ClassifiedArg } from './classify-args.ts';
 import { printValue } from '../../shared/classify-value.ts';
@@ -202,8 +206,8 @@ function parseArgs(code: string): Record<string, Node> {
       if (property.type !== 'Property' || property.method || property.computed) {
         throw new Error(`Not a plain arg: ${printValue(property)}`);
       }
-      const name = keyOf(property);
-      if (name === null) {
+      const name = staticKey(property);
+      if (name === undefined) {
         throw new Error(`Unsupported arg name: ${printValue(property.key)}`);
       }
       return [name, property.value];
diff --git a/code/renderers/vue3/src/docgen/story-docs/print-h/print-h.ts b/code/renderers/vue3/src/docgen/story-docs/print-h/print-h.ts
index 3744261d1164..6756964b24cf 100644
--- a/code/renderers/vue3/src/docgen/story-docs/print-h/print-h.ts
+++ b/code/renderers/vue3/src/docgen/story-docs/print-h/print-h.ts
@@ -2,9 +2,9 @@ import {
   type ESTree as E,
   type ESTreeNode as Node,
   type ImportBinding,
-  codeOf,
+  textOf,
   isStringLiteral,
-  keyOf,
+  staticKey,
   returnedExpression,
   unwrapExpression,
   walk,
@@ -335,7 +335,7 @@ function printProps(
       return undefined;
     }
 
-    const name = keyOf(property);
+    const name = staticKey(property);
     if (!name) {
       return undefined;
     }
@@ -479,7 +479,7 @@ function printSlotsObject(value: E.ObjectExpression, options: PrintOptions): str
       return undefined;
     }
 
-    const name = keyOf(property);
+    const name = staticKey(property);
     const slotFunction = unwrapExpression(property.value);
     if (!name || !isFunctionExpression(slotFunction)) {
       return undefined;
@@ -519,7 +519,7 @@ function printedArgsExpression(node: Node, argsParam: string): string | undefine
     return printValue(node);
   }
 
-  const source = codeOf(node);
+  const source = textOf(node);
   const start = (node as Node & { start: number }).start;
   let renamed = '';
   let cursor = 0;
diff --git a/code/renderers/vue3/src/docgen/story-docs/transform-template/forward-setup.ts b/code/renderers/vue3/src/docgen/story-docs/transform-template/forward-setup.ts
index 13313a4d8936..5ba3ca823897 100644
--- a/code/renderers/vue3/src/docgen/story-docs/transform-template/forward-setup.ts
+++ b/code/renderers/vue3/src/docgen/story-docs/transform-template/forward-setup.ts
@@ -2,7 +2,7 @@ import {
   type ESTree as E,
   type ESTreeNode as Node,
   type ImportBinding,
-  keyOf,
+  staticKey,
   unwrapExpression,
   walk,
 } from 'storybook/internal/csf-tools';
@@ -153,7 +153,7 @@ export function readForwardableSetup(
     ) {
       return bail(SETUP_RETURN_WARNING);
     }
-    const key = keyOf(property);
+    const key = staticKey(property);
     const value = unwrapExpression(property.value);
     if (!key || value.type !== 'Identifier') {
       return bail(SETUP_RETURN_WARNING);
diff --git a/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.ts b/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.ts
index 96214c481b7e..670b84b30dd4 100644
--- a/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.ts
+++ b/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.ts
@@ -12,7 +12,7 @@ import {
   type ESTreeNode as Node,
   type ImportBinding,
   isStringLiteral,
-  keyOf,
+  staticKey,
   normalizeLineEndings,
   parseModule,
   propertyValue,
@@ -1076,7 +1076,7 @@ function hasOnlySupportedRenderProperties(renderObject: E.ObjectExpression): boo
       return false;
     }
 
-    const key = keyOf(property);
+    const key = staticKey(property);
     // `inheritAttrs` only tunes runtime attribute fallthrough; the markup stays faithful without it.
     return (
       key === 'components' || key === SETUP_PROPERTY || key === 'template' || key === 'inheritAttrs'
@@ -1106,7 +1106,7 @@ function readComponentImports(
       return undefined;
     }
 
-    const tagName = keyOf(property);
+    const tagName = staticKey(property);
     const component = unwrapExpression(property.value);
     if (!tagName || component.type !== 'Identifier') {
       return undefined;
@@ -1130,6 +1130,6 @@ function readComponentImports(
 function setupProperty(renderObject: E.ObjectExpression): E.ObjectProperty | undefined {
   return renderObject.properties.find(
     (property): property is E.ObjectProperty =>
-      property.type === 'Property' && keyOf(property) === SETUP_PROPERTY
+      property.type === 'Property' && staticKey(property) === SETUP_PROPERTY
   );
 }
diff --git a/code/renderers/web-components/src/docgen/story-docs/arg-values.ts b/code/renderers/web-components/src/docgen/story-docs/arg-values.ts
index 51696d661e67..d4d125f0420f 100644
--- a/code/renderers/web-components/src/docgen/story-docs/arg-values.ts
+++ b/code/renderers/web-components/src/docgen/story-docs/arg-values.ts
@@ -1,8 +1,8 @@
 import {
   type ESTree as E,
   type ESTreeNode as Node,
-  keyOf,
-  sourceOf,
+  staticKey,
+  oneLineTextOf,
   templateParts,
   unwrapExpression,
 } from 'storybook/internal/csf-tools';
@@ -36,7 +36,7 @@ export function evaluateArgValue(node: Node): ArgValue {
     const unwrapped = unwrapExpression(node);
     return isFunctionNode(unwrapped)
       ? { kind: 'function' }
-      : { kind: 'unresolved', source: sourceOf(node) };
+      : { kind: 'unresolved', source: oneLineTextOf(node) };
   }
   if (value === undefined) {
     return { kind: 'unset' };
@@ -91,9 +91,9 @@ const evaluateObject = (node: E.ObjectExpression): Record<string, unknown> | typ
     ) {
       return FAILED;
     }
-    const key = keyOf(property);
+    const key = staticKey(property);
     const value = evaluate(property.value);
-    if (key === null || value === FAILED) {
+    if (key === undefined || value === FAILED) {
       return FAILED;
     }
     values[key] = value;
diff --git a/code/renderers/web-components/src/docgen/story-docs/build-story-docs.ts b/code/renderers/web-components/src/docgen/story-docs/build-story-docs.ts
index 19927dc82e3e..7e898944ac08 100644
--- a/code/renderers/web-components/src/docgen/story-docs/build-story-docs.ts
+++ b/code/renderers/web-components/src/docgen/story-docs/build-story-docs.ts
@@ -8,14 +8,14 @@ import type {
 } from 'storybook/internal/csf-tools';
 import {
   authoredSource,
-  codeOf,
+  textOf,
   createStoryArgsResolver,
   createStoryReferenceResolver,
   extractStoryJSDocInfo,
   noSnippetWarning,
   reindent,
   resolveEffectiveRender,
-  sourceOf,
+  oneLineTextOf,
   unwrapExpression,
   unresolvedWarning,
 } from 'storybook/internal/csf-tools';
@@ -246,7 +246,7 @@ const renderedArgsSnippet = (
         ...joinWarnings(hasSnippet ? warnings : [...warnings, noSnippetWarning(unresolved)]),
       };
     }
-    warnings.push(unresolvedWarning([sourceOf(render.node)]));
+    warnings.push(unresolvedWarning([oneLineTextOf(render.node)]));
   } else if (render.kind === 'unresolved') {
     warnings.push(unresolvedWarning(unresolvedRenderSource(render, resolved)));
   }
@@ -285,7 +285,7 @@ const unresolvedRenderSource = (
     resolved.storyMembers.properties.render ??
     resolved.metaMembers.properties.render ??
     render.shadowedRender;
-  return node ? [sourceOf(node)] : [];
+  return node ? [oneLineTextOf(node)] : [];
 };
 
 const argsSnippet = (
@@ -442,7 +442,7 @@ const listenerHandler = (node: Node): string => {
   if (!isFunctionNode(unwrapExpression(node))) {
     return '() => {}';
   }
-  const code = codeOf(node);
+  const code = textOf(node);
   const closingIndent = /^[ \t]*/.exec(code.slice(code.lastIndexOf('\n') + 1))![0];
   return reindent(code, closingIndent, '    ');
 };
diff --git a/code/renderers/web-components/src/docgen/story-docs/template-holes.ts b/code/renderers/web-components/src/docgen/story-docs/template-holes.ts
index b472e5eb0243..b3d4c2ba7fa3 100644
--- a/code/renderers/web-components/src/docgen/story-docs/template-holes.ts
+++ b/code/renderers/web-components/src/docgen/story-docs/template-holes.ts
@@ -1,5 +1,5 @@
 import type { ESTree as E, ESTreeNode as Node, ImportBinding } from 'storybook/internal/csf-tools';
-import { sourceOf, unwrapExpression, walk } from 'storybook/internal/csf-tools';
+import { oneLineTextOf, unwrapExpression, walk } from 'storybook/internal/csf-tools';
 
 import { FAILED, evaluateArgValue, isFunctionNode, primitiveLiteralValue } from './arg-values.ts';
 import type { AliasValue, HtmlTemplate, TemplateScope } from './template-scope.ts';
@@ -33,12 +33,12 @@ export const resolveHoleValue = (expression: E.Expression, context: HoleContext)
       ? aliasValueForIdentifier(expressionNode, context.scope)
       : undefined;
   if (alias) {
-    return resolveAlias(alias, context, sourceOf(expression));
+    return resolveAlias(alias, context, oneLineTextOf(expression));
   }
 
   const arg = argReferenceForExpression(expression, context.scope);
   if (arg) {
-    return resolveArgReference(arg, context.storyArgs[arg.name], sourceOf(expression));
+    return resolveArgReference(arg, context.storyArgs[arg.name], oneLineTextOf(expression));
   }
 
   const unwrapped = expressionNode;
@@ -49,11 +49,11 @@ export const resolveHoleValue = (expression: E.Expression, context: HoleContext)
     return { kind: 'value', value: literalValue(unwrapped) };
   }
   if (isFunctionNode(unwrapped)) {
-    return { handler: sourceOf(expression), kind: 'function' };
+    return { handler: oneLineTextOf(expression), kind: 'function' };
   }
   const nested = templateFromExpression(unwrapped, context.bindings, context.scope);
   if (nested) {
-    return { kind: 'template', source: sourceOf(expression), template: nested };
+    return { kind: 'template', source: oneLineTextOf(expression), template: nested };
   }
   if (isIfDefinedCall(unwrapped, context.bindings)) {
     const value = resolveHoleValue(unwrapped.arguments[0], context);
@@ -73,7 +73,7 @@ export const resolveHoleValue = (expression: E.Expression, context: HoleContext)
     return test.arg && !branch.arg ? { ...branch, arg: test.arg } : branch;
   }
 
-  return { kind: 'unresolved', source: sourceOf(expression) };
+  return { kind: 'unresolved', source: oneLineTextOf(expression) };
 };
 
 export const collectReferencedArgs = (expression: Node, scope: TemplateScope): Set<string> => {
@@ -123,7 +123,7 @@ const resolveArg = (arg: string, node: Node | undefined): HoleValue => {
   const value = evaluateArgValue(node);
   switch (value.kind) {
     case 'function':
-      return { handler: sourceOf(node), kind: 'function', arg };
+      return { handler: oneLineTextOf(node), kind: 'function', arg };
     case 'unset':
       return { kind: 'value', arg, value: undefined };
     case 'unresolved':
@@ -253,12 +253,12 @@ const resolveConditionalTest = (
 ): { arg?: string; kind: 'value'; truthy: boolean } | { kind: 'unresolved'; source: string } => {
   const arg = argReferenceForExpression(expression, context.scope);
   if (arg) {
-    const value = resolveArgReference(arg, context.storyArgs[arg.name], sourceOf(expression));
+    const value = resolveArgReference(arg, context.storyArgs[arg.name], oneLineTextOf(expression));
     return value.kind === 'value' || value.kind === 'empty'
       ? { arg: arg.name, kind: 'value', truthy: value.kind === 'value' && Boolean(value.value) }
       : {
           kind: 'unresolved',
-          source: value.kind === 'unresolved' ? value.source : sourceOf(expression),
+          source: value.kind === 'unresolved' ? value.source : oneLineTextOf(expression),
         };
   }
   const unwrapped = unwrapExpression(expression);
@@ -268,7 +268,7 @@ const resolveConditionalTest = (
   if (isStaticLiteral(unwrapped)) {
     return { kind: 'value', truthy: Boolean(literalValue(unwrapped)) };
   }
-  return { kind: 'unresolved', source: sourceOf(expression) };
+  return { kind: 'unresolved', source: oneLineTextOf(expression) };
 };
 
 const templateAttributeText = (
diff --git a/code/renderers/web-components/src/docgen/story-docs/template-print.ts b/code/renderers/web-components/src/docgen/story-docs/template-print.ts
index d704f16c11ed..5e5b0177f8f3 100644
--- a/code/renderers/web-components/src/docgen/story-docs/template-print.ts
+++ b/code/renderers/web-components/src/docgen/story-docs/template-print.ts
@@ -1,5 +1,5 @@
 import type { ESTree as E, ESTreeNode as Node } from 'storybook/internal/csf-tools';
-import { sourceOf } from 'storybook/internal/csf-tools';
+import { oneLineTextOf } from 'storybook/internal/csf-tools';
 
 import type { ManifestDeclaration } from '../component-docgen/manifest/types.ts';
 import { fieldDefault, pairedAttribute } from './classify-args.ts';
@@ -246,7 +246,7 @@ const resolveAttribute = (
     }
     const value = resolveMarkerValue(expression, state);
     if (value.kind === 'function') {
-      state.unresolved.add(sourceOf(expression));
+      state.unresolved.add(oneLineTextOf(expression));
       return undefined;
     }
     if (value.kind === 'nothing') {
@@ -357,7 +357,7 @@ const removeUnsupportedMarkers = (text: string, state: TemplatePrintState): stri
   for (const marker of markersIn(text, state)) {
     const expression = state.markers.get(marker);
     if (expression) {
-      state.unresolved.add(sourceOf(expression));
+      state.unresolved.add(oneLineTextOf(expression));
     }
     next = next.replace(marker, '');
   }
@@ -368,7 +368,7 @@ const unresolvedMarkers = (text: string, state: TemplatePrintState): void => {
   for (const marker of markersIn(text, state)) {
     const expression = state.markers.get(marker);
     if (expression) {
-      state.unresolved.add(sourceOf(expression));
+      state.unresolved.add(oneLineTextOf(expression));
     }
   }
 };
@@ -383,7 +383,7 @@ const markerSources = (markers: string[], state: TemplatePrintState): string =>
   markers
     .map((marker) => state.markers.get(marker))
     .filter((expression): expression is E.Expression => expression !== undefined)
-    .map(sourceOf)
+    .map(oneLineTextOf)
     .join(', ');
 
 const attributeFromPrinted = (attribute: string | undefined): HtmlAttribute | undefined => {
diff --git a/code/renderers/web-components/src/docgen/story-docs/template-scope.ts b/code/renderers/web-components/src/docgen/story-docs/template-scope.ts
index 06fe02d716b9..4378bfac159f 100644
--- a/code/renderers/web-components/src/docgen/story-docs/template-scope.ts
+++ b/code/renderers/web-components/src/docgen/story-docs/template-scope.ts
@@ -8,9 +8,9 @@ import type {
 import {
   collectImportBindings,
   isStringLiteral,
-  keyOf,
+  staticKey,
   returnedExpression,
-  sourceOf,
+  oneLineTextOf,
   unwrapExpression,
 } from 'storybook/internal/csf-tools';
 
@@ -63,18 +63,18 @@ export function templateFromExpression(
       lit: false,
       quasis: [expression.value],
       scope,
-      source: sourceOf(expression),
+      source: oneLineTextOf(expression),
     };
   }
   if (expression.type === 'TemplateLiteral') {
-    return templateFromLiteral(expression, bindings, false, scope, sourceOf(expression));
+    return templateFromLiteral(expression, bindings, false, scope, oneLineTextOf(expression));
   }
   if (expression.type !== 'TaggedTemplateExpression' || expression.tag.type !== 'Identifier') {
     return undefined;
   }
   return isImported(expression.tag.name, 'html', TEMPLATE_TAG_SOURCES, bindings) ||
     isImported(expression.tag.name, 'default', TEMPLATE_TAG_SOURCES, bindings)
-    ? templateFromLiteral(expression.quasi, bindings, true, scope, sourceOf(expression))
+    ? templateFromLiteral(expression.quasi, bindings, true, scope, oneLineTextOf(expression))
     : undefined;
 }
 
@@ -225,14 +225,14 @@ const aliasForExpression = (
   const unwrapped = unwrapExpression(expression);
   const arg = argReferenceForExpression(unwrapped, scope);
   if (arg) {
-    return { kind: 'arg', source: sourceOf(expression), ...arg };
+    return { kind: 'arg', source: oneLineTextOf(expression), ...arg };
   }
   if (isStaticLiteral(unwrapped)) {
     return { kind: 'value', value: literalValue(unwrapped) };
   }
   const template = templateFromExpression(unwrapped, bindings, copyScope(scope));
   if (template) {
-    return { kind: 'template', source: sourceOf(expression), template };
+    return { kind: 'template', source: oneLineTextOf(expression), template };
   }
   return undefined;
 };
@@ -246,7 +246,7 @@ const destructuredAliases = (
     if (property.type !== 'Property' || property.computed) {
       return undefined;
     }
-    const key = keyOf(property as unknown as E.ObjectProperty);
+    const key = staticKey(property as unknown as E.ObjectProperty);
     if (!key) {
       return undefined;
     }

From 85eb30f433c4f111f6317aac4379416d11244b26 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Sat, 17 Oct 2026 23:37:17 +0200
Subject: [PATCH 161/326] fix(csf-tools): write files back with their own line
 endings

Parsing normalizes line endings to `\n`, and until now every printer
emitted `\n` too, so editing a CRLF file through automigrate, init,
add, codemods or "save story" silently rewrote every line of it. Babel
kept CRLF, so this was a regression of the port.

SourceEditor.toString() now owns the rule: it restores CRLF when the
first line break of the code it was created with is CRLF, and prints
`\n` otherwise (lone CR files included). This is the same rule as
Prettier's `endOfLine: 'auto'`, so a formatter that runs afterwards
agrees with it. A single file-level decision keeps inserted code
consistent with the rest of the file, instead of mixing endings.
Node offsets, `code` and `edits` keep using `\n`; only the printed
output changes, and lines and columns (so source maps) are unaffected.

Everything that prints through the editor follows: printCsf,
printConfig, formatCsf, the docs plugin, sb.mock rewrites and the
Vitest transform. The Vitest transform joins its generated tail with
`\n`, so it now restores line endings once over the whole output
instead of mixing a CRLF head with an LF tail.

The automigrate pipeline and fix-files still normalize on read: text
handlers chain on each other's output and compare against the source,
which only works on one line-ending form. They now restore the
original line endings on write instead (before the project formatter
runs in the pipeline), so the normalization stays an internal detail.

Tests that asserted LF output for CRLF input now assert CRLF, which is
the intended change. MIGRATION.md drops the note that files are
written with `\n`.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 MIGRATION.md                                  |  3 +-
 .../csf-plugin/rollup-based-plugin.test.ts    |  5 ++--
 .../src/updateVitestFile.statements.test.ts   |  4 +--
 code/core/src/csf-tools/ConfigFile.test.ts    | 13 ++++----
 code/core/src/csf-tools/ConfigFile.ts         |  4 +--
 code/core/src/csf-tools/ConfigObject.test.ts  | 15 +++++-----
 code/core/src/csf-tools/CsfFile.test.ts       |  4 +--
 code/core/src/csf-tools/CsfFile.ts            |  4 +--
 code/core/src/csf-tools/CsfFile.write.test.ts |  4 +--
 code/core/src/csf-tools/estree/ast.ts         |  9 ++++++
 code/core/src/csf-tools/estree/editor.test.ts | 30 +++++++++++++++----
 code/core/src/csf-tools/estree/editor.ts      |  5 ++--
 code/core/src/csf-tools/index.ts              |  1 +
 .../component-transformer.test.ts             |  4 +--
 .../vitest-plugin/transformer.test.ts         |  4 +--
 .../csf-tools/vitest-plugin/transformer.ts    | 10 +++++--
 code/core/src/mocking-utils/extract.test.ts   |  2 +-
 .../src/automigrate/fix-files.test.ts         |  4 +--
 .../src/automigrate/fix-files.ts              | 13 ++++++--
 .../fixes/addon-svelte-csf-to-core.test.ts    |  4 +--
 .../src/automigrate/pipeline.test.ts          |  4 +--
 .../cli-storybook/src/automigrate/pipeline.ts |  6 ++--
 22 files changed, 99 insertions(+), 53 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index c3af44e17455..14995e8f92be 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1321,7 +1321,6 @@ Storybook no longer bundles Babel or recast to read and write story and config f
 
 - **Flow syntax is no longer supported in story files.** Babel parsed `// @flow` files with its Flow plugin; OXC does not parse Flow. A `// @flow` file whose syntax is also valid TypeScript still indexes, but Flow-only syntax such as variance (`+readOnly`) or type casts (`(value: Type)`) is a parse error, and the error names Flow. Convert such files to TypeScript or plain JavaScript.
 - `parameters.docs.source.originalSource` is now the story's source text exactly as written, where Babel reprinted it with its own formatting. "Show code" and `docs.source.transform` functions receive the authored text, with line endings normalized to `\n`.
-- Storybook writes every file it edits with `\n` line endings, even if the file used CRLF; it used to keep CRLF. This covers `storybook automigrate`, codemods, `storybook init` and `storybook add`, and saving stories from the UI. Code the builders transform, such as `sb.mock()` automocks, uses `\n` as well.
 - Parse errors use OXC's wording, and end with ` in <file>` when the file name is known. Duplicate declarations and legacy octal literals are still rejected.
 - A parse error in a module that `sb.mock()` automocks under webpack now fails that module's build, where Babel's error recovery used to mock whatever it could parse.
 
@@ -1338,7 +1337,7 @@ Storybook no longer bundles Babel or recast to read and write story and config f
 - The story-shape helpers no longer take Babel paths: `jsDocTagsForPath` is `jsDocTagsForNode`, `metaObjectPath` is `metaObject`, `RenderFunctionPath` is `RenderFunction`, and `pathForNode` and `returnedExpressionPath` are removed in favor of `returnedExpression` and plain nodes.
 - The `getAbsolutePath` wrapper helpers in `storybook/internal/common` produce source text instead of Babel nodes. `getAbsolutePathWrapperAsCallExpression(isTs, names)`, which returned the wrapper's function declaration, is replaced by `getAbsolutePathWrapperDeclaration(isTs, names)`, which returns the declaration's source for `ConfigFile#setBodyDeclaration`. `getAbsolutePathCall(config, value)` returns the source of a call to the config's wrapper. `wrapValueWithGetAbsolutePathWrapper(config, node)` is replaced by `wrapValuesWithGetAbsolutePathWrapper(config, nodes)`, which wraps every node in the array and commits the edits to `config`.
 - `new CsfFile(code, options)` and `new ConfigFile(code, fileName)` take source code instead of a Babel AST.
-- `formatCsf(csf, { sourceMaps, sourceFileName, inputSourceMap })` replaces the Babel generator options; `printCsf` and `printConfig` take no options, and all three print with `\n` line endings.
+- `formatCsf(csf, { sourceMaps, sourceFileName, inputSourceMap })` replaces the Babel generator options; `printCsf` and `printConfig` take no options, and all three print a file whose first line ends in CRLF with CRLF line endings, and any other file with `\n`.
 - `ConfigFile#setBodyDeclaration(code)` takes the declaration's source text instead of a Babel node.
 - The Vitest config helpers `canUpdateVitestConfigFile`, `getTargetConfigObject`, `getEffectiveMergeConfigCall`, `getConfigObjectFromMergeArg` and `resolveExpression` moved from `storybook/internal/babel` to `storybook/internal/cli`. `canUpdateVitestConfigFile` still takes the file's source; the others take an ESTree `Program`, such as `parseModule(code, fileName).program`, instead of a Babel `File`, and return ESTree nodes. `isDefineConfigLike` and `isImportedDefineConfigLikeIdentifier` are no longer exported. `unwrapTSExpression` is now `unwrapExpression` in `storybook/internal/csf-tools`, and also unwraps non-null assertions (`value!`).
 
diff --git a/code/addons/docs/src/csf-plugin/rollup-based-plugin.test.ts b/code/addons/docs/src/csf-plugin/rollup-based-plugin.test.ts
index 911f295e2595..85a41fbd30fb 100644
--- a/code/addons/docs/src/csf-plugin/rollup-based-plugin.test.ts
+++ b/code/addons/docs/src/csf-plugin/rollup-based-plugin.test.ts
@@ -111,7 +111,7 @@ describe('rollupBasedPlugin', () => {
     expect(result.map.sourcesContent).toEqual([originalCode]);
   });
 
-  it('prints a CRLF story file with LF, maps it line for line and keeps its content as written', async () => {
+  it('prints a CRLF story file with CRLF, maps it line for line and keeps its content as written', async () => {
     const crlf = originalCode.replaceAll('\n', '\r\n');
     vol.fromJSON({ [id]: crlf });
 
@@ -120,7 +120,8 @@ describe('rollupBasedPlugin', () => {
       throw new Error('expected a transform result with a sourcemap');
     }
 
-    expect(result.code).not.toMatch(/\r|\\r/);
+    // Every line ends in CRLF, and `originalSource` holds the text with `\n`.
+    expect(result.code.replaceAll('\r\n', '')).not.toMatch(/\r|\n|\\r/);
     const output = positionOf(result.code, 'play:');
     const entry = new SourceMap(result.map as unknown as SourceMapPayload).findEntry(
       output.line,
diff --git a/code/addons/vitest/src/updateVitestFile.statements.test.ts b/code/addons/vitest/src/updateVitestFile.statements.test.ts
index 936b40f4d288..d9fdd2829015 100644
--- a/code/addons/vitest/src/updateVitestFile.statements.test.ts
+++ b/code/addons/vitest/src/updateVitestFile.statements.test.ts
@@ -158,13 +158,13 @@ describe('updateConfigFile statements', () => {
     `);
   });
 
-  it('writes a CRLF config with LF line endings', () => {
+  it('writes a CRLF config with CRLF line endings', () => {
     const code = update(
       `import react from '@vitejs/plugin-react';\r\nexport default defineConfig({ test: {} });\r\n`
     );
 
     expect(code).toContain('const dirname');
-    expect(code).not.toContain('\r');
+    expect(code.replaceAll('\r\n', '')).not.toMatch(/[\r\n]/);
   });
 
   it.each([
diff --git a/code/core/src/csf-tools/ConfigFile.test.ts b/code/core/src/csf-tools/ConfigFile.test.ts
index 687621215b96..f09ca32845ac 100644
--- a/code/core/src/csf-tools/ConfigFile.test.ts
+++ b/code/core/src/csf-tools/ConfigFile.test.ts
@@ -1152,7 +1152,7 @@ describe('ConfigFile', () => {
   });
 
   describe('quote inference under EOL reconstruction', () => {
-    it('infers quotes and prints LF output for CRLF sources', () => {
+    it('infers quotes and keeps the line endings of CRLF sources', () => {
       const source = [
         "import { addons } from 'storybook/manager-api';",
         '',
@@ -1161,10 +1161,13 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.set(['tags'], ['autodocs']);
 
-      const printed = printConfig(config).code;
-      expect(printed).not.toContain('\r');
-      expect(printed).toContain("'autodocs'");
-      expect(printed).not.toContain('"autodocs"');
+      expect(printConfig(config).code).toBe(
+        [
+          "import { addons } from 'storybook/manager-api';",
+          '',
+          "export const tags = ['autodocs'];",
+        ].join('\r\n')
+      );
     });
   });
 
diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index 61be8283081e..c8874e2800e7 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -1204,8 +1204,8 @@ export const formatConfig = (config: ConfigFile): string => {
 };
 
 /**
- * Print the config with its edits and `\n` line endings; untouched code is otherwise preserved
- * byte for byte.
+ * Print the config with its edits. Untouched code is preserved byte for byte, and a file whose
+ * first line ends in CRLF is printed with CRLF line endings.
  */
 export const printConfig = (config: ConfigFile): PrintResultType => {
   const code = config._editor.toString();
diff --git a/code/core/src/csf-tools/ConfigObject.test.ts b/code/core/src/csf-tools/ConfigObject.test.ts
index dc97ecd28eaf..84e6d1731b45 100644
--- a/code/core/src/csf-tools/ConfigObject.test.ts
+++ b/code/core/src/csf-tools/ConfigObject.test.ts
@@ -70,7 +70,7 @@ describe('ConfigFile mutations', () => {
     }
   );
 
-  it('infers quotes and prints LF output for CRLF sources', () => {
+  it('infers quotes and keeps the line endings of CRLF sources', () => {
     const source = [
       "import { definePreview } from '@storybook/react';",
       '',
@@ -79,12 +79,13 @@ describe('ConfigFile mutations', () => {
     const config = loadConfig(source).parse();
     expect(config.set(['tags'], ['autodocs']).ok).toBe(true);
 
-    const result = printConfig(config);
-    expect(result.code).not.toContain('\r');
-    // Freshly generated nodes must reuse the source's quote style, which is
-    // only inferable when token offsets align with the original code.
-    expect(result.code).toContain("'autodocs'");
-    expect(result.code).not.toContain('"autodocs"');
+    expect(printConfig(config).code).toBe(
+      [
+        "import { definePreview } from '@storybook/react';",
+        '',
+        "export default definePreview({ tags: ['autodocs'] });",
+      ].join('\r\n')
+    );
   });
 
   it('keeps an empty parent that shadows an earlier spread', () => {
diff --git a/code/core/src/csf-tools/CsfFile.test.ts b/code/core/src/csf-tools/CsfFile.test.ts
index 09f7985b676a..1f56c75db6d1 100644
--- a/code/core/src/csf-tools/CsfFile.test.ts
+++ b/code/core/src/csf-tools/CsfFile.test.ts
@@ -36,7 +36,7 @@ const transform = (code: string, options: Partial<CsfOptions> = { makeTitle }) =
 };
 
 describe('CsfFile', () => {
-  it('prints an edited CRLF source with LF line endings', () => {
+  it('prints an edited CRLF source with CRLF line endings', () => {
     const source = ['export default { title: "foo/bar" };', '', 'export const Story = {};'].join(
       '\r\n'
     );
@@ -44,7 +44,7 @@ describe('CsfFile', () => {
     const [story] = csf.objects({ meta: false });
     story.set(['args', 'label'], 'Hi');
     expect(printCsf(csf).code).toBe(
-      'export default { title: "foo/bar" };\n\nexport const Story = { args: { label: "Hi" } };'
+      'export default { title: "foo/bar" };\r\n\r\nexport const Story = { args: { label: "Hi" } };'
     );
   });
 
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index c5da8d5fb119..8b885f244835 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -1227,8 +1227,8 @@ export const formatCsf = (
 };
 
 /**
- * Print the file with its pending edits and `\n` line endings; untouched code is otherwise
- * preserved byte for byte.
+ * Print the file with its pending edits. Untouched code is preserved byte for byte, and a file
+ * whose first line ends in CRLF is printed with CRLF line endings.
  */
 export const printCsf = (csf: CsfFile): PrintResultType => {
   const code = csf._editor.toString();
diff --git a/code/core/src/csf-tools/CsfFile.write.test.ts b/code/core/src/csf-tools/CsfFile.write.test.ts
index 9c7f0d469703..d3a98109de9d 100644
--- a/code/core/src/csf-tools/CsfFile.write.test.ts
+++ b/code/core/src/csf-tools/CsfFile.write.test.ts
@@ -21,7 +21,7 @@ beforeEach(() => {
 });
 
 describe('writeCsf', () => {
-  it('writes an edited CRLF file back to the file it was loaded from, with LF', async () => {
+  it('writes an edited CRLF file back to the file it was loaded from, with CRLF', async () => {
     const csf = loadCsf(source, { fileName, makeTitle: (title) => title ?? 'Untitled' }).parse();
     const [story] = csf.objects({ meta: false });
     story.set(['args', 'label'], 'Hi');
@@ -29,7 +29,7 @@ describe('writeCsf', () => {
     await writeCsf(csf);
 
     expect(fs.readFileSync(fileName, 'utf8')).toBe(
-      "export default { title: 'Button' };\nexport const Primary = { args: { label: 'Hi' } };\n"
+      "export default { title: 'Button' };\r\nexport const Primary = { args: { label: 'Hi' } };\r\n"
     );
   });
 });
diff --git a/code/core/src/csf-tools/estree/ast.ts b/code/core/src/csf-tools/estree/ast.ts
index 97549e0c75d6..b71cab9e42b2 100644
--- a/code/core/src/csf-tools/estree/ast.ts
+++ b/code/core/src/csf-tools/estree/ast.ts
@@ -78,6 +78,15 @@ const parseWith = (code: string, fileName: string | undefined, lang: Lang): Pars
 /** Replace CRLF and lone CR line endings with `\n`, as every parse does first. */
 export const normalizeLineEndings = (code: string) => code.replace(/\r\n?/g, '\n');
 
+/**
+ * Give `\n` code the line endings of the code it was normalized from: CRLF when the first line
+ * break of `original` is one, as Prettier's `endOfLine: 'auto'` decides.
+ */
+export const restoreLineEndings = (code: string, original: string) => {
+  const lineBreak = original.indexOf('\n');
+  return lineBreak > 0 && original[lineBreak - 1] === '\r' ? code.replaceAll('\n', '\r\n') : code;
+};
+
 /**
  * Parse a module. Without a TS or JS file extension there is no grammar to pick: TSX accepts the
  * most, but rejects generic arrows and `<T>value` assertions that `.ts` allows, so TS is tried next
diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index 1e34bd81d0b0..ef5ae2d8e42d 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -334,7 +334,7 @@ describe('removeFromList', () => {
       const array = (editor.program.body[0] as E.ExportDefaultDeclaration)
         .declaration as E.ArrayExpression;
       removeFromList(editor, arrayList(editor, array), array.elements.slice(1, 3) as E.Node[]);
-      expect(editor.toString()).toBe(`export default [1, /* k */ // k\n 4,\n];`);
+      expect(editor.toString()).toBe(`export default [1, /* k */ // k${eol} 4,${eol}];`);
     }
   );
 });
@@ -417,7 +417,7 @@ describe('removeStatement', () => {
       "import a from 'a';\r\n\r\n\r\nconst b = 1;\r\nconst c = 2;\r\n"
     );
     removeStatement(editor, editor.program.body[1]);
-    expect(editor.toString()).toBe("import a from 'a';\nconst c = 2;\n");
+    expect(editor.toString()).toBe("import a from 'a';\r\nconst c = 2;\r\n");
   });
 
   it('removes every comment that trails the statement on its line', () => {
@@ -746,13 +746,31 @@ describe('parenthesized default exports', () => {
 });
 
 describe('line endings', () => {
-  it.each(['\r\n', '\r'])('prints a file with %j line endings with LF only', (eol) => {
+  const edited = (eol: string) => {
     const csf = parse(['export default {', '  title: "A",', '};', ''].join(eol));
     const [meta] = csf.objects({ stories: false });
     meta.set(['parameters', 'layout'], 'centered');
-    expect(csf._editor.toString()).toBe(
-      'export default {\n  title: "A",\n  parameters: { layout: "centered" },\n};\n'
-    );
+    return csf._editor.toString();
+  };
+  const expected = [
+    'export default {',
+    '  title: "A",',
+    '  parameters: { layout: "centered" },',
+    '};',
+    '',
+  ];
+
+  it('prints a CRLF file with CRLF line endings, edits included', () => {
+    expect(edited('\r\n')).toBe(expected.join('\r\n'));
+  });
+
+  it('prints a file with lone CR line endings with LF', () => {
+    expect(edited('\r')).toBe(expected.join('\n'));
+  });
+
+  it('takes the line ending of the first line for a file that mixes them', () => {
+    const editor = new SourceEditor('const a = 1;\r\nconst b = 2;\nconst c = 3;\n');
+    expect(editor.toString()).toBe('const a = 1;\r\nconst b = 2;\r\nconst c = 3;\r\n');
   });
 });
 
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 80bdd78a224f..ebd6cea75bfd 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -15,6 +15,7 @@ import {
   outerSpan,
   parseModule,
   parsePrintable,
+  restoreLineEndings,
   sourceOf,
   walk,
 } from './ast.ts';
@@ -48,7 +49,7 @@ export type InputSourceMap =
  * byte-identical; `commit()` applies them, parses the result again and calls `onCommit`, so whoever
  * derived state from the old tree derives it again. Nodes of an earlier parse index code that is
  * gone: `source()` and the editing functions throw for them. Line endings are normalized to `\n`,
- * so `code`, node offsets and `toString()` all use `\n`.
+ * so `code`, node offsets and `edits` use `\n`; `toString()` restores CRLF for a CRLF file.
  */
 export class SourceEditor {
   _module: ParsedModule;
@@ -213,7 +214,7 @@ export class SourceEditor {
   }
 
   toString() {
-    return this._edits.toString();
+    return restoreLineEndings(this._edits.toString(), this._originalCode);
   }
 
   /** Quote for generated strings: the one most string literals of the file use. */
diff --git a/code/core/src/csf-tools/index.ts b/code/core/src/csf-tools/index.ts
index b3f24a1fe7b7..11f521b99811 100644
--- a/code/core/src/csf-tools/index.ts
+++ b/code/core/src/csf-tools/index.ts
@@ -26,6 +26,7 @@ export {
   outerSpan,
   parseModule,
   placeableTextOf,
+  restoreLineEndings,
   staticKey,
   textOf,
   unwrapExpression,
diff --git a/code/core/src/csf-tools/vitest-plugin/component-transformer.test.ts b/code/core/src/csf-tools/vitest-plugin/component-transformer.test.ts
index 6de1ea2a9513..b8b116f314fd 100644
--- a/code/core/src/csf-tools/vitest-plugin/component-transformer.test.ts
+++ b/code/core/src/csf-tools/vitest-plugin/component-transformer.test.ts
@@ -355,13 +355,13 @@ describe('component transformer', () => {
     `);
   });
 
-  it('writes a CRLF component file and its generated tests with LF line endings', async () => {
+  it('writes a CRLF component file and its generated tests with CRLF line endings', async () => {
     const code = `export const Badge = () => <div />;\r\nexport default () => <span />;`;
 
     const result = await transform({ code });
 
     expect(result.code).toContain('_test("Badge"');
-    expect(result.code).not.toContain('\r');
+    expect(result.code.replaceAll('\r\n', '')).not.toMatch(/[\r\n]/);
   });
 
   it('correctly handles aliased function and class exports', async () => {
diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
index c0c5db4ffc80..7175f8c652d2 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
@@ -49,13 +49,13 @@ const transform = async ({
 };
 
 describe('transformer', () => {
-  it('writes a CRLF story file and its generated tests with LF line endings', async () => {
+  it('writes a CRLF story file and its generated tests with CRLF line endings', async () => {
     const code = `export default { title: 'Button' };\r\nexport const Primary = {};`;
 
     const result = await transform({ code });
 
     expect(result.code).toContain('_test("Primary"');
-    expect(result.code).not.toContain('\r');
+    expect(result.code.replaceAll('\r\n', '')).not.toMatch(/[\r\n]/);
   });
 
   describe('CSF v1/v2/v3', () => {
diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.ts b/code/core/src/csf-tools/vitest-plugin/transformer.ts
index 9e2c506f34aa..bd565909264a 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.ts
@@ -8,7 +8,7 @@ import { decode, encode } from '@jridgewell/sourcemap-codec';
 import { dedent } from 'ts-dedent';
 
 import { type CsfSourceMap, type StoryTest, loadCsf } from '../CsfFile.ts';
-import { type Node, staticKey, locationOf } from '../estree/ast.ts';
+import { type Node, locationOf, restoreLineEndings, staticKey } from '../estree/ast.ts';
 import { type SourceEditor, appendMembers, prependStatement } from '../estree/editor.ts';
 import { generateUid } from '../estree/scope.ts';
 
@@ -71,7 +71,8 @@ export class GeneratedTail {
 
 // Generated lines map to their target node, so Vitest reports each test at its story.
 export const printWithTail = (editor: SourceEditor, tail: GeneratedTail, fileName: string) => {
-  const head = editor.toString();
+  // The tail is joined with `\n`, so line endings are restored once over the whole output.
+  const head = editor.edits.toString();
   const map = editor.generateMap({ source: fileName });
   const decoded = decode(map.mappings);
   const firstLine = head.split('\n').length;
@@ -92,7 +93,10 @@ export const printWithTail = (editor: SourceEditor, tail: GeneratedTail, fileNam
   });
   map.mappings = encode(decoded);
   return {
-    code: `${head}${separator}${tail.lines.map(({ text }) => text).join('\n')}\n`,
+    code: restoreLineEndings(
+      `${head}${separator}${tail.lines.map(({ text }) => text).join('\n')}\n`,
+      editor._originalCode
+    ),
     map: map as CsfSourceMap,
   };
 };
diff --git a/code/core/src/mocking-utils/extract.test.ts b/code/core/src/mocking-utils/extract.test.ts
index 61e6d18770ea..79a3b7918bb5 100644
--- a/code/core/src/mocking-utils/extract.test.ts
+++ b/code/core/src/mocking-utils/extract.test.ts
@@ -226,7 +226,7 @@ describe('extractMockCalls', () => {
         `import 'a';\r\n\r\nsb.mock(import('./bar/baz'), { spy: true });\r\n`,
         'preview.ts'
       );
-      expect(result.code).toBe(`import 'a';\n\nsb.mock("./bar/baz", { spy: true });\n`);
+      expect(result.code).toBe(`import 'a';\r\n\r\nsb.mock("./bar/baz", { spy: true });\r\n`);
     });
 
     it('names the file in the map and returns no map when nothing changed', () => {
diff --git a/code/lib/cli-storybook/src/automigrate/fix-files.test.ts b/code/lib/cli-storybook/src/automigrate/fix-files.test.ts
index 10167941492a..4c6bc994d69a 100644
--- a/code/lib/cli-storybook/src/automigrate/fix-files.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fix-files.test.ts
@@ -77,7 +77,7 @@ describe('createFixFiles', () => {
     ).toEqual([story]);
   });
 
-  it('reads a CRLF file with LF line endings, so only a real edit rewrites it', async () => {
+  it('reads a CRLF file with LF line endings and writes it back with CRLF', async () => {
     const { files, commit } = createFixFiles();
     fs.writeFileSync(main, "export default {\r\n  addons: ['a'],\r\n};\r\n");
 
@@ -86,7 +86,7 @@ describe('createFixFiles', () => {
     await commit();
 
     expect(fs.readFileSync(main, 'utf8')).toBe(
-      "export default {\n  addons: ['a'],\n  framework: 'x',\n};\n"
+      "export default {\r\n  addons: ['a'],\r\n  framework: 'x',\r\n};\r\n"
     );
   });
 
diff --git a/code/lib/cli-storybook/src/automigrate/fix-files.ts b/code/lib/cli-storybook/src/automigrate/fix-files.ts
index f2315c50e97c..49fa694f0537 100644
--- a/code/lib/cli-storybook/src/automigrate/fix-files.ts
+++ b/code/lib/cli-storybook/src/automigrate/fix-files.ts
@@ -7,6 +7,7 @@ import {
   formatConfig,
   loadConfig,
   normalizeLineEndings,
+  restoreLineEndings,
 } from 'storybook/internal/csf-tools';
 
 import { editParsedFile } from './helpers/edit-parsed-file.ts';
@@ -26,7 +27,10 @@ const messageOf = (error: unknown) => (error instanceof Error ? error.message :
  * refuses to overwrite a file that something else (such as `add()`) changed after the fix read it.
  */
 export interface FixFiles {
-  /** Read a file with `\n` line endings, including edits staged earlier by the same fix. */
+  /**
+   * Read a file with `\n` line endings, including edits staged earlier by the same fix. The commit
+   * writes the file back with the line endings it had.
+   */
   read(path: string): Promise<string>;
   /** Stage the complete contents of a file. */
   write(path: string, content: string): void;
@@ -141,8 +145,11 @@ export const createFixFiles = () => {
         `These files changed on disk after the migration read them, so nothing was written:\n${overwritten.join('\n')}`
       );
     }
-    for (const { path, content } of staged.values()) {
-      await (content === null ? unlink(path) : writeFile(path, content));
+    for (const [key, { path, content }] of staged) {
+      const original = originals.get(key);
+      await (content === null
+        ? unlink(path)
+        : writeFile(path, original ? restoreLineEndings(content, original) : content));
     }
   };
 
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/addon-svelte-csf-to-core.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/addon-svelte-csf-to-core.test.ts
index 2d0c794c4d58..5692570a6852 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/addon-svelte-csf-to-core.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/addon-svelte-csf-to-core.test.ts
@@ -247,7 +247,7 @@ describe('addon-svelte-csf-to-core', () => {
       expect(files[STORY]).toContain("import { defineMeta } from '@storybook/sveltekit';");
     });
 
-    it('merges imports in a CRLF file and writes it with LF line endings', async () => {
+    it('merges imports in a CRLF file and writes it with CRLF line endings', async () => {
       write(
         STORY,
         "<script module>\r\n  import { defineMeta } from '@storybook/addon-svelte-csf';\r\n  import { type StoryObj } from '@storybook/sveltekit';\r\n</script>\r\n"
@@ -256,7 +256,7 @@ describe('addon-svelte-csf-to-core', () => {
       const files = await migrate();
 
       expect(files[STORY]).toBe(
-        "<script module>\n  import { defineMeta, type StoryObj } from '@storybook/sveltekit';\n</script>\n"
+        "<script module>\r\n  import { defineMeta, type StoryObj } from '@storybook/sveltekit';\r\n</script>\r\n"
       );
     });
 
diff --git a/code/lib/cli-storybook/src/automigrate/pipeline.test.ts b/code/lib/cli-storybook/src/automigrate/pipeline.test.ts
index 31c1cec3e96c..5ca375287aaf 100644
--- a/code/lib/cli-storybook/src/automigrate/pipeline.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/pipeline.test.ts
@@ -345,7 +345,7 @@ describe('edit hooks', () => {
     expect(outcomes.get('b')).toEqual({ changed: [mainConfigPath], errors: [] });
   });
 
-  it('sees no change in a CRLF file that an edit leaves alone, and writes LF when it changes it', async () => {
+  it('sees no change in a CRLF file that an edit leaves alone, and keeps CRLF when it changes it', async () => {
     vol.fromJSON({ [mainConfigPath]: 'export default {\r\n  features: {},\r\n};\r\n' });
     const untouched = { filter: { kind: ['main'] as const }, editConfig: () => {} };
 
@@ -356,7 +356,7 @@ describe('edit hooks', () => {
 
     expect(detection.get('noop')).toEqual({ changed: [], errors: [] });
     expect(fs.readFileSync(mainConfigPath, 'utf8')).toBe(
-      'export default {\n  features: { a: true },\n};\n\n// formatted'
+      'export default {\r\n  features: { a: true },\r\n};\r\n\n// formatted'
     );
   });
 
diff --git a/code/lib/cli-storybook/src/automigrate/pipeline.ts b/code/lib/cli-storybook/src/automigrate/pipeline.ts
index e35642b6c3c1..87d7e95d93a4 100644
--- a/code/lib/cli-storybook/src/automigrate/pipeline.ts
+++ b/code/lib/cli-storybook/src/automigrate/pipeline.ts
@@ -10,6 +10,7 @@ import {
   loadCsf,
   normalizeLineEndings,
   printCsf,
+  restoreLineEndings,
 } from 'storybook/internal/csf-tools';
 
 import { createFixFiles } from './fix-files.ts';
@@ -221,7 +222,7 @@ export const runTransforms = async (
       continue;
     }
 
-    // Printers emit `\n`, so a CRLF file would otherwise always look changed.
+    // Hooks chain on `\n` text, whatever the file uses; its line endings come back on write.
     const source = normalizeLineEndings(raw);
     let code = source;
     // Kept across consecutive edits; dropped when a handler rewrites the text or an edit fails, so
@@ -257,7 +258,8 @@ export const runTransforms = async (
 
     if (write && code !== source) {
       try {
-        const output = printed ? await formatExistingFile(context.id, code) : code;
+        const restored = restoreLineEndings(code, raw);
+        const output = printed ? await formatExistingFile(context.id, restored) : restored;
         await writeFile(context.id, output);
       } catch (error) {
         for (const [fixId, outcome] of outcomes) {

From bb3781fbfacf07902aed412c020d9c7bd6e92e09 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Sat, 17 Oct 2026 23:49:33 +0200
Subject: [PATCH 162/326] refactor(codemod): drop the jscodeshift type imports

The transforms now parse with csf-tools and only read `path` and
`source` from the file jscodeshift hands them, so they no longer need
its `FileInfo` and `API` types. A `TransformFile` type in
`src/lib/utils.ts` describes that file, and the unused `api` and
`options` parameters are gone, so the tests call the transforms with
the file alone.

`jscodeshift` stays a dependency: `runCodemod` still spawns its CLI
and `upgrade-hierarchy-separators.js` still uses its API.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/lib/codemod/src/lib/utils.ts                        | 2 ++
 .../codemod/src/transforms/__tests__/csf-2-to-3.test.ts  | 9 ++-------
 .../__tests__/upgrade-deprecated-types.test.ts           | 7 +------
 code/lib/codemod/src/transforms/csf-2-to-3.ts            | 4 ++--
 code/lib/codemod/src/transforms/find-implicit-spies.ts   | 4 ++--
 .../codemod/src/transforms/upgrade-deprecated-types.ts   | 5 +++--
 6 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/code/lib/codemod/src/lib/utils.ts b/code/lib/codemod/src/lib/utils.ts
index f88a3007e23b..b4a29d7df396 100644
--- a/code/lib/codemod/src/lib/utils.ts
+++ b/code/lib/codemod/src/lib/utils.ts
@@ -1,5 +1,7 @@
 import { camelCase, upperFirst } from 'es-toolkit/string';
 
+export type TransformFile = { path: string; source: string };
+
 export const sanitizeName = (name: string) => {
   let key = upperFirst(camelCase(name)) as string;
   // prepend _ if name starts with a digit
diff --git a/code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts b/code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts
index 72c4bbfbbfb0..857d04b5b64b 100644
--- a/code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts
+++ b/code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts
@@ -1,7 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
 import ansiRegex from 'ansi-regex';
-import type { API } from 'jscodeshift';
 import { dedent } from 'ts-dedent';
 
 import _transform from '../csf-2-to-3.ts';
@@ -12,13 +11,9 @@ expect.addSnapshotSerializer({
 });
 
 const jsTransform = async (source: string) =>
-  (await _transform({ source, path: 'Component.stories.jsx' }, {} as API, {})).trim();
+  (await _transform({ source, path: 'Component.stories.jsx' })).trim();
 const tsTransform = async (source: string) =>
-  (
-    await _transform({ source, path: 'Component.stories.tsx' }, {} as API, {
-      parser: 'tsx',
-    })
-  ).trim();
+  (await _transform({ source, path: 'Component.stories.tsx' })).trim();
 
 describe('csf-2-to-3', () => {
   describe('javascript', () => {
diff --git a/code/lib/codemod/src/transforms/__tests__/upgrade-deprecated-types.test.ts b/code/lib/codemod/src/transforms/__tests__/upgrade-deprecated-types.test.ts
index 029b113c3d7f..c9c0e2a19327 100644
--- a/code/lib/codemod/src/transforms/__tests__/upgrade-deprecated-types.test.ts
+++ b/code/lib/codemod/src/transforms/__tests__/upgrade-deprecated-types.test.ts
@@ -1,7 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
 import ansiRegex from 'ansi-regex';
-import type { API } from 'jscodeshift';
 import { dedent } from 'ts-dedent';
 
 import _transform from '../upgrade-deprecated-types.ts';
@@ -12,11 +11,7 @@ expect.addSnapshotSerializer({
 });
 
 const tsTransform = async (source: string) =>
-  (
-    await _transform({ source, path: 'Component.stories.tsx' }, {} as API, {
-      parser: 'tsx',
-    })
-  ).trim();
+  (await _transform({ source, path: 'Component.stories.tsx' })).trim();
 
 describe('upgrade-deprecated-types', () => {
   describe('typescript', () => {
diff --git a/code/lib/codemod/src/transforms/csf-2-to-3.ts b/code/lib/codemod/src/transforms/csf-2-to-3.ts
index b4c6d67a96ec..d81dd5950a5c 100644
--- a/code/lib/codemod/src/transforms/csf-2-to-3.ts
+++ b/code/lib/codemod/src/transforms/csf-2-to-3.ts
@@ -13,10 +13,10 @@ import {
 } from 'storybook/internal/csf-tools';
 import { logger } from 'storybook/internal/node-logger';
 
-import type { API, FileInfo } from 'jscodeshift';
 import prettier from 'prettier';
 import invariant from 'tiny-invariant';
 
+import type { TransformFile } from '../lib/utils.ts';
 import { upgradeDeprecatedTypes } from './upgrade-deprecated-types.ts';
 
 const renameAnnotation = (annotation: string) => {
@@ -135,7 +135,7 @@ function removeUnusedTemplates(editor: SourceEditor, templates: string[]) {
   editor.commit();
 }
 
-export default async function transform(info: FileInfo, api: API, options: { parser?: string }) {
+export default async function transform(info: TransformFile) {
   const makeTitle = (userTitle?: string) => {
     return userTitle || 'FIXME';
   };
diff --git a/code/lib/codemod/src/transforms/find-implicit-spies.ts b/code/lib/codemod/src/transforms/find-implicit-spies.ts
index 9117c44dfb4f..4b678242f3ab 100644
--- a/code/lib/codemod/src/transforms/find-implicit-spies.ts
+++ b/code/lib/codemod/src/transforms/find-implicit-spies.ts
@@ -7,7 +7,7 @@ import {
   walk,
 } from 'storybook/internal/csf-tools';
 
-import type { FileInfo } from 'jscodeshift';
+import type { TransformFile } from '../lib/utils.ts';
 
 function findImplicitSpies(editor: SourceEditor, node: Node, keys: string[]) {
   walk(node, (identifier) => {
@@ -66,7 +66,7 @@ function findAnnotations(program: E.Program, storyName: string, annotationName:
   return values;
 }
 
-export default async function transform(info: FileInfo) {
+export default async function transform(info: TransformFile) {
   const csf = loadCsf(info.source, { makeTitle: (title) => title, fileName: info.path });
   csf.parse();
   const editor = csf._editor;
diff --git a/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts b/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts
index f1962f5a7ee7..5200a758c7ef 100644
--- a/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts
+++ b/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts
@@ -10,9 +10,10 @@ import {
 } from 'storybook/internal/csf-tools';
 import { logger } from 'storybook/internal/node-logger';
 
-import type { API, FileInfo } from 'jscodeshift';
 import prettier from 'prettier';
 
+import type { TransformFile } from '../lib/utils.ts';
+
 const deprecatedTypes = [
   'ComponentStory',
   'ComponentStoryFn',
@@ -28,7 +29,7 @@ function migrateType(oldType: string) {
   return oldType.replace('Component', '');
 }
 
-export default async function transform(info: FileInfo, api: API, options: { parser?: string }) {
+export default async function transform(info: TransformFile) {
   // TODO what do I need to with the title?
   const csf = loadCsf(info.source, { makeTitle: (title) => title, fileName: info.path });
 

From f30a326cd26c4fbb2c6a99287629382cad491414 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Sat, 17 Oct 2026 23:50:14 +0200
Subject: [PATCH 163/326] refactor(cli): delete the unused getBabelDependencies

Nothing calls `getBabelDependencies` anymore; its JSDoc still pointed
at the react-native generator, which no longer uses it. Deleting it
also drops the `satisfies` import from semver.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/cli/helpers.ts | 56 +-----------------------------------
 1 file changed, 1 insertion(+), 55 deletions(-)

diff --git a/code/core/src/cli/helpers.ts b/code/core/src/cli/helpers.ts
index 53aa9753102f..62063d2c3ae0 100644
--- a/code/core/src/cli/helpers.ts
+++ b/code/core/src/cli/helpers.ts
@@ -16,7 +16,7 @@ import {
 import { Feature } from 'storybook/internal/types';
 
 import picocolors from 'picocolors';
-import { coerce, satisfies } from 'semver';
+import { coerce } from 'semver';
 import stripJsonComments from 'strip-json-comments';
 import invariant from 'tiny-invariant';
 
@@ -49,60 +49,6 @@ export const writeFileAsJson = (jsonPath: string, content: unknown) => {
   return true;
 };
 
-/**
- * Detect if any babel dependencies need to be added to the project This is currently used by
- * react-native generator
- *
- * @example
- *
- * ```ts
- * const babelDependencies = await getBabelDependencies(
- *   packageManager,
- *   npmOptions,
- *   packageJson
- * ); // you can then spread the result when using installDependencies
- * installDependencies(npmOptions, [
- *   `@storybook/react@${storybookVersion}`,
- *   ...babelDependencies,
- * ]);
- * ```
- *
- * @param packageJson The current package.json so we can inspect its contents
- * @returns Contains the packages and versions that need to be installed
- */
-export async function getBabelDependencies(packageManager: JsPackageManager) {
-  const dependenciesToAdd = [];
-  let babelLoaderVersion = '^8.0.0-0';
-
-  const babelCoreVersion = packageManager.getDependencyVersion('babel-core');
-
-  if (!babelCoreVersion) {
-    if (!packageManager.getDependencyVersion('@babel/core')) {
-      const babelCoreInstallVersion = await packageManager.getVersion('@babel/core');
-      dependenciesToAdd.push(`@babel/core@${babelCoreInstallVersion}`);
-    }
-  } else {
-    const latestCompatibleBabelVersion = await packageManager.latestVersion(
-      'babel-core',
-      babelCoreVersion
-    );
-    // Babel 6
-    if (latestCompatibleBabelVersion && satisfies(latestCompatibleBabelVersion, '^6.0.0')) {
-      babelLoaderVersion = '^7.0.0';
-    }
-  }
-
-  if (!packageManager.getDependencyVersion('babel-loader')) {
-    const babelLoaderInstallVersion = await packageManager.getVersion(
-      'babel-loader',
-      babelLoaderVersion
-    );
-    dependenciesToAdd.push(`babel-loader@${babelLoaderInstallVersion}`);
-  }
-
-  return dependenciesToAdd;
-}
-
 export function addToDevDependenciesIfNotPresent(
   packageJson: PackageJson,
   name: string,

From 8d0bb3af44353ef138051bf1b30724d2f18d919a Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Sun, 18 Oct 2026 02:49:01 +0200
Subject: [PATCH 164/326] fix(scripts): migrate sandbox-parts to the
 SourceEditor API

The sandbox task still used `printExpression`, `_editorSource` and
`_commit()`, which no longer exist, so the scripts typecheck failed and
the SvelteKit and module-mocking sandbox steps would throw. It now uses
the shared list and statement helpers instead of hand-built appends,
so the inserted argument, member and mock statements follow the file's
layout, and `staticKey` instead of a local copy.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 scripts/tasks/sandbox-parts.ts | 66 +++++++++++-----------------------
 1 file changed, 20 insertions(+), 46 deletions(-)

diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts
index 5fd2c467424b..11e77684154f 100644
--- a/scripts/tasks/sandbox-parts.ts
+++ b/scripts/tasks/sandbox-parts.ts
@@ -21,9 +21,14 @@ import {
   type CsfValue,
   type ESTree as E,
   type ESTreeNode as Node,
+  appendToList,
+  argumentList,
   readConfig as csfReadConfig,
+  insertAfterImports,
+  objectList,
   parseExpression,
-  printExpression,
+  staticKey,
+  textOf,
   walk,
   writeConfig,
 } from '../../code/core/src/csf-tools/index.ts';
@@ -104,22 +109,6 @@ async function pathExists(path: string) {
   }
 }
 
-const propKey = (p: E.ObjectPropertyKind) => {
-  if (p.type !== 'Property') {
-    return null;
-  }
-
-  if (p.key.type === 'Identifier') {
-    return p.key.name;
-  }
-
-  if (p.key.type === 'Literal' && typeof p.key.value === 'string') {
-    return p.key.value;
-  }
-
-  return null;
-};
-
 const makeObjectSource = (path: string[], value: string) =>
   path.reduceRight((inner, key) => `{ ${key}: ${inner} }`, value);
 
@@ -129,24 +118,20 @@ const updateObjectExpression = (
   value: string,
   existing: E.ObjectExpression
 ) => {
-  const { edits } = config._editorSource;
+  const editor = config._editor;
   const [first, ...rest] = path;
-  const existingField = existing.properties.find((p) => propKey(p) === first) as
+  const existingField = existing.properties.find((p) => staticKey(p) === first) as
     | E.ObjectProperty
     | undefined;
 
   if (!existingField) {
-    const member = `${first}: ${makeObjectSource(rest, value)}`;
-    const last = existing.properties.at(-1);
-    if (last) {
-      edits.appendLeft(last.end, `, ${member}`);
-    } else {
-      edits.overwrite(existing.start, existing.end, `{ ${member} }`);
-    }
+    appendToList(editor, objectList(editor, existing), [
+      `${first}: ${makeObjectSource(rest, value)}`,
+    ]);
   } else if (existingField.value.type === 'ObjectExpression' && rest.length > 0) {
     updateObjectExpression(config, rest, value, existingField.value);
   } else {
-    edits.overwrite(
+    editor.edits.overwrite(
       existingField.value.start,
       existingField.value.end,
       makeObjectSource(rest, value)
@@ -202,17 +187,13 @@ function setPluginParam(
   if (!valueNode) {
     throw new Error(`Unexpected value ${JSON.stringify(paramValue)}`);
   }
-  const value = printExpression(valueNode);
+  const value = textOf(valueNode);
 
   if (paramPos === call.arguments.length) {
-    const lastArgument = call.arguments.at(-1);
-    const argument = makeObjectSource(paramPath, value);
-    if (lastArgument) {
-      config._editorSource.edits.appendLeft(lastArgument.end, `, ${argument}`);
-    } else {
-      config._editorSource.edits.appendLeft(call.end - 1, argument);
-    }
-    config._commit();
+    appendToList(config._editor, argumentList(config._editor, call), [
+      makeObjectSource(paramPath, value),
+    ]);
+    config._editor.commit();
     return;
   }
 
@@ -224,7 +205,7 @@ function setPluginParam(
   }
 
   updateObjectExpression(config, paramPath, value, param);
-  config._commit();
+  config._editor.commit();
 }
 
 const logger = console;
@@ -1067,15 +1048,8 @@ export const extendPreview: Task['run'] = async ({ template, sandboxDir }) => {
     "sb.mock(import('uuid'));",
   ].join('\n');
 
-  const lastImport = previewConfig._program.body.findLast(
-    (node) => node.type === 'ImportDeclaration'
-  );
-  if (lastImport) {
-    previewConfig._editorSource.edits.appendLeft(lastImport.end, `\n${mockStatements}`);
-  } else {
-    previewConfig._editorSource.edits.prepend(`${mockStatements}\n`);
-  }
-  previewConfig._commit();
+  insertAfterImports(previewConfig._editor, mockStatements);
+  previewConfig._editor.commit();
 
   await writeConfig(previewConfig);
 };

From 96cefcf2a7d77b9f5f83e07404d050187f87f990 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Sun, 18 Oct 2026 02:50:44 +0200
Subject: [PATCH 165/326] fix(csf-tools): give inserted text the file's line
 endings

Only parsed text was normalized to `\n`, so inserted text that carried
CRLF, such as a Prettier-formatted vitest setup file with
`endOfLine: 'crlf'`, came out as `\r\r\n` in a CRLF file and as mixed
endings in an LF file. `restoreLineEndings` now normalizes what it is
given before choosing the ending, so the editor, the automigrate
pipeline and fix-files all write one ending. That makes the CRLF
special case for functions in `printValue` redundant.

The print docstrings no longer claim byte-for-byte output: a file that
mixes line endings is written with its first line's ending.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/ConfigFile.ts         |  4 ++--
 code/core/src/csf-tools/CsfFile.ts            |  4 ++--
 code/core/src/csf-tools/estree/ast.ts         |  9 ++++++---
 code/core/src/csf-tools/estree/editor.test.ts | 17 +++++++++--------
 code/core/src/csf-tools/estree/editor.ts      | 13 ++++++-------
 5 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index c8874e2800e7..1d1162732573 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -1204,8 +1204,8 @@ export const formatConfig = (config: ConfigFile): string => {
 };
 
 /**
- * Print the config with its edits. Untouched code is preserved byte for byte, and a file whose
- * first line ends in CRLF is printed with CRLF line endings.
+ * Print the config with its edits. Untouched code is kept as written, except that every line ends
+ * like the first one: CRLF when that is CRLF, `\n` otherwise.
  */
 export const printConfig = (config: ConfigFile): PrintResultType => {
   const code = config._editor.toString();
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index 8b885f244835..1f90f7a82806 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -1227,8 +1227,8 @@ export const formatCsf = (
 };
 
 /**
- * Print the file with its pending edits. Untouched code is preserved byte for byte, and a file
- * whose first line ends in CRLF is printed with CRLF line endings.
+ * Print the file with its pending edits. Untouched code is kept as written, except that every line
+ * ends like the first one: CRLF when that is CRLF, `\n` otherwise.
  */
 export const printCsf = (csf: CsfFile): PrintResultType => {
   const code = csf._editor.toString();
diff --git a/code/core/src/csf-tools/estree/ast.ts b/code/core/src/csf-tools/estree/ast.ts
index b71cab9e42b2..46284746c659 100644
--- a/code/core/src/csf-tools/estree/ast.ts
+++ b/code/core/src/csf-tools/estree/ast.ts
@@ -79,12 +79,15 @@ const parseWith = (code: string, fileName: string | undefined, lang: Lang): Pars
 export const normalizeLineEndings = (code: string) => code.replace(/\r\n?/g, '\n');
 
 /**
- * Give `\n` code the line endings of the code it was normalized from: CRLF when the first line
- * break of `original` is one, as Prettier's `endOfLine: 'auto'` decides.
+ * Give code one line ending, the one of `original`'s first line break: CRLF when that is one, as
+ * Prettier's `endOfLine: 'auto'` decides, and `\n` otherwise.
  */
 export const restoreLineEndings = (code: string, original: string) => {
   const lineBreak = original.indexOf('\n');
-  return lineBreak > 0 && original[lineBreak - 1] === '\r' ? code.replaceAll('\n', '\r\n') : code;
+  const normalized = normalizeLineEndings(code);
+  return lineBreak > 0 && original[lineBreak - 1] === '\r'
+    ? normalized.replaceAll('\n', '\r\n')
+    : normalized;
 };
 
 /**
diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index ef5ae2d8e42d..c1b9b6299396 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -23,7 +23,6 @@ import {
   prependStatement,
   prependToList,
   printMembers,
-  printValue,
   reindent,
   removeFromList,
   removeStatement,
@@ -772,6 +771,15 @@ describe('line endings', () => {
     const editor = new SourceEditor('const a = 1;\r\nconst b = 2;\nconst c = 3;\n');
     expect(editor.toString()).toBe('const a = 1;\r\nconst b = 2;\r\nconst c = 3;\r\n');
   });
+
+  it.each([
+    ['a CRLF file with CRLF', 'a;\r\n', 'a;\r\nc;\r\nd;\r\n'],
+    ['an LF file with LF', 'a;\n', 'a;\nc;\nd;\n'],
+  ])('writes inserted CRLF text into %s', (_, code, expected) => {
+    const editor = new SourceEditor(code);
+    appendStatement(editor, 'c;\r\nd;');
+    expect(editor.toString()).toBe(expected);
+  });
 });
 
 describe('multi-line members', () => {
@@ -910,13 +918,6 @@ describe('printMembers', () => {
   });
 });
 
-describe('printValue', () => {
-  it('prints a function loaded from a CRLF file with LF line endings', () => {
-    const fn = Object.assign(() => 1, { toString: () => '() => {\r\n  return 1;\r\n}' });
-    expect(printValue(fn, "'")).toBe('() => {\n  return 1;\n}');
-  });
-});
-
 describe('generateMap', () => {
   const original = `const a = 1;\nconst b = 2;\nexport default { title: 'A' };\n`;
   // An earlier transform: drops the first line and maps the result back to `original`.
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index ebd6cea75bfd..09c087142d53 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -45,11 +45,11 @@ export type InputSourceMap =
     };
 
 /**
- * Source text plus its OXC AST. Edits accumulate in `edits`, so untouched code stays
- * byte-identical; `commit()` applies them, parses the result again and calls `onCommit`, so whoever
- * derived state from the old tree derives it again. Nodes of an earlier parse index code that is
- * gone: `source()` and the editing functions throw for them. Line endings are normalized to `\n`,
- * so `code`, node offsets and `edits` use `\n`; `toString()` restores CRLF for a CRLF file.
+ * Source text plus its OXC AST. Edits accumulate in `edits`, so untouched code stays as written;
+ * `commit()` applies them, parses the result again and calls `onCommit`, so whoever derived state
+ * from the old tree derives it again. Nodes of an earlier parse index code that is gone: `source()`
+ * and the editing functions throw for them. Line endings are normalized to `\n`, so `code`, node
+ * offsets and `edits` use `\n`; `toString()` ends every line like the first, inserted text too.
  */
 export class SourceEditor {
   _module: ParsedModule;
@@ -302,8 +302,7 @@ export const printValue = (
     return 'null';
   }
   if (typeof value === 'function') {
-    // A function prints as the text of the file it was loaded from, which may use CRLF.
-    return normalizeLineEndings(value.toString());
+    return value.toString();
   }
   if (typeof value === 'string') {
     return printString(value, quote);

From 041475ba25d624262c8284f6503888cee077cf7a Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Sun, 18 Oct 2026 02:52:36 +0200
Subject: [PATCH 166/326] fix(csf-tools): detect lists of an earlier parse

A `List` read before a commit holds offsets into code that is gone, and
the list functions accepted it, so `appendToList` with a stale list
silently wrote into the wrong place. The list constructors now record
the parse they read, in the same map as the nodes, and the list
functions assert it like they do for nodes.

The error now names every way to hold a node of another parse, not
only a commit: nodes from `parseExpression` or `get()` are read with
`textOf`. MIGRATION.md no longer claims that every edit is checked;
raw offsets passed to `_editor.edits` are not.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 MIGRATION.md                                  |  2 +-
 code/core/src/csf-tools/estree/ast.ts         |  6 +++
 code/core/src/csf-tools/estree/editor.test.ts |  9 ++++
 code/core/src/csf-tools/estree/editor.ts      | 44 +++++++++++++------
 4 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 14995e8f92be..9a222aec489a 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1327,7 +1327,7 @@ Storybook no longer bundles Babel or recast to read and write story and config f
 #### Changes for tooling that imports Storybook's internal entry points
 
 - `storybook/internal/babel` is removed. Import Babel from your own `@babel/*` dependencies if you still need it.
-- The nodes exposed by `storybook/internal/csf-tools` are ESTree (OXC) nodes instead of Babel nodes, for example `Literal` instead of `StringLiteral` and `Property` instead of `ObjectProperty`/`ObjectMethod`. `CsfFile._ast` and the `NodePath` fields are removed; use `CsfFile._program` and `CsfFile._editor`. `ConfigFile._ast` is removed as well; use `ConfigFile._program` and `ConfigFile._editor`. Both `_editor`s are a `SourceEditor`: call `_editor.commit()` to apply pending edits, after which the file parses the result again. Nodes from before a commit are stale, and editing with them throws.
+- The nodes exposed by `storybook/internal/csf-tools` are ESTree (OXC) nodes instead of Babel nodes, for example `Literal` instead of `StringLiteral` and `Property` instead of `ObjectProperty`/`ObjectMethod`. `CsfFile._ast` and the `NodePath` fields are removed; use `CsfFile._program` and `CsfFile._editor`. `ConfigFile._ast` is removed as well; use `ConfigFile._program` and `ConfigFile._editor`. Both `_editor`s are a `SourceEditor`: call `_editor.commit()` to apply pending edits, after which the file parses the result again. The editing functions and `source()` throw for nodes of another parse, such as nodes from before a commit; offsets passed to `_editor.edits` are not checked.
 - `CsfObject#get` returns an ESTree expression, and `set`/`transform` accept expressions from `get()` or `parseExpression(code)`. Use `textOf(node)` to read an expression's source, and `placeableTextOf(node)` to build new code around it.
 - An `experimental_enrichCsf` function receives the new `CsfFile`. Add code with `csf._appendStatement(code)` instead of pushing Babel nodes onto `csf._ast`.
 - `babelParse` is removed; use `parseModule(code, fileName)` from `storybook/internal/csf-tools`, which returns the ESTree `program` and `comments`. `babelParseFile` is removed as well; read CSF with `loadCsf(code, options)` or `readCsf(fileName, options)`.
diff --git a/code/core/src/csf-tools/estree/ast.ts b/code/core/src/csf-tools/estree/ast.ts
index 46284746c659..0006851e9108 100644
--- a/code/core/src/csf-tools/estree/ast.ts
+++ b/code/core/src/csf-tools/estree/ast.ts
@@ -337,6 +337,12 @@ const nodeModules = new WeakMap<object, ParsedModule>();
 /** The parse a node of `parsePrintable` or `expressionFromSource` came from. */
 export const moduleOf = (node: object): ParsedModule | undefined => nodeModules.get(node);
 
+/** Mark `value` as derived from the nodes of `module`, so `moduleOf` finds that parse for it. */
+export const derivedFrom = <T extends object>(value: T, module: ParsedModule): T => {
+  nodeModules.set(value, module);
+  return value;
+};
+
 const outerSpans = new WeakMap<object, Span>();
 
 /** The span of a node with the parentheses written around it. */
diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index c1b9b6299396..a437111893c0 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -125,6 +125,15 @@ describe('commit', () => {
     expect(editor.toString()).toBe("import { a } from 'a';\n");
   });
 
+  it('throws for a list read before a commit', () => {
+    const editor = new SourceEditor('f(a);\n');
+    const call = (editor.program.body[0] as E.ExpressionStatement).expression as E.CallExpression;
+    const stale = argumentList(editor, call);
+    appendStatement(editor, 'g();');
+    editor.commit();
+    expect(() => appendToList(editor, stale, ['b'])).toThrow('Cannot edit a list of another parse');
+  });
+
   it('derives the story exports of a CsfFile again', () => {
     const csf = parse('export default {};\nexport const A = {};\n');
     appendStatement(csf._editor, 'export const B = {};');
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 09c087142d53..f183f9682596 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -10,6 +10,7 @@ import {
   isNode,
   isStringLiteral,
   isValidIdentifier,
+  derivedFrom,
   moduleOf,
   normalizeLineEndings,
   outerSpan,
@@ -47,9 +48,10 @@ export type InputSourceMap =
 /**
  * Source text plus its OXC AST. Edits accumulate in `edits`, so untouched code stays as written;
  * `commit()` applies them, parses the result again and calls `onCommit`, so whoever derived state
- * from the old tree derives it again. Nodes of an earlier parse index code that is gone: `source()`
- * and the editing functions throw for them. Line endings are normalized to `\n`, so `code`, node
- * offsets and `edits` use `\n`; `toString()` ends every line like the first, inserted text too.
+ * from the old tree derives it again. Nodes and lists of an earlier parse index code that is gone:
+ * `source()` and the editing functions throw for them. Line endings are normalized to `\n`, so
+ * `code`, node offsets and `edits` use `\n`; `toString()` ends every line like the first, inserted
+ * text too.
  */
 export class SourceEditor {
   _module: ParsedModule;
@@ -133,12 +135,13 @@ export class SourceEditor {
     return sourceOf(this.code, node);
   }
 
-  /** Throw for a node of another parse, such as one from before a commit. */
-  assertCurrent(node: Span) {
-    const module = moduleOf(node);
+  /** Throw for a node or list of another parse, such as one from before a commit. */
+  assertCurrent(value: object) {
+    const module = moduleOf(value);
     if (module && module !== this._module) {
+      const what = 'type' in value ? `${value.type} node` : 'list';
       throw new Error(
-        `Cannot edit a ${(node as Node).type} node of another parse: nodes are stale after \`commit()\`, look them up again`
+        `Cannot edit a ${what} of another parse: stale after \`commit()\`, or from \`parseExpression\`/\`get()\`; use \`textOf\` for those`
       );
     }
   }
@@ -429,6 +432,9 @@ export interface List {
   padding: string;
 }
 
+// A list indexes the code of the parse it was read from, so it goes stale with its nodes.
+const listOf = (editor: SourceEditor, list: List) => derivedFrom(list, editor._module);
+
 /** The `{ … }` of an import or export with at least one named specifier. */
 export const specifierList = (
   editor: SourceEditor,
@@ -440,12 +446,12 @@ export const specifierList = (
     (specifier) => specifier.type === 'ImportSpecifier' || specifier.type === 'ExportSpecifier'
   );
   const afterLast = nextTokenStart(editor, items.at(-1)!.end);
-  return {
+  return listOf(editor, {
     open: previousTokenEnd(editor, items[0].start),
     close: code[afterLast] === ',' ? nextTokenStart(editor, afterLast + 1) : afterLast,
     items,
     padding: ' ',
-  };
+  });
 };
 
 export const objectList = (
@@ -453,7 +459,12 @@ export const objectList = (
   object: E.ObjectExpression | E.ObjectPattern
 ): List => {
   editor.assertCurrent(object);
-  return { open: object.start + 1, close: object.end - 1, items: object.properties, padding: ' ' };
+  return listOf(editor, {
+    open: object.start + 1,
+    close: object.end - 1,
+    items: object.properties,
+    padding: ' ',
+  });
 };
 
 // A hole (`[a, , b]`) is an empty item right before the comma that writes it.
@@ -476,7 +487,7 @@ export const arrayList = (editor: SourceEditor, array: E.ArrayExpression): List
     cursor = separatorAfter(editor, item) ?? item.end;
     return item;
   });
-  return { open, close, items, padding: '' };
+  return listOf(editor, { open, close, items, padding: '' });
 };
 
 // An argument's item spans the parentheses around it.
@@ -486,18 +497,19 @@ export const argumentList = (editor: SourceEditor, call: E.CallExpression): List
   if (call.optional && !call.typeArguments) {
     open = nextTokenStart(editor, open + '?.'.length);
   }
-  return { open: open + 1, close: call.end - 1, items: call.arguments.map(outerSpan), padding: '' };
+  const items = call.arguments.map(outerSpan);
+  return listOf(editor, { open: open + 1, close: call.end - 1, items, padding: '' });
 };
 
 /** The declarators of a declaration, from its keyword to its last declarator. */
 export const declaratorList = (editor: SourceEditor, declaration: E.VariableDeclaration): List => {
   editor.assertCurrent(declaration);
-  return {
+  return listOf(editor, {
     open: previousTokenEnd(editor, declaration.declarations[0].start),
     close: declaration.declarations.at(-1)!.end,
     items: declaration.declarations,
     padding: ' ',
-  };
+  });
 };
 
 // Position right after the comma that follows an item, if it has one.
@@ -633,6 +645,7 @@ const itemTextWith = (
  * comments that trail the item on its line move above it, so a comma can follow the text.
  */
 export const itemText = (editor: SourceEditor, list: List, item: Span) => {
+  editor.assertCurrent(list);
   editor.assertCurrent(item);
   return itemTextWith(editor, list, list.items.indexOf(item), (start) =>
     dedentSource(editor, start, item.end, lineIndent(editor.code, item.start))
@@ -652,6 +665,7 @@ const inline = (editor: SourceEditor, list: List, texts: string[]) => {
 };
 
 export const appendToList = (editor: SourceEditor, list: List, texts: string[]) => {
+  editor.assertCurrent(list);
   const { code, edits } = editor;
   const { items, padding } = list;
   if (items.length === 0) {
@@ -699,6 +713,7 @@ export const appendToList = (editor: SourceEditor, list: List, texts: string[])
 };
 
 export const prependToList = (editor: SourceEditor, list: List, texts: string[]) => {
+  editor.assertCurrent(list);
   const { code, edits } = editor;
   const [first] = list.items;
   if (!first) {
@@ -718,6 +733,7 @@ export const prependToList = (editor: SourceEditor, list: List, texts: string[])
 
 /** Remove items with their separators and the comments that lead and trail them from a list. */
 export const removeFromList = (editor: SourceEditor, list: List, removedItems: readonly Span[]) => {
+  editor.assertCurrent(list);
   removedItems.forEach((item) => editor.assertCurrent(item));
   const { code, edits } = editor;
   const { items } = list;

From a44b86441b097444fa9e080ef563a459f13cc0bf Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Sun, 18 Oct 2026 02:54:00 +0200
Subject: [PATCH 167/326] fix(codemod): upgrade deprecated types without
 parsing CSF

`upgrade-deprecated-types` loaded the file as CSF only to reach its
editor. Since `CsfFile` parses CSF again on every commit, a file without
a default export or with a dynamic title now threw instead of having its
types renamed. The codemod only renames imports and type references, so
it edits a bare `SourceEditor`.

csf-2-to-3 and story-to-csf-factory still commit a `CsfFile` several
times, and each commit validates CSF again. If that ever rejects a file
mid-transform, `onCommit` should mark the indexes stale and derive them
lazily instead.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../upgrade-deprecated-types.test.ts          | 27 +++++++++++++++++++
 .../transforms/upgrade-deprecated-types.ts    | 11 +++-----
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/code/lib/codemod/src/transforms/__tests__/upgrade-deprecated-types.test.ts b/code/lib/codemod/src/transforms/__tests__/upgrade-deprecated-types.test.ts
index c9c0e2a19327..112c2d20a326 100644
--- a/code/lib/codemod/src/transforms/__tests__/upgrade-deprecated-types.test.ts
+++ b/code/lib/codemod/src/transforms/__tests__/upgrade-deprecated-types.test.ts
@@ -100,6 +100,33 @@ describe('upgrade-deprecated-types', () => {
       `);
     });
 
+    it('upgrades a file without a default export or with a dynamic title', async () => {
+      await expect(
+        tsTransform(dedent`
+          import type { ComponentStory } from '@storybook/react';
+          import { Cat } from './Cat';
+
+          export const A: ComponentStory<typeof Cat> = () => <Cat />;
+        `)
+      ).resolves.toBe(dedent`
+        import type { StoryFn } from "@storybook/react";
+        import { Cat } from "./Cat";
+
+        export const A: StoryFn<typeof Cat> = () => <Cat />;
+      `);
+      await expect(
+        tsTransform(dedent`
+          import type { ComponentMeta } from '@storybook/react';
+
+          export default { title: \`Cats/\${name}\` } satisfies ComponentMeta<typeof Cat>;
+        `)
+      ).resolves.toBe(dedent`
+        import type { Meta } from "@storybook/react";
+
+        export default { title: \`Cats/\${name}\` } satisfies Meta<typeof Cat>;
+      `);
+    });
+
     it('upgrade namespaces', async () => {
       await expect(
         tsTransform(dedent`
diff --git a/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts b/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts
index 5200a758c7ef..4a77331be7f1 100644
--- a/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts
+++ b/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts
@@ -1,8 +1,6 @@
 import {
   type ESTree as E,
-  type SourceEditor,
-  loadCsf,
-  printCsf,
+  SourceEditor,
   removeFromList,
   specifierList,
   storyShapeError,
@@ -30,12 +28,11 @@ function migrateType(oldType: string) {
 }
 
 export default async function transform(info: TransformFile) {
-  // TODO what do I need to with the title?
-  const csf = loadCsf(info.source, { makeTitle: (title) => title, fileName: info.path });
+  const editor = new SourceEditor(info.source, info.path);
 
-  upgradeDeprecatedTypes(csf._editor);
+  upgradeDeprecatedTypes(editor);
 
-  let output = printCsf(csf).code;
+  let output = editor.toString();
 
   try {
     output = await prettier.format(output, {

From 6b5b03ba5787db901856575311ff08bf3dfbfb14 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Sun, 18 Oct 2026 02:54:34 +0200
Subject: [PATCH 168/326] docs(migration): document key reading,
 getBabelDependencies and line endings

Three changes of the ESTree migration were missing from the guide: story
files now read string-literal keys and ignore computed identifier keys,
which changes story ids for `{ 'title': 'X' }`; `getBabelDependencies`
is gone from `storybook/internal/cli`; and a file that mixes line
endings is written with its first line's ending.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 MIGRATION.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 9a222aec489a..345290e6a2f3 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1323,10 +1323,12 @@ Storybook no longer bundles Babel or recast to read and write story and config f
 - `parameters.docs.source.originalSource` is now the story's source text exactly as written, where Babel reprinted it with its own formatting. "Show code" and `docs.source.transform` functions receive the authored text, with line endings normalized to `\n`.
 - Parse errors use OXC's wording, and end with ` in <file>` when the file name is known. Duplicate declarations and legacy octal literals are still rejected.
 - A parse error in a module that `sb.mock()` automocks under webpack now fails that module's build, where Babel's error recovery used to mock whatever it could parse.
+- Story files read string-literal keys and ignore computed identifier keys. `export default { 'title': 'X' }` now gives story ids under `X`, where Babel used the automatic title, and `export default { [title]: 'X' }` no longer sets the title.
 
 #### Changes for tooling that imports Storybook's internal entry points
 
 - `storybook/internal/babel` is removed. Import Babel from your own `@babel/*` dependencies if you still need it.
+- `getBabelDependencies` is removed from `storybook/internal/cli`.
 - The nodes exposed by `storybook/internal/csf-tools` are ESTree (OXC) nodes instead of Babel nodes, for example `Literal` instead of `StringLiteral` and `Property` instead of `ObjectProperty`/`ObjectMethod`. `CsfFile._ast` and the `NodePath` fields are removed; use `CsfFile._program` and `CsfFile._editor`. `ConfigFile._ast` is removed as well; use `ConfigFile._program` and `ConfigFile._editor`. Both `_editor`s are a `SourceEditor`: call `_editor.commit()` to apply pending edits, after which the file parses the result again. The editing functions and `source()` throw for nodes of another parse, such as nodes from before a commit; offsets passed to `_editor.edits` are not checked.
 - `CsfObject#get` returns an ESTree expression, and `set`/`transform` accept expressions from `get()` or `parseExpression(code)`. Use `textOf(node)` to read an expression's source, and `placeableTextOf(node)` to build new code around it.
 - An `experimental_enrichCsf` function receives the new `CsfFile`. Add code with `csf._appendStatement(code)` instead of pushing Babel nodes onto `csf._ast`.
@@ -1337,7 +1339,7 @@ Storybook no longer bundles Babel or recast to read and write story and config f
 - The story-shape helpers no longer take Babel paths: `jsDocTagsForPath` is `jsDocTagsForNode`, `metaObjectPath` is `metaObject`, `RenderFunctionPath` is `RenderFunction`, and `pathForNode` and `returnedExpressionPath` are removed in favor of `returnedExpression` and plain nodes.
 - The `getAbsolutePath` wrapper helpers in `storybook/internal/common` produce source text instead of Babel nodes. `getAbsolutePathWrapperAsCallExpression(isTs, names)`, which returned the wrapper's function declaration, is replaced by `getAbsolutePathWrapperDeclaration(isTs, names)`, which returns the declaration's source for `ConfigFile#setBodyDeclaration`. `getAbsolutePathCall(config, value)` returns the source of a call to the config's wrapper. `wrapValueWithGetAbsolutePathWrapper(config, node)` is replaced by `wrapValuesWithGetAbsolutePathWrapper(config, nodes)`, which wraps every node in the array and commits the edits to `config`.
 - `new CsfFile(code, options)` and `new ConfigFile(code, fileName)` take source code instead of a Babel AST.
-- `formatCsf(csf, { sourceMaps, sourceFileName, inputSourceMap })` replaces the Babel generator options; `printCsf` and `printConfig` take no options, and all three print a file whose first line ends in CRLF with CRLF line endings, and any other file with `\n`.
+- `formatCsf(csf, { sourceMaps, sourceFileName, inputSourceMap })` replaces the Babel generator options; `printCsf` and `printConfig` take no options, and all three print a file whose first line ends in CRLF with CRLF line endings, and any other file with `\n`. A file that mixes line endings is printed with its first line's ending throughout, and a file with lone CR line endings with `\n`.
 - `ConfigFile#setBodyDeclaration(code)` takes the declaration's source text instead of a Babel node.
 - The Vitest config helpers `canUpdateVitestConfigFile`, `getTargetConfigObject`, `getEffectiveMergeConfigCall`, `getConfigObjectFromMergeArg` and `resolveExpression` moved from `storybook/internal/babel` to `storybook/internal/cli`. `canUpdateVitestConfigFile` still takes the file's source; the others take an ESTree `Program`, such as `parseModule(code, fileName).program`, instead of a Babel `File`, and return ESTree nodes. `isDefineConfigLike` and `isImportedDefineConfigLikeIdentifier` are no longer exported. `unwrapTSExpression` is now `unwrapExpression` in `storybook/internal/csf-tools`, and also unwraps non-null assertions (`value!`).
 

From 44844e4aad608f7d7ec7f1ce0176ad19b685d578 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Sun, 18 Oct 2026 03:02:49 +0200
Subject: [PATCH 169/326] refactor(csf-tools): one expression parser and one
 indent rule

`parseExpression` and `expressionFromSource` were one parser under two
public names; `parseExpression` is the documented one, so it now is the
parser and the other name is gone.

Generated code now takes its indent from the editor everywhere:
- the Vitest project wrapper is printed with `printMembers` and the
  template's indent instead of hard-coded spaces;
- `valueToSource` takes the editor's style instead of repeating its
  default for a test;
- an item added to an empty list that only holds comments lines up
  with the last comment when that starts a line, so a tab file stays
  tab-indented.

The Vitest transform output is never written to disk, so it keeps the
editor's `\n` line endings instead of reaching into `_originalCode` to
restore CRLF.

Removing the first items of a list left the space after them behind:
`[a, b]` became `[ b]` and `const a = 1,\n  b = 2;` became
`const\n  b = 2;`. With no item before the run to keep the space after,
what follows it now takes the space before its first item.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/addons/vitest/src/updateVitestFile.ts    |  9 +++----
 .../utils/save-story/valueToSource.test.ts    |  3 ++-
 .../utils/save-story/valueToSource.ts         | 10 +++----
 code/core/src/csf-tools/ConfigFile.test.ts    |  3 ++-
 code/core/src/csf-tools/ConfigFile.ts         |  2 +-
 code/core/src/csf-tools/ConfigObject.test.ts  |  3 +--
 code/core/src/csf-tools/CsfObject.test.ts     |  4 +--
 code/core/src/csf-tools/CsfObject.ts          | 12 +--------
 code/core/src/csf-tools/estree/ast.test.ts    | 16 +++--------
 code/core/src/csf-tools/estree/ast.ts         | 17 +++++++++---
 code/core/src/csf-tools/estree/editor.test.ts | 22 +++++++++++++--
 code/core/src/csf-tools/estree/editor.ts      | 27 ++++++++++++++-----
 code/core/src/csf-tools/index.ts              |  4 +--
 .../story-shape/resolve-arg-value.ts          |  4 +--
 .../story-shape/resolve-members.test.ts       |  4 +--
 .../csf-tools/story-shape/resolve-members.ts  |  6 ++---
 .../src/csf-tools/story-shape/utils.test.ts   | 17 +++++-------
 .../component-transformer.test.ts             |  4 +--
 .../vitest-plugin/transformer.test.ts         |  4 +--
 .../csf-tools/vitest-plugin/transformer.ts    | 11 +++-----
 .../src/docgen/story-docs-args.test.ts        | 25 +++++++----------
 .../src/docgen/story-docs-args.ts             |  4 +--
 .../src/docgen/shared/classify-value.test.ts  |  4 +--
 .../classify-args/classify-args.test.ts       |  8 ++----
 .../transform-template.test.ts                |  4 +--
 .../src/docgen/story-docs/arg-values.test.ts  |  4 +--
 26 files changed, 115 insertions(+), 116 deletions(-)

diff --git a/code/addons/vitest/src/updateVitestFile.ts b/code/addons/vitest/src/updateVitestFile.ts
index ff871f17e5d5..64642edbb0fc 100644
--- a/code/addons/vitest/src/updateVitestFile.ts
+++ b/code/addons/vitest/src/updateVitestFile.ts
@@ -19,6 +19,7 @@ import {
   reindent,
   objectList,
   prependToList,
+  printMembers,
   statementSpan,
   staticKey,
 } from 'storybook/internal/csf-tools';
@@ -75,8 +76,6 @@ const elementTexts = (editor: SourceEditor, array: E.ArrayExpression) =>
     itemText(editor, arrayList(editor, array), element)
   );
 
-const indent = (text: string, prefix: string) => prefix + reindent(text, '', prefix);
-
 // Nested objects are merged, arrays concatenated, other values overwritten.
 const mergeProperties = (
   { source, target }: Merge,
@@ -208,10 +207,8 @@ const wrapTestConfigAsProject = (
   const projectMembers = testObject.properties.filter(
     (member) => !hoisted.includes(member as E.ObjectProperty)
   );
-  const projectTest = memberTexts(target, testObject, projectMembers)
-    .map((text) => `\n${indent(text, '    ')},`)
-    .join('');
-  const project = `{\n  extends: true,\n  test: {${projectTest}${projectTest ? '\n  ' : ''}},\n}`;
+  const projectTest = printMembers(memberTexts(target, testObject, projectMembers), source.indent);
+  const project = printMembers(['extends: true', `test: ${projectTest}`], source.indent);
 
   prependToList(source, arrayList(source, templateProjects.value), [project]);
   if (hoisted.length > 0) {
diff --git a/code/core/src/core-server/utils/save-story/valueToSource.test.ts b/code/core/src/core-server/utils/save-story/valueToSource.test.ts
index 3bc3dba050b5..9925a8ae806b 100644
--- a/code/core/src/core-server/utils/save-story/valueToSource.test.ts
+++ b/code/core/src/core-server/utils/save-story/valueToSource.test.ts
@@ -1,9 +1,10 @@
 import { describe, expect, it } from 'vitest';
 
+import { SourceEditor } from '../../../csf-tools/estree/editor.ts';
 import { valueToSource } from './valueToSource.ts';
 
 describe('valueToSource', () => {
   it('prints a RegExp as a literal instead of walking it as an object', () => {
-    expect(valueToSource({ pattern: /x/g })).toBe('{\n  pattern: /x/g,\n}');
+    expect(valueToSource({ pattern: /x/g }, new SourceEditor(''))).toBe('{\n  pattern: /x/g,\n}');
   });
 });
diff --git a/code/core/src/core-server/utils/save-story/valueToSource.ts b/code/core/src/core-server/utils/save-story/valueToSource.ts
index 04a43b6468bc..bb114a6c974f 100644
--- a/code/core/src/core-server/utils/save-story/valueToSource.ts
+++ b/code/core/src/core-server/utils/save-story/valueToSource.ts
@@ -1,4 +1,4 @@
-import { printValue } from '../../../csf-tools/estree/editor.ts';
+import { type SourceEditor, printValue } from '../../../csf-tools/estree/editor.ts';
 
 /**
  * Stands in for a function arg, which the controls panel cannot send. It prints as `() => {}`
@@ -22,8 +22,6 @@ const withoutUndefined = (value: unknown): unknown => {
   return value;
 };
 
-/** Print an arg value as source, with objects expanded one member per line. */
-export const valueToSource = (
-  value: unknown,
-  { quote, indent }: { quote: string; indent: string } = { quote: '"', indent: '  ' }
-): string => printValue(withoutUndefined(value), quote, { indent });
+/** Print an arg value as source in the editor's style, objects one member per line. */
+export const valueToSource = (value: unknown, { quote, indent }: SourceEditor): string =>
+  printValue(withoutUndefined(value), quote, { indent });
diff --git a/code/core/src/csf-tools/ConfigFile.test.ts b/code/core/src/csf-tools/ConfigFile.test.ts
index f09ca32845ac..2821becad14b 100644
--- a/code/core/src/csf-tools/ConfigFile.test.ts
+++ b/code/core/src/csf-tools/ConfigFile.test.ts
@@ -3,7 +3,8 @@ import { describe, expect, it } from 'vitest';
 import { dedent } from 'ts-dedent';
 
 import { formatConfig, loadConfig, printConfig } from './ConfigFile.ts';
-import { type CsfExpression, parseExpression } from './CsfObject.ts';
+import type { CsfExpression } from './CsfObject.ts';
+import { parseExpression } from './estree/ast.ts';
 
 expect.addSnapshotSerializer({
   serialize: (val: any) => (typeof val === 'string' ? val : val.toString()),
diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index 1d1162732573..acaa800728b2 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -16,7 +16,6 @@ import {
   type CsfValue,
   createCsfObject,
   literalRoot,
-  parseExpression,
 } from './CsfObject.ts';
 import {
   type E,
@@ -24,6 +23,7 @@ import {
   isIdentifier,
   isStringLiteral,
   locationOf,
+  parseExpression,
   placeableTextOf,
   staticKey,
   unwrapExpression,
diff --git a/code/core/src/csf-tools/ConfigObject.test.ts b/code/core/src/csf-tools/ConfigObject.test.ts
index 84e6d1731b45..e38313dda8cf 100644
--- a/code/core/src/csf-tools/ConfigObject.test.ts
+++ b/code/core/src/csf-tools/ConfigObject.test.ts
@@ -1,8 +1,7 @@
 import { describe, expect, it } from 'vitest';
 
 import { loadConfig, printConfig } from './ConfigFile.ts';
-import { parseExpression } from './CsfObject.ts';
-import { type E, textOf } from './estree/ast.ts';
+import { type E, parseExpression, textOf } from './estree/ast.ts';
 
 const configurations = [
   `export default { parameters: { a11y: { element: '#root' } } };`,
diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index 0e2eae45acf9..2f1e2f35112f 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -2,8 +2,8 @@ import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import { loadCsf, printCsf } from './CsfFile.ts';
 import { loadConfig, printConfig } from './ConfigFile.ts';
-import { type CsfValue, parseExpression } from './CsfObject.ts';
-import { textOf } from './estree/ast.ts';
+import type { CsfValue } from './CsfObject.ts';
+import { parseExpression, textOf } from './estree/ast.ts';
 
 const parse = (source: string) =>
   loadCsf(source, { makeTitle: (title) => title ?? 'title' }).parse();
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index 1273f7325042..f48dcd001318 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -4,7 +4,7 @@ import {
   type Property,
   type SourceLocation,
   locationOf,
-  expressionFromSource,
+  parseExpression,
   placeableTextOf,
   staticKey,
   unwrapExpression,
@@ -80,16 +80,6 @@ export type CsfMutationResult =
  */
 export type CsfExpression = E.Expression;
 
-/**
- * Parse source into a detached expression for `set` and `transform`.
- *
- * @example
- * ```ts
- * object.transform(['tags'], (value) => parseExpression(`[...${placeableTextOf(value)}, 'autodocs']`));
- * ```
- */
-export const parseExpression = (code: string): CsfExpression => expressionFromSource(code);
-
 export interface CsfObject {
   /**
    * Identify the config, meta, story, annotation, or call argument this editor represents.
diff --git a/code/core/src/csf-tools/estree/ast.test.ts b/code/core/src/csf-tools/estree/ast.test.ts
index 50b2f3a02760..a7bf0d0f99ad 100644
--- a/code/core/src/csf-tools/estree/ast.test.ts
+++ b/code/core/src/csf-tools/estree/ast.test.ts
@@ -1,14 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import {
-  type E,
-  codeFrame,
-  expressionFromSource,
-  outerSpan,
-  parseModule,
-  textOf,
-  walk,
-} from './ast.ts';
+import { type E, codeFrame, parseExpression, outerSpan, parseModule, textOf, walk } from './ast.ts';
 
 describe('parseModule', () => {
   const flowBody = 'const x: { +readOnly: number } = {};';
@@ -94,13 +86,13 @@ describe('parseModule', () => {
   });
 });
 
-describe('expressionFromSource', () => {
+describe('parseExpression', () => {
   it.each(['a) + (b', 'a); (b', 'a)(b'])('rejects %s, which is no single expression', (code) => {
-    expect(() => expressionFromSource(code)).toThrow(`Expected an expression: ${code}`);
+    expect(() => parseExpression(code)).toThrow(`Expected an expression: ${code}`);
   });
 
   it('normalizes a CRLF fragment to LF', () => {
-    expect(textOf(expressionFromSource('{\r\n  a: 1,\r\n}'))).toBe('{\n  a: 1,\n}');
+    expect(textOf(parseExpression('{\r\n  a: 1,\r\n}'))).toBe('{\n  a: 1,\n}');
   });
 });
 
diff --git a/code/core/src/csf-tools/estree/ast.ts b/code/core/src/csf-tools/estree/ast.ts
index 0006851e9108..f1574d6cbbf1 100644
--- a/code/core/src/csf-tools/estree/ast.ts
+++ b/code/core/src/csf-tools/estree/ast.ts
@@ -334,7 +334,7 @@ export const sourceOf = (code: string, node: Span) => code.slice(node.start, nod
 // The parse each node came from, so a node can be printed without its module.
 const nodeModules = new WeakMap<object, ParsedModule>();
 
-/** The parse a node of `parsePrintable` or `expressionFromSource` came from. */
+/** The parse a node of `parsePrintable` or `parseExpression` came from. */
 export const moduleOf = (node: object): ParsedModule | undefined => nodeModules.get(node);
 
 /** Mark `value` as derived from the nodes of `module`, so `moduleOf` finds that parse for it. */
@@ -398,7 +398,7 @@ const normalize = (root: Node, module: ParsedModule | undefined) => {
   }
 };
 
-// The text of each expression `expressionFromSource` returns: as written, and as it is placed.
+// The text of each expression `parseExpression` returns: as written, and as it is placed.
 const fragments = new WeakMap<object, { text: string; placeable: string }>();
 
 const codeOf = (node: Node) => {
@@ -412,7 +412,7 @@ const codeOf = (node: Node) => {
 };
 
 /**
- * Source text of a node from `SourceEditor` or `expressionFromSource`, as written. Throws for any
+ * Source text of a node from `SourceEditor` or `parseExpression`, as written. Throws for any
  * other node, such as one from `parseModule`.
  */
 export const textOf = (node: Node): string =>
@@ -438,7 +438,16 @@ export const placeableTextOf = (node: Node): string => {
 /** Parse an expression fragment, which has no file name to pick its grammar. */
 export const parseFragment = (code: string): ParsedModule => parseModule(code);
 
-export const expressionFromSource = (source: string): E.Expression => {
+/**
+ * Parse source into a detached expression, such as for `CsfObject#set` and `transform`. `textOf`
+ * gives its source back.
+ *
+ * @example
+ * ```ts
+ * object.transform(['tags'], (value) => parseExpression(`[...${placeableTextOf(value)}, 'autodocs']`));
+ * ```
+ */
+export const parseExpression = (source: string): E.Expression => {
   const code = normalizeLineEndings(source);
   // The line break ends a trailing line comment before the closing parenthesis.
   const wrapped = `(${code}\n)`;
diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index a437111893c0..96db86d315d1 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -8,9 +8,8 @@ import { dedent } from 'ts-dedent';
 
 import { loadConfig, printConfig } from '../ConfigFile.ts';
 import { loadCsf, printCsf } from '../CsfFile.ts';
-import { parseExpression } from '../CsfObject.ts';
 import type { E } from './ast.ts';
-import { parseModule } from './ast.ts';
+import { parseExpression, parseModule } from './ast.ts';
 import {
   SourceEditor,
   appendStatement,
@@ -196,6 +195,13 @@ describe('lists', () => {
     expect(call.editor.toString()).toBe('config(/* none */ a);');
   });
 
+  it('lines up the first item of an empty multi-line list with its comments', () => {
+    const { editor, statement } = firstStatement('({\n\t// none yet\n});');
+    const object = expressionOf(statement) as E.ObjectExpression;
+    appendToList(editor, objectList(editor, object), ['a: 1']);
+    expect(editor.toString()).toBe('({\n\t// none yet\n\ta: 1,\n});');
+  });
+
   it('finds the arguments of an optional call with type arguments past comments', () => {
     const { editor, statement } = firstStatement('f?.<T>(/* ( */ a);');
     const chain = expressionOf(statement) as E.ChainExpression;
@@ -219,6 +225,18 @@ describe('lists', () => {
     removeFromList(editor, declaratorList(editor, declaration), [declaration.declarations[2]]);
     expect(editor.toString()).toBe('const b = 2;');
   });
+
+  it('gives what follows a removed first item the space before that item', () => {
+    const { editor, statement } = firstStatement('const a = 1,\n  b = 2;');
+    const declaration = statement as E.VariableDeclaration;
+    removeFromList(editor, declaratorList(editor, declaration), [declaration.declarations[0]]);
+    expect(editor.toString()).toBe('const b = 2;');
+
+    const elements = new SourceEditor(`export default { addons: [a, b] };`);
+    const array = defaultExportArray(elements);
+    removeFromList(elements, arrayList(elements, array), [array.elements[0]!]);
+    expect(elements.toString()).toBe(`export default { addons: [b] };`);
+  });
 });
 
 describe('parenthesized array elements', () => {
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index f183f9682596..2f36527cd3a7 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -673,9 +673,14 @@ export const appendToList = (editor: SourceEditor, list: List, texts: string[])
     const inner = code.slice(list.open, list.close);
     const end = list.open + inner.trimEnd().length;
     if ((inner.includes('\n') && end > list.open) || texts.some((text) => text.includes('\n'))) {
-      // Multi-line items, or comments on lines of their own: lay the items out one per line.
+      // Multi-line items, or comments on lines of their own: lay the items out one per line, lined
+      // up with the last comment when that starts a line.
       const outer = lineIndent(code, list.open - 1);
-      const indent = `${outer}${editor.indent}`;
+      const last = commentAt(editor, end, 'end');
+      const indent =
+        last && lineStart(code, last.start) > list.open
+          ? lineIndent(code, last.start)
+          : `${outer}${editor.indent}`;
       if (list.close > end) {
         edits.remove(end, list.close);
       }
@@ -770,11 +775,19 @@ export const removeFromList = (editor: SourceEditor, list: List, removedItems: r
     }
     const start = itemStart(editor, list, first);
     const end = itemEnd(editor, list, last);
-    // Code after the run on its line must not join the line of a line comment before it.
-    const joins =
-      commentAt(editor, start, 'end')?.type === 'Line' &&
-      code.slice(end, lineEnd(code, end)).trim();
-    edits.remove(joins ? lineEnd(code, start) + 1 : start, end);
+    if (first === 0) {
+      // No item before the run to keep the space after: what follows the run takes the space
+      // before its first item instead, so `[a, b]` becomes `[b]`.
+      const item = items[0].start;
+      edits.remove(start, item - /\s*$/.exec(code.slice(start, item))![0].length);
+      edits.remove(item, end + /^\s*/.exec(code.slice(end))![0].length);
+    } else {
+      // Code after the run on its line must not join the line of a line comment before it.
+      const joins =
+        commentAt(editor, start, 'end')?.type === 'Line' &&
+        code.slice(end, lineEnd(code, end)).trim();
+      edits.remove(joins ? lineEnd(code, start) + 1 : start, end);
+    }
     first = last;
   }
 };
diff --git a/code/core/src/csf-tools/index.ts b/code/core/src/csf-tools/index.ts
index 11f521b99811..a7b265481bf1 100644
--- a/code/core/src/csf-tools/index.ts
+++ b/code/core/src/csf-tools/index.ts
@@ -9,7 +9,6 @@ export type {
   CsfObjectTarget,
   CsfValue,
 } from './CsfObject.ts';
-export { parseExpression } from './CsfObject.ts';
 export * from './ConfigFile.ts';
 export * from './jsdoc.ts';
 export * from './enrichCsf.ts';
@@ -18,12 +17,12 @@ export { componentTransform } from './vitest-plugin/component-transformer.ts';
 export * from './story-shape/index.ts';
 export type { E as ESTree, Node as ESTreeNode } from './estree/ast.ts';
 export {
-  expressionFromSource,
   isStringLiteral,
   isTSWrapper,
   isValidIdentifier,
   normalizeLineEndings,
   outerSpan,
+  parseExpression,
   parseModule,
   placeableTextOf,
   restoreLineEndings,
@@ -48,6 +47,7 @@ export {
   objectList,
   prependStatement,
   prependToList,
+  printMembers,
   printString,
   printValue,
   reindent,
diff --git a/code/core/src/csf-tools/story-shape/resolve-arg-value.ts b/code/core/src/csf-tools/story-shape/resolve-arg-value.ts
index 416566b8db22..ba7e2af3951f 100644
--- a/code/core/src/csf-tools/story-shape/resolve-arg-value.ts
+++ b/code/core/src/csf-tools/story-shape/resolve-arg-value.ts
@@ -3,7 +3,7 @@
 import {
   type E,
   type Node,
-  expressionFromSource,
+  parseExpression,
   parseFragment,
   isValidIdentifier,
   placeableTextOf,
@@ -131,7 +131,7 @@ const inlineSpreads = (node: Node, ctx: ReferenceContext, unresolved: string[]):
 };
 
 // A node built from rewritten source; its parts print as written there.
-const rebuilt = (code: string): Node => unwrapExpression(expressionFromSource(code));
+const rebuilt = (code: string): Node => unwrapExpression(parseExpression(code));
 
 /**
  * Whether a value spreads something it names rather than something written out on the spot.
diff --git a/code/core/src/csf-tools/story-shape/resolve-members.test.ts b/code/core/src/csf-tools/story-shape/resolve-members.test.ts
index b2678374f1ad..1d55ee321eaf 100644
--- a/code/core/src/csf-tools/story-shape/resolve-members.test.ts
+++ b/code/core/src/csf-tools/story-shape/resolve-members.test.ts
@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest';
 
 import { dedent } from 'ts-dedent';
 
-import { expressionFromSource, isStringLiteral } from '../estree/ast.ts';
+import { parseExpression, isStringLiteral } from '../estree/ast.ts';
 import { SourceEditor } from '../estree/editor.ts';
 import { isSelfContained } from './resolve-arg-value.ts';
 import {
@@ -668,7 +668,7 @@ describe('externalize', () => {
 
 describe('resolveReferencedValue', () => {
   const valueOf = (ctx: ReferenceContext, expression: string) => {
-    const node = expressionFromSource(expression);
+    const node = parseExpression(expression);
     const resolved = resolveReferencedValue(ctx, node);
     return resolved && { value: oneLineTextOf(resolved.node), filePath: resolved.ctx.filePath };
   };
diff --git a/code/core/src/csf-tools/story-shape/resolve-members.ts b/code/core/src/csf-tools/story-shape/resolve-members.ts
index 2fafec2f570b..e42ea1189fbf 100644
--- a/code/core/src/csf-tools/story-shape/resolve-members.ts
+++ b/code/core/src/csf-tools/story-shape/resolve-members.ts
@@ -3,7 +3,7 @@
 import {
   type E,
   type Node,
-  expressionFromSource,
+  parseExpression,
   isStringLiteral,
   placeableTextOf,
   staticKey,
@@ -655,9 +655,7 @@ const mergedAnnotations = (
 
 // The spreads point at the original nodes, so each still resolves in the scope it was written in.
 const spreadPair = (from: Node, over: Node): E.ObjectExpression => {
-  const merged = expressionFromSource(
-    `{ ...${placeableTextOf(from)}, ...${placeableTextOf(over)} }`
-  );
+  const merged = parseExpression(`{ ...${placeableTextOf(from)}, ...${placeableTextOf(over)} }`);
   const object = unwrapExpression(merged) as E.ObjectExpression;
   (object.properties[0] as E.SpreadElement).argument = from as E.Expression;
   (object.properties[1] as E.SpreadElement).argument = over as E.Expression;
diff --git a/code/core/src/csf-tools/story-shape/utils.test.ts b/code/core/src/csf-tools/story-shape/utils.test.ts
index 7a4438c1d490..99c7fabdf7fc 100644
--- a/code/core/src/csf-tools/story-shape/utils.test.ts
+++ b/code/core/src/csf-tools/story-shape/utils.test.ts
@@ -6,7 +6,7 @@ import { loadCsf } from '../CsfFile.ts';
 import {
   type E,
   type Node,
-  expressionFromSource,
+  parseExpression,
   staticKey,
   textOf,
   unwrapExpression,
@@ -47,10 +47,7 @@ describe('isCanonicalCsf2BindCall', () => {
         "Template['bind']({})",
         'Template[bind]({})',
         'makeStory({})',
-      ].map((initializer) => [
-        initializer,
-        isCanonicalCsf2BindCall(expressionFromSource(initializer)),
-      ])
+      ].map((initializer) => [initializer, isCanonicalCsf2BindCall(parseExpression(initializer))])
     ).toEqual([
       ['Template.bind()', true],
       ['Template.bind({})', true],
@@ -78,7 +75,7 @@ describe('isCsfFactoryCall', () => {
         "schema.type('string').story({})",
         'makeStory({})',
         'Template.bind({})',
-      ].map((initializer) => [initializer, isCsfFactoryCall(expressionFromSource(initializer))])
+      ].map((initializer) => [initializer, isCsfFactoryCall(parseExpression(initializer))])
     ).toEqual([
       ['meta.story({})', true],
       ['meta.type<{ args: { icon: string } }>().story({})', true],
@@ -96,7 +93,7 @@ describe('isCsfFactoryCall', () => {
   });
 
   it('reads the receiver through meta.type<>()', () => {
-    const call = expressionFromSource('meta.type<A>().type<B>().story({})');
+    const call = parseExpression('meta.type<A>().type<B>().story({})');
 
     expect(isCsfFactoryCall(call) && csfFactoryReceiver(call).name).toBe('meta');
   });
@@ -145,12 +142,12 @@ describe('unwrapExpression', () => {
     '<Story>{}',
     '(({} as Story)!) satisfies Story',
   ])('unwraps %s', (code) => {
-    const wrapped = expressionFromSource(code);
+    const wrapped = parseExpression(code);
     expect(unwrapExpression(wrapped).type).toBe('ObjectExpression');
   });
 
   it('returns other nodes untouched', () => {
-    const value = expressionFromSource("'Save'");
+    const value = parseExpression("'Save'");
 
     expect(unwrapExpression(value)).toBe(value);
   });
@@ -208,7 +205,7 @@ describe('returnedExpression', () => {
   });
 
   it('resolves an object method body, which `setup()` uses', () => {
-    const object = expressionFromSource(`{ setup() { return 'Save'; } }`) as E.ObjectExpression;
+    const object = parseExpression(`{ setup() { return 'Save'; } }`) as E.ObjectExpression;
 
     expect(printed(returnedExpression(object.properties[0])!)).toBe(`'Save'`);
   });
diff --git a/code/core/src/csf-tools/vitest-plugin/component-transformer.test.ts b/code/core/src/csf-tools/vitest-plugin/component-transformer.test.ts
index b8b116f314fd..1e19780a2e9e 100644
--- a/code/core/src/csf-tools/vitest-plugin/component-transformer.test.ts
+++ b/code/core/src/csf-tools/vitest-plugin/component-transformer.test.ts
@@ -355,13 +355,13 @@ describe('component transformer', () => {
     `);
   });
 
-  it('writes a CRLF component file and its generated tests with CRLF line endings', async () => {
+  it('transforms a CRLF component file into code with LF line endings', async () => {
     const code = `export const Badge = () => <div />;\r\nexport default () => <span />;`;
 
     const result = await transform({ code });
 
     expect(result.code).toContain('_test("Badge"');
-    expect(result.code.replaceAll('\r\n', '')).not.toMatch(/[\r\n]/);
+    expect(result.code).not.toContain('\r');
   });
 
   it('correctly handles aliased function and class exports', async () => {
diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
index 7175f8c652d2..a9d743a53887 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
@@ -49,13 +49,13 @@ const transform = async ({
 };
 
 describe('transformer', () => {
-  it('writes a CRLF story file and its generated tests with CRLF line endings', async () => {
+  it('transforms a CRLF story file into code with LF line endings', async () => {
     const code = `export default { title: 'Button' };\r\nexport const Primary = {};`;
 
     const result = await transform({ code });
 
     expect(result.code).toContain('_test("Primary"');
-    expect(result.code.replaceAll('\r\n', '')).not.toMatch(/[\r\n]/);
+    expect(result.code).not.toContain('\r');
   });
 
   describe('CSF v1/v2/v3', () => {
diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.ts b/code/core/src/csf-tools/vitest-plugin/transformer.ts
index bd565909264a..bf5eae972dc2 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.ts
@@ -8,7 +8,7 @@ import { decode, encode } from '@jridgewell/sourcemap-codec';
 import { dedent } from 'ts-dedent';
 
 import { type CsfSourceMap, type StoryTest, loadCsf } from '../CsfFile.ts';
-import { type Node, locationOf, restoreLineEndings, staticKey } from '../estree/ast.ts';
+import { type Node, locationOf, staticKey } from '../estree/ast.ts';
 import { type SourceEditor, appendMembers, prependStatement } from '../estree/editor.ts';
 import { generateUid } from '../estree/scope.ts';
 
@@ -69,9 +69,9 @@ export class GeneratedTail {
   }
 }
 
-// Generated lines map to their target node, so Vitest reports each test at its story.
+// Generated lines map to their target node, so Vitest reports each test at its story. The output
+// is never written to disk, so it keeps the editor's `\n` line endings.
 export const printWithTail = (editor: SourceEditor, tail: GeneratedTail, fileName: string) => {
-  // The tail is joined with `\n`, so line endings are restored once over the whole output.
   const head = editor.edits.toString();
   const map = editor.generateMap({ source: fileName });
   const decoded = decode(map.mappings);
@@ -93,10 +93,7 @@ export const printWithTail = (editor: SourceEditor, tail: GeneratedTail, fileNam
   });
   map.mappings = encode(decoded);
   return {
-    code: restoreLineEndings(
-      `${head}${separator}${tail.lines.map(({ text }) => text).join('\n')}\n`,
-      editor._originalCode
-    ),
+    code: `${head}${separator}${tail.lines.map(({ text }) => text).join('\n')}\n`,
     map: map as CsfSourceMap,
   };
 };
diff --git a/code/frameworks/angular-vite/src/docgen/story-docs-args.test.ts b/code/frameworks/angular-vite/src/docgen/story-docs-args.test.ts
index 00bc5bedc3ac..fdac68129205 100644
--- a/code/frameworks/angular-vite/src/docgen/story-docs-args.test.ts
+++ b/code/frameworks/angular-vite/src/docgen/story-docs-args.test.ts
@@ -1,39 +1,34 @@
 import { describe, expect, it } from 'vitest';
 
-import { expressionFromSource } from 'storybook/internal/csf-tools';
+import { parseExpression } from 'storybook/internal/csf-tools';
 
 import { argFieldValue, evaluateArgExpression } from './story-docs-args.ts';
 
 describe('evaluateArgExpression', () => {
   it('strips comments from an unevaluable arg, which Angular templates cannot parse', () => {
-    expect(evaluateArgExpression(expressionFromSource(`helper(/* note */ 'x')`), [])).toBe(
+    expect(evaluateArgExpression(parseExpression(`helper(/* note */ 'x')`), [])).toBe(
       `helper('x')`
     );
     expect(
-      evaluateArgExpression(
-        expressionFromSource(`helper(\n      'x', // trailing\n      2,\n    )`),
-        []
-      )
+      evaluateArgExpression(parseExpression(`helper(\n      'x', // trailing\n      2,\n    )`), [])
     ).toBe(`helper(\n  'x',\n  2,\n)`);
   });
 
   it('keeps trailing whitespace inside a template literal', () => {
-    expect(evaluateArgExpression(expressionFromSource('helper(`a  \nb`)'), [])).toBe(
-      'helper(`a  \nb`)'
-    );
+    expect(evaluateArgExpression(parseExpression('helper(`a  \nb`)'), [])).toBe('helper(`a  \nb`)');
   });
 
   it('drops the whitespace before a trailing comment in a CRLF file', () => {
     expect(
       evaluateArgExpression(
-        expressionFromSource(`helper(\r\n      'x', // trailing\r\n      2,\r\n    )`),
+        parseExpression(`helper(\r\n      'x', // trailing\r\n      2,\r\n    )`),
         []
       )
     ).toBe(`helper(\n  'x',\n  2,\n)`);
   });
 
   it('keeps the tokens around a removed comment apart', () => {
-    expect(evaluateArgExpression(expressionFromSource('a/* c */instanceof B'), [])).toBe(
+    expect(evaluateArgExpression(parseExpression('a/* c */instanceof B'), [])).toBe(
       'a instanceof B'
     );
   });
@@ -41,17 +36,15 @@ describe('evaluateArgExpression', () => {
 
 describe('argFieldValue', () => {
   it('keeps comments and dedents continuation lines, but not template literal values', () => {
-    expect(argFieldValue(expressionFromSource(`(value) => /* why */ value.trim()`))).toBe(
+    expect(argFieldValue(parseExpression(`(value) => /* why */ value.trim()`))).toBe(
       `(value) => /* why */ value.trim()`
     );
-    expect(argFieldValue(expressionFromSource('helper({\n      code: `a\n  b`,\n    })'))).toBe(
+    expect(argFieldValue(parseExpression('helper({\n      code: `a\n  b`,\n    })'))).toBe(
       'helper({\n  code: `a\n  b`,\n})'
     );
     expect(
       argFieldValue(
-        expressionFromSource(
-          'helper({\n\t\tcode: `a\n\tb`,\n\t\tfn() {\n\t\t\treturn 1;\n\t\t},\n\t})'
-        )
+        parseExpression('helper({\n\t\tcode: `a\n\tb`,\n\t\tfn() {\n\t\t\treturn 1;\n\t\t},\n\t})')
       )
     ).toBe('helper({\n  code: `a\n\tb`,\n  fn() {\n    return 1;\n  },\n})');
   });
diff --git a/code/frameworks/angular-vite/src/docgen/story-docs-args.ts b/code/frameworks/angular-vite/src/docgen/story-docs-args.ts
index e3e9484b2613..c9bfeea99eb3 100644
--- a/code/frameworks/angular-vite/src/docgen/story-docs-args.ts
+++ b/code/frameworks/angular-vite/src/docgen/story-docs-args.ts
@@ -3,7 +3,7 @@
 import {
   type ESTreeNode as Node,
   textOf,
-  expressionFromSource,
+  parseExpression,
   staticKey,
   parseModule,
   reindent,
@@ -27,7 +27,7 @@ export const createArgExternalizer =
     const value = evaluateNode(node, enums);
     return value === EVAL_FAILED
       ? undefined
-      : expressionFromSource(printExpressionValue(value, new Set()));
+      : parseExpression(printExpressionValue(value, new Set()));
   };
 
 /**
diff --git a/code/renderers/vue3/src/docgen/shared/classify-value.test.ts b/code/renderers/vue3/src/docgen/shared/classify-value.test.ts
index e35098287be6..cb3b90bd5c63 100644
--- a/code/renderers/vue3/src/docgen/shared/classify-value.test.ts
+++ b/code/renderers/vue3/src/docgen/shared/classify-value.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { expressionFromSource } from 'storybook/internal/csf-tools';
+import { parseExpression } from 'storybook/internal/csf-tools';
 
 import {
   classifyValue,
@@ -95,4 +95,4 @@ describe('printValue', () => {
   });
 });
 
-const expression = expressionFromSource;
+const expression = parseExpression;
diff --git a/code/renderers/vue3/src/docgen/story-docs/classify-args/classify-args.test.ts b/code/renderers/vue3/src/docgen/story-docs/classify-args/classify-args.test.ts
index 5f914e3e3856..ad576f2a2359 100644
--- a/code/renderers/vue3/src/docgen/story-docs/classify-args/classify-args.test.ts
+++ b/code/renderers/vue3/src/docgen/story-docs/classify-args/classify-args.test.ts
@@ -1,10 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import {
-  type ESTreeNode as Node,
-  expressionFromSource,
-  staticKey,
-} from 'storybook/internal/csf-tools';
+import { type ESTreeNode as Node, parseExpression, staticKey } from 'storybook/internal/csf-tools';
 
 import { classifyArgs, type ClassifiedArg } from './classify-args.ts';
 import { printValue } from '../../shared/classify-value.ts';
@@ -196,7 +192,7 @@ function classify(
 }
 
 function parseArgs(code: string): Record<string, Node> {
-  const expression = expressionFromSource(code);
+  const expression = parseExpression(code);
   if (expression.type !== 'ObjectExpression') {
     throw new Error(`Not an args object: ${code}`);
   }
diff --git a/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.test.ts b/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.test.ts
index dc28f2dcfa52..af983b747711 100644
--- a/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.test.ts
+++ b/code/renderers/vue3/src/docgen/story-docs/transform-template/transform-template.test.ts
@@ -4,7 +4,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { vol } from 'memfs';
 
-import { type ESTreeNode as Node, expressionFromSource } from 'storybook/internal/csf-tools';
+import { type ESTreeNode as Node, parseExpression } from 'storybook/internal/csf-tools';
 import type { IndexEntry } from 'storybook/internal/types';
 import type { DocgenPayload } from 'storybook/open-service';
 
@@ -1926,5 +1926,5 @@ function event(name: string, eventName: string, code: string): ClassifiedArg {
 }
 
 function expression(code: string): Node {
-  return expressionFromSource(code);
+  return parseExpression(code);
 }
diff --git a/code/renderers/web-components/src/docgen/story-docs/arg-values.test.ts b/code/renderers/web-components/src/docgen/story-docs/arg-values.test.ts
index 8c921ae80674..2feb2347b601 100644
--- a/code/renderers/web-components/src/docgen/story-docs/arg-values.test.ts
+++ b/code/renderers/web-components/src/docgen/story-docs/arg-values.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { expressionFromSource } from 'storybook/internal/csf-tools';
+import { parseExpression } from 'storybook/internal/csf-tools';
 
 import { evaluateArgValue, type ArgValue } from './arg-values.ts';
 
@@ -27,6 +27,6 @@ describe('evaluateArgValue', () => {
     { source: `{ ...name }`, expected: { kind: 'unresolved', source: '{ ...name }' } },
     { source: '`hello ${name}`', expected: { kind: 'unresolved', source: '`hello ${name}`' } },
   ])('$source', ({ source, expected }) => {
-    expect(evaluateArgValue(expressionFromSource(source))).toEqual(expected);
+    expect(evaluateArgValue(parseExpression(source))).toEqual(expected);
   });
 });

From 8d5669793b3d9ef969014c7456c7ba9426587dda Mon Sep 17 00:00:00 2001
From: Samran Asif <samranwebdev2000@gmail.com>
Date: Sat, 17 Oct 2026 22:08:50 -0700
Subject: [PATCH 170/326] fix(docs): preserve hook count and avoid early
 fallback on dynamic Source blocks

Signed-off-by: Samran Asif <samranwebdev2000@gmail.com>
---
 code/addons/docs/src/blocks/blocks/Source.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/code/addons/docs/src/blocks/blocks/Source.tsx b/code/addons/docs/src/blocks/blocks/Source.tsx
index 3171c8b73323..3fe890bc66c8 100644
--- a/code/addons/docs/src/blocks/blocks/Source.tsx
+++ b/code/addons/docs/src/blocks/blocks/Source.tsx
@@ -93,9 +93,7 @@ const useCode = ({
   const sourceKind: 'service' | 'emitted' | 'original' = useSnippet
     ? serviceSnippet
       ? 'service'
-      : snippet
-        ? 'emitted'
-        : 'original'
+      : 'emitted'
     : 'original';
 
   const code =
@@ -107,10 +105,14 @@ const useCode = ({
 
   // The emitted snippet is already transformed by emitTransformCode,
   // so only transformFromProps applies to it.
-  const transformer =
-    transformFromProps ?? (sourceKind === 'emitted' ? undefined : sourceParameters.transform);
-
-  const transformedCode = transformer ? useTransformCode(code, transformer, storyContext) : code;
+  const hasTransformer = Boolean(transformFromProps ?? sourceParameters.transform);
+  const activeTransformer =
+    transformFromProps ??
+    (sourceKind === 'emitted' ? (rawCode: string) => rawCode : sourceParameters.transform);
+
+  const transformedCode = hasTransformer
+    ? useTransformCode(code, activeTransformer!, storyContext)
+    : code;
 
   if (sourceParameters.code !== undefined) {
     return sourceParameters.code;

From 28267101f2d3a65da777843070e366706c1ed884 Mon Sep 17 00:00:00 2001
From: Mohamed Saad <mohamed.tarif999@gmail.com>
Date: Sun, 18 Oct 2026 21:20:11 +0300
Subject: [PATCH 171/326] fix(angular-cm): keep compiled base IO and read
 signals from declared types

---
 code/lib/angular-cm/README.md                 |   2 +-
 .../angular-cm/src/analyzer/analyze-file.ts   |  26 +--
 .../analyzer/component-declaration.test.ts    |  17 +-
 .../src/analyzer/component-declaration.ts     |  16 +-
 .../angular-cm/src/analyzer/inheritance.ts    |   9 +-
 .../angular-cm/src/analyzer/members.test.ts   |  40 +++++
 code/lib/angular-cm/src/analyzer/members.ts   | 170 ++++++++----------
 code/lib/angular-cm/src/analyzer/signals.ts   |  46 ++++-
 8 files changed, 201 insertions(+), 125 deletions(-)

diff --git a/code/lib/angular-cm/README.md b/code/lib/angular-cm/README.md
index f4a351883fcb..97cdc34dbc04 100644
--- a/code/lib/angular-cm/README.md
+++ b/code/lib/angular-cm/README.md
@@ -16,7 +16,7 @@ That copy stays frozen on the legacy behaviour its committed baselines pin; this
 These are inherited from the Compodoc behaviour this replaces, and are not fixed yet:
 
 - **Numeric enums produce no control.** `enum Size { Small, Medium }` and `enum Size { Small = 1, Medium }` both surface as `empty-enum` rather than a select, because auto-incremented members carry no initializer to read. String enums and union type aliases resolve correctly. The type checker could answer this via `getConstantValue`, so this is fixable here in a way it was not in Compodoc.
-- **Compiled libraries are only partly read.** A `.d.ts` keeps no decorators, so a component there is read from the `ɵɵComponentDeclaration` type Angular compiles into its `static ɵcmp`: selector, standalone, and the input and output maps. Other `.d.ts` classes are dropped, and so is a directive, whose `ɵɵDirectiveDeclaration` is not read. A base class from a `.d.ts` contributes its plain properties and methods but not its IO.
+- **Compiled libraries are only partly read.** A `.d.ts` keeps no decorators, so a component there is read from the `ɵɵComponentDeclaration` type Angular compiles into its `static ɵcmp`: selector, standalone, and the input and output maps. Other `.d.ts` classes are dropped, and so is a directive, whose `ɵɵDirectiveDeclaration` is not read. A compiled component base contributes its inputs and outputs. A compiled directive base or a plain `.d.ts` base contributes its properties and methods, plus any member typed as a signal input, model or output.
 - **Package imports resolve to compiled JavaScript.** Docgen follows a package's runtime entry rather than its `types`, so a component imported straight from a package is not read from its `.d.ts`; one reached through a local re-export is.
 - **`hostDirectives` bindings are absent.** Inputs and outputs a component exposes through directive composition are not class members, so they never reach the props table.
 
diff --git a/code/lib/angular-cm/src/analyzer/analyze-file.ts b/code/lib/angular-cm/src/analyzer/analyze-file.ts
index 5dac7dda736d..f957df2b0c65 100644
--- a/code/lib/angular-cm/src/analyzer/analyze-file.ts
+++ b/code/lib/angular-cm/src/analyzer/analyze-file.ts
@@ -54,28 +54,26 @@ export function analyzeSourceFile(
       logger.debug(`[angular-cm] ${statement.name.text} left out of docgen: an @NgModule`);
       continue;
     }
-    const declared = kind === 'class' ? readComponentDeclaration(ctx, statement) : undefined;
-    if (!declared && sourceFile.isDeclarationFile) {
+    if (kind === 'class' && sourceFile.isDeclarationFile) {
       logger.debug(
         `[angular-cm] ${statement.name.text} left out of docgen: a declaration-file class with no compiled ɵcmp`
       );
       continue;
     }
-    const recordKind = declared ? 'component' : kind;
     const name = statement.name.text;
     const file = sourceFile.fileName;
-    const members = collectClassMembers(ctx, statement, recordKind);
+    const members = collectClassMembers(ctx, statement, kind);
     const common = {
       file,
       ...getJsDocDescription(ts, statement),
       ...getJsDocTagsField(ts, statement),
     };
 
-    if (recordKind === 'component' || recordKind === 'directive') {
-      const { selector, standalone } = declared ?? decoratorMetadata(ctx, statement, recordKind);
+    if (kind === 'component' || kind === 'directive') {
+      const { selector, standalone } = componentMetadata(ctx, statement, kind);
       const record: Directive & typeof common & { selector?: string; standalone?: boolean } = {
         name,
-        type: recordKind,
+        type: kind,
         ...(selector === undefined ? {} : { selector }),
         ...(standalone === undefined ? {} : { standalone }),
         inputsClass: members.inputs,
@@ -84,8 +82,8 @@ export function analyzeSourceFile(
         methodsClass: members.methods,
         ...common,
       };
-      (recordKind === 'component' ? meta.components : meta.directives).push(record);
-    } else if (recordKind === 'pipe') {
+      (kind === 'component' ? meta.components : meta.directives).push(record);
+    } else if (kind === 'pipe') {
       const record: Pipe & typeof common = {
         name,
         ngname: pipeName(ctx, statement) ?? name,
@@ -95,7 +93,7 @@ export function analyzeSourceFile(
         ...common,
       };
       meta.pipes.push(record);
-    } else if (recordKind === 'injectable') {
+    } else if (kind === 'injectable') {
       const record: Injectable & typeof common = {
         name,
         type: 'injectable',
@@ -141,14 +139,18 @@ const classify = (ctx: AnalyzerContext, node: tsModule.ClassDeclaration): ClassK
       return kind;
     }
   }
-  return 'class';
+  return readComponentDeclaration(ctx, node) ? 'component' : 'class';
 };
 
-const decoratorMetadata = (
+const componentMetadata = (
   ctx: AnalyzerContext,
   node: tsModule.ClassDeclaration,
   kind: 'component' | 'directive'
 ): ComponentMetadata => {
+  const declared = readComponentDeclaration(ctx, node);
+  if (declared) {
+    return declared;
+  }
   const metadata = decoratorObjectArg(ctx, node, kind === 'component' ? 'Component' : 'Directive');
   return {
     selector: metadata && decoratorSelector(ctx, metadata),
diff --git a/code/lib/angular-cm/src/analyzer/component-declaration.test.ts b/code/lib/angular-cm/src/analyzer/component-declaration.test.ts
index 54b5008954e6..7fdf547d54ec 100644
--- a/code/lib/angular-cm/src/analyzer/component-declaration.test.ts
+++ b/code/lib/angular-cm/src/analyzer/component-declaration.test.ts
@@ -163,14 +163,17 @@ const IO_SOURCE = `
     @Input('publicName') aliased = '';
     @Input({ required: true }) needed!: number;
     @Input({ transform: booleanAttribute }) flag = false;
+    @Input({ transform: (value: string | number) => Number(value) }) amount = 0;
     viaMeta = '';
     metaOut = new EventEmitter<void>();
     size = input<'sm' | 'md'>('sm');
     count = input.required<number>({ alias: 'total' });
     checked = model(false);
+    open = model(false, { alias: 'expanded' });
     @Output() clicked = new EventEmitter<string>();
     @Output('renamed') internal = new EventEmitter<void>();
     toggled = output<boolean>();
+    closed = output<void>({ alias: 'dismissed' });
   }
 `;
 
@@ -183,17 +186,21 @@ const IO_DECLARATION = `
       aliased: string;
       needed: number;
       flag: boolean;
+      amount: number;
       viaMeta: string;
       metaOut: EventEmitter<void>;
       size: import("@angular/core").InputSignal<"sm" | "md">;
       count: import("@angular/core").InputSignal<number>;
       checked: import("@angular/core").ModelSignal<boolean>;
+      open: import("@angular/core").ModelSignal<boolean>;
       clicked: EventEmitter<string>;
       internal: EventEmitter<void>;
       toggled: import("@angular/core").OutputEmitterRef<boolean>;
+      closed: import("@angular/core").OutputEmitterRef<void>;
       static ɵfac: i0.ɵɵFactoryDeclaration<IoComponent, never>;
-      static ɵcmp: i0.ɵɵComponentDeclaration<IoComponent, "my-io", never, { "viaMeta": { "alias": "metaAlias"; "required": false; }; "plain": { "alias": "plain"; "required": false; }; "aliased": { "alias": "publicName"; "required": false; }; "needed": { "alias": "needed"; "required": true; }; "flag": { "alias": "flag"; "required": false; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "count": { "alias": "total"; "required": true; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "metaOut": "metaOut"; "checked": "checkedChange"; "clicked": "clicked"; "internal": "renamed"; "toggled": "toggled"; }, never, never, true, never>;
+      static ɵcmp: i0.ɵɵComponentDeclaration<IoComponent, "my-io", never, { "viaMeta": { "alias": "metaAlias"; "required": false; }; "plain": { "alias": "plain"; "required": false; }; "aliased": { "alias": "publicName"; "required": false; }; "needed": { "alias": "needed"; "required": true; }; "flag": { "alias": "flag"; "required": false; }; "amount": { "alias": "amount"; "required": false; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "count": { "alias": "total"; "required": true; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "open": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "metaOut": "metaOut"; "checked": "checkedChange"; "open": "expandedChange"; "clicked": "clicked"; "internal": "renamed"; "toggled": "toggled"; "closed": "dismissed"; }, never, never, true, never>;
       static ngAcceptInputType_flag: unknown;
+      static ngAcceptInputType_amount: string | number;
   }
 `;
 
@@ -212,7 +219,9 @@ describe('inputs and outputs read from the compiled maps', () => {
   it('reports every input as analyzing the source would', () => {
     expect(fromDeclaration.inputsClass.map(binding)).toEqual(fromSource.inputsClass.map(binding));
     expect(names(fromDeclaration.inputsClass)).toEqual([
+      'amount',
       'checked',
+      'expanded',
       'flag',
       'metaAlias',
       'needed',
@@ -223,11 +232,17 @@ describe('inputs and outputs read from the compiled maps', () => {
     ]);
   });
 
+  it('types a transform input by what it accepts, from its generated `ngAcceptInputType_` static', () => {
+    expect(byName(fromDeclaration.inputsClass, 'amount').type).toBe('string | number');
+  });
+
   it('reports every output under its public name, a model() under its input name', () => {
     expect(names(fromDeclaration.outputsClass)).toEqual(names(fromSource.outputsClass));
     expect(names(fromDeclaration.outputsClass)).toEqual([
       'checked',
       'clicked',
+      'dismissed',
+      'expanded',
       'metaOut',
       'renamed',
       'toggled',
diff --git a/code/lib/angular-cm/src/analyzer/component-declaration.ts b/code/lib/angular-cm/src/analyzer/component-declaration.ts
index 7833c4aed541..39bca9443e7e 100644
--- a/code/lib/angular-cm/src/analyzer/component-declaration.ts
+++ b/code/lib/angular-cm/src/analyzer/component-declaration.ts
@@ -8,12 +8,8 @@ export interface ComponentMetadata {
   standalone: boolean | undefined;
 }
 
-export interface DeclaredIOEntry extends MetadataIOEntry {
-  signal?: boolean;
-}
-
 export interface ComponentDeclaration extends ComponentMetadata {
-  inputsOutputs: DeclaredIOEntry[];
+  inputsOutputs: MetadataIOEntry[];
 }
 
 // Angular 12-13 emit seven type arguments; Angular 14 introduced standalone as the eighth.
@@ -102,17 +98,17 @@ const booleanArgument = ({ ts }: AnalyzerContext, argument: ts.TypeNode): boolea
 };
 
 // Keyed by class field. An entry is the public name, or since Angular 16 an object type such as
-// `{ alias: 'label'; required: false; isSignal?: true }`.
+// `{ alias: 'label'; required: false }`.
 const ioMapEntries = (
   ctx: AnalyzerContext,
   map: ts.TypeNode,
   bucket: MetadataIOEntry['bucket']
-): DeclaredIOEntry[] => {
+): MetadataIOEntry[] => {
   const { ts } = ctx;
   if (!ts.isTypeLiteralNode(map)) {
     return [];
   }
-  const entries: DeclaredIOEntry[] = [];
+  const entries: MetadataIOEntry[] = [];
   for (const member of map.members) {
     const name = member.name && propertyNameText(ctx, member.name);
     const value = ts.isPropertySignature(member) ? member.type : undefined;
@@ -125,15 +121,11 @@ const ioMapEntries = (
     const required = ts.isTypeLiteralNode(value)
       ? booleanLiteral(ctx, objectTypeMember(ctx, value, 'required'))
       : undefined;
-    const signal = ts.isTypeLiteralNode(value)
-      ? booleanLiteral(ctx, objectTypeMember(ctx, value, 'isSignal'))
-      : undefined;
     entries.push({
       bucket,
       name,
       ...(alias === undefined || alias === name ? {} : { alias }),
       ...(required === undefined ? {} : { required }),
-      ...(signal ? { signal } : {}),
     });
   }
   return entries;
diff --git a/code/lib/angular-cm/src/analyzer/inheritance.ts b/code/lib/angular-cm/src/analyzer/inheritance.ts
index 85f83ad9e39b..f654a80c6e35 100644
--- a/code/lib/angular-cm/src/analyzer/inheritance.ts
+++ b/code/lib/angular-cm/src/analyzer/inheritance.ts
@@ -81,12 +81,9 @@ function walkBases(
       inheritedSubstitutions,
       baseType
     );
-    // A declaration file records no decorators or signal calls, so a base from one has nothing to
-    // contribute to the IO buckets.
-    if (!declaration.getSourceFile().isDeclarationFile) {
-      mergeBucket(ctx, members, baseMembers, 'inputs');
-      mergeBucket(ctx, members, baseMembers, 'outputs');
-    }
+    // A base from a declaration file has IO only where its compiled `ɵcmp` or a signal type says so.
+    mergeBucket(ctx, members, baseMembers, 'inputs');
+    mergeBucket(ctx, members, baseMembers, 'outputs');
     mergeInto(members.properties, baseMembers.properties, members);
     mergeInto(members.methods, baseMembers.methods, members);
   }
diff --git a/code/lib/angular-cm/src/analyzer/members.test.ts b/code/lib/angular-cm/src/analyzer/members.test.ts
index 0d92c65799c4..5717a9443e31 100644
--- a/code/lib/angular-cm/src/analyzer/members.test.ts
+++ b/code/lib/angular-cm/src/analyzer/members.test.ts
@@ -1026,6 +1026,46 @@ describe('inheritance', () => {
     });
   });
 
+  it('takes the inputs and outputs a compiled .d.ts base component declares in its ɵcmp', () => {
+    const meta = analyze(
+      `
+      import { Component } from '@angular/core';
+
+      import { LibraryButton } from './library-button';
+
+      @Component({ selector: 'sb-own-button', template: '' })
+      export class OwnButtonComponent extends LibraryButton {}
+    `,
+      {
+        'library-button.d.ts': `
+          import * as i0 from '@angular/core';
+
+          export declare class LibraryButton {
+            label: string;
+            size: i0.InputSignal<'sm' | 'md'>;
+            clicked: i0.EventEmitter<string>;
+            static ɵcmp: i0.ɵɵComponentDeclaration<
+              LibraryButton, 'lib-button', never,
+              { "label": { "alias": "label"; "required": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; },
+              { "clicked": "pressed"; },
+              never, never, true, never
+            >;
+          }
+        `,
+      }
+    );
+    const component = soleComponent(meta);
+
+    expect(names(component.inputsClass)).toEqual(['label', 'size']);
+    expect(byName(component.inputsClass, 'label')).toMatchObject({
+      type: 'string',
+      required: true,
+    });
+    expect(byName(component.inputsClass, 'size').type).toBe('"sm" | "md"');
+    expect(names(component.outputsClass)).toEqual(['pressed']);
+    expect(component.propertiesClass).toEqual([]);
+  });
+
   it('merges multi-level bases with the child winning, and takes plain members from a .d.ts', () => {
     const meta = analyze(
       `
diff --git a/code/lib/angular-cm/src/analyzer/members.ts b/code/lib/angular-cm/src/analyzer/members.ts
index f92fc9509854..327d20b146ba 100644
--- a/code/lib/angular-cm/src/analyzer/members.ts
+++ b/code/lib/angular-cm/src/analyzer/members.ts
@@ -3,9 +3,9 @@ import { logger } from 'storybook/internal/node-logger';
 import type * as ts from 'typescript';
 
 import type { Argument, Method, Property } from '../types.ts';
-import { type DeclaredIOEntry, readComponentDeclaration } from './component-declaration.ts';
+import { readComponentDeclaration } from './component-declaration.ts';
 import type { AnalyzerContext } from './context.ts';
-import type { DecoratorInfo } from './decorators.ts';
+import type { DecoratorInfo, MetadataIOEntry } from './decorators.ts';
 import {
   decoratorStringArg,
   getDecorators,
@@ -16,7 +16,12 @@ import { defaultInitializer } from './default-initializer.ts';
 import { analyzeInputTransform, type InputTransformSource } from './input-transform.ts';
 import { getJsDocDescription, getJsDocTagsField, hasJsDocTag } from './jsdoc.ts';
 import { memberName } from './node-text.ts';
-import { buildSignalEntry, parseSignalCall, signalValueTypeFromType } from './signals.ts';
+import {
+  buildDeclaredSignalEntry,
+  buildSignalEntry,
+  declaredSignalKind,
+  parseSignalCall,
+} from './signals.ts';
 
 /**
  * A collected member, paired with the identity Angular itself merges on.
@@ -112,7 +117,8 @@ export function visitClassMembers(
 }
 
 /**
- * Reclassify the fields named in a `@Component`/`@Directive` `inputs`/`outputs` array.
+ * Reclassify the fields named in a `@Component`/`@Directive` `inputs`/`outputs` array, or in the
+ * input and output maps of a compiled `ɵcmp`.
  *
  * Runs after the inheritance merge so metadata naming an inherited field reclassifies it too, and
  * again per base inside that merge so a base's own metadata is not lost on the way down.
@@ -124,107 +130,86 @@ export function applyMetadataInputsOutputs(
 ): void {
   for (const decoratorName of ['Component', 'Directive']) {
     for (const entry of readMetadataInputsOutputs(ctx, classNode, decoratorName)) {
-      const index = members.properties.findIndex(
-        (property) => property.declName === entry.name && !property.isStatic
+      reclassify(
+        members,
+        entry,
+        entry.required === undefined ? {} : { required: entry.required, optional: !entry.required }
       );
-      if (index < 0) {
-        continue;
-      }
-      const [property] = members.properties.splice(index, 1);
-      const renamed = {
-        ...property,
-        value: { ...property.value, name: entry.alias ?? entry.name },
-      };
-      if (entry.bucket === 'inputs') {
-        members.inputs.push({
-          ...renamed,
-          value: {
-            ...renamed.value,
-            ...(entry.required !== undefined
-              ? { required: entry.required, optional: !entry.required }
-              : {}),
-          },
-        });
-      } else {
-        members.outputs.push(renamed);
-      }
     }
   }
   for (const entry of readComponentDeclaration(ctx, classNode)?.inputsOutputs ?? []) {
-    applyDeclaredIO(ctx, members, entry);
+    reclassify(members, entry, {
+      // `@Input()` and `@Input({ required: false })` compile to the same entry, so only `true` tells.
+      ...(entry.required ? { required: true, optional: false } : {}),
+      ...acceptedInputType(ctx, classNode, entry),
+    });
   }
 }
 
-// Mirrors what the source path records for the same member, so a component reads the same from
-// its compiled `.d.ts` as from its source.
-const applyDeclaredIO = (ctx: AnalyzerContext, members: ClassMembers, entry: DeclaredIOEntry) => {
-  const index = members.properties.findIndex(
-    (property) => property.declName === entry.name && !property.isStatic
-  );
-  if (index < 0) {
-    if (entry.bucket === 'outputs') {
-      addModelOutput(members, entry.name);
-    }
-    return;
-  }
-  const [property] = members.properties.splice(index, 1);
-  const signal = signalFields(ctx, property, entry.bucket);
-  const isInput = entry.bucket === 'inputs';
-  const moved: MemberEntry<Property> = {
-    ...property,
-    ...(signal ? { typeSource: signal.typeSource } : {}),
+// Moves the named field into its bucket under its public name. A signal member is already there,
+// because visiting it decided its kind.
+const reclassify = (
+  members: ClassMembers,
+  entry: MetadataIOEntry,
+  inputFields: Partial<Property>
+): void => {
+  const bucket = entry.bucket === 'inputs' ? members.inputs : members.outputs;
+  const isField = (member: MemberEntry<Property>) =>
+    member.declName === entry.name && !member.isStatic;
+  const bind = (member: MemberEntry<Property>): MemberEntry<Property> => ({
+    ...member,
     value: {
-      ...property.value,
+      ...member.value,
       name: entry.alias ?? entry.name,
-      ...signal?.value,
-      ...(isInput && signal ? { required: !!entry.required, optional: false } : {}),
-      ...(isInput && !signal && entry.required ? { required: true, optional: false } : {}),
+      ...(entry.bucket === 'inputs' ? inputFields : {}),
     },
-  };
-  (isInput ? members.inputs : members.outputs).push(moved);
-};
+  });
 
-// A `model()` is in both maps, and its input entry has already taken the field.
-const addModelOutput = (members: ClassMembers, field: string) => {
-  const index = members.inputs.findIndex(
-    (input) => input.declName === field && input.typeSource?.kind === 'signal'
-  );
-  if (index < 0) {
+  const index = members.properties.findIndex(isField);
+  if (index >= 0) {
+    const [property] = members.properties.splice(index, 1);
+    bucket.push(bind(property));
     return;
   }
-  const model = {
-    ...members.inputs[index],
-    typeSource: { kind: 'signal', signalKind: 'model' } as const,
-  };
-  members.inputs[index] = model;
-  members.outputs.push(model);
+  const signal = bucket.find((member) => isField(member) && member.typeSource?.kind === 'signal');
+  // A `model()` publishes its output as `${input}Change`, but it is recorded under the input name.
+  if (
+    !signal ||
+    (signal.typeSource?.kind === 'signal' &&
+      signal.typeSource.signalKind === 'model' &&
+      entry.bucket === 'outputs')
+  ) {
+    return;
+  }
+  const bound = bind(signal);
+  for (const list of [members.inputs, members.outputs]) {
+    const at = list.indexOf(signal);
+    if (at >= 0) {
+      list[at] = bound;
+    }
+  }
 };
 
-// A declaration types a signal member as its `InputSignal<T>`-style wrapper rather than the call.
-const signalFields = (
+// A transform input's write type survives in a declaration file only as a generated static.
+const acceptedInputType = (
   ctx: AnalyzerContext,
-  { declaration }: MemberEntry<Property>,
-  bucket: DeclaredIOEntry['bucket']
-) => {
-  const type = signalValueTypeFromType(
-    ctx,
-    ctx.checker.getTypeAtLocation(declaration),
-    declaration
-  );
-  if (type === undefined) {
-    return undefined;
+  classNode: ts.ClassLikeDeclaration,
+  entry: MetadataIOEntry
+): Partial<Property> => {
+  const { ts } = ctx;
+  if (entry.bucket !== 'inputs') {
+    return {};
   }
-  const { line } = ctx.ts.getLineAndCharacterOfPosition(
-    declaration.getSourceFile(),
-    declaration.getStart()
+  const accepted = classNode.members.find(
+    (member): member is ts.PropertyDeclaration =>
+      ts.isPropertyDeclaration(member) &&
+      isStatic(ctx, member) &&
+      memberName(ts, member.name) === `ngAcceptInputType_${entry.name}`
   );
-  return {
-    value: { type, line: line + 1 },
-    typeSource: {
-      kind: 'signal',
-      signalKind: bucket === 'inputs' ? 'input' : 'output',
-    } as const,
-  };
+  const type = accepted && ctx.checker.getTypeAtLocation(accepted);
+  return type && !(type.flags & (ts.TypeFlags.Unknown | ts.TypeFlags.Any))
+    ? { type: ctx.types.renderValueType(type, accepted) }
+    : {};
 };
 
 const entryFor = <T>(
@@ -258,20 +243,21 @@ const visitProperty = (
     return;
   }
   const signal = parseSignalCall(ctx, member);
-  if (signal) {
+  const signalKind = signal?.kind ?? declaredSignalKind(ctx, member);
+  if (signalKind) {
     const entry = entryFor(
       ctx,
       member,
       {
-        ...buildSignalEntry(ctx, member, signal),
+        ...(signal ? buildSignalEntry(ctx, member, signal) : buildDeclaredSignalEntry(ctx, member)),
         ...memberApiFields(ctx, member),
       },
-      { kind: 'signal', signalKind: signal.kind }
+      { kind: 'signal', signalKind }
     );
-    if (signal.kind !== 'output') {
+    if (signalKind !== 'output') {
       members.inputs.push(entry);
     }
-    if (signal.kind !== 'input') {
+    if (signalKind !== 'input') {
       // model() lands in BOTH arrays under the same bare name; the extractor keys on that.
       members.outputs.push(entry);
     }
diff --git a/code/lib/angular-cm/src/analyzer/signals.ts b/code/lib/angular-cm/src/analyzer/signals.ts
index ebe885036e41..34c6cddc3293 100644
--- a/code/lib/angular-cm/src/analyzer/signals.ts
+++ b/code/lib/angular-cm/src/analyzer/signals.ts
@@ -3,7 +3,7 @@ import type * as ts from 'typescript';
 import type { Property } from '../types.ts';
 import type { AnalyzerContext } from './context.ts';
 import { defaultInitializer } from './default-initializer.ts';
-import { isAngularCoreOrUnresolved, stringOption } from './decorators.ts';
+import { isAngularCoreOrUnresolved, isDeclaredInAngularCore, stringOption } from './decorators.ts';
 import { getJsDocDescription, getJsDocTagsField } from './jsdoc.ts';
 import { memberName } from './node-text.ts';
 
@@ -103,6 +103,50 @@ export const buildSignalEntry = (
   };
 };
 
+const DECLARED_SIGNAL_KINDS = new Map<string, SignalCall['kind']>([
+  ['InputSignal', 'input'],
+  ['InputSignalWithTransform', 'input'],
+  ['ModelSignal', 'model'],
+  ['OutputEmitterRef', 'output'],
+]);
+
+// A declaration file keeps a signal member only as its type, such as `size: InputSignal<'sm'>`.
+export const declaredSignalKind = (
+  ctx: AnalyzerContext,
+  member: ts.PropertyDeclaration
+): SignalCall['kind'] | undefined => {
+  const { ts } = ctx;
+  if (
+    !member.getSourceFile().isDeclarationFile ||
+    ts.getModifiers(member)?.some((modifier) => modifier.kind === ts.SyntaxKind.StaticKeyword)
+  ) {
+    return undefined;
+  }
+  const type = ctx.checker.getTypeAtLocation(member);
+  const symbol = type.aliasSymbol ?? type.getSymbol();
+  return symbol && isDeclaredInAngularCore(symbol)
+    ? DECLARED_SIGNAL_KINDS.get(symbol.name)
+    : undefined;
+};
+
+// Required-ness and an alias are not in the type; the compiled `ɵcmp` maps supply them.
+export const buildDeclaredSignalEntry = (
+  ctx: AnalyzerContext,
+  member: ts.PropertyDeclaration
+): Property => {
+  const { ts } = ctx;
+  const type = signalValueTypeFromChecker(ctx, member);
+  return {
+    name: memberName(ts, member.name),
+    ...(type === undefined ? {} : { type }),
+    optional: false,
+    required: false,
+    line: ts.getLineAndCharacterOfPosition(member.getSourceFile(), member.getStart()).line + 1,
+    ...getJsDocDescription(ts, member),
+    ...getJsDocTagsField(ts, member),
+  };
+};
+
 const signalValueTypeFromChecker = (
   ctx: AnalyzerContext,
   member: ts.PropertyDeclaration

From c1a4f7b0c5c5b833667db9dafe52027dece8e2e0 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 19 Oct 2026 08:48:05 +0000
Subject: [PATCH 172/326] React: Keep storybook/theming types on the preview
 theming entry

Declaration emit inlines @storybook/react/theming and drops the Emotion
Theme merge, so styled and useTheme no longer see theme.background.
Ship that entry's types as a re-export of storybook/theming, and keep
the runtime bundle self-contained.

Co-authored-by: Norbert de Langen <norbert@chromatic.com>
---
 code/renderers/react/build-config.ts     |  8 ++++++++
 code/renderers/react/src/theming.test.ts | 24 ++++++++++++++++++++++++
 scripts/build/build-package.ts           |  5 +++++
 scripts/build/utils/entry-utils.ts       |  3 ++-
 scripts/build/utils/generate-bundle.ts   |  3 ++-
 5 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 code/renderers/react/src/theming.test.ts

diff --git a/code/renderers/react/build-config.ts b/code/renderers/react/build-config.ts
index 8d2b01010130..1a27ab27e273 100644
--- a/code/renderers/react/build-config.ts
+++ b/code/renderers/react/build-config.ts
@@ -1,3 +1,7 @@
+import { writeFile } from 'node:fs/promises';
+
+import { join } from 'pathe';
+
 import type { BuildEntries } from '../../../scripts/build/utils/entry-utils.ts';
 
 const config: BuildEntries = {
@@ -52,6 +56,10 @@ const config: BuildEntries = {
       },
     ],
   },
+  // Inlined declarations drop the Theme merge (`declare module '.'` in core theming).
+  postbuild: async (cwd) => {
+    await writeFile(join(cwd, 'dist/theming.d.ts'), "export * from 'storybook/theming';\n");
+  },
 };
 
 export default config;
diff --git a/code/renderers/react/src/theming.test.ts b/code/renderers/react/src/theming.test.ts
new file mode 100644
index 000000000000..7aab8573598a
--- /dev/null
+++ b/code/renderers/react/src/theming.test.ts
@@ -0,0 +1,24 @@
+import { existsSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { describe, expect, it } from 'vitest';
+
+const declaration = join(import.meta.dirname, '../dist/theming.d.ts');
+const bundle = join(import.meta.dirname, '../dist/theming.js');
+const built = existsSync(declaration) && existsSync(bundle);
+
+describe('@storybook/react/theming build', () => {
+  it.runIf(process.env.CI)('is built before this suite runs', () => {
+    expect(built).toBe(true);
+  });
+
+  it.runIf(built)('re-exports storybook/theming types', () => {
+    expect(readFileSync(declaration, 'utf8')).toBe("export * from 'storybook/theming';\n");
+  });
+
+  it.runIf(built)('bundles the theming runtime', () => {
+    const source = readFileSync(bundle, 'utf8');
+    expect(source).not.toMatch(/from ["']storybook\/theming["']/);
+    expect(source).toMatch(/from ["']react["']/);
+  });
+});
diff --git a/scripts/build/build-package.ts b/scripts/build/build-package.ts
index 440ad67754ac..17ee6e27f891 100755
--- a/scripts/build/build-package.ts
+++ b/scripts/build/build-package.ts
@@ -111,6 +111,11 @@ async function run() {
     }),
   ]);
 
+  if (!isWatch && entry.postbuild) {
+    console.log('Running postbuild script');
+    await entry.postbuild(DIR_CWD);
+  }
+
   if (prebuildTime) {
     console.log(`Prebuild script completed in`, picocolors.yellow(prettyTime(prebuildTime)));
   }
diff --git a/scripts/build/utils/entry-utils.ts b/scripts/build/utils/entry-utils.ts
index 8378efda9b6e..079210ccd91a 100644
--- a/scripts/build/utils/entry-utils.ts
+++ b/scripts/build/utils/entry-utils.ts
@@ -57,7 +57,8 @@ export type BuildEntries = {
   /**
    * The function to run after each successful build (works with watch-mode)
    *
-   * @note this runs **after** each successful build, even in watch-mode
+   * @note In a production build this runs after declaration emit, so it can replace a generated
+   * d.ts. In watch mode it runs from the bundler's rebuild hook; declarations are not emitted.
    */
   postbuild?: (cwd: string) => Promise<void>;
 };
diff --git a/scripts/build/utils/generate-bundle.ts b/scripts/build/utils/generate-bundle.ts
index a220036ebf2e..0941827b6aeb 100644
--- a/scripts/build/utils/generate-bundle.ts
+++ b/scripts/build/utils/generate-bundle.ts
@@ -136,7 +136,8 @@ export async function generateBundle({
         name: 'postbuild',
         setup(build) {
           build.onEnd(async (result) => {
-            if (!postbuild) {
+            // Production runs postbuild once, after declaration emit, in build-package.
+            if (!isWatch || !postbuild) {
               return;
             }
             if (result.errors.length) {

From 7110701e3d5875d41ead0f231a9f493e831a2137 Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Mon, 19 Oct 2026 11:15:34 +0200
Subject: [PATCH 173/326] WC: Keep properties named like an unrelated attribute

---
 code/renderers/web-components/src/arg-keys.ts |  3 +
 .../web-components/src/bind-args.test.ts      | 31 +++++-
 .../renderers/web-components/src/bind-args.ts | 17 +++-
 .../component-docgen/api-description.test.ts  | 31 ++++++
 .../arg-types/map-arg-types.test.ts           | 95 ++++++++++++++++++-
 .../arg-types/map-arg-types.ts                | 18 ++--
 .../manifest/declaration-api.ts               | 20 +++-
 .../docgen/story-docs/classify-args.test.ts   | 14 +++
 .../src/docgen/story-docs/classify-args.ts    | 19 ++--
 9 files changed, 223 insertions(+), 25 deletions(-)

diff --git a/code/renderers/web-components/src/arg-keys.ts b/code/renderers/web-components/src/arg-keys.ts
index eb8f2a0492b3..6e6055ca8129 100644
--- a/code/renderers/web-components/src/arg-keys.ts
+++ b/code/renderers/web-components/src/arg-keys.ts
@@ -1,6 +1,7 @@
 export const DEFAULT_SLOT_NAME = 'default';
 
 export type ArgKeyCategory =
+  | 'attributes'
   | 'events'
   | 'methods'
   | 'slots'
@@ -8,6 +9,7 @@ export type ArgKeyCategory =
   | 'cssStates'
   | 'cssProperties';
 
+/** The mapper only emits `-attr` when the stem is a declared attribute that shares its name with a property. */
 export function toArgKey(category: ArgKeyCategory, name: string): string {
   if (category === 'cssProperties') {
     return name;
@@ -32,6 +34,7 @@ export function parseArgKey(key: string): { category: ArgKeyCategory; name: stri
 }
 
 const ARG_KEY_SUFFIXES: Record<Exclude<ArgKeyCategory, 'cssProperties'>, string> = {
+  attributes: '-attr',
   events: '-event',
   methods: '-method',
   slots: '-slot',
diff --git a/code/renderers/web-components/src/bind-args.test.ts b/code/renderers/web-components/src/bind-args.test.ts
index f9bf6fbb4da7..efb3f863a230 100644
--- a/code/renderers/web-components/src/bind-args.test.ts
+++ b/code/renderers/web-components/src/bind-args.test.ts
@@ -8,13 +8,25 @@ import { bindArgs } from './bind-args.ts';
 const X_DEMO_TAG = 'x-demo';
 
 class XDemo extends HTMLElement {
-  static observedAttributes = ['label', 'count', 'is-open', 'disabled', 'has-slot', 'open'];
+  static observedAttributes = [
+    'label',
+    'count',
+    'is-open',
+    'disabled',
+    'has-slot',
+    'open',
+    'value',
+  ];
+
+  defaultValue = '';
 
   items: string[] = [];
 
   open = true;
 
   text = 'initial';
+
+  value = '';
 }
 
 if (!customElements.get(X_DEMO_TAG)) {
@@ -116,6 +128,23 @@ describe('bindArgs', () => {
       expected: '<x-demo></x-demo>',
       expectedProperties: { reset: undefined, 'reset-method': undefined },
     },
+    {
+      name: 'binds -attr keys as attributes while the bare key stays the same-named property',
+      args: { value: 'from property', 'value-attr': 'from attribute' },
+      expected: '<x-demo value="from attribute"></x-demo>',
+      expectedProperties: { value: 'from property', defaultValue: '' },
+    },
+    {
+      name: 'skips non-primitive and unset -attr values',
+      args: { 'value-attr': { text: 'Demo' }, 'label-attr': null },
+      expected: '<x-demo></x-demo>',
+      expectedProperties: { 'value-attr': undefined },
+    },
+    {
+      name: 'binds an undeclared -attr key to its stem attribute',
+      args: { 'data-attr': 'x' },
+      expected: '<x-demo data="x"></x-demo>',
+    },
     {
       name: 'binds suffix-looking observed attributes before slots',
       args: { 'has-slot': 'yes' },
diff --git a/code/renderers/web-components/src/bind-args.ts b/code/renderers/web-components/src/bind-args.ts
index 450bb3a1abb7..e4f55c4f1c13 100644
--- a/code/renderers/web-components/src/bind-args.ts
+++ b/code/renderers/web-components/src/bind-args.ts
@@ -5,6 +5,9 @@ import { DEFAULT_SLOT_NAME, parseArgKey, type ArgKeyCategory } from './arg-keys.
 type Binder = (element: HTMLElement, name: string, value: unknown) => string | undefined;
 
 const BINDERS: Record<Exclude<ArgKeyCategory, 'cssProperties'>, Binder> = {
+  attributes: (element, name, value) => {
+    bindPrimitiveAttribute(element, name, value);
+  },
   events: (element, name, value) => {
     if (typeof value === 'function') {
       element.addEventListener(name, value as EventListener);
@@ -16,7 +19,7 @@ const BINDERS: Record<Exclude<ArgKeyCategory, 'cssProperties'>, Binder> = {
   cssStates: (element, name, value) => styleRule(`${element.localName}:state(${name})`, value),
 };
 
-// Element properties win over attributes so booleans that default to `true` and empty strings reach the element; runtime checks run before suffixes so a declared attribute such as `has-slot` wins, as in the mapper.
+// Element properties win over attributes so booleans that default to `true` and empty strings reach the element; runtime checks run before suffixes so a declared attribute such as `has-slot` wins, as in the mapper; `-attr` keys reach an attribute shadowed by a same-named property.
 export function bindArgs(element: HTMLElement, args: Args): string[] {
   const observedAttributes = observedAttributesOf(element);
   const styleRules: string[] = [];
@@ -34,8 +37,7 @@ export function bindArgs(element: HTMLElement, args: Args): string[] {
       continue;
     }
 
-    if (observedAttributes.has(key) && isPrimitive(value)) {
-      bindAttribute(element, key, value);
+    if (observedAttributes.has(key) && bindPrimitiveAttribute(element, key, value)) {
       continue;
     }
 
@@ -73,6 +75,15 @@ function assignProperty(element: HTMLElement, key: string, value: unknown): void
   (element as HTMLElement & Record<string, unknown>)[key] = value;
 }
 
+/** Returns false for objects and functions so callers can fall back to a property. */
+function bindPrimitiveAttribute(element: HTMLElement, name: string, value: unknown): boolean {
+  if (!isPrimitive(value)) {
+    return false;
+  }
+  bindAttribute(element, name, value);
+  return true;
+}
+
 function bindAttribute(element: HTMLElement, name: string, value: unknown): void {
   if (isUnset(value) || value === false) {
     return;
diff --git a/code/renderers/web-components/src/docgen/component-docgen/api-description.test.ts b/code/renderers/web-components/src/docgen/component-docgen/api-description.test.ts
index 9eed980dd29a..3125b3601c62 100644
--- a/code/renderers/web-components/src/docgen/component-docgen/api-description.test.ts
+++ b/code/renderers/web-components/src/docgen/component-docgen/api-description.test.ts
@@ -268,6 +268,37 @@ describe('buildApiDescription', () => {
     `);
   });
 
+  it('keeps a property named like an attribute backed by another field', () => {
+    expect(
+      buildApiDescription(
+        declaration({
+          name: 'WNames',
+          attributes: [{ name: 'value', fieldName: 'defaultValue', type: { text: 'string' } }],
+          members: [
+            { kind: 'field', name: 'defaultValue', type: { text: 'string' } },
+            { kind: 'field', name: 'value', type: { text: 'string' } },
+          ],
+        })
+      )
+    ).toMatchInlineSnapshot(`
+      "## Attributes
+
+      \`\`\`
+      export type WNamesAttributes = {
+        value?: string; // property: defaultValue
+      }
+      \`\`\`
+
+      ## Properties
+
+      \`\`\`
+      export type WNamesProperties = {
+        value?: string;
+      }
+      \`\`\`"
+    `);
+  });
+
   it('returns undefined for an empty declaration', () => {
     expect(buildApiDescription(declaration({}))).toMatchInlineSnapshot(`undefined`);
   });
diff --git a/code/renderers/web-components/src/docgen/component-docgen/arg-types/map-arg-types.test.ts b/code/renderers/web-components/src/docgen/component-docgen/arg-types/map-arg-types.test.ts
index 75ca510c0eb8..15e2827f425d 100644
--- a/code/renderers/web-components/src/docgen/component-docgen/arg-types/map-arg-types.test.ts
+++ b/code/renderers/web-components/src/docgen/component-docgen/arg-types/map-arg-types.test.ts
@@ -76,7 +76,7 @@ function orderInvariantCases(): MapArgTypesCase[] {
       },
     })),
     ...permutations(collidingFields).map((members, index): MapArgTypesCase => ({
-      name: `attribute key wins over same-name field ${index + 1}`,
+      name: `attribute named like an unrelated field gets the -attr key ${index + 1}`,
       declaration: declaration({
         attributes: [{ name: 'b', fieldName: 'a' }],
         members,
@@ -93,6 +93,16 @@ function orderInvariantCases(): MapArgTypesCase[] {
           },
         },
         b: {
+          name: 'b',
+          description: undefined,
+          type: { name: 'number' },
+          table: {
+            category: 'properties',
+            type: { summary: 'number' },
+            defaultValue: { summary: undefined },
+          },
+        },
+        'b-attr': {
           name: 'b',
           description: undefined,
           type: { name: 'boolean' },
@@ -137,6 +147,24 @@ describe('mapArgTypes', () => {
         },
       },
     },
+    {
+      name: 'attribute without fieldName + field with the same name',
+      declaration: declaration({
+        attributes: [{ name: 'label', type: { text: 'string' } }],
+        members: [{ kind: 'field', name: 'label', type: { text: 'string' } }],
+      }),
+      expected: {
+        label: {
+          name: 'label',
+          type: { name: 'string' },
+          table: {
+            category: 'attributes',
+            type: { summary: 'string' },
+            defaultValue: { summary: undefined },
+          },
+        },
+      },
+    },
     {
       name: 'field description wins over attribute summary',
       declaration: declaration({
@@ -889,4 +917,69 @@ describe('mapArgTypes', () => {
   }[])('$name', ({ declaration, expected }) => {
     expect(mapArgTypes(declaration)).toEqual(expected);
   });
+
+  it('keeps a property named like an attribute backed by another field', () => {
+    expect(
+      mapArgTypes(
+        declaration({
+          attributes: [{ name: 'value', fieldName: 'defaultValue', type: { text: 'string' } }],
+          members: [
+            { kind: 'field', name: 'defaultValue', type: { text: 'string' }, default: "''" },
+            { kind: 'field', name: 'value', type: { text: 'string' } },
+          ],
+        })
+      )
+    ).toMatchInlineSnapshot(`
+      {
+        "defaultValue": {
+          "description": undefined,
+          "name": "defaultValue",
+          "table": {
+            "category": "properties",
+            "defaultValue": {
+              "summary": "''",
+            },
+            "type": {
+              "summary": "string",
+            },
+          },
+          "type": {
+            "name": "string",
+          },
+        },
+        "value": {
+          "description": undefined,
+          "name": "value",
+          "table": {
+            "category": "properties",
+            "defaultValue": {
+              "summary": undefined,
+            },
+            "type": {
+              "summary": "string",
+            },
+          },
+          "type": {
+            "name": "string",
+          },
+        },
+        "value-attr": {
+          "description": undefined,
+          "name": "value",
+          "table": {
+            "category": "attributes",
+            "defaultValue": {
+              "summary": "''",
+            },
+            "type": {
+              "summary": "string",
+            },
+          },
+          "type": {
+            "name": "string",
+          },
+        },
+      }
+    `);
+  });
 });
diff --git a/code/renderers/web-components/src/docgen/component-docgen/arg-types/map-arg-types.ts b/code/renderers/web-components/src/docgen/component-docgen/arg-types/map-arg-types.ts
index 70abc5b8a07a..6fb609fa9a06 100644
--- a/code/renderers/web-components/src/docgen/component-docgen/arg-types/map-arg-types.ts
+++ b/code/renderers/web-components/src/docgen/component-docgen/arg-types/map-arg-types.ts
@@ -1,7 +1,11 @@
 import type { StrictArgTypes, StrictInputType } from 'storybook/internal/types';
 
 import { deprecationMessage, firstValue, trimmedOrUndefined } from '../utils.ts';
-import { classifyDeclaration, type DeclarationApi } from '../manifest/declaration-api.ts';
+import {
+  classifyDeclaration,
+  foldsIntoAttributeRow,
+  type DeclarationApi,
+} from '../manifest/declaration-api.ts';
 import type {
   ManifestAttribute,
   ManifestClassField,
@@ -53,8 +57,7 @@ interface ToArgTypeOptions {
 /**
  * Suffixed keys keep categories clear of attributes (the `@wc-toolkit/storybook-helpers`
  * convention); the attributes/properties spread last wins the clashes left and bare `--x`
- * names. Within attributes and properties, property rows are written first and
- * attribute rows last, so the same precedence holds in every input order.
+ * names. An attribute named like an unrelated property gets the `-attr` key so both rows survive.
  */
 export function mapArgTypes(declaration: ManifestDeclaration): StrictArgTypes {
   const api = classifyDeclaration(declaration);
@@ -74,9 +77,7 @@ export function mapArgTypes(declaration: ManifestDeclaration): StrictArgTypes {
 
 function mapAttributesAndProperties(api: DeclarationApi): StrictArgTypes {
   const argTypes: StrictArgTypes = {};
-  const properties = api.fields.filter(
-    (field) => !api.attributes.some(({ attribute }) => attribute.name === field.name)
-  );
+  const properties = api.fields.filter((field) => !foldsIntoAttributeRow(field, api.attributes));
 
   for (const field of properties) {
     const attribute = api.attributes.find(({ field: backingField }) => backingField === field);
@@ -88,7 +89,10 @@ function mapAttributesAndProperties(api: DeclarationApi): StrictArgTypes {
   }
 
   for (const { attribute, field } of api.attributes) {
-    argTypes[attribute.name] = toArgType({
+    const key = Object.hasOwn(argTypes, attribute.name)
+      ? toArgKey('attributes', attribute.name)
+      : attribute.name;
+    argTypes[key] = toArgType({
       key: attribute.name,
       category: 'attributes',
       sources: field ? [field, attribute] : [attribute],
diff --git a/code/renderers/web-components/src/docgen/component-docgen/manifest/declaration-api.ts b/code/renderers/web-components/src/docgen/component-docgen/manifest/declaration-api.ts
index 8b4a808db373..0ce664caffa3 100644
--- a/code/renderers/web-components/src/docgen/component-docgen/manifest/declaration-api.ts
+++ b/code/renderers/web-components/src/docgen/component-docgen/manifest/declaration-api.ts
@@ -53,9 +53,27 @@ export function classifyDeclaration(declaration: ManifestDeclaration): Declarati
 export function isBackedByAttribute(
   field: ManifestClassField,
   attributes: AttributeApi[]
+): boolean {
+  return attributes.some((attribute) => isAttributeField(attribute, field));
+}
+
+/** Arg types keep differently named backing fields as their own property rows; only a same-named field merges into the attribute row. */
+export function foldsIntoAttributeRow(
+  field: ManifestClassField,
+  attributes: AttributeApi[]
 ): boolean {
   return attributes.some(
-    (attribute) => attribute.field === field || attribute.attribute.name === field.name
+    (attribute) => attribute.attribute.name === field.name && isAttributeField(attribute, field)
+  );
+}
+
+/** Name equality only counts when the attribute names no `fieldName`; otherwise `value` could claim an unrelated `value` field. */
+function isAttributeField(
+  { attribute, field: backingField }: AttributeApi,
+  field: ManifestClassField
+): boolean {
+  return (
+    backingField === field || (attribute.fieldName === undefined && attribute.name === field.name)
   );
 }
 
diff --git a/code/renderers/web-components/src/docgen/story-docs/classify-args.test.ts b/code/renderers/web-components/src/docgen/story-docs/classify-args.test.ts
index 76658c80299a..6bfb5a3dfb33 100644
--- a/code/renderers/web-components/src/docgen/story-docs/classify-args.test.ts
+++ b/code/renderers/web-components/src/docgen/story-docs/classify-args.test.ts
@@ -17,8 +17,11 @@ const declaration = {
     { name: 'count', fieldName: 'count' },
     { name: 'active', fieldName: 'active' },
     { name: 'has-slot' },
+    { name: 'value', fieldName: 'defaultValue', default: "''" },
   ],
   members: [
+    { kind: 'field', name: 'defaultValue', default: "'initial'" },
+    { kind: 'field', name: 'value' },
     { kind: 'field', name: 'count' },
     { kind: 'field', name: 'active', default: 'true' },
     { kind: 'field', name: 'items' },
@@ -88,6 +91,17 @@ describe('classifyArg', () => {
       isFunction: false,
       expected: { kind: 'attribute', name: 'has-slot', viaField: false },
     },
+    { key: 'value', isFunction: false, expected: { kind: 'property', name: 'value' } },
+    {
+      key: 'value-attr',
+      isFunction: false,
+      expected: { kind: 'attribute', name: 'value', viaField: false, defaultValue: "'initial'" },
+    },
+    {
+      key: 'defaultValue',
+      isFunction: false,
+      expected: { kind: 'attribute', name: 'value', viaField: true, defaultValue: "'initial'" },
+    },
     { key: 'nope', isFunction: false, expected: { kind: 'unknown' } },
   ])('$key', ({ key, isFunction, expected }) => {
     expect(classifyArg(key, isFunction, argTypes, declaration)).toEqual(expected);
diff --git a/code/renderers/web-components/src/docgen/story-docs/classify-args.ts b/code/renderers/web-components/src/docgen/story-docs/classify-args.ts
index d58412e083e5..d50dbe63fe84 100644
--- a/code/renderers/web-components/src/docgen/story-docs/classify-args.ts
+++ b/code/renderers/web-components/src/docgen/story-docs/classify-args.ts
@@ -37,8 +37,8 @@ export function classifyArg(
       case 'attributes':
         return attributeBinding(
           name,
-          attributeViaField(key, name, declaration),
-          attributeDefault(key, name, declaration)
+          attributeViaField(name, declaration),
+          attributeDefault(name, declaration)
         );
       case 'properties': {
         const attribute = pairedAttribute(name, declaration);
@@ -46,7 +46,7 @@ export function classifyArg(
           ? attributeBinding(
               attribute,
               true,
-              fieldDefault(name, declaration) ?? attributeDefault(name, attribute, declaration)
+              fieldDefault(name, declaration) ?? attributeDefault(attribute, declaration)
             )
           : { kind: 'property', name };
       }
@@ -112,22 +112,17 @@ const attributeDeclaration = (
 ): ManifestAttribute | undefined =>
   declaration.attributes?.find((attribute) => attribute.name === attributeName);
 
-const attributeViaField = (
-  key: string,
-  attributeName: string,
-  declaration: ManifestDeclaration
-): boolean => pairedAttribute(key, declaration) === attributeName;
+const attributeViaField = (attributeName: string, declaration: ManifestDeclaration): boolean =>
+  pairedAttribute(attributeName, declaration) === attributeName;
 
 const attributeDefault = (
-  key: string,
   attributeName: string,
   declaration: ManifestDeclaration
 ): string | undefined => {
   const attribute = attributeDeclaration(attributeName, declaration);
   const fieldName =
-    attribute?.fieldName === key || pairedAttribute(key, declaration) === attributeName
-      ? key
-      : undefined;
+    attribute?.fieldName ??
+    (attributeViaField(attributeName, declaration) ? attributeName : undefined);
   return (fieldName ? fieldDefault(fieldName, declaration) : undefined) ?? attribute?.default;
 };
 

From 89931f2aaeb94e80ab02770587c0cd0d95a50523 Mon Sep 17 00:00:00 2001
From: Obvious <obvious@obvious.ai>
Date: Mon, 19 Oct 2026 11:41:44 +0000
Subject: [PATCH 174/326] fix(core): lazy-load node-logger in module.ts to
 unbreak core build

The top-level `import { logger } from 'storybook/internal/node-logger'`
broke the core build: scripts/build/utils/generate-bundle.ts imports
resolvePackageDir from this module's source and runs under plain Node
while core itself is being built, when code/core/dist does not exist
yet, so loading the build script failed with ERR_MODULE_NOT_FOUND. Load
the logger lazily inside the failure handler instead, matching how the
module already lazy-imports storybook/internal/bin/loader.

Also applies the remaining round-2 review suggestions:

- keep the caught registration error and attach it as `cause` when
  importModule throws, so a generic import failure does not hide the
  real loader problem
- try registerHooks on Node >= 26 with an early return and a single
  register fall-through, removing the duplicated resolve+register branch
- dedupe the register/registerHooks spy setup into one
  stubHookRegistration helper that returns call counters; call
  importModule twice so the exactly-once assertions prove memoization;
  keep the inherited JEST_WORKER_ID case as an it.each row

Verified: with code/core/dist/node-logger absent, plain Node fails to
load this module source before the change (ERR_MODULE_NOT_FOUND) and
loads it after; oxlint 0 errors, oxfmt clean, core tsc reports no
errors in the touched files, vitest passes 3/3.
---
 code/core/src/shared/utils/module.test.ts | 84 ++++++++++++-----------
 code/core/src/shared/utils/module.ts      | 23 ++++---
 2 files changed, 60 insertions(+), 47 deletions(-)

diff --git a/code/core/src/shared/utils/module.test.ts b/code/core/src/shared/utils/module.test.ts
index a4093a66ad91..a88cd12d8188 100644
--- a/code/core/src/shared/utils/module.test.ts
+++ b/code/core/src/shared/utils/module.test.ts
@@ -10,10 +10,29 @@ const importFreshModule = async () => {
   return import('./module.ts');
 };
 
-const hookRegistrations = (
-  register: ReturnType<typeof vi.spyOn>,
-  registerHooks: ReturnType<typeof vi.spyOn> | undefined
-) => register.mock.calls.length + (registerHooks?.mock.calls.length ?? 0);
+const stubHookRegistration = (refuses: boolean) => {
+  const register = vi.spyOn(nodeModule, 'register').mockImplementation(() => {
+    if (refuses) {
+      throw new Error('module.register() is not supported in Jest');
+    }
+  });
+  const registerHooks =
+    'registerHooks' in nodeModule
+      ? vi.spyOn(nodeModule, 'registerHooks').mockImplementation(() => {
+          if (refuses) {
+            throw new Error('module.registerHooks() is not supported in Jest');
+          }
+          return { deregister: () => {} };
+        })
+      : undefined;
+
+  return {
+    // All hook registration attempts across both APIs.
+    attempts: () => register.mock.calls.length + (registerHooks?.mock.calls.length ?? 0),
+    // register() attempts only — pins that a refused registration is never retried.
+    registerCalls: () => register.mock.calls.length,
+  };
+};
 
 describe('importModule', () => {
   afterEach(() => {
@@ -22,48 +41,35 @@ describe('importModule', () => {
   });
 
   it('still imports the module when the runtime forbids module hook registration', async () => {
-    // The throwing spies simulate a refusing runtime and keep real hooks out of this process.
-    vi.spyOn(nodeModule, 'register').mockImplementation(() => {
-      throw new Error('module.register() is not supported in Jest');
-    });
-    if ('registerHooks' in nodeModule) {
-      vi.spyOn(nodeModule, 'registerHooks').mockImplementation(() => {
-        throw new Error('module.registerHooks() is not supported in Jest');
-      });
-    }
+    const hooks = stubHookRegistration(true);
     const { importModule } = await importFreshModule();
 
     const mod = await importModule(new URL('./module.ts', import.meta.url).href);
+    // The refusal is cached: a runtime that refuses once is not retried on the next import.
+    await importModule(new URL('./module.ts', import.meta.url).href);
 
     expect(mod).toBeDefined();
+    expect(hooks.registerCalls()).toBe(1);
   });
 
-  it('registers the TypeScript loader hooks exactly once when the runtime allows them', async () => {
-    const register = vi.spyOn(nodeModule, 'register').mockImplementation(() => {});
-    const registerHooks =
-      'registerHooks' in nodeModule
-        ? vi.spyOn(nodeModule, 'registerHooks').mockImplementation(() => ({ deregister: () => {} }))
-        : undefined;
-    const { importModule } = await importFreshModule();
+  it.each([
+    ['when the runtime allows them', false],
+    ['when JEST_WORKER_ID is inherited from the parent environment', true],
+  ])(
+    'registers the TypeScript loader hooks exactly once %s',
+    async (_condition, stubInheritedEnvironment) => {
+      if (stubInheritedEnvironment) {
+        vi.stubEnv('JEST_WORKER_ID', '1');
+      }
+      const hooks = stubHookRegistration(false);
+      const { importModule } = await importFreshModule();
 
-    const mod = await importModule(new URL('./module.ts', import.meta.url).href);
+      const mod = await importModule(new URL('./module.ts', import.meta.url).href);
+      // Calling twice is what makes the toBe(1) below prove memoization.
+      await importModule(new URL('./module.ts', import.meta.url).href);
 
-    expect(hookRegistrations(register, registerHooks)).toBe(1);
-    expect(mod).toBeDefined();
-  });
-
-  it('still registers the hooks when JEST_WORKER_ID is inherited from the parent environment', async () => {
-    const register = vi.spyOn(nodeModule, 'register').mockImplementation(() => {});
-    const registerHooks =
-      'registerHooks' in nodeModule
-        ? vi.spyOn(nodeModule, 'registerHooks').mockImplementation(() => ({ deregister: () => {} }))
-        : undefined;
-    vi.stubEnv('JEST_WORKER_ID', '1');
-    const { importModule } = await importFreshModule();
-
-    const mod = await importModule(new URL('./module.ts', import.meta.url).href);
-
-    expect(hookRegistrations(register, registerHooks)).toBe(1);
-    expect(mod).toBeDefined();
-  });
+      expect(hooks.attempts()).toBe(1);
+      expect(mod).toBeDefined();
+    }
+  );
 });
diff --git a/code/core/src/shared/utils/module.ts b/code/core/src/shared/utils/module.ts
index 16e75a37d026..e5453e57cd9b 100644
--- a/code/core/src/shared/utils/module.ts
+++ b/code/core/src/shared/utils/module.ts
@@ -7,8 +7,6 @@ import { resolveModulePath } from 'exsolve';
 import semver from 'semver';
 import { dirname, join } from 'pathe';
 
-import { logger } from 'storybook/internal/node-logger';
-
 import { jsModuleExtensions } from '../constants/extensions.ts';
 
 /**
@@ -49,6 +47,7 @@ export const resolvePackageDir = (
 };
 
 let typescriptLoaderRegistration: Promise<void> | null = null;
+let typescriptLoaderRegistrationError: unknown = null;
 
 function registerTypescriptLoader() {
   typescriptLoaderRegistration ??= (async () => {
@@ -56,16 +55,19 @@ function registerTypescriptLoader() {
       try {
         const { load } = await import('storybook/internal/bin/loader');
         nodeModule.registerHooks({ load });
+        return;
       } catch {
         // Fallback in case nodejs/node#62786 caused an exception
-        const typescriptLoaderUrl = importMetaResolve('storybook/internal/bin/loader');
-        nodeModule.register(typescriptLoaderUrl, import.meta.url);
       }
-    } else {
-      const typescriptLoaderUrl = importMetaResolve('storybook/internal/bin/loader');
-      nodeModule.register(typescriptLoaderUrl, import.meta.url);
     }
-  })().catch((error) => {
+
+    const typescriptLoaderUrl = importMetaResolve('storybook/internal/bin/loader');
+    nodeModule.register(typescriptLoaderUrl, import.meta.url);
+  })().catch(async (error) => {
+    typescriptLoaderRegistrationError = error;
+    // Lazy import: this module is also loaded by build scripts under plain Node while core's dist
+    // does not exist yet, where a top-level import would fail to resolve.
+    const { logger } = await import('storybook/internal/node-logger');
     // Some runtimes (e.g. Jest's sandbox) forbid module hooks; importing may still succeed without them.
     logger.debug(`Storybook's TypeScript loader hooks could not be registered: ${error}`);
   });
@@ -116,6 +118,11 @@ export async function importModule(
         in Node 20 requireError will always be "Error [ERR_REQUIRE_CYCLE_MODULE]: Cannot require() ES Module"
         in Node 22 requireError will always be "Error [ERR_INTERNAL_ASSERTION]: Unexpected module status 5. Cannot require() ES Module"
       */
+      // If hook registration failed earlier (e.g. a broken install), attach it as the cause so the
+      // real problem is visible behind the generic import error.
+      if (typescriptLoaderRegistrationError && importError instanceof Error) {
+        importError.cause = typescriptLoaderRegistrationError;
+      }
       throw importError;
     }
   }

From a625f8f91fa13052ae0a9519c7126bf2b5d28233 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Mon, 19 Oct 2026 13:57:31 +0200
Subject: [PATCH 175/326] Document release-day package manager gates and a
 Remix 3 setup

pnpm 11 and Yarn 4.15 wait about a day before they will install a brand-new release, and Yarn 6 is still a release candidate. Remix 3 has no framework package yet, so the note shows the HTML Vite init that works today. The Rsbuild builder link now points at rstackjs/storybook-rsbuild.
---
 docs/builders/index.mdx                   |  2 +-
 docs/configure/integration/frameworks.mdx | 32 ++++++++++++
 docs/get-started/install.mdx              | 59 ++++++++++++++++++++++-
 3 files changed, 91 insertions(+), 2 deletions(-)

diff --git a/docs/builders/index.mdx b/docs/builders/index.mdx
index 4322a3482bd2..6dfbfb896463 100644
--- a/docs/builders/index.mdx
+++ b/docs/builders/index.mdx
@@ -25,4 +25,4 @@ Storybook uses the Webpack 5 builder by default if you don't specify one. If you
 
 - [**Vite builder**](./vite.mdx) for bundling your stories with Vite with near-instant HMR.
 - [**Webpack**](./webpack.mdx) for bundling your stories with Webpack with improved performance
-- [**Rspack / Rsbuild**](https://github.com/rspack-contrib/storybook-rsbuild) for bundling your stories with blazing fast Rspack and Rsbuild.
+- [**Rspack / Rsbuild**](https://github.com/rstackjs/storybook-rsbuild) for bundling your stories with blazing fast Rspack and Rsbuild.
diff --git a/docs/configure/integration/frameworks.mdx b/docs/configure/integration/frameworks.mdx
index 0cefe973d681..0c208d5373cb 100644
--- a/docs/configure/integration/frameworks.mdx
+++ b/docs/configure/integration/frameworks.mdx
@@ -24,6 +24,38 @@ Storybook provides support for the leading industry builders and frameworks. How
 
 In addition to supporting the most popular frameworks in the industry, Storybook also tries to retain the same level of feature support for each framework, including the addon ecosystem. For more information, see [Framework support](./frameworks-feature-support.mdx) for a comprehensive list of which features and addons are currently maintained with the community's help.
 
+### Remix 3
+
+There is no `@storybook/remix` package, and `storybook init` does not detect Remix 3 yet. In a Remix 3 project, initialize the HTML renderer with the Vite builder:
+
+```bash
+storybook init --type html --builder vite
+```
+
+A story renders a Remix component by creating a DOM node, mounting into it with `createRoot` from `remix/component`, and returning that node:
+
+```tsx
+import { createRoot } from 'remix/component';
+
+import { Counter } from './Counter';
+
+export default {
+  component: Counter,
+};
+
+export const Default = {
+  render: (args) => {
+    const div = document.createElement('div');
+    createRoot(div).render(<Counter {...args} />);
+    return div;
+  },
+};
+```
+
+Vite picks up `jsxImportSource` from `tsconfig.json`. When that option is already `"remix/component"`, the JSX in the story compiles against Remix.
+
+This was tried with Storybook 11.0.0-alpha.6, `@storybook/html-vite`, Vite 7, and `remix@3.0.0`. `storybook build` completed. Controls, play functions, and the Vitest addon were not part of that run.
+
 ## Configure
 
 Every modern web application has unique requirements and relies on various tools and frameworks. By default, with Storybook, you get an out-of-the-box configuration generated to work with most frameworks. However, you can extend your existing configuration file (i.e., `./storybook/main.js|ts|cjs`) and provide additional options. Below is an abridged table with available options and examples of configuring Storybook for your framework.
diff --git a/docs/get-started/install.mdx b/docs/get-started/install.mdx
index cd93584097bf..179c94f4fff8 100644
--- a/docs/get-started/install.mdx
+++ b/docs/get-started/install.mdx
@@ -48,10 +48,12 @@ Storybook is designed to work with a variety of frameworks and environments. If
 - Vitest 3+
 - Vue 3+
 - Webpack 5+
-- Yarn 4+
+- Yarn 4
 
 </div>
 
+Yarn 4 is the release we test with. Yarn 6 is a rewrite in Rust, and it is still a release candidate. The `latest` release of Yarn is still 4. You can try Storybook on Yarn 6. Until Yarn 6 is stable, support for it is best effort.
+
 Additionally, the Storybook app supports the following browsers:
 
 - Chrome 147+
@@ -68,6 +70,61 @@ You can also develop or build your Storybook in ["preview-only" mode](../sharing
 
 </details>
 
+## Package manager release delays
+
+[pnpm 11](https://pnpm.io/settings#minimumreleaseage) and later, and [Yarn 4.15](https://yarnpkg.com/configuration/yarnrc#npmMinimalAgeGate) and later, wait about a day before they will install a version that was just published. The wait is a supply-chain precaution, because a bad release is often removed from the registry inside that window. On the day a new Storybook version is published, `storybook@latest` can still resolve to 10.x with Yarn, or to the last Storybook 11 release candidate with pnpm, until the new version is old enough.
+
+You can exempt Storybook from the wait. Each list below includes `create-storybook`, the package behind `create storybook`, along with `storybook` itself.
+
+### pnpm
+
+In pnpm 11 and 12, `minimumReleaseAge` defaults to 1440 minutes (one day). Add an exemption in `pnpm-workspace.yaml` with [`minimumReleaseAgeExclude`](https://pnpm.io/settings#minimumreleaseageexclude). Patterns are allowed, so `@storybook/*` covers the scoped packages:
+
+```yaml
+minimumReleaseAgeExclude:
+  - storybook
+  - create-storybook
+  - '@storybook/*'
+```
+
+To run a single upgrade without editing that file, set the age to zero for one command. pnpm reads `pnpm_config_minimum_release_age` as the `minimumReleaseAge` setting:
+
+```bash
+pnpm_config_minimum_release_age=0 pnpm dlx storybook@latest upgrade
+```
+
+### Yarn
+
+Yarn 4.15 changed the default of `npmMinimalAgeGate` to `1d` for new projects. When you upgrade Yarn inside an existing project, Yarn writes the previous default into `.yarnrc.yml`, so that project keeps the old behavior until you change the setting. To let a new Storybook release through, list it under [`npmPreapprovedPackages`](https://yarnpkg.com/configuration/yarnrc#npmPreapprovedPackages) in `.yarnrc.yml`. Entries can be package names or glob patterns:
+
+```yaml
+npmPreapprovedPackages:
+  - storybook
+  - create-storybook
+  - '@storybook/*'
+```
+
+`yarn add` and `yarn up` also accept `--no-time-gate`, which skips the check for that one command. `yarn create` and `yarn dlx` do not have this flag.
+
+### npm
+
+npm does not wait unless you opt in with [`min-release-age`](https://docs.npmjs.com/cli/v11/using-npm/config#min-release-age). If you have turned that on, [`min-release-age-exclude`](https://docs.npmjs.com/cli/v11/using-npm/config#min-release-age-exclude) in an `.npmrc` file is how you let specific packages update immediately. Each entry is a package name or a minimatch pattern:
+
+```text
+min-release-age-exclude[]=storybook
+min-release-age-exclude[]=create-storybook
+min-release-age-exclude[]=@storybook/*
+```
+
+### Bun
+
+Bun leaves this wait off unless you set [`minimumReleaseAge`](https://bun.com/docs/pm/cli/install#minimum-release-age). If you have set it, exempt packages with `minimumReleaseAgeExcludes` under `[install]` in `bunfig.toml`. An entry is a package name, or one exact version of a package. Bun's docs do not describe glob patterns for this setting, so list `@storybook` packages by name if you need them exempted too:
+
+```toml
+[install]
+minimumReleaseAgeExcludes = ["storybook", "create-storybook"]
+```
+
 ## Installation
 
 Run this command inside your project's root directory to install the latest version of Storybook:

From d944721bcc0f9992004c64d4c018c89ac30409e7 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Mon, 19 Oct 2026 14:15:31 +0200
Subject: [PATCH 176/326] fix(svelte): let stories of a runes component without
 props omit args

svelte-check types a runes component without `$props()` as
`Component<Record<string, never>>`, so every arg had to be `never`.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 code/renderers/svelte/src/__test__/Counter.svelte |  5 +++++
 code/renderers/svelte/src/csf-factories.test.ts   | 13 +++++++++++++
 code/renderers/svelte/src/preview.ts              |  5 ++++-
 3 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 code/renderers/svelte/src/__test__/Counter.svelte

diff --git a/code/renderers/svelte/src/__test__/Counter.svelte b/code/renderers/svelte/src/__test__/Counter.svelte
new file mode 100644
index 000000000000..6128a69d0a0c
--- /dev/null
+++ b/code/renderers/svelte/src/__test__/Counter.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+  let count = $state(0);
+</script>
+
+<button onclick={() => count++}>{count}</button>
diff --git a/code/renderers/svelte/src/csf-factories.test.ts b/code/renderers/svelte/src/csf-factories.test.ts
index 98a75a384ba7..8e5232f1afcd 100644
--- a/code/renderers/svelte/src/csf-factories.test.ts
+++ b/code/renderers/svelte/src/csf-factories.test.ts
@@ -7,6 +7,7 @@ import type { Component, ComponentProps, Snippet } from 'svelte';
 import { fn, mocked } from 'storybook/test';
 
 import Button from './__test__/Button.svelte';
+import Counter from './__test__/Counter.svelte';
 import Decorator2 from './__test__/Decorator2.svelte';
 import Decorator1 from './__test__/Decorator.svelte';
 import Divider from './__test__/Divider.svelte';
@@ -221,6 +222,18 @@ describe('Svelte components', () => {
     const Default = meta.story();
   });
 
+  it('a runes component without props needs no args', () => {
+    const meta = preview.meta({ component: Counter });
+    const Default = meta.story();
+  });
+
+  it('a runes component without props takes the args of meta.type<>()', () => {
+    const meta = preview.meta({ component: Counter }).type<{ args: { theme: string } }>();
+    // @ts-expect-error theme is required
+    const Default = meta.story();
+    const Dark = meta.story({ args: { theme: 'dark' } });
+  });
+
   it('mount accepts a component and its props', () => {
     const Basic: StoryObj<typeof Button> = {
       async play({ mount }) {
diff --git a/code/renderers/svelte/src/preview.ts b/code/renderers/svelte/src/preview.ts
index 32a90195d489..d50b1e360813 100644
--- a/code/renderers/svelte/src/preview.ts
+++ b/code/renderers/svelte/src/preview.ts
@@ -52,11 +52,14 @@ export function __definePreview<Addons extends PreviewAddonEntry[]>(
 }
 
 // A component typed as `any` or by the `*.svelte` shim has no known props, so it takes any args.
+// svelte-check types a runes component without `$props()` as `Component<Record<string, never>>`.
 type InferComponentArgs<C> =
   C extends Component<any, any, any>
     ? [keyof ComponentProps<C>] extends [never]
       ? Args
-      : ComponentProps<C>
+      : ComponentProps<C> extends Record<string, never>
+        ? {}
+        : ComponentProps<C>
     : Args;
 
 /**

From 5bf7eb97b3cfe8f9a3c2d19025a9b21fc05b807a Mon Sep 17 00:00:00 2001
From: Obvious <obvious@obvious.ai>
Date: Mon, 19 Oct 2026 12:15:54 +0000
Subject: [PATCH 177/326] fix(builder-vite): let viteConfigPath: null disable
 config loading

Maintainer decision on the discovery-miss warning thread: setting the
viteConfigPath builder option explicitly to null now skips loading any
user Vite config file and silences the warning, for projects that
intentionally keep their Vite config unloaded. The warning text mentions
the opt-out so the message itself answers how to stop it.

Also keep the discovery search bounded when the Storybook config dir
sits outside the project root: there the ancestor search would run to
the filesystem root and can name unrelated configs, so stay quiet.
---
 code/builders/builder-vite/src/types.ts       |  9 ++++--
 .../builder-vite/src/vite-config.test.ts      | 30 +++++++++++++++++++
 code/builders/builder-vite/src/vite-config.ts | 21 +++++++++++--
 3 files changed, 55 insertions(+), 5 deletions(-)

diff --git a/code/builders/builder-vite/src/types.ts b/code/builders/builder-vite/src/types.ts
index 7bf4f0847fbe..0e3fb70204be 100644
--- a/code/builders/builder-vite/src/types.ts
+++ b/code/builders/builder-vite/src/types.ts
@@ -19,8 +19,13 @@ export type StorybookConfigVite = {
 };
 
 export type BuilderOptions = {
-  /** Path to `vite.config` file, relative to `process.cwd()`. */
-  viteConfigPath?: string;
+  /**
+   * Path to `vite.config` file, relative to `process.cwd()`.
+   *
+   * Set to `null` to not load any Vite config file. Use this to keep a config file that
+   * Storybook's auto-discovery does not see unloaded, and to silence the matching warning.
+   */
+  viteConfigPath?: string | null;
   /**
    * How Vite loads the config file. Equivalent to Vite's `--configLoader` CLI flag and the
    * `configLoader` option of `loadConfigFromFile`.
diff --git a/code/builders/builder-vite/src/vite-config.test.ts b/code/builders/builder-vite/src/vite-config.test.ts
index 9b54b33b2d73..88c09db09d87 100644
--- a/code/builders/builder-vite/src/vite-config.test.ts
+++ b/code/builders/builder-vite/src/vite-config.test.ts
@@ -226,6 +226,7 @@ describe('discovery miss reporting', () => {
     expect(loggerWarnMock.mock.calls[0][0]).toContain(
       "core: { builder: { options: { viteConfigPath: '/project/vite.config.mjs' } } }"
     );
+    expect(loggerWarnMock.mock.calls[0][0]).toContain('viteConfigPath: null');
   });
 
   it('stays quiet when no Vite config exists in the project at all', async () => {
@@ -262,4 +263,33 @@ describe('discovery miss reporting', () => {
     expect(vi.mocked(find.any)).not.toHaveBeenCalled();
     expect(loggerWarnMock).not.toHaveBeenCalled();
   });
+
+  it('loads nothing and stays quiet when viteConfigPath is explicitly null', async () => {
+    loadConfigFromFileMock.mockResolvedValueOnce(null);
+
+    await commonConfig(
+      {
+        ...dummyOptions,
+        configDir: '/project/.storybook',
+        presets: presetsWith({ viteConfigPath: null }),
+      },
+      'development'
+    );
+
+    expect(loadConfigFromFileMock).not.toHaveBeenCalled();
+    expect(vi.mocked(find.any)).not.toHaveBeenCalled();
+    expect(loggerWarnMock).not.toHaveBeenCalled();
+  });
+
+  it('stays quiet when the config dir sits outside the project root', async () => {
+    // The search is bounded by `last: getProjectRoot()`; when the config dir's parent is not
+    // inside the project root the search would run to the filesystem root, so no warning is made.
+    vi.mocked(getProjectRoot).mockReturnValue('/workspace');
+    loadConfigFromFileMock.mockResolvedValueOnce(null);
+
+    await commonConfig({ ...dummyOptions, configDir: '/project/.storybook' }, 'development');
+
+    expect(vi.mocked(find.any)).not.toHaveBeenCalled();
+    expect(loggerWarnMock).not.toHaveBeenCalled();
+  });
 });
diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts
index f59178025e8d..729e0820a964 100644
--- a/code/builders/builder-vite/src/vite-config.ts
+++ b/code/builders/builder-vite/src/vite-config.ts
@@ -1,5 +1,5 @@
 import { existsSync } from 'node:fs';
-import { resolve } from 'node:path';
+import { relative, resolve } from 'node:path';
 
 import {
   getBuilderOptions,
@@ -55,9 +55,18 @@ const warnOnce = once('warn');
 
 // loadConfigFromFile returns null without logging when discovery misses.
 function reportUnloadedUserViteConfig(configDir: string, projectRoot: string): void {
+  const root = getProjectRoot();
+
+  // `last` bounds the search only when the config dir's parent lies inside the project root.
+  // Outside layouts (e.g. `storybook dev -c ../shared/.storybook`) would search to the filesystem
+  // root and can name unrelated configs, so stay quiet there.
+  if (relative(root, projectRoot).startsWith('..')) {
+    return;
+  }
+
   const unloadedConfig = find.any(DEFAULT_VITE_CONFIG_FILES, {
     cwd: projectRoot,
-    last: getProjectRoot(),
+    last: root,
   });
 
   if (!unloadedConfig) {
@@ -69,6 +78,7 @@ function reportUnloadedUserViteConfig(configDir: string, projectRoot: string): v
       No user Vite config was loaded: Storybook auto-discovers a Vite config file in "${projectRoot}" (the directory above your Storybook config dir "${configDir}"), and none was found there.
       A Vite config was found at "${unloadedConfig}", but it is outside of that directory and was not loaded.
       To load it, point the "viteConfigPath" builder option at it, e.g. core: { builder: { options: { viteConfigPath: '${unloadedConfig}' } } }.
+      To keep it unloaded and silence this warning, set "viteConfigPath" to null, e.g. core: { builder: { options: { viteConfigPath: null } } }.
       See: https://storybook.js.org/docs/builders/vite#override-the-default-configuration
     `
   );
@@ -80,6 +90,11 @@ async function loadUserViteConfig(options: Options, type: PluginConfigType): Pro
   const { viteConfigPath, configLoader } = await getBuilderOptions<BuilderOptions>(options);
   const projectRoot = resolve(options.configDir, '..');
 
+  // Explicit `null` opts out: keep the user's Vite config unloaded and stay quiet.
+  if (viteConfigPath === null) {
+    return {};
+  }
+
   const loaded = await loadConfigFromFile(
     configEnv,
     viteConfigPath,
@@ -90,7 +105,7 @@ async function loadUserViteConfig(options: Options, type: PluginConfigType): Pro
   );
 
   // An explicit `viteConfigPath` is the user's responsibility; Vite errors on it itself.
-  if (!loaded && !viteConfigPath) {
+  if (!loaded && viteConfigPath === undefined) {
     reportUnloadedUserViteConfig(options.configDir, projectRoot);
   }
 

From ce3236f81792926532cad47c5b14a6e883b28bd5 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Mon, 19 Oct 2026 14:21:30 +0200
Subject: [PATCH 178/326] fix(svelte): accept preview.meta().type<>() and an
 exported meta in Svelte CSF files

Both type-check, but Vite and Vitest threw 0004 for them, and the indexer
dropped the file without an error. The indexer now throws 0004 too when a
file imports a meta function but doesn't store its result.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../svelte/src/svelte-csf/indexer/parser.ts       |  4 ++++
 .../parser/extract/svelte/define-meta.ts          |  3 ++-
 .../svelte/src/svelte-csf/utils/import-source.ts  | 15 +++++++++------
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/code/renderers/svelte/src/svelte-csf/indexer/parser.ts b/code/renderers/svelte/src/svelte-csf/indexer/parser.ts
index f80f8bc05f8e..02167f013da9 100644
--- a/code/renderers/svelte/src/svelte-csf/indexer/parser.ts
+++ b/code/renderers/svelte/src/svelte-csf/indexer/parser.ts
@@ -15,6 +15,7 @@ import {
   DefaultOrNamespaceImportUsedError,
   GetDefineMetaFirstArgumentError,
   MissingDefineMetaImportError,
+  MissingDefineMetaVariableDeclarationError,
   MissingModuleTagError,
   NoStoryComponentDestructuredError,
 } from '../utils/error/parser/extract/svelte.ts';
@@ -101,6 +102,9 @@ export async function parseForIndexer(filename: string): Promise<Results> {
       hasDefaultOrNamespaceImport = imports.hasDefaultOrNamespaceImport;
 
       if (!meta) {
+        if (state.hasMetaImport) {
+          throw new MissingDefineMetaVariableDeclarationError(filename);
+        }
         return;
       }
 
diff --git a/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/define-meta.ts b/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/define-meta.ts
index ce70a8297a9a..40e27541860b 100644
--- a/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/define-meta.ts
+++ b/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/define-meta.ts
@@ -1,6 +1,7 @@
 import type { ESTreeAST } from '../../ast.ts';
 import type { SvelteASTNodes } from './nodes.ts';
 import { isOneOf } from '../../../utils/is-one-of.ts';
+import { skipTypeCalls } from '../../../utils/import-source.ts';
 import type { CompiledASTNodes } from '../compiled/nodes.ts';
 
 import { GetDefineMetaFirstArgumentError } from '../../../utils/error/parser/extract/svelte.ts';
@@ -52,7 +53,7 @@ export function getDefineMetaFirstArgumentObjectExpression(
   const { defineMetaVariableDeclaration } = nodes;
   const { declarations } = defineMetaVariableDeclaration;
   const declaration = declarations[0];
-  const { init } = declaration;
+  const init = declaration.init && skipTypeCalls(declaration.init);
 
   if (
     init?.type === 'CallExpression' &&
diff --git a/code/renderers/svelte/src/svelte-csf/utils/import-source.ts b/code/renderers/svelte/src/svelte-csf/utils/import-source.ts
index 18bb577144c2..898950a7aa1e 100644
--- a/code/renderers/svelte/src/svelte-csf/utils/import-source.ts
+++ b/code/renderers/svelte/src/svelte-csf/utils/import-source.ts
@@ -57,8 +57,8 @@ export function hasMetaImport(imports: MetaImports): boolean {
   return !!imports.defineMetaImport || imports.previewNames.length > 0;
 }
 
-// `const { Story } = defineMeta({ … })`, `const { Story } = preview.meta({ … })`, or
-// `const meta = preview.meta({ … })` followed by `const { Story } = meta` and
+// `const { Story } = defineMeta({ … })`, `const { Story } = preview.meta({ … }).type<…>()`, or
+// `export const meta = preview.meta({ … })` followed by `const { Story } = meta` and
 // `const { Story: IconStory } = meta.type<…>()`
 export interface MetaNodes {
   // `preview.meta()` creates a CSF factories meta
@@ -80,12 +80,15 @@ export function findMeta(
 ): MetaNodes | undefined {
   let meta: MetaNodes | undefined;
 
-  for (const statement of body) {
-    if (statement.type !== 'VariableDeclaration') {
+  for (const node of body) {
+    const statement = node.type === 'ExportNamedDeclaration' ? node.declaration : node;
+
+    if (statement?.type !== 'VariableDeclaration') {
       continue;
     }
 
-    const { id, init } = statement.declarations[0];
+    const { id, init: initWithTypeCalls } = statement.declarations[0];
+    const init = initWithTypeCalls && skipTypeCalls(initWithTypeCalls);
     const functionName =
       init?.type === 'CallExpression' ? getMetaFunctionName(init, imports, filename) : undefined;
 
@@ -168,7 +171,7 @@ function getMetaFunctionName(
 
 // `preview.type<…>()` and `meta.type<…>()` return the same preview or meta with more types, so
 // `preview.type<…>().meta()` is a meta of `preview`, and `meta.type<…>()` is `meta`
-function skipTypeCalls(expression: ESTreeAST.Expression | ESTreeAST.Super) {
+export function skipTypeCalls(expression: ESTreeAST.Expression | ESTreeAST.Super) {
   let current = expression;
 
   while (

From 310c68a09e289055687901ada965c337362757c8 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Mon, 19 Oct 2026 14:21:34 +0200
Subject: [PATCH 179/326] test: the test cases for preview.meta().type<>() and
 an exported meta

- Compiler: the compiled module of each form.
- Indexer: the index entries of each form, and 0004 when the result of
  preview.meta() isn't stored. A file that imports defineMeta without
  calling it now throws 0004 in the indexer, as it does in Vite.
- Runtime: a stories file of each form renders and runs its play function.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../exported-meta.stories.svelte              |  17 +++
 .../svelte-csf-factories.test.ts              |  11 +-
 .../type-after-meta.stories.svelte            |  23 +++
 .../compiler/post-transform/index.test.ts     | 132 ++++++++++++++++++
 .../src/svelte-csf/indexer/parser.test.ts     |  28 +++-
 5 files changed, 209 insertions(+), 2 deletions(-)
 create mode 100644 code/renderers/svelte/src/__test__/svelte-csf-factories/exported-meta.stories.svelte
 create mode 100644 code/renderers/svelte/src/__test__/svelte-csf-factories/type-after-meta.stories.svelte

diff --git a/code/renderers/svelte/src/__test__/svelte-csf-factories/exported-meta.stories.svelte b/code/renderers/svelte/src/__test__/svelte-csf-factories/exported-meta.stories.svelte
new file mode 100644
index 000000000000..5b1e7573160f
--- /dev/null
+++ b/code/renderers/svelte/src/__test__/svelte-csf-factories/exported-meta.stories.svelte
@@ -0,0 +1,17 @@
+<script module lang="ts">
+  import { expect } from 'storybook/test';
+
+  import preview from './preview.ts';
+  import Button from '../Button.svelte';
+
+  export const meta = preview.meta({ component: Button, args: { disabled: false } });
+  const { Story } = meta;
+</script>
+
+<Story
+  name="Primary"
+  args={{ label: 'Primary' }}
+  play={async ({ canvas }) => {
+    await expect(canvas.getByRole('button')).toHaveTextContent('Primary');
+  }}
+/>
diff --git a/code/renderers/svelte/src/__test__/svelte-csf-factories/svelte-csf-factories.test.ts b/code/renderers/svelte/src/__test__/svelte-csf-factories/svelte-csf-factories.test.ts
index c727198f57d4..397aadc0873b 100644
--- a/code/renderers/svelte/src/__test__/svelte-csf-factories/svelte-csf-factories.test.ts
+++ b/code/renderers/svelte/src/__test__/svelte-csf-factories/svelte-csf-factories.test.ts
@@ -5,15 +5,24 @@ import { isStory } from 'storybook/internal/csf';
 
 import { composeStories } from '../../portable-stories.ts';
 import * as ButtonStories from './button.stories.svelte';
+import * as ExportedMetaStories from './exported-meta.stories.svelte';
 import * as InteractionsStories from './interactions.stories.svelte';
 import * as MetaTypeStories from './meta-type.stories.svelte';
 import * as TemplatingStories from './templating.stories.svelte';
+import * as TypeAfterMetaStories from './type-after-meta.stories.svelte';
 
 afterEach(() => {
   cleanup();
 });
 
-const files = { ButtonStories, InteractionsStories, MetaTypeStories, TemplatingStories };
+const files = {
+  ButtonStories,
+  ExportedMetaStories,
+  InteractionsStories,
+  MetaTypeStories,
+  TemplatingStories,
+  TypeAfterMetaStories,
+};
 
 describe.each(Object.entries(files))('%s', (_name, file) => {
   const stories = Object.entries(file).filter(([, story]) => isStory(story));
diff --git a/code/renderers/svelte/src/__test__/svelte-csf-factories/type-after-meta.stories.svelte b/code/renderers/svelte/src/__test__/svelte-csf-factories/type-after-meta.stories.svelte
new file mode 100644
index 000000000000..dbe254f39b1a
--- /dev/null
+++ b/code/renderers/svelte/src/__test__/svelte-csf-factories/type-after-meta.stories.svelte
@@ -0,0 +1,23 @@
+<script module lang="ts">
+  import { expect } from 'storybook/test';
+
+  import preview from './preview.ts';
+  import Button from '../Button.svelte';
+
+  // `icon` isn't a prop of the button: the template renders it as the label.
+  const { Story } = preview
+    .meta({ component: Button, args: { disabled: false } })
+    .type<{ args: { icon: string } }>();
+</script>
+
+<Story
+  name="Icon"
+  args={{ label: 'Icon', icon: '★' }}
+  play={async ({ canvas }) => {
+    await expect(canvas.getByRole('button')).toHaveTextContent('★');
+  }}
+>
+  {#snippet template({ icon, ...args })}
+    <Button {...args} label={icon} />
+  {/snippet}
+</Story>
diff --git a/code/renderers/svelte/src/svelte-csf/compiler/post-transform/index.test.ts b/code/renderers/svelte/src/svelte-csf/compiler/post-transform/index.test.ts
index 55ca23424704..14a7e831ee38 100644
--- a/code/renderers/svelte/src/svelte-csf/compiler/post-transform/index.test.ts
+++ b/code/renderers/svelte/src/svelte-csf/compiler/post-transform/index.test.ts
@@ -539,6 +539,138 @@ describe('CSF factories', () => {
     `);
   });
 
+  it('names the meta from preview.meta().type<>()', async ({ expect }) => {
+    const output = await transform(dedent`
+      <script module lang="ts">
+        import preview from '#.storybook/preview';
+        import Button from './Button.svelte';
+
+        const { Story } = preview.meta({ component: Button }).type<{ args: { theme: string } }>();
+      </script>
+
+      <Story name="Primary" args={{ label: 'Primary', theme: 'dark' }} />
+    `);
+
+    expect(output).toMatchInlineSnapshot(`
+      "import 'svelte/internal/disclose-version';
+      import 'svelte/internal/flags/legacy';
+
+      Button_stories[$.FILENAME] = 'Button.stories.svelte';
+
+      import preview from '#.storybook/preview';
+      import Button from './Button.svelte';
+      import * as $ from 'svelte/internal/client';
+
+      const $__meta = preview.meta({ component: Button }).type();
+      const { Story } = $__meta;
+
+      function Button_stories($$anchor, $$props) {
+      	$.check_target(new.target);
+      	$.push($$props, false, Button_stories);
+
+      	var $$exports = { ...$.legacy_api() };
+
+      	$.init();
+
+      	$.add_svelte_meta(
+      		() => Story($$anchor, {
+      			name: 'Primary',
+      			args: { label: 'Primary', theme: 'dark' },
+      			parameters: {
+      				__svelteCsf: { rawCode: "<Button {...args} />" }
+      			}
+      		}),
+      		'component',
+      		Button_stories,
+      		8,
+      		0,
+      		{ componentTag: 'Story' }
+      	);
+
+      	return $.pop($$exports);
+      }
+      import { createRuntimeStories } from "@storybook/svelte/internal/svelte-csf/create-runtime-stories";
+
+      const $__stories = createRuntimeStories(Button_stories, $__meta.input);
+
+      export const __namedExportsOrder = ["Primary"];
+
+      const $__Primary = $__meta.story({
+      	...$__stories["Primary"],
+      	tags: ["svelte-csf-v5"]
+      });
+
+      export { $__Primary as Primary };"
+    `);
+  });
+
+  it('keeps the export of an exported meta', async ({ expect }) => {
+    const output = await transform(dedent`
+      <script module>
+        import preview from '#.storybook/preview';
+        import Button from './Button.svelte';
+
+        export const meta = preview.meta({ component: Button });
+        const { Story } = meta;
+      </script>
+
+      <Story name="Primary" args={{ label: 'Primary' }} />
+    `);
+
+    expect(output).toMatchInlineSnapshot(`
+      "import 'svelte/internal/disclose-version';
+      import 'svelte/internal/flags/legacy';
+
+      Button_stories[$.FILENAME] = 'Button.stories.svelte';
+
+      import preview from '#.storybook/preview';
+      import Button from './Button.svelte';
+      import * as $ from 'svelte/internal/client';
+
+      export const meta = preview.meta({ component: Button });
+
+      const { Story } = meta;
+
+      function Button_stories($$anchor, $$props) {
+      	$.check_target(new.target);
+      	$.push($$props, false, Button_stories);
+
+      	var $$exports = { ...$.legacy_api() };
+
+      	$.init();
+
+      	$.add_svelte_meta(
+      		() => Story($$anchor, {
+      			name: 'Primary',
+      			args: { label: 'Primary' },
+      			parameters: {
+      				__svelteCsf: { rawCode: "<Button {...args} />" }
+      			}
+      		}),
+      		'component',
+      		Button_stories,
+      		9,
+      		0,
+      		{ componentTag: 'Story' }
+      	);
+
+      	return $.pop($$exports);
+      }
+      import { createRuntimeStories } from "@storybook/svelte/internal/svelte-csf/create-runtime-stories";
+
+      const $__stories = createRuntimeStories(Button_stories, meta.input);
+
+      export const __namedExportsOrder = ["Primary"];
+
+      const $__Primary = meta.story({
+      	...$__stories["Primary"],
+      	tags: ["svelte-csf-v5"]
+      });
+
+      export { $__Primary as Primary };"
+    `);
+  });
+
   it('creates the stories of the Story components from meta.type<>()', async ({ expect }) => {
     const output = await transform(dedent`
       <script module lang="ts">
diff --git a/code/renderers/svelte/src/svelte-csf/indexer/parser.test.ts b/code/renderers/svelte/src/svelte-csf/indexer/parser.test.ts
index 3d589f2027b4..09895623f87c 100644
--- a/code/renderers/svelte/src/svelte-csf/indexer/parser.test.ts
+++ b/code/renderers/svelte/src/svelte-csf/indexer/parser.test.ts
@@ -151,7 +151,9 @@ describe('parseForIndexer', () => {
         import { defineMeta } from '@storybook/svelte';
       `);
 
-      await expect(parseForIndexer(file)).resolves.toBeDefined();
+      await expect(parseForIndexer(file)).rejects.toThrow(
+        'SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0004'
+      );
     });
 
     it('fails without a named defineMeta import', async ({ expect }) => {
@@ -215,6 +217,19 @@ describe('parseForIndexer', () => {
           .type<{ args: { theme: string } }>()
           .meta({ title: 'Example', tags: ['meta-tag'] });`,
       ],
+      [
+        'preview.meta().type<>()',
+        `import preview from '#.storybook/preview';
+        const { Story } = preview
+          .meta({ title: 'Example', tags: ['meta-tag'] })
+          .type<{ args: { theme: string } }>();`,
+      ],
+      [
+        'an exported meta variable',
+        `import preview from '#.storybook/preview';
+        export const meta = preview.meta({ title: 'Example', tags: ['meta-tag'] });
+        const { Story } = meta;`,
+      ],
     ])('indexes %s', async ([, moduleScript], { expect }) => {
       const file = await writeFactoryStoriesFile(moduleScript);
 
@@ -330,6 +345,17 @@ describe('parseForIndexer', () => {
       );
     });
 
+    it('fails when the result of preview.meta() is not stored', async ({ expect }) => {
+      const file = await writeFactoryStoriesFile(`
+        import preview from '#.storybook/preview';
+        preview.meta({ title: 'Example' });
+      `);
+
+      await expect(parseForIndexer(file)).rejects.toThrow(
+        'SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0004'
+      );
+    });
+
     it('fails when preview is not imported from a preview file', async ({ expect }) => {
       const file = await writeFactoryStoriesFile(`
         import preview from '../storybook-config';

From 87838d1807dec322a351ee367549beba13979fc2 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Mon, 19 Oct 2026 14:40:56 +0200
Subject: [PATCH 180/326] fix(svelte): reject an exported meta in Svelte CSF
 files

Core's CsfFile registers `export const meta = preview.meta()` as a story,
so the Vitest transform fails with "Missing exports after sort: meta".
React CSF4 files have the same problem. Until core skips an exported meta,
the Svelte parsers throw 0004 for it, in the indexer too.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../exported-meta.stories.svelte              | 17 -----
 .../svelte-csf-factories.test.ts              |  2 -
 .../compiler/post-transform/index.test.ts     | 67 -------------------
 .../src/svelte-csf/indexer/parser.test.ts     | 18 +++--
 .../src/svelte-csf/utils/import-source.ts     |  8 +--
 5 files changed, 15 insertions(+), 97 deletions(-)
 delete mode 100644 code/renderers/svelte/src/__test__/svelte-csf-factories/exported-meta.stories.svelte

diff --git a/code/renderers/svelte/src/__test__/svelte-csf-factories/exported-meta.stories.svelte b/code/renderers/svelte/src/__test__/svelte-csf-factories/exported-meta.stories.svelte
deleted file mode 100644
index 5b1e7573160f..000000000000
--- a/code/renderers/svelte/src/__test__/svelte-csf-factories/exported-meta.stories.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script module lang="ts">
-  import { expect } from 'storybook/test';
-
-  import preview from './preview.ts';
-  import Button from '../Button.svelte';
-
-  export const meta = preview.meta({ component: Button, args: { disabled: false } });
-  const { Story } = meta;
-</script>
-
-<Story
-  name="Primary"
-  args={{ label: 'Primary' }}
-  play={async ({ canvas }) => {
-    await expect(canvas.getByRole('button')).toHaveTextContent('Primary');
-  }}
-/>
diff --git a/code/renderers/svelte/src/__test__/svelte-csf-factories/svelte-csf-factories.test.ts b/code/renderers/svelte/src/__test__/svelte-csf-factories/svelte-csf-factories.test.ts
index 397aadc0873b..25c09b813b75 100644
--- a/code/renderers/svelte/src/__test__/svelte-csf-factories/svelte-csf-factories.test.ts
+++ b/code/renderers/svelte/src/__test__/svelte-csf-factories/svelte-csf-factories.test.ts
@@ -5,7 +5,6 @@ import { isStory } from 'storybook/internal/csf';
 
 import { composeStories } from '../../portable-stories.ts';
 import * as ButtonStories from './button.stories.svelte';
-import * as ExportedMetaStories from './exported-meta.stories.svelte';
 import * as InteractionsStories from './interactions.stories.svelte';
 import * as MetaTypeStories from './meta-type.stories.svelte';
 import * as TemplatingStories from './templating.stories.svelte';
@@ -17,7 +16,6 @@ afterEach(() => {
 
 const files = {
   ButtonStories,
-  ExportedMetaStories,
   InteractionsStories,
   MetaTypeStories,
   TemplatingStories,
diff --git a/code/renderers/svelte/src/svelte-csf/compiler/post-transform/index.test.ts b/code/renderers/svelte/src/svelte-csf/compiler/post-transform/index.test.ts
index 14a7e831ee38..8b53f2ec0a6c 100644
--- a/code/renderers/svelte/src/svelte-csf/compiler/post-transform/index.test.ts
+++ b/code/renderers/svelte/src/svelte-csf/compiler/post-transform/index.test.ts
@@ -604,73 +604,6 @@ describe('CSF factories', () => {
     `);
   });
 
-  it('keeps the export of an exported meta', async ({ expect }) => {
-    const output = await transform(dedent`
-      <script module>
-        import preview from '#.storybook/preview';
-        import Button from './Button.svelte';
-
-        export const meta = preview.meta({ component: Button });
-        const { Story } = meta;
-      </script>
-
-      <Story name="Primary" args={{ label: 'Primary' }} />
-    `);
-
-    expect(output).toMatchInlineSnapshot(`
-      "import 'svelte/internal/disclose-version';
-      import 'svelte/internal/flags/legacy';
-
-      Button_stories[$.FILENAME] = 'Button.stories.svelte';
-
-      import preview from '#.storybook/preview';
-      import Button from './Button.svelte';
-      import * as $ from 'svelte/internal/client';
-
-      export const meta = preview.meta({ component: Button });
-
-      const { Story } = meta;
-
-      function Button_stories($$anchor, $$props) {
-      	$.check_target(new.target);
-      	$.push($$props, false, Button_stories);
-
-      	var $$exports = { ...$.legacy_api() };
-
-      	$.init();
-
-      	$.add_svelte_meta(
-      		() => Story($$anchor, {
-      			name: 'Primary',
-      			args: { label: 'Primary' },
-      			parameters: {
-      				__svelteCsf: { rawCode: "<Button {...args} />" }
-      			}
-      		}),
-      		'component',
-      		Button_stories,
-      		9,
-      		0,
-      		{ componentTag: 'Story' }
-      	);
-
-      	return $.pop($$exports);
-      }
-      import { createRuntimeStories } from "@storybook/svelte/internal/svelte-csf/create-runtime-stories";
-
-      const $__stories = createRuntimeStories(Button_stories, meta.input);
-
-      export const __namedExportsOrder = ["Primary"];
-
-      const $__Primary = meta.story({
-      	...$__stories["Primary"],
-      	tags: ["svelte-csf-v5"]
-      });
-
-      export { $__Primary as Primary };"
-    `);
-  });
-
   it('creates the stories of the Story components from meta.type<>()', async ({ expect }) => {
     const output = await transform(dedent`
       <script module lang="ts">
diff --git a/code/renderers/svelte/src/svelte-csf/indexer/parser.test.ts b/code/renderers/svelte/src/svelte-csf/indexer/parser.test.ts
index 09895623f87c..faa8793cf64e 100644
--- a/code/renderers/svelte/src/svelte-csf/indexer/parser.test.ts
+++ b/code/renderers/svelte/src/svelte-csf/indexer/parser.test.ts
@@ -224,12 +224,6 @@ describe('parseForIndexer', () => {
           .meta({ title: 'Example', tags: ['meta-tag'] })
           .type<{ args: { theme: string } }>();`,
       ],
-      [
-        'an exported meta variable',
-        `import preview from '#.storybook/preview';
-        export const meta = preview.meta({ title: 'Example', tags: ['meta-tag'] });
-        const { Story } = meta;`,
-      ],
     ])('indexes %s', async ([, moduleScript], { expect }) => {
       const file = await writeFactoryStoriesFile(moduleScript);
 
@@ -356,6 +350,18 @@ describe('parseForIndexer', () => {
       );
     });
 
+    it('fails when the meta is exported', async ({ expect }) => {
+      const file = await writeFactoryStoriesFile(`
+        import preview from '#.storybook/preview';
+        export const meta = preview.meta({ title: 'Example' });
+        const { Story } = meta;
+      `);
+
+      await expect(parseForIndexer(file)).rejects.toThrow(
+        'SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0004'
+      );
+    });
+
     it('fails when preview is not imported from a preview file', async ({ expect }) => {
       const file = await writeFactoryStoriesFile(`
         import preview from '../storybook-config';
diff --git a/code/renderers/svelte/src/svelte-csf/utils/import-source.ts b/code/renderers/svelte/src/svelte-csf/utils/import-source.ts
index caa0d808c513..ae53c46806ec 100644
--- a/code/renderers/svelte/src/svelte-csf/utils/import-source.ts
+++ b/code/renderers/svelte/src/svelte-csf/utils/import-source.ts
@@ -58,7 +58,7 @@ export function hasMetaImport(imports: MetaImports): boolean {
 }
 
 // `const { Story } = defineMeta({ … })`, `const { Story } = preview.meta({ … }).type<…>()`, or
-// `export const meta = preview.meta({ … })` followed by `const { Story } = meta` and
+// `const meta = preview.meta({ … })` followed by `const { Story } = meta` and
 // `const { Story: IconStory } = meta.type<…>()`
 export interface MetaNodes {
   // `preview.meta()` creates a CSF factories meta
@@ -80,10 +80,8 @@ export function findMeta(
 ): MetaNodes | undefined {
   let meta: MetaNodes | undefined;
 
-  for (const node of body) {
-    const statement = node.type === 'ExportNamedDeclaration' ? node.declaration : node;
-
-    if (statement?.type !== 'VariableDeclaration') {
+  for (const statement of body) {
+    if (statement.type !== 'VariableDeclaration') {
       continue;
     }
 

From 1fd1736fccab114067bdec70f86b18033caabb09 Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <sidnioulz@gmail.com>
Date: Tue, 13 Oct 2026 12:20:56 +0200
Subject: [PATCH 181/326] Commit changes

---
 .../PNPMProxy.catalog.test.ts                 |  69 +++++++++++
 .../js-package-manager/PNPMProxy.test.ts      | 115 ++++++++++++++++++
 .../common/js-package-manager/PNPMProxy.ts    |  83 +++++++++++--
 .../components/upgrade/UpgradeBlock.tsx       |   4 +-
 .../src/commands/PreflightCheckCommand.ts     |   4 +-
 docs/_snippets/chromatic-storybook-add.md     |   2 +-
 .../create-command-custom-package-manager.md  |   2 +-
 .../create-command-custom-version.md          |   2 +-
 .../create-command-for-prior-major.md         |   2 +-
 .../create-command-manual-framework.md        |   2 +-
 docs/_snippets/create-command.md              |   2 +-
 ...ories-automigrate-with-config-directory.md |   4 +-
 docs/_snippets/csf-factories-automigrate.md   |   2 +-
 docs/_snippets/init-command-custom-version.md |   2 +-
 docs/_snippets/init-command.md                |   2 +-
 docs/_snippets/prompt-install-storybook.md    |   2 +-
 docs/_snippets/storybook-add-command.md       |   2 +-
 ...ybook-addon-compiler-babel-auto-install.md |   2 +-
 ...orybook-addon-compiler-swc-auto-install.md |   2 +-
 docs/_snippets/storybook-automigrate.md       |   2 +-
 .../storybook-coverage-addon-install.md       |   2 +-
 docs/_snippets/storybook-doctor.md            |   2 +-
 .../storybook-extract-specific-version.md     |   2 +-
 .../storybook-figma-addon-install.md          |   2 +-
 docs/_snippets/storybook-init-v7.md           |   2 +-
 .../_snippets/storybook-migrate-csf-2-to-3.md |   2 +-
 .../_snippets/storybook-migrate-mdx-to-csf.md |   2 +-
 .../storybook-migrate-stories-of-to-csf.md    |  14 +++
 docs/_snippets/storybook-remove-command.md    |   2 +-
 .../_snippets/storybook-upgrade-prerelease.md |   2 +-
 .../storybook-upgrade-to-prior-major.md       |   2 +-
 docs/_snippets/storybook-upgrade.md           |   2 +-
 docs/_snippets/svelte-csf-addon-install.md    |   2 +-
 .../upgrade-command-specific-version.md       |   2 +-
 docs/get-started/install.mdx                  |   8 +-
 docs/index.mdx                                |   2 +-
 36 files changed, 313 insertions(+), 44 deletions(-)
 create mode 100644 docs/_snippets/storybook-migrate-stories-of-to-csf.md

diff --git a/code/core/src/common/js-package-manager/PNPMProxy.catalog.test.ts b/code/core/src/common/js-package-manager/PNPMProxy.catalog.test.ts
index 2d96d6d8f72f..fd23130074c4 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.catalog.test.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.catalog.test.ts
@@ -1,14 +1,19 @@
 import { readFileSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
 
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
+import { logger } from 'storybook/internal/node-logger';
+
 import * as find from 'empathic/find';
 import { fs as memfs, vol } from 'memfs';
 
+import { executeCommandSync } from '../utils/command.ts';
 import { getProjectRoot } from '../utils/paths.ts';
 import { PNPMProxy } from './PNPMProxy.ts';
 
 vi.mock('node:fs', { spy: true });
+vi.mock('../utils/command.ts', { spy: true });
 vi.mock('empathic/find', { spy: true });
 vi.mock('../utils/paths.ts', { spy: true });
 vi.mock('storybook/internal/node-logger', () => ({
@@ -279,4 +284,68 @@ describe('PNPMProxy catalogs', () => {
       );
     });
   });
+
+  describe('allowStorybookBuildScripts (workspace reader with createIfMissing)', () => {
+    const allowBuildScripts = () => (pnpmProxy as any).allowStorybookBuildScripts();
+    const createdYaml = () =>
+      join(pnpmProxy.primaryPackageJson.operationDir, 'pnpm-workspace.yaml');
+
+    beforeEach(() => {
+      vi.mocked(executeCommandSync).mockReturnValue('11.0.0');
+    });
+
+    it('creates pnpm-workspace.yaml next to the package.json when no workspace file exists', () => {
+      vi.mocked(find.up).mockReturnValue(undefined);
+      vol.mkdirSync(pnpmProxy.primaryPackageJson.operationDir, { recursive: true });
+
+      allowBuildScripts();
+
+      expect(vol.toJSON()).toEqual({ [createdYaml()]: 'allowBuilds:\n  esbuild: true\n' });
+    });
+
+    it('edits the workspace file found up the tree instead of creating one next to package.json', () => {
+      vol.fromJSON({ [WORKSPACE_YAML]: '# ws\npackages:\n  - "packages/*"\n' });
+
+      allowBuildScripts();
+
+      expect(writtenYaml()).toBe(
+        '# ws\npackages:\n  - "packages/*"\nallowBuilds:\n  esbuild: true\n'
+      );
+      expect(vol.toJSON()[createdYaml()]).toBeUndefined();
+    });
+
+    it('does not create a workspace file for readers that only look up catalogs', async () => {
+      vi.spyOn(pnpmProxy, 'getAllDependencies').mockReturnValue({ vitest: 'catalog:' });
+      vi.mocked(find.up).mockReturnValue(undefined);
+
+      await expect(pnpmProxy.getDeclaredVersionSpecifier('vitest')).resolves.toBeNull();
+
+      expect(vol.toJSON()).toEqual({});
+      expect(writeFileSync).not.toHaveBeenCalled();
+    });
+
+    it('warns and writes nothing when the workspace file is malformed', () => {
+      vol.fromJSON({ [WORKSPACE_YAML]: 'allowBuilds: [\n' });
+
+      allowBuildScripts();
+
+      expect(writtenYaml()).toBe('allowBuilds: [\n');
+      expect(writeFileSync).not.toHaveBeenCalled();
+      expect(logger.warn).toHaveBeenCalledWith(
+        expect.stringContaining('Could not allow build scripts of esbuild')
+      );
+    });
+
+    it('warns instead of throwing when the workspace file cannot be written', () => {
+      vol.fromJSON({ [WORKSPACE_YAML]: 'packages:\n  - "packages/*"\n' });
+      vi.mocked(writeFileSync).mockImplementation(() => {
+        throw new Error('EACCES: permission denied');
+      });
+
+      expect(allowBuildScripts).not.toThrow();
+      expect(logger.warn).toHaveBeenCalledWith(
+        expect.stringContaining('failed to write to /root/pnpm-workspace.yaml')
+      );
+    });
+  });
 });
diff --git a/code/core/src/common/js-package-manager/PNPMProxy.test.ts b/code/core/src/common/js-package-manager/PNPMProxy.test.ts
index fe7c1b4b65b2..1a866b70bc71 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.test.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.test.ts
@@ -1,3 +1,7 @@
+import { existsSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { logger, prompt } from 'storybook/internal/node-logger';
@@ -44,14 +48,34 @@ const expectedMinimumReleaseAgeExcludePackages = [
 
 describe('PNPM Proxy', () => {
   let pnpmProxy: PNPMProxy;
+  /** Scratch dir standing in for the project, so `allowBuilds` writes never touch the repo. */
+  let projectDir: string;
+  let workspaceYamlPath: string;
+
+  const stubWorkspaceYaml = (proxy: PNPMProxy) => {
+    vi.spyOn(proxy as any, 'findWorkspaceYamlPath').mockImplementation(() =>
+      existsSync(workspaceYamlPath) ? workspaceYamlPath : undefined
+    );
+    vi.spyOn(proxy, 'primaryPackageJson', 'get').mockReturnValue({
+      operationDir: projectDir,
+      packageJson: { dependencies: {}, devDependencies: {}, peerDependencies: {} },
+    } as any);
+  };
 
   beforeEach(() => {
+    projectDir = mkdtempSync(join(tmpdir(), 'sb-pnpm-proxy-'));
+    workspaceYamlPath = join(projectDir, 'pnpm-workspace.yaml');
     mockPnpmVersion('11.18.0');
     pnpmProxy = new PNPMProxy();
+    stubWorkspaceYaml(pnpmProxy);
     JsPackageManager.clearLatestVersionCache();
     vi.spyOn(pnpmProxy, 'writePackageJson').mockImplementation(vi.fn());
   });
 
+  afterEach(() => {
+    rmSync(projectDir, { recursive: true, force: true });
+  });
+
   it('type should be pnpm', () => {
     expect(pnpmProxy.type).toEqual('pnpm');
   });
@@ -123,6 +147,97 @@ describe('PNPM Proxy', () => {
     });
   });
 
+  describe('allowBuilds for Storybook build scripts', () => {
+    const unmockSpinner = () => {
+      vi.mocked(prompt.executeTaskWithSpinner).mockImplementationOnce(async (fn: any) => {
+        await Promise.resolve(fn());
+      });
+    };
+
+    it('creates pnpm-workspace.yaml next to package.json, allowing esbuild, before `pnpm install`', async () => {
+      unmockSpinner();
+      const executeCommandSpy = mockedExecuteCommand.mockResolvedValue({ stdout: '' } as any);
+
+      await pnpmProxy.installDependencies();
+
+      expect(readFileSync(workspaceYamlPath, 'utf8')).toBe('allowBuilds:\n  esbuild: true\n');
+      expect(executeCommandSpy).toHaveBeenCalledWith(
+        expect.objectContaining({ command: 'pnpm', args: ['install'] })
+      );
+    });
+
+    it('also allows esbuild before `pnpm add`', async () => {
+      mockedExecuteCommand.mockResolvedValue({ stdout: '' } as any);
+
+      await pnpmProxy.addDependencies({ type: 'devDependencies' }, ['storybook']);
+
+      expect(readFileSync(workspaceYamlPath, 'utf8')).toBe('allowBuilds:\n  esbuild: true\n');
+    });
+
+    it('adds esbuild to an existing pnpm-workspace.yaml without disturbing its content', async () => {
+      writeFileSync(
+        workspaceYamlPath,
+        '# my workspace\npackages:\n  - "packages/*"\n\ncatalog:\n  react: ^19 # pinned\n'
+      );
+      unmockSpinner();
+      mockedExecuteCommand.mockResolvedValue({ stdout: '' } as any);
+
+      await pnpmProxy.installDependencies();
+
+      expect(readFileSync(workspaceYamlPath, 'utf8')).toBe(
+        '# my workspace\npackages:\n  - "packages/*"\n\ncatalog:\n  react: ^19 # pinned\nallowBuilds:\n  esbuild: true\n'
+      );
+    });
+
+    it('leaves a decision the user already recorded alone', async () => {
+      writeFileSync(workspaceYamlPath, 'allowBuilds:\n  esbuild: false\n');
+      unmockSpinner();
+      mockedExecuteCommand.mockResolvedValue({ stdout: '' } as any);
+
+      await pnpmProxy.installDependencies();
+
+      expect(readFileSync(workspaceYamlPath, 'utf8')).toBe('allowBuilds:\n  esbuild: false\n');
+    });
+
+    it('resolves the placeholder pnpm 12 writes for unreviewed packages', async () => {
+      writeFileSync(workspaceYamlPath, 'allowBuilds:\n  esbuild: set this to true or false\n');
+      unmockSpinner();
+      mockedExecuteCommand.mockResolvedValue({ stdout: '' } as any);
+
+      await pnpmProxy.installDependencies();
+
+      expect(readFileSync(workspaceYamlPath, 'utf8')).toBe('allowBuilds:\n  esbuild: true\n');
+    });
+
+    it('still runs the install, with a warning, when pnpm-workspace.yaml is malformed', async () => {
+      writeFileSync(workspaceYamlPath, 'packages: [\n');
+      unmockSpinner();
+      const executeCommandSpy = mockedExecuteCommand.mockResolvedValue({ stdout: '' } as any);
+
+      await pnpmProxy.installDependencies();
+
+      expect(readFileSync(workspaceYamlPath, 'utf8')).toBe('packages: [\n');
+      expect(vi.mocked(logger.warn)).toHaveBeenCalledWith(
+        expect.stringContaining('Could not allow build scripts of esbuild')
+      );
+      expect(executeCommandSpy).toHaveBeenCalledWith(
+        expect.objectContaining({ command: 'pnpm', args: ['install'] })
+      );
+    });
+
+    it('does nothing on pnpm < 10.26, which has no allowBuilds setting', async () => {
+      mockPnpmVersion('10.25.0');
+      pnpmProxy = new PNPMProxy();
+      stubWorkspaceYaml(pnpmProxy);
+      unmockSpinner();
+      mockedExecuteCommand.mockResolvedValue({ stdout: '' } as any);
+
+      await pnpmProxy.installDependencies();
+
+      expect(existsSync(workspaceYamlPath)).toBe(false);
+    });
+  });
+
   describe('runScript', () => {
     it('should execute script `pnpm exec compodoc -- -e json -d .`', () => {
       const executeCommandSpy = mockedExecuteCommand.mockResolvedValue({ stdout: '7.1.0' } as any);
diff --git a/code/core/src/common/js-package-manager/PNPMProxy.ts b/code/core/src/common/js-package-manager/PNPMProxy.ts
index 8ec788e2ec09..0d8bc5e124cc 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.ts
@@ -12,7 +12,7 @@ import * as find from 'empathic/find';
 import type { ResultPromise } from 'execa';
 import { coerce, gte, prerelease } from 'semver';
 import { dedent } from 'ts-dedent';
-import { type Document, parseDocument } from 'yaml';
+import { Document, parseDocument } from 'yaml';
 
 import type { ExecuteCommandOptions } from '../utils/command.ts';
 import { executeCommand, executeCommandSync } from '../utils/command.ts';
@@ -52,11 +52,15 @@ type PnpmListItem = {
 
 export type PnpmListOutput = PnpmListItem[];
 
-const PNPM_ERROR_REGEX = /(ELIFECYCLE|ERR_PNPM_[A-Z_]+)\s+(.*)/i;
-
 /** `pnpm dlx --allow-build` support (docs: Added in v10.2.0). */
 const PNPM_ALLOW_BUILD_DLX_MIN = '10.2.0';
 
+/** `allowBuilds` in pnpm-workspace.yaml (docs: Added in v10.26.0). */
+const PNPM_ALLOW_BUILDS_MIN = '10.26.0';
+
+/** Storybook dependencies with a build script that pnpm 10+ refuses to run until it is approved. */
+const STORYBOOK_BUILD_SCRIPT_PACKAGES = ['esbuild'];
+
 export class PNPMProxy extends JsPackageManager {
   readonly type = PackageManagerName.PNPM;
 
@@ -311,17 +315,74 @@ export class PNPMProxy extends JsPackageManager {
     return match ? match[1].trim() : null;
   }
 
-  /**
-   * Locate and parse the `pnpm-workspace.yaml` that governs this project's catalogs, walking up
-   * from the package.json we operate on. Returns null when the file is missing or malformed.
-   */
-  #readWorkspaceYaml(): { path: string; doc: Document } | null {
-    const path = find.up('pnpm-workspace.yaml', {
+  /** Looks for a `pnpm-workspace.yaml` all the way down to the project root. */
+  protected findWorkspaceYamlPath(): string | undefined {
+    return find.up('pnpm-workspace.yaml', {
       cwd: this.primaryPackageJson.operationDir,
       last: getProjectRoot(),
     });
+  }
+
+  /**
+   * pnpm 10+ refuses to run dependency build scripts until the user approves them, and from pnpm 11
+   * an unreviewed script fails a non-interactive install (`ERR_PNPM_IGNORED_BUILDS`). pnpm install
+   * has no `--allow-builds` flag, so we need to pre-approve builds. The only way to do this is to
+   * record the allowed builds in the `pnpm-workspace.yaml` like pnpm approve-builds does.
+   */
+  protected allowStorybookBuildScripts(): void {
+    if (!this.#pnpmGte(PNPM_ALLOW_BUILDS_MIN)) {
+      return;
+    }
+
+    // Find workspace file, create one if needed.
+    const workspace = this.#readWorkspaceYaml({ createIfMissing: true });
+    if (!workspace) {
+      logger.warn(
+        `Could not allow build scripts of ${STORYBOOK_BUILD_SCRIPT_PACKAGES.join(', ')}: pnpm-workspace.yaml is unreadable`
+      );
+      return;
+    }
+
+    const { path, doc } = workspace;
+    let changed = false;
+
+    // Add dependencies that need a build approval, unless a user decision already exists for them.
+    for (const pkg of STORYBOOK_BUILD_SCRIPT_PACKAGES) {
+      if (typeof doc.getIn(['allowBuilds', pkg]) !== 'boolean') {
+        doc.setIn(['allowBuilds', pkg], true);
+        changed = true;
+      }
+    }
+
+    // Write file back only if changes were needed.
+    if (changed) {
+      try {
+        writeFileSync(path, doc.toString(), 'utf8');
+      } catch (e) {
+        logger.warn(
+          `Could not allow build scripts of ${STORYBOOK_BUILD_SCRIPT_PACKAGES.join(', ')}: failed to write to ${path}: ${String(e)}`
+        );
+      }
+    }
+  }
+
+  /**
+   * Locate and parse the `pnpm-workspace.yaml` that governs this project, walking up from the
+   * package.json we operate on. Returns null when the file is malformed, or when it is missing
+   * and `createIfMissing` is unset. If `createIfMissing` is set, an empty document is returned
+   * with the location to which it can be written (next to `package.json`).
+   */
+  #readWorkspaceYaml(options?: {
+    createIfMissing: boolean;
+  }): { path: string; doc: Document } | null {
+    const path = this.findWorkspaceYamlPath();
     if (!path) {
-      return null;
+      return options?.createIfMissing
+        ? {
+            path: join(this.primaryPackageJson.operationDir, 'pnpm-workspace.yaml'),
+            doc: new Document(),
+          }
+        : null;
     }
     try {
       const doc = parseDocument(readFileSync(path, 'utf8'));
@@ -399,6 +460,7 @@ export class PNPMProxy extends JsPackageManager {
   }
 
   protected runInstall(options?: { force?: boolean }) {
+    this.allowStorybookBuildScripts();
     return executeCommand({
       command: 'pnpm',
       args: ['install', ...this.getInstallArgs('install'), ...(options?.force ? ['--force'] : [])],
@@ -538,6 +600,7 @@ export class PNPMProxy extends JsPackageManager {
 
     const commandArgs = ['add', ...args, ...this.getInstallArgs('add')];
 
+    this.allowStorybookBuildScripts();
     return executeCommand({
       command: 'pnpm',
       args: commandArgs,
diff --git a/code/core/src/manager/components/upgrade/UpgradeBlock.tsx b/code/core/src/manager/components/upgrade/UpgradeBlock.tsx
index db08cb9e55ae..335f66cb6487 100644
--- a/code/core/src/manager/components/upgrade/UpgradeBlock.tsx
+++ b/code/core/src/manager/components/upgrade/UpgradeBlock.tsx
@@ -52,7 +52,9 @@ export const UpgradeBlock: FC<UpgradeBlockProps> = ({ onNavigateToWhatsNew }) =>
       {
         id: 'pnpm',
         title: 'pnpm',
-        children: <UpgradeSnippet command="pnpm dlx storybook@latest upgrade" />,
+        children: (
+          <UpgradeSnippet command="pnpm --allow-build=esbuild dlx storybook@latest upgrade" />
+        ),
       },
     ],
   });
diff --git a/code/lib/create-storybook/src/commands/PreflightCheckCommand.ts b/code/lib/create-storybook/src/commands/PreflightCheckCommand.ts
index 40353caa0d80..e8e9698c8001 100644
--- a/code/lib/create-storybook/src/commands/PreflightCheckCommand.ts
+++ b/code/lib/create-storybook/src/commands/PreflightCheckCommand.ts
@@ -139,8 +139,8 @@ export class PreflightCheckCommand {
       logger.warn(dedent`
           This version is behind the latest release, which is: ${latestVersion}!
           You likely ran the init command through npx, which can use a locally cached version.
-          
-          To get the latest, please run: ${CLI_COLORS.cta('npx storybook@latest init')}
+
+          To get the latest, please run: ${CLI_COLORS.cta(packageManager.getRemoteRunCommand(['storybook@latest', 'init']))}
           You may want to ${CLI_COLORS.cta('CTRL+C')} to stop, and run with the latest version instead.
         `);
     } else if (isPrerelease) {
diff --git a/docs/_snippets/chromatic-storybook-add.md b/docs/_snippets/chromatic-storybook-add.md
index d4c81407384f..ff51e5b32376 100644
--- a/docs/_snippets/chromatic-storybook-add.md
+++ b/docs/_snippets/chromatic-storybook-add.md
@@ -3,7 +3,7 @@ npx storybook@latest add @chromatic-com/storybook
 ```
 
 ```shell renderer="common" packageManager="pnpm"
-pnpm dlx storybook@latest add @chromatic-com/storybook
+pnpm --allow-build=esbuild dlx storybook@latest add @chromatic-com/storybook
 ```
 
 ```shell renderer="common" packageManager="yarn"
diff --git a/docs/_snippets/create-command-custom-package-manager.md b/docs/_snippets/create-command-custom-package-manager.md
index 4f5c3c387cb3..6d36e4fb3dca 100644
--- a/docs/_snippets/create-command-custom-package-manager.md
+++ b/docs/_snippets/create-command-custom-package-manager.md
@@ -3,7 +3,7 @@ npm create storybook@latest --package-manager=npm
 ```
 
 ```shell renderer="common" packageManager="pnpm"
-pnpm create storybook@latest --package-manager=npm
+pnpm --allow-build=esbuild create storybook@latest --package-manager=npm
 ```
 
 ```shell renderer="common" packageManager="yarn"
diff --git a/docs/_snippets/create-command-custom-version.md b/docs/_snippets/create-command-custom-version.md
index af12aa9d9383..766bfcedb40c 100644
--- a/docs/_snippets/create-command-custom-version.md
+++ b/docs/_snippets/create-command-custom-version.md
@@ -3,5 +3,5 @@ npm create storybook@8.3
 ```
 
 ```shell renderer="common" packageManager="pnpm"
-pnpm create storybook@8.3
+pnpm --allow-build=esbuild create storybook@8.3
 ```
diff --git a/docs/_snippets/create-command-for-prior-major.md b/docs/_snippets/create-command-for-prior-major.md
index 198b36cf0926..596e73a55886 100644
--- a/docs/_snippets/create-command-for-prior-major.md
+++ b/docs/_snippets/create-command-for-prior-major.md
@@ -3,7 +3,7 @@ npm create storybook@^10
 ```
 
 ```shell renderer="common" packageManager="pnpm"
-pnpm create storybook@^10
+pnpm --allow-build=esbuild create storybook@^10
 ```
 
 ```shell renderer="common" packageManager="yarn"
diff --git a/docs/_snippets/create-command-manual-framework.md b/docs/_snippets/create-command-manual-framework.md
index 36182d5139ff..cee8b8cfc47d 100644
--- a/docs/_snippets/create-command-manual-framework.md
+++ b/docs/_snippets/create-command-manual-framework.md
@@ -3,7 +3,7 @@ npm create storybook@latest --type solid
 ```
 
 ```shell renderer="common" packageManager="pnpm"
-pnpm create storybook@latest --type solid
+pnpm --allow-build=esbuild create storybook@latest --type solid
 ```
 
 ```shell renderer="common" packageManager="yarn"
diff --git a/docs/_snippets/create-command.md b/docs/_snippets/create-command.md
index 2593ee2c00d6..d0c6e244285f 100644
--- a/docs/_snippets/create-command.md
+++ b/docs/_snippets/create-command.md
@@ -3,7 +3,7 @@ npm create storybook@latest
 ```
 
 ```shell renderer="common" packageManager="pnpm"
-pnpm create storybook@latest
+pnpm --allow-build=esbuild create storybook@latest
 ```
 
 ```shell renderer="common" packageManager="yarn"
diff --git a/docs/_snippets/csf-factories-automigrate-with-config-directory.md b/docs/_snippets/csf-factories-automigrate-with-config-directory.md
index bca2ac0e9914..c20017122b11 100644
--- a/docs/_snippets/csf-factories-automigrate-with-config-directory.md
+++ b/docs/_snippets/csf-factories-automigrate-with-config-directory.md
@@ -4,8 +4,8 @@ npx storybook automigrate csf-factories -c apps/website/.storybook
 ```
 
 ```shell renderer="common" packageManager="pnpm"
-pnpm dlx storybook automigrate csf-factories -c apps/admin/.storybook
-pnpm dlx storybook automigrate csf-factories -c apps/website/.storybook
+pnpm --allow-build=esbuild dlx storybook automigrate csf-factories -c apps/admin/.storybook
+pnpm --allow-build=esbuild dlx storybook automigrate csf-factories -c apps/website/.storybook
 ```
 
 ```shell renderer="common" packageManager="yarn"
diff --git a/docs/_snippets/csf-factories-automigrate.md b/docs/_snippets/csf-factories-automigrate.md
index d14a1935b93b..97272a8c748d 100644
--- a/docs/_snippets/csf-factories-automigrate.md
+++ b/docs/_snippets/csf-factories-automigrate.md
@@ -3,7 +3,7 @@ npx storybook automigrate csf-factories
 ```
 
 ```shell renderer="common" packageManager="pnpm"
-pnpm dlx storybook automigrate csf-factories
+pnpm --allow-build=esbuild dlx storybook automigrate csf-factories
 ```
 
 ```shell renderer="common" packageManager="yarn"
diff --git a/docs/_snippets/init-command-custom-version.md b/docs/_snippets/init-command-custom-version.md
index dfb0bef126f0..5c08a66551cc 100644
--- a/docs/_snippets/init-command-custom-version.md
+++ b/docs/_snippets/init-command-custom-version.md
@@ -3,7 +3,7 @@ npx storybook@8.2 init
 ```
 
 ```shell renderer="common" packageManager="pnpm"
-pnpm dlx storybook@8.2 init
+pnpm --allow-build=esbuild dlx storybook@8.2 init
 ```
 
 ```shell renderer="common" packageManager="yarn"
diff --git a/docs/_snippets/init-command.md b/docs/_snippets/init-command.md
index 4bee948ba383..87682d98e68d 100644
--- a/docs/_snippets/init-command.md
+++ b/docs/_snippets/init-command.md
@@ -3,7 +3,7 @@ npx storybook@latest init
 ```
 
 ```shell renderer="common" packageManager="pnpm"
-pnpm dlx storybook@latest init
+pnpm --allow-build=esbuild dlx storybook@latest init
 ```
 
 ```shell renderer="common" packageManager="yarn"
diff --git a/docs/_snippets/prompt-install-storybook.md b/docs/_snippets/prompt-install-storybook.md
index 22e611db66c0..d32cb654e4ff 100644
--- a/docs/_snippets/prompt-install-storybook.md
+++ b/docs/_snippets/prompt-install-storybook.md
@@ -1,3 +1,3 @@
 ```shell renderer="common"
-Set up Storybook for me with npm create storybook@latest and follow its instructions precisely
+Set up Storybook for me with npm create storybook@latest (or pnpm --allow-build=esbuild create storybook@latest if this project uses pnpm, or yarn create storybook@latest if it uses yarn) and follow its instructions precisely
 ```
diff --git a/docs/_snippets/storybook-add-command.md b/docs/_snippets/storybook-add-command.md
index 5d4571f6c5a7..67e3665cac0b 100644
--- a/docs/_snippets/storybook-add-command.md
+++ b/docs/_snippets/storybook-add-command.md
@@ -3,7 +3,7 @@ npx storybook@latest add @storybook/addon-a11y
 ```
 
 ```shell renderer="common" packageManager="pnpm"
-pnpm dlx storybook@latest add @storybook/addon-a11y
+pnpm --allow-build=esbuild dlx storybook@latest add @storybook/addon-a11y
 ```
 
 ```shell renderer="common" packageManager="yarn"
diff --git a/docs/_snippets/storybook-addon-compiler-babel-auto-install.md b/docs/_snippets/storybook-addon-compiler-babel-auto-install.md
index edab43924d67..6d53fa57dcdd 100644
--- a/docs/_snippets/storybook-addon-compiler-babel-auto-install.md
+++ b/docs/_snippets/storybook-addon-compiler-babel-auto-install.md
@@ -3,7 +3,7 @@ npx storybook@latest add @storybook/addon-webpack5-compiler-babel
 ```
 
 ```sh renderer="common" packageManager="pnpm"
-pnpm dlx storybook@latest add @storybook/addon-webpack5-compiler-babel
+pnpm --allow-build=esbuild dlx storybook@latest add @storybook/addon-webpack5-compiler-babel
 ```
 
 ```sh renderer="common" packageManager="yarn"
diff --git a/docs/_snippets/storybook-addon-compiler-swc-auto-install.md b/docs/_snippets/storybook-addon-compiler-swc-auto-install.md
index b657180257d6..401750c8fe92 100644
--- a/docs/_snippets/storybook-addon-compiler-swc-auto-install.md
+++ b/docs/_snippets/storybook-addon-compiler-swc-auto-install.md
@@ -3,7 +3,7 @@ npx storybook@latest add @storybook/addon-webpack5-compiler-swc
 ```
 
 ```sh renderer="common" packageManager="pnpm"
-pnpm dlx storybook@latest add @storybook/addon-webpack5-compiler-swc
+pnpm --allow-build=esbuild dlx storybook@latest add @storybook/addon-webpack5-compiler-swc
 ```
 
 ```sh renderer="common" packageManager="yarn"
diff --git a/docs/_snippets/storybook-automigrate.md b/docs/_snippets/storybook-automigrate.md
index a3c6a1ef2008..585c29092480 100644
--- a/docs/_snippets/storybook-automigrate.md
+++ b/docs/_snippets/storybook-automigrate.md
@@ -3,7 +3,7 @@ npx storybook@latest automigrate
 ```
 
 ```shell renderer="common" packageManager="pnpm"
-pnpm dlx storybook@latest automigrate
+pnpm --allow-build=esbuild dlx storybook@latest automigrate
 ```
 
 ```shell renderer="common" packageManager="yarn"
diff --git a/docs/_snippets/storybook-coverage-addon-install.md b/docs/_snippets/storybook-coverage-addon-install.md
index 975e5d9e2a87..f5d2f1954f87 100644
--- a/docs/_snippets/storybook-coverage-addon-install.md
+++ b/docs/_snippets/storybook-coverage-addon-install.md
@@ -3,7 +3,7 @@ npx storybook@latest add @storybook/addon-coverage
 ```
 
 ```shell renderer="common" packageManager="pnpm"
-pnpm dlx storybook@latest add @storybook/addon-coverage
+pnpm --allow-build=esbuild dlx storybook@latest add @storybook/addon-coverage
 ```
 
 ```shell renderer="common" packageManager="yarn"
diff --git a/docs/_snippets/storybook-doctor.md b/docs/_snippets/storybook-doctor.md
index 41aaaf99424e..45c10213eca4 100644
--- a/docs/_snippets/storybook-doctor.md
+++ b/docs/_snippets/storybook-doctor.md
@@ -3,7 +3,7 @@ npx storybook@latest doctor
 ```
 
 ```shell renderer="common" packageManager="pnpm"
-pnpm dlx storybook@latest doctor
+pnpm --allow-build=esbuild dlx storybook@latest doctor
 ```
 
 ```shell renderer="common" packageManager="yarn"
diff --git a/docs/_snippets/storybook-extract-specific-version.md b/docs/_snippets/storybook-extract-specific-version.md
index 1a0fbc3cc26c..34a5c1c3ec90 100644
--- a/docs/_snippets/storybook-extract-specific-version.md
+++ b/docs/_snippets/storybook-extract-specific-version.md
@@ -3,7 +3,7 @@ npx storybook@7.5.3 extract
 ```
 
 ```shell renderer="common" packageManager="pnpm"
-pnpm dlx storybook@7.5.3 extract
+pnpm --allow-build=esbuild dlx storybook@7.5.3 extract
 ```
 
 ```shell renderer="common" packageManager="yarn"
diff --git a/docs/_snippets/storybook-figma-addon-install.md b/docs/_snippets/storybook-figma-addon-install.md
index 2c617336c7e5..636e287aa20c 100644
--- a/docs/_snippets/storybook-figma-addon-install.md
+++ b/docs/_snippets/storybook-figma-addon-install.md
@@ -3,7 +3,7 @@ npx storybook@latest add @storybook/addon-designs
 ```
 
 ```shell renderer="common" packageManager="pnpm"
-pnpm dlx storybook@latest add @storybook/addon-designs
+pnpm --allow-build=esbuild dlx storybook@latest add @storybook/addon-designs
 ```
 
 ```shell renderer="common" packageManager="yarn"
diff --git a/docs/_snippets/storybook-init-v7.md b/docs/_snippets/storybook-init-v7.md
index 7f1a5d46e67d..0dfb0bcf53fb 100644
--- a/docs/_snippets/storybook-init-v7.md
+++ b/docs/_snippets/storybook-init-v7.md
@@ -3,7 +3,7 @@ npx storybook@^7 init
 ```
 
 ```shell renderer="common" packageManager="pnpm"
-pnpm dlx storybook@^7 init
+pnpm --allow-build=esbuild dlx storybook@^7 init
 ```
 
 ```shell renderer="common" packageManager="yarn"
diff --git a/docs/_snippets/storybook-migrate-csf-2-to-3.md b/docs/_snippets/storybook-migrate-csf-2-to-3.md
index 343786022670..1bb29d277047 100644
--- a/docs/_snippets/storybook-migrate-csf-2-to-3.md
+++ b/docs/_snippets/storybook-migrate-csf-2-to-3.md
@@ -5,7 +5,7 @@ npx storybook@latest migrate csf-2-to-3 --glob="**/*.stories.tsx" --parser=tsx
 
 ```sh renderer="common" packageManager="pnpm"
 # Convert CSF 2 to CSF 3
-pnpm dlx storybook@latest migrate csf-2-to-3 --glob="**/*.stories.tsx" --parser=tsx
+pnpm --allow-build=esbuild dlx storybook@latest migrate csf-2-to-3 --glob="**/*.stories.tsx" --parser=tsx
 ```
 
 ```sh renderer="common" packageManager="yarn"
diff --git a/docs/_snippets/storybook-migrate-mdx-to-csf.md b/docs/_snippets/storybook-migrate-mdx-to-csf.md
index 276f09506486..12cbb32d1a5d 100644
--- a/docs/_snippets/storybook-migrate-mdx-to-csf.md
+++ b/docs/_snippets/storybook-migrate-mdx-to-csf.md
@@ -5,7 +5,7 @@ npx storybook@latest migrate mdx-to-csf --glob "src/**/*.stories.mdx"
 
 ```sh renderer="common" packageManager="pnpm"
 # Convert stories in MDX to CSF
-pnpm dlx storybook@latest migrate mdx-to-csf --glob "src/**/*.stories.mdx"
+pnpm --allow-build=esbuild dlx storybook@latest migrate mdx-to-csf --glob "src/**/*.stories.mdx"
 ```
 
 ```sh renderer="common" packageManager="yarn"
diff --git a/docs/_snippets/storybook-migrate-stories-of-to-csf.md b/docs/_snippets/storybook-migrate-stories-of-to-csf.md
new file mode 100644
index 000000000000..7a6181aadb54
--- /dev/null
+++ b/docs/_snippets/storybook-migrate-stories-of-to-csf.md
@@ -0,0 +1,14 @@
+```sh renderer="common" packageManager="npm"
+# Convert storiesOf to CSF 1
+npx storybook@latest migrate storiesof-to-csf --glob="**/*.stories.tsx" --parser=tsx
+```
+
+```sh renderer="common" packageManager="pnpm"
+# Convert storiesOf to CSF 1
+pnpm --allow-build=esbuild dlx storybook@latest migrate storiesof-to-csf --glob="**/*.stories.tsx" --parser=tsx
+```
+
+```sh renderer="common" packageManager="yarn"
+# Convert storiesOf to CSF 1
+yarn dlx storybook@latest migrate storiesof-to-csf --glob="**/*.stories.tsx" --parser=tsx
+```
diff --git a/docs/_snippets/storybook-remove-command.md b/docs/_snippets/storybook-remove-command.md
index b297ba992348..de6bcd74aa0e 100644
--- a/docs/_snippets/storybook-remove-command.md
+++ b/docs/_snippets/storybook-remove-command.md
@@ -3,7 +3,7 @@ npx storybook@latest remove @storybook/addon-a11y
 ```
 
 ```shell renderer="common" packageManager="pnpm"
-pnpm dlx storybook@latest remove @storybook/addon-a11y
+pnpm --allow-build=esbuild dlx storybook@latest remove @storybook/addon-a11y
 ```
 
 ```shell renderer="common" packageManager="yarn"
diff --git a/docs/_snippets/storybook-upgrade-prerelease.md b/docs/_snippets/storybook-upgrade-prerelease.md
index 24cfd14c02d2..04058f2c936b 100644
--- a/docs/_snippets/storybook-upgrade-prerelease.md
+++ b/docs/_snippets/storybook-upgrade-prerelease.md
@@ -3,7 +3,7 @@ npx storybook@next upgrade
 ```
 
 ```shell renderer="common" packageManager="pnpm"
-pnpm dlx storybook@next upgrade
+pnpm --allow-build=esbuild dlx storybook@next upgrade
 ```
 
 ```shell renderer="common" packageManager="yarn"
diff --git a/docs/_snippets/storybook-upgrade-to-prior-major.md b/docs/_snippets/storybook-upgrade-to-prior-major.md
index b849a8797e20..cc6b883a7816 100644
--- a/docs/_snippets/storybook-upgrade-to-prior-major.md
+++ b/docs/_snippets/storybook-upgrade-to-prior-major.md
@@ -3,7 +3,7 @@ npx storybook@^10 upgrade
 ```
 
 ```shell renderer="common" packageManager="pnpm"
-pnpm dlx storybook@^10 upgrade
+pnpm --allow-build=esbuild dlx storybook@^10 upgrade
 ```
 
 ```shell renderer="common" packageManager="yarn"
diff --git a/docs/_snippets/storybook-upgrade.md b/docs/_snippets/storybook-upgrade.md
index d5d47e7d0091..08d69af0cb4e 100644
--- a/docs/_snippets/storybook-upgrade.md
+++ b/docs/_snippets/storybook-upgrade.md
@@ -3,7 +3,7 @@ npx storybook@latest upgrade
 ```
 
 ```shell renderer="common" packageManager="pnpm"
-pnpm dlx storybook@latest upgrade
+pnpm --allow-build=esbuild dlx storybook@latest upgrade
 ```
 
 ```shell renderer="common" packageManager="yarn"
diff --git a/docs/_snippets/svelte-csf-addon-install.md b/docs/_snippets/svelte-csf-addon-install.md
index c62583bb096e..876bc283fb5f 100644
--- a/docs/_snippets/svelte-csf-addon-install.md
+++ b/docs/_snippets/svelte-csf-addon-install.md
@@ -3,7 +3,7 @@ npx storybook@latest add @storybook/addon-svelte-csf
 ```
 
 ```shell renderer="svelte" packageManager="pnpm"
-pnpm dlx storybook@latest add @storybook/addon-svelte-csf
+pnpm --allow-build=esbuild dlx storybook@latest add @storybook/addon-svelte-csf
 ```
 
 ```shell renderer="svelte" packageManager="yarn"
diff --git a/docs/_snippets/upgrade-command-specific-version.md b/docs/_snippets/upgrade-command-specific-version.md
index 6b4833683a88..280befdfc51c 100644
--- a/docs/_snippets/upgrade-command-specific-version.md
+++ b/docs/_snippets/upgrade-command-specific-version.md
@@ -3,7 +3,7 @@ npx storybook@7.6.6 upgrade
 ```
 
 ```shell renderer="common" packageManager="pnpm"
-pnpm dlx storybook@7.6.6 upgrade
+pnpm --allow-build=esbuild dlx storybook@7.6.6 upgrade
 ```
 
 ```shell renderer="common" packageManager="yarn"
diff --git a/docs/get-started/install.mdx b/docs/get-started/install.mdx
index cd93584097bf..c7e936f227a6 100644
--- a/docs/get-started/install.mdx
+++ b/docs/get-started/install.mdx
@@ -13,7 +13,7 @@ Use the Storybook CLI to install it in a single command. Run this inside your pr
   variant="prompt"
   action={{
     label: 'Copy prompt',
-    copy: 'Set up Storybook for me with npm create storybook@latest and follow its instructions precisely',
+    copy: 'Set up Storybook for me with npm create storybook@latest (or pnpm --allow-build=esbuild create storybook@latest if this project uses pnpm, or yarn create storybook@latest if it uses yarn) and follow its instructions precisely',
     event: 'PromptInstallCopy',
   }}
 >
@@ -167,6 +167,12 @@ The Storybook CLI includes support for the industry's popular package managers (
 
 <CodeSnippets path="create-command-custom-package-manager.md" />
 
+#### pnpm asks me to approve builds, or reports "Ignored build scripts: esbuild"
+
+pnpm 10 and later block dependency postinstall scripts until you approve them, and Storybook depends on [esbuild](https://esbuild.github.io/), which uses a postinstall script. You can pass `--allow-build=esbuild` to `pnpm create` or `pnpm dlx` to run the Storybook CLI with esbuild pre-approved (available since pnpm 10.2).
+
+The Storybook CLI approves esbuild for your project by recording it under `allowBuilds` in `pnpm-workspace.yaml` (available since pnpm 10.26), so that future installs and updates run without problems. On older pnpm 10 releases, you may need to run `pnpm approve-builds` manually before installing Storybook.
+
 #### The CLI doesn't detect my framework
 
 If auto‑detection fails or you’re using a custom setup, pass the project type explicitly with `--type` when running the initializer. The allowed values are:
diff --git a/docs/index.mdx b/docs/index.mdx
index 4778141f54bf..9f3fd2fd4f7e 100644
--- a/docs/index.mdx
+++ b/docs/index.mdx
@@ -15,7 +15,7 @@ Run this command to install Storybook into an existing project or create a new o
   variant="prompt"
   action={{
     label: 'Copy prompt',
-    copy: 'Set up Storybook for me with npm create storybook@latest and follow its instructions precisely',
+    copy: 'Set up Storybook for me with npm create storybook@latest (or pnpm --allow-build=esbuild create storybook@latest if this project uses pnpm, or yarn create storybook@latest if it uses yarn) and follow its instructions precisely',
     event: 'PromptInstallCopy',
   }}
 >

From 76900e8aa2dc4d12171f82822bf824c5176c555a Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <sidnioulz@gmail.com>
Date: Tue, 13 Oct 2026 12:22:51 +0200
Subject: [PATCH 182/326] Remove now-deleted file

---
 .../storybook-migrate-stories-of-to-csf.md         | 14 --------------
 1 file changed, 14 deletions(-)
 delete mode 100644 docs/_snippets/storybook-migrate-stories-of-to-csf.md

diff --git a/docs/_snippets/storybook-migrate-stories-of-to-csf.md b/docs/_snippets/storybook-migrate-stories-of-to-csf.md
deleted file mode 100644
index 7a6181aadb54..000000000000
--- a/docs/_snippets/storybook-migrate-stories-of-to-csf.md
+++ /dev/null
@@ -1,14 +0,0 @@
-```sh renderer="common" packageManager="npm"
-# Convert storiesOf to CSF 1
-npx storybook@latest migrate storiesof-to-csf --glob="**/*.stories.tsx" --parser=tsx
-```
-
-```sh renderer="common" packageManager="pnpm"
-# Convert storiesOf to CSF 1
-pnpm --allow-build=esbuild dlx storybook@latest migrate storiesof-to-csf --glob="**/*.stories.tsx" --parser=tsx
-```
-
-```sh renderer="common" packageManager="yarn"
-# Convert storiesOf to CSF 1
-yarn dlx storybook@latest migrate storiesof-to-csf --glob="**/*.stories.tsx" --parser=tsx
-```

From d2ccae7c8c215cf9456f4ba4ee35b9000f887963 Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <sidnioulz@gmail.com>
Date: Tue, 13 Oct 2026 13:46:06 +0200
Subject: [PATCH 183/326] Make allowBuild handling more flexible

---
 .../PNPMProxy.catalog.test.ts                 | 22 ++++++++++++-
 .../common/js-package-manager/PNPMProxy.ts    | 33 +++++++++++--------
 2 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/code/core/src/common/js-package-manager/PNPMProxy.catalog.test.ts b/code/core/src/common/js-package-manager/PNPMProxy.catalog.test.ts
index fd23130074c4..359e1a1fe8de 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.catalog.test.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.catalog.test.ts
@@ -336,6 +336,26 @@ describe('PNPMProxy catalogs', () => {
       );
     });
 
+    it('fills in an `allowBuilds:` key that was left empty', () => {
+      vol.fromJSON({ [WORKSPACE_YAML]: 'packages:\n  - "packages/*"\nallowBuilds:\n' });
+
+      allowBuildScripts();
+
+      expect(writtenYaml()).toBe('packages:\n  - "packages/*"\nallowBuilds:\n  esbuild: true\n');
+    });
+
+    it('warns instead of throwing when `allowBuilds` holds something other than a map', () => {
+      vol.fromJSON({ [WORKSPACE_YAML]: 'allowBuilds: [esbuild]\n' });
+
+      expect(allowBuildScripts).not.toThrow();
+      expect(writeFileSync).not.toHaveBeenCalled();
+      expect(logger.warn).toHaveBeenCalledWith(
+        expect.stringContaining(
+          'Could not allow build scripts of esbuild in /root/pnpm-workspace.yaml'
+        )
+      );
+    });
+
     it('warns instead of throwing when the workspace file cannot be written', () => {
       vol.fromJSON({ [WORKSPACE_YAML]: 'packages:\n  - "packages/*"\n' });
       vi.mocked(writeFileSync).mockImplementation(() => {
@@ -344,7 +364,7 @@ describe('PNPMProxy catalogs', () => {
 
       expect(allowBuildScripts).not.toThrow();
       expect(logger.warn).toHaveBeenCalledWith(
-        expect.stringContaining('failed to write to /root/pnpm-workspace.yaml')
+        expect.stringContaining('in /root/pnpm-workspace.yaml: Error: EACCES')
       );
     });
   });
diff --git a/code/core/src/common/js-package-manager/PNPMProxy.ts b/code/core/src/common/js-package-manager/PNPMProxy.ts
index 0d8bc5e124cc..6c918e5add3b 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.ts
@@ -346,23 +346,30 @@ export class PNPMProxy extends JsPackageManager {
     const { path, doc } = workspace;
     let changed = false;
 
-    // Add dependencies that need a build approval, unless a user decision already exists for them.
-    for (const pkg of STORYBOOK_BUILD_SCRIPT_PACKAGES) {
-      if (typeof doc.getIn(['allowBuilds', pkg]) !== 'boolean') {
-        doc.setIn(['allowBuilds', pkg], true);
-        changed = true;
+    try {
+      // An `allowBuilds:` key left empty (e.g. after its last entry was removed) is a null, which
+      // `setIn` cannot descend into; start a map there. Other non-map values are user errors pnpm
+      // rejects too, so just let the update fail below.
+      if (doc.getIn(['allowBuilds']) == null) {
+        doc.setIn(['allowBuilds'], doc.createNode({}));
+      }
+
+      // Add dependencies that need a build approval, unless a user decision already exists for them.
+      for (const pkg of STORYBOOK_BUILD_SCRIPT_PACKAGES) {
+        if (typeof doc.getIn(['allowBuilds', pkg]) !== 'boolean') {
+          doc.setIn(['allowBuilds', pkg], true);
+          changed = true;
+        }
       }
-    }
 
-    // Write file back only if changes were needed.
-    if (changed) {
-      try {
+      // Write file back only if changes were needed.
+      if (changed) {
         writeFileSync(path, doc.toString(), 'utf8');
-      } catch (e) {
-        logger.warn(
-          `Could not allow build scripts of ${STORYBOOK_BUILD_SCRIPT_PACKAGES.join(', ')}: failed to write to ${path}: ${String(e)}`
-        );
       }
+    } catch (e) {
+      logger.warn(
+        `Could not allow build scripts of ${STORYBOOK_BUILD_SCRIPT_PACKAGES.join(', ')} in ${path}: ${String(e)}`
+      );
     }
   }
 

From 90898e49da1acd1567f145a729a7a4b7203b1532 Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <sidnioulz@gmail.com>
Date: Thu, 15 Oct 2026 13:38:35 +0200
Subject: [PATCH 184/326] Make pnpm allowed build detection more resilient

---
 .../PNPMProxy.catalog.test.ts                 |  13 +-
 .../js-package-manager/PNPMProxy.test.ts      | 164 ++++++++++++------
 .../common/js-package-manager/PNPMProxy.ts    |  79 ++++++++-
 3 files changed, 196 insertions(+), 60 deletions(-)

diff --git a/code/core/src/common/js-package-manager/PNPMProxy.catalog.test.ts b/code/core/src/common/js-package-manager/PNPMProxy.catalog.test.ts
index 359e1a1fe8de..fb1af948538b 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.catalog.test.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.catalog.test.ts
@@ -287,16 +287,21 @@ describe('PNPMProxy catalogs', () => {
 
   describe('allowStorybookBuildScripts (workspace reader with createIfMissing)', () => {
     const allowBuildScripts = () => (pnpmProxy as any).allowStorybookBuildScripts();
-    const createdYaml = () =>
-      join(pnpmProxy.primaryPackageJson.operationDir, 'pnpm-workspace.yaml');
+    // The package.json being installed lives below the workspace root, on memfs.
+    const PROJECT_DIR = '/root/packages/app';
+    const createdYaml = () => join(PROJECT_DIR, 'pnpm-workspace.yaml');
 
     beforeEach(() => {
       vi.mocked(executeCommandSync).mockReturnValue('11.0.0');
+      vi.spyOn(pnpmProxy, 'primaryPackageJson', 'get').mockReturnValue({
+        operationDir: PROJECT_DIR,
+        packageJson: { dependencies: {}, devDependencies: {}, peerDependencies: {} },
+      } as any);
+      vol.mkdirSync(PROJECT_DIR, { recursive: true });
     });
 
     it('creates pnpm-workspace.yaml next to the package.json when no workspace file exists', () => {
       vi.mocked(find.up).mockReturnValue(undefined);
-      vol.mkdirSync(pnpmProxy.primaryPackageJson.operationDir, { recursive: true });
 
       allowBuildScripts();
 
@@ -320,7 +325,7 @@ describe('PNPMProxy catalogs', () => {
 
       await expect(pnpmProxy.getDeclaredVersionSpecifier('vitest')).resolves.toBeNull();
 
-      expect(vol.toJSON()).toEqual({});
+      expect(vol.toJSON()[createdYaml()]).toBeUndefined();
       expect(writeFileSync).not.toHaveBeenCalled();
     });
 
diff --git a/code/core/src/common/js-package-manager/PNPMProxy.test.ts b/code/core/src/common/js-package-manager/PNPMProxy.test.ts
index 1a866b70bc71..97afa041d6db 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.test.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.test.ts
@@ -1,12 +1,12 @@
-import { existsSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
-import { tmpdir } from 'node:os';
-import { join } from 'node:path';
+import { readFileSync, writeFileSync } from 'node:fs';
 
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { logger, prompt } from 'storybook/internal/node-logger';
 import { MinimumReleaseAgeHandledError } from 'storybook/internal/server-errors';
 
+import { fs as memfs, vol } from 'memfs';
+
 import { executeCommand, executeCommandSync } from '../utils/command.ts';
 import { JsPackageManager } from './JsPackageManager.ts';
 import { PNPMProxy } from './PNPMProxy.ts';
@@ -26,6 +26,7 @@ vi.mock('storybook/internal/node-logger', () => ({
 }));
 
 vi.mock(import('../utils/command.ts'), { spy: true });
+vi.mock('node:fs', { spy: true });
 const mockedExecuteCommand = vi.mocked(executeCommand);
 const mockedExecuteCommandSync = vi.mocked(executeCommandSync);
 
@@ -48,34 +49,37 @@ const expectedMinimumReleaseAgeExcludePackages = [
 
 describe('PNPM Proxy', () => {
   let pnpmProxy: PNPMProxy;
-  /** Scratch dir standing in for the project, so `allowBuilds` writes never touch the repo. */
-  let projectDir: string;
-  let workspaceYamlPath: string;
 
-  const stubWorkspaceYaml = (proxy: PNPMProxy) => {
+  /** The in-memory project the proxy operates on, so `allowBuilds` writes never touch the repo. */
+  const PROJECT_DIR = '/project';
+  const WORKSPACE_YAML = `${PROJECT_DIR}/pnpm-workspace.yaml`;
+  const workspaceYaml = () => vol.toJSON()[WORKSPACE_YAML];
+
+  const useMemfsProject = (proxy: PNPMProxy, packageJson: Record<string, unknown> = {}) => {
     vi.spyOn(proxy as any, 'findWorkspaceYamlPath').mockImplementation(() =>
-      existsSync(workspaceYamlPath) ? workspaceYamlPath : undefined
+      vol.existsSync(WORKSPACE_YAML) ? WORKSPACE_YAML : undefined
     );
     vi.spyOn(proxy, 'primaryPackageJson', 'get').mockReturnValue({
-      operationDir: projectDir,
-      packageJson: { dependencies: {}, devDependencies: {}, peerDependencies: {} },
+      operationDir: PROJECT_DIR,
+      packageJson: { dependencies: {}, devDependencies: {}, peerDependencies: {}, ...packageJson },
     } as any);
   };
 
   beforeEach(() => {
-    projectDir = mkdtempSync(join(tmpdir(), 'sb-pnpm-proxy-'));
-    workspaceYamlPath = join(projectDir, 'pnpm-workspace.yaml');
+    // Construct against the real fs, then redirect fs to memfs for everything the tests do.
+    vi.mocked(readFileSync).mockReset();
+    vi.mocked(writeFileSync).mockReset();
     mockPnpmVersion('11.18.0');
     pnpmProxy = new PNPMProxy();
-    stubWorkspaceYaml(pnpmProxy);
+    vol.reset();
+    vol.mkdirSync(PROJECT_DIR, { recursive: true });
+    vi.mocked(readFileSync).mockImplementation(memfs.readFileSync as typeof readFileSync);
+    vi.mocked(writeFileSync).mockImplementation(memfs.writeFileSync as typeof writeFileSync);
+    useMemfsProject(pnpmProxy);
     JsPackageManager.clearLatestVersionCache();
     vi.spyOn(pnpmProxy, 'writePackageJson').mockImplementation(vi.fn());
   });
 
-  afterEach(() => {
-    rmSync(projectDir, { recursive: true, force: true });
-  });
-
   it('type should be pnpm', () => {
     expect(pnpmProxy.type).toEqual('pnpm');
   });
@@ -153,15 +157,17 @@ describe('PNPM Proxy', () => {
         await Promise.resolve(fn());
       });
     };
-
-    it('creates pnpm-workspace.yaml next to package.json, allowing esbuild, before `pnpm install`', async () => {
+    const install = async () => {
       unmockSpinner();
-      const executeCommandSpy = mockedExecuteCommand.mockResolvedValue({ stdout: '' } as any);
-
+      mockedExecuteCommand.mockResolvedValue({ stdout: '' } as any);
       await pnpmProxy.installDependencies();
+    };
 
-      expect(readFileSync(workspaceYamlPath, 'utf8')).toBe('allowBuilds:\n  esbuild: true\n');
-      expect(executeCommandSpy).toHaveBeenCalledWith(
+    it('creates pnpm-workspace.yaml next to package.json, allowing esbuild, before `pnpm install`', async () => {
+      await install();
+
+      expect(workspaceYaml()).toBe('allowBuilds:\n  esbuild: true\n');
+      expect(mockedExecuteCommand).toHaveBeenCalledWith(
         expect.objectContaining({ command: 'pnpm', args: ['install'] })
       );
     });
@@ -171,56 +177,110 @@ describe('PNPM Proxy', () => {
 
       await pnpmProxy.addDependencies({ type: 'devDependencies' }, ['storybook']);
 
-      expect(readFileSync(workspaceYamlPath, 'utf8')).toBe('allowBuilds:\n  esbuild: true\n');
+      expect(workspaceYaml()).toBe('allowBuilds:\n  esbuild: true\n');
     });
 
     it('adds esbuild to an existing pnpm-workspace.yaml without disturbing its content', async () => {
-      writeFileSync(
-        workspaceYamlPath,
-        '# my workspace\npackages:\n  - "packages/*"\n\ncatalog:\n  react: ^19 # pinned\n'
-      );
-      unmockSpinner();
-      mockedExecuteCommand.mockResolvedValue({ stdout: '' } as any);
+      vol.fromJSON({
+        [WORKSPACE_YAML]:
+          '# my workspace\npackages:\n  - "packages/*"\n\ncatalog:\n  react: ^19 # pinned\n',
+      });
 
-      await pnpmProxy.installDependencies();
+      await install();
 
-      expect(readFileSync(workspaceYamlPath, 'utf8')).toBe(
+      expect(workspaceYaml()).toBe(
         '# my workspace\npackages:\n  - "packages/*"\n\ncatalog:\n  react: ^19 # pinned\nallowBuilds:\n  esbuild: true\n'
       );
     });
 
     it('leaves a decision the user already recorded alone', async () => {
-      writeFileSync(workspaceYamlPath, 'allowBuilds:\n  esbuild: false\n');
-      unmockSpinner();
-      mockedExecuteCommand.mockResolvedValue({ stdout: '' } as any);
+      vol.fromJSON({ [WORKSPACE_YAML]: 'allowBuilds:\n  esbuild: false\n' });
 
-      await pnpmProxy.installDependencies();
+      await install();
 
-      expect(readFileSync(workspaceYamlPath, 'utf8')).toBe('allowBuilds:\n  esbuild: false\n');
+      expect(workspaceYaml()).toBe('allowBuilds:\n  esbuild: false\n');
+      expect(writeFileSync).not.toHaveBeenCalled();
     });
 
     it('resolves the placeholder pnpm 12 writes for unreviewed packages', async () => {
-      writeFileSync(workspaceYamlPath, 'allowBuilds:\n  esbuild: set this to true or false\n');
-      unmockSpinner();
-      mockedExecuteCommand.mockResolvedValue({ stdout: '' } as any);
+      vol.fromJSON({ [WORKSPACE_YAML]: 'allowBuilds:\n  esbuild: set this to true or false\n' });
 
-      await pnpmProxy.installDependencies();
+      await install();
 
-      expect(readFileSync(workspaceYamlPath, 'utf8')).toBe('allowBuilds:\n  esbuild: true\n');
+      expect(workspaceYaml()).toBe('allowBuilds:\n  esbuild: true\n');
+    });
+
+    it.each([
+      ['a version-pinned allowBuilds matcher', 'allowBuilds:\n  esbuild@0.25.0 || 0.25.1: false\n'],
+      [
+        'a git-pinned allowBuilds matcher',
+        "allowBuilds:\n  'esbuild@git+ssh://git@example.com/esbuild.git': true\n",
+      ],
+      [
+        'a pinned allowBuilds matcher pnpm has not resolved yet',
+        'allowBuilds:\n  esbuild@0.28.2: set this to true or false\n',
+      ],
+      ['pnpm 10 onlyBuiltDependencies', 'onlyBuiltDependencies:\n  - esbuild\n'],
+      [
+        'a version-pinned pnpm 10 onlyBuiltDependencies entry',
+        'onlyBuiltDependencies:\n  - esbuild@0.28.2\n',
+      ],
+      ['pnpm 10 ignoredBuiltDependencies', 'ignoredBuiltDependencies:\n  - esbuild\n'],
+      ['pnpm 10 neverBuiltDependencies', 'neverBuiltDependencies:\n  - esbuild\n'],
+      ['dangerouslyAllowAllBuilds', 'dangerouslyAllowAllBuilds: true\n'],
+    ])('does not add a bare esbuild key when %s already covers it', async (_, yaml) => {
+      vol.fromJSON({ [WORKSPACE_YAML]: yaml });
+
+      await install();
+
+      expect(workspaceYaml()).toBe(yaml);
+      expect(writeFileSync).not.toHaveBeenCalled();
+    });
+
+    it('honors a decision recorded in the `pnpm` field of package.json', async () => {
+      useMemfsProject(pnpmProxy, { pnpm: { neverBuiltDependencies: ['esbuild'] } });
+
+      await install();
+
+      expect(workspaceYaml()).toBeUndefined();
+      expect(writeFileSync).not.toHaveBeenCalled();
+    });
+
+    it('honors a trusted-dependencies file named by pnpm 10 onlyBuiltDependenciesFile', async () => {
+      vol.fromJSON({
+        [WORKSPACE_YAML]: 'onlyBuiltDependenciesFile: trusted/allow.json\n',
+        [`${PROJECT_DIR}/trusted/allow.json`]: '["@swc/core", "esbuild"]',
+      });
+
+      await install();
+
+      expect(workspaceYaml()).toBe('onlyBuiltDependenciesFile: trusted/allow.json\n');
+      expect(writeFileSync).not.toHaveBeenCalled();
+    });
+
+    it('still adds esbuild when the existing decisions concern other packages', async () => {
+      vol.fromJSON({
+        [WORKSPACE_YAML]:
+          'allowBuilds:\n  sharp: true\n  esbuild-wasm@1.0.0: true\nonlyBuiltDependencies:\n  - fsevents\n',
+      });
+
+      await install();
+
+      expect(workspaceYaml()).toBe(
+        'allowBuilds:\n  sharp: true\n  esbuild-wasm@1.0.0: true\n  esbuild: true\nonlyBuiltDependencies:\n  - fsevents\n'
+      );
     });
 
     it('still runs the install, with a warning, when pnpm-workspace.yaml is malformed', async () => {
-      writeFileSync(workspaceYamlPath, 'packages: [\n');
-      unmockSpinner();
-      const executeCommandSpy = mockedExecuteCommand.mockResolvedValue({ stdout: '' } as any);
+      vol.fromJSON({ [WORKSPACE_YAML]: 'packages: [\n' });
 
-      await pnpmProxy.installDependencies();
+      await install();
 
-      expect(readFileSync(workspaceYamlPath, 'utf8')).toBe('packages: [\n');
+      expect(workspaceYaml()).toBe('packages: [\n');
       expect(vi.mocked(logger.warn)).toHaveBeenCalledWith(
         expect.stringContaining('Could not allow build scripts of esbuild')
       );
-      expect(executeCommandSpy).toHaveBeenCalledWith(
+      expect(mockedExecuteCommand).toHaveBeenCalledWith(
         expect.objectContaining({ command: 'pnpm', args: ['install'] })
       );
     });
@@ -228,13 +288,11 @@ describe('PNPM Proxy', () => {
     it('does nothing on pnpm < 10.26, which has no allowBuilds setting', async () => {
       mockPnpmVersion('10.25.0');
       pnpmProxy = new PNPMProxy();
-      stubWorkspaceYaml(pnpmProxy);
-      unmockSpinner();
-      mockedExecuteCommand.mockResolvedValue({ stdout: '' } as any);
+      useMemfsProject(pnpmProxy);
 
-      await pnpmProxy.installDependencies();
+      await install();
 
-      expect(existsSync(workspaceYamlPath)).toBe(false);
+      expect(workspaceYaml()).toBeUndefined();
     });
   });
 
diff --git a/code/core/src/common/js-package-manager/PNPMProxy.ts b/code/core/src/common/js-package-manager/PNPMProxy.ts
index 6c918e5add3b..5b78a86fdd89 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.ts
@@ -1,5 +1,5 @@
 import { existsSync, readFileSync, writeFileSync } from 'node:fs';
-import { join } from 'node:path';
+import { dirname, join, resolve } from 'node:path';
 
 import { logger, prompt } from 'storybook/internal/node-logger';
 import {
@@ -61,6 +61,72 @@ const PNPM_ALLOW_BUILDS_MIN = '10.26.0';
 /** Storybook dependencies with a build script that pnpm 10+ refuses to run until it is approved. */
 const STORYBOOK_BUILD_SCRIPT_PACKAGES = ['esbuild'];
 
+/** pnpm 10 build-script list settings that `allowBuilds` replaced in pnpm 11. */
+const LEGACY_BUILD_SCRIPT_LISTS = [
+  'onlyBuiltDependencies',
+  'ignoredBuiltDependencies',
+  'neverBuiltDependencies',
+] as const;
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === 'object' && value !== null && !Array.isArray(value);
+
+/**
+ * Whether a build-script matcher names `pkg`. A matcher is a bare package name, or a name pinned to
+ * versions (`esbuild@0.25.0 || 0.25.1`) or to a git/tarball source (`foo@git+ssh://...`).
+ */
+const matchesPackage = (matcher: unknown, pkg: string): boolean =>
+  typeof matcher === 'string' && (matcher === pkg || matcher.startsWith(`${pkg}@`));
+
+/**
+ * Whether the user already allowed or denied `pkg`'s build scripts in a block of pnpm settings
+ * (`pnpm-workspace.yaml`, or the `pnpm` field of package.json): through `allowBuilds`, through the
+ * pnpm 10 list settings it replaced, or by allowing every build. A pinned `allowBuilds` matcher
+ * counts whatever its value, since adding a bare `esbuild: true` next to it would widen the user's
+ * choice; the bare key only counts once it holds a boolean, so pnpm's own placeholder still gets
+ * resolved.
+ */
+function hasBuildScriptDecision(settings: unknown, pkg: string): boolean {
+  if (!isRecord(settings)) {
+    return false;
+  }
+  if (settings.dangerouslyAllowAllBuilds === true) {
+    return true;
+  }
+  const { allowBuilds } = settings;
+  if (
+    isRecord(allowBuilds) &&
+    Object.entries(allowBuilds).some(([matcher, value]) =>
+      matcher === pkg ? typeof value === 'boolean' : matchesPackage(matcher, pkg)
+    )
+  ) {
+    return true;
+  }
+  return LEGACY_BUILD_SCRIPT_LISTS.some((key) => {
+    const list = settings[key];
+    return Array.isArray(list) && list.some((matcher) => matchesPackage(matcher, pkg));
+  });
+}
+
+/**
+ * The package matchers listed in the JSON file that pnpm 10's `onlyBuiltDependenciesFile` points
+ * to, resolved against the directory of the workspace file. An unreadable or malformed file counts
+ * as listing nothing.
+ */
+function readOnlyBuiltDependenciesFile(settings: unknown, workspaceDir: string): unknown[] {
+  if (!isRecord(settings) || typeof settings.onlyBuiltDependenciesFile !== 'string') {
+    return [];
+  }
+  try {
+    const list = JSON.parse(
+      readFileSync(resolve(workspaceDir, settings.onlyBuiltDependenciesFile), 'utf8')
+    );
+    return Array.isArray(list) ? list : [];
+  } catch {
+    return [];
+  }
+}
+
 export class PNPMProxy extends JsPackageManager {
   readonly type = PackageManagerName.PNPM;
 
@@ -354,9 +420,16 @@ export class PNPMProxy extends JsPackageManager {
         doc.setIn(['allowBuilds'], doc.createNode({}));
       }
 
-      // Add dependencies that need a build approval, unless a user decision already exists for them.
+      // Add dependencies that need a build approval, unless the user already decided on them in the
+      // workspace file, in package.json's `pnpm` field, or in a trusted-dependencies file.
+      const settings = doc.toJS();
+      const decisions = [settings, this.primaryPackageJson.packageJson.pnpm];
+      const trustedDependencies = readOnlyBuiltDependenciesFile(settings, dirname(path));
       for (const pkg of STORYBOOK_BUILD_SCRIPT_PACKAGES) {
-        if (typeof doc.getIn(['allowBuilds', pkg]) !== 'boolean') {
+        const decided =
+          decisions.some((candidate) => hasBuildScriptDecision(candidate, pkg)) ||
+          trustedDependencies.some((matcher) => matchesPackage(matcher, pkg));
+        if (!decided) {
           doc.setIn(['allowBuilds', pkg], true);
           changed = true;
         }

From 72a321ffd4370c63422f2a959b7ca3466c51ed77 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Mon, 19 Oct 2026 13:59:54 +0200
Subject: [PATCH 185/326] Skip allowBuilds when pnpm 10 already lists
 neverBuiltDependencies

pnpm 10 rewrites allowBuilds into onlyBuiltDependencies, and any neverBuiltDependencies list then fails the next install. Leave those projects alone, and replace pnpm-workspace.yaml through a temp file so a crash cannot truncate it.
---
 .../PNPMProxy.catalog.test.ts                 |  6 +-
 .../js-package-manager/PNPMProxy.test.ts      | 83 ++++++++++++++++++-
 .../common/js-package-manager/PNPMProxy.ts    | 47 +++++++++--
 3 files changed, 127 insertions(+), 9 deletions(-)

diff --git a/code/core/src/common/js-package-manager/PNPMProxy.catalog.test.ts b/code/core/src/common/js-package-manager/PNPMProxy.catalog.test.ts
index fb1af948538b..5a1fe18be214 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.catalog.test.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.catalog.test.ts
@@ -1,4 +1,4 @@
-import { readFileSync, writeFileSync } from 'node:fs';
+import { readFileSync, renameSync, unlinkSync, writeFileSync } from 'node:fs';
 import { join } from 'node:path';
 
 import { beforeEach, describe, expect, it, vi } from 'vitest';
@@ -32,10 +32,14 @@ describe('PNPMProxy catalogs', () => {
     // Restore the real fs so the proxy can be constructed, then redirect fs to memfs.
     vi.mocked(readFileSync).mockReset();
     vi.mocked(writeFileSync).mockReset();
+    vi.mocked(renameSync).mockReset();
+    vi.mocked(unlinkSync).mockReset();
     pnpmProxy = new PNPMProxy();
     vol.reset();
     vi.mocked(readFileSync).mockImplementation(memfs.readFileSync as typeof readFileSync);
     vi.mocked(writeFileSync).mockImplementation(memfs.writeFileSync as typeof writeFileSync);
+    vi.mocked(renameSync).mockImplementation(memfs.renameSync as typeof renameSync);
+    vi.mocked(unlinkSync).mockImplementation(memfs.unlinkSync as typeof unlinkSync);
     vi.mocked(getProjectRoot).mockReturnValue('/root');
     vi.mocked(find.up).mockReturnValue(WORKSPACE_YAML);
     // Drive the version resolution through controllable inputs.
diff --git a/code/core/src/common/js-package-manager/PNPMProxy.test.ts b/code/core/src/common/js-package-manager/PNPMProxy.test.ts
index 97afa041d6db..ed1909cca3f1 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.test.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.test.ts
@@ -1,4 +1,4 @@
-import { readFileSync, writeFileSync } from 'node:fs';
+import { readFileSync, renameSync, unlinkSync, writeFileSync } from 'node:fs';
 
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
@@ -69,12 +69,16 @@ describe('PNPM Proxy', () => {
     // Construct against the real fs, then redirect fs to memfs for everything the tests do.
     vi.mocked(readFileSync).mockReset();
     vi.mocked(writeFileSync).mockReset();
+    vi.mocked(renameSync).mockReset();
+    vi.mocked(unlinkSync).mockReset();
     mockPnpmVersion('11.18.0');
     pnpmProxy = new PNPMProxy();
     vol.reset();
     vol.mkdirSync(PROJECT_DIR, { recursive: true });
     vi.mocked(readFileSync).mockImplementation(memfs.readFileSync as typeof readFileSync);
     vi.mocked(writeFileSync).mockImplementation(memfs.writeFileSync as typeof writeFileSync);
+    vi.mocked(renameSync).mockImplementation(memfs.renameSync as typeof renameSync);
+    vi.mocked(unlinkSync).mockImplementation(memfs.unlinkSync as typeof unlinkSync);
     useMemfsProject(pnpmProxy);
     JsPackageManager.clearLatestVersionCache();
     vi.spyOn(pnpmProxy, 'writePackageJson').mockImplementation(vi.fn());
@@ -167,6 +171,16 @@ describe('PNPM Proxy', () => {
       await install();
 
       expect(workspaceYaml()).toBe('allowBuilds:\n  esbuild: true\n');
+      expect(writeFileSync).toHaveBeenCalledWith(
+        expect.stringMatching(/\/project\/pnpm-workspace\.yaml\.[0-9a-f]+\.tmp$/),
+        'allowBuilds:\n  esbuild: true\n',
+        'utf8'
+      );
+      expect(renameSync).toHaveBeenCalledWith(
+        expect.stringMatching(/\/project\/pnpm-workspace\.yaml\.[0-9a-f]+\.tmp$/),
+        WORKSPACE_YAML
+      );
+      expect(Object.keys(vol.toJSON()).some((filePath) => filePath.endsWith('.tmp'))).toBe(false);
       expect(mockedExecuteCommand).toHaveBeenCalledWith(
         expect.objectContaining({ command: 'pnpm', args: ['install'] })
       );
@@ -271,6 +285,73 @@ describe('PNPM Proxy', () => {
       );
     });
 
+    it('still allows esbuild on pnpm 11 when neverBuiltDependencies lists other packages', async () => {
+      vol.fromJSON({ [WORKSPACE_YAML]: 'neverBuiltDependencies:\n  - fsevents\n' });
+
+      await install();
+
+      expect(workspaceYaml()).toBe(
+        'neverBuiltDependencies:\n  - fsevents\nallowBuilds:\n  esbuild: true\n'
+      );
+    });
+
+    describe('on pnpm 10', () => {
+      beforeEach(() => {
+        mockPnpmVersion('10.28.0');
+        pnpmProxy = new PNPMProxy();
+        useMemfsProject(pnpmProxy);
+      });
+
+      it.each([
+        ['neverBuiltDependencies lists another package', 'neverBuiltDependencies:\n  - fsevents\n'],
+        ['neverBuiltDependencies is an empty list', 'neverBuiltDependencies: []\n'],
+      ])('does not write allowBuilds when %s', async (_, yaml) => {
+        vol.fromJSON({ [WORKSPACE_YAML]: yaml });
+
+        await install();
+
+        expect(workspaceYaml()).toBe(yaml);
+        expect(writeFileSync).not.toHaveBeenCalled();
+      });
+
+      it('does not write allowBuilds when package.json neverBuiltDependencies lists other packages', async () => {
+        useMemfsProject(pnpmProxy, { pnpm: { neverBuiltDependencies: ['fsevents'] } });
+
+        await install();
+
+        expect(workspaceYaml()).toBeUndefined();
+        expect(writeFileSync).not.toHaveBeenCalled();
+      });
+
+      it('preserves an explicit esbuild denial', async () => {
+        vol.fromJSON({ [WORKSPACE_YAML]: 'allowBuilds:\n  esbuild: false\n' });
+
+        await install();
+
+        expect(workspaceYaml()).toBe('allowBuilds:\n  esbuild: false\n');
+        expect(writeFileSync).not.toHaveBeenCalled();
+      });
+
+      it('preserves a version-pinned esbuild approval', async () => {
+        vol.fromJSON({ [WORKSPACE_YAML]: 'allowBuilds:\n  esbuild@0.25.0: true\n' });
+
+        await install();
+
+        expect(workspaceYaml()).toBe('allowBuilds:\n  esbuild@0.25.0: true\n');
+        expect(writeFileSync).not.toHaveBeenCalled();
+      });
+
+      it('still allows esbuild when onlyBuiltDependencies lists other packages', async () => {
+        vol.fromJSON({ [WORKSPACE_YAML]: 'onlyBuiltDependencies:\n  - fsevents\n' });
+
+        await install();
+
+        expect(workspaceYaml()).toBe(
+          'onlyBuiltDependencies:\n  - fsevents\nallowBuilds:\n  esbuild: true\n'
+        );
+      });
+    });
+
     it('still runs the install, with a warning, when pnpm-workspace.yaml is malformed', async () => {
       vol.fromJSON({ [WORKSPACE_YAML]: 'packages: [\n' });
 
diff --git a/code/core/src/common/js-package-manager/PNPMProxy.ts b/code/core/src/common/js-package-manager/PNPMProxy.ts
index 5b78a86fdd89..8340e391411e 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.ts
@@ -1,4 +1,5 @@
-import { existsSync, readFileSync, writeFileSync } from 'node:fs';
+import { randomBytes } from 'node:crypto';
+import { existsSync, readFileSync, renameSync, unlinkSync, writeFileSync } from 'node:fs';
 import { dirname, join, resolve } from 'node:path';
 
 import { logger, prompt } from 'storybook/internal/node-logger';
@@ -58,6 +59,9 @@ const PNPM_ALLOW_BUILD_DLX_MIN = '10.2.0';
 /** `allowBuilds` in pnpm-workspace.yaml (docs: Added in v10.26.0). */
 const PNPM_ALLOW_BUILDS_MIN = '10.26.0';
 
+/** pnpm 11 dropped the legacy build lists, so `allowBuilds` no longer conflicts with them. */
+const PNPM_LEGACY_BUILD_LISTS_REMOVED = '11.0.0';
+
 /** Storybook dependencies with a build script that pnpm 10+ refuses to run until it is approved. */
 const STORYBOOK_BUILD_SCRIPT_PACKAGES = ['esbuild'];
 
@@ -84,9 +88,14 @@ const matchesPackage = (matcher: unknown, pkg: string): boolean =>
  * pnpm 10 list settings it replaced, or by allowing every build. A pinned `allowBuilds` matcher
  * counts whatever its value, since adding a bare `esbuild: true` next to it would widen the user's
  * choice; the bare key only counts once it holds a boolean, so pnpm's own placeholder still gets
- * resolved.
+ * resolved. On pnpm 10, pass `anyNeverBuiltDependencies`: that version rewrites `allowBuilds` into
+ * `onlyBuiltDependencies`, and any `neverBuiltDependencies` list conflicts with it.
  */
-function hasBuildScriptDecision(settings: unknown, pkg: string): boolean {
+function hasBuildScriptDecision(
+  settings: unknown,
+  pkg: string,
+  { anyNeverBuiltDependencies = false }: { anyNeverBuiltDependencies?: boolean } = {}
+): boolean {
   if (!isRecord(settings)) {
     return false;
   }
@@ -104,10 +113,32 @@ function hasBuildScriptDecision(settings: unknown, pkg: string): boolean {
   }
   return LEGACY_BUILD_SCRIPT_LISTS.some((key) => {
     const list = settings[key];
-    return Array.isArray(list) && list.some((matcher) => matchesPackage(matcher, pkg));
+    if (!Array.isArray(list)) {
+      return false;
+    }
+    if (anyNeverBuiltDependencies && key === 'neverBuiltDependencies') {
+      return true;
+    }
+    return list.some((matcher) => matchesPackage(matcher, pkg));
   });
 }
 
+// Same-directory rename so a crash cannot truncate the user's workspace file.
+function writeFileAtomically(filePath: string, contents: string): void {
+  const tempPath = `${filePath}.${randomBytes(8).toString('hex')}.tmp`;
+  try {
+    writeFileSync(tempPath, contents, 'utf8');
+    renameSync(tempPath, filePath);
+  } catch (error) {
+    try {
+      unlinkSync(tempPath);
+    } catch {
+      // The temp file was never created, or rename already consumed it.
+    }
+    throw error;
+  }
+}
+
 /**
  * The package matchers listed in the JSON file that pnpm 10's `onlyBuiltDependenciesFile` points
  * to, resolved against the directory of the workspace file. An unreadable or malformed file counts
@@ -425,10 +456,12 @@ export class PNPMProxy extends JsPackageManager {
       const settings = doc.toJS();
       const decisions = [settings, this.primaryPackageJson.packageJson.pnpm];
       const trustedDependencies = readOnlyBuiltDependenciesFile(settings, dirname(path));
+      const anyNeverBuiltDependencies = !this.#pnpmGte(PNPM_LEGACY_BUILD_LISTS_REMOVED);
       for (const pkg of STORYBOOK_BUILD_SCRIPT_PACKAGES) {
         const decided =
-          decisions.some((candidate) => hasBuildScriptDecision(candidate, pkg)) ||
-          trustedDependencies.some((matcher) => matchesPackage(matcher, pkg));
+          decisions.some((candidate) =>
+            hasBuildScriptDecision(candidate, pkg, { anyNeverBuiltDependencies })
+          ) || trustedDependencies.some((matcher) => matchesPackage(matcher, pkg));
         if (!decided) {
           doc.setIn(['allowBuilds', pkg], true);
           changed = true;
@@ -437,7 +470,7 @@ export class PNPMProxy extends JsPackageManager {
 
       // Write file back only if changes were needed.
       if (changed) {
-        writeFileSync(path, doc.toString(), 'utf8');
+        writeFileAtomically(path, doc.toString());
       }
     } catch (e) {
       logger.warn(

From bfa74a4129f4217b26c9326da7168692d7ee99ba Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <sidnioulz@gmail.com>
Date: Mon, 19 Oct 2026 14:43:39 +0200
Subject: [PATCH 186/326] More fine-grained PNPM10 compat

---
 .../js-package-manager/PNPMProxy.test.ts      | 89 +++++++++++++------
 .../common/js-package-manager/PNPMProxy.ts    | 39 ++++----
 2 files changed, 86 insertions(+), 42 deletions(-)

diff --git a/code/core/src/common/js-package-manager/PNPMProxy.test.ts b/code/core/src/common/js-package-manager/PNPMProxy.test.ts
index ed1909cca3f1..2d5ebf8277fe 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.test.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.test.ts
@@ -234,13 +234,6 @@ describe('PNPM Proxy', () => {
         'a pinned allowBuilds matcher pnpm has not resolved yet',
         'allowBuilds:\n  esbuild@0.28.2: set this to true or false\n',
       ],
-      ['pnpm 10 onlyBuiltDependencies', 'onlyBuiltDependencies:\n  - esbuild\n'],
-      [
-        'a version-pinned pnpm 10 onlyBuiltDependencies entry',
-        'onlyBuiltDependencies:\n  - esbuild@0.28.2\n',
-      ],
-      ['pnpm 10 ignoredBuiltDependencies', 'ignoredBuiltDependencies:\n  - esbuild\n'],
-      ['pnpm 10 neverBuiltDependencies', 'neverBuiltDependencies:\n  - esbuild\n'],
       ['dangerouslyAllowAllBuilds', 'dangerouslyAllowAllBuilds: true\n'],
     ])('does not add a bare esbuild key when %s already covers it', async (_, yaml) => {
       vol.fromJSON({ [WORKSPACE_YAML]: yaml });
@@ -251,48 +244,52 @@ describe('PNPM Proxy', () => {
       expect(writeFileSync).not.toHaveBeenCalled();
     });
 
-    it('honors a decision recorded in the `pnpm` field of package.json', async () => {
-      useMemfsProject(pnpmProxy, { pnpm: { neverBuiltDependencies: ['esbuild'] } });
+    it('still adds esbuild when the existing allowBuilds decisions concern other packages', async () => {
+      vol.fromJSON({
+        [WORKSPACE_YAML]: 'allowBuilds:\n  sharp: true\n  esbuild-wasm@1.0.0: true\n',
+      });
 
       await install();
 
-      expect(workspaceYaml()).toBeUndefined();
-      expect(writeFileSync).not.toHaveBeenCalled();
+      expect(workspaceYaml()).toBe(
+        'allowBuilds:\n  sharp: true\n  esbuild-wasm@1.0.0: true\n  esbuild: true\n'
+      );
     });
 
-    it('honors a trusted-dependencies file named by pnpm 10 onlyBuiltDependenciesFile', async () => {
-      vol.fromJSON({
-        [WORKSPACE_YAML]: 'onlyBuiltDependenciesFile: trusted/allow.json\n',
-        [`${PROJECT_DIR}/trusted/allow.json`]: '["@swc/core", "esbuild"]',
-      });
+    // pnpm 11 dropped these lists and stopped reading package.json's `pnpm` field, so leftovers
+    // there no longer govern builds: esbuild still needs its allowBuilds entry.
+    it.each([
+      ['onlyBuiltDependencies names esbuild', 'onlyBuiltDependencies:\n  - esbuild\n'],
+      ['ignoredBuiltDependencies names esbuild', 'ignoredBuiltDependencies:\n  - esbuild\n'],
+      ['neverBuiltDependencies names esbuild', 'neverBuiltDependencies:\n  - esbuild\n'],
+      ['neverBuiltDependencies lists other packages', 'neverBuiltDependencies:\n  - fsevents\n'],
+    ])('still allows esbuild on pnpm 11 when a leftover pnpm 10 %s', async (_, yaml) => {
+      vol.fromJSON({ [WORKSPACE_YAML]: yaml });
 
       await install();
 
-      expect(workspaceYaml()).toBe('onlyBuiltDependenciesFile: trusted/allow.json\n');
-      expect(writeFileSync).not.toHaveBeenCalled();
+      expect(workspaceYaml()).toBe(`${yaml}allowBuilds:\n  esbuild: true\n`);
     });
 
-    it('still adds esbuild when the existing decisions concern other packages', async () => {
+    it('still allows esbuild on pnpm 11 when a leftover onlyBuiltDependenciesFile names it', async () => {
       vol.fromJSON({
-        [WORKSPACE_YAML]:
-          'allowBuilds:\n  sharp: true\n  esbuild-wasm@1.0.0: true\nonlyBuiltDependencies:\n  - fsevents\n',
+        [WORKSPACE_YAML]: 'onlyBuiltDependenciesFile: trusted/allow.json\n',
+        [`${PROJECT_DIR}/trusted/allow.json`]: '["esbuild"]',
       });
 
       await install();
 
       expect(workspaceYaml()).toBe(
-        'allowBuilds:\n  sharp: true\n  esbuild-wasm@1.0.0: true\n  esbuild: true\nonlyBuiltDependencies:\n  - fsevents\n'
+        'onlyBuiltDependenciesFile: trusted/allow.json\nallowBuilds:\n  esbuild: true\n'
       );
     });
 
-    it('still allows esbuild on pnpm 11 when neverBuiltDependencies lists other packages', async () => {
-      vol.fromJSON({ [WORKSPACE_YAML]: 'neverBuiltDependencies:\n  - fsevents\n' });
+    it('still allows esbuild on pnpm 11 when only the ignored `pnpm` field of package.json names it', async () => {
+      useMemfsProject(pnpmProxy, { pnpm: { allowBuilds: { esbuild: false } } });
 
       await install();
 
-      expect(workspaceYaml()).toBe(
-        'neverBuiltDependencies:\n  - fsevents\nallowBuilds:\n  esbuild: true\n'
-      );
+      expect(workspaceYaml()).toBe('allowBuilds:\n  esbuild: true\n');
     });
 
     describe('on pnpm 10', () => {
@@ -302,6 +299,44 @@ describe('PNPM Proxy', () => {
         useMemfsProject(pnpmProxy);
       });
 
+      it.each([
+        ['onlyBuiltDependencies', 'onlyBuiltDependencies:\n  - esbuild\n'],
+        [
+          'a version-pinned onlyBuiltDependencies entry',
+          'onlyBuiltDependencies:\n  - esbuild@0.28.2\n',
+        ],
+        ['ignoredBuiltDependencies', 'ignoredBuiltDependencies:\n  - esbuild\n'],
+        ['neverBuiltDependencies', 'neverBuiltDependencies:\n  - esbuild\n'],
+      ])('does not add a bare esbuild key when %s already covers it', async (_, yaml) => {
+        vol.fromJSON({ [WORKSPACE_YAML]: yaml });
+
+        await install();
+
+        expect(workspaceYaml()).toBe(yaml);
+        expect(writeFileSync).not.toHaveBeenCalled();
+      });
+
+      it('honors a decision recorded in the `pnpm` field of package.json', async () => {
+        useMemfsProject(pnpmProxy, { pnpm: { ignoredBuiltDependencies: ['esbuild'] } });
+
+        await install();
+
+        expect(workspaceYaml()).toBeUndefined();
+        expect(writeFileSync).not.toHaveBeenCalled();
+      });
+
+      it('honors a trusted-dependencies file named by onlyBuiltDependenciesFile', async () => {
+        vol.fromJSON({
+          [WORKSPACE_YAML]: 'onlyBuiltDependenciesFile: trusted/allow.json\n',
+          [`${PROJECT_DIR}/trusted/allow.json`]: '["@swc/core", "esbuild"]',
+        });
+
+        await install();
+
+        expect(workspaceYaml()).toBe('onlyBuiltDependenciesFile: trusted/allow.json\n');
+        expect(writeFileSync).not.toHaveBeenCalled();
+      });
+
       it.each([
         ['neverBuiltDependencies lists another package', 'neverBuiltDependencies:\n  - fsevents\n'],
         ['neverBuiltDependencies is an empty list', 'neverBuiltDependencies: []\n'],
diff --git a/code/core/src/common/js-package-manager/PNPMProxy.ts b/code/core/src/common/js-package-manager/PNPMProxy.ts
index 8340e391411e..2cc3f0fefddf 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.ts
@@ -59,7 +59,10 @@ const PNPM_ALLOW_BUILD_DLX_MIN = '10.2.0';
 /** `allowBuilds` in pnpm-workspace.yaml (docs: Added in v10.26.0). */
 const PNPM_ALLOW_BUILDS_MIN = '10.26.0';
 
-/** pnpm 11 dropped the legacy build lists, so `allowBuilds` no longer conflicts with them. */
+/**
+ * pnpm 11 dropped the legacy build lists and stopped reading package.json's `pnpm` field. From
+ * there on, those settings are leftovers that neither govern builds nor conflict with `allowBuilds`.
+ */
 const PNPM_LEGACY_BUILD_LISTS_REMOVED = '11.0.0';
 
 /** Storybook dependencies with a build script that pnpm 10+ refuses to run until it is approved. */
@@ -88,13 +91,14 @@ const matchesPackage = (matcher: unknown, pkg: string): boolean =>
  * pnpm 10 list settings it replaced, or by allowing every build. A pinned `allowBuilds` matcher
  * counts whatever its value, since adding a bare `esbuild: true` next to it would widen the user's
  * choice; the bare key only counts once it holds a boolean, so pnpm's own placeholder still gets
- * resolved. On pnpm 10, pass `anyNeverBuiltDependencies`: that version rewrites `allowBuilds` into
- * `onlyBuiltDependencies`, and any `neverBuiltDependencies` list conflicts with it.
+ * resolved. The pnpm 10 lists only count when `legacyLists` is set, i.e. on pnpm 10 itself. There,
+ * any `neverBuiltDependencies` list counts as a decision for every package: pnpm 10 rewrites
+ * `allowBuilds` into `onlyBuiltDependencies`, which it refuses to combine with that list.
  */
 function hasBuildScriptDecision(
   settings: unknown,
   pkg: string,
-  { anyNeverBuiltDependencies = false }: { anyNeverBuiltDependencies?: boolean } = {}
+  { legacyLists = false }: { legacyLists?: boolean } = {}
 ): boolean {
   if (!isRecord(settings)) {
     return false;
@@ -111,15 +115,15 @@ function hasBuildScriptDecision(
   ) {
     return true;
   }
+  if (!legacyLists) {
+    return false;
+  }
   return LEGACY_BUILD_SCRIPT_LISTS.some((key) => {
     const list = settings[key];
     if (!Array.isArray(list)) {
       return false;
     }
-    if (anyNeverBuiltDependencies && key === 'neverBuiltDependencies') {
-      return true;
-    }
-    return list.some((matcher) => matchesPackage(matcher, pkg));
+    return key === 'neverBuiltDependencies' || list.some((matcher) => matchesPackage(matcher, pkg));
   });
 }
 
@@ -452,16 +456,21 @@ export class PNPMProxy extends JsPackageManager {
       }
 
       // Add dependencies that need a build approval, unless the user already decided on them in the
-      // workspace file, in package.json's `pnpm` field, or in a trusted-dependencies file.
+      // workspace file. On pnpm 10 the decision may also live in package.json's `pnpm` field or in a
+      // trusted-dependencies file; pnpm 11+ ignores both, so there they must not keep esbuild
+      // unapproved.
       const settings = doc.toJS();
-      const decisions = [settings, this.primaryPackageJson.packageJson.pnpm];
-      const trustedDependencies = readOnlyBuiltDependenciesFile(settings, dirname(path));
-      const anyNeverBuiltDependencies = !this.#pnpmGte(PNPM_LEGACY_BUILD_LISTS_REMOVED);
+      const legacyLists = !this.#pnpmGte(PNPM_LEGACY_BUILD_LISTS_REMOVED);
+      const decisions = legacyLists
+        ? [settings, this.primaryPackageJson.packageJson.pnpm]
+        : [settings];
+      const trustedDependencies = legacyLists
+        ? readOnlyBuiltDependenciesFile(settings, dirname(path))
+        : [];
       for (const pkg of STORYBOOK_BUILD_SCRIPT_PACKAGES) {
         const decided =
-          decisions.some((candidate) =>
-            hasBuildScriptDecision(candidate, pkg, { anyNeverBuiltDependencies })
-          ) || trustedDependencies.some((matcher) => matchesPackage(matcher, pkg));
+          decisions.some((candidate) => hasBuildScriptDecision(candidate, pkg, { legacyLists })) ||
+          trustedDependencies.some((matcher) => matchesPackage(matcher, pkg));
         if (!decided) {
           doc.setIn(['allowBuilds', pkg], true);
           changed = true;

From f84817e3e90c743c7d97cbc79270e65f9256fc5d Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 19 Oct 2026 12:51:09 +0000
Subject: [PATCH 187/326] Build: Disable the sandbox npm age gate in ecosystem
 CI

Vite ecosystem CI installs packages published minutes ago into the generated
sandbox. Yarn 4 quarantines those while npmMinimalAgeGate is 7 days, and the
default is still 1 day when the key is absent, so set the sandbox gate to 0
before install. Published sandboxes keep the gate.

Co-authored-by: Norbert de Langen <norbert@chromatic.com>
---
 scripts/ecosystem-ci/before-test.js           |  2 +
 .../disable-npm-minimal-age-gate.js           | 25 +++++++
 .../disable-npm-minimal-age-gate.test.ts      | 65 +++++++++++++++++++
 3 files changed, 92 insertions(+)
 create mode 100644 scripts/ecosystem-ci/disable-npm-minimal-age-gate.js
 create mode 100644 scripts/ecosystem-ci/disable-npm-minimal-age-gate.test.ts

diff --git a/scripts/ecosystem-ci/before-test.js b/scripts/ecosystem-ci/before-test.js
index d32dea940a88..123544d17ade 100644
--- a/scripts/ecosystem-ci/before-test.js
+++ b/scripts/ecosystem-ci/before-test.js
@@ -11,6 +11,7 @@ import { fileURLToPath } from 'node:url';
 // eslint-disable-next-line depend/ban-dependencies
 import { execaCommand } from 'execa';
 
+import { disableNpmMinimalAgeGate } from './disable-npm-minimal-age-gate.js';
 import { EXISTING_RESOLUTIONS } from './existing-resolutions.js';
 
 const filename = fileURLToPath(import.meta.url);
@@ -44,5 +45,6 @@ sandboxPkgJson.resolutions = {
 await writeFile(sandboxPackageJsonPath, JSON.stringify(sandboxPkgJson, null, 2));
 
 const sandboxDir = dirname(sandboxPackageJsonPath);
+await disableNpmMinimalAgeGate(sandboxDir);
 await execaCommand('yarn add playwright', { cwd: sandboxDir, shell: true });
 await execaCommand('yarn playwright install', { cwd: sandboxDir, shell: true });
diff --git a/scripts/ecosystem-ci/disable-npm-minimal-age-gate.js b/scripts/ecosystem-ci/disable-npm-minimal-age-gate.js
new file mode 100644
index 000000000000..59602e9a145c
--- /dev/null
+++ b/scripts/ecosystem-ci/disable-npm-minimal-age-gate.js
@@ -0,0 +1,25 @@
+import { readFile, writeFile } from 'node:fs/promises';
+import { join } from 'node:path';
+
+const AGE_GATE_KEY = /^[ \t]*npmMinimalAgeGate[ \t]*:/m;
+const AGE_GATE_LINE = /^([ \t]*npmMinimalAgeGate[ \t]*:)[^\r\n]*$/gm;
+
+// Yarn 4's default gate is 1 day, so the key has to be 0 rather than absent.
+export async function disableNpmMinimalAgeGate(sandboxDir) {
+  const configPath = join(sandboxDir, '.yarnrc.yml');
+
+  let content = '';
+  try {
+    content = await readFile(configPath, 'utf-8');
+  } catch (error) {
+    if (error?.code !== 'ENOENT') {
+      throw error;
+    }
+  }
+
+  const next = AGE_GATE_KEY.test(content)
+    ? content.replace(AGE_GATE_LINE, '$1 0')
+    : `${content}${content.length > 0 && !content.endsWith('\n') ? '\n' : ''}npmMinimalAgeGate: 0\n`;
+
+  await writeFile(configPath, next);
+}
diff --git a/scripts/ecosystem-ci/disable-npm-minimal-age-gate.test.ts b/scripts/ecosystem-ci/disable-npm-minimal-age-gate.test.ts
new file mode 100644
index 000000000000..cd56c4a8e69f
--- /dev/null
+++ b/scripts/ecosystem-ci/disable-npm-minimal-age-gate.test.ts
@@ -0,0 +1,65 @@
+import { resolve } from 'node:path';
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import * as memfs from 'memfs';
+import { vol } from 'memfs';
+
+import { disableNpmMinimalAgeGate } from './disable-npm-minimal-age-gate.js';
+
+vi.mock('node:fs/promises', { spy: true });
+
+const SANDBOX = resolve('sandbox');
+const CONFIG = `${SANDBOX}/.yarnrc.yml`;
+
+beforeEach(async () => {
+  vol.reset();
+  const fsp = await import('node:fs/promises');
+  vi.mocked(fsp.readFile).mockImplementation(memfs.fs.promises.readFile as never);
+  vi.mocked(fsp.writeFile).mockImplementation(memfs.fs.promises.writeFile as never);
+  vol.mkdirSync(SANDBOX, { recursive: true });
+});
+
+const readConfig = () => vol.readFileSync(CONFIG, 'utf-8') as string;
+
+describe('disableNpmMinimalAgeGate', () => {
+  it('sets an existing gate to 0 and leaves the rest of the config', async () => {
+    vol.writeFileSync(
+      CONFIG,
+      'nodeLinker: node-modules\nnpmMinimalAgeGate: 10080\nnpmPreapprovedPackages:\n  - storybook\n'
+    );
+
+    await disableNpmMinimalAgeGate(SANDBOX);
+
+    expect(readConfig()).toBe(
+      'nodeLinker: node-modules\nnpmMinimalAgeGate: 0\nnpmPreapprovedPackages:\n  - storybook\n'
+    );
+  });
+
+  it('rewrites every occurrence, including one that is already 0', async () => {
+    vol.writeFileSync(
+      CONFIG,
+      'npmMinimalAgeGate: 0\nnpmScopes:\n  example:\n    npmMinimalAgeGate: 7d\n'
+    );
+
+    await disableNpmMinimalAgeGate(SANDBOX);
+
+    expect(readConfig()).toBe(
+      'npmMinimalAgeGate: 0\nnpmScopes:\n  example:\n    npmMinimalAgeGate: 0\n'
+    );
+  });
+
+  it('appends a zero gate when the config does not set one', async () => {
+    vol.writeFileSync(CONFIG, 'nodeLinker: node-modules');
+
+    await disableNpmMinimalAgeGate(SANDBOX);
+
+    expect(readConfig()).toBe('nodeLinker: node-modules\nnpmMinimalAgeGate: 0\n');
+  });
+
+  it('creates a config that sets the gate to 0 when none exists', async () => {
+    await disableNpmMinimalAgeGate(SANDBOX);
+
+    expect(readConfig()).toBe('npmMinimalAgeGate: 0\n');
+  });
+});

From 2f13bc190587174bb9baa481064a3ca43ec261bc Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <dev@valentinpalkovic.dev>
Date: Mon, 19 Oct 2026 15:41:52 +0200
Subject: [PATCH 188/326] Sidebar: Keep showing docs-only components as a
 single docs page

A component whose stories are all hidden, for example with autodocs and
'!dev' on the meta, is left with only its docs entry after filtering.
The sidebar showed it as one docs page before the index change; restore
that render-time hoist so the documented docs-only pattern looks the
same.
---
 MIGRATION.md                                  |  3 +-
 .../components/sidebar/Tree.stories.tsx       | 44 +++++++++++++++++++
 .../src/manager/components/sidebar/Tree.tsx   |  5 +++
 3 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 8a0e46c305e9..1749696b7556 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -933,7 +933,8 @@ Each title is now typed by everything the story index puts under it:
 | Several docs pages and no stories | `group` |
 
 The type comes from the full index, so `index` and `filteredIndex` always agree on it.
-Filters only remove entries: a component whose stories are all filtered out stays a `component` with its docs child, and the sidebar shows it as such instead of collapsing it.
+Filters only remove entries: a component whose stories are all filtered out stays a `component` with its docs child in `filteredIndex`.
+The sidebar still shows such a component as a single docs page, for example for [docs-only stories](https://storybook.js.org/docs/writing-stories/tags#docs-only-stories).
 
 Functions passed to `sidebar.renderLabel` and sidebar filters receive the `docs` entry instead of the old wrapper and its `Docs` child.
 Sidebar search lists these pages under their own name, for example `Introduction` instead of `Docs` under `Introduction`.
diff --git a/code/core/src/manager/components/sidebar/Tree.stories.tsx b/code/core/src/manager/components/sidebar/Tree.stories.tsx
index 4d83ce127a24..84e4d0d53a36 100644
--- a/code/core/src/manager/components/sidebar/Tree.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Tree.stories.tsx
@@ -244,6 +244,50 @@ export const DocsOnlySingleStoryComponents = {
   },
 };
 
+/** A component whose stories are all hidden (`!dev`) shows as a single docs page. */
+export const ComponentWithOnlyDocsLeft: Story = {
+  render: () => (
+    <Tree
+      docsMode={false}
+      isBrowsing
+      isMain
+      refId={DEFAULT_REF_ID}
+      data={{
+        'docs-only': {
+          type: 'component',
+          name: 'Docs Only',
+          id: 'docs-only',
+          depth: 0,
+          children: ['docs-only--docs'],
+          tags: [],
+        },
+        'docs-only--docs': {
+          type: 'docs',
+          id: 'docs-only--docs',
+          title: 'Docs Only',
+          name: 'Docs',
+          tags: ['autodocs'],
+          prepared: true,
+          depth: 1,
+          parent: 'docs-only',
+          importPath: './docs-only.stories.js',
+        },
+      }}
+      highlightedRef={{ current: null }}
+      setHighlightedItemId={action('setHighlightedItemId')}
+      selectedStoryId={null}
+      onSelectStoryId={action('onSelectStoryId')}
+    />
+  ),
+  play: async ({ canvasElement }) => {
+    const docsItem = canvasElement.querySelector('[data-item-id="docs-only--docs"]');
+
+    await expect(docsItem).toHaveAttribute('data-nodetype', 'document');
+    await expect(docsItem).toHaveTextContent('Docs Only');
+    await expect(canvasElement.querySelector('[data-item-id="docs-only"]')).toBeNull();
+  },
+};
+
 // SkipToCanvas Link only shows on desktop widths
 export const SkipToCanvasLinkFocused: Story = {
   ...DocsOnlySingleStoryComponents,
diff --git a/code/core/src/manager/components/sidebar/Tree.tsx b/code/core/src/manager/components/sidebar/Tree.tsx
index 2dfe0eab7481..247841fe44c5 100644
--- a/code/core/src/manager/components/sidebar/Tree.tsx
+++ b/code/core/src/manager/components/sidebar/Tree.tsx
@@ -669,6 +669,7 @@ export const Tree = React.memo<{
   // Create a list of component IDs which should be collapsed into their (only) child.
   // That is:
   //  - components with a single story child with the same name
+  //  - components left with only a docs child after filtering (e.g. docs-only `!dev` stories)
   const singleStoryComponentIds = useMemo(() => {
     return Object.keys(data).filter((id) => {
       const entry = data[id];
@@ -685,6 +686,10 @@ export const Tree = React.memo<{
 
       const onlyChild = data[children[0]];
 
+      if (onlyChild.type === 'docs') {
+        return true;
+      }
+
       if (onlyChild.type === 'story' && onlyChild.subtype === 'story') {
         return isStoryHoistable(onlyChild.name, name);
       }

From 525bc13cf3cc93bdbe7c9b0260cfdcb3f62fb0d0 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <dev@valentinpalkovic.dev>
Date: Mon, 19 Oct 2026 15:53:00 +0200
Subject: [PATCH 189/326] Manager: Address review naming feedback

Rename the leaf check in the STORY_SPECIFIED handler to isLeaf, and use
the established 'unattached docs page' term in the jumpToSubtree JSDoc.
---
 code/core/src/manager-api/modules/stories.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/code/core/src/manager-api/modules/stories.ts b/code/core/src/manager-api/modules/stories.ts
index f091bf1470ad..e7245ba0dbc5 100644
--- a/code/core/src/manager-api/modules/stories.ts
+++ b/code/core/src/manager-api/modules/stories.ts
@@ -194,8 +194,8 @@ export interface SubAPI {
   setIndex: (index: API_PreparedStoryIndex) => Promise<void>;
 
   /**
-   * Jumps to the first entry of the next or previous component, or to the next or previous docs
-   * page that is not attached to a component.
+   * Jumps to the first entry of the next or previous component, or to the next or previous
+   * unattached docs page.
    *
    * @param {Direction} direction - The direction to jump. Use -1 to jump backwards and 1 to jump
    *   forwards.
@@ -1147,7 +1147,7 @@ export const init: ModuleFn<SubAPI, SubState> = ({
         const stateHasSelection = state.viewMode && state.storyId;
         const stateSelectionDifferent = state.viewMode !== viewMode || state.storyId !== storyId;
         const { type } = state.index?.[state.storyId] || {};
-        const isStory = type === 'story' || type === 'docs';
+        const isLeaf = type === 'story' || type === 'docs';
 
         /**
          * When storybook starts, we want to navigate to the first story. But there are a few
@@ -1180,7 +1180,7 @@ export const init: ModuleFn<SubAPI, SubState> = ({
             }
           }
 
-          if (stateHasSelection && stateSelectionDifferent && isStory) {
+          if (stateHasSelection && stateSelectionDifferent && isLeaf) {
             // The manager state is correct, the preview state is lagging behind
             provider.channel?.emit(SET_CURRENT_STORY, {
               storyId: state.storyId,

From 55f525258e683a4bfa4486ad0e6f8bf85e729477 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Mon, 19 Oct 2026 15:56:03 +0200
Subject: [PATCH 190/326] React: Alias preview React from the renderer preset

Preview builds fail to resolve react from published Storybook files when addon-docs is off. The React renderer now points the preview bundler at the project's React before framework plugins replace that alias.
---
 MIGRATION.md                                  |  44 ++---
 code/addons/themes/docs/api.md                |   5 +-
 .../themes/docs/getting-started/emotion.md    |   5 +-
 .../docs/getting-started/material-ui.md       |   7 +-
 .../docs/getting-started/styled-components.md |   5 +-
 code/addons/themes/src/decorators/index.ts    |   1 +
 .../src/decorators/provider.decorator.tsx}    |  16 +-
 .../template/stories/decorators.stories.ts    |  26 ++-
 code/frameworks/nextjs-vite/build-config.ts   |   4 -
 code/frameworks/nextjs-vite/package.json      |   5 -
 code/frameworks/nextjs-vite/src/theming.ts    |   1 -
 code/frameworks/nextjs/build-config.ts        |   4 -
 code/frameworks/nextjs/package.json           |   7 +-
 code/frameworks/nextjs/src/theming.ts         |   1 -
 .../react-native-web-vite/build-config.ts     |   4 -
 .../react-native-web-vite/package.json        |   5 -
 .../react-native-web-vite/src/theming.ts      |   1 -
 code/frameworks/react-vite/build-config.ts    |   4 -
 code/frameworks/react-vite/package.json       |   5 -
 code/frameworks/react-vite/src/theming.ts     |   1 -
 .../frameworks/react-webpack5/build-config.ts |   4 -
 code/frameworks/react-webpack5/package.json   |   7 +-
 code/frameworks/react-webpack5/src/theming.ts |   1 -
 .../frameworks/tanstack-react/build-config.ts |   4 -
 code/frameworks/tanstack-react/package.json   |   5 -
 code/frameworks/tanstack-react/src/theming.ts |   1 -
 .../src/automigrate/fixes/index.ts            |   2 -
 .../fixes/react-theming-imports.test.ts       | 165 ------------------
 .../fixes/react-theming-imports.ts            | 149 ----------------
 code/renderers/react/build-config.ts          |  12 --
 code/renderers/react/package.json             |  12 --
 code/renderers/react/src/index.ts             |   2 -
 code/renderers/react/src/preset.ts            |  29 +++
 .../react/src/preview-react-alias.test.ts     |  44 +++++
 .../react/src/preview-react-alias.ts          |  63 +++++++
 code/renderers/react/src/theming.test.ts      |  24 ---
 code/renderers/react/src/theming.ts           |   1 -
 .../template/stories/theming.stories.tsx      |  78 ---------
 ...ook-addon-themes-jsx-provider-decorator.md |  21 +--
 ...rybook-preview-auto-docs-override-theme.md |  36 ++--
 .../storybook-preview-docs-dark-theme.md      |  18 +-
 .../portable-stories-jest.mdx                 |   2 +-
 .../portable-stories-vitest.mdx               |   2 +-
 docs/configure/styling-and-css.mdx            |   2 +-
 docs/configure/user-interface/theming.mdx     |   2 -
 docs/essentials/themes.mdx                    |   2 +-
 scripts/build/build-package.ts                |   5 -
 scripts/build/utils/entry-utils.ts            |   3 +-
 scripts/build/utils/generate-bundle.ts        |   3 +-
 yarn.lock                                     |   7 -
 50 files changed, 249 insertions(+), 608 deletions(-)
 rename code/{renderers/react/src/withThemeFromJSXProvider.tsx => addons/themes/src/decorators/provider.decorator.tsx} (75%)
 delete mode 100644 code/frameworks/nextjs-vite/src/theming.ts
 delete mode 100644 code/frameworks/nextjs/src/theming.ts
 delete mode 100644 code/frameworks/react-native-web-vite/src/theming.ts
 delete mode 100644 code/frameworks/react-vite/src/theming.ts
 delete mode 100644 code/frameworks/react-webpack5/src/theming.ts
 delete mode 100644 code/frameworks/tanstack-react/src/theming.ts
 delete mode 100644 code/lib/cli-storybook/src/automigrate/fixes/react-theming-imports.test.ts
 delete mode 100644 code/lib/cli-storybook/src/automigrate/fixes/react-theming-imports.ts
 create mode 100644 code/renderers/react/src/preview-react-alias.test.ts
 create mode 100644 code/renderers/react/src/preview-react-alias.ts
 delete mode 100644 code/renderers/react/src/theming.test.ts
 delete mode 100644 code/renderers/react/src/theming.ts
 delete mode 100644 code/renderers/react/template/stories/theming.stories.tsx

diff --git a/MIGRATION.md b/MIGRATION.md
index e59736abf57e..08676d51127a 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -7,7 +7,6 @@
   - [Tag filtering API](#tag-filtering-api)
   - [Addon `TAB` registration removed](#addon-tab-registration-removed)
   - [`useThemeParameters` removed](#usethemeparameters-removed)
-  - [React preview code: `storybook/theming` and `withThemeFromJSXProvider` moved to the React renderer](#react-preview-code-storybooktheming-and-withthemefromjsxprovider-moved-to-the-react-renderer)
   - [`storybook dev` no longer opens a browser by default](#storybook-dev-no-longer-opens-a-browser-by-default)
   - [`viewport.defaultViewport` parameter and `responsiveViewport` removed](#viewportdefaultviewport-parameter-and-responsiveviewport-removed)
   - [`parameters.componentSubtitle` removed](#parameterscomponentsubtitle-removed)
@@ -15,6 +14,7 @@
   - [Toolbar `globalTypes` entries: index signature and `defaultValue` removed](#toolbar-globaltypes-entries-index-signature-and-defaultvalue-removed)
   - [Docs Code panel enabled by default](#docs-code-panel-enabled-by-default)
   - [`argTypes` removed from loaders, `beforeEach`, `play` and `afterEach`](#argtypes-removed-from-loaders-beforeeach-play-and-aftereach)
+  - [Deprecated CSF and manager type aliases removed](#deprecated-csf-and-manager-type-aliases-removed)
   - [`docgenServer` is stable and enabled by default](#docgenserver-is-stable-and-enabled-by-default)
   - [Builder docgen is deprecated](#builder-docgen-is-deprecated)
   - [Node.js 22.12 or higher](#nodejs-2212-or-higher)
@@ -765,26 +765,6 @@ See the [addon migration guide](docs/addons/addon-migration-guide.mdx#tab-ui-typ
 
 Keep any existing precedence between the theme parameters and your selected theme global. Rebuild your Storybook and check the decorator in both development and a served static build. See the [addon migration guide](docs/addons/addon-migration-guide.mdx#usethemeparameters-removal) for the replacement.
 
-### React preview code: `storybook/theming` and `withThemeFromJSXProvider` moved to the React renderer
-
-The `storybook` package and `@storybook/addon-themes` do not declare React as a dependency, so that non-React projects never install it. Their code that imports React (`storybook/theming` is built on Emotion, and `withThemeFromJSXProvider` renders JSX) therefore cannot be resolved from the preview under strict package layouts such as pnpm's global virtual store (`enableGlobalVirtualStore: true`), where the build fails with `Rollup failed to resolve import "react" from .../storybook/dist/theming/index.js`.
-
-Both are now published from the React renderer, which does declare React, and re-exported by every React framework package:
-
-```diff
-// .storybook/preview.tsx, *.stories.tsx
--import { withThemeFromJSXProvider } from '@storybook/addon-themes';
--import { ThemeProvider, themes } from 'storybook/theming';
-+import { withThemeFromJSXProvider } from '@storybook/react-vite'; // or your React framework package
-+import { ThemeProvider, themes } from '@storybook/react-vite/theming';
-```
-
-`@storybook/addon-themes` no longer exports `withThemeFromJSXProvider`. `withThemeByClassName`, `withThemeByDataAttribute` and `DecoratorHelpers` are unchanged.
-
-Keep `storybook/theming` in manager code (`.storybook/manager.ts`, addon panels) and in stories that render Storybook's own UI components, such as `@storybook/addon-docs/blocks`: those components read the theme from the Emotion instance inside `storybook`, which `@storybook/react/theming` does not share. For `parameters.docs.theme`, `storybook/theming/create` exports `themes` and `create` without React in any renderer.
-
-The `react-theming-imports` automigration rewrites these imports in your preview file and story files of React projects: `npx storybook automigrate react-theming-imports`.
-
 ### `storybook dev` no longer opens a browser by default
 
 Storybook now starts the development server without automatically opening it in a browser. The CLI
@@ -968,6 +948,28 @@ export const Primary: Story = {
 
 Decorators and `render` functions keep receiving `argTypes`, because renderers rely on them while rendering. Their context type is the new `StoryContextForRender`; the `StoryContext` type no longer declares `argTypes`. Custom decorator or render helpers that annotate their context parameter as `StoryContext` and read `argTypes` should switch to `StoryContextForRender`.
 
+### Deprecated CSF and manager type aliases removed
+
+The following deprecated type aliases and fields are removed. If your code imports any of them from `storybook` (via `storybook/internal/csf`, `storybook/internal/types`, or `storybook/manager-api`), switch to the supported replacement:
+
+| Deprecated               | Replacement             |
+| ------------------------ | ----------------------- |
+| `StoryKind`              | `ComponentTitle`        |
+| `StoryIdentifier.kind`   | `StoryIdentifier.title` |
+| `StoryIdentifier.story`  | `StoryIdentifier.name`  |
+| `AnyFramework`           | `Renderer`              |
+| `StoryContextForLoaders` | `StoryContext`          |
+| `PlayFunctionContext`    | `StoryContext`          |
+| `StoriesHash`            | `IndexHash`             |
+
+The deprecated `kind` and `story` fields are also gone from `Addon_AddStoryArgs`, `Addon_StoryApi`, and the legacy `setStories` payload type `SetStoriesStory` (the whole interface is removed). The `RenderContext` passed to `renderToCanvas` no longer contains `kind` or `story`; third-party renderers read `title` and `name` instead.
+
+`@storybook/addon-links`' deprecated `LinkTo` `kind` and `story` props are removed; use `title` and `name`. The `data-sb-kind` and `data-sb-story` HTML attributes are unchanged. The provider `StoryMapper` option is removed.
+
+Story context objects passed to loaders and play functions no longer carry the deprecated `kind` and `story` keys; read `title` and `name` instead. The same applies to the context passed to decorators and `render` functions: custom helpers that read `context.kind` or `context.story` must switch to `context.title` and `context.name`. The `extract()` output — the serialized stories that external tools such as the Chromatic CLI read — still includes the deprecated `kind` and `story` fields for compatibility, so tools reading the serialized output keep working.
+
+The manager resolves `SELECT_STORY` payloads from `storyId` or `title`/`name`, and still accepts the deprecated `kind`/`story` payload that composed Storybooks built with Storybook 10.x or earlier send, so cross-story links inside those refs keep navigating. A payload without any of those keys is ignored with a warning. Composed refs must publish a story index (`stories.json`); the v2 format is no longer accepted and the legacy `setStories` event is no longer read.
+
 ### `docgenServer` is stable and enabled by default
 
 The `experimentalDocgenServer` feature is now `docgenServer`, and Storybook no longer reads the old name.
diff --git a/code/addons/themes/docs/api.md b/code/addons/themes/docs/api.md
index 9e8709f39558..94460e034302 100644
--- a/code/addons/themes/docs/api.md
+++ b/code/addons/themes/docs/api.md
@@ -4,11 +4,10 @@
 
 ### `withThemeFromJSXProvider`
 
-Takes your provider component, global styles, and theme(s)to wrap your stories in. This decorator renders JSX, so it is exported by the React renderer and every React framework package rather than by this addon.
+Takes your provider component, global styles, and theme(s)to wrap your stories in.
 
 ```js
-// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
-import { withThemeFromJSXProvider } from '@storybook/your-framework';
+import { withThemeFromJSXProvider } from '@storybook/addon-themes';
 
 export const decorators = [
   withThemeFromJSXProvider({
diff --git a/code/addons/themes/docs/getting-started/emotion.md b/code/addons/themes/docs/getting-started/emotion.md
index 3e1cd4a0eed4..7c44c20fc3d1 100644
--- a/code/addons/themes/docs/getting-started/emotion.md
+++ b/code/addons/themes/docs/getting-started/emotion.md
@@ -43,8 +43,9 @@ Finally, provide your theme(s) and global styles component to your stories with
 Make the following changes to your `.storybook/preview.js`:
 
 ```diff
--import { Preview } from '@storybook/your-framework';
-+import { Preview, Renderer, withThemeFromJSXProvider } from '@storybook/your-framework';
+-import { Preview } from '@storybook/your-renderer';
++import { Preview, Renderer } from '@storybook/your-renderer';
++import { withThemeFromJSXProvider } from '@storybook/addon-themes';
 +import { ThemeProvider } from '@emotion/react';
 +import { GlobalStyles, lightTheme, darkTheme } from '../src/themes'; // Import your custom theme configs
 
diff --git a/code/addons/themes/docs/getting-started/material-ui.md b/code/addons/themes/docs/getting-started/material-ui.md
index b30c9de2e4e4..3c6209205161 100644
--- a/code/addons/themes/docs/getting-started/material-ui.md
+++ b/code/addons/themes/docs/getting-started/material-ui.md
@@ -43,7 +43,7 @@ export default {
 These can be imported into your `.storybook/preview.js` file.
 
 ```diff
-import { Preview } from '@storybook/your-framework';
+import { Preview } from '@storybook/your-renderer';
 
 +// Load Material UI fonts
 +import '@fontsource/roboto/300.css';
@@ -66,8 +66,9 @@ While Material UI comes with a default theme that works out of the box. You can
 Make the following changes to your `.storybook/preview.js`:
 
 ```diff
--import { Preview } from '@storybook/your-framework';
-+import { Preview, Renderer, withThemeFromJSXProvider } from '@storybook/your-framework';
+-import { Preview } from '@storybook/your-renderer';
++import { Preview, Renderer } from '@storybook/your-renderer';
++import { withThemeFromJSXProvider } from '@storybook/addon-themes';
 +import { CssBaseline, ThemeProvider } from '@mui/material';
 +import { lightTheme, darkTheme } from '../src/themes'; // Import your custom theme configs
 
diff --git a/code/addons/themes/docs/getting-started/styled-components.md b/code/addons/themes/docs/getting-started/styled-components.md
index 2f6c92da21a8..d844dfe4af3b 100644
--- a/code/addons/themes/docs/getting-started/styled-components.md
+++ b/code/addons/themes/docs/getting-started/styled-components.md
@@ -43,8 +43,9 @@ Finally, provide your theme(s) and global styles component to your stories with
 Make the following changes to your `.storybook/preview.js`:
 
 ```diff
--import { Preview } from '@storybook/your-framework';
-+import { Preview, Renderer, withThemeFromJSXProvider } from '@storybook/your-framework';
+-import { Preview } from '@storybook/your-renderer';
++import { Preview, Renderer } from '@storybook/your-renderer';
++import { withThemeFromJSXProvider } from '@storybook/addon-themes';
 +import { ThemeProvider } from 'styled-components';
 +import { GlobalStyles, lightTheme, darkTheme } from '../src/themes'; // Import your custom theme configs
 
diff --git a/code/addons/themes/src/decorators/index.ts b/code/addons/themes/src/decorators/index.ts
index 2e846066b9c3..ed3c429eb683 100644
--- a/code/addons/themes/src/decorators/index.ts
+++ b/code/addons/themes/src/decorators/index.ts
@@ -1,4 +1,5 @@
 export * from './class-name.decorator.tsx';
 export * from './data-attribute.decorator.tsx';
+export * from './provider.decorator.tsx';
 
 export * as DecoratorHelpers from './helpers.ts';
diff --git a/code/renderers/react/src/withThemeFromJSXProvider.tsx b/code/addons/themes/src/decorators/provider.decorator.tsx
similarity index 75%
rename from code/renderers/react/src/withThemeFromJSXProvider.tsx
rename to code/addons/themes/src/decorators/provider.decorator.tsx
index e6c0084a7926..8b11a80f734b 100644
--- a/code/renderers/react/src/withThemeFromJSXProvider.tsx
+++ b/code/addons/themes/src/decorators/provider.decorator.tsx
@@ -4,11 +4,8 @@ import type { DecoratorFunction, Renderer } from 'storybook/internal/types';
 
 import { useMemo } from 'storybook/preview-api';
 
-import { PARAM_KEY } from '../../../addons/themes/src/constants.ts';
-import {
-  initializeThemeState,
-  pluckThemeFromContext,
-} from '../../../addons/themes/src/decorators/helpers.ts';
+import { PARAM_KEY } from '../constants.ts';
+import { initializeThemeState, pluckThemeFromContext } from './helpers.ts';
 
 type Theme = Record<string, any>;
 type ThemeMap = Record<string, Theme>;
@@ -20,10 +17,9 @@ export interface ProviderStrategyConfiguration {
   themes?: ThemeMap;
 }
 
-/**
- * Wrap every story in a theme provider component and let `@storybook/addon-themes` switch the theme
- * from the toolbar.
- */
+const pluckThemeFromKeyPairTuple = ([_, themeConfig]: [string, Theme]): Theme => themeConfig;
+
+// TODO check with @kasperpeulen: change the types so they can be correctly inferred from context e.g. <Story extends (...args: any[]) => any>
 export const withThemeFromJSXProvider = <TRenderer extends Renderer = any>({
   Provider,
   GlobalStyles,
@@ -43,7 +39,7 @@ export const withThemeFromJSXProvider = <TRenderer extends Renderer = any>({
       const selectedThemeName = themeOverride || selected || initialTheme;
       const pairs = Object.entries(themes);
 
-      return pairs.length === 1 ? pairs[0][1] : themes[selectedThemeName];
+      return pairs.length === 1 ? pluckThemeFromKeyPairTuple(pairs[0]) : themes[selectedThemeName];
     }, [selected, themeOverride]);
 
     if (!Provider) {
diff --git a/code/addons/themes/template/stories/decorators.stories.ts b/code/addons/themes/template/stories/decorators.stories.ts
index b38dcfd20b0c..dd1ea82127ba 100644
--- a/code/addons/themes/template/stories/decorators.stories.ts
+++ b/code/addons/themes/template/stories/decorators.stories.ts
@@ -1,6 +1,10 @@
 import { global as globalThis } from '@storybook/global';
 
-import { withThemeByClassName, withThemeByDataAttribute } from '@storybook/addon-themes';
+import {
+  withThemeByClassName,
+  withThemeByDataAttribute,
+  withThemeFromJSXProvider,
+} from '@storybook/addon-themes';
 
 import { useEffect } from 'storybook/preview-api';
 
@@ -72,3 +76,23 @@ export const WithThemeByDataAttribute = {
     }),
   ],
 };
+
+export const WithThemeFromJSXProvider = {
+  globals: {},
+  decorators: [
+    withThemeFromJSXProvider({
+      defaultTheme: 'a',
+      themes: { a: { custom: 'theme-a' }, b: { custom: 'theme-b' } },
+      Provider: ({ theme, children }: any) => {
+        // this is not was a normal provider looks like obviously, but this needs to work in non-react as well
+        // the timeout is to wait for the render to complete, as it's not possible to use the useEffect hook here
+        setTimeout(() => {
+          const element = globalThis.document.querySelector('#storybook-root > *');
+          element?.classList.remove('theme-a', 'theme-b');
+          element?.classList.add(theme.custom);
+        }, 16);
+        return children;
+      },
+    }),
+  ],
+};
diff --git a/code/frameworks/nextjs-vite/build-config.ts b/code/frameworks/nextjs-vite/build-config.ts
index 7da9d2bdb144..154d3d90fc88 100644
--- a/code/frameworks/nextjs-vite/build-config.ts
+++ b/code/frameworks/nextjs-vite/build-config.ts
@@ -7,10 +7,6 @@ const config: BuildEntries = {
         exportEntries: ['.'],
         entryPoint: './src/index.ts',
       },
-      {
-        exportEntries: ['./theming'],
-        entryPoint: './src/theming.ts',
-      },
       {
         exportEntries: ['./preview'],
         entryPoint: './src/preview.tsx',
diff --git a/code/frameworks/nextjs-vite/package.json b/code/frameworks/nextjs-vite/package.json
index 48e8f38e0027..e3f936c8ef2d 100644
--- a/code/frameworks/nextjs-vite/package.json
+++ b/code/frameworks/nextjs-vite/package.json
@@ -70,11 +70,6 @@
       "code": "./src/export-mocks/router/index.ts",
       "default": "./dist/export-mocks/router/index.js"
     },
-    "./theming": {
-      "types": "./dist/theming.d.ts",
-      "code": "./src/theming.ts",
-      "default": "./dist/theming.js"
-    },
     "./vite-plugin": {
       "types": "./dist/vite-plugin/index.d.ts",
       "code": "./src/vite-plugin/index.ts",
diff --git a/code/frameworks/nextjs-vite/src/theming.ts b/code/frameworks/nextjs-vite/src/theming.ts
deleted file mode 100644
index 43d64228b35d..000000000000
--- a/code/frameworks/nextjs-vite/src/theming.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from '@storybook/react/theming';
diff --git a/code/frameworks/nextjs/build-config.ts b/code/frameworks/nextjs/build-config.ts
index e2abefcfcc07..2e473d52935a 100644
--- a/code/frameworks/nextjs/build-config.ts
+++ b/code/frameworks/nextjs/build-config.ts
@@ -7,10 +7,6 @@ const config: BuildEntries = {
         exportEntries: ['.'],
         entryPoint: './src/index.ts',
       },
-      {
-        exportEntries: ['./theming'],
-        entryPoint: './src/theming.ts',
-      },
       {
         exportEntries: ['./preview'],
         entryPoint: './src/preview.tsx',
diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json
index d44c926fd651..46fd32d0e065 100644
--- a/code/frameworks/nextjs/package.json
+++ b/code/frameworks/nextjs/package.json
@@ -76,12 +76,7 @@
       "default": "./dist/export-mocks/router/index.js"
     },
     "./rsc/server-only": "./dist/rsc/server-only.js",
-    "./storybook-nextjs-font-loader": "./dist/font/webpack/loader/storybook-nextjs-font-loader.js",
-    "./theming": {
-      "types": "./dist/theming.d.ts",
-      "code": "./src/theming.ts",
-      "default": "./dist/theming.js"
-    }
+    "./storybook-nextjs-font-loader": "./dist/font/webpack/loader/storybook-nextjs-font-loader.js"
   },
   "files": [
     "dist/**/*",
diff --git a/code/frameworks/nextjs/src/theming.ts b/code/frameworks/nextjs/src/theming.ts
deleted file mode 100644
index 43d64228b35d..000000000000
--- a/code/frameworks/nextjs/src/theming.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from '@storybook/react/theming';
diff --git a/code/frameworks/react-native-web-vite/build-config.ts b/code/frameworks/react-native-web-vite/build-config.ts
index 8ab4d796fe17..f262983447e2 100644
--- a/code/frameworks/react-native-web-vite/build-config.ts
+++ b/code/frameworks/react-native-web-vite/build-config.ts
@@ -7,10 +7,6 @@ const config: BuildEntries = {
         exportEntries: ['.'],
         entryPoint: './src/index.ts',
       },
-      {
-        exportEntries: ['./theming'],
-        entryPoint: './src/theming.ts',
-      },
     ],
     node: [
       {
diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json
index ec49cd836305..5825fa2feeb7 100644
--- a/code/frameworks/react-native-web-vite/package.json
+++ b/code/frameworks/react-native-web-vite/package.json
@@ -40,11 +40,6 @@
     },
     "./package.json": "./package.json",
     "./preset": "./dist/preset.js",
-    "./theming": {
-      "types": "./dist/theming.d.ts",
-      "code": "./src/theming.ts",
-      "default": "./dist/theming.js"
-    },
     "./vite-plugin": "./dist/vite-plugin.js"
   },
   "files": [
diff --git a/code/frameworks/react-native-web-vite/src/theming.ts b/code/frameworks/react-native-web-vite/src/theming.ts
deleted file mode 100644
index 43d64228b35d..000000000000
--- a/code/frameworks/react-native-web-vite/src/theming.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from '@storybook/react/theming';
diff --git a/code/frameworks/react-vite/build-config.ts b/code/frameworks/react-vite/build-config.ts
index df1390b09e7e..9a8c825f1386 100644
--- a/code/frameworks/react-vite/build-config.ts
+++ b/code/frameworks/react-vite/build-config.ts
@@ -7,10 +7,6 @@ const config: BuildEntries = {
         exportEntries: ['.'],
         entryPoint: './src/index.ts',
       },
-      {
-        exportEntries: ['./theming'],
-        entryPoint: './src/theming.ts',
-      },
     ],
     node: [
       {
diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json
index 7521d976e833..bd96769e7acd 100644
--- a/code/frameworks/react-vite/package.json
+++ b/code/frameworks/react-vite/package.json
@@ -41,11 +41,6 @@
       "types": "./dist/preset.d.ts",
       "code": "./src/preset.ts",
       "default": "./dist/preset.js"
-    },
-    "./theming": {
-      "types": "./dist/theming.d.ts",
-      "code": "./src/theming.ts",
-      "default": "./dist/theming.js"
     }
   },
   "files": [
diff --git a/code/frameworks/react-vite/src/theming.ts b/code/frameworks/react-vite/src/theming.ts
deleted file mode 100644
index 43d64228b35d..000000000000
--- a/code/frameworks/react-vite/src/theming.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from '@storybook/react/theming';
diff --git a/code/frameworks/react-webpack5/build-config.ts b/code/frameworks/react-webpack5/build-config.ts
index b1271a957150..314dd9463b7f 100644
--- a/code/frameworks/react-webpack5/build-config.ts
+++ b/code/frameworks/react-webpack5/build-config.ts
@@ -7,10 +7,6 @@ const config: BuildEntries = {
         exportEntries: ['.'],
         entryPoint: './src/index.ts',
       },
-      {
-        exportEntries: ['./theming'],
-        entryPoint: './src/theming.ts',
-      },
     ],
     node: [
       {
diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json
index d5c46f6ebb9d..df7d0ce126cc 100644
--- a/code/frameworks/react-webpack5/package.json
+++ b/code/frameworks/react-webpack5/package.json
@@ -37,12 +37,7 @@
       "default": "./dist/node/index.js"
     },
     "./package.json": "./package.json",
-    "./preset": "./dist/preset.js",
-    "./theming": {
-      "types": "./dist/theming.d.ts",
-      "code": "./src/theming.ts",
-      "default": "./dist/theming.js"
-    }
+    "./preset": "./dist/preset.js"
   },
   "files": [
     "dist/**/*",
diff --git a/code/frameworks/react-webpack5/src/theming.ts b/code/frameworks/react-webpack5/src/theming.ts
deleted file mode 100644
index 43d64228b35d..000000000000
--- a/code/frameworks/react-webpack5/src/theming.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from '@storybook/react/theming';
diff --git a/code/frameworks/tanstack-react/build-config.ts b/code/frameworks/tanstack-react/build-config.ts
index e738eb52713f..398558367a6d 100644
--- a/code/frameworks/tanstack-react/build-config.ts
+++ b/code/frameworks/tanstack-react/build-config.ts
@@ -7,10 +7,6 @@ const config: BuildEntries = {
         exportEntries: ['.'],
         entryPoint: './src/index.ts',
       },
-      {
-        exportEntries: ['./theming'],
-        entryPoint: './src/theming.ts',
-      },
       {
         exportEntries: ['./preview'],
         entryPoint: './src/preview.tsx',
diff --git a/code/frameworks/tanstack-react/package.json b/code/frameworks/tanstack-react/package.json
index 354625330c0f..4ff63adb6ef9 100644
--- a/code/frameworks/tanstack-react/package.json
+++ b/code/frameworks/tanstack-react/package.json
@@ -64,11 +64,6 @@
       "types": "./dist/export-mocks/start-storage-context.d.ts",
       "code": "./src/export-mocks/start-storage-context.ts",
       "default": "./dist/export-mocks/start-storage-context.js"
-    },
-    "./theming": {
-      "types": "./dist/theming.d.ts",
-      "code": "./src/theming.ts",
-      "default": "./dist/theming.js"
     }
   },
   "files": [
diff --git a/code/frameworks/tanstack-react/src/theming.ts b/code/frameworks/tanstack-react/src/theming.ts
deleted file mode 100644
index 43d64228b35d..000000000000
--- a/code/frameworks/tanstack-react/src/theming.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from '@storybook/react/theming';
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/index.ts b/code/lib/cli-storybook/src/automigrate/fixes/index.ts
index 48ecc5fe33fb..9655a9edf518 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/index.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/index.ts
@@ -10,7 +10,6 @@ import { componentSubtitle } from './component-subtitle.ts';
 import { eslintPlugin } from './eslint-plugin.ts';
 import { docgenServer } from './docgen-server.ts';
 import { nextjsToNextjsVite } from './nextjs-to-nextjs-vite.ts';
-import { reactThemingImports } from './react-theming-imports.ts';
 import { reactViteToTanstackReact } from './react-vite-to-tanstack-react.ts';
 import { removeChangeDetectionFlag } from './remove-change-detection-flag.ts';
 import { removeExperimentalReview } from './remove-experimental-review.ts';
@@ -51,7 +50,6 @@ export const allFixes: Fix[] = [
   removeChangeDetectionFlag,
   skills,
   docgenServer,
-  reactThemingImports,
 ];
 
 export const commandFixes: CommandFix[] = [csfFactories];
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/react-theming-imports.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/react-theming-imports.test.ts
deleted file mode 100644
index 0d94f04ee4cb..000000000000
--- a/code/lib/cli-storybook/src/automigrate/fixes/react-theming-imports.test.ts
+++ /dev/null
@@ -1,165 +0,0 @@
-import { readFile, writeFile } from 'node:fs/promises';
-import { resolve } from 'node:path';
-
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-
-import { formatExistingFile, JsPackageManager } from 'storybook/internal/common';
-
-import { fs, vol } from 'memfs';
-
-import { checkFix, runFix } from '../helpers/fix-test-utils.ts';
-import { reactThemingImports, rewriteReactThemingImports } from './react-theming-imports.ts';
-
-vi.mock('node:fs/promises', { spy: true });
-vi.mock('storybook/internal/common', { spy: true });
-
-const previewConfigPath = resolve('.storybook/preview.tsx');
-const storyPath = resolve('src/Button.stories.tsx');
-const options = {
-  packageManager: vi.mocked(JsPackageManager.prototype),
-  mainConfig: { stories: [], framework: '@storybook/react-vite' },
-  mainConfigPath: resolve('.storybook/main.ts'),
-  configDir: resolve('.storybook'),
-  storybookVersion: '11.0.0',
-  previewConfigPath,
-  storiesPaths: [storyPath],
-};
-
-describe('rewriteReactThemingImports', () => {
-  const target = '@storybook/react-vite';
-
-  it('points storybook/theming at the framework theming entry and keeps the quote style', () => {
-    expect(
-      rewriteReactThemingImports(
-        `import { ThemeProvider, themes } from 'storybook/theming';\nimport { create } from "storybook/theming/create";`,
-        target
-      )
-    ).toBe(
-      `import { ThemeProvider, themes } from '@storybook/react-vite/theming';\nimport { create } from "storybook/theming/create";`
-    );
-  });
-
-  it('moves withThemeFromJSXProvider to the framework and leaves the other addon decorators', () => {
-    expect(
-      rewriteReactThemingImports(
-        `import addonThemes, { withThemeByClassName, withThemeFromJSXProvider, type ProviderStrategyConfiguration } from '@storybook/addon-themes';`,
-        target
-      )
-    ).toBe(
-      [
-        `import addonThemes, { withThemeByClassName } from '@storybook/addon-themes';`,
-        `import { withThemeFromJSXProvider, type ProviderStrategyConfiguration } from '@storybook/react-vite';`,
-      ].join('\n')
-    );
-  });
-
-  it('retargets an addon import that only has moved specifiers', () => {
-    expect(
-      rewriteReactThemingImports(
-        `import type { ProviderStrategyConfiguration } from '@storybook/addon-themes';`,
-        target
-      )
-    ).toBe(`import type { ProviderStrategyConfiguration } from '@storybook/react-vite';`);
-  });
-
-  it('leaves files that render Storybook UI blocks on storybook/theming', () => {
-    const code = [
-      `import { ArgsTable } from '@storybook/addon-docs/blocks';`,
-      `import { ThemeProvider } from 'storybook/theming';`,
-    ].join('\n');
-
-    expect(rewriteReactThemingImports(code, target)).toBeNull();
-  });
-
-  it('returns null when nothing needs to move', () => {
-    expect(
-      rewriteReactThemingImports(
-        `import { withThemeByDataAttribute } from '@storybook/addon-themes';`,
-        target
-      )
-    ).toBeNull();
-  });
-});
-
-describe('react-theming-imports', () => {
-  beforeEach(() => {
-    vol.reset();
-    vi.mocked(readFile).mockImplementation(fs.promises.readFile as typeof readFile);
-    vi.mocked(writeFile).mockImplementation(fs.promises.writeFile as typeof writeFile);
-    vi.mocked(formatExistingFile).mockImplementation(async (_path, source) => source);
-  });
-
-  afterEach(() => {
-    vi.mocked(readFile).mockRestore();
-    vi.mocked(writeFile).mockRestore();
-  });
-
-  it('does not apply to non-React projects', async () => {
-    vol.fromJSON({
-      [previewConfigPath]: `import { themes } from 'storybook/theming';\nexport default {};`,
-      [storyPath]: 'export default {};',
-    });
-
-    expect(
-      await checkFix(reactThemingImports, {
-        ...options,
-        mainConfig: { stories: [], framework: '@storybook/vue3-vite' },
-      })
-    ).toBeNull();
-  });
-
-  it('does not apply when no preview or story file imports the moved modules', async () => {
-    vol.fromJSON({
-      [previewConfigPath]: `import { create } from 'storybook/theming/create';\nexport default {};`,
-      [storyPath]: 'export default {};',
-    });
-
-    expect(await checkFix(reactThemingImports, options)).toBeNull();
-  });
-
-  it('falls back to @storybook/react for React frameworks without a theming entry', async () => {
-    vol.fromJSON({
-      [previewConfigPath]: `import { themes } from 'storybook/theming';\nexport default {};`,
-      [storyPath]: 'export default {};',
-    });
-
-    expect(
-      await checkFix(reactThemingImports, {
-        ...options,
-        mainConfig: { stories: [], framework: 'storybook-react-rsbuild' },
-      })
-    ).toEqual({ target: '@storybook/react' });
-  });
-
-  it('rewrites the preview and story files but not the manager', async () => {
-    const managerPath = resolve('.storybook/manager.ts');
-    const manager = `import { addons } from 'storybook/manager-api';\nimport { themes } from 'storybook/theming';\naddons.setConfig({ theme: themes.dark });`;
-    vol.fromJSON({
-      [previewConfigPath]: [
-        `import { withThemeFromJSXProvider } from '@storybook/addon-themes';`,
-        `import { ThemeProvider, themes } from 'storybook/theming';`,
-        `export default { decorators: [withThemeFromJSXProvider({ Provider: ThemeProvider, themes })] };`,
-      ].join('\n'),
-      [managerPath]: manager,
-      [storyPath]: `import { themes } from 'storybook/theming';\nexport default { parameters: { docs: { theme: themes.dark } } };`,
-    });
-
-    const failures = await runFix(reactThemingImports, {
-      ...options,
-      result: { target: '@storybook/react-vite' },
-    });
-
-    expect(failures).toEqual([]);
-    expect(fs.readFileSync(previewConfigPath, 'utf8')).toBe(
-      [
-        `import { withThemeFromJSXProvider } from '@storybook/react-vite';`,
-        `import { ThemeProvider, themes } from '@storybook/react-vite/theming';`,
-        `export default { decorators: [withThemeFromJSXProvider({ Provider: ThemeProvider, themes })] };`,
-      ].join('\n')
-    );
-    expect(fs.readFileSync(storyPath, 'utf8')).toBe(
-      `import { themes } from '@storybook/react-vite/theming';\nexport default { parameters: { docs: { theme: themes.dark } } };`
-    );
-    expect(fs.readFileSync(managerPath, 'utf8')).toBe(manager);
-  });
-});
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/react-theming-imports.ts b/code/lib/cli-storybook/src/automigrate/fixes/react-theming-imports.ts
deleted file mode 100644
index eb31ead7aa6a..000000000000
--- a/code/lib/cli-storybook/src/automigrate/fixes/react-theming-imports.ts
+++ /dev/null
@@ -1,149 +0,0 @@
-import { parser, types as t } from 'storybook/internal/babel';
-
-import picocolors from 'picocolors';
-
-import { getFrameworkPackageName, getRendererName } from '../helpers/mainConfigFile.ts';
-import { isAtOrPastVersion } from '../helpers/versionBoundary.ts';
-import type { Fix } from '../types.ts';
-
-const THEMING = 'storybook/theming';
-const ADDON_THEMES = '@storybook/addon-themes';
-const MOVED_FROM_ADDON = ['withThemeFromJSXProvider', 'ProviderStrategyConfiguration'];
-const FRAMEWORKS_WITH_THEMING_ENTRY = [
-  '@storybook/react-vite',
-  '@storybook/react-webpack5',
-  '@storybook/nextjs',
-  '@storybook/nextjs-vite',
-  '@storybook/react-native-web-vite',
-  '@storybook/tanstack-react',
-];
-// Stories that render Storybook's own UI must share its emotion instance, so they keep `storybook/theming`.
-const RENDERS_STORYBOOK_UI =
-  /['"](?:@storybook\/addon-docs\/blocks|storybook\/internal\/components)['"]/;
-
-export interface ReactThemingImportsResult {
-  target: string;
-}
-
-type Edit = { start: number; end: number; text: string };
-
-const parse = (code: string) => {
-  for (const plugins of [['typescript', 'jsx'], ['typescript']] as const) {
-    try {
-      return parser.parse(code, { sourceType: 'module', plugins: [...plugins] });
-    } catch {}
-  }
-  return undefined;
-};
-
-const importedName = (specifier: t.ImportSpecifier) =>
-  t.isIdentifier(specifier.imported) ? specifier.imported.name : specifier.imported.value;
-
-const quoteOf = (source: t.StringLiteral) => (source.extra?.raw as string | undefined)?.[0] ?? "'";
-
-const printImport = (
-  node: t.ImportDeclaration,
-  specifiers: string[],
-  source: string,
-  quote: string
-) => {
-  const kind = node.importKind === 'type' ? 'import type' : 'import';
-  return `${kind} ${specifiers.join(', ')} from ${quote}${source}${quote};`;
-};
-
-const splitAddonImport = (code: string, node: t.ImportDeclaration, target: string): Edit[] => {
-  const moved = node.specifiers.filter(
-    (specifier): specifier is t.ImportSpecifier =>
-      t.isImportSpecifier(specifier) && MOVED_FROM_ADDON.includes(importedName(specifier))
-  );
-  if (moved.length === 0) {
-    return [];
-  }
-  const quote = quoteOf(node.source);
-  const text = (specifier: t.Node) => code.slice(specifier.start!, specifier.end!);
-  const movedImport = printImport(node, [`{ ${moved.map(text).join(', ')} }`], target, quote);
-  if (moved.length === node.specifiers.length) {
-    return [
-      { start: node.source.start!, end: node.source.end!, text: `${quote}${target}${quote}` },
-    ];
-  }
-  const remaining = node.specifiers.filter(
-    (specifier) => !moved.includes(specifier as t.ImportSpecifier)
-  );
-  const named = remaining.filter((specifier) => t.isImportSpecifier(specifier)).map(text);
-  const others = remaining.filter((specifier) => !t.isImportSpecifier(specifier)).map(text);
-  const keptImport = printImport(
-    node,
-    [...others, ...(named.length > 0 ? [`{ ${named.join(', ')} }`] : [])],
-    ADDON_THEMES,
-    quote
-  );
-  return [{ start: node.start!, end: node.end!, text: `${keptImport}\n${movedImport}` }];
-};
-
-export const rewriteReactThemingImports = (code: string, target: string): string | null => {
-  const ast = parse(code);
-  if (!ast) {
-    return null;
-  }
-  const keepTheming = RENDERS_STORYBOOK_UI.test(code);
-  const edits: Edit[] = [];
-  for (const node of ast.program.body) {
-    if (!t.isImportDeclaration(node)) {
-      continue;
-    }
-    if (node.source.value === THEMING && !keepTheming) {
-      const quote = quoteOf(node.source);
-      edits.push({
-        start: node.source.start!,
-        end: node.source.end!,
-        text: `${quote}${target}/theming${quote}`,
-      });
-    }
-    if (node.source.value === ADDON_THEMES) {
-      edits.push(...splitAddonImport(code, node, target));
-    }
-  }
-  if (edits.length === 0) {
-    return null;
-  }
-  return edits
-    .sort((a, b) => b.start - a.start)
-    .reduce(
-      (result, { start, end, text }) => result.slice(0, start) + text + result.slice(end),
-      code
-    );
-};
-
-export const reactThemingImports: Fix<ReactThemingImportsResult> = {
-  id: 'react-theming-imports',
-  link: 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-preview-code-storybooktheming-and-withthemefromjsxprovider-moved-to-the-react-renderer',
-
-  async check({ mainConfig, storybookVersion }) {
-    if (!isAtOrPastVersion(storybookVersion, '11.0.0') || getRendererName(mainConfig) !== 'react') {
-      return null;
-    }
-    const framework = getFrameworkPackageName(mainConfig);
-    return {
-      target:
-        framework && FRAMEWORKS_WITH_THEMING_ENTRY.includes(framework)
-          ? framework
-          : '@storybook/react',
-    };
-  },
-
-  prompt(result) {
-    const target = result?.target ?? '@storybook/react';
-    return `In preview and story files, import ${picocolors.cyan('withThemeFromJSXProvider')} from ${picocolors.cyan(target)} instead of ${picocolors.cyan(ADDON_THEMES)}, and ${picocolors.cyan(`${target}/theming`)} instead of ${picocolors.cyan(THEMING)}. Manager files keep ${picocolors.cyan(THEMING)}.`;
-  },
-
-  transform: ({ result }) => [
-    {
-      filter: {
-        kind: ['preview', 'story'],
-        code: /storybook\/theming|withThemeFromJSXProvider|ProviderStrategyConfiguration/,
-      },
-      handler: (code) => rewriteReactThemingImports(code, result.target),
-    },
-  ],
-};
diff --git a/code/renderers/react/build-config.ts b/code/renderers/react/build-config.ts
index 1a27ab27e273..38bdf25ff3b0 100644
--- a/code/renderers/react/build-config.ts
+++ b/code/renderers/react/build-config.ts
@@ -1,7 +1,3 @@
-import { writeFile } from 'node:fs/promises';
-
-import { join } from 'pathe';
-
 import type { BuildEntries } from '../../../scripts/build/utils/entry-utils.ts';
 
 const config: BuildEntries = {
@@ -15,10 +11,6 @@ const config: BuildEntries = {
         exportEntries: ['./preview'],
         entryPoint: './src/preview.tsx',
       },
-      {
-        exportEntries: ['./theming'],
-        entryPoint: './src/theming.ts',
-      },
       {
         exportEntries: ['./entry-preview'],
         entryPoint: './src/entry-preview.tsx',
@@ -56,10 +48,6 @@ const config: BuildEntries = {
       },
     ],
   },
-  // Inlined declarations drop the Theme merge (`declare module '.'` in core theming).
-  postbuild: async (cwd) => {
-    await writeFile(join(cwd, 'dist/theming.d.ts'), "export * from 'storybook/theming';\n");
-  },
 };
 
 export default config;
diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json
index 465f214c118a..bdb8bf47d3ff 100644
--- a/code/renderers/react/package.json
+++ b/code/renderers/react/package.json
@@ -37,11 +37,6 @@
       "types": "./dist/preview.d.ts",
       "code": "./src/preview.tsx",
       "default": "./dist/preview.js"
-    },
-    "./theming": {
-      "types": "./dist/theming.d.ts",
-      "code": "./src/theming.ts",
-      "default": "./dist/theming.js"
     }
   },
   "files": [
@@ -58,10 +53,6 @@
     "react-docgen-typescript": "^2.2.2"
   },
   "devDependencies": {
-    "@emotion/cache": "^11.14.0",
-    "@emotion/is-prop-valid": "^1.3.1",
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
     "@types/babel-plugin-react-docgen": "^4.2.3",
     "@types/escodegen": "^0.0.6",
     "@types/estree": "^1.0.6",
@@ -73,15 +64,12 @@
     "acorn-walk": "^7.2.0",
     "babel-plugin-react-docgen": "^4.2.1",
     "comment-parser": "^1.4.1",
-    "deep-object-diff": "^1.1.0",
     "empathic": "^2.0.0",
     "es-toolkit": "^1.43.0",
     "escodegen": "^2.1.0",
     "expect-type": "^0.15.0",
     "html-tags": "^3.1.0",
     "memfs": "^4.11.1",
-    "memoizerific": "^1.11.3",
-    "polished": "^4.2.2",
     "prop-types": "^15.7.2",
     "react-element-to-jsx-string": "patch:react-element-to-jsx-string@npm%3A@7rulnik/react-element-to-jsx-string@15.0.1#~/.yarn/patches/@7rulnik-react-element-to-jsx-string-npm-15.0.1-e53b67c4b3.patch",
     "require-from-string": "^2.0.2",
diff --git a/code/renderers/react/src/index.ts b/code/renderers/react/src/index.ts
index b6c984f015ee..76487f79d541 100644
--- a/code/renderers/react/src/index.ts
+++ b/code/renderers/react/src/index.ts
@@ -6,6 +6,4 @@ export * from './portable-stories.tsx';
 
 export * from './preview.tsx';
 
-export * from './withThemeFromJSXProvider.tsx';
-
 export type { ReactTypes } from './types.ts';
diff --git a/code/renderers/react/src/preset.ts b/code/renderers/react/src/preset.ts
index 647c3dabb396..cdfe78f82838 100644
--- a/code/renderers/react/src/preset.ts
+++ b/code/renderers/react/src/preset.ts
@@ -6,6 +6,7 @@ import type { ArgTypes } from 'storybook/internal/csf';
 import type { Options, PresetProperty } from 'storybook/internal/types';
 
 import { resolvePackageDir } from '../../../core/src/shared/utils/module.ts';
+import { aliasReactInWebpack, prependReactDedupePlugin } from './preview-react-alias.ts';
 import { extractArgTypesFromDocgen } from './componentManifest/reactDocgen/extractReactDocgenInfo.ts';
 import { extractArgTypesFromDocgenTypescript } from './componentManifest/reactDocgen/extractReactTypescriptDocgenInfo.ts';
 import type {
@@ -93,6 +94,34 @@ export const resolvedReact = async (existing: any) => {
   }
 };
 
+const readReactAliasTarget = async (options: Options) => {
+  const resolved = (await options.presets.apply('resolvedReact', {})) as {
+    react?: string;
+    reactDom?: string;
+  };
+  if (!resolved?.react || !resolved.reactDom) {
+    return null;
+  }
+  return { react: resolved.react, reactDom: resolved.reactDom };
+};
+
+export const viteFinal = async (config: { plugins?: unknown[] } = {}, options: Options) => {
+  const target = await readReactAliasTarget(options);
+  return target ? prependReactDedupePlugin(config, target) : config;
+};
+
+export async function webpack(
+  config: {
+    resolve?: {
+      alias?: Record<string, string> | Array<{ name: string; alias: string }>;
+    };
+  } = {},
+  options: Options
+) {
+  const target = await readReactAliasTarget(options);
+  return target ? aliasReactInWebpack(config, target) : config;
+}
+
 export async function internal_getArgTypesData(
   _input: unknown,
   options: InternalGetArgTypesDataOptions
diff --git a/code/renderers/react/src/preview-react-alias.test.ts b/code/renderers/react/src/preview-react-alias.test.ts
new file mode 100644
index 000000000000..55021b1ba4be
--- /dev/null
+++ b/code/renderers/react/src/preview-react-alias.test.ts
@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  aliasReactInWebpack,
+  prependReactDedupePlugin,
+  reactResolveAlias,
+} from './preview-react-alias.ts';
+
+const target = { react: '/app/react', reactDom: '/app/react-dom' };
+
+describe('react preview alias', () => {
+  it('points react and react-dom at absolute directories', () => {
+    expect(reactResolveAlias(target)).toEqual({
+      react: '/app/react',
+      'react-dom/server': '/app/react-dom/server.browser.js',
+      'react-dom': '/app/react-dom',
+    });
+  });
+
+  it('leaves react-dom/server unset when react-dom is a package name', () => {
+    expect(reactResolveAlias({ react: 'preact/compat', reactDom: 'preact/compat' })).toEqual({
+      react: 'preact/compat',
+      'react-dom': 'preact/compat',
+    });
+  });
+
+  it('prepends the vite plugin so a later plugin can replace the alias', () => {
+    const later = { name: 'later' };
+    const config = prependReactDedupePlugin({ plugins: [later] }, target);
+    expect(config.plugins?.[0]).toMatchObject({ name: 'storybook:react-dedupe', enforce: 'pre' });
+    expect(config.plugins?.[1]).toBe(later);
+    const plugin = config.plugins?.[0] as { config: () => { resolve: { alias: unknown } } };
+    expect(plugin.config().resolve.alias).toEqual(reactResolveAlias(target));
+  });
+
+  it('sets the webpack alias without dropping an existing entry', () => {
+    expect(
+      aliasReactInWebpack({ resolve: { alias: { vue: '/vue' } } }, target).resolve?.alias
+    ).toEqual({
+      vue: '/vue',
+      ...reactResolveAlias(target),
+    });
+  });
+});
diff --git a/code/renderers/react/src/preview-react-alias.ts b/code/renderers/react/src/preview-react-alias.ts
new file mode 100644
index 000000000000..21857d386bbb
--- /dev/null
+++ b/code/renderers/react/src/preview-react-alias.ts
@@ -0,0 +1,63 @@
+import { isAbsolute } from 'node:path';
+
+export type ReactAliasTarget = {
+  react: string;
+  reactDom: string;
+};
+
+export const reactResolveAlias = ({ react, reactDom }: ReactAliasTarget) => ({
+  react,
+  ...(isAbsolute(reactDom) ? { 'react-dom/server': `${reactDom}/server.browser.js` } : {}),
+  'react-dom': reactDom,
+});
+
+export const reactDedupeVitePlugin = (target: ReactAliasTarget) => ({
+  name: 'storybook:react-dedupe',
+  enforce: 'pre' as const,
+  config: () => ({
+    resolve: {
+      alias: reactResolveAlias(target),
+    },
+  }),
+});
+
+type ViteAliasConfig = {
+  plugins?: unknown[];
+};
+
+// Prepend so a later framework plugin can replace the alias. Next.js points react at its compiled build.
+export const prependReactDedupePlugin = <T extends ViteAliasConfig>(
+  config: T,
+  target: ReactAliasTarget
+): T => ({
+  ...config,
+  plugins: [reactDedupeVitePlugin(target), ...(config.plugins ?? [])],
+});
+
+type WebpackAliasConfig = {
+  resolve?: {
+    alias?: Record<string, string> | Array<{ name: string; alias: string }>;
+  };
+};
+
+export const aliasReactInWebpack = <T extends WebpackAliasConfig>(
+  config: T,
+  target: ReactAliasTarget
+): T => {
+  const alias = reactResolveAlias(target);
+  const current = config.resolve?.alias;
+  const nextAlias = Array.isArray(current)
+    ? [
+        ...current,
+        ...Object.entries(alias).map(([name, aliasPath]) => ({ name, alias: aliasPath })),
+      ]
+    : { ...current, ...alias };
+
+  return {
+    ...config,
+    resolve: {
+      ...config.resolve,
+      alias: nextAlias,
+    },
+  };
+};
diff --git a/code/renderers/react/src/theming.test.ts b/code/renderers/react/src/theming.test.ts
deleted file mode 100644
index 7aab8573598a..000000000000
--- a/code/renderers/react/src/theming.test.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { existsSync, readFileSync } from 'node:fs';
-import { join } from 'node:path';
-
-import { describe, expect, it } from 'vitest';
-
-const declaration = join(import.meta.dirname, '../dist/theming.d.ts');
-const bundle = join(import.meta.dirname, '../dist/theming.js');
-const built = existsSync(declaration) && existsSync(bundle);
-
-describe('@storybook/react/theming build', () => {
-  it.runIf(process.env.CI)('is built before this suite runs', () => {
-    expect(built).toBe(true);
-  });
-
-  it.runIf(built)('re-exports storybook/theming types', () => {
-    expect(readFileSync(declaration, 'utf8')).toBe("export * from 'storybook/theming';\n");
-  });
-
-  it.runIf(built)('bundles the theming runtime', () => {
-    const source = readFileSync(bundle, 'utf8');
-    expect(source).not.toMatch(/from ["']storybook\/theming["']/);
-    expect(source).toMatch(/from ["']react["']/);
-  });
-});
diff --git a/code/renderers/react/src/theming.ts b/code/renderers/react/src/theming.ts
deleted file mode 100644
index 2ebd0dbafc4d..000000000000
--- a/code/renderers/react/src/theming.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from '../../../core/src/theming/index.ts';
diff --git a/code/renderers/react/template/stories/theming.stories.tsx b/code/renderers/react/template/stories/theming.stories.tsx
deleted file mode 100644
index b5d9f826fcc8..000000000000
--- a/code/renderers/react/template/stories/theming.stories.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React, { createContext, useContext } from 'react';
-
-import type { Meta, StoryObj } from '@storybook/react';
-import { withThemeFromJSXProvider } from '@storybook/react';
-import { ThemeProvider, convert, styled, themes, useTheme } from '@storybook/react/theming';
-
-import { expect } from 'storybook/test';
-
-const PaletteContext = createContext({ name: 'none', background: 'transparent' });
-
-const PaletteProvider = ({
-  theme,
-  children,
-}: {
-  theme: { name: string; background: string };
-  children: React.ReactNode;
-}) => <PaletteContext.Provider value={theme}>{children}</PaletteContext.Provider>;
-
-const Swatch = () => {
-  const palette = useContext(PaletteContext);
-  return (
-    <p data-testid="swatch" style={{ background: palette.background, padding: 16 }}>
-      {palette.name}
-    </p>
-  );
-};
-
-const Panel = styled.div(({ theme }) => ({
-  background: theme.background.content,
-  color: theme.color.defaultText,
-  padding: 16,
-}));
-
-const ThemeName = () => {
-  const theme = useTheme();
-  return <Panel data-testid="panel">{theme.base}</Panel>;
-};
-
-const meta = {
-  title: 'theming',
-  parameters: {
-    chromatic: { disableSnapshot: true },
-    themes: { disable: false },
-  },
-} satisfies Meta;
-
-export default meta;
-
-export const WithThemeFromJSXProvider: StoryObj = {
-  decorators: [
-    withThemeFromJSXProvider({
-      defaultTheme: 'b',
-      themes: {
-        a: { name: 'theme-a', background: 'white' },
-        b: { name: 'theme-b', background: 'black' },
-      },
-      Provider: PaletteProvider,
-    }),
-  ],
-  render: () => <Swatch />,
-  play: async ({ canvas }) => {
-    await expect(canvas.getByTestId('swatch')).toHaveTextContent('theme-b');
-  },
-};
-
-export const StorybookThemeProvider: StoryObj = {
-  decorators: [
-    (Story) => (
-      <ThemeProvider theme={convert(themes.dark)}>
-        <Story />
-      </ThemeProvider>
-    ),
-  ],
-  render: () => <ThemeName />,
-  play: async ({ canvas }) => {
-    await expect(canvas.getByTestId('panel')).toHaveTextContent('dark');
-  },
-};
diff --git a/docs/_snippets/storybook-addon-themes-jsx-provider-decorator.md b/docs/_snippets/storybook-addon-themes-jsx-provider-decorator.md
index b1329d578ec5..e438d97fd52f 100644
--- a/docs/_snippets/storybook-addon-themes-jsx-provider-decorator.md
+++ b/docs/_snippets/storybook-addon-themes-jsx-provider-decorator.md
@@ -1,6 +1,5 @@
-```js filename=".storybook/preview.js|jsx" renderer="react" language="js" tabTitle="CSF 3"
-// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
-import { withThemeFromJSXProvider } from '@storybook/your-framework';
+```js filename=".storybook/preview.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
+import { withThemeFromJSXProvider } from '@storybook/addon-themes';
 
 import { createGlobalStyle, ThemeProvider } from 'styled-components';
 import { lightTheme, darkTheme } from '../src/themes';
@@ -28,9 +27,11 @@ const preview = {
 export default preview;
 ```
 
-```ts filename=".storybook/preview.ts|tsx" renderer="react" language="ts" tabTitle="CSF 3"
-// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
-import { Preview, Renderer, withThemeFromJSXProvider } from '@storybook/your-framework';
+```ts filename=".storybook/preview.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
+import { Preview, Renderer } from '@storybook/your-framework';
+
+import { withThemeFromJSXProvider } from '@storybook/addon-themes';
 
 import { createGlobalStyle, ThemeProvider } from 'styled-components';
 import { lightTheme, darkTheme } from '../src/themes';
@@ -60,7 +61,7 @@ export default preview;
 
 ```ts filename=".storybook/preview.tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 // Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
-import { Renderer, definePreview, withThemeFromJSXProvider } from '@storybook/your-framework';
+import { Renderer, definePreview } from '@storybook/your-framework';
 
 import addonThemes from '@storybook/addon-themes';
 
@@ -77,7 +78,7 @@ const GlobalStyles = createGlobalStyle`
 export default definePreview({
   addons: [addonThemes()],
   decorators: [
-    withThemeFromJSXProvider<Renderer>({
+    addonThemes.withThemeFromJSXProvider<Renderer>({
       themes: {
         light: lightTheme,
         dark: darkTheme,
@@ -94,7 +95,7 @@ export default definePreview({
 
 ```js filename=".storybook/preview.jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 // Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
-import { definePreview, withThemeFromJSXProvider } from '@storybook/your-framework';
+import { definePreview } from '@storybook/your-framework';
 
 import addonThemes from '@storybook/addon-themes';
 
@@ -111,7 +112,7 @@ const GlobalStyles = createGlobalStyle`
 export default definePreview({
   addons: [addonThemes()],
   decorators: [
-    withThemeFromJSXProvider({
+    addonThemes.withThemeFromJSXProvider({
       themes: {
         light: lightTheme,
         dark: darkTheme,
diff --git a/docs/_snippets/storybook-preview-auto-docs-override-theme.md b/docs/_snippets/storybook-preview-auto-docs-override-theme.md
index b2693588409d..c9e8dee5fba3 100644
--- a/docs/_snippets/storybook-preview-auto-docs-override-theme.md
+++ b/docs/_snippets/storybook-preview-auto-docs-override-theme.md
@@ -1,5 +1,5 @@
 ```js filename=".storybook/preview.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
-import { themes } from 'storybook/theming/create';
+import { themes, ensure } from 'storybook/theming';
 
 export default {
   parameters: {
@@ -10,7 +10,7 @@ export default {
       },
     },
     docs: {
-      theme: themes.dark, // The replacement theme to use
+      theme: ensure(themes.dark), // The replacement theme to use
     },
   },
 };
@@ -19,7 +19,7 @@ export default {
 ```ts filename=".storybook/preview.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
-import { themes } from 'storybook/theming/create';
+import { themes, ensure } from 'storybook/theming';
 
 const preview: Preview = {
   parameters: {
@@ -30,7 +30,7 @@ const preview: Preview = {
       },
     },
     docs: {
-      theme: themes.dark, // The replacement theme to use
+      theme: ensure(themes.dark), // The replacement theme to use
     },
   },
 };
@@ -42,7 +42,7 @@ export default preview;
 // Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
 import { definePreview } from '@storybook/your-framework';
 import addonDocs from '@storybook/addon-docs';
-import { themes } from 'storybook/theming/create';
+import { ensure, themes } from 'storybook/theming';
 
 export default definePreview({
   addons: [addonDocs()],
@@ -54,7 +54,7 @@ export default definePreview({
       },
     },
     docs: {
-      theme: themes.dark, // The replacement theme to use
+      theme: ensure(themes.dark), // The replacement theme to use
     },
   },
 });
@@ -66,7 +66,7 @@ export default definePreview({
 // Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
 import { definePreview } from '@storybook/your-framework';
 import addonDocs from '@storybook/addon-docs';
-import { themes } from 'storybook/theming/create';
+import { ensure, themes } from 'storybook/theming';
 
 export default definePreview({
   addons: [addonDocs()],
@@ -78,7 +78,7 @@ export default definePreview({
       },
     },
     docs: {
-      theme: themes.dark, // The replacement theme to use
+      theme: ensure(themes.dark), // The replacement theme to use
     },
   },
 });
@@ -87,7 +87,7 @@ export default definePreview({
 ```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
 import { definePreview } from '@storybook/vue3-vite';
 import addonDocs from '@storybook/addon-docs';
-import { themes } from 'storybook/theming/create';
+import { ensure, themes } from 'storybook/theming';
 
 export default definePreview({
   addons: [addonDocs()],
@@ -99,7 +99,7 @@ export default definePreview({
       },
     },
     docs: {
-      theme: themes.dark, // The replacement theme to use
+      theme: ensure(themes.dark), // The replacement theme to use
     },
   },
 });
@@ -110,7 +110,7 @@ export default definePreview({
 ```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
 import { definePreview } from '@storybook/vue3-vite';
 import addonDocs from '@storybook/addon-docs';
-import { themes } from 'storybook/theming/create';
+import { ensure, themes } from 'storybook/theming';
 
 export default definePreview({
   addons: [addonDocs()],
@@ -122,7 +122,7 @@ export default definePreview({
       },
     },
     docs: {
-      theme: themes.dark, // The replacement theme to use
+      theme: ensure(themes.dark), // The replacement theme to use
     },
   },
 });
@@ -131,7 +131,7 @@ export default definePreview({
 ```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
 import { definePreview } from '@storybook/angular';
 import addonDocs from '@storybook/addon-docs';
-import { themes } from 'storybook/theming/create';
+import { ensure, themes } from 'storybook/theming';
 
 export default definePreview({
   addons: [addonDocs()],
@@ -143,7 +143,7 @@ export default definePreview({
       },
     },
     docs: {
-      theme: themes.dark, // The replacement theme to use
+      theme: ensure(themes.dark), // The replacement theme to use
     },
   },
 });
@@ -152,7 +152,7 @@ export default definePreview({
 ```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
 import { definePreview } from '@storybook/web-components-vite';
 import addonDocs from '@storybook/addon-docs';
-import { themes } from 'storybook/theming/create';
+import { ensure, themes } from 'storybook/theming';
 
 export default definePreview({
   addons: [addonDocs()],
@@ -164,7 +164,7 @@ export default definePreview({
       },
     },
     docs: {
-      theme: themes.dark, // The replacement theme to use
+      theme: ensure(themes.dark), // The replacement theme to use
     },
   },
 });
@@ -175,7 +175,7 @@ export default definePreview({
 ```js filename=".storybook/preview.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
 import { definePreview } from '@storybook/web-components-vite';
 import addonDocs from '@storybook/addon-docs';
-import { themes } from 'storybook/theming/create';
+import { ensure, themes } from 'storybook/theming';
 
 export default definePreview({
   addons: [addonDocs()],
@@ -187,7 +187,7 @@ export default definePreview({
       },
     },
     docs: {
-      theme: themes.dark, // The replacement theme to use
+      theme: ensure(themes.dark), // The replacement theme to use
     },
   },
 });
diff --git a/docs/_snippets/storybook-preview-docs-dark-theme.md b/docs/_snippets/storybook-preview-docs-dark-theme.md
index 425916cdb8fa..458243ed5215 100644
--- a/docs/_snippets/storybook-preview-docs-dark-theme.md
+++ b/docs/_snippets/storybook-preview-docs-dark-theme.md
@@ -1,5 +1,5 @@
 ```js filename=".storybook/preview.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
-import { themes } from 'storybook/theming/create';
+import { themes } from 'storybook/theming';
 
 export default {
   parameters: {
@@ -14,7 +14,7 @@ export default {
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Preview } from '@storybook/your-framework';
 
-import { themes } from 'storybook/theming/create';
+import { themes } from 'storybook/theming';
 
 const preview: Preview = {
   parameters: {
@@ -32,7 +32,7 @@ export default preview;
 import { definePreview } from '@storybook/your-framework';
 import addonDocs from '@storybook/addon-docs';
 
-import { themes } from 'storybook/theming/create';
+import { themes } from 'storybook/theming';
 
 export default definePreview({
   addons: [addonDocs()],
@@ -51,7 +51,7 @@ export default definePreview({
 import { definePreview } from '@storybook/your-framework';
 import addonDocs from '@storybook/addon-docs';
 
-import { themes } from 'storybook/theming/create';
+import { themes } from 'storybook/theming';
 
 export default definePreview({
   addons: [addonDocs()],
@@ -67,7 +67,7 @@ export default definePreview({
 import { definePreview } from '@storybook/vue3-vite';
 import addonDocs from '@storybook/addon-docs';
 
-import { themes } from 'storybook/theming/create';
+import { themes } from 'storybook/theming';
 
 export default definePreview({
   addons: [addonDocs()],
@@ -85,7 +85,7 @@ export default definePreview({
 import { definePreview } from '@storybook/vue3-vite';
 import addonDocs from '@storybook/addon-docs';
 
-import { themes } from 'storybook/theming/create';
+import { themes } from 'storybook/theming';
 
 export default definePreview({
   addons: [addonDocs()],
@@ -101,7 +101,7 @@ export default definePreview({
 import { definePreview } from '@storybook/angular';
 import addonDocs from '@storybook/addon-docs';
 
-import { themes } from 'storybook/theming/create';
+import { themes } from 'storybook/theming';
 
 export default definePreview({
   addons: [addonDocs()],
@@ -117,7 +117,7 @@ export default definePreview({
 import { definePreview } from '@storybook/web-components-vite';
 import addonDocs from '@storybook/addon-docs';
 
-import { themes } from 'storybook/theming/create';
+import { themes } from 'storybook/theming';
 
 export default definePreview({
   addons: [addonDocs()],
@@ -135,7 +135,7 @@ export default definePreview({
 import { definePreview } from '@storybook/web-components-vite';
 import addonDocs from '@storybook/addon-docs';
 
-import { themes } from 'storybook/theming/create';
+import { themes } from 'storybook/theming';
 
 export default definePreview({
   addons: [addonDocs()],
diff --git a/docs/api/portable-stories/portable-stories-jest.mdx b/docs/api/portable-stories/portable-stories-jest.mdx
index 93518c931516..9c7c483f0cc5 100644
--- a/docs/api/portable-stories/portable-stories-jest.mdx
+++ b/docs/api/portable-stories/portable-stories-jest.mdx
@@ -179,7 +179,7 @@ These are the configurations needed in the setup file:
 
 Sometimes a story can require an addon's [decorator](../../writing-stories/decorators.mdx) or [loader](../../writing-stories/loaders.mdx) to render properly. For example, an addon can apply a decorator that wraps your story in the necessary router context. In this case, you must include that addon's `preview` export in the project annotations set. See `addonAnnotations` in the example above.
 
-Note: If the addon doesn't automatically apply the decorator or loader itself, but instead exports them for you to apply manually in `.storybook/preview.*` (e.g. using the [`withThemeFromJSXProvider` decorator](https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#withthemefromjsxprovider) from your React framework package), then you do not need to do anything else. They are already included in the `previewAnnotations` in the example above.
+Note: If the addon doesn't automatically apply the decorator or loader itself, but instead exports them for you to apply manually in `.storybook/preview.*` (e.g. using `withThemeFromJSXProvider` from [@storybook/addon-themes](https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#withthemefromjsxprovider)), then you do not need to do anything else. They are already included in the `previewAnnotations` in the example above.
 
 If you need to configure Testing Library's `render` or use a different render function, please let us know in [this discussion](https://github.com/storybookjs/storybook/discussions/28532) so we can learn more about your needs.
 
diff --git a/docs/api/portable-stories/portable-stories-vitest.mdx b/docs/api/portable-stories/portable-stories-vitest.mdx
index 4e7f5e21bfe5..0bfa37174a28 100644
--- a/docs/api/portable-stories/portable-stories-vitest.mdx
+++ b/docs/api/portable-stories/portable-stories-vitest.mdx
@@ -192,7 +192,7 @@ These are the configurations needed in the setup file:
 
 Sometimes a story can require an addon's [decorator](../../writing-stories/decorators.mdx) or [loader](../../writing-stories/loaders.mdx) to render properly. For example, an addon can apply a decorator that wraps your story in the necessary router context. In this case, you must include that addon's `preview` export in the project annotations set. See `addonAnnotations` in the example above.
 
-Note: If the addon doesn't automatically apply the decorator or loader itself, but instead exports them for you to apply manually in `.storybook/preview.*` (e.g. using the [`withThemeFromJSXProvider` decorator](https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#withthemefromjsxprovider) from your React framework package), then you do not need to do anything else. They are already included in the `previewAnnotations` in the example above.
+Note: If the addon doesn't automatically apply the decorator or loader itself, but instead exports them for you to apply manually in `.storybook/preview.*` (e.g. using `withThemeFromJSXProvider` from [@storybook/addon-themes](https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#withthemefromjsxprovider)), then you do not need to do anything else. They are already included in the `previewAnnotations` in the example above.
 
 If you need to configure Testing Library's `render` or use a different render function, please let us know in [this discussion](https://github.com/storybookjs/storybook/discussions/28532) so we can learn more about your needs.
 
diff --git a/docs/configure/styling-and-css.mdx b/docs/configure/styling-and-css.mdx
index d9fc21996f03..7476ae884b38 100644
--- a/docs/configure/styling-and-css.mdx
+++ b/docs/configure/styling-and-css.mdx
@@ -91,7 +91,7 @@ If you're using Webpack and want to use Sass or Less, you'll need some extra con
 
 ## CSS-in-JS
 
-CSS-in-JS libraries are designed to use basic JavaScript, and they often work in Storybook without any extra configuration. Some libraries expect components to render in a specific rendering “context” (for example, to provide themes), which can be accomplished with the [`withThemeFromJSXProvider` decorator](https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#withthemefromjsxprovider) exported by your React framework package and driven by `@storybook/addon-themes`.
+CSS-in-JS libraries are designed to use basic JavaScript, and they often work in Storybook without any extra configuration. Some libraries expect components to render in a specific rendering “context” (for example, to provide themes), which can be accomplished with `@storybook/addon-themes`'s [`withThemeFromJSXProvider` decorator](https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#withthemefromjsxprovider).
 
 ## Adding webfonts
 
diff --git a/docs/configure/user-interface/theming.mdx b/docs/configure/user-interface/theming.mdx
index 33a7feef571f..cde06e877803 100644
--- a/docs/configure/user-interface/theming.mdx
+++ b/docs/configure/user-interface/theming.mdx
@@ -30,8 +30,6 @@ Here's how you'd specify the same theme for docs in [`.storybook/preview.js`](..
 
 <CodeSnippets path="storybook-preview-docs-dark-theme.md" />
 
-Preview code imports the built-in themes from `storybook/theming/create`, which does not depend on React. The full `storybook/theming` module is for manager code; React projects that need its Emotion exports (`ThemeProvider`, `styled`, `ensure`, …) inside stories or decorators import them from their framework package instead, for example `@storybook/react-vite/theming`.
-
 Continue to read if you want to learn how to create your theme.
 
 ## Create a theme quickstart
diff --git a/docs/essentials/themes.mdx b/docs/essentials/themes.mdx
index cf09290c44aa..03cbe6da955a 100644
--- a/docs/essentials/themes.mdx
+++ b/docs/essentials/themes.mdx
@@ -15,7 +15,7 @@ To make your themes accessible to your stories, `@storybook/addon-themes` expose
 
 ### JSX providers
 
-For libraries that expose themes to components through providers, such as [Material UI](https://storybook.js.org/recipes/@mui/material/), [Styled-components](https://storybook.js.org/recipes/styled-components/), and [Emotion](https://storybook.js.org/recipes/@emotion/styled/), use the `withThemeFromJSXProvider`. Because it renders JSX, this decorator is exported by your React framework package (for example `@storybook/react-vite`) rather than by the addon.
+For libraries that expose themes to components through providers, such as [Material UI](https://storybook.js.org/recipes/@mui/material/), [Styled-components](https://storybook.js.org/recipes/styled-components/), and [Emotion](https://storybook.js.org/recipes/@emotion/styled/), use the `withThemeFromJSXProvider`.
 
 <CodeSnippets path="storybook-addon-themes-jsx-provider-decorator.md" />
 
diff --git a/scripts/build/build-package.ts b/scripts/build/build-package.ts
index 17ee6e27f891..440ad67754ac 100755
--- a/scripts/build/build-package.ts
+++ b/scripts/build/build-package.ts
@@ -111,11 +111,6 @@ async function run() {
     }),
   ]);
 
-  if (!isWatch && entry.postbuild) {
-    console.log('Running postbuild script');
-    await entry.postbuild(DIR_CWD);
-  }
-
   if (prebuildTime) {
     console.log(`Prebuild script completed in`, picocolors.yellow(prettyTime(prebuildTime)));
   }
diff --git a/scripts/build/utils/entry-utils.ts b/scripts/build/utils/entry-utils.ts
index 079210ccd91a..8378efda9b6e 100644
--- a/scripts/build/utils/entry-utils.ts
+++ b/scripts/build/utils/entry-utils.ts
@@ -57,8 +57,7 @@ export type BuildEntries = {
   /**
    * The function to run after each successful build (works with watch-mode)
    *
-   * @note In a production build this runs after declaration emit, so it can replace a generated
-   * d.ts. In watch mode it runs from the bundler's rebuild hook; declarations are not emitted.
+   * @note this runs **after** each successful build, even in watch-mode
    */
   postbuild?: (cwd: string) => Promise<void>;
 };
diff --git a/scripts/build/utils/generate-bundle.ts b/scripts/build/utils/generate-bundle.ts
index 0941827b6aeb..a220036ebf2e 100644
--- a/scripts/build/utils/generate-bundle.ts
+++ b/scripts/build/utils/generate-bundle.ts
@@ -136,8 +136,7 @@ export async function generateBundle({
         name: 'postbuild',
         setup(build) {
           build.onEnd(async (result) => {
-            // Production runs postbuild once, after declaration emit, in build-package.
-            if (!isWatch || !postbuild) {
+            if (!postbuild) {
               return;
             }
             if (result.errors.length) {
diff --git a/yarn.lock b/yarn.lock
index 65af76582431..65d54913d50a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10885,10 +10885,6 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/react@workspace:code/renderers/react"
   dependencies:
-    "@emotion/cache": "npm:^11.14.0"
-    "@emotion/is-prop-valid": "npm:^1.3.1"
-    "@emotion/react": "npm:^11.14.0"
-    "@emotion/styled": "npm:^11.14.0"
     "@storybook/global": "npm:^5.0.0"
     "@types/babel-plugin-react-docgen": "npm:^4.2.3"
     "@types/escodegen": "npm:^0.0.6"
@@ -10901,15 +10897,12 @@ __metadata:
     acorn-walk: "npm:^7.2.0"
     babel-plugin-react-docgen: "npm:^4.2.1"
     comment-parser: "npm:^1.4.1"
-    deep-object-diff: "npm:^1.1.0"
     empathic: "npm:^2.0.0"
     es-toolkit: "npm:^1.43.0"
     escodegen: "npm:^2.1.0"
     expect-type: "npm:^0.15.0"
     html-tags: "npm:^3.1.0"
     memfs: "npm:^4.11.1"
-    memoizerific: "npm:^1.11.3"
-    polished: "npm:^4.2.2"
     prop-types: "npm:^15.7.2"
     react-docgen: "npm:^8.0.2"
     react-docgen-typescript: "npm:^2.2.2"

From 795585654572828302ce38ebbac82c67ae347593 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Mon, 19 Oct 2026 15:56:58 +0200
Subject: [PATCH 191/326] React: Drop the theming migration note from this
 approach

---
 MIGRATION.md | 23 -----------------------
 1 file changed, 23 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 08676d51127a..d113f70da386 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -14,7 +14,6 @@
   - [Toolbar `globalTypes` entries: index signature and `defaultValue` removed](#toolbar-globaltypes-entries-index-signature-and-defaultvalue-removed)
   - [Docs Code panel enabled by default](#docs-code-panel-enabled-by-default)
   - [`argTypes` removed from loaders, `beforeEach`, `play` and `afterEach`](#argtypes-removed-from-loaders-beforeeach-play-and-aftereach)
-  - [Deprecated CSF and manager type aliases removed](#deprecated-csf-and-manager-type-aliases-removed)
   - [`docgenServer` is stable and enabled by default](#docgenserver-is-stable-and-enabled-by-default)
   - [Builder docgen is deprecated](#builder-docgen-is-deprecated)
   - [Node.js 22.12 or higher](#nodejs-2212-or-higher)
@@ -948,28 +947,6 @@ export const Primary: Story = {
 
 Decorators and `render` functions keep receiving `argTypes`, because renderers rely on them while rendering. Their context type is the new `StoryContextForRender`; the `StoryContext` type no longer declares `argTypes`. Custom decorator or render helpers that annotate their context parameter as `StoryContext` and read `argTypes` should switch to `StoryContextForRender`.
 
-### Deprecated CSF and manager type aliases removed
-
-The following deprecated type aliases and fields are removed. If your code imports any of them from `storybook` (via `storybook/internal/csf`, `storybook/internal/types`, or `storybook/manager-api`), switch to the supported replacement:
-
-| Deprecated               | Replacement             |
-| ------------------------ | ----------------------- |
-| `StoryKind`              | `ComponentTitle`        |
-| `StoryIdentifier.kind`   | `StoryIdentifier.title` |
-| `StoryIdentifier.story`  | `StoryIdentifier.name`  |
-| `AnyFramework`           | `Renderer`              |
-| `StoryContextForLoaders` | `StoryContext`          |
-| `PlayFunctionContext`    | `StoryContext`          |
-| `StoriesHash`            | `IndexHash`             |
-
-The deprecated `kind` and `story` fields are also gone from `Addon_AddStoryArgs`, `Addon_StoryApi`, and the legacy `setStories` payload type `SetStoriesStory` (the whole interface is removed). The `RenderContext` passed to `renderToCanvas` no longer contains `kind` or `story`; third-party renderers read `title` and `name` instead.
-
-`@storybook/addon-links`' deprecated `LinkTo` `kind` and `story` props are removed; use `title` and `name`. The `data-sb-kind` and `data-sb-story` HTML attributes are unchanged. The provider `StoryMapper` option is removed.
-
-Story context objects passed to loaders and play functions no longer carry the deprecated `kind` and `story` keys; read `title` and `name` instead. The same applies to the context passed to decorators and `render` functions: custom helpers that read `context.kind` or `context.story` must switch to `context.title` and `context.name`. The `extract()` output — the serialized stories that external tools such as the Chromatic CLI read — still includes the deprecated `kind` and `story` fields for compatibility, so tools reading the serialized output keep working.
-
-The manager resolves `SELECT_STORY` payloads from `storyId` or `title`/`name`, and still accepts the deprecated `kind`/`story` payload that composed Storybooks built with Storybook 10.x or earlier send, so cross-story links inside those refs keep navigating. A payload without any of those keys is ignored with a warning. Composed refs must publish a story index (`stories.json`); the v2 format is no longer accepted and the legacy `setStories` event is no longer read.
-
 ### `docgenServer` is stable and enabled by default
 
 The `experimentalDocgenServer` feature is now `docgenServer`, and Storybook no longer reads the old name.

From 627473b83d745069f014b782d9d5a8cac67f2455 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Mon, 19 Oct 2026 16:01:29 +0200
Subject: [PATCH 192/326] React: Test the vite alias plugin through its config
 hook

---
 code/renderers/react/src/preview-react-alias.test.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/code/renderers/react/src/preview-react-alias.test.ts b/code/renderers/react/src/preview-react-alias.test.ts
index 55021b1ba4be..ba0cb92631ae 100644
--- a/code/renderers/react/src/preview-react-alias.test.ts
+++ b/code/renderers/react/src/preview-react-alias.test.ts
@@ -3,6 +3,7 @@ import { describe, expect, it } from 'vitest';
 import {
   aliasReactInWebpack,
   prependReactDedupePlugin,
+  reactDedupeVitePlugin,
   reactResolveAlias,
 } from './preview-react-alias.ts';
 
@@ -29,8 +30,10 @@ describe('react preview alias', () => {
     const config = prependReactDedupePlugin({ plugins: [later] }, target);
     expect(config.plugins?.[0]).toMatchObject({ name: 'storybook:react-dedupe', enforce: 'pre' });
     expect(config.plugins?.[1]).toBe(later);
-    const plugin = config.plugins?.[0] as { config: () => { resolve: { alias: unknown } } };
-    expect(plugin.config().resolve.alias).toEqual(reactResolveAlias(target));
+  });
+
+  it('exposes the alias through the vite plugin config hook', () => {
+    expect(reactDedupeVitePlugin(target).config().resolve.alias).toEqual(reactResolveAlias(target));
   });
 
   it('sets the webpack alias without dropping an existing entry', () => {

From a292f957768d1dfd76c3058df0b5445535d1a775 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Mon, 19 Oct 2026 16:28:15 +0200
Subject: [PATCH 193/326] React: Resolve React from the renderer package so the
 alias works in pnpm's global store

---
 code/renderers/react/src/preset.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/code/renderers/react/src/preset.ts b/code/renderers/react/src/preset.ts
index cdfe78f82838..9daa7614c619 100644
--- a/code/renderers/react/src/preset.ts
+++ b/code/renderers/react/src/preset.ts
@@ -77,17 +77,17 @@ export const previewAnnotations: PresetProperty<'previewAnnotations'> = async (
 };
 
 /**
- * Try to resolve react and react-dom from the root node_modules of the project addon-docs uses this
- * to alias react and react-dom to the project's version when possible If the user doesn't have an
- * explicit dependency on react this will return the existing values Which will be the versions
- * shipped with addon-docs
+ * Resolve react and react-dom starting from this package. `@storybook/react` declares them as peer
+ * dependencies, so every package manager links the project's React here, including pnpm's global
+ * virtual store where the `storybook` package itself cannot see React. The preview alias below and
+ * addon-docs both read this value.
  */
 export const resolvedReact = async (existing: any) => {
   try {
     return {
       ...existing,
-      react: resolvePackageDir('react'),
-      reactDom: resolvePackageDir('react-dom'),
+      react: resolvePackageDir('react', import.meta.url),
+      reactDom: resolvePackageDir('react-dom', import.meta.url),
     };
   } catch {
     return existing;

From 2041254ff34de4c6ac2aa60ac4f1ebf8e5088551 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Mon, 19 Oct 2026 16:33:18 +0200
Subject: [PATCH 194/326] React: Use anchored vite alias entries so a Next.js
 object alias merges cleanly

---
 .../react/src/preview-react-alias.test.ts     | 43 ++++++++++++++++++-
 .../react/src/preview-react-alias.ts          | 16 ++++++-
 2 files changed, 57 insertions(+), 2 deletions(-)

diff --git a/code/renderers/react/src/preview-react-alias.test.ts b/code/renderers/react/src/preview-react-alias.test.ts
index ba0cb92631ae..1d24f4ab475f 100644
--- a/code/renderers/react/src/preview-react-alias.test.ts
+++ b/code/renderers/react/src/preview-react-alias.test.ts
@@ -1,14 +1,29 @@
 import { describe, expect, it } from 'vitest';
 
+import { mergeConfig } from 'vite';
+
 import {
   aliasReactInWebpack,
   prependReactDedupePlugin,
   reactDedupeVitePlugin,
   reactResolveAlias,
+  reactViteAlias,
 } from './preview-react-alias.ts';
 
 const target = { react: '/app/react', reactDom: '/app/react-dom' };
 
+type AliasEntry = { find: string | RegExp; replacement: string };
+
+// Same matching as Vite's alias plugin: entries are tried in order, a string key also matches its subpaths.
+const applyAlias = (alias: AliasEntry[], importee: string) => {
+  const entry = alias.find(({ find }) =>
+    typeof find === 'string'
+      ? importee === find || importee.startsWith(`${find}/`)
+      : find.test(importee)
+  );
+  return entry ? importee.replace(entry.find, entry.replacement) : importee;
+};
+
 describe('react preview alias', () => {
   it('points react and react-dom at absolute directories', () => {
     expect(reactResolveAlias(target)).toEqual({
@@ -25,6 +40,32 @@ describe('react preview alias', () => {
     });
   });
 
+  it('rewrites react, react-dom and their subpaths in vite', () => {
+    const alias = reactViteAlias(target);
+    expect(applyAlias(alias, 'react')).toBe('/app/react');
+    expect(applyAlias(alias, 'react/jsx-runtime')).toBe('/app/react/jsx-runtime');
+    expect(applyAlias(alias, 'react-dom')).toBe('/app/react-dom');
+    expect(applyAlias(alias, 'react-dom/client')).toBe('/app/react-dom/client');
+    expect(applyAlias(alias, 'react-dom/server')).toBe('/app/react-dom/server.browser.js');
+    expect(applyAlias(alias, 'react-redux')).toBe('react-redux');
+  });
+
+  it('lets a later object alias from Next.js win for every entry it declares', () => {
+    const nextAlias = {
+      'react/jsx-runtime': '/next/compiled/react/jsx-runtime.js',
+      react: '/next/compiled/react/index.js',
+      'react-dom/client': '/next/compiled/react-dom/client.js',
+      'react-dom': '/next/compiled/react-dom/index.js',
+    };
+    const merged = mergeConfig(reactDedupeVitePlugin(target).config(), {
+      resolve: { alias: nextAlias },
+    });
+    const alias = merged.resolve.alias as AliasEntry[];
+    expect(applyAlias(alias, 'react')).toBe('/next/compiled/react/index.js');
+    expect(applyAlias(alias, 'react/jsx-runtime')).toBe('/next/compiled/react/jsx-runtime.js');
+    expect(applyAlias(alias, 'react-dom/client')).toBe('/next/compiled/react-dom/client.js');
+  });
+
   it('prepends the vite plugin so a later plugin can replace the alias', () => {
     const later = { name: 'later' };
     const config = prependReactDedupePlugin({ plugins: [later] }, target);
@@ -33,7 +74,7 @@ describe('react preview alias', () => {
   });
 
   it('exposes the alias through the vite plugin config hook', () => {
-    expect(reactDedupeVitePlugin(target).config().resolve.alias).toEqual(reactResolveAlias(target));
+    expect(reactDedupeVitePlugin(target).config().resolve.alias).toEqual(reactViteAlias(target));
   });
 
   it('sets the webpack alias without dropping an existing entry', () => {
diff --git a/code/renderers/react/src/preview-react-alias.ts b/code/renderers/react/src/preview-react-alias.ts
index 21857d386bbb..456fee1d67e8 100644
--- a/code/renderers/react/src/preview-react-alias.ts
+++ b/code/renderers/react/src/preview-react-alias.ts
@@ -11,12 +11,26 @@ export const reactResolveAlias = ({ react, reactDom }: ReactAliasTarget) => ({
   'react-dom': reactDom,
 });
 
+/**
+ * Vite merges object aliases with a spread, which keeps our key position while another plugin
+ * replaces the value. A string key is a prefix match, so `react` pointing at a file would turn
+ * `react/jsx-runtime` into `<file>/jsx-runtime`. Anchored regexes with an explicit subpath capture
+ * keep each entry self-contained no matter how they are merged.
+ */
+export const reactViteAlias = ({ react, reactDom }: ReactAliasTarget) => [
+  ...(isAbsolute(reactDom)
+    ? [{ find: /^react-dom\/server$/, replacement: `${reactDom}/server.browser.js` }]
+    : []),
+  { find: /^react-dom(\/.*)?$/, replacement: `${reactDom}$1` },
+  { find: /^react(\/.*)?$/, replacement: `${react}$1` },
+];
+
 export const reactDedupeVitePlugin = (target: ReactAliasTarget) => ({
   name: 'storybook:react-dedupe',
   enforce: 'pre' as const,
   config: () => ({
     resolve: {
-      alias: reactResolveAlias(target),
+      alias: reactViteAlias(target),
     },
   }),
 });

From 4d0b580a39e8b5ab95f9a0a8a5a5447805329595 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 19 Oct 2026 14:39:21 +0000
Subject: [PATCH 195/326] Build: Typecheck the ecosystem-CI age-gate helper

The scripts package checks JavaScript with noImplicitAny. Move the helper to
TypeScript so the sandbox path and the missing-file error are typed.

Co-authored-by: Norbert de Langen <norbert@chromatic.com>
---
 scripts/ecosystem-ci/before-test.js                       | 2 +-
 scripts/ecosystem-ci/disable-npm-minimal-age-gate.test.ts | 2 +-
 ...inimal-age-gate.js => disable-npm-minimal-age-gate.ts} | 8 ++++++--
 3 files changed, 8 insertions(+), 4 deletions(-)
 rename scripts/ecosystem-ci/{disable-npm-minimal-age-gate.js => disable-npm-minimal-age-gate.ts} (74%)

diff --git a/scripts/ecosystem-ci/before-test.js b/scripts/ecosystem-ci/before-test.js
index 123544d17ade..2744e8a0e06c 100644
--- a/scripts/ecosystem-ci/before-test.js
+++ b/scripts/ecosystem-ci/before-test.js
@@ -11,7 +11,7 @@ import { fileURLToPath } from 'node:url';
 // eslint-disable-next-line depend/ban-dependencies
 import { execaCommand } from 'execa';
 
-import { disableNpmMinimalAgeGate } from './disable-npm-minimal-age-gate.js';
+import { disableNpmMinimalAgeGate } from './disable-npm-minimal-age-gate.ts';
 import { EXISTING_RESOLUTIONS } from './existing-resolutions.js';
 
 const filename = fileURLToPath(import.meta.url);
diff --git a/scripts/ecosystem-ci/disable-npm-minimal-age-gate.test.ts b/scripts/ecosystem-ci/disable-npm-minimal-age-gate.test.ts
index cd56c4a8e69f..602519dc2f85 100644
--- a/scripts/ecosystem-ci/disable-npm-minimal-age-gate.test.ts
+++ b/scripts/ecosystem-ci/disable-npm-minimal-age-gate.test.ts
@@ -5,7 +5,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import * as memfs from 'memfs';
 import { vol } from 'memfs';
 
-import { disableNpmMinimalAgeGate } from './disable-npm-minimal-age-gate.js';
+import { disableNpmMinimalAgeGate } from './disable-npm-minimal-age-gate.ts';
 
 vi.mock('node:fs/promises', { spy: true });
 
diff --git a/scripts/ecosystem-ci/disable-npm-minimal-age-gate.js b/scripts/ecosystem-ci/disable-npm-minimal-age-gate.ts
similarity index 74%
rename from scripts/ecosystem-ci/disable-npm-minimal-age-gate.js
rename to scripts/ecosystem-ci/disable-npm-minimal-age-gate.ts
index 59602e9a145c..d5d345468e82 100644
--- a/scripts/ecosystem-ci/disable-npm-minimal-age-gate.js
+++ b/scripts/ecosystem-ci/disable-npm-minimal-age-gate.ts
@@ -5,14 +5,14 @@ const AGE_GATE_KEY = /^[ \t]*npmMinimalAgeGate[ \t]*:/m;
 const AGE_GATE_LINE = /^([ \t]*npmMinimalAgeGate[ \t]*:)[^\r\n]*$/gm;
 
 // Yarn 4's default gate is 1 day, so the key has to be 0 rather than absent.
-export async function disableNpmMinimalAgeGate(sandboxDir) {
+export async function disableNpmMinimalAgeGate(sandboxDir: string) {
   const configPath = join(sandboxDir, '.yarnrc.yml');
 
   let content = '';
   try {
     content = await readFile(configPath, 'utf-8');
   } catch (error) {
-    if (error?.code !== 'ENOENT') {
+    if (!isEnoent(error)) {
       throw error;
     }
   }
@@ -23,3 +23,7 @@ export async function disableNpmMinimalAgeGate(sandboxDir) {
 
   await writeFile(configPath, next);
 }
+
+function isEnoent(error: unknown): error is NodeJS.ErrnoException {
+  return error instanceof Error && 'code' in error && error.code === 'ENOENT';
+}

From a38b0b94b077ab1c2bcce93e5f8a08b7c582c2bf Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <sidnioulz@gmail.com>
Date: Mon, 19 Oct 2026 19:02:17 +0200
Subject: [PATCH 196/326] CLI: Simplify pnpm build-approval helpers and trim
 comments

Split the decision helper by settings source instead of threading a
version flag through it, filter pending packages before touching the
document, and cut the comment block down to the questions the code
cannot answer itself.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../js-package-manager/PNPMProxy.test.ts      |   4 -
 .../common/js-package-manager/PNPMProxy.ts    | 168 +++++++-----------
 2 files changed, 61 insertions(+), 111 deletions(-)

diff --git a/code/core/src/common/js-package-manager/PNPMProxy.test.ts b/code/core/src/common/js-package-manager/PNPMProxy.test.ts
index 2d5ebf8277fe..18ff007be8d9 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.test.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.test.ts
@@ -50,7 +50,6 @@ const expectedMinimumReleaseAgeExcludePackages = [
 describe('PNPM Proxy', () => {
   let pnpmProxy: PNPMProxy;
 
-  /** The in-memory project the proxy operates on, so `allowBuilds` writes never touch the repo. */
   const PROJECT_DIR = '/project';
   const WORKSPACE_YAML = `${PROJECT_DIR}/pnpm-workspace.yaml`;
   const workspaceYaml = () => vol.toJSON()[WORKSPACE_YAML];
@@ -66,7 +65,6 @@ describe('PNPM Proxy', () => {
   };
 
   beforeEach(() => {
-    // Construct against the real fs, then redirect fs to memfs for everything the tests do.
     vi.mocked(readFileSync).mockReset();
     vi.mocked(writeFileSync).mockReset();
     vi.mocked(renameSync).mockReset();
@@ -256,8 +254,6 @@ describe('PNPM Proxy', () => {
       );
     });
 
-    // pnpm 11 dropped these lists and stopped reading package.json's `pnpm` field, so leftovers
-    // there no longer govern builds: esbuild still needs its allowBuilds entry.
     it.each([
       ['onlyBuiltDependencies names esbuild', 'onlyBuiltDependencies:\n  - esbuild\n'],
       ['ignoredBuiltDependencies names esbuild', 'ignoredBuiltDependencies:\n  - esbuild\n'],
diff --git a/code/core/src/common/js-package-manager/PNPMProxy.ts b/code/core/src/common/js-package-manager/PNPMProxy.ts
index 2cc3f0fefddf..8ff377a8852e 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.ts
@@ -56,50 +56,28 @@ export type PnpmListOutput = PnpmListItem[];
 /** `pnpm dlx --allow-build` support (docs: Added in v10.2.0). */
 const PNPM_ALLOW_BUILD_DLX_MIN = '10.2.0';
 
-/** `allowBuilds` in pnpm-workspace.yaml (docs: Added in v10.26.0). */
+// `allowBuilds` in pnpm-workspace.yaml (docs: Added in v10.26.0).
 const PNPM_ALLOW_BUILDS_MIN = '10.26.0';
 
-/**
- * pnpm 11 dropped the legacy build lists and stopped reading package.json's `pnpm` field. From
- * there on, those settings are leftovers that neither govern builds nor conflict with `allowBuilds`.
- */
+// pnpm 11 removed the pnpm 10 build lists and stopped reading package.json's `pnpm` field.
 const PNPM_LEGACY_BUILD_LISTS_REMOVED = '11.0.0';
 
-/** Storybook dependencies with a build script that pnpm 10+ refuses to run until it is approved. */
+// Storybook dependencies with a build script that pnpm 10+ refuses to run until it is approved.
 const STORYBOOK_BUILD_SCRIPT_PACKAGES = ['esbuild'];
 
-/** pnpm 10 build-script list settings that `allowBuilds` replaced in pnpm 11. */
-const LEGACY_BUILD_SCRIPT_LISTS = [
-  'onlyBuiltDependencies',
-  'ignoredBuiltDependencies',
-  'neverBuiltDependencies',
-] as const;
-
 const isRecord = (value: unknown): value is Record<string, unknown> =>
   typeof value === 'object' && value !== null && !Array.isArray(value);
 
-/**
- * Whether a build-script matcher names `pkg`. A matcher is a bare package name, or a name pinned to
- * versions (`esbuild@0.25.0 || 0.25.1`) or to a git/tarball source (`foo@git+ssh://...`).
- */
+// A matcher is a bare name, or a name pinned to versions or a source: `esbuild@0.25.0 || 0.25.1`.
 const matchesPackage = (matcher: unknown, pkg: string): boolean =>
   typeof matcher === 'string' && (matcher === pkg || matcher.startsWith(`${pkg}@`));
 
-/**
- * Whether the user already allowed or denied `pkg`'s build scripts in a block of pnpm settings
- * (`pnpm-workspace.yaml`, or the `pnpm` field of package.json): through `allowBuilds`, through the
- * pnpm 10 list settings it replaced, or by allowing every build. A pinned `allowBuilds` matcher
- * counts whatever its value, since adding a bare `esbuild: true` next to it would widen the user's
- * choice; the bare key only counts once it holds a boolean, so pnpm's own placeholder still gets
- * resolved. The pnpm 10 lists only count when `legacyLists` is set, i.e. on pnpm 10 itself. There,
- * any `neverBuiltDependencies` list counts as a decision for every package: pnpm 10 rewrites
- * `allowBuilds` into `onlyBuiltDependencies`, which it refuses to combine with that list.
- */
-function hasBuildScriptDecision(
-  settings: unknown,
-  pkg: string,
-  { legacyLists = false }: { legacyLists?: boolean } = {}
-): boolean {
+const listsPackage = (list: unknown, pkg: string): boolean =>
+  Array.isArray(list) && list.some((matcher) => matchesPackage(matcher, pkg));
+
+// The bare key only counts once it holds a boolean, so the placeholder pnpm 12 writes still gets
+// resolved; a pinned matcher counts whatever its value, as a bare entry would widen it.
+function hasAllowBuildsDecision(settings: unknown, pkg: string): boolean {
   if (!isRecord(settings)) {
     return false;
   }
@@ -107,24 +85,38 @@ function hasBuildScriptDecision(
     return true;
   }
   const { allowBuilds } = settings;
-  if (
+  return (
     isRecord(allowBuilds) &&
     Object.entries(allowBuilds).some(([matcher, value]) =>
       matcher === pkg ? typeof value === 'boolean' : matchesPackage(matcher, pkg)
     )
-  ) {
-    return true;
+  );
+}
+
+function readOnlyBuiltDependenciesFile(file: unknown, dir: string): unknown[] {
+  if (typeof file !== 'string') {
+    return [];
+  }
+  try {
+    const list = JSON.parse(readFileSync(resolve(dir, file), 'utf8'));
+    return Array.isArray(list) ? list : [];
+  } catch {
+    return [];
   }
-  if (!legacyLists) {
+}
+
+// pnpm 10 refuses to combine `neverBuiltDependencies` with any allow list, so its presence alone
+// is a decision.
+function hasPnpm10ListDecision(settings: unknown, pkg: string, dir: string): boolean {
+  if (!isRecord(settings)) {
     return false;
   }
-  return LEGACY_BUILD_SCRIPT_LISTS.some((key) => {
-    const list = settings[key];
-    if (!Array.isArray(list)) {
-      return false;
-    }
-    return key === 'neverBuiltDependencies' || list.some((matcher) => matchesPackage(matcher, pkg));
-  });
+  return (
+    Array.isArray(settings.neverBuiltDependencies) ||
+    listsPackage(settings.onlyBuiltDependencies, pkg) ||
+    listsPackage(settings.ignoredBuiltDependencies, pkg) ||
+    listsPackage(readOnlyBuiltDependenciesFile(settings.onlyBuiltDependenciesFile, dir), pkg)
+  );
 }
 
 // Same-directory rename so a crash cannot truncate the user's workspace file.
@@ -143,25 +135,6 @@ function writeFileAtomically(filePath: string, contents: string): void {
   }
 }
 
-/**
- * The package matchers listed in the JSON file that pnpm 10's `onlyBuiltDependenciesFile` points
- * to, resolved against the directory of the workspace file. An unreadable or malformed file counts
- * as listing nothing.
- */
-function readOnlyBuiltDependenciesFile(settings: unknown, workspaceDir: string): unknown[] {
-  if (!isRecord(settings) || typeof settings.onlyBuiltDependenciesFile !== 'string') {
-    return [];
-  }
-  try {
-    const list = JSON.parse(
-      readFileSync(resolve(workspaceDir, settings.onlyBuiltDependenciesFile), 'utf8')
-    );
-    return Array.isArray(list) ? list : [];
-  } catch {
-    return [];
-  }
-}
-
 export class PNPMProxy extends JsPackageManager {
   readonly type = PackageManagerName.PNPM;
 
@@ -424,18 +397,12 @@ export class PNPMProxy extends JsPackageManager {
     });
   }
 
-  /**
-   * pnpm 10+ refuses to run dependency build scripts until the user approves them, and from pnpm 11
-   * an unreviewed script fails a non-interactive install (`ERR_PNPM_IGNORED_BUILDS`). pnpm install
-   * has no `--allow-builds` flag, so we need to pre-approve builds. The only way to do this is to
-   * record the allowed builds in the `pnpm-workspace.yaml` like pnpm approve-builds does.
-   */
+  // From pnpm 11, an unreviewed build script fails a non-interactive install outright, and
+  // `pnpm install` has no flag to approve one, so record the approval like `pnpm approve-builds`.
   protected allowStorybookBuildScripts(): void {
     if (!this.#pnpmGte(PNPM_ALLOW_BUILDS_MIN)) {
       return;
     }
-
-    // Find workspace file, create one if needed.
     const workspace = this.#readWorkspaceYaml({ createIfMissing: true });
     if (!workspace) {
       logger.warn(
@@ -443,44 +410,35 @@ export class PNPMProxy extends JsPackageManager {
       );
       return;
     }
-
     const { path, doc } = workspace;
-    let changed = false;
+    const { packageJson, operationDir } = this.primaryPackageJson;
 
     try {
-      // An `allowBuilds:` key left empty (e.g. after its last entry was removed) is a null, which
-      // `setIn` cannot descend into; start a map there. Other non-map values are user errors pnpm
-      // rejects too, so just let the update fail below.
+      const settings = doc.toJS();
+      const pnpm10Settings: [settings: unknown, dir: string][] = this.#pnpmGte(
+        PNPM_LEGACY_BUILD_LISTS_REMOVED
+      )
+        ? []
+        : [
+            [settings, dirname(path)],
+            [packageJson.pnpm, operationDir],
+          ];
+      const pending = STORYBOOK_BUILD_SCRIPT_PACKAGES.filter(
+        (pkg) =>
+          !hasAllowBuildsDecision(settings, pkg) &&
+          !pnpm10Settings.some(([source, dir]) => hasPnpm10ListDecision(source, pkg, dir))
+      );
+      if (pending.length === 0) {
+        return;
+      }
+      // `setIn` cannot descend into an `allowBuilds:` key that was left empty.
       if (doc.getIn(['allowBuilds']) == null) {
         doc.setIn(['allowBuilds'], doc.createNode({}));
       }
-
-      // Add dependencies that need a build approval, unless the user already decided on them in the
-      // workspace file. On pnpm 10 the decision may also live in package.json's `pnpm` field or in a
-      // trusted-dependencies file; pnpm 11+ ignores both, so there they must not keep esbuild
-      // unapproved.
-      const settings = doc.toJS();
-      const legacyLists = !this.#pnpmGte(PNPM_LEGACY_BUILD_LISTS_REMOVED);
-      const decisions = legacyLists
-        ? [settings, this.primaryPackageJson.packageJson.pnpm]
-        : [settings];
-      const trustedDependencies = legacyLists
-        ? readOnlyBuiltDependenciesFile(settings, dirname(path))
-        : [];
-      for (const pkg of STORYBOOK_BUILD_SCRIPT_PACKAGES) {
-        const decided =
-          decisions.some((candidate) => hasBuildScriptDecision(candidate, pkg, { legacyLists })) ||
-          trustedDependencies.some((matcher) => matchesPackage(matcher, pkg));
-        if (!decided) {
-          doc.setIn(['allowBuilds', pkg], true);
-          changed = true;
-        }
-      }
-
-      // Write file back only if changes were needed.
-      if (changed) {
-        writeFileAtomically(path, doc.toString());
+      for (const pkg of pending) {
+        doc.setIn(['allowBuilds', pkg], true);
       }
+      writeFileAtomically(path, doc.toString());
     } catch (e) {
       logger.warn(
         `Could not allow build scripts of ${STORYBOOK_BUILD_SCRIPT_PACKAGES.join(', ')} in ${path}: ${String(e)}`
@@ -488,12 +446,8 @@ export class PNPMProxy extends JsPackageManager {
     }
   }
 
-  /**
-   * Locate and parse the `pnpm-workspace.yaml` that governs this project, walking up from the
-   * package.json we operate on. Returns null when the file is malformed, or when it is missing
-   * and `createIfMissing` is unset. If `createIfMissing` is set, an empty document is returned
-   * with the location to which it can be written (next to `package.json`).
-   */
+  // Null when the file is malformed, or missing without `createIfMissing`; with it, a missing file
+  // yields an empty document addressed next to the package.json we operate on.
   #readWorkspaceYaml(options?: {
     createIfMissing: boolean;
   }): { path: string; doc: Document } | null {

From baf29ea45457742966c38efc4abf9b67d2ff480d Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 21:14:55 +0200
Subject: [PATCH 197/326] fix(mocking-utils): accept the Storybook 10 parser
 argument from older builders

`storybook-builder-rsbuild` 3.6 imports `babelParser` from
`storybook/internal/mocking-utils` and passes it to `getAutomockCode`
and `extractMockCalls`. Removing it broke every rsbuild sandbox.

`babelParser` is back as a deprecated parse function, and both
functions accept it in its old position: a function where the file
name or root used to be is skipped, and the code is parsed by
Storybook itself, as every caller needs. The main signatures stay as
they are; the legacy shape is a deprecated overload, removed in 12.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/mocking-utils/automock.test.ts | 14 +++++-
 code/core/src/mocking-utils/automock.ts      | 23 +++++++++-
 code/core/src/mocking-utils/extract.test.ts  | 34 +++++++++++++++
 code/core/src/mocking-utils/extract.ts       | 46 ++++++++++++++++----
 4 files changed, 107 insertions(+), 10 deletions(-)

diff --git a/code/core/src/mocking-utils/automock.test.ts b/code/core/src/mocking-utils/automock.test.ts
index dec94109fab7..a50c5f0a20d3 100644
--- a/code/core/src/mocking-utils/automock.test.ts
+++ b/code/core/src/mocking-utils/automock.test.ts
@@ -1,7 +1,8 @@
 import { describe, expect, it } from 'vitest';
 
-import { getAutomockCode } from './automock.ts';
 import { parseModule } from '../csf-tools/estree/ast.ts';
+import { getAutomockCode } from './automock.ts';
+import { babelParser } from './extract.ts';
 
 describe('getAutomockCode', () => {
   it('mocks destructured exports, including ones with defaults', () => {
@@ -40,6 +41,17 @@ describe('getAutomockCode', () => {
     expect(() => parseModule(mocked, '/mod.ts')).not.toThrow();
   });
 
+  // storybook-builder-rsbuild 3.6 calls `getAutomockCode(source, isSpy, babelParser)`.
+  it('accepts the parse function Storybook 10 builders pass instead of a file name', () => {
+    const code = 'export const a = 1;\nexport default (x);\n';
+
+    const mocked = getAutomockCode(code, false, babelParser).toString();
+
+    expect(mocked).toBe(getAutomockCode(code, false).toString());
+    expect(mocked).toContain('["a"]: a,');
+    expect(mocked).toContain('const __vitest_default = (x);');
+  });
+
   it('mocks a .ts module with generic arrows under a Vite id with a query', () => {
     const code = 'export const identity = <T>(value: T) => value;';
 
diff --git a/code/core/src/mocking-utils/automock.ts b/code/core/src/mocking-utils/automock.ts
index 32bd340d7b4f..1dc3b144baa4 100644
--- a/code/core/src/mocking-utils/automock.ts
+++ b/code/core/src/mocking-utils/automock.ts
@@ -9,11 +9,32 @@ import MagicString from 'magic-string';
 
 import { outerSpan, parseModule } from '../csf-tools/estree/ast.ts';
 import { type Positioned, getArbitraryModuleIdentifier } from './esmWalker.ts';
+import type { LegacyParser } from './extract.ts';
 
 export const __STORYBOOK_GLOBAL_THIS_ACCESSOR__ = '__vitest_mocker__';
 
 /** Mock the exports of a module. The file name picks the grammar it is parsed with. */
-export function getAutomockCode(originalCode: string, isSpy: boolean, fileName?: string) {
+export function getAutomockCode(
+  originalCode: string,
+  isSpy: boolean,
+  fileName?: string
+): MagicString;
+/**
+ * @deprecated Builders built against Storybook 10, such as `storybook-builder-rsbuild` 3.6, pass
+ *   `babelParser` here. The function is ignored: the module is parsed without a file name, as it
+ *   was then. Pass the module's file name instead. This overload is removed in Storybook 12.
+ */
+export function getAutomockCode(
+  originalCode: string,
+  isSpy: boolean,
+  parse: LegacyParser
+): MagicString;
+export function getAutomockCode(
+  originalCode: string,
+  isSpy: boolean,
+  fileNameOrParser?: string | LegacyParser
+) {
+  const fileName = typeof fileNameOrParser === 'function' ? undefined : fileNameOrParser;
   const mocked = automockModule(originalCode, isSpy ? 'autospy' : 'automock', fileName, {
     globalThisAccessor: JSON.stringify(__STORYBOOK_GLOBAL_THIS_ACCESSOR__),
   });
diff --git a/code/core/src/mocking-utils/extract.test.ts b/code/core/src/mocking-utils/extract.test.ts
index 79a3b7918bb5..7b7e3251225d 100644
--- a/code/core/src/mocking-utils/extract.test.ts
+++ b/code/core/src/mocking-utils/extract.test.ts
@@ -40,6 +40,18 @@ vi.mock('storybook/internal/telemetry', () => ({
   telemetry: vi.fn(),
 }));
 
+describe('babelParser', () => {
+  it('parses a module into an ESTree program', () => {
+    const program = extractModule.babelParser('export const a = <T,>(v: T) => v;', '/mod.ts') as {
+      type: string;
+      body: unknown[];
+    };
+
+    expect(program.type).toBe('Program');
+    expect(program.body).toHaveLength(1);
+  });
+});
+
 describe('isModuleDirectory', () => {
   it('returns true for node_modules path', () => {
     expect(extractModule.isModuleDirectory('/foo/node_modules/bar')).toBe(true);
@@ -72,6 +84,28 @@ describe('extractMockCalls', () => {
     findMockRedirect.mockReturnValue(null);
   });
 
+  // storybook-builder-rsbuild 3.6 calls `extractMockCalls(options, babelParser, root, findMockRedirect)`.
+  it('accepts the parse function Storybook 10 builders pass before the root', () => {
+    vi.mocked(readFileSync).mockReturnValue("sb.mock('foo', { spy: true });");
+
+    const result = extractModule.extractMockCalls(
+      { previewConfigPath, configDir, coreOptions },
+      extractModule.babelParser,
+      root,
+      findMockRedirect
+    );
+
+    expect(result).toEqual([
+      { path: 'foo', absolutePath: '/abs/path', redirectPath: null, spy: true },
+    ]);
+    expect(resolveModule.resolveMock).toHaveBeenCalledWith(
+      'foo',
+      root,
+      previewConfigPath,
+      findMockRedirect
+    );
+  });
+
   it('returns empty array if readFileSync throws', () => {
     vi.mocked(readFileSync).mockImplementation(() => {
       throw new Error('fail');
diff --git a/code/core/src/mocking-utils/extract.ts b/code/core/src/mocking-utils/extract.ts
index 2b48efcddbfd..994af42fdcb6 100644
--- a/code/core/src/mocking-utils/extract.ts
+++ b/code/core/src/mocking-utils/extract.ts
@@ -35,6 +35,19 @@ interface ExtractMockCallsOptions {
   configDir: string;
 }
 
+/**
+ * The parse function Storybook 10 builders passed to `getAutomockCode` and `extractMockCalls`.
+ * Removed in Storybook 12.
+ */
+export type LegacyParser = (code: string, fileName?: string) => unknown;
+
+/**
+ * @deprecated Storybook 10 builders passed this to `getAutomockCode` and `extractMockCalls`, which
+ *   now parse the code themselves and ignore it. Parse with `parseModule` from
+ *   `storybook/internal/csf-tools` instead. Removed in Storybook 12.
+ */
+export const babelParser: LegacyParser = (code, fileName) => parseModule(code, fileName).program;
+
 const isStringLiteral = (node: any): boolean =>
   node?.type === 'Literal' && typeof node.value === 'string';
 
@@ -75,20 +88,37 @@ export function rewriteSbMockImportCalls(code: string, fileName: string) {
   };
 }
 
+type FindMockRedirect = (
+  root: string,
+  absolutePath: string,
+  externalPath: string | null
+) => string | null;
+
+/** Extracts all sb.mock() calls from the preview config file. */
+export function extractMockCalls(
+  options: ExtractMockCallsOptions,
+  root: string,
+  findMockRedirect: FindMockRedirect
+): MockCall[];
 /**
- * Extracts all sb.mock() calls from the preview config file.
- *
- * @param this PluginContext
+ * @deprecated Builders built against Storybook 10, such as `storybook-builder-rsbuild` 3.6, pass
+ *   `babelParser` before `root`. The function is ignored: the preview config is parsed by its file
+ *   name. Drop the argument. This overload is removed in Storybook 12.
  */
 export function extractMockCalls(
   options: ExtractMockCallsOptions,
+  parse: LegacyParser,
   root: string,
-  findMockRedirect: (
-    root: string,
-    absolutePath: string,
-    externalPath: string | null
-  ) => string | null
+  findMockRedirect: FindMockRedirect
+): MockCall[];
+export function extractMockCalls(
+  options: ExtractMockCallsOptions,
+  ...rest: [string, FindMockRedirect] | [LegacyParser, string, FindMockRedirect]
 ): MockCall[] {
+  const [root, findMockRedirect] = (typeof rest[0] === 'function' ? rest.slice(1) : rest) as [
+    string,
+    FindMockRedirect,
+  ];
   try {
     const previewConfigCode = readFileSync(options.previewConfigPath, 'utf-8');
     const { code: jsCode } = transformSync(previewConfigCode, { loader: 'tsx', format: 'esm' });

From 5796d1fe835d0050ee461cef1c9c1929342a5885 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 21:14:55 +0200
Subject: [PATCH 198/326] fix(core): install the oxc-parser WASM binding for
 hosts without a native one

oxc-parser 0.153 no longer lists `@oxc-parser/binding-wasm32-wasi` as
an optional dependency, so environments without a native binding, such
as StackBlitz WebContainers, could not index stories. The binding is
now an optional dependency of `storybook`, pinned to the exact
oxc-parser version, which is pinned as well; a test keeps the two
equal.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/package.json                        |   5 +-
 .../common/utils/oxc-parser-binding.test.ts   |  18 ++
 yarn.lock                                     | 191 +++++++++++-------
 3 files changed, 145 insertions(+), 69 deletions(-)
 create mode 100644 code/core/src/common/utils/oxc-parser-binding.test.ts

diff --git a/code/core/package.json b/code/core/package.json
index 8b8d3d4578fb..ea6ba5dcd038 100644
--- a/code/core/package.json
+++ b/code/core/package.json
@@ -281,7 +281,7 @@
     "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0 || ^0.26.0 || ^0.27.0 || ^0.28.0",
     "jsonc-parser": "^3.3.1",
     "open": "^10.2.0",
-    "oxc-parser": "^0.153.0",
+    "oxc-parser": "0.153.0",
     "oxc-resolver": "11.21.2",
     "semver": "^7.7.3",
     "use-sync-external-store": "^1.5.0",
@@ -446,6 +446,9 @@
       "optional": true
     }
   },
+  "optionalDependencies": {
+    "@oxc-parser/binding-wasm32-wasi": "0.153.0"
+  },
   "publishConfig": {
     "access": "public"
   },
diff --git a/code/core/src/common/utils/oxc-parser-binding.test.ts b/code/core/src/common/utils/oxc-parser-binding.test.ts
new file mode 100644
index 000000000000..90adf91e9fdd
--- /dev/null
+++ b/code/core/src/common/utils/oxc-parser-binding.test.ts
@@ -0,0 +1,18 @@
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+
+import { expect, it } from 'vitest';
+
+const pkg = JSON.parse(
+  readFileSync(fileURLToPath(new URL('../../../package.json', import.meta.url)), 'utf-8')
+);
+
+// oxc-parser loads `@oxc-parser/binding-wasm32-wasi` where no native binding exists, such as
+// StackBlitz WebContainers, but no longer declares it as its own optional dependency. The binding
+// only works with the oxc-parser release it was built for, so both are pinned to one version.
+it('pins @oxc-parser/binding-wasm32-wasi to the exact oxc-parser version', () => {
+  const version = pkg.dependencies['oxc-parser'];
+
+  expect(version).toMatch(/^\d+\.\d+\.\d+$/);
+  expect(pkg.optionalDependencies['@oxc-parser/binding-wasm32-wasi']).toBe(version);
+});
diff --git a/yarn.lock b/yarn.lock
index a18f20a5aced..64b77bd14562 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2656,6 +2656,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emnapi/core@npm:2.0.0-alpha.3":
+  version: 2.0.0-alpha.3
+  resolution: "@emnapi/core@npm:2.0.0-alpha.3"
+  dependencies:
+    "@emnapi/wasi-threads": "npm:2.0.1"
+    tslib: "npm:^2.4.0"
+  checksum: 10c0/dfc26f53eb40dab0e316206cabe01e6e98d21ef8a0b820f81ce7e0fa7b4307c94f2a9599c11e6c601ad7bd77e8efb9b7cb9f86dbc3b6237f799405e0cb60c587
+  languageName: node
+  linkType: hard
+
 "@emnapi/core@npm:^1.1.0, @emnapi/core@npm:^1.11.1":
   version: 1.11.3
   resolution: "@emnapi/core@npm:1.11.3"
@@ -2702,6 +2712,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emnapi/runtime@npm:2.0.0-alpha.3":
+  version: 2.0.0-alpha.3
+  resolution: "@emnapi/runtime@npm:2.0.0-alpha.3"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  checksum: 10c0/c8f6e0ad2f9c0ced8bc156a7ec3ab5fbbd2d3b7147b6a37537f6892131844b969d3aa450749807fc238160b5db61d6160b8066abfce4b2c40acfb1941bb31dd1
+  languageName: node
+  linkType: hard
+
 "@emnapi/runtime@npm:^1.1.0, @emnapi/runtime@npm:^1.11.1, @emnapi/runtime@npm:^1.7.0":
   version: 1.11.3
   resolution: "@emnapi/runtime@npm:1.11.3"
@@ -2738,6 +2757,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emnapi/wasi-threads@npm:2.0.1":
+  version: 2.0.1
+  resolution: "@emnapi/wasi-threads@npm:2.0.1"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  checksum: 10c0/5f7bf4cc4f6a1c31ec2084c9321d054f3b3b6c7e89430bb23fc3487d55e7be40f1ff31b2cb9a51721b444d4e8ac1f065b8749606771f6e4e7ccb32bbb709a303
+  languageName: node
+  linkType: hard
+
 "@emotion/babel-plugin@npm:^11.13.5":
   version: 11.13.5
   resolution: "@emotion/babel-plugin@npm:11.13.5"
@@ -4785,6 +4813,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@napi-rs/wasm-runtime@npm:~1.2.5":
+  version: 1.2.5
+  resolution: "@napi-rs/wasm-runtime@npm:1.2.5"
+  dependencies:
+    "@tybys/wasm-util": "npm:^0.10.3"
+  peerDependencies:
+    "@emnapi/core": ^1.7.1 || ^2.0.0-alpha.4
+    "@emnapi/runtime": ^1.7.1 || ^2.0.0-alpha.4
+  checksum: 10c0/dae2bc48077df6da2d59f3c0f3e17b03b99953dbd97fd1fb1f0d261c6036b812538d5905266bd2402182e2709a778d63c8bbb3c2d7fe090fcea863f717954fce
+  languageName: node
+  linkType: hard
+
 "@neoconfetti/react@npm:^1.0.0":
   version: 1.0.0
   resolution: "@neoconfetti/react@npm:1.0.0"
@@ -6115,6 +6155,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@oxc-parser/binding-wasm32-wasi@npm:0.153.0":
+  version: 0.153.0
+  resolution: "@oxc-parser/binding-wasm32-wasi@npm:0.153.0"
+  dependencies:
+    "@emnapi/core": "npm:2.0.0-alpha.3"
+    "@emnapi/runtime": "npm:2.0.0-alpha.3"
+    "@napi-rs/wasm-runtime": "npm:~1.2.5"
+  checksum: 10c0/6574d6f2e78c1baf0b22ac1e9d7907a7de37b8de68e2e581199f18f4039a7c7d085c4ebdee238f33f796eb89d6c9c61bbac7197dd361e96ae01e87bab53e8ef9
+  languageName: node
+  linkType: hard
+
 "@oxc-parser/binding-win32-arm64-msvc@npm:0.121.0":
   version: 0.121.0
   resolution: "@oxc-parser/binding-win32-arm64-msvc@npm:0.121.0"
@@ -28182,6 +28233,73 @@ __metadata:
   languageName: node
   linkType: hard
 
+"oxc-parser@npm:0.153.0":
+  version: 0.153.0
+  resolution: "oxc-parser@npm:0.153.0"
+  dependencies:
+    "@oxc-parser/binding-android-arm-eabi": "npm:0.153.0"
+    "@oxc-parser/binding-android-arm64": "npm:0.153.0"
+    "@oxc-parser/binding-darwin-arm64": "npm:0.153.0"
+    "@oxc-parser/binding-darwin-x64": "npm:0.153.0"
+    "@oxc-parser/binding-freebsd-x64": "npm:0.153.0"
+    "@oxc-parser/binding-linux-arm-gnueabihf": "npm:0.153.0"
+    "@oxc-parser/binding-linux-arm-musleabihf": "npm:0.153.0"
+    "@oxc-parser/binding-linux-arm64-gnu": "npm:0.153.0"
+    "@oxc-parser/binding-linux-arm64-musl": "npm:0.153.0"
+    "@oxc-parser/binding-linux-ppc64-gnu": "npm:0.153.0"
+    "@oxc-parser/binding-linux-riscv64-gnu": "npm:0.153.0"
+    "@oxc-parser/binding-linux-riscv64-musl": "npm:0.153.0"
+    "@oxc-parser/binding-linux-s390x-gnu": "npm:0.153.0"
+    "@oxc-parser/binding-linux-x64-gnu": "npm:0.153.0"
+    "@oxc-parser/binding-linux-x64-musl": "npm:0.153.0"
+    "@oxc-parser/binding-openharmony-arm64": "npm:0.153.0"
+    "@oxc-parser/binding-win32-arm64-msvc": "npm:0.153.0"
+    "@oxc-parser/binding-win32-ia32-msvc": "npm:0.153.0"
+    "@oxc-parser/binding-win32-x64-msvc": "npm:0.153.0"
+    "@oxc-project/types": "npm:^0.153.0"
+  dependenciesMeta:
+    "@oxc-parser/binding-android-arm-eabi":
+      optional: true
+    "@oxc-parser/binding-android-arm64":
+      optional: true
+    "@oxc-parser/binding-darwin-arm64":
+      optional: true
+    "@oxc-parser/binding-darwin-x64":
+      optional: true
+    "@oxc-parser/binding-freebsd-x64":
+      optional: true
+    "@oxc-parser/binding-linux-arm-gnueabihf":
+      optional: true
+    "@oxc-parser/binding-linux-arm-musleabihf":
+      optional: true
+    "@oxc-parser/binding-linux-arm64-gnu":
+      optional: true
+    "@oxc-parser/binding-linux-arm64-musl":
+      optional: true
+    "@oxc-parser/binding-linux-ppc64-gnu":
+      optional: true
+    "@oxc-parser/binding-linux-riscv64-gnu":
+      optional: true
+    "@oxc-parser/binding-linux-riscv64-musl":
+      optional: true
+    "@oxc-parser/binding-linux-s390x-gnu":
+      optional: true
+    "@oxc-parser/binding-linux-x64-gnu":
+      optional: true
+    "@oxc-parser/binding-linux-x64-musl":
+      optional: true
+    "@oxc-parser/binding-openharmony-arm64":
+      optional: true
+    "@oxc-parser/binding-win32-arm64-msvc":
+      optional: true
+    "@oxc-parser/binding-win32-ia32-msvc":
+      optional: true
+    "@oxc-parser/binding-win32-x64-msvc":
+      optional: true
+  checksum: 10c0/1b5777d7b8fd0d1cce77c7a02750c754a7f8fe2c977caa8b24ee6f50a2f117d984bda795d23d7786784bd94079150b57b84fd8a6c496530568b1935b4b74120c
+  languageName: node
+  linkType: hard
+
 "oxc-parser@npm:^0.121.0":
   version: 0.121.0
   resolution: "oxc-parser@npm:0.121.0"
@@ -28319,73 +28437,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"oxc-parser@npm:^0.153.0":
-  version: 0.153.0
-  resolution: "oxc-parser@npm:0.153.0"
-  dependencies:
-    "@oxc-parser/binding-android-arm-eabi": "npm:0.153.0"
-    "@oxc-parser/binding-android-arm64": "npm:0.153.0"
-    "@oxc-parser/binding-darwin-arm64": "npm:0.153.0"
-    "@oxc-parser/binding-darwin-x64": "npm:0.153.0"
-    "@oxc-parser/binding-freebsd-x64": "npm:0.153.0"
-    "@oxc-parser/binding-linux-arm-gnueabihf": "npm:0.153.0"
-    "@oxc-parser/binding-linux-arm-musleabihf": "npm:0.153.0"
-    "@oxc-parser/binding-linux-arm64-gnu": "npm:0.153.0"
-    "@oxc-parser/binding-linux-arm64-musl": "npm:0.153.0"
-    "@oxc-parser/binding-linux-ppc64-gnu": "npm:0.153.0"
-    "@oxc-parser/binding-linux-riscv64-gnu": "npm:0.153.0"
-    "@oxc-parser/binding-linux-riscv64-musl": "npm:0.153.0"
-    "@oxc-parser/binding-linux-s390x-gnu": "npm:0.153.0"
-    "@oxc-parser/binding-linux-x64-gnu": "npm:0.153.0"
-    "@oxc-parser/binding-linux-x64-musl": "npm:0.153.0"
-    "@oxc-parser/binding-openharmony-arm64": "npm:0.153.0"
-    "@oxc-parser/binding-win32-arm64-msvc": "npm:0.153.0"
-    "@oxc-parser/binding-win32-ia32-msvc": "npm:0.153.0"
-    "@oxc-parser/binding-win32-x64-msvc": "npm:0.153.0"
-    "@oxc-project/types": "npm:^0.153.0"
-  dependenciesMeta:
-    "@oxc-parser/binding-android-arm-eabi":
-      optional: true
-    "@oxc-parser/binding-android-arm64":
-      optional: true
-    "@oxc-parser/binding-darwin-arm64":
-      optional: true
-    "@oxc-parser/binding-darwin-x64":
-      optional: true
-    "@oxc-parser/binding-freebsd-x64":
-      optional: true
-    "@oxc-parser/binding-linux-arm-gnueabihf":
-      optional: true
-    "@oxc-parser/binding-linux-arm-musleabihf":
-      optional: true
-    "@oxc-parser/binding-linux-arm64-gnu":
-      optional: true
-    "@oxc-parser/binding-linux-arm64-musl":
-      optional: true
-    "@oxc-parser/binding-linux-ppc64-gnu":
-      optional: true
-    "@oxc-parser/binding-linux-riscv64-gnu":
-      optional: true
-    "@oxc-parser/binding-linux-riscv64-musl":
-      optional: true
-    "@oxc-parser/binding-linux-s390x-gnu":
-      optional: true
-    "@oxc-parser/binding-linux-x64-gnu":
-      optional: true
-    "@oxc-parser/binding-linux-x64-musl":
-      optional: true
-    "@oxc-parser/binding-openharmony-arm64":
-      optional: true
-    "@oxc-parser/binding-win32-arm64-msvc":
-      optional: true
-    "@oxc-parser/binding-win32-ia32-msvc":
-      optional: true
-    "@oxc-parser/binding-win32-x64-msvc":
-      optional: true
-  checksum: 10c0/1b5777d7b8fd0d1cce77c7a02750c754a7f8fe2c977caa8b24ee6f50a2f117d984bda795d23d7786784bd94079150b57b84fd8a6c496530568b1935b4b74120c
-  languageName: node
-  linkType: hard
-
 "oxc-resolver@npm:11.21.2":
   version: 11.21.2
   resolution: "oxc-resolver@npm:11.21.2"
@@ -33559,6 +33610,7 @@ __metadata:
     "@jridgewell/remapping": "npm:^2.3.5"
     "@jridgewell/sourcemap-codec": "npm:^1.5.5"
     "@ngard/tiny-isequal": "npm:^1.1.0"
+    "@oxc-parser/binding-wasm32-wasi": "npm:0.153.0"
     "@polka/compression": "npm:^1.0.0-next.28"
     "@preact/signals-core": "npm:^1.14.2"
     "@radix-ui/react-scroll-area": "npm:1.2.0-rc.7"
@@ -33650,7 +33702,7 @@ __metadata:
     nanoid: "npm:^4.0.2"
     npmlog: "npm:^7.0.0"
     open: "npm:^10.2.0"
-    oxc-parser: "npm:^0.153.0"
+    oxc-parser: "npm:0.153.0"
     oxc-resolver: "npm:11.21.2"
     p-limit: "npm:^7.2.0"
     package-manager-detector: "npm:^1.1.0"
@@ -33706,6 +33758,9 @@ __metadata:
     "@types/react": ^18.0.0 || ^19.0.0
     prettier: ^2 || ^3
     vite-plus: ^0.1.15 || ^0.2.0 || ^0.3.0
+  dependenciesMeta:
+    "@oxc-parser/binding-wasm32-wasi":
+      optional: true
   peerDependenciesMeta:
     "@types/react":
       optional: true

From d54456609aabfb78a6d390c0e30a234d3aedb31d Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 21:18:51 +0200
Subject: [PATCH 199/326] fix(cli): keep the line endings of a rewritten Vitest
 setup file

The vitest-setup-file automigration read the setup file in `check`,
through a `FixFiles` of its own, and staged the rewrite in `run`
without reading it again. The commit then had no original to restore
line endings from, so a CRLF file came back with `\n`, and the guard
against files that changed on disk since the read did not apply.
`run` now stages the rewrite through `files.edit`, which reads first.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../automigrate/fixes/vitest-setup-file.test.ts | 17 +++++++++++++++++
 .../src/automigrate/fixes/vitest-setup-file.ts  |  4 +++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/code/lib/cli-storybook/src/automigrate/fixes/vitest-setup-file.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/vitest-setup-file.test.ts
index da7d7f533b0e..e095eec47008 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/vitest-setup-file.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/vitest-setup-file.test.ts
@@ -419,6 +419,23 @@ describe('vitestSetupFile', () => {
       expect(readFixture('vitest.config.ts')).toBe(STANDARD_VITEST_CONFIG);
     });
 
+    it('keeps the line endings of a CRLF setup file it rewrites', async () => {
+      await migrate({
+        '.storybook/vitest.setup.ts': CUSTOM_CODE_SETUP_FILE.replaceAll('\n', '\r\n'),
+        'vitest.config.ts': STANDARD_VITEST_CONFIG,
+      });
+
+      expect(readFixture('.storybook/vitest.setup.ts')).toBe(
+        [
+          "import { MotionGlobalConfig } from 'framer-motion';",
+          '',
+          '// Skip animations',
+          'MotionGlobalConfig.skipAnimations = true;',
+          '',
+        ].join('\r\n')
+      );
+    });
+
     it('keeps unrelated setupFiles entries', async () => {
       await migrate({
         '.storybook/vitest.setup.ts': PREVIEW_ONLY_SETUP_FILE,
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/vitest-setup-file.ts b/code/lib/cli-storybook/src/automigrate/fixes/vitest-setup-file.ts
index 54fe24ba53f6..3f4162ac15c9 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/vitest-setup-file.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/vitest-setup-file.ts
@@ -281,7 +281,9 @@ export const vitestSetupFile: Fix<VitestSetupFileOptions> = {
 
     for (const { path: setupFile, transform } of setupFiles) {
       if (transform.kind === 'rewritten') {
-        files.write(setupFile, await formatExistingFile(setupFile, transform.code));
+        // `check` read the file through another `files`; this read lets the commit keep the
+        // file's line endings and notice when it changed on disk since.
+        await files.edit(setupFile, () => formatExistingFile(setupFile, transform.code));
       }
     }
 

From bd6b51e68adb8ceb976098e540533e6c534a7c91 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 21:18:52 +0200
Subject: [PATCH 200/326] fix(addon-vitest): parse the config by its file name
 and keep its line ending

`injectAngularVitestIntoConfig` parsed the Vite config without its
file name, so a `.ts` config with syntax TSX rejects could not be
parsed; callers now pass the path. The `/// <reference />` line
prepended to a `vite.config` takes the line ending of the formatted
file instead of a bare `\n`, since the first line decides the line
ending the next edit writes the whole file with.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../src/angular-vitest-postinstall.test.ts    | 26 ++++++++++---------
 .../vitest/src/angular-vitest-postinstall.ts  |  4 +--
 code/addons/vitest/src/postinstall.test.ts    |  4 +--
 code/addons/vitest/src/postinstall.ts         | 17 +++++++++---
 4 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/code/addons/vitest/src/angular-vitest-postinstall.test.ts b/code/addons/vitest/src/angular-vitest-postinstall.test.ts
index df3b244f1aed..a0b4a8e9a55b 100644
--- a/code/addons/vitest/src/angular-vitest-postinstall.test.ts
+++ b/code/addons/vitest/src/angular-vitest-postinstall.test.ts
@@ -109,7 +109,7 @@ describe('collectStorybookTestLocalNames', () => {
 
 describe('injectAngularVitestIntoConfig', () => {
   it('co-locates the bridge in the same plugins array as storybookTest (case 1)', () => {
-    const out = injectAngularVitestIntoConfig(FRESH_V4);
+    const out = injectAngularVitestIntoConfig(FRESH_V4, 'vitest.config.ts');
     expect(out).not.toBeNull();
     const callees = pluginCalleesInSameArray(out!);
     expect(callees).toEqual([ANGULAR_VITEST_PLUGIN_CALL, 'storybookTest']);
@@ -119,7 +119,7 @@ describe('injectAngularVitestIntoConfig', () => {
   });
 
   it('adds the scaffold comment (case 20: comments preserved)', () => {
-    const out = injectAngularVitestIntoConfig(FRESH_V4)!;
+    const out = injectAngularVitestIntoConfig(FRESH_V4, 'vitest.config.ts')!;
     expect(out).toContain('Forwards Angular build options');
     // The template's own comment must also survive.
     expect(out).toContain('The plugin will run tests for the stories');
@@ -131,7 +131,7 @@ describe('injectAngularVitestIntoConfig', () => {
       `import { storybookTest as sbTest } from '@storybook/addon-vitest/vitest-plugin';`
     ).replace('storybookTest({ configDir', 'sbTest({ configDir');
 
-    const out = injectAngularVitestIntoConfig(aliased);
+    const out = injectAngularVitestIntoConfig(aliased, 'vitest.config.ts');
     expect(out).not.toBeNull();
     const callees = pluginCalleesInSameArray(out!, 'sbTest');
     expect(callees).toEqual([ANGULAR_VITEST_PLUGIN_CALL, 'sbTest']);
@@ -142,7 +142,7 @@ describe('injectAngularVitestIntoConfig', () => {
       import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
       export default { test: { projects: [{ plugins: [...storybookTest()] }] } };
     `;
-    expect(injectAngularVitestIntoConfig(spread)).toBeNull();
+    expect(injectAngularVitestIntoConfig(spread, 'vitest.config.ts')).toBeNull();
   });
 
   it('returns null when storybookTest is not in any array (exotic)', () => {
@@ -151,16 +151,18 @@ describe('injectAngularVitestIntoConfig', () => {
       const p = storybookTest();
       export default { test: { projects: [{ plugins: p }] } };
     `;
-    expect(injectAngularVitestIntoConfig(exotic)).toBeNull();
+    expect(injectAngularVitestIntoConfig(exotic, 'vitest.config.ts')).toBeNull();
   });
 
   it('returns null on unparsable content', () => {
-    expect(injectAngularVitestIntoConfig('this is ::: not valid <<< ts')).toBeNull();
+    expect(
+      injectAngularVitestIntoConfig('this is ::: not valid <<< ts', 'vitest.config.ts')
+    ).toBeNull();
   });
 
   it('is idempotent: a second pass adds no duplicate import or call (case 8)', () => {
-    const once = injectAngularVitestIntoConfig(FRESH_V4)!;
-    const twice = injectAngularVitestIntoConfig(once);
+    const once = injectAngularVitestIntoConfig(FRESH_V4, 'vitest.config.ts')!;
+    const twice = injectAngularVitestIntoConfig(once, 'vitest.config.ts');
     // Already wired by the import source — the string path short-circuits via callers, but the
     // injector itself must also not duplicate when re-run on already-injected content.
     expect(twice).not.toBeNull();
@@ -173,14 +175,14 @@ describe('injectAngularVitestIntoConfig', () => {
       'plugins: [',
       'plugins: [\n          storybookAngularVitest({}),'
     );
-    const out = injectAngularVitestIntoConfig(callOnly)!;
+    const out = injectAngularVitestIntoConfig(callOnly, 'vitest.config.ts')!;
     expect(countOccurrences(out, `${ANGULAR_VITEST_PLUGIN_CALL}(`)).toBe(1);
     expect(countOccurrences(out, ANGULAR_VITEST_IMPORT_SOURCE)).toBe(1);
   });
 
   it('partial wiring: import already present, adds call without duplicating the import (case 10b)', () => {
     const importOnly = `import { storybookAngularVitest } from '${ANGULAR_VITEST_IMPORT_SOURCE}';\n${FRESH_V4}`;
-    const out = injectAngularVitestIntoConfig(importOnly)!;
+    const out = injectAngularVitestIntoConfig(importOnly, 'vitest.config.ts')!;
     expect(countOccurrences(out, ANGULAR_VITEST_IMPORT_SOURCE)).toBe(1);
     expect(countOccurrences(out, `${ANGULAR_VITEST_PLUGIN_CALL}(`)).toBe(1);
     const callees = pluginCalleesInSameArray(out);
@@ -214,7 +216,7 @@ describe('injectAngularVitestIntoEditor', () => {
         },
       ]);
     `;
-    const out = injectAngularVitestIntoConfig(workspace);
+    const out = injectAngularVitestIntoConfig(workspace, 'vitest.config.ts');
     expect(out).not.toBeNull();
     const callees = pluginCalleesInSameArray(out!);
     expect(callees).toEqual([ANGULAR_VITEST_PLUGIN_CALL, 'storybookTest']);
@@ -225,6 +227,6 @@ describe('injectAngularVitestIntoEditor', () => {
       import { defineWorkspace } from 'vitest/config';
       export default defineWorkspace(['./vite.config.ts', './vitest.storybook.config.ts']);
     `;
-    expect(injectAngularVitestIntoConfig(referenced)).toBeNull();
+    expect(injectAngularVitestIntoConfig(referenced, 'vitest.config.ts')).toBeNull();
   });
 });
diff --git a/code/addons/vitest/src/angular-vitest-postinstall.ts b/code/addons/vitest/src/angular-vitest-postinstall.ts
index c3040f0edc02..2fb92109750a 100644
--- a/code/addons/vitest/src/angular-vitest-postinstall.ts
+++ b/code/addons/vitest/src/angular-vitest-postinstall.ts
@@ -117,10 +117,10 @@ export function injectAngularVitestIntoEditor(editor: SourceEditor): boolean {
  * and re-read paths. Returns `null` when the content cannot be parsed or no locatable plugins array
  * is found.
  */
-export function injectAngularVitestIntoConfig(content: string): string | null {
+export function injectAngularVitestIntoConfig(content: string, fileName: string): string | null {
   let editor: SourceEditor;
   try {
-    editor = new SourceEditor(content);
+    editor = new SourceEditor(content, fileName);
   } catch {
     return null;
   }
diff --git a/code/addons/vitest/src/postinstall.test.ts b/code/addons/vitest/src/postinstall.test.ts
index 06b398667d99..603ee2aa8844 100644
--- a/code/addons/vitest/src/postinstall.test.ts
+++ b/code/addons/vitest/src/postinstall.test.ts
@@ -102,7 +102,7 @@ describe('postinstall helpers', () => {
 describe('Angular bridge wiring (postinstall integration)', () => {
   it('fresh-create v4: co-locates the bridge in the template plugins array (case 5)', async () => {
     const template = await loadTemplate('vitest.config.4.template', { CONFIG_DIR: '.storybook' });
-    const out = injectAngularVitestIntoConfig(template);
+    const out = injectAngularVitestIntoConfig(template, 'vitest.config.ts');
     expect(out).not.toBeNull();
     expect(pluginCalleesInSameArray(out!)).toEqual([ANGULAR_VITEST_PLUGIN_CALL, 'storybookTest']);
     // Template comment survives the reprint (probe-locked path).
@@ -156,7 +156,7 @@ describe('Angular bridge wiring (postinstall integration)', () => {
         test: { projects: [{ extends: true, plugins: [storybookTest({ configDir: '.storybook' })] }] },
       };
     `;
-    const out = injectAngularVitestIntoConfig(existing);
+    const out = injectAngularVitestIntoConfig(existing, 'vitest.config.ts');
     expect(out).not.toBeNull();
     expect(pluginCalleesInSameArray(out!)).toEqual([ANGULAR_VITEST_PLUGIN_CALL, 'storybookTest']);
   });
diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index 4d12825c383e..f7f2cde0736d 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -10,7 +10,13 @@ import {
   getStorybookInfo,
   versions,
 } from 'storybook/internal/common';
-import { type ESTree as E, SourceEditor, parseModule, walk } from 'storybook/internal/csf-tools';
+import {
+  type ESTree as E,
+  SourceEditor,
+  parseModule,
+  restoreLineEndings,
+  walk,
+} from 'storybook/internal/csf-tools';
 import { CLI_COLORS } from 'storybook/internal/node-logger';
 import type { StorybookError } from 'storybook/internal/server-errors';
 import {
@@ -196,7 +202,7 @@ export default async function postInstall(options: PostinstallOptions) {
       return;
     }
 
-    const injected = injectAngularVitestIntoConfig(content);
+    const injected = injectAngularVitestIntoConfig(content, filePath);
     if (injected === null) {
       logger.error(dedent`
         We configured @storybook/addon-vitest, but could not automatically add the
@@ -274,7 +280,10 @@ export default async function postInstall(options: PostinstallOptions) {
       await writeFile(
         rootConfig,
         shouldAddReference
-          ? '/// <reference types="vitest/config" />\n' + formattedContent
+          ? restoreLineEndings(
+              '/// <reference types="vitest/config" />\n' + formattedContent,
+              formattedContent
+            )
           : formattedContent
       );
     } else {
@@ -303,7 +312,7 @@ export default async function postInstall(options: PostinstallOptions) {
     // array. The template always has a locatable array, so the injector never returns null here.
     let configContent = configTemplate;
     if (isAngularVite) {
-      const injected = injectAngularVitestIntoConfig(configTemplate);
+      const injected = injectAngularVitestIntoConfig(configTemplate, newConfigFile);
       if (injected !== null) {
         configContent = injected;
         logger.step('Added the @storybook/angular-vite standalone-vitest bridge.');

From 8918edb8c9c470c35c00f8788460429f4d00f3ad Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 21:18:52 +0200
Subject: [PATCH 201/326] fix(core): separate a saved story from a multi-line
 neighbour with a blank line

"Save as new story" appended the story straight after the previous
one. Babel's printer kept a blank line between multi-line stories;
the appended statement now gets one when it or the statement above
it spans several lines.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../save-story/duplicate-story-with-new-name.test.ts   | 10 ++++++++++
 .../utils/save-story/duplicate-story-with-new-name.ts  |  8 +++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.test.ts b/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.test.ts
index 1c2934eef0bc..666534a30975 100644
--- a/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.test.ts
+++ b/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.test.ts
@@ -47,23 +47,31 @@ describe('success', () => {
           },
         } satisfies Story;
         
+      + 
       + export const EmptyDuplicated = {} satisfies Story;
+      + 
       + export const EmptyWithCommentDuplicated = {
       +   // this is a useless comment, to test that it is preserved
       + } satisfies Story;
+      + 
       + export const OnlyArgsDuplicated = {} satisfies Story;
+      + 
       + export const RenderNoArgsDuplicated = {
       +   render: (args) => <MyComponent {...args} />,
       + } satisfies Story;
+      + 
       + export const RenderArgsDuplicated = {
       +   render: (args) => <MyComponent {...args} />,
       + } satisfies Story;
+      + 
       + export const RenderExistingArgsDuplicated = {
       +   render: (args) => <MyComponent {...args} />,
       + } satisfies Story;
+      + 
       + export const OrderedArgsDuplicated = {
       +   render: (args) => <MyComponent {...args} />,
       + } satisfies Story;
+      + 
       + export const HasPlayFunctionDuplicated = {
       +   play: async ({ canvasElement }) => {
       +     console.log("play");
@@ -101,6 +109,7 @@ describe('success', () => {
           },
         });
         
+      + 
       + export const EmptyDuplicated = meta.story({});
       + export const WithArgsDuplicated = meta.story({});
       + export const TypedDuplicated = meta
@@ -146,6 +155,7 @@ describe('success', () => {
           },
         };
         
+      + 
       + export const CastDuplicated: Story = {};
       + export const AsDuplicated = {} as Story;
       + export const SatisfiesDuplicated = {} satisfies Story;
diff --git a/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.ts b/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.ts
index 2bc4c2e22a38..936f8702afe8 100644
--- a/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.ts
+++ b/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.ts
@@ -49,7 +49,13 @@ export const duplicateStoryWithNewName = (csfFile: In, storyName: string, newSto
       ? csfFile._editor.source(node.id.typeAnnotation)
       : '';
 
-  appendStatement(csfFile._editor, `export const ${newStoryName}${typeAnnotation} = ${initCode};`);
+  const statement = `export const ${newStoryName}${typeAnnotation} = ${initCode};`;
+  const last = csfFile._editor.program.body.at(-1);
+  // A blank line separates a multi-line story from its neighbour, as the stories above it are.
+  const isMultiline = (code: string) => code.includes('\n');
+  const separator =
+    last && (isMultiline(csfFile._editor.source(last)) || isMultiline(statement)) ? '\n' : '';
+  appendStatement(csfFile._editor, separator + statement);
   csfFile._editor.commit();
 
   const duplicated = csfFile._storyExports[newStoryName];

From 4a58c9ebe3fdee9b35a69c63f0bbed4e6aca54be Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 21:18:52 +0200
Subject: [PATCH 202/326] fix(cli): indent the getAbsolutePath wrapper like the
 config and set it apart

`getAbsolutePathWrapperDeclaration` hard-coded two spaces; it now
takes the config and uses its editor's indent step. The wrap-getAbsolutePath
automigration leaves a blank line between `export default` and the
wrapper it appends.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/common/utils/wrap-getAbsolutePath-utils.ts    | 6 ++++--
 .../src/automigrate/fixes/wrap-getAbsolutePath.test.ts      | 6 ++++++
 .../src/automigrate/fixes/wrap-getAbsolutePath.ts           | 3 ++-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/code/core/src/common/utils/wrap-getAbsolutePath-utils.ts b/code/core/src/common/utils/wrap-getAbsolutePath-utils.ts
index 347fe1fdd927..7ad0a6cdcca0 100644
--- a/code/core/src/common/utils/wrap-getAbsolutePath-utils.ts
+++ b/code/core/src/common/utils/wrap-getAbsolutePath-utils.ts
@@ -122,7 +122,8 @@ export function getFieldsForGetAbsolutePathWrapper(config: ConfigFile): Node[] {
 }
 
 /**
- * Returns the source of the following function, for `ConfigFile#setBodyDeclaration`.
+ * Returns the source of the following function, indented like `config`, for
+ * `ConfigFile#setBodyDeclaration`.
  *
  * @example
  *
@@ -133,6 +134,7 @@ export function getFieldsForGetAbsolutePathWrapper(config: ConfigFile): Node[] {
  * ```
  */
 export function getAbsolutePathWrapperDeclaration(
+  config: ConfigFile,
   isConfigTypescript: boolean,
   names = { dirname: 'dirname', fileURLToPath: 'fileURLToPath' }
 ): string {
@@ -146,7 +148,7 @@ export function getAbsolutePathWrapperDeclaration(
     ' * It is needed in projects that are set up within a monorepo.',
     ' */',
     `function ${PREFERRED_GET_ABSOLUTE_PATH_WRAPPER_NAME}(${parameter}${isConfigTypescript ? ': string' : ''})${isConfigTypescript ? ': any' : ''} {`,
-    `  return ${names.dirname}(${names.fileURLToPath}(import.meta.resolve(\`\${${parameter}}/package.json\`)));`,
+    `${config._editor.indent}return ${names.dirname}(${names.fileURLToPath}(import.meta.resolve(\`\${${parameter}}/package.json\`)));`,
     '}',
   ].join('\n');
 }
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.test.ts
index 9a2ba3b7177b..b2b7ce3e7b25 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.test.ts
@@ -94,6 +94,7 @@ describe('wrapGetAbsolutePath', () => {
           },
         };
         export default config;
+
         /**
          * This function is used to resolve the absolute path of a package.
          * It is needed in projects that are set up within a monorepo.
@@ -130,6 +131,7 @@ describe('wrapGetAbsolutePath', () => {
           viteFinal: (viteConfig) => ({ ...viteConfig, root: path.resolve(dirname, '..') }),
         };
         export default config;
+
         /**
          * This function is used to resolve the absolute path of a package.
          * It is needed in projects that are set up within a monorepo.
@@ -161,6 +163,7 @@ describe('wrapGetAbsolutePath', () => {
           viteFinal: (viteConfig) => ({ ...viteConfig, root: value(import.meta.url) }),
         };
         export default config;
+
         /**
          * This function is used to resolve the absolute path of a package.
          * It is needed in projects that are set up within a monorepo.
@@ -196,6 +199,7 @@ describe('wrapGetAbsolutePath', () => {
           viteFinal: (viteConfig) => ({ ...viteConfig, root: dirname(import.meta.url) }),
         };
         export default config;
+
         /**
          * This function is used to resolve the absolute path of a package.
          * It is needed in projects that are set up within a monorepo.
@@ -227,6 +231,7 @@ describe('wrapGetAbsolutePath', () => {
           viteFinal: (viteConfig) => ({ ...viteConfig, root: pathDirname(import.meta.url) }),
         };
         export default config;
+
         /**
          * This function is used to resolve the absolute path of a package.
          * It is needed in projects that are set up within a monorepo.
@@ -267,6 +272,7 @@ describe('wrapGetAbsolutePath', () => {
           },
         };
         export default config;
+
         /**
          * This function is used to resolve the absolute path of a package.
          * It is needed in projects that are set up within a monorepo.
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.ts b/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.ts
index c3e27ba9b4db..b0c976efaf0e 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.ts
@@ -40,8 +40,9 @@ export const wrapGetAbsolutePath: Fix = {
             dirname: ensureNamedImport(mainConfig, 'dirname', 'node:path'),
             fileURLToPath: ensureNamedImport(mainConfig, 'fileURLToPath', 'node:url'),
           };
+          // On its own paragraph, below the export default.
           mainConfig.setBodyDeclaration(
-            getAbsolutePathWrapperDeclaration(/\.tsx?$/.test(id), names)
+            `\n${getAbsolutePathWrapperDeclaration(mainConfig, /\.tsx?$/.test(id), names)}`
           );
         }
       },

From 2989ee971d6e5fe701185100a56257415598babb Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 21:20:23 +0200
Subject: [PATCH 203/326] fix(csf-tools): report a commit the CSF indexer
 rejects instead of throwing

A `CsfObject` edit whose result is valid JS but not valid CSF, such as
spreading into the meta `tags`, threw the indexer's error out of
`transform` and left the `CsfFile` half-reset: no meta, no stories,
`changed` false, while the text edit was applied.

The commit callback now resets the index again when parsing fails and
keeps the error, so `meta`, `stories`, `indexInputs`, `getStoryTests`
and object discovery throw it instead of returning empty. `CsfObject`
turns the failure into an `invalid-csf` diagnostic with `ok: false,
changed: true`, as the edit stays applied. The `transform` JSDoc
examples no longer show an edit that breaks CSF indexing.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/CsfFile.ts            | 30 +++++++-
 code/core/src/csf-tools/CsfObject.test.ts     | 47 +++++++++++-
 code/core/src/csf-tools/CsfObject.ts          | 75 +++++++++++++------
 code/core/src/csf-tools/CsfObjectDiscovery.ts |  1 +
 code/core/src/csf-tools/estree/ast.ts         |  2 +-
 5 files changed, 128 insertions(+), 27 deletions(-)

diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index 1f90f7a82806..4f3b5f12850f 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -383,11 +383,11 @@ export class CsfFile {
 
   _tests: StoryTest[] = [];
 
+  // Why the last commit left the index empty: its code is valid JS the CSF indexer rejects.
+  _indexError: unknown;
+
   constructor(code: string, options: CsfOptions) {
-    this._editor = new SourceEditor(code, options.fileName, () => {
-      this._reset();
-      this.parse();
-    });
+    this._editor = new SourceEditor(code, options.fileName, () => this._reindex());
     this._options = options;
     this.imports = [];
     mutationStates.set(this, { diagnostics: [], changed: false });
@@ -491,6 +491,24 @@ export class CsfFile {
     this._namedExportsOrder = undefined;
     this.imports = [];
     this._tests = [];
+    this._indexError = undefined;
+  }
+
+  _reindex() {
+    this._reset();
+    try {
+      this.parse();
+    } catch (error) {
+      this._reset();
+      this._indexError = error;
+      throw error;
+    }
+  }
+
+  _assertIndexed() {
+    if (this._indexError) {
+      throw this._indexError;
+    }
   }
 
   _parseTitle(value: Node) {
@@ -1108,14 +1126,17 @@ export class CsfFile {
   }
 
   public get meta() {
+    this._assertIndexed();
     return this._meta;
   }
 
   public get stories() {
+    this._assertIndexed();
     return Object.values(this._stories);
   }
 
   public getStoryTests(story: string | Node) {
+    this._assertIndexed();
     const storyNode = typeof story === 'string' ? this._storyStatements[story] : story;
     if (!storyNode) {
       return [];
@@ -1124,6 +1145,7 @@ export class CsfFile {
   }
 
   public get indexInputs(): IndexInput[] {
+    this._assertIndexed();
     const { fileName } = this._options;
     if (!fileName) {
       throw new Error(
diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index 2f1e2f35112f..43d2656965da 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -3,7 +3,7 @@ import { afterEach, describe, expect, it, vi } from 'vitest';
 import { loadCsf, printCsf } from './CsfFile.ts';
 import { loadConfig, printConfig } from './ConfigFile.ts';
 import type { CsfValue } from './CsfObject.ts';
-import { parseExpression, textOf } from './estree/ast.ts';
+import { parseExpression, placeableTextOf, textOf } from './estree/ast.ts';
 
 const parse = (source: string) =>
   loadCsf(source, { makeTitle: (title) => title ?? 'title' }).parse();
@@ -899,4 +899,49 @@ describe('CsfObject', () => {
     expect(csf.objects({ meta: false, stories: true })).toHaveLength(0);
     expect(csf.mutationDiagnostics).toEqual([]);
   });
+
+  describe('an edit the CSF indexer rejects', () => {
+    const load = (code: string) =>
+      loadCsf(code, { fileName: 'B.stories.ts', makeTitle: (title) => title ?? 'B' }).parse();
+
+    it('keeps the edit and reports it instead of throwing', () => {
+      const csf = load("export default { title: 'B', tags: ['docs'] };\nexport const A = {};\n");
+      const [meta] = csf.objects({ stories: false });
+
+      const result = meta.transform(['tags'], (value) =>
+        parseExpression(`[...${placeableTextOf(value)}, 'autodocs']`)
+      );
+
+      expect(result).toEqual({
+        ok: false,
+        changed: true,
+        diagnostic: expect.objectContaining({
+          code: 'invalid-csf',
+          path: ['tags'],
+          message: expect.stringContaining('CSF: Expected tag to be string literal'),
+        }),
+      });
+      expect(printCsf(csf).code).toBe(
+        "export default { title: 'B', tags: [...['docs'], 'autodocs'] };\nexport const A = {};\n"
+      );
+      expect(csf.changed).toBe(true);
+      expect(meta.changed).toBe(true);
+      expect(csf.mutationDiagnostics).toEqual([result.diagnostic]);
+    });
+
+    it.each([
+      { path: ['title'], expression: '`B`', error: 'CSF: unexpected dynamic title' },
+      { path: ['includeStories'], expression: 'fn()', error: 'Unknown include/exclude' },
+    ])('throws for the index after setting $path to $expression', ({ path, expression, error }) => {
+      const csf = load("export default { title: 'B' };\nexport const A = {};\n");
+      const [meta] = csf.objects({ stories: false });
+
+      expect(meta.set(path, parseExpression(expression)).ok).toBe(false);
+      expect(printCsf(csf).code).toContain(`${path[0]}: ${expression}`);
+      expect(() => csf.meta).toThrow(error);
+      expect(() => csf.stories).toThrow(error);
+      expect(() => csf.indexInputs).toThrow(error);
+      expect(() => csf.objects()).toThrow(error);
+    });
+  });
 });
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index f48dcd001318..79d4898c5fca 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -59,7 +59,8 @@ export type CsfMutationDiagnosticCode =
   | 'unsupported-member'
   | 'occupied-destination'
   | 'cyclic-move'
-  | 'evaluation-order';
+  | 'evaluation-order'
+  | 'invalid-csf';
 
 export interface CsfMutationDiagnostic {
   code: CsfMutationDiagnosticCode;
@@ -69,9 +70,13 @@ export interface CsfMutationDiagnostic {
   loc?: SourceLocation;
 }
 
+/**
+ * Outcome of a mutation. `ok: false` with `changed: true` means the edit was applied but left a file
+ * the CSF indexer rejects, such as a meta `tags` that is no longer an array of string literals.
+ */
 export type CsfMutationResult =
   | { ok: true; changed: boolean }
-  | { ok: false; changed: false; diagnostic: CsfMutationDiagnostic };
+  | { ok: false; changed: boolean; diagnostic: CsfMutationDiagnostic };
 
 /**
  * An expression detached from any file, as returned by `get` and accepted by `set` and
@@ -146,11 +151,11 @@ export interface CsfObject {
    *
    * @example
    * ```ts
-   * const object = loadConfig("export default { tags: ['docs'] };").parse();
-   * object.transform(['tags'], (value) =>
-   *   parseExpression(`[...${placeableTextOf(value)}, 'autodocs']`)
+   * const object = loadConfig('export default { args: { count: 1 } };').parse();
+   * object.transform(['args', 'count'], (value) =>
+   *   parseExpression(`${placeableTextOf(value)} + 1`)
    * ); // { ok: true, changed: true }
-   * object.getValue(['tags']); // ['docs', 'autodocs']
+   * object.getValue(['args', 'count']); // 2
    * ```
    */
   transform(
@@ -458,7 +463,7 @@ class CsfObjectEditor implements CsfObject {
         },
       ]);
     }
-    return this.success();
+    return this.commit(path);
   }
 
   transform(
@@ -483,7 +488,7 @@ class CsfObjectEditor implements CsfObject {
       return { ok: true, changed: false };
     }
     parent.root.replaceValue(property, placeableTextOf(derived));
-    return this.success();
+    return this.commit(path);
   }
 
   remove(path: readonly string[]): CsfMutationResult {
@@ -503,9 +508,11 @@ class CsfObjectEditor implements CsfObject {
       return this.failure(removal.code, path, removal.node);
     }
     inspected.parent.root.remove([inspected.property]);
-    this.editor.commit();
-    this.removeEmptyParents(logicalPath);
-    return this.success();
+    const removed = this.commit(path);
+    if (!removed.ok) {
+      return removed;
+    }
+    return this.removeEmptyParents(logicalPath, path) ?? removed;
   }
 
   rename(path: readonly string[], name: string): CsfMutationResult {
@@ -566,22 +573,27 @@ class CsfObjectEditor implements CsfObject {
       sourceParent.every((part, index) => destinationParent[index] === part)
     ) {
       source.parent.root.rename(source.property, key);
-      return this.success();
+      return this.commit(from);
     }
 
     const moved = source.parent.root.take(source.property, key);
     // Insert first: if that throws, nothing has been committed. The source is removed afterwards,
     // looked up again since the insertion moved its spans.
     this.insert(destinationPath, [{ ...moved, key }]);
-    this.editor.commit();
+    const inserted = this.commit(from);
+    if (!inserted.ok) {
+      return inserted;
+    }
     const remaining = this.inspect(sourcePath);
     if (remaining.ok === false || !remaining.property || !remaining.parent) {
       throw new Error(`CsfObject: ${sourcePath.join('.')} was not found again after moving it`);
     }
     remaining.parent.root.remove([remaining.property]);
-    this.editor.commit();
-    this.removeEmptyParents(sourcePath);
-    return this.success();
+    const removed = this.commit(from);
+    if (!removed.ok) {
+      return removed;
+    }
+    return this.removeEmptyParents(sourcePath, from) ?? removed;
   }
 
   group(path: readonly string[], names: readonly string[]): CsfMutationResult {
@@ -741,10 +753,14 @@ class CsfObjectEditor implements CsfObject {
       }
       parent.group(moved, group);
     }
-    return this.success();
+    return this.commit(path);
   }
 
-  private removeEmptyParents(path: readonly string[]) {
+  // Returns the result of a rejected commit, which ends the clean-up.
+  private removeEmptyParents(
+    path: readonly string[],
+    reported: readonly string[]
+  ): CsfMutationResult | undefined {
     for (let depth = path.length - 1; depth > 0; depth--) {
       const ancestor = this.inspect(path.slice(0, depth));
       if (
@@ -763,8 +779,12 @@ class CsfObjectEditor implements CsfObject {
         return;
       }
       ancestor.parent.root.remove([ancestor.property]);
-      this.editor.commit();
+      const committed = this.commit(reported);
+      if (!committed.ok) {
+        return committed;
+      }
     }
+    return undefined;
   }
 
   private normalizePath(path: readonly string[]) {
@@ -870,10 +890,23 @@ class CsfObjectEditor implements CsfObject {
     return { ok: false as const, changed: false as const, diagnostic };
   }
 
-  private success(): CsfMutationResult {
-    this.editor.commit();
+  // The edit stays applied when the file's indexer rejects the committed code: the file is valid
+  // JS, so that is a diagnostic rather than an error.
+  private commit(path: readonly string[]): CsfMutationResult {
     this.#changed = true;
     this.markChanged();
+    try {
+      this.editor.commit();
+    } catch (error) {
+      const reason = error instanceof Error ? error.message : String(error);
+      const rejected = this.failure(
+        'invalid-csf',
+        path,
+        this.anchor(),
+        `Edited ${path.join('.')}, but the result is not valid CSF: ${reason}`
+      );
+      return { ...rejected, changed: true };
+    }
     return { ok: true, changed: true };
   }
 }
diff --git a/code/core/src/csf-tools/CsfObjectDiscovery.ts b/code/core/src/csf-tools/CsfObjectDiscovery.ts
index a6da4bc8b295..f27d62fd7cfd 100644
--- a/code/core/src/csf-tools/CsfObjectDiscovery.ts
+++ b/code/core/src/csf-tools/CsfObjectDiscovery.ts
@@ -395,6 +395,7 @@ const discover = (
   options: CsfObjectOptions,
   report: ReportDiagnostic
 ): Discovered[] => {
+  csf._assertIndexed();
   const includeStories = options.stories ?? true;
   const bindings = includeStories ? storyBindings(csf, report) : [];
   return [
diff --git a/code/core/src/csf-tools/estree/ast.ts b/code/core/src/csf-tools/estree/ast.ts
index f1574d6cbbf1..36e713a0ea76 100644
--- a/code/core/src/csf-tools/estree/ast.ts
+++ b/code/core/src/csf-tools/estree/ast.ts
@@ -444,7 +444,7 @@ export const parseFragment = (code: string): ParsedModule => parseModule(code);
  *
  * @example
  * ```ts
- * object.transform(['tags'], (value) => parseExpression(`[...${placeableTextOf(value)}, 'autodocs']`));
+ * object.transform(['args', 'count'], (value) => parseExpression(`${placeableTextOf(value)} + 1`));
  * ```
  */
 export const parseExpression = (source: string): E.Expression => {

From 89477c694001e6fd3658163fd1326fd67790f812 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 21:20:26 +0200
Subject: [PATCH 204/326] docs(migration): document the csf-tools behaviour and
 mocking-utils compatibility

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 MIGRATION.md | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index bfd985524a4e..696340620268 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1346,7 +1346,10 @@ Storybook no longer bundles Babel or recast to read and write story and config f
 - **Flow syntax is no longer supported in story files.** Babel parsed `// @flow` files with its Flow plugin; OXC does not parse Flow. A `// @flow` file whose syntax is also valid TypeScript still indexes, but Flow-only syntax such as variance (`+readOnly`) or type casts (`(value: Type)`) is a parse error, and the error names Flow. Convert such files to TypeScript or plain JavaScript.
 - `parameters.docs.source.originalSource` is now the story's source text exactly as written, where Babel reprinted it with its own formatting. "Show code" and `docs.source.transform` functions receive the authored text, with line endings normalized to `\n`.
 - Parse errors use OXC's wording, and end with ` in <file>` when the file name is known. Duplicate declarations and legacy octal literals are still rejected.
-- A parse error in a module that `sb.mock()` automocks under webpack now fails that module's build, where Babel's error recovery used to mock whatever it could parse.
+- A parse error in a module that `sb.mock()` automocks is no longer recovered from, where Babel used to mock whatever it could parse. Under Vite the error is logged and the real module loads unmocked; under webpack the module's build fails.
+- Code that a migration or `storybook add` inserts follows the file: string quotes and indentation are inferred from it, new imports go after the existing imports in the order they are added, and a statement put first in a file stays below its header comments.
+- `export { Missing }` of a name the file never declares is rejected with `Export 'Missing' is not defined`.
+- The Vitest config that `@storybook/addon-vitest` writes reads the config directory from `import.meta.dirname`.
 - Story files read string-literal keys and ignore computed identifier keys. `export default { 'title': 'X' }` now gives story ids under `X`, where Babel used the automatic title, and `export default { [title]: 'X' }` no longer sets the title.
 
 #### Changes for tooling that imports Storybook's internal entry points
@@ -1359,9 +1362,9 @@ Storybook no longer bundles Babel or recast to read and write story and config f
 - `babelParse` is removed; use `parseModule(code, fileName)` from `storybook/internal/csf-tools`, which returns the ESTree `program` and `comments`. `babelParseFile` is removed as well; read CSF with `loadCsf(code, options)` or `readCsf(fileName, options)`.
 - Parsing normalizes line endings to `\n`. Node offsets from `parseModule`, `CsfFile._program` and `ConfigFile._program` index the normalized `code`/`_code`, not the string you passed in; lines and columns are unchanged.
 - `getHeaderComments(statement)` is replaced by `headerComments(editor)`.
-- `getAutomockCode(code, isSpy, fileName)` and `extractMockCalls(options, root, findMockRedirect)` in `storybook/internal/mocking-utils` parse the code themselves and no longer take a parser: drop the parser argument and pass the module's file name to `getAutomockCode`. `babelParser` is removed.
+- `getAutomockCode(code, isSpy, fileName)` and `extractMockCalls(options, root, findMockRedirect)` in `storybook/internal/mocking-utils` parse the code themselves and no longer take a parser: drop the parser argument and pass the module's file name to `getAutomockCode`. `rewriteSbMockImportCalls(code, fileName)` requires the file name as well. Until Storybook 12 both functions still accept a parse function where the file name or root used to be, and ignore it, and `babelParser` is still exported as a deprecated parse function that returns an ESTree program, so builders built against Storybook 10 keep working. `automockModule` is no longer exported.
 - The story-shape helpers no longer take Babel paths: `jsDocTagsForPath` is `jsDocTagsForNode`, `metaObjectPath` is `metaObject`, `RenderFunctionPath` is `RenderFunction`, and `pathForNode` and `returnedExpressionPath` are removed in favor of `returnedExpression` and plain nodes.
-- The `getAbsolutePath` wrapper helpers in `storybook/internal/common` produce source text instead of Babel nodes. `getAbsolutePathWrapperAsCallExpression(isTs, names)`, which returned the wrapper's function declaration, is replaced by `getAbsolutePathWrapperDeclaration(isTs, names)`, which returns the declaration's source for `ConfigFile#setBodyDeclaration`. `getAbsolutePathCall(config, value)` returns the source of a call to the config's wrapper. `wrapValueWithGetAbsolutePathWrapper(config, node)` is replaced by `wrapValuesWithGetAbsolutePathWrapper(config, nodes)`, which wraps every node in the array and commits the edits to `config`.
+- The `getAbsolutePath` wrapper helpers in `storybook/internal/common` produce source text instead of Babel nodes. `getAbsolutePathWrapperAsCallExpression(isTs, names)`, which returned the wrapper's function declaration, is replaced by `getAbsolutePathWrapperDeclaration(config, isTs, names)`, which returns the declaration's source, indented like `config`, for `ConfigFile#setBodyDeclaration`. `getAbsolutePathCall(config, value)` returns the source of a call to the config's wrapper. `wrapValueWithGetAbsolutePathWrapper(config, node)` is replaced by `wrapValuesWithGetAbsolutePathWrapper(config, nodes)`, which wraps every node in the array and commits the edits to `config`.
 - `new CsfFile(code, options)` and `new ConfigFile(code, fileName)` take source code instead of a Babel AST.
 - `formatCsf(csf, { sourceMaps, sourceFileName, inputSourceMap })` replaces the Babel generator options; `printCsf` and `printConfig` take no options, and all three print a file whose first line ends in CRLF with CRLF line endings, and any other file with `\n`. A file that mixes line endings is printed with its first line's ending throughout, and a file with lone CR line endings with `\n`.
 - `ConfigFile#setBodyDeclaration(code)` takes the declaration's source text instead of a Babel node.

From d1de9333e1f2bd908734c065817d78e750abe2b6 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 21:31:07 +0200
Subject: [PATCH 205/326] refactor(csf-tools): keep magic-string out of the
 public declarations

`SourceEditor` exposed `MagicString` and `SourceMap` through its
by-convention private fields, its `edits` getter and `GeneratedMap`, so
`dist/csf-tools/index.d.ts` imported magic-string. The private fields
are `@internal`, which `stripInternal` removes from the declarations
while the class stays structural; `edits` is typed as the `SourceEdits`
operations in-repo callers use, and `GeneratedMap` is declared
structurally.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/editor.ts | 47 +++++++++++++++++++++---
 1 file changed, 41 insertions(+), 6 deletions(-)

diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 2f36527cd3a7..34279a35c933 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -27,10 +27,31 @@ import { type ScopeInfo, analyzeScopes } from './scope.ts';
 const mapSource = (editor: { fileName: string | undefined }) => editor.fileName ?? 'source';
 
 /** A map whose `sourcesContent` may be unknown for sources an input map did not carry. */
-export type GeneratedMap = Omit<SourceMap, 'sourcesContent'> & {
+export interface GeneratedMap {
+  version: number;
+  file: string | undefined;
+  sources: string[];
   sourcesContent?: (string | null)[];
+  names: string[];
+  mappings: string;
   sourceRoot?: string;
-};
+  /** The map as JSON. */
+  toString(): string;
+  /** The map as a data URI. */
+  toUrl(): string;
+}
+
+/** The pending edits of a `SourceEditor`, addressed by offsets into its `code`. */
+export interface SourceEdits {
+  append(content: string): this;
+  appendLeft(index: number, content: string): this;
+  appendRight(index: number, content: string): this;
+  overwrite(start: number, end: number, content: string): this;
+  remove(start: number, end: number): this;
+  /** The content of a span as edited so far; throws when an edit cuts through its ends. */
+  slice(start: number, end: number): string;
+  toString(): string;
+}
 
 /** A source map from an earlier transform, as the object or the JSON string it was handed over as. */
 export type InputSourceMap =
@@ -54,25 +75,39 @@ export type InputSourceMap =
  * text too.
  */
 export class SourceEditor {
+  /** @internal */
   _module: ParsedModule;
 
+  /** @internal */
   _scopes: ScopeInfo | undefined;
 
+  /** @internal */
   _parents: Map<Node, Node | null> | undefined;
 
+  /** @internal */
   _edits: MagicString;
 
-  // Maps of the edits applied by earlier commits, oldest first, so the output still maps to the
-  // code the editor was created with.
+  /**
+   * Maps of the edits applied by earlier commits, oldest first, so the output still maps to the
+   * code the editor was created with.
+   *
+   * @internal
+   */
   _committed: SourceMap[] = [];
 
-  // The code the editor was created with, line endings included: the content its maps name.
+  /**
+   * The code the editor was created with, line endings included: the content its maps name.
+   *
+   * @internal
+   */
   readonly _originalCode: string;
 
   readonly fileName: string | undefined;
 
+  /** @internal */
   readonly _onCommit: (() => void) | undefined;
 
+  /** @internal */
   _style: Style | undefined;
 
   constructor(code: string, fileName?: string, onCommit?: () => void) {
@@ -122,7 +157,7 @@ export class SourceEditor {
     return undefined;
   }
 
-  get edits() {
+  get edits(): SourceEdits {
     return this._edits;
   }
 

From 76f3074290108b3e6ccff9982ca8397b26f1aca5 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 21:34:45 +0200
Subject: [PATCH 206/326] refactor(csf-tools): drop entry exports nobody
 imports

`CsfExpression`, `isValidIdentifier`, `headerComments`, `printValue` and
`List` were added to `storybook/internal/csf-tools` without a caller
outside csf-tools, in `code/` or `scripts/`. The rest of the additions
stay: every one has an importer in another package or in `scripts/`.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/index.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/code/core/src/csf-tools/index.ts b/code/core/src/csf-tools/index.ts
index a7b265481bf1..33eb501b8ec0 100644
--- a/code/core/src/csf-tools/index.ts
+++ b/code/core/src/csf-tools/index.ts
@@ -1,6 +1,5 @@
 export * from './CsfFile.ts';
 export type {
-  CsfExpression,
   CsfMutationDiagnostic,
   CsfMutationDiagnosticCode,
   CsfMutationResult,
@@ -19,7 +18,6 @@ export type { E as ESTree, Node as ESTreeNode } from './estree/ast.ts';
 export {
   isStringLiteral,
   isTSWrapper,
-  isValidIdentifier,
   normalizeLineEndings,
   outerSpan,
   parseExpression,
@@ -34,13 +32,11 @@ export {
 export { SourceEditor } from './estree/editor.ts';
 export { generateUid, type Binding, type ScopeInfo } from './estree/scope.ts';
 export {
-  type List,
   appendStatement,
   appendToList,
   argumentList,
   arrayList,
   declaratorList,
-  headerComments,
   insertAfterImports,
   itemText,
   lineIndent,
@@ -49,7 +45,6 @@ export {
   prependToList,
   printMembers,
   printString,
-  printValue,
   reindent,
   removeFromList,
   removeStatement,

From c75d87f3d02f4383f242d04b538cbfcfc8b74147 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 21:35:09 +0200
Subject: [PATCH 207/326] refactor(csf-tools): declare the editor's fields
 structurally instead of stripping them

`@internal` removed `SourceEditor`'s by-convention private fields from the
declarations, so an editor typed from `storybook/internal/csf-tools`
(which resolves to `dist` once the declarations exist) was no longer
assignable to the `src` class that in-core helpers take. The fields stay
declared: `_edits` as the `SourceEdits` operations, `_committed` as
`GeneratedMap[]`, both structural, so `dist/csf-tools/index.d.ts` is
free of magic-string and identical in shape to `src`.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/editor.ts | 33 ++++++++++--------------
 1 file changed, 13 insertions(+), 20 deletions(-)

diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 34279a35c933..997128ef03ee 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -50,6 +50,13 @@ export interface SourceEdits {
   remove(start: number, end: number): this;
   /** The content of a span as edited so far; throws when an edit cuts through its ends. */
   slice(start: number, end: number): string;
+  hasChanged(): boolean;
+  generateMap(options?: {
+    hires?: boolean | 'boundary';
+    includeContent?: boolean;
+    source?: string;
+    file?: string;
+  }): GeneratedMap;
   toString(): string;
 }
 
@@ -75,39 +82,25 @@ export type InputSourceMap =
  * text too.
  */
 export class SourceEditor {
-  /** @internal */
   _module: ParsedModule;
 
-  /** @internal */
   _scopes: ScopeInfo | undefined;
 
-  /** @internal */
   _parents: Map<Node, Node | null> | undefined;
 
-  /** @internal */
-  _edits: MagicString;
+  _edits: SourceEdits;
 
-  /**
-   * Maps of the edits applied by earlier commits, oldest first, so the output still maps to the
-   * code the editor was created with.
-   *
-   * @internal
-   */
-  _committed: SourceMap[] = [];
+  // Maps of the edits applied by earlier commits, oldest first, so the output still maps to the
+  // code the editor was created with.
+  _committed: GeneratedMap[] = [];
 
-  /**
-   * The code the editor was created with, line endings included: the content its maps name.
-   *
-   * @internal
-   */
+  // The code the editor was created with, line endings included: the content its maps name.
   readonly _originalCode: string;
 
   readonly fileName: string | undefined;
 
-  /** @internal */
   readonly _onCommit: (() => void) | undefined;
 
-  /** @internal */
   _style: Style | undefined;
 
   constructor(code: string, fileName?: string, onCommit?: () => void) {
@@ -157,7 +150,7 @@ export class SourceEditor {
     return undefined;
   }
 
-  get edits(): SourceEdits {
+  get edits() {
     return this._edits;
   }
 

From 66de92fb782e7b01fe2f7a5068ee63002868dc1a Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 21:35:37 +0200
Subject: [PATCH 208/326] refactor(csf-tools): rely on the spans every OXC node
 carries

Every `@oxc-project/types` node extends `Span`, so the `Node & { start;
end }` casts, `isSpan` and the `Node | { start; end }` unions only
restated that. `CsfObject` tells an expression from a plain value by
whether a parse knows the node, which is the contract `textOf` prints
by. The CRLF quote-inference test existed in both ConfigFile and
ConfigObject tests; one remains. The `invalid-csf` test asserts on the
file's diagnostics instead of a result it had not narrowed.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/ConfigFile.test.ts    | 20 -------------------
 code/core/src/csf-tools/CsfFile.ts            | 10 ++++------
 code/core/src/csf-tools/CsfObject.test.ts     |  4 +++-
 code/core/src/csf-tools/CsfObject.ts          | 12 +++++------
 code/core/src/csf-tools/CsfObjectDiscovery.ts |  5 +----
 code/core/src/csf-tools/enrichCsf.ts          |  5 +----
 code/core/src/csf-tools/estree/ast.ts         |  4 ++--
 code/core/src/csf-tools/estree/editor.ts      |  6 +-----
 code/core/src/csf-tools/estree/scope.ts       | 12 ++++-------
 .../csf-tools/story-shape/normalize-story.ts  |  6 ++----
 10 files changed, 24 insertions(+), 60 deletions(-)

diff --git a/code/core/src/csf-tools/ConfigFile.test.ts b/code/core/src/csf-tools/ConfigFile.test.ts
index 2821becad14b..6853d77c1452 100644
--- a/code/core/src/csf-tools/ConfigFile.test.ts
+++ b/code/core/src/csf-tools/ConfigFile.test.ts
@@ -1152,26 +1152,6 @@ describe('ConfigFile', () => {
     });
   });
 
-  describe('quote inference under EOL reconstruction', () => {
-    it('infers quotes and keeps the line endings of CRLF sources', () => {
-      const source = [
-        "import { addons } from 'storybook/manager-api';",
-        '',
-        'export const tags = [];',
-      ].join('\r\n');
-      const config = loadConfig(source).parse();
-      config.set(['tags'], ['autodocs']);
-
-      expect(printConfig(config).code).toBe(
-        [
-          "import { addons } from 'storybook/manager-api';",
-          '',
-          "export const tags = ['autodocs'];",
-        ].join('\r\n')
-      );
-    });
-  });
-
   describe('config helpers', () => {
     describe('getNameFromPath', () => {
       it(`supports string literal node`, () => {
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index 4f3b5f12850f..908fafbd8c97 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -26,6 +26,7 @@ import {
   EstreeParseError,
   type Node,
   type SourceLocation,
+  type Span,
   children,
   staticKey,
   isFunction,
@@ -401,11 +402,8 @@ export class CsfFile {
     return this._editor.code;
   }
 
-  _loc(node: Node | { start: number; end: number } | undefined): Located {
-    const span = node as { start?: number; end?: number } | undefined;
-    return typeof span?.start === 'number' && typeof span.end === 'number'
-      ? { loc: locationOf(this._editor.code, span.start, span.end) }
-      : undefined;
+  _loc(node: Span | undefined): Located {
+    return node ? { loc: locationOf(this._editor.code, node.start, node.end) } : undefined;
   }
 
   /**
@@ -651,7 +649,7 @@ export class CsfFile {
        */
       const metaName = generateUid(this._editor.scopes, 'meta');
       this._metaVariableName = metaName;
-      const declaration = node.declaration as Node & { start: number; end: number };
+      const { declaration } = node;
       this._editor.edits.overwrite(
         node.start,
         outerSpan(declaration).start,
diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index 43d2656965da..94c6eb17761e 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -926,7 +926,9 @@ describe('CsfObject', () => {
       );
       expect(csf.changed).toBe(true);
       expect(meta.changed).toBe(true);
-      expect(csf.mutationDiagnostics).toEqual([result.diagnostic]);
+      expect(csf.mutationDiagnostics).toEqual([
+        expect.objectContaining({ code: 'invalid-csf', target: { kind: 'meta' } }),
+      ]);
     });
 
     it.each([
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index 79d4898c5fca..f205a7b58a52 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -3,7 +3,9 @@ import {
   type Node,
   type Property,
   type SourceLocation,
+  isNode,
   locationOf,
+  moduleOf,
   parseExpression,
   placeableTextOf,
   staticKey,
@@ -13,7 +15,6 @@ import {
   type SourceEditor,
   appendMembers,
   groupMembers,
-  isSpan,
   keySource,
   prependMembers,
   printKey,
@@ -431,8 +432,8 @@ class CsfObjectEditor implements CsfObject {
   }
 
   private sourceFor(value: CsfValue | CsfExpression) {
-    if (isSpan(value)) {
-      return placeableTextOf(value as Node);
+    if (isNode(value) && moduleOf(value)) {
+      return placeableTextOf(value);
     }
     if (isAstLike(value)) {
       throw new Error(
@@ -876,14 +877,13 @@ class CsfObjectEditor implements CsfObject {
     node: Node,
     message = `Cannot mutate ${path.join('.')} because the target contains ${code.replaceAll('-', ' ')}`
   ) {
-    const span = node as Node & { start?: number; end?: number };
     const diagnostic: CsfMutationDiagnostic = {
       code,
       target: this.target,
       path: [...path],
       message,
-      ...(typeof span.start === 'number' && span.end !== undefined && node !== this.editor.program
-        ? { loc: locationOf(this.editor.code, span.start, span.end) }
+      ...(node !== this.editor.program
+        ? { loc: locationOf(this.editor.code, node.start, node.end) }
         : {}),
     };
     this.reportDiagnostic(diagnostic);
diff --git a/code/core/src/csf-tools/CsfObjectDiscovery.ts b/code/core/src/csf-tools/CsfObjectDiscovery.ts
index f27d62fd7cfd..3de32de71339 100644
--- a/code/core/src/csf-tools/CsfObjectDiscovery.ts
+++ b/code/core/src/csf-tools/CsfObjectDiscovery.ts
@@ -32,10 +32,7 @@ type AnnotationCandidate = {
 // An object literal an editor works on, before it is wrapped into a `CsfObject`.
 type Discovered = { target: CsfObjectTarget; prefix: readonly string[]; node: E.ObjectExpression };
 
-const loc = (csf: CsfFile, node: Node) => {
-  const span = node as Node & { start: number; end: number };
-  return { loc: locationOf(csf._code, span.start, span.end) };
-};
+const loc = (csf: CsfFile, node: Node) => ({ loc: locationOf(csf._code, node.start, node.end) });
 
 const storyTarget = ({ exportName, localName }: StoryBinding): CsfObjectTarget => ({
   kind: 'story',
diff --git a/code/core/src/csf-tools/enrichCsf.ts b/code/core/src/csf-tools/enrichCsf.ts
index 2fbf7469fa46..a0807213bd0e 100644
--- a/code/core/src/csf-tools/enrichCsf.ts
+++ b/code/core/src/csf-tools/enrichCsf.ts
@@ -120,10 +120,7 @@ export const enrichCsf = async (csf: CsfFile, csfSource: CsfFile, options?: Enri
 
 // The story's own source text: the initializer of `const X = …`, or the function itself.
 export const extractSource = (node: Node, code: string) => {
-  const src = (node?.type === 'VariableDeclarator' ? node.init : node) as
-    | { start: number; end: number }
-    | null
-    | undefined;
+  const src = node?.type === 'VariableDeclarator' ? node.init : node;
   return src ? code.slice(src.start, src.end) : '';
 };
 
diff --git a/code/core/src/csf-tools/estree/ast.ts b/code/core/src/csf-tools/estree/ast.ts
index 36e713a0ea76..584977c4e8c3 100644
--- a/code/core/src/csf-tools/estree/ast.ts
+++ b/code/core/src/csf-tools/estree/ast.ts
@@ -416,7 +416,7 @@ const codeOf = (node: Node) => {
  * other node, such as one from `parseModule`.
  */
 export const textOf = (node: Node): string =>
-  fragments.get(node)?.text ?? sourceOf(codeOf(node), node as Node & Span);
+  fragments.get(node)?.text ?? sourceOf(codeOf(node), node);
 
 /**
  * `textOf` for placing a node as a value: a comma expression keeps its parentheses or gets them,
@@ -429,7 +429,7 @@ export const placeableTextOf = (node: Node): string => {
   }
   const code = codeOf(node);
   if (node.type !== 'SequenceExpression') {
-    return sourceOf(code, node as Node & Span);
+    return sourceOf(code, node);
   }
   const outer = outerSpan(node);
   return outer === node ? `(${sourceOf(code, node)})` : sourceOf(code, outer);
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 997128ef03ee..467fd2f97979 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -7,7 +7,6 @@ import {
   type ParsedModule,
   type Property,
   type Span,
-  isNode,
   isStringLiteral,
   isValidIdentifier,
   derivedFrom,
@@ -557,7 +556,7 @@ const isMultiline = (code: string, list: List) => code.slice(list.open, list.clo
 const literalSpans = (root: Node, range: Span): Span[] => {
   const spans: Span[] = [];
   walk(root, (node) => {
-    const { start, end } = node as Node & Span;
+    const { start, end } = node;
     if (end <= range.start || start >= range.end) {
       return false;
     }
@@ -1183,7 +1182,4 @@ const methodFromFunction = (text: string, key: string) => {
     : undefined;
 };
 
-export const isSpan = (value: unknown): value is Span =>
-  isNode(value) && typeof (value as unknown as Span).start === 'number';
-
 export type { Node };
diff --git a/code/core/src/csf-tools/estree/scope.ts b/code/core/src/csf-tools/estree/scope.ts
index 7b8e81944dfd..db17618d7b6d 100644
--- a/code/core/src/csf-tools/estree/scope.ts
+++ b/code/core/src/csf-tools/estree/scope.ts
@@ -759,15 +759,11 @@ export const analyzeScopes = (program: E.Program): ScopeInfo => {
     scopeOf: (node) => {
       // Linear over scopes; only write paths ask.
       let best = declaredProgramScope;
-      for (const [scopeNode, scope] of nodeScopes) {
-        const span = scopeNode as Node & { start: number; end: number };
-        const target = node as Node & { start: number; end: number };
+      for (const [span, scope] of nodeScopes) {
         if (
-          span.start <= target.start &&
-          target.end <= span.end &&
-          span.end - span.start <
-            (best.node as Node & { start: number; end: number }).end -
-              (best.node as Node & { start: number; end: number }).start
+          span.start <= node.start &&
+          node.end <= span.end &&
+          span.end - span.start < best.node.end - best.node.start
         ) {
           best = scope;
         }
diff --git a/code/core/src/csf-tools/story-shape/normalize-story.ts b/code/core/src/csf-tools/story-shape/normalize-story.ts
index becda4a66e76..c58a48a4f4d4 100644
--- a/code/core/src/csf-tools/story-shape/normalize-story.ts
+++ b/code/core/src/csf-tools/story-shape/normalize-story.ts
@@ -10,10 +10,8 @@ export type NormalizedStoryDeclaration =
 type StoryDeclarationExpression = E.Function | E.Expression;
 
 /** An error pointing at the node a story file got wrong. */
-export const storyShapeError = (message: string, node: Node, editor: SourceEditor) => {
-  const span = node as Node & { start: number; end: number };
-  return new SyntaxError(`${message}\n${codeFrame(editor.fileName, editor.code, span.start)}`);
-};
+export const storyShapeError = (message: string, node: Node, editor: SourceEditor) =>
+  new SyntaxError(`${message}\n${codeFrame(editor.fileName, editor.code, node.start)}`);
 
 /**
  * Resolve a story export's declaration to its snippet-ready story shape.

From 085461a57775b4db4b5596342c299b3993705c75 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 21:36:27 +0200
Subject: [PATCH 209/326] fix(csf-tools): place appended statements, moved
 comments and commas where they read

`prependStatement` on a file without statements inserted at offset 0,
above a BOM and the header comments; it appends there instead, below
both. `appendStatement` skips statements that pending edits removed, so
grouping every named export of a config no longer yields a declaration
behind a blank line and without a final newline; it also owns the blank
line that sets a multi-line statement apart from its neighbour, which
save-story and the wrap-getAbsolutePath automigration added themselves.
A moved member's trailing comment now follows its leading comments
instead of preceding them. A value ending in a line comment gets its
comma before the comment when it is laid out on its own line, instead of
on the next line.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../duplicate-story-with-new-name.ts          |   8 +-
 code/core/src/csf-tools/ConfigObject.test.ts  |  11 ++
 code/core/src/csf-tools/CsfObject.test.ts     |  27 +++++
 code/core/src/csf-tools/estree/editor.test.ts |  47 +++++++-
 code/core/src/csf-tools/estree/editor.ts      | 109 ++++++++++++------
 .../automigrate/fixes/wrap-getAbsolutePath.ts |   3 +-
 6 files changed, 158 insertions(+), 47 deletions(-)

diff --git a/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.ts b/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.ts
index 936f8702afe8..2bc4c2e22a38 100644
--- a/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.ts
+++ b/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.ts
@@ -49,13 +49,7 @@ export const duplicateStoryWithNewName = (csfFile: In, storyName: string, newSto
       ? csfFile._editor.source(node.id.typeAnnotation)
       : '';
 
-  const statement = `export const ${newStoryName}${typeAnnotation} = ${initCode};`;
-  const last = csfFile._editor.program.body.at(-1);
-  // A blank line separates a multi-line story from its neighbour, as the stories above it are.
-  const isMultiline = (code: string) => code.includes('\n');
-  const separator =
-    last && (isMultiline(csfFile._editor.source(last)) || isMultiline(statement)) ? '\n' : '';
-  appendStatement(csfFile._editor, separator + statement);
+  appendStatement(csfFile._editor, `export const ${newStoryName}${typeAnnotation} = ${initCode};`);
   csfFile._editor.commit();
 
   const duplicated = csfFile._storyExports[newStoryName];
diff --git a/code/core/src/csf-tools/ConfigObject.test.ts b/code/core/src/csf-tools/ConfigObject.test.ts
index e38313dda8cf..8df212364d73 100644
--- a/code/core/src/csf-tools/ConfigObject.test.ts
+++ b/code/core/src/csf-tools/ConfigObject.test.ts
@@ -403,6 +403,17 @@ describe('ConfigFile mutations', () => {
     expect(output.getValue(['parameters', 'a11y', 'context'])).toBe('#app');
   });
 
+  it('groups named exports into one declaration at the end of the file', () => {
+    const config = loadConfig(
+      'export const showNav = false;\nexport const showPanel = true;\n'
+    ).parse();
+
+    expect(config.group(['layout'], ['showNav', 'showPanel'])).toEqual({ ok: true, changed: true });
+    expect(printConfig(config).code).toBe(
+      'export const layout = { showNav: false, showPanel: true };\n'
+    );
+  });
+
   it.each(['local', 'custom-field'])(
     'avoids binding collisions when renaming an export to %s',
     (name) => {
diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index 94c6eb17761e..1ea0d1c350a4 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -201,6 +201,33 @@ describe('CsfObject', () => {
     expect(loadConfig(output).parse().getValue(['b'])).toBe(2);
   });
 
+  it.each([
+    {
+      object: 'export default {\n  a: 1,\n};',
+      path: ['b'],
+      output: 'export default {\n  a: 1,\n  b: 2, // note\n};',
+    },
+    {
+      object: 'export default {\n  a: 1\n};',
+      path: ['b'],
+      output: 'export default {\n  a: 1,\n  b: 2 // note\n};',
+    },
+    {
+      object: 'export default {\n  a: 1,\n};',
+      path: ['b', 'c'],
+      output: 'export default {\n  a: 1,\n  b: {\n    c: 2, // note\n  },\n};',
+    },
+  ])(
+    'places the comma of $path before the line comment ending its value',
+    ({ object, path, output }) => {
+      const config = loadConfig(object).parse();
+
+      expect(config.set(path, parseExpression('2 // note'))).toEqual({ ok: true, changed: true });
+      expect(printConfig(config).code).toBe(output);
+      expect(loadConfig(output).parse().getValue(path)).toBe(2);
+    }
+  );
+
   it('edits a local object referenced by a story and cleans up the empty parent', () => {
     const csf = parse(
       `const a11y = { element: '#root' }; export default {}; export const Story = { parameters: { a11y } };`
diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index 96db86d315d1..02b50d1a4cdc 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -526,6 +526,12 @@ describe('prependStatement', () => {
     prependStatement(editor, `import b from 'b';`);
     expect(editor.toString()).toBe(`/** @license MIT */\nimport b from 'b';\nconst a = 1;`);
   });
+
+  it('inserts below the BOM and the comments of a file without statements', () => {
+    const editor = new SourceEditor('\uFEFF// @ts-nocheck\n');
+    prependStatement(editor, `import a from 'a';`);
+    expect(editor.toString()).toBe(`\uFEFF// @ts-nocheck\nimport a from 'a';\n`);
+  });
 });
 
 describe('insertAfterImports', () => {
@@ -586,6 +592,20 @@ describe('appendStatement', () => {
     appendStatement(editor, `export const b = 2;`);
     expect(editor.toString()).toBe(`export const a = 1; /* a */ // a\nexport const b = 2;`);
   });
+
+  it('appends below the last statement that is not removed', () => {
+    const editor = new SourceEditor(`const a = 1;\nconst b = 2;\n`);
+    removeStatement(editor, editor.program.body[1]);
+    appendStatement(editor, `const c = 3;`);
+    expect(editor.toString()).toBe(`const a = 1;\nconst c = 3;\n`);
+  });
+
+  it('appends to the end of a file whose statements are all removed', () => {
+    const editor = new SourceEditor(`const a = 1;\nconst b = 2;\n`);
+    removeStatements(editor, new Set(editor.program.body));
+    appendStatement(editor, `const c = 3;`);
+    expect(editor.toString()).toBe(`const c = 3;\n`);
+  });
 });
 
 describe('setImportSpecifiers', () => {
@@ -690,6 +710,29 @@ describe('trailing comments', () => {
     `);
   });
 
+  it('moves the comment that trails a member below the comments that lead it', () => {
+    const csf = parse(dedent`
+      export default {
+        parameters: {
+          // where it goes
+          layout: 'centered', // center it
+        },
+        globals: {},
+      };
+    `);
+    const [meta] = csf.objects({ stories: false });
+    meta.move(['parameters', 'layout'], ['globals', 'layout']);
+    expect(printCsf(csf).code).toBe(dedent`
+      export default {
+        globals: {
+          // where it goes
+          // center it
+          layout: 'centered',
+        },
+      };
+    `);
+  });
+
   it('removes a member with every comment that trails it on its line', () => {
     const csf = parse(`export default {\n  a: 1, /* a */ // why\n  b: 2,\n};`);
     const [meta] = csf.objects({ stories: false });
@@ -800,8 +843,8 @@ describe('line endings', () => {
   });
 
   it.each([
-    ['a CRLF file with CRLF', 'a;\r\n', 'a;\r\nc;\r\nd;\r\n'],
-    ['an LF file with LF', 'a;\n', 'a;\nc;\nd;\n'],
+    ['a CRLF file with CRLF', 'a;\r\n', 'a;\r\n\r\nc;\r\nd;\r\n'],
+    ['an LF file with LF', 'a;\n', 'a;\n\nc;\nd;\n'],
   ])('writes inserted CRLF text into %s', (_, code, expected) => {
     const editor = new SourceEditor(code);
     appendStatement(editor, 'c;\r\nd;');
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 467fd2f97979..b333ba257ceb 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -317,7 +317,7 @@ export const printString = (value: string, quote: string) => {
 export const printMembers = (members: string[], indent: string) =>
   members.length === 0
     ? '{}'
-    : `{\n${members.map((member) => `${indent}${reindent(member, '', indent)},`).join('\n')}\n}`;
+    : `{\n${members.map((member) => `${indent}${withComma(reindent(member, '', indent))}`).join('\n')}\n}`;
 
 /** Print a JS value as source. With an `indent`, objects are laid out one member per line. */
 export const printValue = (
@@ -579,19 +579,44 @@ const FRAGMENTS = [
   ['(async function* () ', '\n)'],
 ] as const;
 
-const parsedLiteralSpans = (text: string): Span[] | undefined => {
+// The parse of a text as one of the fragments, with the offset of the text in it.
+const parsedFragment = (text: string) => {
   for (const [before, after] of FRAGMENTS) {
-    let program: E.Program;
     try {
-      program = parseModule(`${before}${text}${after}`).program;
+      return { ...parseModule(`${before}${text}${after}`), offset: before.length };
     } catch {
       continue;
     }
-    return literalSpans(program, { start: before.length, end: before.length + text.length });
   }
   return undefined;
 };
 
+const parsedLiteralSpans = (text: string): Span[] | undefined => {
+  const fragment = parsedFragment(text);
+  return (
+    fragment &&
+    literalSpans(fragment.program, { start: fragment.offset, end: fragment.offset + text.length })
+  );
+};
+
+// A text ending in a line comment, which `placeableTextOf` ends with a line break, takes its comma
+// before the comment. A text that does not parse keeps the comma after the line break.
+const withComma = (text: string, comma = ',') => {
+  const body = text.trimEnd();
+  if (body === text) {
+    return `${text}${comma}`;
+  }
+  const fragment = comma ? parsedFragment(body) : undefined;
+  const comment = fragment?.comments.findLast(
+    (candidate) => candidate.type === 'Line' && candidate.end === fragment.offset + body.length
+  );
+  if (!comment) {
+    return comma ? `${text}${comma}` : body;
+  }
+  const at = comment.start - fragment!.offset;
+  return `${body.slice(0, at).trimEnd()}${comma} ${body.slice(at)}`;
+};
+
 const reindentLines = (text: string, from: string, to: string, literals: readonly Span[]) => {
   let result = '';
   let cursor = 0;
@@ -650,21 +675,18 @@ const itemEnd = (editor: SourceEditor, list: List, index: number) => {
 const itemStart = (editor: SourceEditor, list: List, index: number) =>
   index === 0 ? list.open : itemEnd(editor, list, index - 1);
 
-// `itemText` with the text from the start of the leading comments printed by `print`.
-const itemTextWith = (
-  editor: SourceEditor,
-  list: List,
-  index: number,
-  print: (start: number) => string
-) => {
+// `itemText` with the item itself printed by `print`, below the comments that lead it and, after
+// those, the ones that trailed it on its line.
+const itemTextWith = (editor: SourceEditor, list: List, index: number, print: () => string) => {
   const { code } = editor;
   const item = list.items[index];
   const from = itemStart(editor, list, index);
-  const text = print(from + /^\s*/.exec(code.slice(from, item.start))![0].length);
+  const leadStart = from + /^\s*/.exec(code.slice(from, item.start))![0].length;
+  const lead = dedentSource(editor, leadStart, item.start, lineIndent(code, item.start));
   const trailing = trailingComments(editor, separatorAfter(editor, item) ?? item.end);
-  return trailing.length > 0
-    ? `${code.slice(trailing[0].start, trailing.at(-1)!.end)}\n${text}`
-    : text;
+  const moved =
+    trailing.length > 0 ? `${code.slice(trailing[0].start, trailing.at(-1)!.end)}\n` : '';
+  return `${lead}${moved}${print()}`;
 };
 
 /**
@@ -674,8 +696,8 @@ const itemTextWith = (
 export const itemText = (editor: SourceEditor, list: List, item: Span) => {
   editor.assertCurrent(list);
   editor.assertCurrent(item);
-  return itemTextWith(editor, list, list.items.indexOf(item), (start) =>
-    dedentSource(editor, start, item.end, lineIndent(editor.code, item.start))
+  return itemTextWith(editor, list, list.items.indexOf(item), () =>
+    dedentSource(editor, item.start, item.end, lineIndent(editor.code, item.start))
   );
 };
 
@@ -713,7 +735,7 @@ export const appendToList = (editor: SourceEditor, list: List, texts: string[])
       }
       edits.appendLeft(
         end,
-        `\n${texts.map((text) => `${indent}${reindent(text, '', indent)},`).join('\n')}\n${outer}`
+        `\n${texts.map((text) => `${indent}${withComma(reindent(text, '', indent))}`).join('\n')}\n${outer}`
       );
     } else if (end > list.open) {
       edits.appendLeft(end, ` ${texts.join(', ')}${end === list.close ? padding : ''}`);
@@ -730,11 +752,16 @@ export const appendToList = (editor: SourceEditor, list: List, texts: string[])
   const trailingComma = comma === undefined || isHole(last) ? '' : ',';
   if (isMultiline(code, list)) {
     const indent = lineIndent(code, last.start);
-    const block = texts.map((text) => `${indent}${reindent(text, '', indent)}`).join(',\n');
+    const block = texts
+      .map((text, index) => {
+        const separator = index < texts.length - 1 ? ',' : trailingComma;
+        return `${indent}${withComma(reindent(text, '', indent), separator)}`;
+      })
+      .join('\n');
     if (comma === undefined) {
       edits.appendLeft(last.end, ',');
     }
-    edits.appendLeft(itemEnd(editor, list, items.length - 1), `\n${block}${trailingComma}`);
+    edits.appendLeft(itemEnd(editor, list, items.length - 1), `\n${block}`);
     return;
   }
   if (comma !== undefined) {
@@ -756,7 +783,7 @@ export const prependToList = (editor: SourceEditor, list: List, texts: string[])
     const indent = lineIndent(code, first.start);
     edits.appendRight(
       list.open,
-      `\n${texts.map((text) => `${indent}${reindent(text, '', indent)},`).join('\n')}`
+      `\n${texts.map((text) => `${indent}${withComma(reindent(text, '', indent))}`).join('\n')}`
     );
     return;
   }
@@ -971,30 +998,40 @@ const leadingComments = (editor: SourceEditor, statement: Span): E.Comment[] =>
 
 /**
  * Insert a statement as the first statement after the directives, above the comments it owns. A file
- * header stays above it.
+ * header stays above it, as does everything in a file without statements.
  */
 export const prependStatement = (editor: SourceEditor, text: string) => {
   const { body } = editor.program;
-  const directives = leadingDirectives(editor);
-  const first = body[directives.length];
+  const first = body[leadingDirectives(editor).length];
   if (!first) {
-    const after =
-      directives.at(-1)?.end ?? (editor.code.startsWith('#!') ? editor.code.indexOf('\n') + 1 : 0);
-    editor.edits.appendLeft(after, `${after > 0 ? '\n' : ''}${text}\n`);
+    appendStatement(editor, text);
     return;
   }
   editor.edits.appendRight((leadingComments(editor, first)[0] ?? first).start, `${text}\n`);
 };
 
+// Whether pending edits removed a span; one cutting through either end of it counts as that.
+const isRemoved = (editor: SourceEditor, span: Span) => {
+  try {
+    return editor.edits.slice(span.start, span.end) === '';
+  } catch {
+    return true;
+  }
+};
+
+/**
+ * Insert a statement after the last statement that pending edits did not remove. A blank line
+ * sets it apart when it or that statement spans lines.
+ */
 export const appendStatement = (editor: SourceEditor, text: string) => {
-  const last = editor.program.body.at(-1);
+  const last = editor.program.body.findLast((statement) => !isRemoved(editor, statement));
   if (!last) {
-    editor.edits.append(
-      `${editor.code.length > 0 && !editor.code.endsWith('\n') ? '\n' : ''}${text}\n`
-    );
+    const output = editor.edits.toString();
+    editor.edits.append(`${output && !output.endsWith('\n') ? '\n' : ''}${text}\n`);
     return;
   }
-  insertStatementAfter(editor, last, text);
+  const multiline = text.includes('\n') || editor.source(last).includes('\n');
+  insertStatementAfter(editor, last, `${multiline ? '\n' : ''}${text}`);
 };
 
 /** The span of a statement with the comments it owns. */
@@ -1157,12 +1194,12 @@ export const renamedMemberText = (
   const list = objectList(editor, object);
   const indent = lineIndent(editor.code, member.start);
   const dedent = (start: number, end: number) => dedentSource(editor, start, end, indent);
-  return itemTextWith(editor, list, list.items.indexOf(member), (start) => {
+  return itemTextWith(editor, list, list.items.indexOf(member), () => {
     if (member.shorthand) {
-      return `${dedent(start, member.start)}${key}: ${editor.source(member.value)}`;
+      return `${key}: ${editor.source(member.value)}`;
     }
     const range = keyRange(editor, member);
-    return `${dedent(start, range.start)}${key}${dedent(range.end, member.end)}`;
+    return `${dedent(member.start, range.start)}${key}${dedent(range.end, member.end)}`;
   });
 };
 
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.ts b/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.ts
index b0c976efaf0e..ee09ee34e5be 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.ts
@@ -40,9 +40,8 @@ export const wrapGetAbsolutePath: Fix = {
             dirname: ensureNamedImport(mainConfig, 'dirname', 'node:path'),
             fileURLToPath: ensureNamedImport(mainConfig, 'fileURLToPath', 'node:url'),
           };
-          // On its own paragraph, below the export default.
           mainConfig.setBodyDeclaration(
-            `\n${getAbsolutePathWrapperDeclaration(mainConfig, /\.tsx?$/.test(id), names)}`
+            getAbsolutePathWrapperDeclaration(mainConfig, /\.tsx?$/.test(id), names)
           );
         }
       },

From 65d9a5aa23d1c563b38b1e65e1f6eee0b99f3e03 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 21:39:04 +0200
Subject: [PATCH 210/326] docs(migration): note the invalid-csf diagnostic, the
 editor's declared types and the trimmed exports

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 MIGRATION.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 696340620268..c70813d6d831 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1361,7 +1361,10 @@ Storybook no longer bundles Babel or recast to read and write story and config f
 - An `experimental_enrichCsf` function receives the new `CsfFile`. Add code with `csf._appendStatement(code)` instead of pushing Babel nodes onto `csf._ast`.
 - `babelParse` is removed; use `parseModule(code, fileName)` from `storybook/internal/csf-tools`, which returns the ESTree `program` and `comments`. `babelParseFile` is removed as well; read CSF with `loadCsf(code, options)` or `readCsf(fileName, options)`.
 - Parsing normalizes line endings to `\n`. Node offsets from `parseModule`, `CsfFile._program` and `ConfigFile._program` index the normalized `code`/`_code`, not the string you passed in; lines and columns are unchanged.
-- `getHeaderComments(statement)` is replaced by `headerComments(editor)`.
+- `getHeaderComments(statement)` is removed. The editor keeps a file's header comments in place: `prependStatement` inserts below them, also in a file without statements, and `appendStatement` separates a multi-line statement from its neighbour with a blank line.
+- `CsfObject` mutations whose result is valid JavaScript but not valid CSF, for example a meta `tags` that is no longer an array of string literals, no longer throw. They return `{ ok: false, changed: true, diagnostic }` with code `'invalid-csf'`, the edit stays applied, and `csf.meta`, `csf.stories`, `csf.indexInputs` and `csf.objects()` throw the indexer's error until a later commit indexes the file again. The `ok: false` arm of `CsfMutationResult` now carries `changed: boolean`.
+- `SourceEditor#edits` is typed as `SourceEdits` (`append`, `appendLeft`, `appendRight`, `overwrite`, `remove`, `slice`, `hasChanged`, `generateMap`, `toString`) instead of a `MagicString`, and `generateMap()` returns the structural `GeneratedMap`.
+- `storybook/internal/csf-tools` no longer exports `CsfExpression` (use `ESTree.Expression`), `isValidIdentifier`, `headerComments`, `printValue` and `List`.
 - `getAutomockCode(code, isSpy, fileName)` and `extractMockCalls(options, root, findMockRedirect)` in `storybook/internal/mocking-utils` parse the code themselves and no longer take a parser: drop the parser argument and pass the module's file name to `getAutomockCode`. `rewriteSbMockImportCalls(code, fileName)` requires the file name as well. Until Storybook 12 both functions still accept a parse function where the file name or root used to be, and ignore it, and `babelParser` is still exported as a deprecated parse function that returns an ESTree program, so builders built against Storybook 10 keep working. `automockModule` is no longer exported.
 - The story-shape helpers no longer take Babel paths: `jsDocTagsForPath` is `jsDocTagsForNode`, `metaObjectPath` is `metaObject`, `RenderFunctionPath` is `RenderFunction`, and `pathForNode` and `returnedExpressionPath` are removed in favor of `returnedExpression` and plain nodes.
 - The `getAbsolutePath` wrapper helpers in `storybook/internal/common` produce source text instead of Babel nodes. `getAbsolutePathWrapperAsCallExpression(isTs, names)`, which returned the wrapper's function declaration, is replaced by `getAbsolutePathWrapperDeclaration(config, isTs, names)`, which returns the declaration's source, indented like `config`, for `ConfigFile#setBodyDeclaration`. `getAbsolutePathCall(config, value)` returns the source of a call to the config's wrapper. `wrapValueWithGetAbsolutePathWrapper(config, node)` is replaced by `wrapValuesWithGetAbsolutePathWrapper(config, nodes)`, which wraps every node in the array and commits the edits to `config`.

From 3dff71a4630aba57cc04edc424a3798a03d57fad Mon Sep 17 00:00:00 2001
From: Kyle Gach <kg@chromatic.com>
Date: Mon, 19 Oct 2026 14:07:20 -0600
Subject: [PATCH 211/326] Improve structure and prose, add snippet titles

---
 docs/get-started/install.mdx | 42 ++++++++++++++++++++++++------------
 1 file changed, 28 insertions(+), 14 deletions(-)

diff --git a/docs/get-started/install.mdx b/docs/get-started/install.mdx
index 179c94f4fff8..3686771ffdee 100644
--- a/docs/get-started/install.mdx
+++ b/docs/get-started/install.mdx
@@ -72,32 +72,38 @@ You can also develop or build your Storybook in ["preview-only" mode](../sharing
 
 ## Package manager release delays
 
-[pnpm 11](https://pnpm.io/settings#minimumreleaseage) and later, and [Yarn 4.15](https://yarnpkg.com/configuration/yarnrc#npmMinimalAgeGate) and later, wait about a day before they will install a version that was just published. The wait is a supply-chain precaution, because a bad release is often removed from the registry inside that window. On the day a new Storybook version is published, `storybook@latest` can still resolve to 10.x with Yarn, or to the last Storybook 11 release candidate with pnpm, until the new version is old enough.
+Some package managers ([pnpm 11](https://pnpm.io/settings#minimumreleaseage) and later, [Yarn 4.15](https://yarnpkg.com/configuration/yarnrc#npmMinimalAgeGate) and later) wait about a day before they will install a version that was just published. The wait is a supply-chain precaution, because a bad release is often removed from the registry inside that window.
 
-You can exempt Storybook from the wait. Each list below includes `create-storybook`, the package behind `create storybook`, along with `storybook` itself.
+On the day a new Storybook version is published (e.g. `11.1.0`), `storybook@latest` can still resolve to the previous version (`11.0.x`) with Yarn, or to the most recent pre-release (`11.1.0-alpha.x`) with pnpm, until the new version is old enough.
 
-### pnpm
+You can exempt Storybook from this wait. Each list below includes `create-storybook` (the package behind `create storybook`), along with the `storybook` binary itself.
+
+<details>
+<summary>pnpm</summary>
 
 In pnpm 11 and 12, `minimumReleaseAge` defaults to 1440 minutes (one day). Add an exemption in `pnpm-workspace.yaml` with [`minimumReleaseAgeExclude`](https://pnpm.io/settings#minimumreleaseageexclude). Patterns are allowed, so `@storybook/*` covers the scoped packages:
 
-```yaml
+```yaml title="pnpm-workspace.yaml"
 minimumReleaseAgeExclude:
   - storybook
   - create-storybook
   - '@storybook/*'
 ```
 
-To run a single upgrade without editing that file, set the age to zero for one command. pnpm reads `pnpm_config_minimum_release_age` as the `minimumReleaseAge` setting:
+To run a single upgrade without editing that file, set the age to zero for one command. pnpm reads the `pnpm_config_minimum_release_age` environment variable as the `minimumReleaseAge` setting:
 
 ```bash
 pnpm_config_minimum_release_age=0 pnpm dlx storybook@latest upgrade
 ```
 
-### Yarn
+</details>
+
+<details>
+<summary>Yarn</summary>
 
 Yarn 4.15 changed the default of `npmMinimalAgeGate` to `1d` for new projects. When you upgrade Yarn inside an existing project, Yarn writes the previous default into `.yarnrc.yml`, so that project keeps the old behavior until you change the setting. To let a new Storybook release through, list it under [`npmPreapprovedPackages`](https://yarnpkg.com/configuration/yarnrc#npmPreapprovedPackages) in `.yarnrc.yml`. Entries can be package names or glob patterns:
 
-```yaml
+```yaml title=".yarnrc.yml"
 npmPreapprovedPackages:
   - storybook
   - create-storybook
@@ -106,25 +112,33 @@ npmPreapprovedPackages:
 
 `yarn add` and `yarn up` also accept `--no-time-gate`, which skips the check for that one command. `yarn create` and `yarn dlx` do not have this flag.
 
-### npm
+</details>
 
-npm does not wait unless you opt in with [`min-release-age`](https://docs.npmjs.com/cli/v11/using-npm/config#min-release-age). If you have turned that on, [`min-release-age-exclude`](https://docs.npmjs.com/cli/v11/using-npm/config#min-release-age-exclude) in an `.npmrc` file is how you let specific packages update immediately. Each entry is a package name or a minimatch pattern:
+<details>
+<summary>npm</summary>
 
-```text
+npm does not wait unless you opt in with [`min-release-age`](https://docs.npmjs.com/cli/v11/using-npm/config#min-release-age). If you have set it, you can allow specific packages to update immediately with [`min-release-age-exclude`](https://docs.npmjs.com/cli/v11/using-npm/config#min-release-age-exclude) in an `.npmrc` file. Each entry is a package name or a minimatch pattern:
+
+```text title=".npmrc"
 min-release-age-exclude[]=storybook
 min-release-age-exclude[]=create-storybook
 min-release-age-exclude[]=@storybook/*
 ```
 
-### Bun
+</details>
+
+<details>
+<summary>Bun</summary>
 
-Bun leaves this wait off unless you set [`minimumReleaseAge`](https://bun.com/docs/pm/cli/install#minimum-release-age). If you have set it, exempt packages with `minimumReleaseAgeExcludes` under `[install]` in `bunfig.toml`. An entry is a package name, or one exact version of a package. Bun's docs do not describe glob patterns for this setting, so list `@storybook` packages by name if you need them exempted too:
+Bun does not wait unless you set [`minimumReleaseAge`](https://bun.com/docs/pm/cli/install#minimum-release-age). If you have set it, exempt packages with `minimumReleaseAgeExcludes` under `[install]` in `bunfig.toml`. An entry is a package name, or one exact version of a package. Bun's docs do not describe glob patterns for this setting, so list `@storybook` packages by name if you need them exempted too:
 
-```toml
+```toml title="bunfig.toml"
 [install]
-minimumReleaseAgeExcludes = ["storybook", "create-storybook"]
+minimumReleaseAgeExcludes = ["storybook", "create-storybook", "@storybook/react-vite"]
 ```
 
+</details>
+
 ## Installation
 
 Run this command inside your project's root directory to install the latest version of Storybook:

From d185cf20419e4cc3ff4f54027f57de3c9966196a Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 22:20:01 +0200
Subject: [PATCH 212/326] fix(csf-tools): keep the line break after a trailing
 line comment when code follows it

`withComma` trimmed the line break that ends a value's trailing line
comment, so code after the insertion point on the same line ended up
inside the comment: appending `b: 2 // note` to `{\n  a: 1 };` printed
`b: 2 // note };`, and prepending into `{ a: 1,\n  b: 2,\n}` swallowed
`a: 1,`. The line break is now dropped only where the code's own line
break follows. `replaceValue` writes the comma after the value with the
text under the same rule, so `a: 1, // x\n b: 2` replaces
`a: 1 // x\n, b: 2`. A prepended item lines up with the first item
that starts a line, as the first item may share the open token's.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/CsfObject.test.ts     | 26 +++++-
 code/core/src/csf-tools/estree/editor.test.ts |  8 ++
 code/core/src/csf-tools/estree/editor.ts      | 83 ++++++++++++-------
 3 files changed, 84 insertions(+), 33 deletions(-)

diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index 1ea0d1c350a4..f4c1f0192462 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -176,7 +176,7 @@ describe('CsfObject', () => {
   });
 
   it.each([
-    { expression: '1 // x', output: 'export default { a: 1 // x\n, b: 2 };' },
+    { expression: '1 // x', output: 'export default { a: 1, // x\n b: 2 };' },
     { expression: 'x, y // x', output: 'export default { a: (x, y // x\n), b: 2 };' },
   ])('ends the line of $expression before the member after it', ({ expression, output }) => {
     const csf = parse('export default { a: 0, b: 2 };');
@@ -188,7 +188,7 @@ describe('CsfObject', () => {
   });
 
   it.each([
-    { expression: '1 // note', output: 'export default {\n  a: 1 // note\n, b: 2,\n};' },
+    { expression: '1 // note', output: 'export default {\n  a: 1, // note\n b: 2,\n};' },
     { expression: 'x, y', output: 'export default {\n  a: (x, y), b: 2,\n};' },
   ])('places a transformed $expression so the code after it survives', ({ expression, output }) => {
     const config = loadConfig('export default {\n  a: 0, b: 2,\n};').parse();
@@ -217,8 +217,28 @@ describe('CsfObject', () => {
       path: ['b', 'c'],
       output: 'export default {\n  a: 1,\n  b: {\n    c: 2, // note\n  },\n};',
     },
+    {
+      object: 'export default {\n  a: 1 };',
+      path: ['b'],
+      output: 'export default {\n  a: 1,\n  b: 2 // note\n };',
+    },
+    {
+      object: 'export default {\n  a: 1,\n};',
+      path: ['a'],
+      output: 'export default {\n  a: 2, // note\n};',
+    },
+    {
+      object: 'export default {\n  a: 1\n};',
+      path: ['a'],
+      output: 'export default {\n  a: 2 // note\n};',
+    },
+    {
+      object: 'export default {\r\n  a: 1,\r\n};',
+      path: ['b'],
+      output: 'export default {\r\n  a: 1,\r\n  b: 2, // note\r\n};',
+    },
   ])(
-    'places the comma of $path before the line comment ending its value',
+    'places the comma of $path before the line comment ending its value in $object',
     ({ object, path, output }) => {
       const config = loadConfig(object).parse();
 
diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index 02b50d1a4cdc..a73d4fbba9a6 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -218,6 +218,14 @@ describe('lists', () => {
     expect(editor.toString()).toBe('const a = {\n  b: [1, {\n    c: 2,\n  }],\n};');
   });
 
+  it('keeps the line break of a prepended item ending in a line comment when code follows it', () => {
+    const { editor, statement } = firstStatement('({ a: 1,\n  b: 2,\n});');
+    const object = expressionOf(statement) as E.ObjectExpression;
+    prependToList(editor, objectList(editor, object), ['x: 0 // note\n']);
+    expect(editor.toString()).toBe('({\n  x: 0, // note\n a: 1,\n  b: 2,\n});');
+    expect(() => parseModule(editor.toString())).not.toThrow();
+  });
+
   it('removes a declarator with its comma', () => {
     const { editor, statement } = firstStatement('const a = 1, b = 2, c = 3;');
     const declaration = statement as E.VariableDeclaration;
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index b333ba257ceb..90eb51192871 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -317,7 +317,7 @@ export const printString = (value: string, quote: string) => {
 export const printMembers = (members: string[], indent: string) =>
   members.length === 0
     ? '{}'
-    : `{\n${members.map((member) => `${indent}${withComma(reindent(member, '', indent))}`).join('\n')}\n}`;
+    : `{\n${members.map((member) => `${indent}${withComma(reindent(member, '', indent), ',', true)}`).join('\n')}\n}`;
 
 /** Print a JS value as source. With an `indent`, objects are laid out one member per line. */
 export const printValue = (
@@ -599,22 +599,28 @@ const parsedLiteralSpans = (text: string): Span[] | undefined => {
   );
 };
 
-// A text ending in a line comment, which `placeableTextOf` ends with a line break, takes its comma
-// before the comment. A text that does not parse keeps the comma after the line break.
-const withComma = (text: string, comma = ',') => {
+const lineBreakAt = (code: string, index: number) => index === code.length || code[index] === '\n';
+
+// `text` with `comma` after it. A text ending in a line comment, which `placeableTextOf` ends with
+// a line break, takes the comma before the comment and keeps the line break, unless the code's own
+// follows where the text goes. A text that does not parse keeps the comma after the line break.
+const withComma = (text: string, comma: string, lineBreakFollows: boolean) => {
   const body = text.trimEnd();
   if (body === text) {
     return `${text}${comma}`;
   }
-  const fragment = comma ? parsedFragment(body) : undefined;
-  const comment = fragment?.comments.findLast(
+  const fragment = parsedFragment(body);
+  if (!fragment) {
+    return `${text}${comma}`;
+  }
+  const comment = fragment.comments.findLast(
     (candidate) => candidate.type === 'Line' && candidate.end === fragment.offset + body.length
   );
   if (!comment) {
-    return comma ? `${text}${comma}` : body;
+    return `${body}${comma}`;
   }
-  const at = comment.start - fragment!.offset;
-  return `${body.slice(0, at).trimEnd()}${comma} ${body.slice(at)}`;
+  const at = comment.start - fragment.offset;
+  return `${body.slice(0, at).trimEnd()}${comma} ${body.slice(at)}${lineBreakFollows ? '' : '\n'}`;
 };
 
 const reindentLines = (text: string, from: string, to: string, literals: readonly Span[]) => {
@@ -735,7 +741,7 @@ export const appendToList = (editor: SourceEditor, list: List, texts: string[])
       }
       edits.appendLeft(
         end,
-        `\n${texts.map((text) => `${indent}${withComma(reindent(text, '', indent))}`).join('\n')}\n${outer}`
+        `\n${texts.map((text) => `${indent}${withComma(reindent(text, '', indent), ',', true)}`).join('\n')}\n${outer}`
       );
     } else if (end > list.open) {
       edits.appendLeft(end, ` ${texts.join(', ')}${end === list.close ? padding : ''}`);
@@ -752,16 +758,19 @@ export const appendToList = (editor: SourceEditor, list: List, texts: string[])
   const trailingComma = comma === undefined || isHole(last) ? '' : ',';
   if (isMultiline(code, list)) {
     const indent = lineIndent(code, last.start);
+    const at = itemEnd(editor, list, items.length - 1);
     const block = texts
       .map((text, index) => {
-        const separator = index < texts.length - 1 ? ',' : trailingComma;
-        return `${indent}${withComma(reindent(text, '', indent), separator)}`;
+        const isLast = index === texts.length - 1;
+        const separator = isLast ? trailingComma : ',';
+        const lineBreakFollows = !isLast || lineBreakAt(code, at);
+        return `${indent}${withComma(reindent(text, '', indent), separator, lineBreakFollows)}`;
       })
       .join('\n');
     if (comma === undefined) {
       edits.appendLeft(last.end, ',');
     }
-    edits.appendLeft(itemEnd(editor, list, items.length - 1), `\n${block}`);
+    edits.appendLeft(at, `\n${block}`);
     return;
   }
   if (comma !== undefined) {
@@ -780,11 +789,18 @@ export const prependToList = (editor: SourceEditor, list: List, texts: string[])
     return;
   }
   if (isMultiline(code, list)) {
-    const indent = lineIndent(code, first.start);
-    edits.appendRight(
-      list.open,
-      `\n${texts.map((text) => `${indent}${withComma(reindent(text, '', indent))}`).join('\n')}`
+    // Lined up with the first item that starts a line, as the first item may share the open token's.
+    const lined = list.items.find(
+      (item) => !code.slice(lineStart(code, item.start), item.start).trim()
     );
+    const indent = lineIndent(code, (lined ?? first).start);
+    const block = texts
+      .map((text, index) => {
+        const lineBreakFollows = index < texts.length - 1 || lineBreakAt(code, list.open);
+        return `${indent}${withComma(reindent(text, '', indent), ',', lineBreakFollows)}`;
+      })
+      .join('\n');
+    edits.appendRight(list.open, `\n${block}`);
     return;
   }
   edits.appendRight(first.start, `${inline(editor, list, texts)}, `);
@@ -1133,21 +1149,28 @@ export const setImportSpecifiers = (
 
 export const replaceValue = (editor: SourceEditor, member: Property, text: string) => {
   editor.assertCurrent(member);
+  const { code } = editor;
+  let span: Span = outerSpan(member.value);
+  let replacement = text;
   if (member.shorthand) {
-    editor.edits.overwrite(member.start, member.end, `${editor.source(member.key)}: ${text}`);
-    return;
+    span = member;
+    replacement = `${editor.source(member.key)}: ${text}`;
+  } else if (member.method || member.kind !== 'init') {
+    span = member;
+    replacement =
+      methodFromFunction(text, keySource(editor, member)) ??
+      `${keySource(editor, member)}: ${text}`;
   }
-  if (member.method || member.kind !== 'init') {
-    const method = methodFromFunction(text, keySource(editor, member));
-    editor.edits.overwrite(
-      member.start,
-      member.end,
-      method ?? `${keySource(editor, member)}: ${text}`
-    );
-    return;
-  }
-  const value = outerSpan(member.value);
-  editor.edits.overwrite(value.start, value.end, text);
+  // The comma after the replaced code on its line is written with the text, so it can go before a
+  // line comment that ends the text.
+  const { comments, end } = triviaAfter(editor, span.end, SPACE_ON_LINE);
+  const comma = comments.length === 0 && code[end] === ',' ? end + 1 : undefined;
+  const to = comma ?? span.end;
+  editor.edits.overwrite(
+    span.start,
+    to,
+    withComma(replacement, comma ? ',' : '', lineBreakAt(code, to))
+  );
 };
 
 /** Write `before` and `after` around an expression and the parentheses written around it. */

From 8a57c70f21110bef57b840db4315e9a22552d56c Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 22:21:36 +0200
Subject: [PATCH 213/326] fix(csf-tools): keep a leading comment that shares a
 moved member's line in front of it

A member's trailing line comment moves above it when the member is
moved, grouped or renamed. It went below every leading comment, so
`/* a */ layout: 'centered', // center it` printed `/* a */ // center it`
on one line and `layout` on the next. It now goes below the comments
on earlier lines only; a comment sharing the member's line stays in
front of it.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/editor.test.ts | 23 +++++++++++++++++++
 code/core/src/csf-tools/estree/editor.ts      | 14 +++++++----
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index a73d4fbba9a6..5c6c44ad457b 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -741,6 +741,29 @@ describe('trailing comments', () => {
     `);
   });
 
+  it('keeps a leading comment that shares the line of a moved member in front of it', () => {
+    const csf = parse(dedent`
+      export default {
+        parameters: {
+          // where it goes
+          /* a */ layout: 'centered', // center it
+        },
+        globals: {},
+      };
+    `);
+    const [meta] = csf.objects({ stories: false });
+    meta.move(['parameters', 'layout'], ['globals', 'layout']);
+    expect(printCsf(csf).code).toBe(dedent`
+      export default {
+        globals: {
+          // where it goes
+          // center it
+          /* a */ layout: 'centered',
+        },
+      };
+    `);
+  });
+
   it('removes a member with every comment that trails it on its line', () => {
     const csf = parse(`export default {\n  a: 1, /* a */ // why\n  b: 2,\n};`);
     const [meta] = csf.objects({ stories: false });
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 90eb51192871..c1f9492f4b8b 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -681,18 +681,24 @@ const itemEnd = (editor: SourceEditor, list: List, index: number) => {
 const itemStart = (editor: SourceEditor, list: List, index: number) =>
   index === 0 ? list.open : itemEnd(editor, list, index - 1);
 
-// `itemText` with the item itself printed by `print`, below the comments that lead it and, after
-// those, the ones that trailed it on its line.
+// `itemText` with the item itself printed by `print`. The comments that trailed the item on its
+// line move above it, on a line of their own: below the comments leading it from earlier lines,
+// above the ones sharing its line.
 const itemTextWith = (editor: SourceEditor, list: List, index: number, print: () => string) => {
   const { code } = editor;
   const item = list.items[index];
   const from = itemStart(editor, list, index);
   const leadStart = from + /^\s*/.exec(code.slice(from, item.start))![0].length;
-  const lead = dedentSource(editor, leadStart, item.start, lineIndent(code, item.start));
+  const indent = lineIndent(code, item.start);
   const trailing = trailingComments(editor, separatorAfter(editor, item) ?? item.end);
   const moved =
     trailing.length > 0 ? `${code.slice(trailing[0].start, trailing.at(-1)!.end)}\n` : '';
-  return `${lead}${moved}${print()}`;
+  const onLine =
+    triviaBefore(editor, item.start).comments.find(
+      (comment) => comment.start >= leadStart && !code.slice(comment.end, item.start).includes('\n')
+    )?.start ?? item.start;
+  const above = dedentSource(editor, leadStart, onLine, indent);
+  return `${above}${moved}${dedentSource(editor, onLine, item.start, indent)}${print()}`;
 };
 
 /**

From dd29caec4cdede26f9375e65de70d52295cf2175 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 22:21:58 +0200
Subject: [PATCH 214/326] fix(csf-tools): set a run of appended statements
 apart once, and append right after a lone BOM

`appendStatement` judged its blank line against the last parsed
statement, so every one-line statement appended after a multi-line one
got a blank line, one per story when `enrichCsf` appends a parameters
statement per story. It now judges against the text it appended just
before, when there is one. On a file holding only a BOM it inserted an
empty first line; the BOM is no content to end the line of.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/editor.test.ts | 13 +++++++++++++
 code/core/src/csf-tools/estree/editor.ts      | 14 +++++++++++---
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index 5c6c44ad457b..820d59c1ef97 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -540,6 +540,12 @@ describe('prependStatement', () => {
     prependStatement(editor, `import a from 'a';`);
     expect(editor.toString()).toBe(`\uFEFF// @ts-nocheck\nimport a from 'a';\n`);
   });
+
+  it('inserts right after the BOM of a file with nothing else', () => {
+    const editor = new SourceEditor('\uFEFF');
+    prependStatement(editor, `import a from 'a';`);
+    expect(editor.toString()).toBe(`\uFEFFimport a from 'a';\n`);
+  });
 });
 
 describe('insertAfterImports', () => {
@@ -608,6 +614,13 @@ describe('appendStatement', () => {
     expect(editor.toString()).toBe(`const a = 1;\nconst c = 3;\n`);
   });
 
+  it('sets a run of one-line statements apart from a multi-line statement once', () => {
+    const editor = new SourceEditor(`const a = {\n  b: 1,\n};\n`);
+    appendStatement(editor, `const c = 3;`);
+    appendStatement(editor, `const d = 4;`);
+    expect(editor.toString()).toBe(`const a = {\n  b: 1,\n};\n\nconst c = 3;\nconst d = 4;\n`);
+  });
+
   it('appends to the end of a file whose statements are all removed', () => {
     const editor = new SourceEditor(`const a = 1;\nconst b = 2;\n`);
     removeStatements(editor, new Set(editor.program.body));
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index c1f9492f4b8b..4d8876ddc47a 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -1041,19 +1041,27 @@ const isRemoved = (editor: SourceEditor, span: Span) => {
   }
 };
 
+// The text `appendStatement` added last to a batch of edits, with the statement it follows.
+const lastAppended = new WeakMap<SourceEdits, { after: Span; text: string }>();
+
 /**
  * Insert a statement after the last statement that pending edits did not remove. A blank line
- * sets it apart when it or that statement spans lines.
+ * sets it apart when it or what it follows spans lines: that statement, or the text appended after
+ * it before.
  */
 export const appendStatement = (editor: SourceEditor, text: string) => {
   const last = editor.program.body.findLast((statement) => !isRemoved(editor, statement));
   if (!last) {
-    const output = editor.edits.toString();
+    // A BOM is no content to end the line of.
+    const output = editor.edits.toString().replace(/^\uFEFF/, '');
     editor.edits.append(`${output && !output.endsWith('\n') ? '\n' : ''}${text}\n`);
     return;
   }
-  const multiline = text.includes('\n') || editor.source(last).includes('\n');
+  const previous = lastAppended.get(editor.edits);
+  const before = previous?.after === last ? previous.text : editor.source(last);
+  const multiline = text.includes('\n') || before.includes('\n');
   insertStatementAfter(editor, last, `${multiline ? '\n' : ''}${text}`);
+  lastAppended.set(editor.edits, { after: last, text });
 };
 
 /** The span of a statement with the comments it owns. */

From e16f9001638e5ddc04fbc6a27c62bc26bef90226 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 22:23:25 +0200
Subject: [PATCH 215/326] fix(csf-tools): leave a commit whose code does not
 parse pending instead of half applied

`SourceEditor.commit` pushed the batch's source map before parsing, so
a syntax error left a stale map behind, never ran `onCommit`, and the
file kept serving the index of the code before the edit. It parses
first now: a failed parse leaves the editor exactly as it was, edits
still pending. `CsfObject` mutations reported that error as
`invalid-csf` too; only the error of the re-index, which the editor
raises after it replaced its state, is a diagnostic. A syntax error is
the caller's text and propagates, as before the diagnostic existed.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/CsfObject.test.ts     | 13 +++++++++++++
 code/core/src/csf-tools/CsfObject.ts          |  6 +++++-
 code/core/src/csf-tools/estree/editor.test.ts | 11 +++++++++++
 code/core/src/csf-tools/estree/editor.ts      |  8 ++++++--
 4 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index f4c1f0192462..2e15a401fc3a 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -973,11 +973,24 @@ describe('CsfObject', () => {
       );
       expect(csf.changed).toBe(true);
       expect(meta.changed).toBe(true);
+      expect(csf._editor._committed).toHaveLength(1);
       expect(csf.mutationDiagnostics).toEqual([
         expect.objectContaining({ code: 'invalid-csf', target: { kind: 'meta' } }),
       ]);
     });
 
+    it('throws for code that does not parse, leaving the edits pending and the index as it was', () => {
+      const csf = load("export default { title: 'B' };\nexport const A = {};\n");
+      const [meta] = csf.objects({ stories: false });
+      csf._editor.edits.appendLeft(0, '(');
+
+      expect(() => meta.set(['tags'], ['docs'])).toThrow(/B\.stories\.ts$/);
+      expect(csf._editor.pending).toBe(true);
+      expect(csf._editor._committed).toEqual([]);
+      expect(csf.meta?.title).toBe('B');
+      expect(csf.mutationDiagnostics).toEqual([]);
+    });
+
     it.each([
       { path: ['title'], expression: '`B`', error: 'CSF: unexpected dynamic title' },
       { path: ['includeStories'], expression: 'fn()', error: 'Unknown include/exclude' },
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index f205a7b58a52..e069bba1f30e 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -891,13 +891,17 @@ class CsfObjectEditor implements CsfObject {
   }
 
   // The edit stays applied when the file's indexer rejects the committed code: the file is valid
-  // JS, so that is a diagnostic rather than an error.
+  // JS, so that is a diagnostic rather than an error. Code that does not parse is left pending by
+  // the editor, and the error is the caller's.
   private commit(path: readonly string[]): CsfMutationResult {
     this.#changed = true;
     this.markChanged();
     try {
       this.editor.commit();
     } catch (error) {
+      if (this.editor.pending) {
+        throw error;
+      }
       const reason = error instanceof Error ? error.message : String(error);
       const rejected = this.failure(
         'invalid-csf',
diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index 820d59c1ef97..a3f34d38e1c9 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -133,6 +133,17 @@ describe('commit', () => {
     expect(() => appendToList(editor, stale, ['b'])).toThrow('Cannot edit a list of another parse');
   });
 
+  it('leaves the editor as it was when the result does not parse', () => {
+    const editor = new SourceEditor('const a = 1;\n');
+    const [statement] = editor.program.body;
+    editor.edits.appendLeft(0, '(');
+    expect(() => editor.commit()).toThrow();
+    expect(editor.pending).toBe(true);
+    expect(editor._committed).toEqual([]);
+    expect(editor.program.body[0]).toBe(statement);
+    expect(editor.toString()).toBe('(const a = 1;\n');
+  });
+
   it('derives the story exports of a CsfFile again', () => {
     const csf = parse('export default {};\nexport const A = {};\n');
     appendStatement(csf._editor, 'export const B = {};');
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 4d8876ddc47a..00583dab4d5e 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -173,16 +173,20 @@ export class SourceEditor {
     }
   }
 
-  /** Apply pending edits and parse the result again. Returns whether anything changed. */
+  /**
+   * Apply pending edits and parse the result again. Returns whether anything changed. A result
+   * that does not parse throws and leaves the editor as it was, the edits still pending.
+   */
   commit() {
     if (!this.pending) {
       return false;
     }
+    const module = parsePrintable(this._edits.toString(), this.fileName);
     this._style ??= inferStyle(this._module);
     this._committed.push(
       this._edits.generateMap({ hires: true, includeContent: true, source: mapSource(this) })
     );
-    this._module = parsePrintable(this._edits.toString(), this.fileName);
+    this._module = module;
     this._scopes = undefined;
     this._parents = undefined;
     this._edits = new MagicString(this.code, { filename: this.fileName });

From ca1dc29d5c2f5407ad6e51af26b5929d9993e1fa Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 22:23:46 +0200
Subject: [PATCH 216/326] fix(csf-tools): throw the indexer's error from
 getStoryExport too

Every other public reader of a `CsfFile` throws the error of the last
re-index while the index is empty; `getStoryExport` returned
`undefined` instead.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/CsfFile.ts        | 1 +
 code/core/src/csf-tools/CsfObject.test.ts | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index 908fafbd8c97..b24d24eb9606 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -593,6 +593,7 @@ export class CsfFile {
   }
 
   getStoryExport(key: string): Node {
+    this._assertIndexed();
     let node: Node | null = this._storyExports[key];
     node = node?.type === 'VariableDeclarator' ? node.init : node;
     if (isCanonicalCsf2BindCall(node)) {
diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index 2e15a401fc3a..6cdd42445c99 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -1003,6 +1003,8 @@ describe('CsfObject', () => {
       expect(() => csf.meta).toThrow(error);
       expect(() => csf.stories).toThrow(error);
       expect(() => csf.indexInputs).toThrow(error);
+      expect(() => csf.getStoryExport('A')).toThrow(error);
+      expect(() => csf.getStoryTests('A')).toThrow(error);
       expect(() => csf.objects()).toThrow(error);
     });
   });

From 890632b5aa9736d84a0a342ec9a7f7a808341f02 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 22:24:17 +0200
Subject: [PATCH 217/326] fix(mocking-utils): accept Babel's parse signature as
 the legacy parser

`LegacyParser` took a file name as its second parameter, so a builder
passing Storybook 10's `babelParser`, whose second parameter is Babel's
options, failed to type-check against the deprecated overloads meant
for it.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/mocking-utils/extract.test.ts | 11 +++++++++--
 code/core/src/mocking-utils/extract.ts      |  6 +++---
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/code/core/src/mocking-utils/extract.test.ts b/code/core/src/mocking-utils/extract.test.ts
index 7b7e3251225d..eae32bcb9b10 100644
--- a/code/core/src/mocking-utils/extract.test.ts
+++ b/code/core/src/mocking-utils/extract.test.ts
@@ -85,12 +85,19 @@ describe('extractMockCalls', () => {
   });
 
   // storybook-builder-rsbuild 3.6 calls `extractMockCalls(options, babelParser, root, findMockRedirect)`.
-  it('accepts the parse function Storybook 10 builders pass before the root', () => {
+  it.each([
+    ['the deprecated babelParser', extractModule.babelParser],
+    [
+      // Babel's `parse(input, options?)`, as Storybook 10 exported it.
+      "Storybook 10's parse function",
+      (input: string, options?: { sourceType?: 'module' }) => ({ input, options }),
+    ],
+  ])('accepts %s before the root', (_, parser) => {
     vi.mocked(readFileSync).mockReturnValue("sb.mock('foo', { spy: true });");
 
     const result = extractModule.extractMockCalls(
       { previewConfigPath, configDir, coreOptions },
-      extractModule.babelParser,
+      parser,
       root,
       findMockRedirect
     );
diff --git a/code/core/src/mocking-utils/extract.ts b/code/core/src/mocking-utils/extract.ts
index 994af42fdcb6..d17863c58f0d 100644
--- a/code/core/src/mocking-utils/extract.ts
+++ b/code/core/src/mocking-utils/extract.ts
@@ -36,10 +36,10 @@ interface ExtractMockCallsOptions {
 }
 
 /**
- * The parse function Storybook 10 builders passed to `getAutomockCode` and `extractMockCalls`.
- * Removed in Storybook 12.
+ * The parse function Storybook 10 builders passed to `getAutomockCode` and `extractMockCalls`:
+ * Babel's parser, whose second parameter is its options. Removed in Storybook 12.
  */
-export type LegacyParser = (code: string, fileName?: string) => unknown;
+export type LegacyParser = (code: string, ...rest: any[]) => unknown;
 
 /**
  * @deprecated Storybook 10 builders passed this to `getAutomockCode` and `extractMockCalls`, which

From 459ecfdd40ec4e8500ab2a3a29bee3a7e9df26bf Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 22:25:22 +0200
Subject: [PATCH 218/326] fix(csf-tools): reject an export of an undeclared
 name in config files too

Babel rejected `export { Missing }` in story and config files alike;
`ConfigFile` accepted it. It now runs the check `CsfFile` runs, moved
to the scope analysis both share.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/ConfigFile.test.ts | 16 +++++++++
 code/core/src/csf-tools/ConfigFile.ts      |  9 +++++
 code/core/src/csf-tools/CsfFile.ts         | 25 +-------------
 code/core/src/csf-tools/estree/scope.ts    | 39 +++++++++++++++++++++-
 4 files changed, 64 insertions(+), 25 deletions(-)

diff --git a/code/core/src/csf-tools/ConfigFile.test.ts b/code/core/src/csf-tools/ConfigFile.test.ts
index 6853d77c1452..ebe32a17a5d5 100644
--- a/code/core/src/csf-tools/ConfigFile.test.ts
+++ b/code/core/src/csf-tools/ConfigFile.test.ts
@@ -2146,6 +2146,22 @@ describe('ConfigFile', () => {
   });
 
   describe('parse', () => {
+    it.each(['export { Missing };', 'export type { Missing };'])(
+      'rejects %s of a name the file never declares',
+      (exported) => {
+        expect(() => loadConfig(`export default {};\n${exported}`, 'main.ts').parse()).toThrow(
+          /^Export 'Missing' is not defined \(2:\d+\) in main\.ts$/
+        );
+      }
+    );
+
+    it.each(['const X = 1;', 'type X = {};', 'import { X } from "x";'])(
+      'accepts export { X } after %s',
+      (declaration) => {
+        expect(() => loadConfig(`${declaration}\nexport { X };`, 'main.ts').parse()).not.toThrow();
+      }
+    );
+
     it("export { X } with X is import { X } from 'another-file'", () => {
       const source = dedent`
           import type { StorybookConfig } from '@storybook/react-webpack5';
diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index acaa800728b2..e6fd5dd2c9aa 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -19,6 +19,7 @@ import {
 } from './CsfObject.ts';
 import {
   type E,
+  EstreeParseError,
   type Node,
   isIdentifier,
   isStringLiteral,
@@ -44,6 +45,7 @@ import {
   removeStatement,
   setImportSpecifiers,
 } from './estree/editor.ts';
+import { isDeclared } from './estree/scope.ts';
 import { findVarInitialization } from './findVarInitialization.ts';
 
 export interface CallArgumentsOptions {
@@ -455,6 +457,13 @@ export class ConfigFile implements CsfObject {
               spec.exported.type === 'Identifier'
                 ? spec.exported.name
                 : (spec.exported as E.StringLiteral).value;
+            if (isTopLevel && !node.source && !isDeclared(this._editor, spec.local)) {
+              throw new EstreeParseError(
+                `Export '${localName}' is not defined`,
+                this.fileName,
+                locationOf(this._code, spec.local.start, spec.local.start)
+              );
+            }
 
             const decl =
               _findVarDeclarator(localName, this._program) ??
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index b24d24eb9606..c4b47cc16d78 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -44,7 +44,7 @@ import {
   appendStatement,
   insertStatementAfter,
 } from './estree/editor.ts';
-import { generateUid } from './estree/scope.ts';
+import { generateUid, isDeclared } from './estree/scope.ts';
 import { findVarInitialization } from './findVarInitialization.ts';
 
 type CsfMutationState = {
@@ -237,29 +237,6 @@ const hasMount = (play: Node | undefined) => {
 const MODULE_MOCK_REGEX = /^[.\/#].*\.mock($|\.[^.]*$)/i;
 
 // TS declarations that the scope analysis does not create a binding for.
-const UNBOUND_DECLARATIONS = new Set([
-  'TSTypeAliasDeclaration',
-  'TSInterfaceDeclaration',
-  'TSEnumDeclaration',
-  'TSModuleDeclaration',
-  'TSDeclareFunction',
-]);
-
-const isDeclared = (editor: SourceEditor, local: E.IdentifierReference) =>
-  !!editor.scopes.bindingOf(local) ||
-  editor.program.body.some((statement) => {
-    const declaration =
-      statement.type === 'ExportNamedDeclaration' ? statement.declaration : statement;
-    if (!declaration || !UNBOUND_DECLARATIONS.has(declaration.type)) {
-      return false;
-    }
-    // `namespace A.B {}` declares `A`.
-    let id = (declaration as { id?: Node | null }).id;
-    while (id?.type === 'TSQualifiedName') {
-      id = id.left;
-    }
-    return isIdentifier(id, local.name);
-  });
 
 export interface CsfOptions {
   fileName?: string;
diff --git a/code/core/src/csf-tools/estree/scope.ts b/code/core/src/csf-tools/estree/scope.ts
index db17618d7b6d..91cce48906c4 100644
--- a/code/core/src/csf-tools/estree/scope.ts
+++ b/code/core/src/csf-tools/estree/scope.ts
@@ -1,4 +1,12 @@
-import { TYPE_KEYS, type E, type Node, childEntries, children, isNode } from './ast.ts';
+import {
+  TYPE_KEYS,
+  type E,
+  type Node,
+  childEntries,
+  children,
+  isIdentifier,
+  isNode,
+} from './ast.ts';
 
 export type BindingKind =
   | 'var'
@@ -782,3 +790,32 @@ export const generateUid = (info: ScopeInfo, name: string) => {
   info.names.add(uid);
   return uid;
 };
+
+// Declarations that are no bindings of the scope analysis, yet valid to export by name.
+const UNBOUND_DECLARATIONS = new Set([
+  'TSTypeAliasDeclaration',
+  'TSInterfaceDeclaration',
+  'TSEnumDeclaration',
+  'TSModuleDeclaration',
+  'TSDeclareFunction',
+]);
+
+/** Whether the name an `export { local }` refers to is declared in the module. */
+export const isDeclared = (
+  module: { scopes: ScopeInfo; program: E.Program },
+  local: E.IdentifierReference
+) =>
+  !!module.scopes.bindingOf(local) ||
+  module.program.body.some((statement) => {
+    const declaration =
+      statement.type === 'ExportNamedDeclaration' ? statement.declaration : statement;
+    if (!declaration || !UNBOUND_DECLARATIONS.has(declaration.type)) {
+      return false;
+    }
+    // `namespace A.B {}` declares `A`.
+    let id = (declaration as { id?: Node | null }).id;
+    while (id?.type === 'TSQualifiedName') {
+      id = id.left;
+    }
+    return isIdentifier(id, local.name);
+  });

From dcb104b9a14418d6e951c98f1da354e14e15c753 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 22:25:56 +0200
Subject: [PATCH 219/326] docs(migration): describe the csf-tools changes
 against what next did

`export { Missing }` is rejected in story and config files alike again,
so it is no change. The exports listed as removed never existed on
next. `SourceEditor` is new, so its `edits` type needs no comparison to
a MagicString. Mutations used to skip the re-index and return `ok:
true`, so the invalid-csf bullet says what happens now and how to
repair. The legacy parse function is accepted in its Storybook 10
position, not where the file name used to be. The `transform` example
reads its result back as source, as `getValue` cannot evaluate `1 + 1`.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 MIGRATION.md                         | 8 +++-----
 code/core/src/csf-tools/CsfObject.ts | 2 +-
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index c70813d6d831..5bc5f83f8786 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1348,7 +1348,6 @@ Storybook no longer bundles Babel or recast to read and write story and config f
 - Parse errors use OXC's wording, and end with ` in <file>` when the file name is known. Duplicate declarations and legacy octal literals are still rejected.
 - A parse error in a module that `sb.mock()` automocks is no longer recovered from, where Babel used to mock whatever it could parse. Under Vite the error is logged and the real module loads unmocked; under webpack the module's build fails.
 - Code that a migration or `storybook add` inserts follows the file: string quotes and indentation are inferred from it, new imports go after the existing imports in the order they are added, and a statement put first in a file stays below its header comments.
-- `export { Missing }` of a name the file never declares is rejected with `Export 'Missing' is not defined`.
 - The Vitest config that `@storybook/addon-vitest` writes reads the config directory from `import.meta.dirname`.
 - Story files read string-literal keys and ignore computed identifier keys. `export default { 'title': 'X' }` now gives story ids under `X`, where Babel used the automatic title, and `export default { [title]: 'X' }` no longer sets the title.
 
@@ -1362,10 +1361,9 @@ Storybook no longer bundles Babel or recast to read and write story and config f
 - `babelParse` is removed; use `parseModule(code, fileName)` from `storybook/internal/csf-tools`, which returns the ESTree `program` and `comments`. `babelParseFile` is removed as well; read CSF with `loadCsf(code, options)` or `readCsf(fileName, options)`.
 - Parsing normalizes line endings to `\n`. Node offsets from `parseModule`, `CsfFile._program` and `ConfigFile._program` index the normalized `code`/`_code`, not the string you passed in; lines and columns are unchanged.
 - `getHeaderComments(statement)` is removed. The editor keeps a file's header comments in place: `prependStatement` inserts below them, also in a file without statements, and `appendStatement` separates a multi-line statement from its neighbour with a blank line.
-- `CsfObject` mutations whose result is valid JavaScript but not valid CSF, for example a meta `tags` that is no longer an array of string literals, no longer throw. They return `{ ok: false, changed: true, diagnostic }` with code `'invalid-csf'`, the edit stays applied, and `csf.meta`, `csf.stories`, `csf.indexInputs` and `csf.objects()` throw the indexer's error until a later commit indexes the file again. The `ok: false` arm of `CsfMutationResult` now carries `changed: boolean`.
-- `SourceEditor#edits` is typed as `SourceEdits` (`append`, `appendLeft`, `appendRight`, `overwrite`, `remove`, `slice`, `hasChanged`, `generateMap`, `toString`) instead of a `MagicString`, and `generateMap()` returns the structural `GeneratedMap`.
-- `storybook/internal/csf-tools` no longer exports `CsfExpression` (use `ESTree.Expression`), `isValidIdentifier`, `headerComments`, `printValue` and `List`.
-- `getAutomockCode(code, isSpy, fileName)` and `extractMockCalls(options, root, findMockRedirect)` in `storybook/internal/mocking-utils` parse the code themselves and no longer take a parser: drop the parser argument and pass the module's file name to `getAutomockCode`. `rewriteSbMockImportCalls(code, fileName)` requires the file name as well. Until Storybook 12 both functions still accept a parse function where the file name or root used to be, and ignore it, and `babelParser` is still exported as a deprecated parse function that returns an ESTree program, so builders built against Storybook 10 keep working. `automockModule` is no longer exported.
+- `CsfObject` mutations index the story file again after every edit, where they used to leave the index as it was and return `{ ok: true }`. An edit whose result is valid JavaScript but not valid CSF, for example a meta `tags` that is no longer an array of string literals, returns `{ ok: false, changed: true, diagnostic }` with code `'invalid-csf'`. The edit stays applied, and `csf.meta`, `csf.stories`, `csf.indexInputs`, `csf.getStoryExport()`, `csf.getStoryTests()` and `csf.objects()` throw the indexer's error until a commit indexes the file again; repair such a file through `csf._editor` edits and `csf._editor.commit()`, as `objects()` needs the index. An edit whose result does not parse throws and stays pending, as before. The `ok: false` arm of `CsfMutationResult` now carries `changed: boolean`.
+- `SourceEditor#edits` is a `SourceEdits`: `append`, `appendLeft`, `appendRight`, `overwrite`, `remove`, `slice`, `hasChanged`, `generateMap` and `toString`, addressed by offsets into `code`. `SourceEditor#generateMap()` returns a `GeneratedMap`.
+- `getAutomockCode(code, isSpy, fileName)` and `extractMockCalls(options, root, findMockRedirect)` in `storybook/internal/mocking-utils` parse the code themselves and no longer take a parser: drop the parser argument and pass the module's file name to `getAutomockCode`. `rewriteSbMockImportCalls(code, fileName)` requires the file name as well. Until Storybook 12 both functions still accept a parse function in its Storybook 10 position, which is where `getAutomockCode` now takes the file name and before the root of `extractMockCalls`, and ignore it, and `babelParser` is still exported as a deprecated parse function that returns an ESTree program, so builders built against Storybook 10 keep working. `automockModule` is no longer exported.
 - The story-shape helpers no longer take Babel paths: `jsDocTagsForPath` is `jsDocTagsForNode`, `metaObjectPath` is `metaObject`, `RenderFunctionPath` is `RenderFunction`, and `pathForNode` and `returnedExpressionPath` are removed in favor of `returnedExpression` and plain nodes.
 - The `getAbsolutePath` wrapper helpers in `storybook/internal/common` produce source text instead of Babel nodes. `getAbsolutePathWrapperAsCallExpression(isTs, names)`, which returned the wrapper's function declaration, is replaced by `getAbsolutePathWrapperDeclaration(config, isTs, names)`, which returns the declaration's source, indented like `config`, for `ConfigFile#setBodyDeclaration`. `getAbsolutePathCall(config, value)` returns the source of a call to the config's wrapper. `wrapValueWithGetAbsolutePathWrapper(config, node)` is replaced by `wrapValuesWithGetAbsolutePathWrapper(config, nodes)`, which wraps every node in the array and commits the edits to `config`.
 - `new CsfFile(code, options)` and `new ConfigFile(code, fileName)` take source code instead of a Babel AST.
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index e069bba1f30e..181f8fa3af56 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -156,7 +156,7 @@ export interface CsfObject {
    * object.transform(['args', 'count'], (value) =>
    *   parseExpression(`${placeableTextOf(value)} + 1`)
    * ); // { ok: true, changed: true }
-   * object.getValue(['args', 'count']); // 2
+   * textOf(object.get(['args', 'count'])!); // '1 + 1'
    * ```
    */
   transform(

From 9d2b9e56cb6a027bace7bfba6ad5000d59ac1b36 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 22:33:46 +0200
Subject: [PATCH 220/326] perf(csf-tools): generate the maps of committed edits
 only when a map is requested

`commit()` generated a hi-res source map of the batch it applied, although
most editors never have `generateMap()` called: automigrations and the
config workload print the code and discard the editor. The editor now keeps
each committed `MagicString` and generates the chain of maps inside
`generateMap()`. The maps are the same bytes, as the new two-commit test
pins down.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/editor.test.ts | 20 +++++++++++++++++++
 code/core/src/csf-tools/estree/editor.ts      | 20 ++++++++-----------
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index a3f34d38e1c9..5042241c91ff 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -1114,6 +1114,26 @@ describe('generateMap', () => {
     });
   });
 
+  it('maps through two commits and a pending edit back to the original code', () => {
+    const editor = new SourceEditor(original, 'file.ts');
+    editOf(editor);
+    editor.commit();
+    editor.edits.appendLeft(0, '// header\n');
+    editor.commit();
+    const title = editor.code.indexOf("'A'");
+    editor.edits.overwrite(title, title + 3, "'Renamed'");
+    const result = editor.generateMap();
+    expect(result.sources).toEqual(['file.ts']);
+    expect(result.sourcesContent).toEqual([original]);
+    expect(entryOf(result, editor.toString(), 'title')).toMatchObject({
+      originalLine: 2,
+      originalColumn: original.split('\n')[2].indexOf('title'),
+    });
+    expect(result.mappings).toMatchInlineSnapshot(
+      `";AAAA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACX,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;AACX,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAG,CAAC,CAAC"`
+    );
+  });
+
   it('names the source as requested after a committed edit', () => {
     const editor = new SourceEditor(original, 'file.ts');
     editOf(editor);
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 00583dab4d5e..45013e691602 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -89,9 +89,9 @@ export class SourceEditor {
 
   _edits: SourceEdits;
 
-  // Maps of the edits applied by earlier commits, oldest first, so the output still maps to the
-  // code the editor was created with.
-  _committed: GeneratedMap[] = [];
+  // The edits each earlier commit applied, oldest first. Their maps are only generated when one
+  // is requested, so the output still maps to the code the editor was created with.
+  _committed: SourceEdits[] = [];
 
   // The code the editor was created with, line endings included: the content its maps name.
   readonly _originalCode: string;
@@ -183,9 +183,7 @@ export class SourceEditor {
     }
     const module = parsePrintable(this._edits.toString(), this.fileName);
     this._style ??= inferStyle(this._module);
-    this._committed.push(
-      this._edits.generateMap({ hires: true, includeContent: true, source: mapSource(this) })
-    );
+    this._committed.push(this._edits);
     this._module = module;
     this._scopes = undefined;
     this._parents = undefined;
@@ -201,16 +199,14 @@ export class SourceEditor {
    */
   generateMap(options: { source?: string; inputSourceMap?: InputSourceMap } = {}): GeneratedMap {
     const source = options.source ?? this.fileName ?? '';
-    const current = this._edits.generateMap({
-      hires: true,
-      includeContent: true,
-      source: mapSource(this),
-    });
+    const chain = [this._edits, ...this._committed.slice().reverse()].map((edits) =>
+      edits.generateMap({ hires: true, includeContent: true, source: mapSource(this) })
+    );
+    const [current] = chain;
     const input =
       typeof options.inputSourceMap === 'string'
         ? (JSON.parse(options.inputSourceMap) as Exclude<InputSourceMap, string>)
         : options.inputSourceMap;
-    const chain = [current, ...this._committed.slice().reverse()];
     if (chain.length === 1 && !input) {
       current.sources = [source];
       current.sourcesContent = [this._originalCode];

From 1101196a86bd7f142dbc5d467570487a67e2feb0 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 22:43:11 +0200
Subject: [PATCH 221/326] perf(csf-tools): record a node's parse as a symbol
 property instead of a WeakMap entry

`normalize` registered every node of a printable parse in a WeakMap, which
cost more than deserializing the tree. The parse, the outer span of a
parenthesized node and the text of a `parseExpression` fragment are now
symbol properties on the node. `JSON.stringify`, `Object.keys` and `walk`
skip symbol keys, so the corpus summaries and every printed output stay
byte-identical. A plain assignment is used rather than a non-enumerable
`Object.defineProperty`: the latter kept only a quarter of the gain on the
indexing workload (295 -> 274 ms against 295 -> 220 ms for 740 files).

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/ast.test.ts | 18 ++++++++-
 code/core/src/csf-tools/estree/ast.ts      | 44 +++++++++++++---------
 2 files changed, 44 insertions(+), 18 deletions(-)

diff --git a/code/core/src/csf-tools/estree/ast.test.ts b/code/core/src/csf-tools/estree/ast.test.ts
index a7bf0d0f99ad..3a4b1fa666ba 100644
--- a/code/core/src/csf-tools/estree/ast.test.ts
+++ b/code/core/src/csf-tools/estree/ast.test.ts
@@ -1,6 +1,15 @@
 import { describe, expect, it } from 'vitest';
 
-import { type E, codeFrame, parseExpression, outerSpan, parseModule, textOf, walk } from './ast.ts';
+import {
+  type E,
+  codeFrame,
+  parseExpression,
+  outerSpan,
+  parseModule,
+  parsePrintable,
+  textOf,
+  walk,
+} from './ast.ts';
 
 describe('parseModule', () => {
   const flowBody = 'const x: { +readOnly: number } = {};';
@@ -80,6 +89,13 @@ describe('parseModule', () => {
     expect(() => parseModule(['const a = 1;', 'const b = ;', ''].join(eol))).toThrow(/\(2:10\)$/);
   });
 
+  it('serializes a printable parse like the parser output, with its text available', () => {
+    const code = 'export const a = (1);\n';
+    const { program } = parsePrintable(code, 'a.ts');
+    expect(textOf(program.body[0])).toBe('export const a = (1);');
+    expect(JSON.stringify(program)).toBe(JSON.stringify(parseModule(code, 'a.ts').program));
+  });
+
   it('normalizes an expression nested deeper than the call stack allows recursion', () => {
     const { program } = parseModule(`x = ${Array(20_000).fill('(a)').join(' + ')};`);
     expect(program.body).toHaveLength(1);
diff --git a/code/core/src/csf-tools/estree/ast.ts b/code/core/src/csf-tools/estree/ast.ts
index 584977c4e8c3..dc0f31215c1e 100644
--- a/code/core/src/csf-tools/estree/ast.ts
+++ b/code/core/src/csf-tools/estree/ast.ts
@@ -331,22 +331,35 @@ export type Span = { start: number; end: number };
 
 export const sourceOf = (code: string, node: Span) => code.slice(node.start, node.end);
 
-// The parse each node came from, so a node can be printed without its module.
-const nodeModules = new WeakMap<object, ParsedModule>();
+// What a parse records on its nodes: the parse itself, so a node can be printed without its
+// module, the span of the parentheses around a node, and the text of a `parseExpression` fragment.
+// Symbol properties, which `JSON.stringify`, `Object.keys` and `walk` skip; assigning one costs a
+// fraction of a `WeakMap` entry or `Object.defineProperty` per node, a tenth of the index time.
+const MODULE = Symbol('module');
+const OUTER_SPAN = Symbol('outerSpan');
+const FRAGMENT = Symbol('fragment');
+
+interface Tagged {
+  [MODULE]?: ParsedModule;
+  [OUTER_SPAN]?: Span;
+  [FRAGMENT]?: { text: string; placeable: string };
+}
+
+const tag = <K extends keyof Tagged>(value: object, key: K, data: Tagged[K]) => {
+  (value as Tagged)[key] = data;
+};
 
 /** The parse a node of `parsePrintable` or `parseExpression` came from. */
-export const moduleOf = (node: object): ParsedModule | undefined => nodeModules.get(node);
+export const moduleOf = (node: object): ParsedModule | undefined => (node as Tagged)[MODULE];
 
 /** Mark `value` as derived from the nodes of `module`, so `moduleOf` finds that parse for it. */
 export const derivedFrom = <T extends object>(value: T, module: ParsedModule): T => {
-  nodeModules.set(value, module);
+  tag(value, MODULE, module);
   return value;
 };
 
-const outerSpans = new WeakMap<object, Span>();
-
 /** The span of a node with the parentheses written around it. */
-export const outerSpan = (node: Span): Span => outerSpans.get(node) ?? node;
+export const outerSpan = (node: Span): Span => (node as Tagged)[OUTER_SPAN] ?? node;
 
 const isParenthesized = (node: Node): node is E.ParenthesizedExpression | E.TSParenthesizedType =>
   node.type === 'ParenthesizedExpression' || node.type === 'TSParenthesizedType';
@@ -357,7 +370,7 @@ const withoutParentheses = (node: Node): Node => {
   while (isParenthesized(inner)) {
     inner = inner.type === 'ParenthesizedExpression' ? inner.expression : inner.typeAnnotation;
   }
-  outerSpans.set(inner, { start: node.start, end: node.end });
+  tag(inner, OUTER_SPAN, { start: node.start, end: node.end });
   return inner;
 };
 
@@ -372,7 +385,7 @@ const normalize = (root: Node, module: ParsedModule | undefined) => {
   while (size > 0) {
     const node = stack[--size];
     if (module !== undefined) {
-      nodeModules.set(node, module);
+      tag(node, MODULE, module);
     }
     const keys = childKeys.get(node.type);
     if (keys === undefined) {
@@ -398,11 +411,8 @@ const normalize = (root: Node, module: ParsedModule | undefined) => {
   }
 };
 
-// The text of each expression `parseExpression` returns: as written, and as it is placed.
-const fragments = new WeakMap<object, { text: string; placeable: string }>();
-
 const codeOf = (node: Node) => {
-  const code = nodeModules.get(node)?.code;
+  const code = moduleOf(node)?.code;
   if (code === undefined) {
     throw new Error(
       `Cannot print a ${node.type} node whose source is unknown: expressions must come from \`get\`, \`transform\` or \`parseExpression\``
@@ -416,14 +426,14 @@ const codeOf = (node: Node) => {
  * other node, such as one from `parseModule`.
  */
 export const textOf = (node: Node): string =>
-  fragments.get(node)?.text ?? sourceOf(codeOf(node), node);
+  (node as Tagged)[FRAGMENT]?.text ?? sourceOf(codeOf(node), node);
 
 /**
  * `textOf` for placing a node as a value: a comma expression keeps its parentheses or gets them,
  * and a trailing line comment ends its line.
  */
 export const placeableTextOf = (node: Node): string => {
-  const fragment = fragments.get(node);
+  const fragment = (node as Tagged)[FRAGMENT];
   if (fragment) {
     return fragment.placeable;
   }
@@ -462,10 +472,10 @@ export const parseExpression = (source: string): E.Expression => {
   normalize(program, module);
   const expression = (statement as E.ExpressionStatement).expression;
   // The wrapper's parentheses are not part of the fragment.
-  outerSpans.delete(expression);
+  delete (expression as Tagged)[OUTER_SPAN];
   const comment = comments.at(-1);
   const ended = comment?.type === 'Line' && comment.end === code.length + 1 ? `${code}\n` : code;
-  fragments.set(expression, {
+  tag(expression, FRAGMENT, {
     text: code,
     placeable: expression.type === 'SequenceExpression' && !parenthesized ? `(${ended})` : ended,
   });

From a3b9b5ebc8594395a1f2371fad79e21443dd6af2 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 22:46:00 +0200
Subject: [PATCH 222/326] perf(csf-tools): read the OXC tree through raw
 transfer where supported

Parsing passes `experimentalRawTransfer: rawTransferSupported()`, so on
64-bit Node 22+ with a native binding the tree is deserialized straight
from the parser's buffer instead of through JSON, which was 12-16% of the
indexing profile. The buffer reserves 6 GiB of virtual address space, of
which only written pages become resident. The raw deserializer recurses,
so a `RangeError` from it is retried once through JSON for that parse,
which keeps the 20,000-deep expression parsing. The tree is identical to
the JSON one for all 820 story and config files of the corpus;
`rawTransferSupported()` is false under the WASM binding. `parseModule`
takes a `rawTransfer` option so both ways are tested.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/ast.test.ts | 38 +++++++++++-
 code/core/src/csf-tools/estree/ast.ts      | 68 ++++++++++++++++++----
 2 files changed, 91 insertions(+), 15 deletions(-)

diff --git a/code/core/src/csf-tools/estree/ast.test.ts b/code/core/src/csf-tools/estree/ast.test.ts
index 3a4b1fa666ba..e054dc021d06 100644
--- a/code/core/src/csf-tools/estree/ast.test.ts
+++ b/code/core/src/csf-tools/estree/ast.test.ts
@@ -1,5 +1,7 @@
 import { describe, expect, it } from 'vitest';
 
+import { rawTransferSupported } from 'oxc-parser';
+
 import {
   type E,
   codeFrame,
@@ -11,6 +13,9 @@ import {
   walk,
 } from './ast.ts';
 
+// Raw transfer is only available on 64-bit Node 22+, where both ways of reading the tree run.
+const transfers = rawTransferSupported() ? [true, false] : [false];
+
 describe('parseModule', () => {
   const flowBody = 'const x: { +readOnly: number } = {};';
 
@@ -96,9 +101,36 @@ describe('parseModule', () => {
     expect(JSON.stringify(program)).toBe(JSON.stringify(parseModule(code, 'a.ts').program));
   });
 
-  it('normalizes an expression nested deeper than the call stack allows recursion', () => {
-    const { program } = parseModule(`x = ${Array(20_000).fill('(a)').join(' + ')};`);
-    expect(program.body).toHaveLength(1);
+  it.each(transfers)(
+    'normalizes an expression nested deeper than the call stack allows recursion, rawTransfer %s',
+    (rawTransfer) => {
+      const code = `x = ${Array(20_000).fill('(a)').join(' + ')};`;
+      const { program } = parseModule(code, undefined, { rawTransfer });
+      expect(program.body).toHaveLength(1);
+    }
+  );
+
+  it.runIf(transfers.length === 2)(
+    'reads the same tree through raw transfer as through JSON',
+    () => {
+      const code = [
+        '#!/usr/bin/env node',
+        '/** Doc */',
+        'export const a = <T,>(x: T) => (x as any)!;',
+        'const j = <div a="1">{(1, 2)}</div>;',
+        'const r = /a+/gu, b = 10n, n = 0x1f, s = `${b}`;',
+        "export default { title: 'A' } satisfies Meta; // end",
+      ].join('\n');
+      const raw = parseModule(code, 'a.tsx', { rawTransfer: true });
+      const json = parseModule(code, 'a.tsx', { rawTransfer: false });
+      expect(raw).toEqual(json);
+    }
+  );
+
+  it.each(transfers)('reports a parse error at its position with rawTransfer %s', (rawTransfer) => {
+    expect(() => parseModule('const a = 1;\nconst = ;\n', 'a.ts', { rawTransfer })).toThrow(
+      'Unexpected token (2:6) in a.ts'
+    );
   });
 });
 
diff --git a/code/core/src/csf-tools/estree/ast.ts b/code/core/src/csf-tools/estree/ast.ts
index dc0f31215c1e..f20267eea939 100644
--- a/code/core/src/csf-tools/estree/ast.ts
+++ b/code/core/src/csf-tools/estree/ast.ts
@@ -1,5 +1,5 @@
 import type * as E from 'oxc-parser';
-import { parseSync, visitorKeys } from 'oxc-parser';
+import { parseSync, rawTransferSupported, visitorKeys } from 'oxc-parser';
 
 export type { E };
 
@@ -49,17 +49,47 @@ type ParseAttempt = { module: ParsedModule } | { error: EstreeParseError; offset
 
 const labelStart = (diagnostic: E.OxcError) => diagnostic.labels?.[0]?.start;
 
-const parseWith = (code: string, fileName: string | undefined, lang: Lang): ParseAttempt => {
+// Raw transfer reads the tree out of the parser's memory instead of through JSON, into a buffer
+// that reserves 6 GiB of virtual address space, of which only the pages written are ever
+// resident. It is unsupported on 32-bit hosts, under the WASM binding and before Node 22.
+const RAW_TRANSFER = rawTransferSupported();
+
+// The option is missing from the `ParserOptions` type of oxc-parser 0.153.
+type ParseOptions = E.ParserOptions & { experimentalRawTransfer: boolean };
+
+/** Whether a parse reads its tree through raw transfer, as it does wherever that is supported. */
+export interface TransferOptions {
+  rawTransfer?: boolean;
+}
+
+const parseWith = (
+  code: string,
+  fileName: string | undefined,
+  lang: Lang,
+  rawTransfer: boolean
+): ParseAttempt => {
   const name = fileName ?? `file.${lang}`;
-  const options = {
+  const options: ParseOptions = {
     lang,
     sourceType: 'module',
     preserveParens: true,
     // Duplicate declarations and legacy octals are reported like Babel did, instead of parsing
     // into a program that silently keeps the last declaration.
     showSemanticErrors: true,
-  } as const;
-  const result = parseSync(name, code, options);
+    experimentalRawTransfer: rawTransfer,
+  };
+  let result: E.ParseResult;
+  try {
+    result = parseSync(name, code, options);
+  } catch (error) {
+    // The raw transfer deserializer recurses, so a tree nested deeper than the call stack allows
+    // comes through JSON, which does not.
+    if (!(rawTransfer && error instanceof RangeError)) {
+      throw error;
+    }
+    const json: ParseOptions = { ...options, experimentalRawTransfer: false };
+    result = parseSync(name, code, json);
+  }
   const [error] = result.errors.filter((diagnostic) => diagnostic.severity === 'Error');
   if (error) {
     const offset = labelStart(error) ?? 0;
@@ -100,8 +130,12 @@ export const restoreLineEndings = (code: string, original: string) => {
  *
  * The tree has no parenthesized nodes: `outerSpan` gives the span of the parentheses around one.
  */
-export const parseModule = (code: string, fileName?: string): ParsedModule => {
-  const module = parseWithParentheses(code, fileName);
+export const parseModule = (
+  code: string,
+  fileName?: string,
+  options: TransferOptions = {}
+): ParsedModule => {
+  const module = parseWithParentheses(code, fileName, options.rawTransfer ?? RAW_TRANSFER);
   normalize(module.program, undefined);
   return module;
 };
@@ -113,10 +147,16 @@ export const parsePrintable = (code: string, fileName?: string): ParsedModule =>
   return module;
 };
 
-const parseWithParentheses = (source: string, fileName: string | undefined): ParsedModule => {
+const parseWithParentheses = (
+  source: string,
+  fileName: string | undefined,
+  rawTransfer = RAW_TRANSFER
+): ParsedModule => {
   const code = normalizeLineEndings(source);
   const lang = fileName === undefined ? undefined : langFor(fileName);
-  const attempt = lang ? parseWith(code, fileName, lang) : parseEither(code, fileName);
+  const attempt = lang
+    ? parseWith(code, fileName, lang, rawTransfer)
+    : parseEither(code, fileName, rawTransfer);
   if ('module' in attempt) {
     return attempt.module;
   }
@@ -135,12 +175,16 @@ const LEADING_COMMENTS = /^(?:\s*(?:\/\/[^\n]*|\/\*[\s\S]*?\*\/))*/;
 // Flow reads its pragma from any comment in the file's header, including `/** @flow */` docblocks.
 const hasFlowPragma = (code: string) => /@flow\b/.test(LEADING_COMMENTS.exec(code)?.[0] ?? '');
 
-const parseEither = (code: string, fileName: string | undefined): ParseAttempt => {
-  const tsx = parseWith(code, fileName, 'tsx');
+const parseEither = (
+  code: string,
+  fileName: string | undefined,
+  rawTransfer: boolean
+): ParseAttempt => {
+  const tsx = parseWith(code, fileName, 'tsx', rawTransfer);
   if ('module' in tsx) {
     return tsx;
   }
-  const ts = parseWith(code, fileName, 'ts');
+  const ts = parseWith(code, fileName, 'ts', rawTransfer);
   return 'module' in ts || ts.offset > tsx.offset ? ts : tsx;
 };
 

From 24a30d23c85bc6e5273919a90f28e44f6d0726a1 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 22:47:44 +0200
Subject: [PATCH 223/326] revert(core): drop the oxc-parser WASM binding from
 the optional dependencies

The 0.153-0.155 `@oxc-parser/binding-wasm32-wasi` packages carry no `cpu`
field, so the optional dependency installed on every host (+4.5 MB, 7
packages), and 0.153's binding fails to load under npm because of an
`@emnapi` alpha mismatch. `oxc-parser` is a caret range again and the
version-pin test goes with the dependency. Without a binding, oxc-parser's
"Cannot find native binding" error names the package only in its cause
chain, so MIGRATION.md tells hosts without a native binding to install the
WASM binding at the oxc-parser version themselves.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 MIGRATION.md                                  |   1 +
 code/core/package.json                        |   5 +-
 .../common/utils/oxc-parser-binding.test.ts   |  18 --
 yarn.lock                                     | 191 +++++++-----------
 4 files changed, 70 insertions(+), 145 deletions(-)
 delete mode 100644 code/core/src/common/utils/oxc-parser-binding.test.ts

diff --git a/MIGRATION.md b/MIGRATION.md
index 5bc5f83f8786..b587899d25e2 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1350,6 +1350,7 @@ Storybook no longer bundles Babel or recast to read and write story and config f
 - Code that a migration or `storybook add` inserts follows the file: string quotes and indentation are inferred from it, new imports go after the existing imports in the order they are added, and a statement put first in a file stays below its header comments.
 - The Vitest config that `@storybook/addon-vitest` writes reads the config directory from `import.meta.dirname`.
 - Story files read string-literal keys and ignore computed identifier keys. `export default { 'title': 'X' }` now gives story ids under `X`, where Babel used the automatic title, and `export default { [title]: 'X' }` no longer sets the title.
+- Hosts without a native `oxc-parser` binding, such as StackBlitz WebContainers, must install `@oxc-parser/binding-wasm32-wasi` at the exact version of `oxc-parser` themselves, as the "Cannot find native binding" error does not name it (oxc-parser tries to download it with `pnpm` on WebContainers first).
 
 #### Changes for tooling that imports Storybook's internal entry points
 
diff --git a/code/core/package.json b/code/core/package.json
index ea6ba5dcd038..8b8d3d4578fb 100644
--- a/code/core/package.json
+++ b/code/core/package.json
@@ -281,7 +281,7 @@
     "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0 || ^0.26.0 || ^0.27.0 || ^0.28.0",
     "jsonc-parser": "^3.3.1",
     "open": "^10.2.0",
-    "oxc-parser": "0.153.0",
+    "oxc-parser": "^0.153.0",
     "oxc-resolver": "11.21.2",
     "semver": "^7.7.3",
     "use-sync-external-store": "^1.5.0",
@@ -446,9 +446,6 @@
       "optional": true
     }
   },
-  "optionalDependencies": {
-    "@oxc-parser/binding-wasm32-wasi": "0.153.0"
-  },
   "publishConfig": {
     "access": "public"
   },
diff --git a/code/core/src/common/utils/oxc-parser-binding.test.ts b/code/core/src/common/utils/oxc-parser-binding.test.ts
deleted file mode 100644
index 90adf91e9fdd..000000000000
--- a/code/core/src/common/utils/oxc-parser-binding.test.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { readFileSync } from 'node:fs';
-import { fileURLToPath } from 'node:url';
-
-import { expect, it } from 'vitest';
-
-const pkg = JSON.parse(
-  readFileSync(fileURLToPath(new URL('../../../package.json', import.meta.url)), 'utf-8')
-);
-
-// oxc-parser loads `@oxc-parser/binding-wasm32-wasi` where no native binding exists, such as
-// StackBlitz WebContainers, but no longer declares it as its own optional dependency. The binding
-// only works with the oxc-parser release it was built for, so both are pinned to one version.
-it('pins @oxc-parser/binding-wasm32-wasi to the exact oxc-parser version', () => {
-  const version = pkg.dependencies['oxc-parser'];
-
-  expect(version).toMatch(/^\d+\.\d+\.\d+$/);
-  expect(pkg.optionalDependencies['@oxc-parser/binding-wasm32-wasi']).toBe(version);
-});
diff --git a/yarn.lock b/yarn.lock
index 64b77bd14562..a18f20a5aced 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2656,16 +2656,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emnapi/core@npm:2.0.0-alpha.3":
-  version: 2.0.0-alpha.3
-  resolution: "@emnapi/core@npm:2.0.0-alpha.3"
-  dependencies:
-    "@emnapi/wasi-threads": "npm:2.0.1"
-    tslib: "npm:^2.4.0"
-  checksum: 10c0/dfc26f53eb40dab0e316206cabe01e6e98d21ef8a0b820f81ce7e0fa7b4307c94f2a9599c11e6c601ad7bd77e8efb9b7cb9f86dbc3b6237f799405e0cb60c587
-  languageName: node
-  linkType: hard
-
 "@emnapi/core@npm:^1.1.0, @emnapi/core@npm:^1.11.1":
   version: 1.11.3
   resolution: "@emnapi/core@npm:1.11.3"
@@ -2712,15 +2702,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emnapi/runtime@npm:2.0.0-alpha.3":
-  version: 2.0.0-alpha.3
-  resolution: "@emnapi/runtime@npm:2.0.0-alpha.3"
-  dependencies:
-    tslib: "npm:^2.4.0"
-  checksum: 10c0/c8f6e0ad2f9c0ced8bc156a7ec3ab5fbbd2d3b7147b6a37537f6892131844b969d3aa450749807fc238160b5db61d6160b8066abfce4b2c40acfb1941bb31dd1
-  languageName: node
-  linkType: hard
-
 "@emnapi/runtime@npm:^1.1.0, @emnapi/runtime@npm:^1.11.1, @emnapi/runtime@npm:^1.7.0":
   version: 1.11.3
   resolution: "@emnapi/runtime@npm:1.11.3"
@@ -2757,15 +2738,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emnapi/wasi-threads@npm:2.0.1":
-  version: 2.0.1
-  resolution: "@emnapi/wasi-threads@npm:2.0.1"
-  dependencies:
-    tslib: "npm:^2.4.0"
-  checksum: 10c0/5f7bf4cc4f6a1c31ec2084c9321d054f3b3b6c7e89430bb23fc3487d55e7be40f1ff31b2cb9a51721b444d4e8ac1f065b8749606771f6e4e7ccb32bbb709a303
-  languageName: node
-  linkType: hard
-
 "@emotion/babel-plugin@npm:^11.13.5":
   version: 11.13.5
   resolution: "@emotion/babel-plugin@npm:11.13.5"
@@ -4813,18 +4785,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@napi-rs/wasm-runtime@npm:~1.2.5":
-  version: 1.2.5
-  resolution: "@napi-rs/wasm-runtime@npm:1.2.5"
-  dependencies:
-    "@tybys/wasm-util": "npm:^0.10.3"
-  peerDependencies:
-    "@emnapi/core": ^1.7.1 || ^2.0.0-alpha.4
-    "@emnapi/runtime": ^1.7.1 || ^2.0.0-alpha.4
-  checksum: 10c0/dae2bc48077df6da2d59f3c0f3e17b03b99953dbd97fd1fb1f0d261c6036b812538d5905266bd2402182e2709a778d63c8bbb3c2d7fe090fcea863f717954fce
-  languageName: node
-  linkType: hard
-
 "@neoconfetti/react@npm:^1.0.0":
   version: 1.0.0
   resolution: "@neoconfetti/react@npm:1.0.0"
@@ -6155,17 +6115,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-wasm32-wasi@npm:0.153.0":
-  version: 0.153.0
-  resolution: "@oxc-parser/binding-wasm32-wasi@npm:0.153.0"
-  dependencies:
-    "@emnapi/core": "npm:2.0.0-alpha.3"
-    "@emnapi/runtime": "npm:2.0.0-alpha.3"
-    "@napi-rs/wasm-runtime": "npm:~1.2.5"
-  checksum: 10c0/6574d6f2e78c1baf0b22ac1e9d7907a7de37b8de68e2e581199f18f4039a7c7d085c4ebdee238f33f796eb89d6c9c61bbac7197dd361e96ae01e87bab53e8ef9
-  languageName: node
-  linkType: hard
-
 "@oxc-parser/binding-win32-arm64-msvc@npm:0.121.0":
   version: 0.121.0
   resolution: "@oxc-parser/binding-win32-arm64-msvc@npm:0.121.0"
@@ -28233,73 +28182,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"oxc-parser@npm:0.153.0":
-  version: 0.153.0
-  resolution: "oxc-parser@npm:0.153.0"
-  dependencies:
-    "@oxc-parser/binding-android-arm-eabi": "npm:0.153.0"
-    "@oxc-parser/binding-android-arm64": "npm:0.153.0"
-    "@oxc-parser/binding-darwin-arm64": "npm:0.153.0"
-    "@oxc-parser/binding-darwin-x64": "npm:0.153.0"
-    "@oxc-parser/binding-freebsd-x64": "npm:0.153.0"
-    "@oxc-parser/binding-linux-arm-gnueabihf": "npm:0.153.0"
-    "@oxc-parser/binding-linux-arm-musleabihf": "npm:0.153.0"
-    "@oxc-parser/binding-linux-arm64-gnu": "npm:0.153.0"
-    "@oxc-parser/binding-linux-arm64-musl": "npm:0.153.0"
-    "@oxc-parser/binding-linux-ppc64-gnu": "npm:0.153.0"
-    "@oxc-parser/binding-linux-riscv64-gnu": "npm:0.153.0"
-    "@oxc-parser/binding-linux-riscv64-musl": "npm:0.153.0"
-    "@oxc-parser/binding-linux-s390x-gnu": "npm:0.153.0"
-    "@oxc-parser/binding-linux-x64-gnu": "npm:0.153.0"
-    "@oxc-parser/binding-linux-x64-musl": "npm:0.153.0"
-    "@oxc-parser/binding-openharmony-arm64": "npm:0.153.0"
-    "@oxc-parser/binding-win32-arm64-msvc": "npm:0.153.0"
-    "@oxc-parser/binding-win32-ia32-msvc": "npm:0.153.0"
-    "@oxc-parser/binding-win32-x64-msvc": "npm:0.153.0"
-    "@oxc-project/types": "npm:^0.153.0"
-  dependenciesMeta:
-    "@oxc-parser/binding-android-arm-eabi":
-      optional: true
-    "@oxc-parser/binding-android-arm64":
-      optional: true
-    "@oxc-parser/binding-darwin-arm64":
-      optional: true
-    "@oxc-parser/binding-darwin-x64":
-      optional: true
-    "@oxc-parser/binding-freebsd-x64":
-      optional: true
-    "@oxc-parser/binding-linux-arm-gnueabihf":
-      optional: true
-    "@oxc-parser/binding-linux-arm-musleabihf":
-      optional: true
-    "@oxc-parser/binding-linux-arm64-gnu":
-      optional: true
-    "@oxc-parser/binding-linux-arm64-musl":
-      optional: true
-    "@oxc-parser/binding-linux-ppc64-gnu":
-      optional: true
-    "@oxc-parser/binding-linux-riscv64-gnu":
-      optional: true
-    "@oxc-parser/binding-linux-riscv64-musl":
-      optional: true
-    "@oxc-parser/binding-linux-s390x-gnu":
-      optional: true
-    "@oxc-parser/binding-linux-x64-gnu":
-      optional: true
-    "@oxc-parser/binding-linux-x64-musl":
-      optional: true
-    "@oxc-parser/binding-openharmony-arm64":
-      optional: true
-    "@oxc-parser/binding-win32-arm64-msvc":
-      optional: true
-    "@oxc-parser/binding-win32-ia32-msvc":
-      optional: true
-    "@oxc-parser/binding-win32-x64-msvc":
-      optional: true
-  checksum: 10c0/1b5777d7b8fd0d1cce77c7a02750c754a7f8fe2c977caa8b24ee6f50a2f117d984bda795d23d7786784bd94079150b57b84fd8a6c496530568b1935b4b74120c
-  languageName: node
-  linkType: hard
-
 "oxc-parser@npm:^0.121.0":
   version: 0.121.0
   resolution: "oxc-parser@npm:0.121.0"
@@ -28437,6 +28319,73 @@ __metadata:
   languageName: node
   linkType: hard
 
+"oxc-parser@npm:^0.153.0":
+  version: 0.153.0
+  resolution: "oxc-parser@npm:0.153.0"
+  dependencies:
+    "@oxc-parser/binding-android-arm-eabi": "npm:0.153.0"
+    "@oxc-parser/binding-android-arm64": "npm:0.153.0"
+    "@oxc-parser/binding-darwin-arm64": "npm:0.153.0"
+    "@oxc-parser/binding-darwin-x64": "npm:0.153.0"
+    "@oxc-parser/binding-freebsd-x64": "npm:0.153.0"
+    "@oxc-parser/binding-linux-arm-gnueabihf": "npm:0.153.0"
+    "@oxc-parser/binding-linux-arm-musleabihf": "npm:0.153.0"
+    "@oxc-parser/binding-linux-arm64-gnu": "npm:0.153.0"
+    "@oxc-parser/binding-linux-arm64-musl": "npm:0.153.0"
+    "@oxc-parser/binding-linux-ppc64-gnu": "npm:0.153.0"
+    "@oxc-parser/binding-linux-riscv64-gnu": "npm:0.153.0"
+    "@oxc-parser/binding-linux-riscv64-musl": "npm:0.153.0"
+    "@oxc-parser/binding-linux-s390x-gnu": "npm:0.153.0"
+    "@oxc-parser/binding-linux-x64-gnu": "npm:0.153.0"
+    "@oxc-parser/binding-linux-x64-musl": "npm:0.153.0"
+    "@oxc-parser/binding-openharmony-arm64": "npm:0.153.0"
+    "@oxc-parser/binding-win32-arm64-msvc": "npm:0.153.0"
+    "@oxc-parser/binding-win32-ia32-msvc": "npm:0.153.0"
+    "@oxc-parser/binding-win32-x64-msvc": "npm:0.153.0"
+    "@oxc-project/types": "npm:^0.153.0"
+  dependenciesMeta:
+    "@oxc-parser/binding-android-arm-eabi":
+      optional: true
+    "@oxc-parser/binding-android-arm64":
+      optional: true
+    "@oxc-parser/binding-darwin-arm64":
+      optional: true
+    "@oxc-parser/binding-darwin-x64":
+      optional: true
+    "@oxc-parser/binding-freebsd-x64":
+      optional: true
+    "@oxc-parser/binding-linux-arm-gnueabihf":
+      optional: true
+    "@oxc-parser/binding-linux-arm-musleabihf":
+      optional: true
+    "@oxc-parser/binding-linux-arm64-gnu":
+      optional: true
+    "@oxc-parser/binding-linux-arm64-musl":
+      optional: true
+    "@oxc-parser/binding-linux-ppc64-gnu":
+      optional: true
+    "@oxc-parser/binding-linux-riscv64-gnu":
+      optional: true
+    "@oxc-parser/binding-linux-riscv64-musl":
+      optional: true
+    "@oxc-parser/binding-linux-s390x-gnu":
+      optional: true
+    "@oxc-parser/binding-linux-x64-gnu":
+      optional: true
+    "@oxc-parser/binding-linux-x64-musl":
+      optional: true
+    "@oxc-parser/binding-openharmony-arm64":
+      optional: true
+    "@oxc-parser/binding-win32-arm64-msvc":
+      optional: true
+    "@oxc-parser/binding-win32-ia32-msvc":
+      optional: true
+    "@oxc-parser/binding-win32-x64-msvc":
+      optional: true
+  checksum: 10c0/1b5777d7b8fd0d1cce77c7a02750c754a7f8fe2c977caa8b24ee6f50a2f117d984bda795d23d7786784bd94079150b57b84fd8a6c496530568b1935b4b74120c
+  languageName: node
+  linkType: hard
+
 "oxc-resolver@npm:11.21.2":
   version: 11.21.2
   resolution: "oxc-resolver@npm:11.21.2"
@@ -33610,7 +33559,6 @@ __metadata:
     "@jridgewell/remapping": "npm:^2.3.5"
     "@jridgewell/sourcemap-codec": "npm:^1.5.5"
     "@ngard/tiny-isequal": "npm:^1.1.0"
-    "@oxc-parser/binding-wasm32-wasi": "npm:0.153.0"
     "@polka/compression": "npm:^1.0.0-next.28"
     "@preact/signals-core": "npm:^1.14.2"
     "@radix-ui/react-scroll-area": "npm:1.2.0-rc.7"
@@ -33702,7 +33650,7 @@ __metadata:
     nanoid: "npm:^4.0.2"
     npmlog: "npm:^7.0.0"
     open: "npm:^10.2.0"
-    oxc-parser: "npm:0.153.0"
+    oxc-parser: "npm:^0.153.0"
     oxc-resolver: "npm:11.21.2"
     p-limit: "npm:^7.2.0"
     package-manager-detector: "npm:^1.1.0"
@@ -33758,9 +33706,6 @@ __metadata:
     "@types/react": ^18.0.0 || ^19.0.0
     prettier: ^2 || ^3
     vite-plus: ^0.1.15 || ^0.2.0 || ^0.3.0
-  dependenciesMeta:
-    "@oxc-parser/binding-wasm32-wasi":
-      optional: true
   peerDependenciesMeta:
     "@types/react":
       optional: true

From 27c7000c15697f13d8f153575db849ff36358881 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 23:00:30 +0200
Subject: [PATCH 224/326] fix(csf-tools): read trees through JSON for the
 process when the raw transfer path fails to load

oxc-parser loads its raw-transfer deserializer with require on the
first raw parse. Under a test that mocks node:fs that require fails
with ENOENT, which the Angular docgen swallowed into "no CSF". Any
failure of the raw path other than a RangeError now disables raw
transfer for the process and the parse retries through JSON.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/ast.ts | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/code/core/src/csf-tools/estree/ast.ts b/code/core/src/csf-tools/estree/ast.ts
index f20267eea939..bec42b3a4a55 100644
--- a/code/core/src/csf-tools/estree/ast.ts
+++ b/code/core/src/csf-tools/estree/ast.ts
@@ -51,8 +51,10 @@ const labelStart = (diagnostic: E.OxcError) => diagnostic.labels?.[0]?.start;
 
 // Raw transfer reads the tree out of the parser's memory instead of through JSON, into a buffer
 // that reserves 6 GiB of virtual address space, of which only the pages written are ever
-// resident. It is unsupported on 32-bit hosts, under the WASM binding and before Node 22.
-const RAW_TRANSFER = rawTransferSupported();
+// resident. It is unsupported on 32-bit hosts, under the WASM binding and before Node 22. The
+// first raw parse also loads the deserializer with `require`; when that fails, for example under
+// a test that mocks `node:fs`, this process reads trees through JSON from then on.
+let rawTransferEnabled = rawTransferSupported();
 
 // The option is missing from the `ParserOptions` type of oxc-parser 0.153.
 type ParseOptions = E.ParserOptions & { experimentalRawTransfer: boolean };
@@ -82,11 +84,14 @@ const parseWith = (
   try {
     result = parseSync(name, code, options);
   } catch (error) {
-    // The raw transfer deserializer recurses, so a tree nested deeper than the call stack allows
-    // comes through JSON, which does not.
-    if (!(rawTransfer && error instanceof RangeError)) {
+    if (!rawTransfer) {
       throw error;
     }
+    // The raw transfer deserializer recurses, so a tree nested deeper than the call stack allows
+    // comes through JSON, which does not. Any other failure of the raw path disables it.
+    if (!(error instanceof RangeError)) {
+      rawTransferEnabled = false;
+    }
     const json: ParseOptions = { ...options, experimentalRawTransfer: false };
     result = parseSync(name, code, json);
   }
@@ -135,7 +140,7 @@ export const parseModule = (
   fileName?: string,
   options: TransferOptions = {}
 ): ParsedModule => {
-  const module = parseWithParentheses(code, fileName, options.rawTransfer ?? RAW_TRANSFER);
+  const module = parseWithParentheses(code, fileName, options.rawTransfer ?? rawTransferEnabled);
   normalize(module.program, undefined);
   return module;
 };
@@ -150,7 +155,7 @@ export const parsePrintable = (code: string, fileName?: string): ParsedModule =>
 const parseWithParentheses = (
   source: string,
   fileName: string | undefined,
-  rawTransfer = RAW_TRANSFER
+  rawTransfer = rawTransferEnabled
 ): ParsedModule => {
   const code = normalizeLineEndings(source);
   const lang = fileName === undefined ? undefined : langFor(fileName);

From c99b8d0a7a3777126d2f4768d24a6e834a74ffc3 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 23:15:18 +0200
Subject: [PATCH 225/326] refactor(csf-tools): keep the raw transfer switch in
 one place

The parse functions read one module-level switch instead of threading
a flag through three calls, and parseModule loses the options argument
that only tests used; tests force a reader with withRawTransfer.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/ast.test.ts | 13 +++---
 code/core/src/csf-tools/estree/ast.ts      | 50 ++++++++--------------
 2 files changed, 26 insertions(+), 37 deletions(-)

diff --git a/code/core/src/csf-tools/estree/ast.test.ts b/code/core/src/csf-tools/estree/ast.test.ts
index e054dc021d06..170173144a36 100644
--- a/code/core/src/csf-tools/estree/ast.test.ts
+++ b/code/core/src/csf-tools/estree/ast.test.ts
@@ -11,6 +11,7 @@ import {
   parsePrintable,
   textOf,
   walk,
+  withRawTransfer,
 } from './ast.ts';
 
 // Raw transfer is only available on 64-bit Node 22+, where both ways of reading the tree run.
@@ -105,7 +106,7 @@ describe('parseModule', () => {
     'normalizes an expression nested deeper than the call stack allows recursion, rawTransfer %s',
     (rawTransfer) => {
       const code = `x = ${Array(20_000).fill('(a)').join(' + ')};`;
-      const { program } = parseModule(code, undefined, { rawTransfer });
+      const { program } = withRawTransfer(rawTransfer, () => parseModule(code));
       expect(program.body).toHaveLength(1);
     }
   );
@@ -121,16 +122,16 @@ describe('parseModule', () => {
         'const r = /a+/gu, b = 10n, n = 0x1f, s = `${b}`;',
         "export default { title: 'A' } satisfies Meta; // end",
       ].join('\n');
-      const raw = parseModule(code, 'a.tsx', { rawTransfer: true });
-      const json = parseModule(code, 'a.tsx', { rawTransfer: false });
+      const raw = withRawTransfer(true, () => parseModule(code, 'a.tsx'));
+      const json = withRawTransfer(false, () => parseModule(code, 'a.tsx'));
       expect(raw).toEqual(json);
     }
   );
 
   it.each(transfers)('reports a parse error at its position with rawTransfer %s', (rawTransfer) => {
-    expect(() => parseModule('const a = 1;\nconst = ;\n', 'a.ts', { rawTransfer })).toThrow(
-      'Unexpected token (2:6) in a.ts'
-    );
+    expect(() =>
+      withRawTransfer(rawTransfer, () => parseModule('const a = 1;\nconst = ;\n', 'a.ts'))
+    ).toThrow('Unexpected token (2:6) in a.ts');
   });
 });
 
diff --git a/code/core/src/csf-tools/estree/ast.ts b/code/core/src/csf-tools/estree/ast.ts
index bec42b3a4a55..f140e0443b35 100644
--- a/code/core/src/csf-tools/estree/ast.ts
+++ b/code/core/src/csf-tools/estree/ast.ts
@@ -59,17 +59,19 @@ let rawTransferEnabled = rawTransferSupported();
 // The option is missing from the `ParserOptions` type of oxc-parser 0.153.
 type ParseOptions = E.ParserOptions & { experimentalRawTransfer: boolean };
 
-/** Whether a parse reads its tree through raw transfer, as it does wherever that is supported. */
-export interface TransferOptions {
-  rawTransfer?: boolean;
-}
+/** Runs `fn` with raw transfer forced on or off; for tests that compare the two tree readers. */
+export const withRawTransfer = <T>(enabled: boolean, fn: () => T): T => {
+  const before = rawTransferEnabled;
+  rawTransferEnabled = enabled;
+  try {
+    return fn();
+  } finally {
+    rawTransferEnabled = before;
+  }
+};
 
-const parseWith = (
-  code: string,
-  fileName: string | undefined,
-  lang: Lang,
-  rawTransfer: boolean
-): ParseAttempt => {
+const parseWith = (code: string, fileName: string | undefined, lang: Lang): ParseAttempt => {
+  const rawTransfer = rawTransferEnabled;
   const name = fileName ?? `file.${lang}`;
   const options: ParseOptions = {
     lang,
@@ -135,12 +137,8 @@ export const restoreLineEndings = (code: string, original: string) => {
  *
  * The tree has no parenthesized nodes: `outerSpan` gives the span of the parentheses around one.
  */
-export const parseModule = (
-  code: string,
-  fileName?: string,
-  options: TransferOptions = {}
-): ParsedModule => {
-  const module = parseWithParentheses(code, fileName, options.rawTransfer ?? rawTransferEnabled);
+export const parseModule = (code: string, fileName?: string): ParsedModule => {
+  const module = parseWithParentheses(code, fileName);
   normalize(module.program, undefined);
   return module;
 };
@@ -152,16 +150,10 @@ export const parsePrintable = (code: string, fileName?: string): ParsedModule =>
   return module;
 };
 
-const parseWithParentheses = (
-  source: string,
-  fileName: string | undefined,
-  rawTransfer = rawTransferEnabled
-): ParsedModule => {
+const parseWithParentheses = (source: string, fileName: string | undefined): ParsedModule => {
   const code = normalizeLineEndings(source);
   const lang = fileName === undefined ? undefined : langFor(fileName);
-  const attempt = lang
-    ? parseWith(code, fileName, lang, rawTransfer)
-    : parseEither(code, fileName, rawTransfer);
+  const attempt = lang ? parseWith(code, fileName, lang) : parseEither(code, fileName);
   if ('module' in attempt) {
     return attempt.module;
   }
@@ -180,16 +172,12 @@ const LEADING_COMMENTS = /^(?:\s*(?:\/\/[^\n]*|\/\*[\s\S]*?\*\/))*/;
 // Flow reads its pragma from any comment in the file's header, including `/** @flow */` docblocks.
 const hasFlowPragma = (code: string) => /@flow\b/.test(LEADING_COMMENTS.exec(code)?.[0] ?? '');
 
-const parseEither = (
-  code: string,
-  fileName: string | undefined,
-  rawTransfer: boolean
-): ParseAttempt => {
-  const tsx = parseWith(code, fileName, 'tsx', rawTransfer);
+const parseEither = (code: string, fileName: string | undefined): ParseAttempt => {
+  const tsx = parseWith(code, fileName, 'tsx');
   if ('module' in tsx) {
     return tsx;
   }
-  const ts = parseWith(code, fileName, 'ts', rawTransfer);
+  const ts = parseWith(code, fileName, 'ts');
   return 'module' in ts || ts.offset > tsx.offset ? ts : tsx;
 };
 

From 3f4a23b92e062bef961890df3c527e3e048afe9e Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 23:38:35 +0200
Subject: [PATCH 226/326] fix(csf-tools): keep raw transfer off for the process
 after any failure but a stack overflow

A failed allocation of the 6 GiB raw transfer buffer is a RangeError too, and
retrying it per call costs full garbage collections on every parse of an
affected host. Only a stack overflow of the deserializer retries per call; any
other failure turns the raw path off for the process. Raw transfer starts off
on Windows until oxc PR #27566 lands, and `withRawTransfer(true, fn)` throws
when a parse in `fn` turned it off, so a test comparing the two readers cannot
pass on JSON alone.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/ast.test.ts | 43 +++++++++++++++++++++-
 code/core/src/csf-tools/estree/ast.ts      | 20 +++++++---
 2 files changed, 56 insertions(+), 7 deletions(-)

diff --git a/code/core/src/csf-tools/estree/ast.test.ts b/code/core/src/csf-tools/estree/ast.test.ts
index 170173144a36..373cd334f020 100644
--- a/code/core/src/csf-tools/estree/ast.test.ts
+++ b/code/core/src/csf-tools/estree/ast.test.ts
@@ -1,6 +1,6 @@
-import { describe, expect, it } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
-import { rawTransferSupported } from 'oxc-parser';
+import { parseSync, rawTransferSupported } from 'oxc-parser';
 
 import {
   type E,
@@ -14,6 +14,8 @@ import {
   withRawTransfer,
 } from './ast.ts';
 
+vi.mock('oxc-parser', { spy: true });
+
 // Raw transfer is only available on 64-bit Node 22+, where both ways of reading the tree run.
 const transfers = rawTransferSupported() ? [true, false] : [false];
 
@@ -135,6 +137,43 @@ describe('parseModule', () => {
   });
 });
 
+describe('raw transfer fallback', () => {
+  afterEach(() => {
+    vi.mocked(parseSync).mockReset();
+  });
+
+  const failRawTransferWith = async (error: Error) => {
+    const actual = await vi.importActual<typeof import('oxc-parser')>('oxc-parser');
+    let attempts = 0;
+    vi.mocked(parseSync).mockImplementation((name, code, options) => {
+      if ((options as { experimentalRawTransfer?: boolean }).experimentalRawTransfer) {
+        attempts++;
+        throw error;
+      }
+      return actual.parseSync(name, code, options);
+    });
+    return () => attempts;
+  };
+
+  const parseFive = () => {
+    for (let index = 0; index < 5; index++) {
+      parseModule(`const a${index} = ${index};`, 'a.ts');
+    }
+  };
+
+  it('turns raw transfer off for the process when its buffer cannot be allocated', async () => {
+    const attempts = await failRawTransferWith(new RangeError('Array buffer allocation failed'));
+    expect(() => withRawTransfer(true, parseFive)).toThrow('Raw transfer was turned off');
+    expect(attempts()).toBe(1);
+  });
+
+  it('keeps raw transfer on when a tree overflows the call stack of its deserializer', async () => {
+    const attempts = await failRawTransferWith(new RangeError('Maximum call stack size exceeded'));
+    withRawTransfer(true, parseFive);
+    expect(attempts()).toBe(5);
+  });
+});
+
 describe('parseExpression', () => {
   it.each(['a) + (b', 'a); (b', 'a)(b'])('rejects %s, which is no single expression', (code) => {
     expect(() => parseExpression(code)).toThrow(`Expected an expression: ${code}`);
diff --git a/code/core/src/csf-tools/estree/ast.ts b/code/core/src/csf-tools/estree/ast.ts
index f140e0443b35..89d2d571383f 100644
--- a/code/core/src/csf-tools/estree/ast.ts
+++ b/code/core/src/csf-tools/estree/ast.ts
@@ -54,17 +54,25 @@ const labelStart = (diagnostic: E.OxcError) => diagnostic.labels?.[0]?.start;
 // resident. It is unsupported on 32-bit hosts, under the WASM binding and before Node 22. The
 // first raw parse also loads the deserializer with `require`; when that fails, for example under
 // a test that mocks `node:fs`, this process reads trees through JSON from then on.
-let rawTransferEnabled = rawTransferSupported();
+// Off on Windows until oxc PR #27566 lands: its 6 GiB reservation fails there (oxc issue #11834).
+let rawTransferEnabled = process.platform !== 'win32' && rawTransferSupported();
 
 // The option is missing from the `ParserOptions` type of oxc-parser 0.153.
 type ParseOptions = E.ParserOptions & { experimentalRawTransfer: boolean };
 
-/** Runs `fn` with raw transfer forced on or off; for tests that compare the two tree readers. */
+/**
+ * Runs `fn` with raw transfer forced on or off; for tests that compare the two tree readers.
+ * Throws when a parse in `fn` turned raw transfer off, so its trees came through JSON after all.
+ */
 export const withRawTransfer = <T>(enabled: boolean, fn: () => T): T => {
   const before = rawTransferEnabled;
   rawTransferEnabled = enabled;
   try {
-    return fn();
+    const result = fn();
+    if (enabled && !rawTransferEnabled) {
+      throw new Error('Raw transfer was turned off during the call, so later parses used JSON');
+    }
+    return result;
   } finally {
     rawTransferEnabled = before;
   }
@@ -90,8 +98,10 @@ const parseWith = (code: string, fileName: string | undefined, lang: Lang): Pars
       throw error;
     }
     // The raw transfer deserializer recurses, so a tree nested deeper than the call stack allows
-    // comes through JSON, which does not. Any other failure of the raw path disables it.
-    if (!(error instanceof RangeError)) {
+    // comes through JSON, which does not. Any other failure, the buffer's allocation included,
+    // turns the raw path off for the process: a failed 6 GiB allocation costs full garbage
+    // collections, which would repeat on every parse.
+    if (!(error instanceof RangeError && /call stack/i.test(error.message))) {
       rawTransferEnabled = false;
     }
     const json: ParseOptions = { ...options, experimentalRawTransfer: false };

From e350121d76b93b1c9a6e9d728dc1643897367d86 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 23:38:35 +0200
Subject: [PATCH 227/326] refactor(csf-tools): record a node's tags in a
 private field instead of symbol properties

An enumerable symbol property travels with a spread copy of a node, so
`set(['b'], { ...get(['a']), value: 5 })` printed the original text instead of
throwing. The tags now live in one private field, stamped through a
constructor that returns the node, which spread, `structuredClone`,
`util.inspect` and deep equality all skip. One field, as each costs per node:
the parse alone for most nodes, a record for the few that also carry an outer
span or a fragment.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/CsfObject.test.ts  | 10 +++
 code/core/src/csf-tools/estree/ast.test.ts | 12 ++++
 code/core/src/csf-tools/estree/ast.ts      | 83 ++++++++++++++++------
 3 files changed, 83 insertions(+), 22 deletions(-)

diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index 6cdd42445c99..a62cd96a9433 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -153,6 +153,16 @@ describe('CsfObject', () => {
     expect(csf.mutationDiagnostics).toEqual([]);
   });
 
+  it('rejects a copy of an expression, whose source it cannot know', () => {
+    const csf = parse(`export default { a: 1 };`);
+    const [meta] = csf.objects({ stories: false });
+
+    expect(() => meta.set(['b'], { ...meta.get(['a'])!, value: 5, raw: '5' })).toThrow(
+      'CsfObject: expressions must come from `get`, `transform` or `parseExpression`, not a Literal node'
+    );
+    expect(printCsf(csf).code).toBe(`export default { a: 1 };`);
+  });
+
   it('wraps a sequence expression unless its own parentheses already enclose it', () => {
     const csf = parse(`export default { b: ((1), 2) };`);
     const [meta] = csf.objects({ stories: false });
diff --git a/code/core/src/csf-tools/estree/ast.test.ts b/code/core/src/csf-tools/estree/ast.test.ts
index 373cd334f020..a3cef30d0ea9 100644
--- a/code/core/src/csf-tools/estree/ast.test.ts
+++ b/code/core/src/csf-tools/estree/ast.test.ts
@@ -1,3 +1,5 @@
+import { inspect } from 'node:util';
+
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import { parseSync, rawTransferSupported } from 'oxc-parser';
@@ -5,6 +7,7 @@ import { parseSync, rawTransferSupported } from 'oxc-parser';
 import {
   type E,
   codeFrame,
+  moduleOf,
   parseExpression,
   outerSpan,
   parseModule,
@@ -135,6 +138,15 @@ describe('parseModule', () => {
       withRawTransfer(rawTransfer, () => parseModule('const a = 1;\nconst = ;\n', 'a.ts'))
     ).toThrow('Unexpected token (2:6) in a.ts');
   });
+
+  it('keeps what it records on a node out of its inspection and equality', () => {
+    const [first] = parsePrintable('a;\nb;', 'a.ts').program.body;
+    const [second] = parsePrintable('a;\nc;', 'a.ts').program.body;
+    expect(moduleOf(first)).not.toBe(moduleOf(second));
+    expect(first).toEqual(second);
+    expect(inspect(first)).toBe(inspect(parseModule('a;\nb;', 'a.ts').program.body[0]));
+    expect(moduleOf({ ...first })).toBeUndefined();
+  });
 });
 
 describe('raw transfer fallback', () => {
diff --git a/code/core/src/csf-tools/estree/ast.ts b/code/core/src/csf-tools/estree/ast.ts
index 89d2d571383f..10e28f3959ec 100644
--- a/code/core/src/csf-tools/estree/ast.ts
+++ b/code/core/src/csf-tools/estree/ast.ts
@@ -380,33 +380,72 @@ export const sourceOf = (code: string, node: Span) => code.slice(node.start, nod
 
 // What a parse records on its nodes: the parse itself, so a node can be printed without its
 // module, the span of the parentheses around a node, and the text of a `parseExpression` fragment.
-// Symbol properties, which `JSON.stringify`, `Object.keys` and `walk` skip; assigning one costs a
-// fraction of a `WeakMap` entry or `Object.defineProperty` per node, a tenth of the index time.
-const MODULE = Symbol('module');
-const OUTER_SPAN = Symbol('outerSpan');
-const FRAGMENT = Symbol('fragment');
-
-interface Tagged {
-  [MODULE]?: ParsedModule;
-  [OUTER_SPAN]?: Span;
-  [FRAGMENT]?: { text: string; placeable: string };
+interface Tags {
+  module: ParsedModule;
+  outerSpan: Span;
+  fragment: { text: string; placeable: string };
 }
 
-const tag = <K extends keyof Tagged>(value: object, key: K, data: Tagged[K]) => {
-  (value as Tagged)[key] = data;
-};
+// The tags of the few nodes that carry more than their parse.
+class Extra implements Partial<Tags> {
+  outerSpan?: Span;
+
+  fragment?: Tags['fragment'];
+
+  constructor(public module: ParsedModule | undefined) {}
+}
+
+// A constructor that returns the object it is given, so a subclass stamps its private fields onto
+// that object.
+class Stamp {
+  constructor(target: object) {
+    return target;
+  }
+}
+
+// The tags of a node live in a private field, which `JSON.stringify`, `walk`, spread,
+// `structuredClone`, `util.inspect` and deep equality all skip, and which a frozen node accepts.
+// One field, as stamping each costs per node, about as much as a symbol property.
+class Tag extends Stamp {
+  #tags?: ParsedModule | Extra;
+
+  static get<K extends keyof Tags>(node: object, key: K): Tags[K] | undefined {
+    if (!(#tags in node)) {
+      return undefined;
+    }
+    const tags = node.#tags;
+    if (tags instanceof Extra) {
+      return tags[key];
+    }
+    return key === 'module' ? (tags as Tags[K] | undefined) : undefined;
+  }
+
+  static set<K extends keyof Tags>(node: object, key: K, value: Tags[K] | undefined) {
+    const tagged = #tags in node ? node : new Tag(node);
+    const tags = tagged.#tags;
+    if (tags instanceof Extra) {
+      tags[key] = value;
+    } else if (key === 'module') {
+      tagged.#tags = value as ParsedModule | undefined;
+    } else {
+      const extra = new Extra(tags);
+      extra[key] = value;
+      tagged.#tags = extra;
+    }
+  }
+}
 
 /** The parse a node of `parsePrintable` or `parseExpression` came from. */
-export const moduleOf = (node: object): ParsedModule | undefined => (node as Tagged)[MODULE];
+export const moduleOf = (node: object): ParsedModule | undefined => Tag.get(node, 'module');
 
 /** Mark `value` as derived from the nodes of `module`, so `moduleOf` finds that parse for it. */
 export const derivedFrom = <T extends object>(value: T, module: ParsedModule): T => {
-  tag(value, MODULE, module);
+  Tag.set(value, 'module', module);
   return value;
 };
 
 /** The span of a node with the parentheses written around it. */
-export const outerSpan = (node: Span): Span => (node as Tagged)[OUTER_SPAN] ?? node;
+export const outerSpan = (node: Span): Span => Tag.get(node, 'outerSpan') ?? node;
 
 const isParenthesized = (node: Node): node is E.ParenthesizedExpression | E.TSParenthesizedType =>
   node.type === 'ParenthesizedExpression' || node.type === 'TSParenthesizedType';
@@ -417,7 +456,7 @@ const withoutParentheses = (node: Node): Node => {
   while (isParenthesized(inner)) {
     inner = inner.type === 'ParenthesizedExpression' ? inner.expression : inner.typeAnnotation;
   }
-  tag(inner, OUTER_SPAN, { start: node.start, end: node.end });
+  Tag.set(inner, 'outerSpan', { start: node.start, end: node.end });
   return inner;
 };
 
@@ -432,7 +471,7 @@ const normalize = (root: Node, module: ParsedModule | undefined) => {
   while (size > 0) {
     const node = stack[--size];
     if (module !== undefined) {
-      tag(node, MODULE, module);
+      Tag.set(node, 'module', module);
     }
     const keys = childKeys.get(node.type);
     if (keys === undefined) {
@@ -473,14 +512,14 @@ const codeOf = (node: Node) => {
  * other node, such as one from `parseModule`.
  */
 export const textOf = (node: Node): string =>
-  (node as Tagged)[FRAGMENT]?.text ?? sourceOf(codeOf(node), node);
+  Tag.get(node, 'fragment')?.text ?? sourceOf(codeOf(node), node);
 
 /**
  * `textOf` for placing a node as a value: a comma expression keeps its parentheses or gets them,
  * and a trailing line comment ends its line.
  */
 export const placeableTextOf = (node: Node): string => {
-  const fragment = (node as Tagged)[FRAGMENT];
+  const fragment = Tag.get(node, 'fragment');
   if (fragment) {
     return fragment.placeable;
   }
@@ -519,10 +558,10 @@ export const parseExpression = (source: string): E.Expression => {
   normalize(program, module);
   const expression = (statement as E.ExpressionStatement).expression;
   // The wrapper's parentheses are not part of the fragment.
-  delete (expression as Tagged)[OUTER_SPAN];
+  Tag.set(expression, 'outerSpan', undefined);
   const comment = comments.at(-1);
   const ended = comment?.type === 'Line' && comment.end === code.length + 1 ? `${code}\n` : code;
-  tag(expression, FRAGMENT, {
+  Tag.set(expression, 'fragment', {
     text: code,
     placeable: expression.type === 'SequenceExpression' && !parenthesized ? `(${ended})` : ended,
   });

From 2b3147b3bac97e1399d86ef18eb008877265fbf1 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 23:39:36 +0200
Subject: [PATCH 228/326] fix(csf-tools): take the comma after a replaced value
 only for a text ending in a line comment

`replaceValue` overwrote through the comma after the value whenever one
followed, so removing the next member in the same batch of edits split an
edited chunk. The comma is only taken when the new text ends in a line
comment, which needs it before the comment; any other text overwrites the
value's span alone. The one-line path of `appendToList` places its items
through `withComma` as well, so `{ a: 1, }` plus `x // c` gives `b: x, // c`
on its own line instead of a comma below the comment.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/editor.test.ts | 48 ++++++++++++++
 code/core/src/csf-tools/estree/editor.ts      | 65 ++++++++++++++-----
 2 files changed, 95 insertions(+), 18 deletions(-)

diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index 5042241c91ff..c5e60d5721af 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -24,8 +24,10 @@ import {
   printMembers,
   reindent,
   removeFromList,
+  removeMembers,
   removeStatement,
   removeStatements,
+  replaceValue,
   setImportSpecifiers,
 } from './editor.ts';
 
@@ -384,6 +386,52 @@ describe('removeFromList', () => {
   );
 });
 
+describe('replaceValue', () => {
+  const firstMember = (editor: SourceEditor) => {
+    const statement = editor.program.body[0] as E.ExportDefaultDeclaration;
+    const object = statement.declaration as E.ObjectExpression;
+    return { object, members: object.properties as E.ObjectProperty[] };
+  };
+
+  it.each([
+    ['one line', `export default { a: 1, b: 2 };`, `export default { a: 9 };`],
+    ['on lines', `export default {\n  a: 1,\n  b: 2,\n};`, `export default {\n  a: 9,\n};`],
+  ])('leaves the comma after the value to a removal of the next member, %s', (_, code, result) => {
+    const replacedFirst = new SourceEditor(code);
+    const first = firstMember(replacedFirst);
+    replaceValue(replacedFirst, first.members[0], '9');
+    removeMembers(replacedFirst, first.object, [first.members[1]]);
+    expect(replacedFirst.toString()).toBe(result);
+
+    const removedFirst = new SourceEditor(code);
+    const second = firstMember(removedFirst);
+    removeMembers(removedFirst, second.object, [second.members[1]]);
+    replaceValue(removedFirst, second.members[0], '9');
+    expect(removedFirst.toString()).toBe(result);
+  });
+
+  it('takes the comma after the value before a line comment that ends the text', () => {
+    const editor = new SourceEditor(`export default { a: 1, b: 2 };`);
+    replaceValue(editor, firstMember(editor).members[0], 'x // c\n');
+    expect(editor.toString()).toBe(`export default { a: x, // c\n b: 2 };`);
+  });
+
+  it('ends a line comment before the member it is appended after on one line', () => {
+    const trailingComma = new SourceEditor(`export default { a: 1, };`);
+    appendToList(trailingComma, objectList(trailingComma, firstMember(trailingComma).object), [
+      'b: x // c\n',
+    ]);
+    expect(trailingComma.toString()).toBe(`export default { a: 1, b: x, // c\n };`);
+
+    const noComma = new SourceEditor(`export default { a: 1 };`);
+    appendToList(noComma, objectList(noComma, firstMember(noComma).object), [
+      'b: x // c\n',
+      'd: 2',
+    ]);
+    expect(noComma.toString()).toBe(`export default { a: 1, b: x, // c\nd: 2 };`);
+  });
+});
+
 describe('removeStatement', () => {
   it('removes the leading comments with the statement', () => {
     const editor = new SourceEditor(dedent`
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 45013e691602..3c2ee731bd4a 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -601,25 +601,33 @@ const parsedLiteralSpans = (text: string): Span[] | undefined => {
 
 const lineBreakAt = (code: string, index: number) => index === code.length || code[index] === '\n';
 
-// `text` with `comma` after it. A text ending in a line comment, which `placeableTextOf` ends with
-// a line break, takes the comma before the comment and keeps the line break, unless the code's own
-// follows where the text goes. A text that does not parse keeps the comma after the line break.
-const withComma = (text: string, comma: string, lineBreakFollows: boolean) => {
+// `text` without the whitespace ending it, and where the line comment that ends it starts, if one
+// does. A text that does not parse keeps its whitespace.
+const trailingLineComment = (text: string): { body: string; at: number | undefined } => {
   const body = text.trimEnd();
   if (body === text) {
-    return `${text}${comma}`;
+    return { body, at: undefined };
   }
   const fragment = parsedFragment(body);
   if (!fragment) {
-    return `${text}${comma}`;
+    return { body: text, at: undefined };
   }
   const comment = fragment.comments.findLast(
     (candidate) => candidate.type === 'Line' && candidate.end === fragment.offset + body.length
   );
-  if (!comment) {
+  return { body, at: comment && comment.start - fragment.offset };
+};
+
+const endsInLineComment = (text: string) => trailingLineComment(text).at !== undefined;
+
+// `text` with `comma` after it. A text ending in a line comment, which `placeableTextOf` ends with
+// a line break, takes the comma before the comment and keeps the line break, unless the code's own
+// follows where the text goes.
+const withComma = (text: string, comma: string, lineBreakFollows: boolean) => {
+  const { body, at } = trailingLineComment(text);
+  if (at === undefined) {
     return `${body}${comma}`;
   }
-  const at = comment.start - fragment.offset;
   return `${body.slice(0, at).trimEnd()}${comma} ${body.slice(at)}${lineBreakFollows ? '' : '\n'}`;
 };
 
@@ -719,10 +727,27 @@ export const memberText = (
   member: E.ObjectPropertyKind
 ) => itemText(editor, objectList(editor, object), member);
 
-// Items joined on the line of a one-line list, their continuation lines indented like it.
-const inline = (editor: SourceEditor, list: List, texts: string[]) => {
+// Items with their commas on the line of a one-line list, their continuation lines indented like
+// it. A line comment ending an item takes the line break where a space would join the next.
+const inline = (
+  editor: SourceEditor,
+  list: List,
+  texts: string[],
+  lastComma: string,
+  lineBreakFollows: boolean
+) => {
   const indent = lineIndent(editor.code, list.open);
-  return texts.map((text) => reindent(text, '', indent)).join(', ');
+  let joined = '';
+  texts.forEach((text, index) => {
+    const isLast = index === texts.length - 1;
+    const item = withComma(
+      reindent(text, '', indent),
+      isLast ? lastComma : ',',
+      isLast && lineBreakFollows
+    );
+    joined += `${joined === '' || joined.endsWith('\n') ? '' : ' '}${item}`;
+  });
+  return joined;
 };
 
 export const appendToList = (editor: SourceEditor, list: List, texts: string[]) => {
@@ -780,9 +805,12 @@ export const appendToList = (editor: SourceEditor, list: List, texts: string[])
     return;
   }
   if (comma !== undefined) {
-    edits.appendLeft(comma, ` ${inline(editor, list, texts)}${trailingComma}`);
+    edits.appendLeft(
+      comma,
+      ` ${inline(editor, list, texts, trailingComma, lineBreakAt(code, comma))}`
+    );
   } else {
-    edits.appendLeft(last.end, `, ${inline(editor, list, texts)}`);
+    edits.appendLeft(last.end, `, ${inline(editor, list, texts, '', lineBreakAt(code, last.end))}`);
   }
 };
 
@@ -809,7 +837,8 @@ export const prependToList = (editor: SourceEditor, list: List, texts: string[])
     edits.appendRight(list.open, `\n${block}`);
     return;
   }
-  edits.appendRight(first.start, `${inline(editor, list, texts)}, `);
+  const items = inline(editor, list, texts, ',', false);
+  edits.appendRight(first.start, items.endsWith('\n') ? items : `${items} `);
 };
 
 /** Remove items with their separators and the comments that lead and trail them from a list. */
@@ -1175,15 +1204,15 @@ export const replaceValue = (editor: SourceEditor, member: Property, text: strin
       methodFromFunction(text, keySource(editor, member)) ??
       `${keySource(editor, member)}: ${text}`;
   }
-  // The comma after the replaced code on its line is written with the text, so it can go before a
-  // line comment that ends the text.
+  // A text ending in a line comment is written with the comma after the replaced code on its
+  // line, so the comma can go before the comment. Any other text leaves the comma to other edits.
   const { comments, end } = triviaAfter(editor, span.end, SPACE_ON_LINE);
   const comma = comments.length === 0 && code[end] === ',' ? end + 1 : undefined;
-  const to = comma ?? span.end;
+  const to = comma !== undefined && endsInLineComment(replacement) ? comma : span.end;
   editor.edits.overwrite(
     span.start,
     to,
-    withComma(replacement, comma ? ',' : '', lineBreakAt(code, to))
+    withComma(replacement, to === comma ? ',' : '', lineBreakAt(code, to))
   );
 };
 

From 5cbf37b6746004b483e81f8f2944bf40a0b4dc35 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 23:39:36 +0200
Subject: [PATCH 229/326] fix(csf-tools): remember the last statement inserted
 after a statement, not the last appended

`appendStatement` decided on a blank line from the text it appended last, so
an `insertAfterImports` between two appends went unseen and the second append
set itself apart from a one-line statement. `insertStatementAfter`, the one
place text lands after a statement, records what it inserted instead.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/editor.test.ts | 10 ++++++++++
 code/core/src/csf-tools/estree/editor.ts      | 11 ++++++-----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index c5e60d5721af..ad389131d945 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -680,6 +680,16 @@ describe('appendStatement', () => {
     expect(editor.toString()).toBe(`const a = {\n  b: 1,\n};\n\nconst c = 3;\nconst d = 4;\n`);
   });
 
+  it('sets a statement apart from the one inserted after the imports before it, not from an earlier append', () => {
+    const editor = new SourceEditor(`import a from 'a';\n`);
+    appendStatement(editor, `const x = {\n  y: 1,\n};`);
+    insertAfterImports(editor, `const b = 1;`);
+    appendStatement(editor, `const c = 2;`);
+    expect(editor.toString()).toBe(
+      `import a from 'a';\n\nconst x = {\n  y: 1,\n};\nconst b = 1;\nconst c = 2;\n`
+    );
+  });
+
   it('appends to the end of a file whose statements are all removed', () => {
     const editor = new SourceEditor(`const a = 1;\nconst b = 2;\n`);
     removeStatements(editor, new Set(editor.program.body));
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 3c2ee731bd4a..75821ec351e6 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -1010,6 +1010,7 @@ const CONTINUES_STATEMENT = /^[([`+\-/]/;
  */
 export const insertStatementAfter = (editor: SourceEditor, statement: Span, text: string) => {
   const { code, edits } = editor;
+  lastInserted.set(edits, { after: statement, text });
   const end = statementEnd(editor, statement);
   const next = end + /^[^\S\n]*/.exec(code.slice(end))![0].length;
   const separator = code[statement.end - 1] !== ';' && CONTINUES_STATEMENT.test(text) ? ';' : '';
@@ -1070,8 +1071,8 @@ const isRemoved = (editor: SourceEditor, span: Span) => {
   }
 };
 
-// The text `appendStatement` added last to a batch of edits, with the statement it follows.
-const lastAppended = new WeakMap<SourceEdits, { after: Span; text: string }>();
+// The text `insertStatementAfter` added last to a batch of edits, with the statement it follows.
+const lastInserted = new WeakMap<SourceEdits, { after: Span; text: string }>();
 
 /**
  * Insert a statement after the last statement that pending edits did not remove. A blank line
@@ -1086,11 +1087,11 @@ export const appendStatement = (editor: SourceEditor, text: string) => {
     editor.edits.append(`${output && !output.endsWith('\n') ? '\n' : ''}${text}\n`);
     return;
   }
-  const previous = lastAppended.get(editor.edits);
-  const before = previous?.after === last ? previous.text : editor.source(last);
+  const previous = lastInserted.get(editor.edits);
+  // The text inserted last may lead with the blank line that set it apart.
+  const before = previous?.after === last ? previous.text.trim() : editor.source(last);
   const multiline = text.includes('\n') || before.includes('\n');
   insertStatementAfter(editor, last, `${multiline ? '\n' : ''}${text}`);
-  lastAppended.set(editor.edits, { after: last, text });
 };
 
 /** The span of a statement with the comments it owns. */

From d6a1a423af50af146d4136191833852800bc8eeb Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 23:39:36 +0200
Subject: [PATCH 230/326] chore(csf-tools): drop an orphaned comment and type
 babelParser explicitly

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/CsfFile.ts     | 2 --
 code/core/src/mocking-utils/extract.ts | 5 +++--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index c4b47cc16d78..ec5849435aec 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -236,8 +236,6 @@ const hasMount = (play: Node | undefined) => {
 
 const MODULE_MOCK_REGEX = /^[.\/#].*\.mock($|\.[^.]*$)/i;
 
-// TS declarations that the scope analysis does not create a binding for.
-
 export interface CsfOptions {
   fileName?: string;
   makeTitle: (userTitle: string) => string;
diff --git a/code/core/src/mocking-utils/extract.ts b/code/core/src/mocking-utils/extract.ts
index d17863c58f0d..ba786de8b51d 100644
--- a/code/core/src/mocking-utils/extract.ts
+++ b/code/core/src/mocking-utils/extract.ts
@@ -8,7 +8,7 @@ import { transformSync } from 'esbuild';
 import { walk } from 'estree-walker';
 import { basename, normalize } from 'pathe';
 
-import { parseModule } from '../csf-tools/estree/ast.ts';
+import { type E, parseModule } from '../csf-tools/estree/ast.ts';
 import { SourceEditor } from '../csf-tools/estree/editor.ts';
 import { resolveMock } from './resolve.ts';
 
@@ -46,7 +46,8 @@ export type LegacyParser = (code: string, ...rest: any[]) => unknown;
  *   now parse the code themselves and ignore it. Parse with `parseModule` from
  *   `storybook/internal/csf-tools` instead. Removed in Storybook 12.
  */
-export const babelParser: LegacyParser = (code, fileName) => parseModule(code, fileName).program;
+export const babelParser = (code: string, fileName?: string): E.Program =>
+  parseModule(code, fileName).program;
 
 const isStringLiteral = (node: any): boolean =>
   node?.type === 'Literal' && typeof node.value === 'string';

From b931454c89adb66ab5fab2cc96821bbf7b669932 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Oct 2026 23:39:36 +0200
Subject: [PATCH 231/326] docs: correct the csf-tools migration notes on
 story-shape renames, pending edits and the WASM binding

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 MIGRATION.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index b587899d25e2..c4e7f8efd943 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1350,7 +1350,7 @@ Storybook no longer bundles Babel or recast to read and write story and config f
 - Code that a migration or `storybook add` inserts follows the file: string quotes and indentation are inferred from it, new imports go after the existing imports in the order they are added, and a statement put first in a file stays below its header comments.
 - The Vitest config that `@storybook/addon-vitest` writes reads the config directory from `import.meta.dirname`.
 - Story files read string-literal keys and ignore computed identifier keys. `export default { 'title': 'X' }` now gives story ids under `X`, where Babel used the automatic title, and `export default { [title]: 'X' }` no longer sets the title.
-- Hosts without a native `oxc-parser` binding, such as StackBlitz WebContainers, must install `@oxc-parser/binding-wasm32-wasi` at the exact version of `oxc-parser` themselves, as the "Cannot find native binding" error does not name it (oxc-parser tries to download it with `pnpm` on WebContainers first).
+- On hosts without a native `oxc-parser` binding, such as StackBlitz WebContainers, `oxc-parser` downloads `@oxc-parser/binding-wasm32-wasi` itself with `pnpm`. Only when that fails, with a "Cannot find native binding" error that does not name the package, install `@oxc-parser/binding-wasm32-wasi` in the project at the exact version of `oxc-parser`.
 
 #### Changes for tooling that imports Storybook's internal entry points
 
@@ -1362,10 +1362,10 @@ Storybook no longer bundles Babel or recast to read and write story and config f
 - `babelParse` is removed; use `parseModule(code, fileName)` from `storybook/internal/csf-tools`, which returns the ESTree `program` and `comments`. `babelParseFile` is removed as well; read CSF with `loadCsf(code, options)` or `readCsf(fileName, options)`.
 - Parsing normalizes line endings to `\n`. Node offsets from `parseModule`, `CsfFile._program` and `ConfigFile._program` index the normalized `code`/`_code`, not the string you passed in; lines and columns are unchanged.
 - `getHeaderComments(statement)` is removed. The editor keeps a file's header comments in place: `prependStatement` inserts below them, also in a file without statements, and `appendStatement` separates a multi-line statement from its neighbour with a blank line.
-- `CsfObject` mutations index the story file again after every edit, where they used to leave the index as it was and return `{ ok: true }`. An edit whose result is valid JavaScript but not valid CSF, for example a meta `tags` that is no longer an array of string literals, returns `{ ok: false, changed: true, diagnostic }` with code `'invalid-csf'`. The edit stays applied, and `csf.meta`, `csf.stories`, `csf.indexInputs`, `csf.getStoryExport()`, `csf.getStoryTests()` and `csf.objects()` throw the indexer's error until a commit indexes the file again; repair such a file through `csf._editor` edits and `csf._editor.commit()`, as `objects()` needs the index. An edit whose result does not parse throws and stays pending, as before. The `ok: false` arm of `CsfMutationResult` now carries `changed: boolean`.
-- `SourceEditor#edits` is a `SourceEdits`: `append`, `appendLeft`, `appendRight`, `overwrite`, `remove`, `slice`, `hasChanged`, `generateMap` and `toString`, addressed by offsets into `code`. `SourceEditor#generateMap()` returns a `GeneratedMap`.
+- `CsfObject` mutations index the story file again after every edit, where they used to leave the index as it was and return `{ ok: true }`. An edit whose result is valid JavaScript but not valid CSF, for example a meta `tags` that is no longer an array of string literals, returns `{ ok: false, changed: true, diagnostic }` with code `'invalid-csf'`. The edit stays applied, and `csf.meta`, `csf.stories`, `csf.indexInputs`, `csf.getStoryExport()`, `csf.getStoryTests()` and `csf.objects()` throw the indexer's error until a commit indexes the file again; repair such a file through `csf._editor` edits and `csf._editor.commit()`, as `objects()` needs the index. An edit whose result does not parse throws, and its edits stay pending in `csf._editor`. The `ok: false` arm of `CsfMutationResult` now carries `changed: boolean`.
+- `SourceEditor#edits`, the pending edits of an `_editor`, is a `SourceEdits`: text edits addressed by offsets into `code`, with `append`, `appendLeft`, `appendRight`, `overwrite`, `remove`, `slice`, `hasChanged`, `generateMap` and `toString`. `SourceEditor#generateMap()` returns a `GeneratedMap`.
 - `getAutomockCode(code, isSpy, fileName)` and `extractMockCalls(options, root, findMockRedirect)` in `storybook/internal/mocking-utils` parse the code themselves and no longer take a parser: drop the parser argument and pass the module's file name to `getAutomockCode`. `rewriteSbMockImportCalls(code, fileName)` requires the file name as well. Until Storybook 12 both functions still accept a parse function in its Storybook 10 position, which is where `getAutomockCode` now takes the file name and before the root of `extractMockCalls`, and ignore it, and `babelParser` is still exported as a deprecated parse function that returns an ESTree program, so builders built against Storybook 10 keep working. `automockModule` is no longer exported.
-- The story-shape helpers no longer take Babel paths: `jsDocTagsForPath` is `jsDocTagsForNode`, `metaObjectPath` is `metaObject`, `RenderFunctionPath` is `RenderFunction`, and `pathForNode` and `returnedExpressionPath` are removed in favor of `returnedExpression` and plain nodes.
+- The story-shape helpers no longer take Babel paths: `jsDocTagsForPath` is `jsDocTagsForNode`, `metaObjectPath` is `metaObject`, `RenderFunctionPath` is `RenderFunction`, and `pathForNode` and `returnedExpressionPath` are removed in favor of `returnedExpression` and plain nodes. `keyOf` is `staticKey`, and `sourceOf` is `oneLineTextOf`: the node's source text with its whitespace collapsed and its comments kept, where `sourceOf` was a concise Babel reprint without comments.
 - The `getAbsolutePath` wrapper helpers in `storybook/internal/common` produce source text instead of Babel nodes. `getAbsolutePathWrapperAsCallExpression(isTs, names)`, which returned the wrapper's function declaration, is replaced by `getAbsolutePathWrapperDeclaration(config, isTs, names)`, which returns the declaration's source, indented like `config`, for `ConfigFile#setBodyDeclaration`. `getAbsolutePathCall(config, value)` returns the source of a call to the config's wrapper. `wrapValueWithGetAbsolutePathWrapper(config, node)` is replaced by `wrapValuesWithGetAbsolutePathWrapper(config, nodes)`, which wraps every node in the array and commits the edits to `config`.
 - `new CsfFile(code, options)` and `new ConfigFile(code, fileName)` take source code instead of a Babel AST.
 - `formatCsf(csf, { sourceMaps, sourceFileName, inputSourceMap })` replaces the Babel generator options; `printCsf` and `printConfig` take no options, and all three print a file whose first line ends in CRLF with CRLF line endings, and any other file with `\n`. A file that mixes line endings is printed with its first line's ending throughout, and a file with lone CR line endings with `\n`.

From f50e90a038d913986b33be1502bab6ccd910631c Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 00:19:41 +0200
Subject: [PATCH 232/326] fix(csf-tools): read a node's extra tags through
 Partial<Tags> and type the copied-expression test

`tsc` could not relate `Extra[K]` to `Tags[K]`, and the spread copy of a literal in the
CsfObject test failed the excess property check against the `CsfValue` union. Vitest's
typecheck did not run over these, so the package check caught them.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/CsfObject.test.ts | 5 +++--
 code/core/src/csf-tools/estree/ast.ts     | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index a62cd96a9433..9d515c05633d 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -2,7 +2,7 @@ import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import { loadCsf, printCsf } from './CsfFile.ts';
 import { loadConfig, printConfig } from './ConfigFile.ts';
-import type { CsfValue } from './CsfObject.ts';
+import type { CsfExpression, CsfValue } from './CsfObject.ts';
 import { parseExpression, placeableTextOf, textOf } from './estree/ast.ts';
 
 const parse = (source: string) =>
@@ -157,7 +157,8 @@ describe('CsfObject', () => {
     const csf = parse(`export default { a: 1 };`);
     const [meta] = csf.objects({ stories: false });
 
-    expect(() => meta.set(['b'], { ...meta.get(['a'])!, value: 5, raw: '5' })).toThrow(
+    const copy = { ...meta.get(['a'])!, value: 5, raw: '5' } as CsfExpression;
+    expect(() => meta.set(['b'], copy)).toThrow(
       'CsfObject: expressions must come from `get`, `transform` or `parseExpression`, not a Literal node'
     );
     expect(printCsf(csf).code).toBe(`export default { a: 1 };`);
diff --git a/code/core/src/csf-tools/estree/ast.ts b/code/core/src/csf-tools/estree/ast.ts
index 10e28f3959ec..da4aa31e2608 100644
--- a/code/core/src/csf-tools/estree/ast.ts
+++ b/code/core/src/csf-tools/estree/ast.ts
@@ -415,7 +415,7 @@ class Tag extends Stamp {
     }
     const tags = node.#tags;
     if (tags instanceof Extra) {
-      return tags[key];
+      return (tags as Partial<Tags>)[key];
     }
     return key === 'module' ? (tags as Tags[K] | undefined) : undefined;
   }

From 24061ea315800e2e98da86498f73b90a117ada76 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 00:19:46 +0200
Subject: [PATCH 233/326] chore(core): upgrade oxc-parser to 0.155.0

The ESTree types are unchanged from 0.153 and the output of every csf-tools workload is
byte-identical over 740 story files and 80 config files, source maps included.

0.155.0 was released on 2026-10-19, inside the 7-day age gate of `.yarnrc.yml`. The three
descriptors in `npmPreapprovedPackages` admit exactly this release, on the product owner's
explicit approval, and can be removed after 2026-10-26.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .yarnrc.yml                           |   7 ++
 code/core/package.json                |   2 +-
 code/core/src/csf-tools/estree/ast.ts |   2 +-
 yarn.lock                             | 174 +++++++++++++-------------
 4 files changed, 96 insertions(+), 89 deletions(-)

diff --git a/.yarnrc.yml b/.yarnrc.yml
index 1eb19328ac81..b61da4106971 100644
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@@ -21,6 +21,13 @@ nodeLinker: node-modules
 
 npmMinimalAgeGate: 10080
 
+# oxc-parser 0.155.0 (released 2026-10-19) was adopted before the age gate above would admit it,
+# with the product owner's explicit approval. Remove these entries after 2026-10-26.
+npmPreapprovedPackages:
+  - "oxc-parser@0.155.0"
+  - "@oxc-project/types@0.155.0"
+  - "@oxc-parser/*@0.155.0"
+
 npmPublishAccess: public
 
 npmRegistryServer: "https://registry.yarnpkg.com"
diff --git a/code/core/package.json b/code/core/package.json
index 8b8d3d4578fb..1beb99c366ef 100644
--- a/code/core/package.json
+++ b/code/core/package.json
@@ -281,7 +281,7 @@
     "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0 || ^0.26.0 || ^0.27.0 || ^0.28.0",
     "jsonc-parser": "^3.3.1",
     "open": "^10.2.0",
-    "oxc-parser": "^0.153.0",
+    "oxc-parser": "^0.155.0",
     "oxc-resolver": "11.21.2",
     "semver": "^7.7.3",
     "use-sync-external-store": "^1.5.0",
diff --git a/code/core/src/csf-tools/estree/ast.ts b/code/core/src/csf-tools/estree/ast.ts
index da4aa31e2608..78795a581320 100644
--- a/code/core/src/csf-tools/estree/ast.ts
+++ b/code/core/src/csf-tools/estree/ast.ts
@@ -57,7 +57,7 @@ const labelStart = (diagnostic: E.OxcError) => diagnostic.labels?.[0]?.start;
 // Off on Windows until oxc PR #27566 lands: its 6 GiB reservation fails there (oxc issue #11834).
 let rawTransferEnabled = process.platform !== 'win32' && rawTransferSupported();
 
-// The option is missing from the `ParserOptions` type of oxc-parser 0.153.
+// The option is missing from the `ParserOptions` type of oxc-parser 0.155.
 type ParseOptions = E.ParserOptions & { experimentalRawTransfer: boolean };
 
 /**
diff --git a/yarn.lock b/yarn.lock
index a18f20a5aced..de1897afd154 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5784,9 +5784,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-android-arm-eabi@npm:0.153.0":
-  version: 0.153.0
-  resolution: "@oxc-parser/binding-android-arm-eabi@npm:0.153.0"
+"@oxc-parser/binding-android-arm-eabi@npm:0.155.0":
+  version: 0.155.0
+  resolution: "@oxc-parser/binding-android-arm-eabi@npm:0.155.0"
   conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
@@ -5805,9 +5805,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-android-arm64@npm:0.153.0":
-  version: 0.153.0
-  resolution: "@oxc-parser/binding-android-arm64@npm:0.153.0"
+"@oxc-parser/binding-android-arm64@npm:0.155.0":
+  version: 0.155.0
+  resolution: "@oxc-parser/binding-android-arm64@npm:0.155.0"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
@@ -5826,9 +5826,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-darwin-arm64@npm:0.153.0":
-  version: 0.153.0
-  resolution: "@oxc-parser/binding-darwin-arm64@npm:0.153.0"
+"@oxc-parser/binding-darwin-arm64@npm:0.155.0":
+  version: 0.155.0
+  resolution: "@oxc-parser/binding-darwin-arm64@npm:0.155.0"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
@@ -5847,9 +5847,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-darwin-x64@npm:0.153.0":
-  version: 0.153.0
-  resolution: "@oxc-parser/binding-darwin-x64@npm:0.153.0"
+"@oxc-parser/binding-darwin-x64@npm:0.155.0":
+  version: 0.155.0
+  resolution: "@oxc-parser/binding-darwin-x64@npm:0.155.0"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
@@ -5868,9 +5868,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-freebsd-x64@npm:0.153.0":
-  version: 0.153.0
-  resolution: "@oxc-parser/binding-freebsd-x64@npm:0.153.0"
+"@oxc-parser/binding-freebsd-x64@npm:0.155.0":
+  version: 0.155.0
+  resolution: "@oxc-parser/binding-freebsd-x64@npm:0.155.0"
   conditions: os=freebsd & cpu=x64
   languageName: node
   linkType: hard
@@ -5889,9 +5889,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-arm-gnueabihf@npm:0.153.0":
-  version: 0.153.0
-  resolution: "@oxc-parser/binding-linux-arm-gnueabihf@npm:0.153.0"
+"@oxc-parser/binding-linux-arm-gnueabihf@npm:0.155.0":
+  version: 0.155.0
+  resolution: "@oxc-parser/binding-linux-arm-gnueabihf@npm:0.155.0"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
@@ -5910,9 +5910,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-arm-musleabihf@npm:0.153.0":
-  version: 0.153.0
-  resolution: "@oxc-parser/binding-linux-arm-musleabihf@npm:0.153.0"
+"@oxc-parser/binding-linux-arm-musleabihf@npm:0.155.0":
+  version: 0.155.0
+  resolution: "@oxc-parser/binding-linux-arm-musleabihf@npm:0.155.0"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
@@ -5931,9 +5931,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-arm64-gnu@npm:0.153.0":
-  version: 0.153.0
-  resolution: "@oxc-parser/binding-linux-arm64-gnu@npm:0.153.0"
+"@oxc-parser/binding-linux-arm64-gnu@npm:0.155.0":
+  version: 0.155.0
+  resolution: "@oxc-parser/binding-linux-arm64-gnu@npm:0.155.0"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
@@ -5952,9 +5952,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-arm64-musl@npm:0.153.0":
-  version: 0.153.0
-  resolution: "@oxc-parser/binding-linux-arm64-musl@npm:0.153.0"
+"@oxc-parser/binding-linux-arm64-musl@npm:0.155.0":
+  version: 0.155.0
+  resolution: "@oxc-parser/binding-linux-arm64-musl@npm:0.155.0"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
@@ -5973,9 +5973,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-ppc64-gnu@npm:0.153.0":
-  version: 0.153.0
-  resolution: "@oxc-parser/binding-linux-ppc64-gnu@npm:0.153.0"
+"@oxc-parser/binding-linux-ppc64-gnu@npm:0.155.0":
+  version: 0.155.0
+  resolution: "@oxc-parser/binding-linux-ppc64-gnu@npm:0.155.0"
   conditions: os=linux & cpu=ppc64 & libc=glibc
   languageName: node
   linkType: hard
@@ -5994,9 +5994,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-riscv64-gnu@npm:0.153.0":
-  version: 0.153.0
-  resolution: "@oxc-parser/binding-linux-riscv64-gnu@npm:0.153.0"
+"@oxc-parser/binding-linux-riscv64-gnu@npm:0.155.0":
+  version: 0.155.0
+  resolution: "@oxc-parser/binding-linux-riscv64-gnu@npm:0.155.0"
   conditions: os=linux & cpu=riscv64 & libc=glibc
   languageName: node
   linkType: hard
@@ -6015,9 +6015,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-riscv64-musl@npm:0.153.0":
-  version: 0.153.0
-  resolution: "@oxc-parser/binding-linux-riscv64-musl@npm:0.153.0"
+"@oxc-parser/binding-linux-riscv64-musl@npm:0.155.0":
+  version: 0.155.0
+  resolution: "@oxc-parser/binding-linux-riscv64-musl@npm:0.155.0"
   conditions: os=linux & cpu=riscv64 & libc=musl
   languageName: node
   linkType: hard
@@ -6036,9 +6036,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-s390x-gnu@npm:0.153.0":
-  version: 0.153.0
-  resolution: "@oxc-parser/binding-linux-s390x-gnu@npm:0.153.0"
+"@oxc-parser/binding-linux-s390x-gnu@npm:0.155.0":
+  version: 0.155.0
+  resolution: "@oxc-parser/binding-linux-s390x-gnu@npm:0.155.0"
   conditions: os=linux & cpu=s390x & libc=glibc
   languageName: node
   linkType: hard
@@ -6057,9 +6057,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-x64-gnu@npm:0.153.0":
-  version: 0.153.0
-  resolution: "@oxc-parser/binding-linux-x64-gnu@npm:0.153.0"
+"@oxc-parser/binding-linux-x64-gnu@npm:0.155.0":
+  version: 0.155.0
+  resolution: "@oxc-parser/binding-linux-x64-gnu@npm:0.155.0"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
@@ -6078,9 +6078,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-x64-musl@npm:0.153.0":
-  version: 0.153.0
-  resolution: "@oxc-parser/binding-linux-x64-musl@npm:0.153.0"
+"@oxc-parser/binding-linux-x64-musl@npm:0.155.0":
+  version: 0.155.0
+  resolution: "@oxc-parser/binding-linux-x64-musl@npm:0.155.0"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
@@ -6099,9 +6099,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-openharmony-arm64@npm:0.153.0":
-  version: 0.153.0
-  resolution: "@oxc-parser/binding-openharmony-arm64@npm:0.153.0"
+"@oxc-parser/binding-openharmony-arm64@npm:0.155.0":
+  version: 0.155.0
+  resolution: "@oxc-parser/binding-openharmony-arm64@npm:0.155.0"
   conditions: os=openharmony & cpu=arm64
   languageName: node
   linkType: hard
@@ -6129,9 +6129,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-win32-arm64-msvc@npm:0.153.0":
-  version: 0.153.0
-  resolution: "@oxc-parser/binding-win32-arm64-msvc@npm:0.153.0"
+"@oxc-parser/binding-win32-arm64-msvc@npm:0.155.0":
+  version: 0.155.0
+  resolution: "@oxc-parser/binding-win32-arm64-msvc@npm:0.155.0"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
@@ -6150,9 +6150,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-win32-ia32-msvc@npm:0.153.0":
-  version: 0.153.0
-  resolution: "@oxc-parser/binding-win32-ia32-msvc@npm:0.153.0"
+"@oxc-parser/binding-win32-ia32-msvc@npm:0.155.0":
+  version: 0.155.0
+  resolution: "@oxc-parser/binding-win32-ia32-msvc@npm:0.155.0"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
@@ -6171,9 +6171,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-win32-x64-msvc@npm:0.153.0":
-  version: 0.153.0
-  resolution: "@oxc-parser/binding-win32-x64-msvc@npm:0.153.0"
+"@oxc-parser/binding-win32-x64-msvc@npm:0.155.0":
+  version: 0.155.0
+  resolution: "@oxc-parser/binding-win32-x64-msvc@npm:0.155.0"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -6220,10 +6220,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-project/types@npm:^0.153.0":
-  version: 0.153.0
-  resolution: "@oxc-project/types@npm:0.153.0"
-  checksum: 10c0/32011227bc4f0e6536c07ef79ce9254e5a453cdbfdb51b6717d0edc06b7d85a9a2a8ca12102de3b71f91a0e78d4facb538d17b28e6a7b6527ffc8901d8cd82c6
+"@oxc-project/types@npm:^0.155.0":
+  version: 0.155.0
+  resolution: "@oxc-project/types@npm:0.155.0"
+  checksum: 10c0/07227fb2c2e03b07453129f2407b49b165eadaa679a34dad68e0b0526420506cea223431807983413f6968053de873c13b05d3978a9a43cabb3999ca97ba2ec5
   languageName: node
   linkType: hard
 
@@ -28319,30 +28319,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"oxc-parser@npm:^0.153.0":
-  version: 0.153.0
-  resolution: "oxc-parser@npm:0.153.0"
-  dependencies:
-    "@oxc-parser/binding-android-arm-eabi": "npm:0.153.0"
-    "@oxc-parser/binding-android-arm64": "npm:0.153.0"
-    "@oxc-parser/binding-darwin-arm64": "npm:0.153.0"
-    "@oxc-parser/binding-darwin-x64": "npm:0.153.0"
-    "@oxc-parser/binding-freebsd-x64": "npm:0.153.0"
-    "@oxc-parser/binding-linux-arm-gnueabihf": "npm:0.153.0"
-    "@oxc-parser/binding-linux-arm-musleabihf": "npm:0.153.0"
-    "@oxc-parser/binding-linux-arm64-gnu": "npm:0.153.0"
-    "@oxc-parser/binding-linux-arm64-musl": "npm:0.153.0"
-    "@oxc-parser/binding-linux-ppc64-gnu": "npm:0.153.0"
-    "@oxc-parser/binding-linux-riscv64-gnu": "npm:0.153.0"
-    "@oxc-parser/binding-linux-riscv64-musl": "npm:0.153.0"
-    "@oxc-parser/binding-linux-s390x-gnu": "npm:0.153.0"
-    "@oxc-parser/binding-linux-x64-gnu": "npm:0.153.0"
-    "@oxc-parser/binding-linux-x64-musl": "npm:0.153.0"
-    "@oxc-parser/binding-openharmony-arm64": "npm:0.153.0"
-    "@oxc-parser/binding-win32-arm64-msvc": "npm:0.153.0"
-    "@oxc-parser/binding-win32-ia32-msvc": "npm:0.153.0"
-    "@oxc-parser/binding-win32-x64-msvc": "npm:0.153.0"
-    "@oxc-project/types": "npm:^0.153.0"
+"oxc-parser@npm:^0.155.0":
+  version: 0.155.0
+  resolution: "oxc-parser@npm:0.155.0"
+  dependencies:
+    "@oxc-parser/binding-android-arm-eabi": "npm:0.155.0"
+    "@oxc-parser/binding-android-arm64": "npm:0.155.0"
+    "@oxc-parser/binding-darwin-arm64": "npm:0.155.0"
+    "@oxc-parser/binding-darwin-x64": "npm:0.155.0"
+    "@oxc-parser/binding-freebsd-x64": "npm:0.155.0"
+    "@oxc-parser/binding-linux-arm-gnueabihf": "npm:0.155.0"
+    "@oxc-parser/binding-linux-arm-musleabihf": "npm:0.155.0"
+    "@oxc-parser/binding-linux-arm64-gnu": "npm:0.155.0"
+    "@oxc-parser/binding-linux-arm64-musl": "npm:0.155.0"
+    "@oxc-parser/binding-linux-ppc64-gnu": "npm:0.155.0"
+    "@oxc-parser/binding-linux-riscv64-gnu": "npm:0.155.0"
+    "@oxc-parser/binding-linux-riscv64-musl": "npm:0.155.0"
+    "@oxc-parser/binding-linux-s390x-gnu": "npm:0.155.0"
+    "@oxc-parser/binding-linux-x64-gnu": "npm:0.155.0"
+    "@oxc-parser/binding-linux-x64-musl": "npm:0.155.0"
+    "@oxc-parser/binding-openharmony-arm64": "npm:0.155.0"
+    "@oxc-parser/binding-win32-arm64-msvc": "npm:0.155.0"
+    "@oxc-parser/binding-win32-ia32-msvc": "npm:0.155.0"
+    "@oxc-parser/binding-win32-x64-msvc": "npm:0.155.0"
+    "@oxc-project/types": "npm:^0.155.0"
   dependenciesMeta:
     "@oxc-parser/binding-android-arm-eabi":
       optional: true
@@ -28382,7 +28382,7 @@ __metadata:
       optional: true
     "@oxc-parser/binding-win32-x64-msvc":
       optional: true
-  checksum: 10c0/1b5777d7b8fd0d1cce77c7a02750c754a7f8fe2c977caa8b24ee6f50a2f117d984bda795d23d7786784bd94079150b57b84fd8a6c496530568b1935b4b74120c
+  checksum: 10c0/8c5896a2072cd5f3b2df4e8f3c558f34f81e978557399a599ec49d76f1822e534d2301933e73f6071447bad1ba87e62e34958cd6f56d5fba53aebff27f2c032a
   languageName: node
   linkType: hard
 
@@ -33650,7 +33650,7 @@ __metadata:
     nanoid: "npm:^4.0.2"
     npmlog: "npm:^7.0.0"
     open: "npm:^10.2.0"
-    oxc-parser: "npm:^0.153.0"
+    oxc-parser: "npm:^0.155.0"
     oxc-resolver: "npm:11.21.2"
     p-limit: "npm:^7.2.0"
     package-manager-detector: "npm:^1.1.0"

From ac7230a8a9c72232ba0b82d5f3dbbaecbc8ae25a Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 00:50:36 +0200
Subject: [PATCH 234/326] fix(csf-tools): remember the text inserted after each
 statement, not only the last one

`appendStatement` sets a statement apart with a blank line when the text before it spans
lines. It read that text from the last insert of the batch, so a multi-line append followed by
an insert after the imports and another append lost the blank line.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/editor.test.ts | 10 ++++++++++
 code/core/src/csf-tools/estree/editor.ts      | 14 +++++++++-----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index ad389131d945..b8683e2029d6 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -690,6 +690,16 @@ describe('appendStatement', () => {
     );
   });
 
+  it('sets a statement apart from a multi-line append, after an insert elsewhere in the batch', () => {
+    const editor = new SourceEditor(`import a from 'a';\nconst q = 1;\n`);
+    appendStatement(editor, `const x = {\n  y: 1,\n};`);
+    insertAfterImports(editor, `const b = 1;`);
+    appendStatement(editor, `const c = 2;`);
+    expect(editor.toString()).toBe(
+      `import a from 'a';\nconst b = 1;\nconst q = 1;\n\nconst x = {\n  y: 1,\n};\n\nconst c = 2;\n`
+    );
+  });
+
   it('appends to the end of a file whose statements are all removed', () => {
     const editor = new SourceEditor(`const a = 1;\nconst b = 2;\n`);
     removeStatements(editor, new Set(editor.program.body));
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 75821ec351e6..7d67c8f5fb43 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -1010,7 +1010,12 @@ const CONTINUES_STATEMENT = /^[([`+\-/]/;
  */
 export const insertStatementAfter = (editor: SourceEditor, statement: Span, text: string) => {
   const { code, edits } = editor;
-  lastInserted.set(edits, { after: statement, text });
+  let inserted = lastInserted.get(edits);
+  if (!inserted) {
+    inserted = new Map();
+    lastInserted.set(edits, inserted);
+  }
+  inserted.set(statement, text);
   const end = statementEnd(editor, statement);
   const next = end + /^[^\S\n]*/.exec(code.slice(end))![0].length;
   const separator = code[statement.end - 1] !== ';' && CONTINUES_STATEMENT.test(text) ? ';' : '';
@@ -1071,8 +1076,8 @@ const isRemoved = (editor: SourceEditor, span: Span) => {
   }
 };
 
-// The text `insertStatementAfter` added last to a batch of edits, with the statement it follows.
-const lastInserted = new WeakMap<SourceEdits, { after: Span; text: string }>();
+// The text `insertStatementAfter` added last after each statement, per batch of edits.
+const lastInserted = new WeakMap<SourceEdits, Map<Span, string>>();
 
 /**
  * Insert a statement after the last statement that pending edits did not remove. A blank line
@@ -1087,9 +1092,8 @@ export const appendStatement = (editor: SourceEditor, text: string) => {
     editor.edits.append(`${output && !output.endsWith('\n') ? '\n' : ''}${text}\n`);
     return;
   }
-  const previous = lastInserted.get(editor.edits);
   // The text inserted last may lead with the blank line that set it apart.
-  const before = previous?.after === last ? previous.text.trim() : editor.source(last);
+  const before = lastInserted.get(editor.edits)?.get(last)?.trim() ?? editor.source(last);
   const multiline = text.includes('\n') || before.includes('\n');
   insertStatementAfter(editor, last, `${multiline ? '\n' : ''}${text}`);
 };

From bb6dedd8e19c238a2d88ba243bb7f040ae8fbecf Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 00:50:39 +0200
Subject: [PATCH 235/326] fix(csf-tools): remove the comma a replaced value
 takes as an edit of its own

A text ending in a line comment takes the comma after the value, so the comment can follow
it. Overwriting value and comma in one edit made a removal of the next member in the same
batch throw, as magic-string cannot split an edited chunk; removing the comma separately
leaves that boundary in place.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/editor.test.ts |  8 ++++++++
 code/core/src/csf-tools/estree/editor.ts      | 18 +++++++++++++-----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index b8683e2029d6..7f09f2f0ea34 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -416,6 +416,14 @@ describe('replaceValue', () => {
     expect(editor.toString()).toBe(`export default { a: x, // c\n b: 2 };`);
   });
 
+  it('leaves the next member removable after a text ending in a line comment took its comma', () => {
+    const editor = new SourceEditor(`export default { a: 1 , b: 2 };`);
+    const { object, members } = firstMember(editor);
+    replaceValue(editor, members[0], 'x // c\n');
+    removeMembers(editor, object, [members[1]]);
+    expect(editor.toString()).toBe(`export default { a: x, // c\n };`);
+  });
+
   it('ends a line comment before the member it is appended after on one line', () => {
     const trailingComma = new SourceEditor(`export default { a: 1, };`);
     appendToList(trailingComma, objectList(trailingComma, firstMember(trailingComma).object), [
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 7d67c8f5fb43..03f14053616b 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -1209,16 +1209,24 @@ export const replaceValue = (editor: SourceEditor, member: Property, text: strin
       methodFromFunction(text, keySource(editor, member)) ??
       `${keySource(editor, member)}: ${text}`;
   }
-  // A text ending in a line comment is written with the comma after the replaced code on its
-  // line, so the comma can go before the comment. Any other text leaves the comma to other edits.
+  // A text ending in a line comment takes the comma after the replaced code on its line before
+  // the comment. The comma is removed as an edit of its own, so a removal of the next member can
+  // still take it. Any other text leaves the comma to other edits.
   const { comments, end } = triviaAfter(editor, span.end, SPACE_ON_LINE);
   const comma = comments.length === 0 && code[end] === ',' ? end + 1 : undefined;
-  const to = comma !== undefined && endsInLineComment(replacement) ? comma : span.end;
+  const takesComma = comma !== undefined && endsInLineComment(replacement);
+  const to = takesComma ? comma : span.end;
   editor.edits.overwrite(
     span.start,
-    to,
-    withComma(replacement, to === comma ? ',' : '', lineBreakAt(code, to))
+    span.end,
+    withComma(replacement, takesComma ? ',' : '', lineBreakAt(code, to))
   );
+  if (takesComma) {
+    if (end > span.end) {
+      editor.edits.remove(span.end, end);
+    }
+    editor.edits.remove(end, comma);
+  }
 };
 
 /** Write `before` and `after` around an expression and the parentheses written around it. */

From d43d7fb18954ffc56e08a19cb62307a52ade9696 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 00:50:42 +0200
Subject: [PATCH 236/326] fix(csf-tools): reject a node of no parse in the
 editor, such as a spread copy

Since tags moved to a private field, a copy of a node carries none, so `assertCurrent` took
it for a current node: a copy of a stale node edited the new text at the old offsets. A node
with a `type` but no parse now throws; plain `{ start, end }` spans are still accepted. The
comments of a printable parse are tagged with it too, as the editor reads their source.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/ast.ts         | 10 +++++++---
 code/core/src/csf-tools/estree/editor.test.ts | 10 ++++++++++
 code/core/src/csf-tools/estree/editor.ts      | 17 ++++++++++++++---
 3 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/code/core/src/csf-tools/estree/ast.ts b/code/core/src/csf-tools/estree/ast.ts
index 78795a581320..a4e13d4aeaf1 100644
--- a/code/core/src/csf-tools/estree/ast.ts
+++ b/code/core/src/csf-tools/estree/ast.ts
@@ -153,10 +153,14 @@ export const parseModule = (code: string, fileName?: string): ParsedModule => {
   return module;
 };
 
-// `parseModule`, but `textOf` can print every node of the tree and `moduleOf` finds its parse.
+// `parseModule`, but `textOf` can print every node of the tree and `moduleOf` finds its parse,
+// also for its comments.
 export const parsePrintable = (code: string, fileName?: string): ParsedModule => {
   const module = parseWithParentheses(code, fileName);
   normalize(module.program, module);
+  for (const comment of module.comments) {
+    Tag.set(comment, 'module', module);
+  }
   return module;
 };
 
@@ -404,8 +408,8 @@ class Stamp {
 }
 
 // The tags of a node live in a private field, which `JSON.stringify`, `walk`, spread,
-// `structuredClone`, `util.inspect` and deep equality all skip, and which a frozen node accepts.
-// One field, as stamping each costs per node, about as much as a symbol property.
+// `structuredClone`, `util.inspect` and deep equality all skip. One field, as stamping each costs
+// per node, about as much as a symbol property.
 class Tag extends Stamp {
   #tags?: ParsedModule | Extra;
 
diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index 7f09f2f0ea34..2d2c312937ca 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -135,6 +135,16 @@ describe('commit', () => {
     expect(() => appendToList(editor, stale, ['b'])).toThrow('Cannot edit a list of another parse');
   });
 
+  it('throws for a copy of a node, which carries no parse', () => {
+    const editor = new SourceEditor('const a = (1 + 2);\nconst b = 3;\n');
+    const copy = { ...editor.program.body[0] };
+    expect(() => removeStatement(editor, copy)).toThrow(
+      'Cannot edit a VariableDeclaration node of no parse'
+    );
+    expect(() => editor.source(copy)).toThrow('a copy, or built by hand');
+    expect(editor.source({ start: 0, end: 5 })).toBe('const');
+  });
+
   it('leaves the editor as it was when the result does not parse', () => {
     const editor = new SourceEditor('const a = 1;\n');
     const [statement] = editor.program.body;
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 03f14053616b..2274c484d7cb 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -162,15 +162,26 @@ export class SourceEditor {
     return sourceOf(this.code, node);
   }
 
-  /** Throw for a node or list of another parse, such as one from before a commit. */
+  /**
+   * Throw for a node or list of another parse, such as one from before a commit, and for a node
+   * of no parse at all, such as a copy, which would pass for a current one otherwise.
+   */
   assertCurrent(value: object) {
     const module = moduleOf(value);
-    if (module && module !== this._module) {
-      const what = 'type' in value ? `${value.type} node` : 'list';
+    if (module === this._module) {
+      return;
+    }
+    const what = 'type' in value ? `${value.type} node` : 'list';
+    if (module) {
       throw new Error(
         `Cannot edit a ${what} of another parse: stale after \`commit()\`, or from \`parseExpression\`/\`get()\`; use \`textOf\` for those`
       );
     }
+    if ('type' in value) {
+      throw new Error(
+        `Cannot edit a ${what} of no parse: a copy, or built by hand; pass a node of the editor's program`
+      );
+    }
   }
 
   /**

From b53d840d1eb8907771c1bc3ec0856a29293f3d6f Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 00:50:44 +0200
Subject: [PATCH 237/326] test(csf-tools): compare tree readers only where raw
 transfer is in use

The tests forced raw transfer on wherever oxc supports it, Windows included, while the parser
keeps it off there; `rawTransferAvailable` is now the one gate for both.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/ast.test.ts | 7 ++++---
 code/core/src/csf-tools/estree/ast.ts      | 7 +++++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/code/core/src/csf-tools/estree/ast.test.ts b/code/core/src/csf-tools/estree/ast.test.ts
index a3cef30d0ea9..0d15321503f2 100644
--- a/code/core/src/csf-tools/estree/ast.test.ts
+++ b/code/core/src/csf-tools/estree/ast.test.ts
@@ -2,7 +2,7 @@ import { inspect } from 'node:util';
 
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
-import { parseSync, rawTransferSupported } from 'oxc-parser';
+import { parseSync } from 'oxc-parser';
 
 import {
   type E,
@@ -12,6 +12,7 @@ import {
   outerSpan,
   parseModule,
   parsePrintable,
+  rawTransferAvailable,
   textOf,
   walk,
   withRawTransfer,
@@ -19,8 +20,8 @@ import {
 
 vi.mock('oxc-parser', { spy: true });
 
-// Raw transfer is only available on 64-bit Node 22+, where both ways of reading the tree run.
-const transfers = rawTransferSupported() ? [true, false] : [false];
+// Where raw transfer is in use, both ways of reading the tree run.
+const transfers = rawTransferAvailable ? [true, false] : [false];
 
 describe('parseModule', () => {
   const flowBody = 'const x: { +readOnly: number } = {};';
diff --git a/code/core/src/csf-tools/estree/ast.ts b/code/core/src/csf-tools/estree/ast.ts
index a4e13d4aeaf1..b2720080a1fc 100644
--- a/code/core/src/csf-tools/estree/ast.ts
+++ b/code/core/src/csf-tools/estree/ast.ts
@@ -54,8 +54,11 @@ const labelStart = (diagnostic: E.OxcError) => diagnostic.labels?.[0]?.start;
 // resident. It is unsupported on 32-bit hosts, under the WASM binding and before Node 22. The
 // first raw parse also loads the deserializer with `require`; when that fails, for example under
 // a test that mocks `node:fs`, this process reads trees through JSON from then on.
-// Off on Windows until oxc PR #27566 lands: its 6 GiB reservation fails there (oxc issue #11834).
-let rawTransferEnabled = process.platform !== 'win32' && rawTransferSupported();
+// Off on Windows until oxc PR #27566 lands: the 6 GiB there is committed memory, not reserved
+// address space, and its allocation fails without that much RAM and pagefile (oxc issue #11834).
+export const rawTransferAvailable = process.platform !== 'win32' && rawTransferSupported();
+
+let rawTransferEnabled = rawTransferAvailable;
 
 // The option is missing from the `ParserOptions` type of oxc-parser 0.155.
 type ParseOptions = E.ParserOptions & { experimentalRawTransfer: boolean };

From 68b66daf1c34884fa916f281963f19e5d164f51d Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 00:50:47 +0200
Subject: [PATCH 238/326] docs(csf-tools): export the SourceEdits and
 GeneratedMap types and correct three migration notes

MIGRATION named both types without them being importable. The WebContainers note described
the pnpm download for every host without a binding, and the `staticKey` and `oneLineTextOf`
notes left out what differs from `keyOf` and `sourceOf`.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 MIGRATION.md                     | 4 ++--
 code/core/src/csf-tools/index.ts | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index c4e7f8efd943..0d425bad6143 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1350,7 +1350,7 @@ Storybook no longer bundles Babel or recast to read and write story and config f
 - Code that a migration or `storybook add` inserts follows the file: string quotes and indentation are inferred from it, new imports go after the existing imports in the order they are added, and a statement put first in a file stays below its header comments.
 - The Vitest config that `@storybook/addon-vitest` writes reads the config directory from `import.meta.dirname`.
 - Story files read string-literal keys and ignore computed identifier keys. `export default { 'title': 'X' }` now gives story ids under `X`, where Babel used the automatic title, and `export default { [title]: 'X' }` no longer sets the title.
-- On hosts without a native `oxc-parser` binding, such as StackBlitz WebContainers, `oxc-parser` downloads `@oxc-parser/binding-wasm32-wasi` itself with `pnpm`. Only when that fails, with a "Cannot find native binding" error that does not name the package, install `@oxc-parser/binding-wasm32-wasi` in the project at the exact version of `oxc-parser`.
+- On StackBlitz WebContainers, which have no native `oxc-parser` binding, `oxc-parser` downloads `@oxc-parser/binding-wasm32-wasi` itself with `pnpm`. On any other host without a native binding, Storybook fails with a "Cannot find native binding" error whose cause names the missing packages; install `@oxc-parser/binding-wasm32-wasi` in the project at the exact version of `oxc-parser`.
 
 #### Changes for tooling that imports Storybook's internal entry points
 
@@ -1365,7 +1365,7 @@ Storybook no longer bundles Babel or recast to read and write story and config f
 - `CsfObject` mutations index the story file again after every edit, where they used to leave the index as it was and return `{ ok: true }`. An edit whose result is valid JavaScript but not valid CSF, for example a meta `tags` that is no longer an array of string literals, returns `{ ok: false, changed: true, diagnostic }` with code `'invalid-csf'`. The edit stays applied, and `csf.meta`, `csf.stories`, `csf.indexInputs`, `csf.getStoryExport()`, `csf.getStoryTests()` and `csf.objects()` throw the indexer's error until a commit indexes the file again; repair such a file through `csf._editor` edits and `csf._editor.commit()`, as `objects()` needs the index. An edit whose result does not parse throws, and its edits stay pending in `csf._editor`. The `ok: false` arm of `CsfMutationResult` now carries `changed: boolean`.
 - `SourceEditor#edits`, the pending edits of an `_editor`, is a `SourceEdits`: text edits addressed by offsets into `code`, with `append`, `appendLeft`, `appendRight`, `overwrite`, `remove`, `slice`, `hasChanged`, `generateMap` and `toString`. `SourceEditor#generateMap()` returns a `GeneratedMap`.
 - `getAutomockCode(code, isSpy, fileName)` and `extractMockCalls(options, root, findMockRedirect)` in `storybook/internal/mocking-utils` parse the code themselves and no longer take a parser: drop the parser argument and pass the module's file name to `getAutomockCode`. `rewriteSbMockImportCalls(code, fileName)` requires the file name as well. Until Storybook 12 both functions still accept a parse function in its Storybook 10 position, which is where `getAutomockCode` now takes the file name and before the root of `extractMockCalls`, and ignore it, and `babelParser` is still exported as a deprecated parse function that returns an ESTree program, so builders built against Storybook 10 keep working. `automockModule` is no longer exported.
-- The story-shape helpers no longer take Babel paths: `jsDocTagsForPath` is `jsDocTagsForNode`, `metaObjectPath` is `metaObject`, `RenderFunctionPath` is `RenderFunction`, and `pathForNode` and `returnedExpressionPath` are removed in favor of `returnedExpression` and plain nodes. `keyOf` is `staticKey`, and `sourceOf` is `oneLineTextOf`: the node's source text with its whitespace collapsed and its comments kept, where `sourceOf` was a concise Babel reprint without comments.
+- The story-shape helpers no longer take Babel paths: `jsDocTagsForPath` is `jsDocTagsForNode`, `metaObjectPath` is `metaObject`, `RenderFunctionPath` is `RenderFunction`, and `pathForNode` and `returnedExpressionPath` are removed in favor of `returnedExpression` and plain nodes. `keyOf` is `staticKey`, which returns `undefined` instead of `null` for a key it cannot read, and reads numeric and template-literal keys as well. `sourceOf` is `oneLineTextOf`: the node's source text with its line breaks collapsed and its comments kept, where `sourceOf` was a concise Babel reprint without comments; it takes nodes of `CsfFile._program`, `ConfigFile._program` or `parseExpression`, not of `parseModule`.
 - The `getAbsolutePath` wrapper helpers in `storybook/internal/common` produce source text instead of Babel nodes. `getAbsolutePathWrapperAsCallExpression(isTs, names)`, which returned the wrapper's function declaration, is replaced by `getAbsolutePathWrapperDeclaration(config, isTs, names)`, which returns the declaration's source, indented like `config`, for `ConfigFile#setBodyDeclaration`. `getAbsolutePathCall(config, value)` returns the source of a call to the config's wrapper. `wrapValueWithGetAbsolutePathWrapper(config, node)` is replaced by `wrapValuesWithGetAbsolutePathWrapper(config, nodes)`, which wraps every node in the array and commits the edits to `config`.
 - `new CsfFile(code, options)` and `new ConfigFile(code, fileName)` take source code instead of a Babel AST.
 - `formatCsf(csf, { sourceMaps, sourceFileName, inputSourceMap })` replaces the Babel generator options; `printCsf` and `printConfig` take no options, and all three print a file whose first line ends in CRLF with CRLF line endings, and any other file with `\n`. A file that mixes line endings is printed with its first line's ending throughout, and a file with lone CR line endings with `\n`.
diff --git a/code/core/src/csf-tools/index.ts b/code/core/src/csf-tools/index.ts
index 33eb501b8ec0..529195f6783f 100644
--- a/code/core/src/csf-tools/index.ts
+++ b/code/core/src/csf-tools/index.ts
@@ -29,7 +29,7 @@ export {
   unwrapExpression,
   walk,
 } from './estree/ast.ts';
-export { SourceEditor } from './estree/editor.ts';
+export { SourceEditor, type GeneratedMap, type SourceEdits } from './estree/editor.ts';
 export { generateUid, type Binding, type ScopeInfo } from './estree/scope.ts';
 export {
   appendStatement,

From 8df8ac0d66d1f35cf1a7bb84cb8e2575f2fe7af8 Mon Sep 17 00:00:00 2001
From: Kyle Gach <kg@chromatic.com>
Date: Mon, 19 Oct 2026 17:54:53 -0600
Subject: [PATCH 239/326] Improve prose

---
 .../frameworks/web-components-vite.mdx        | 66 +++++++++++--------
 1 file changed, 38 insertions(+), 28 deletions(-)

diff --git a/docs/get-started/frameworks/web-components-vite.mdx b/docs/get-started/frameworks/web-components-vite.mdx
index 836a5fedefa6..8406039d1209 100644
--- a/docs/get-started/frameworks/web-components-vite.mdx
+++ b/docs/get-started/frameworks/web-components-vite.mdx
@@ -12,7 +12,11 @@ Storybook for Web components & Vite is a [framework](../../contribute/framework.
 
 To install Storybook in an existing project, run this command in your project's root directory:
 
-<CodeSnippets path="create-command.md" variant="new-users" copyEvent="CreateCommandCopy" />
+<CodeSnippets
+  path="create-command.md"
+  variant="new-users"
+  copyEvent="CreateCommandCopy"
+/>
 
 You can then get started [writing stories](../whats-a-story.mdx), [running tests](../../writing-tests/index.mdx) and [documenting your components](../../writing-docs/index.mdx). For more control over the installation process, refer to the [installation guide](../install.mdx).
 
@@ -21,9 +25,9 @@ You can then get started [writing stories](../whats-a-story.mdx), [running tests
 <GetStartedVersions
   versions={[
     {
-      name: 'Vite',
-      range: '≥ 5',
-      icon: '/images/logos/builders/vite.svg',
+      name: "Vite",
+      range: "≥ 5",
+      icon: "/images/logos/builders/vite.svg",
     },
   ]}
 />
@@ -42,41 +46,43 @@ You will find the output in the configured `outputDir` (default is `storybook-st
 
 ## Configure
 
-Storybook for Web components with Vite works without extra configuration. It reads your elements from your sources, so your JSDoc comments become controls and documentation. The sections below cover how to write stories for an element and the framework options.
+Storybook for Web components with Vite needs no extra configuration. It reads your custom elements from your source code and turns their JSDoc comments into controls and documentation.
 
 ### Writing stories
 
-Set `component` to the element's tag name and import the module that defines it. Storybook reads the element's attributes, properties, events, slots, CSS custom properties, CSS parts and CSS states, and turns them into controls and [automatic documentation](../../writing-docs/autodocs.mdx), with your JSDoc comments as descriptions.
+In your story file, set `component` to the element's tag name and import the module that defines the element. Storybook then finds the element's attributes, properties, events, slots, CSS custom properties, CSS parts, and CSS states. It uses them to create controls and [automatic documentation](../../writing-docs/autodocs.mdx), and it shows your JSDoc comments as descriptions.
 
-Args stories render the element from its args:
+By default, Storybook renders the element from the story's args:
 
 <CodeSnippets path="web-components-story-snippet-args.md" />
 
-Args map to the element by key. Event, slot, part and state keys carry a suffix so they never collide with attributes:
+Each arg key tells Storybook which part of the element to set. Keys for events, slots, CSS parts, and CSS states end in a suffix, so they do not conflict with attribute names:
 
-| Element API         | Arg key                                       | Example                                      | Rendered as                                              |
-| ------------------- | --------------------------------------------- | -------------------------------------------- | -------------------------------------------------------- |
-| Attribute           | the attribute name                            | `heading: 'Hello'`                           | `heading="Hello"`; `true` sets it bare, `false` omits it |
-| Property            | the property name                             | `items: ['a', 'b']`                          | `element.items = ['a', 'b']`                             |
-| Event               | `<name>-event`                                | `'my-change-event': () => {}`                | a listener for `my-change`                               |
-| Slot                | `<name>-slot`, `default-slot` for the default | `'actions-slot': '<button>Confirm</button>'` | children with `slot="actions"`                           |
-| CSS part            | `<name>-part`                                 | `'panel-part': 'color: rebeccapurple;'`      | a `::part(panel)` rule                                   |
-| CSS state           | `<name>-state`                                | `'active-state': 'opacity: 0.5;'`            | a `:state(active)` rule                                  |
-| CSS custom property | `--name`                                      | `'--panel-color': 'teal'`                    | `style="--panel-color: teal"`                            |
+| Element API         | Arg key                                               | Example                                      | Result                                                          |
+| ------------------- | ----------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------- |
+| Attribute           | The attribute name                                    | `heading: 'Hello'`                           | `heading="Hello"`. `true` adds the attribute, `false` omits it. |
+| Property            | The property name                                     | `items: ['a', 'b']`                          | `element.items = ['a', 'b']`                                    |
+| Event               | `<name>-event`                                        | `'my-change-event': () => {}`                | A listener for the `my-change` event                            |
+| Slot                | `<name>-slot`, or `default-slot` for the default slot | `'actions-slot': '<button>Confirm</button>'` | Child content with `slot="actions"`                             |
+| CSS part            | `<name>-part`                                         | `'panel-part': 'color: rebeccapurple;'`      | A `::part(panel)` rule                                          |
+| CSS state           | `<name>-state`                                        | `'active-state': 'opacity: 0.5;'`            | A `:state(active)` rule                                         |
+| CSS custom property | `--<name>`                                            | `'--panel-color': 'teal'`                    | `style="--panel-color: teal"`                                   |
 
-To control the markup yourself, write a `render` function with Lit's `html`:
+To write the markup yourself, add a `render` function that returns a Lit `html` template:
 
 <CodeSnippets path="web-components-story-snippet-template.md" />
 
-To listen to an event, pass a function as the event arg:
+To listen to an event, set its arg to a function:
 
 <CodeSnippets path="web-components-story-snippet-listeners.md" />
 
-Storybook finds the element through the imports of your story file and preview file. If it cannot find or read one, it says so in the Controls table and in `npx storybook tools docs show`; the build still passes. Metas without `component`, such as the template-function `Button`, `Header` and `Page` the starter generates, get no controls from docgen and show the story source in the Code panel.
+Storybook finds your elements by following the imports in your story files and preview file. If it cannot find or read an element, the Controls table shows a message, and so does `npx storybook tools docs show`. The build does not fail.
+
+A story file without `component` gets no automatic controls. The `Button`, `Header`, and `Page` example stories that Storybook adds to a new project work this way: they render through a template function, and the Code panel shows the story's source code.
 
 ### Code snippets
 
-Autodocs and the Code panel show HTML generated from your story. An args story becomes one element with its attributes, slot content and a `<style>` block; the Args story above prints as:
+Autodocs and the Code panel show HTML that Storybook generates from your story. For a story that uses args, the snippet is one element with its attributes and slot content, plus a `<style>` block when needed. For example, the `Args` story above becomes:
 
 ```html
 <style>
@@ -90,17 +96,21 @@ Autodocs and the Code panel show HTML generated from your story. An args story b
 </lit-slots-and-css>
 ```
 
-A `render` story prints its Lit template with the args filled in, and event args add a `<script>` that attaches the listeners. Snippets show the story as you wrote it; changing a control updates the rendered element but not the snippet.
+For a story with a `render` function, the snippet is the Lit template with the arg values filled in. If the story has event args, the snippet also includes a `<script>` that adds the listeners.
 
-When a snippet cannot represent something, such as a Lit directive or a property with no matching attribute, Storybook shows a warning above it instead. Set `parameters.docs.source.code` to write the snippet yourself, or set it to `null` to hide it. See the [Source block](../../api/doc-blocks/doc-block-source.mdx) page for the full API.
+Snippets show the story as you wrote it. When you change a control, the rendered element updates, but the snippet does not.
+
+Some things cannot be shown as HTML, such as a Lit directive or a property that has no matching attribute. In those cases, Storybook shows a warning above the snippet. To write the snippet yourself, set `parameters.docs.source.code`. To hide it, set that parameter to `null`. For all options, see the [Source block](../../api/doc-blocks/doc-block-source.mdx) API.
 
 ### Custom Elements Manifest
 
-You do not need one. If your project already ships a [Custom Elements Manifest](https://github.com/webcomponents/custom-elements-manifest), point Storybook at it and it is used instead of your sources for the elements it declares:
+A [Custom Elements Manifest](https://github.com/webcomponents/custom-elements-manifest) is optional. If your project already has one, you can tell Storybook where to find it. Storybook then reads the elements in the manifest from the manifest instead of from your source code:
 
 <CodeSnippets path="web-components-main-config-custom-elements-manifest.md" />
 
-Storybook also picks up the `customElements` field of your `package.json`. Generate the manifest with the plugin that matches your library, such as `--litelement` for Lit, or decorator-declared attributes are missing from it.
+If you do not set this option, Storybook uses the `customElements` field in your `package.json`, if it exists.
+
+If you generate the manifest with `@custom-elements-manifest/analyzer`, enable the plugin for your library, such as `--litelement` for Lit. Without it, the manifest does not include attributes that you declare with decorators.
 
 ## FAQ
 
@@ -111,7 +121,7 @@ If you register Stencil components with `defineCustomElements()` from the genera
 For Stencil 4.26 and later:
 
 ```ts title="stencil.config.ts"
-import type { Config } from '@stencil/core';
+import type { Config } from "@stencil/core";
 
 export const config: Config = {
   extras: {
@@ -146,9 +156,9 @@ The available options are:
 
 Type: `string | string[]`
 
-Default: the `customElements` field of your `package.json`, else none; elements are generated from sources
+Default: The `customElements` field in your `package.json`. If that field does not exist, Storybook reads all elements from your source code.
 
-Optional. Path or paths to Custom Elements Manifest files, relative to the Storybook config directory. Use it to bring a manifest from the generator of your choice; elements it does not declare are still read from your sources.
+The path to one or more Custom Elements Manifest files, relative to the Storybook configuration directory. Storybook reads the elements in these files from the manifest. It reads all other elements from your source code.
 
 #### `builder`
 

From 649f3dd44ceb5bcaa6b47b5b2cece516243198e8 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 08:16:07 +0200
Subject: [PATCH 240/326] revert(mocking-utils): drop the Storybook 10 parser
 compatibility for older builders

Reverts baf29ea4545 and 890632b5aa9. Kasper and Steve decided that Storybook 11 ships no
compatibility layer for external consumers of removed internals; the frameworks that passed
`babelParser`, such as `storybook-builder-rsbuild` 3.6, get a pull request instead.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 MIGRATION.md                                 |  2 +-
 code/core/src/mocking-utils/automock.test.ts | 14 +-----
 code/core/src/mocking-utils/automock.ts      | 23 +--------
 code/core/src/mocking-utils/extract.test.ts  | 41 ----------------
 code/core/src/mocking-utils/extract.ts       | 49 ++++----------------
 5 files changed, 12 insertions(+), 117 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 0d425bad6143..b2b4d998da0e 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1364,7 +1364,7 @@ Storybook no longer bundles Babel or recast to read and write story and config f
 - `getHeaderComments(statement)` is removed. The editor keeps a file's header comments in place: `prependStatement` inserts below them, also in a file without statements, and `appendStatement` separates a multi-line statement from its neighbour with a blank line.
 - `CsfObject` mutations index the story file again after every edit, where they used to leave the index as it was and return `{ ok: true }`. An edit whose result is valid JavaScript but not valid CSF, for example a meta `tags` that is no longer an array of string literals, returns `{ ok: false, changed: true, diagnostic }` with code `'invalid-csf'`. The edit stays applied, and `csf.meta`, `csf.stories`, `csf.indexInputs`, `csf.getStoryExport()`, `csf.getStoryTests()` and `csf.objects()` throw the indexer's error until a commit indexes the file again; repair such a file through `csf._editor` edits and `csf._editor.commit()`, as `objects()` needs the index. An edit whose result does not parse throws, and its edits stay pending in `csf._editor`. The `ok: false` arm of `CsfMutationResult` now carries `changed: boolean`.
 - `SourceEditor#edits`, the pending edits of an `_editor`, is a `SourceEdits`: text edits addressed by offsets into `code`, with `append`, `appendLeft`, `appendRight`, `overwrite`, `remove`, `slice`, `hasChanged`, `generateMap` and `toString`. `SourceEditor#generateMap()` returns a `GeneratedMap`.
-- `getAutomockCode(code, isSpy, fileName)` and `extractMockCalls(options, root, findMockRedirect)` in `storybook/internal/mocking-utils` parse the code themselves and no longer take a parser: drop the parser argument and pass the module's file name to `getAutomockCode`. `rewriteSbMockImportCalls(code, fileName)` requires the file name as well. Until Storybook 12 both functions still accept a parse function in its Storybook 10 position, which is where `getAutomockCode` now takes the file name and before the root of `extractMockCalls`, and ignore it, and `babelParser` is still exported as a deprecated parse function that returns an ESTree program, so builders built against Storybook 10 keep working. `automockModule` is no longer exported.
+- `getAutomockCode(code, isSpy, fileName)` and `extractMockCalls(options, root, findMockRedirect)` in `storybook/internal/mocking-utils` parse the code themselves and no longer take a parser: drop the parser argument and pass the module's file name to `getAutomockCode`. `rewriteSbMockImportCalls(code, fileName)` requires the file name as well. `babelParser` is no longer exported; builders that passed it, such as `storybook-builder-rsbuild` 3.6, need a release that drops the argument. `automockModule` is no longer exported.
 - The story-shape helpers no longer take Babel paths: `jsDocTagsForPath` is `jsDocTagsForNode`, `metaObjectPath` is `metaObject`, `RenderFunctionPath` is `RenderFunction`, and `pathForNode` and `returnedExpressionPath` are removed in favor of `returnedExpression` and plain nodes. `keyOf` is `staticKey`, which returns `undefined` instead of `null` for a key it cannot read, and reads numeric and template-literal keys as well. `sourceOf` is `oneLineTextOf`: the node's source text with its line breaks collapsed and its comments kept, where `sourceOf` was a concise Babel reprint without comments; it takes nodes of `CsfFile._program`, `ConfigFile._program` or `parseExpression`, not of `parseModule`.
 - The `getAbsolutePath` wrapper helpers in `storybook/internal/common` produce source text instead of Babel nodes. `getAbsolutePathWrapperAsCallExpression(isTs, names)`, which returned the wrapper's function declaration, is replaced by `getAbsolutePathWrapperDeclaration(config, isTs, names)`, which returns the declaration's source, indented like `config`, for `ConfigFile#setBodyDeclaration`. `getAbsolutePathCall(config, value)` returns the source of a call to the config's wrapper. `wrapValueWithGetAbsolutePathWrapper(config, node)` is replaced by `wrapValuesWithGetAbsolutePathWrapper(config, nodes)`, which wraps every node in the array and commits the edits to `config`.
 - `new CsfFile(code, options)` and `new ConfigFile(code, fileName)` take source code instead of a Babel AST.
diff --git a/code/core/src/mocking-utils/automock.test.ts b/code/core/src/mocking-utils/automock.test.ts
index a50c5f0a20d3..dec94109fab7 100644
--- a/code/core/src/mocking-utils/automock.test.ts
+++ b/code/core/src/mocking-utils/automock.test.ts
@@ -1,8 +1,7 @@
 import { describe, expect, it } from 'vitest';
 
-import { parseModule } from '../csf-tools/estree/ast.ts';
 import { getAutomockCode } from './automock.ts';
-import { babelParser } from './extract.ts';
+import { parseModule } from '../csf-tools/estree/ast.ts';
 
 describe('getAutomockCode', () => {
   it('mocks destructured exports, including ones with defaults', () => {
@@ -41,17 +40,6 @@ describe('getAutomockCode', () => {
     expect(() => parseModule(mocked, '/mod.ts')).not.toThrow();
   });
 
-  // storybook-builder-rsbuild 3.6 calls `getAutomockCode(source, isSpy, babelParser)`.
-  it('accepts the parse function Storybook 10 builders pass instead of a file name', () => {
-    const code = 'export const a = 1;\nexport default (x);\n';
-
-    const mocked = getAutomockCode(code, false, babelParser).toString();
-
-    expect(mocked).toBe(getAutomockCode(code, false).toString());
-    expect(mocked).toContain('["a"]: a,');
-    expect(mocked).toContain('const __vitest_default = (x);');
-  });
-
   it('mocks a .ts module with generic arrows under a Vite id with a query', () => {
     const code = 'export const identity = <T>(value: T) => value;';
 
diff --git a/code/core/src/mocking-utils/automock.ts b/code/core/src/mocking-utils/automock.ts
index 1dc3b144baa4..32bd340d7b4f 100644
--- a/code/core/src/mocking-utils/automock.ts
+++ b/code/core/src/mocking-utils/automock.ts
@@ -9,32 +9,11 @@ import MagicString from 'magic-string';
 
 import { outerSpan, parseModule } from '../csf-tools/estree/ast.ts';
 import { type Positioned, getArbitraryModuleIdentifier } from './esmWalker.ts';
-import type { LegacyParser } from './extract.ts';
 
 export const __STORYBOOK_GLOBAL_THIS_ACCESSOR__ = '__vitest_mocker__';
 
 /** Mock the exports of a module. The file name picks the grammar it is parsed with. */
-export function getAutomockCode(
-  originalCode: string,
-  isSpy: boolean,
-  fileName?: string
-): MagicString;
-/**
- * @deprecated Builders built against Storybook 10, such as `storybook-builder-rsbuild` 3.6, pass
- *   `babelParser` here. The function is ignored: the module is parsed without a file name, as it
- *   was then. Pass the module's file name instead. This overload is removed in Storybook 12.
- */
-export function getAutomockCode(
-  originalCode: string,
-  isSpy: boolean,
-  parse: LegacyParser
-): MagicString;
-export function getAutomockCode(
-  originalCode: string,
-  isSpy: boolean,
-  fileNameOrParser?: string | LegacyParser
-) {
-  const fileName = typeof fileNameOrParser === 'function' ? undefined : fileNameOrParser;
+export function getAutomockCode(originalCode: string, isSpy: boolean, fileName?: string) {
   const mocked = automockModule(originalCode, isSpy ? 'autospy' : 'automock', fileName, {
     globalThisAccessor: JSON.stringify(__STORYBOOK_GLOBAL_THIS_ACCESSOR__),
   });
diff --git a/code/core/src/mocking-utils/extract.test.ts b/code/core/src/mocking-utils/extract.test.ts
index eae32bcb9b10..79a3b7918bb5 100644
--- a/code/core/src/mocking-utils/extract.test.ts
+++ b/code/core/src/mocking-utils/extract.test.ts
@@ -40,18 +40,6 @@ vi.mock('storybook/internal/telemetry', () => ({
   telemetry: vi.fn(),
 }));
 
-describe('babelParser', () => {
-  it('parses a module into an ESTree program', () => {
-    const program = extractModule.babelParser('export const a = <T,>(v: T) => v;', '/mod.ts') as {
-      type: string;
-      body: unknown[];
-    };
-
-    expect(program.type).toBe('Program');
-    expect(program.body).toHaveLength(1);
-  });
-});
-
 describe('isModuleDirectory', () => {
   it('returns true for node_modules path', () => {
     expect(extractModule.isModuleDirectory('/foo/node_modules/bar')).toBe(true);
@@ -84,35 +72,6 @@ describe('extractMockCalls', () => {
     findMockRedirect.mockReturnValue(null);
   });
 
-  // storybook-builder-rsbuild 3.6 calls `extractMockCalls(options, babelParser, root, findMockRedirect)`.
-  it.each([
-    ['the deprecated babelParser', extractModule.babelParser],
-    [
-      // Babel's `parse(input, options?)`, as Storybook 10 exported it.
-      "Storybook 10's parse function",
-      (input: string, options?: { sourceType?: 'module' }) => ({ input, options }),
-    ],
-  ])('accepts %s before the root', (_, parser) => {
-    vi.mocked(readFileSync).mockReturnValue("sb.mock('foo', { spy: true });");
-
-    const result = extractModule.extractMockCalls(
-      { previewConfigPath, configDir, coreOptions },
-      parser,
-      root,
-      findMockRedirect
-    );
-
-    expect(result).toEqual([
-      { path: 'foo', absolutePath: '/abs/path', redirectPath: null, spy: true },
-    ]);
-    expect(resolveModule.resolveMock).toHaveBeenCalledWith(
-      'foo',
-      root,
-      previewConfigPath,
-      findMockRedirect
-    );
-  });
-
   it('returns empty array if readFileSync throws', () => {
     vi.mocked(readFileSync).mockImplementation(() => {
       throw new Error('fail');
diff --git a/code/core/src/mocking-utils/extract.ts b/code/core/src/mocking-utils/extract.ts
index ba786de8b51d..2b48efcddbfd 100644
--- a/code/core/src/mocking-utils/extract.ts
+++ b/code/core/src/mocking-utils/extract.ts
@@ -8,7 +8,7 @@ import { transformSync } from 'esbuild';
 import { walk } from 'estree-walker';
 import { basename, normalize } from 'pathe';
 
-import { type E, parseModule } from '../csf-tools/estree/ast.ts';
+import { parseModule } from '../csf-tools/estree/ast.ts';
 import { SourceEditor } from '../csf-tools/estree/editor.ts';
 import { resolveMock } from './resolve.ts';
 
@@ -35,20 +35,6 @@ interface ExtractMockCallsOptions {
   configDir: string;
 }
 
-/**
- * The parse function Storybook 10 builders passed to `getAutomockCode` and `extractMockCalls`:
- * Babel's parser, whose second parameter is its options. Removed in Storybook 12.
- */
-export type LegacyParser = (code: string, ...rest: any[]) => unknown;
-
-/**
- * @deprecated Storybook 10 builders passed this to `getAutomockCode` and `extractMockCalls`, which
- *   now parse the code themselves and ignore it. Parse with `parseModule` from
- *   `storybook/internal/csf-tools` instead. Removed in Storybook 12.
- */
-export const babelParser = (code: string, fileName?: string): E.Program =>
-  parseModule(code, fileName).program;
-
 const isStringLiteral = (node: any): boolean =>
   node?.type === 'Literal' && typeof node.value === 'string';
 
@@ -89,37 +75,20 @@ export function rewriteSbMockImportCalls(code: string, fileName: string) {
   };
 }
 
-type FindMockRedirect = (
-  root: string,
-  absolutePath: string,
-  externalPath: string | null
-) => string | null;
-
-/** Extracts all sb.mock() calls from the preview config file. */
-export function extractMockCalls(
-  options: ExtractMockCallsOptions,
-  root: string,
-  findMockRedirect: FindMockRedirect
-): MockCall[];
 /**
- * @deprecated Builders built against Storybook 10, such as `storybook-builder-rsbuild` 3.6, pass
- *   `babelParser` before `root`. The function is ignored: the preview config is parsed by its file
- *   name. Drop the argument. This overload is removed in Storybook 12.
+ * Extracts all sb.mock() calls from the preview config file.
+ *
+ * @param this PluginContext
  */
 export function extractMockCalls(
   options: ExtractMockCallsOptions,
-  parse: LegacyParser,
   root: string,
-  findMockRedirect: FindMockRedirect
-): MockCall[];
-export function extractMockCalls(
-  options: ExtractMockCallsOptions,
-  ...rest: [string, FindMockRedirect] | [LegacyParser, string, FindMockRedirect]
+  findMockRedirect: (
+    root: string,
+    absolutePath: string,
+    externalPath: string | null
+  ) => string | null
 ): MockCall[] {
-  const [root, findMockRedirect] = (typeof rest[0] === 'function' ? rest.slice(1) : rest) as [
-    string,
-    FindMockRedirect,
-  ];
   try {
     const previewConfigCode = readFileSync(options.previewConfigPath, 'utf-8');
     const { code: jsCode } = transformSync(previewConfigCode, { loader: 'tsx', format: 'esm' });

From 9364ee30fb2192b21f0e6f109da548a0fcc2376b Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 08:54:49 +0200
Subject: [PATCH 241/326] chore(core): use oxc-parser 0.154.0 and drop the
 age-gate exception

0.155.0 is quarantined by the 7-day age gate until 2026-10-26, also in the sandboxes CI
creates and for users with a release-age gate, which the monorepo's exception did not reach.
0.154.0 clears the gate today; its types and output are identical to 0.155.0 for this code,
which can follow after the 26th.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .yarnrc.yml                           |   7 --
 code/core/package.json                |   2 +-
 code/core/src/csf-tools/estree/ast.ts |   2 +-
 yarn.lock                             | 174 +++++++++++++-------------
 4 files changed, 89 insertions(+), 96 deletions(-)

diff --git a/.yarnrc.yml b/.yarnrc.yml
index b61da4106971..1eb19328ac81 100644
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@@ -21,13 +21,6 @@ nodeLinker: node-modules
 
 npmMinimalAgeGate: 10080
 
-# oxc-parser 0.155.0 (released 2026-10-19) was adopted before the age gate above would admit it,
-# with the product owner's explicit approval. Remove these entries after 2026-10-26.
-npmPreapprovedPackages:
-  - "oxc-parser@0.155.0"
-  - "@oxc-project/types@0.155.0"
-  - "@oxc-parser/*@0.155.0"
-
 npmPublishAccess: public
 
 npmRegistryServer: "https://registry.yarnpkg.com"
diff --git a/code/core/package.json b/code/core/package.json
index 1beb99c366ef..7d01e7b6e926 100644
--- a/code/core/package.json
+++ b/code/core/package.json
@@ -281,7 +281,7 @@
     "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0 || ^0.26.0 || ^0.27.0 || ^0.28.0",
     "jsonc-parser": "^3.3.1",
     "open": "^10.2.0",
-    "oxc-parser": "^0.155.0",
+    "oxc-parser": "^0.154.0",
     "oxc-resolver": "11.21.2",
     "semver": "^7.7.3",
     "use-sync-external-store": "^1.5.0",
diff --git a/code/core/src/csf-tools/estree/ast.ts b/code/core/src/csf-tools/estree/ast.ts
index b2720080a1fc..006b06207000 100644
--- a/code/core/src/csf-tools/estree/ast.ts
+++ b/code/core/src/csf-tools/estree/ast.ts
@@ -60,7 +60,7 @@ export const rawTransferAvailable = process.platform !== 'win32' && rawTransferS
 
 let rawTransferEnabled = rawTransferAvailable;
 
-// The option is missing from the `ParserOptions` type of oxc-parser 0.155.
+// The option is missing from the `ParserOptions` type of oxc-parser 0.154.
 type ParseOptions = E.ParserOptions & { experimentalRawTransfer: boolean };
 
 /**
diff --git a/yarn.lock b/yarn.lock
index de1897afd154..4de5d7464fb9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5784,9 +5784,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-android-arm-eabi@npm:0.155.0":
-  version: 0.155.0
-  resolution: "@oxc-parser/binding-android-arm-eabi@npm:0.155.0"
+"@oxc-parser/binding-android-arm-eabi@npm:0.154.0":
+  version: 0.154.0
+  resolution: "@oxc-parser/binding-android-arm-eabi@npm:0.154.0"
   conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
@@ -5805,9 +5805,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-android-arm64@npm:0.155.0":
-  version: 0.155.0
-  resolution: "@oxc-parser/binding-android-arm64@npm:0.155.0"
+"@oxc-parser/binding-android-arm64@npm:0.154.0":
+  version: 0.154.0
+  resolution: "@oxc-parser/binding-android-arm64@npm:0.154.0"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
@@ -5826,9 +5826,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-darwin-arm64@npm:0.155.0":
-  version: 0.155.0
-  resolution: "@oxc-parser/binding-darwin-arm64@npm:0.155.0"
+"@oxc-parser/binding-darwin-arm64@npm:0.154.0":
+  version: 0.154.0
+  resolution: "@oxc-parser/binding-darwin-arm64@npm:0.154.0"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
@@ -5847,9 +5847,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-darwin-x64@npm:0.155.0":
-  version: 0.155.0
-  resolution: "@oxc-parser/binding-darwin-x64@npm:0.155.0"
+"@oxc-parser/binding-darwin-x64@npm:0.154.0":
+  version: 0.154.0
+  resolution: "@oxc-parser/binding-darwin-x64@npm:0.154.0"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
@@ -5868,9 +5868,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-freebsd-x64@npm:0.155.0":
-  version: 0.155.0
-  resolution: "@oxc-parser/binding-freebsd-x64@npm:0.155.0"
+"@oxc-parser/binding-freebsd-x64@npm:0.154.0":
+  version: 0.154.0
+  resolution: "@oxc-parser/binding-freebsd-x64@npm:0.154.0"
   conditions: os=freebsd & cpu=x64
   languageName: node
   linkType: hard
@@ -5889,9 +5889,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-arm-gnueabihf@npm:0.155.0":
-  version: 0.155.0
-  resolution: "@oxc-parser/binding-linux-arm-gnueabihf@npm:0.155.0"
+"@oxc-parser/binding-linux-arm-gnueabihf@npm:0.154.0":
+  version: 0.154.0
+  resolution: "@oxc-parser/binding-linux-arm-gnueabihf@npm:0.154.0"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
@@ -5910,9 +5910,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-arm-musleabihf@npm:0.155.0":
-  version: 0.155.0
-  resolution: "@oxc-parser/binding-linux-arm-musleabihf@npm:0.155.0"
+"@oxc-parser/binding-linux-arm-musleabihf@npm:0.154.0":
+  version: 0.154.0
+  resolution: "@oxc-parser/binding-linux-arm-musleabihf@npm:0.154.0"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
@@ -5931,9 +5931,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-arm64-gnu@npm:0.155.0":
-  version: 0.155.0
-  resolution: "@oxc-parser/binding-linux-arm64-gnu@npm:0.155.0"
+"@oxc-parser/binding-linux-arm64-gnu@npm:0.154.0":
+  version: 0.154.0
+  resolution: "@oxc-parser/binding-linux-arm64-gnu@npm:0.154.0"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
@@ -5952,9 +5952,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-arm64-musl@npm:0.155.0":
-  version: 0.155.0
-  resolution: "@oxc-parser/binding-linux-arm64-musl@npm:0.155.0"
+"@oxc-parser/binding-linux-arm64-musl@npm:0.154.0":
+  version: 0.154.0
+  resolution: "@oxc-parser/binding-linux-arm64-musl@npm:0.154.0"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
@@ -5973,9 +5973,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-ppc64-gnu@npm:0.155.0":
-  version: 0.155.0
-  resolution: "@oxc-parser/binding-linux-ppc64-gnu@npm:0.155.0"
+"@oxc-parser/binding-linux-ppc64-gnu@npm:0.154.0":
+  version: 0.154.0
+  resolution: "@oxc-parser/binding-linux-ppc64-gnu@npm:0.154.0"
   conditions: os=linux & cpu=ppc64 & libc=glibc
   languageName: node
   linkType: hard
@@ -5994,9 +5994,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-riscv64-gnu@npm:0.155.0":
-  version: 0.155.0
-  resolution: "@oxc-parser/binding-linux-riscv64-gnu@npm:0.155.0"
+"@oxc-parser/binding-linux-riscv64-gnu@npm:0.154.0":
+  version: 0.154.0
+  resolution: "@oxc-parser/binding-linux-riscv64-gnu@npm:0.154.0"
   conditions: os=linux & cpu=riscv64 & libc=glibc
   languageName: node
   linkType: hard
@@ -6015,9 +6015,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-riscv64-musl@npm:0.155.0":
-  version: 0.155.0
-  resolution: "@oxc-parser/binding-linux-riscv64-musl@npm:0.155.0"
+"@oxc-parser/binding-linux-riscv64-musl@npm:0.154.0":
+  version: 0.154.0
+  resolution: "@oxc-parser/binding-linux-riscv64-musl@npm:0.154.0"
   conditions: os=linux & cpu=riscv64 & libc=musl
   languageName: node
   linkType: hard
@@ -6036,9 +6036,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-s390x-gnu@npm:0.155.0":
-  version: 0.155.0
-  resolution: "@oxc-parser/binding-linux-s390x-gnu@npm:0.155.0"
+"@oxc-parser/binding-linux-s390x-gnu@npm:0.154.0":
+  version: 0.154.0
+  resolution: "@oxc-parser/binding-linux-s390x-gnu@npm:0.154.0"
   conditions: os=linux & cpu=s390x & libc=glibc
   languageName: node
   linkType: hard
@@ -6057,9 +6057,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-x64-gnu@npm:0.155.0":
-  version: 0.155.0
-  resolution: "@oxc-parser/binding-linux-x64-gnu@npm:0.155.0"
+"@oxc-parser/binding-linux-x64-gnu@npm:0.154.0":
+  version: 0.154.0
+  resolution: "@oxc-parser/binding-linux-x64-gnu@npm:0.154.0"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
@@ -6078,9 +6078,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-linux-x64-musl@npm:0.155.0":
-  version: 0.155.0
-  resolution: "@oxc-parser/binding-linux-x64-musl@npm:0.155.0"
+"@oxc-parser/binding-linux-x64-musl@npm:0.154.0":
+  version: 0.154.0
+  resolution: "@oxc-parser/binding-linux-x64-musl@npm:0.154.0"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
@@ -6099,9 +6099,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-openharmony-arm64@npm:0.155.0":
-  version: 0.155.0
-  resolution: "@oxc-parser/binding-openharmony-arm64@npm:0.155.0"
+"@oxc-parser/binding-openharmony-arm64@npm:0.154.0":
+  version: 0.154.0
+  resolution: "@oxc-parser/binding-openharmony-arm64@npm:0.154.0"
   conditions: os=openharmony & cpu=arm64
   languageName: node
   linkType: hard
@@ -6129,9 +6129,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-win32-arm64-msvc@npm:0.155.0":
-  version: 0.155.0
-  resolution: "@oxc-parser/binding-win32-arm64-msvc@npm:0.155.0"
+"@oxc-parser/binding-win32-arm64-msvc@npm:0.154.0":
+  version: 0.154.0
+  resolution: "@oxc-parser/binding-win32-arm64-msvc@npm:0.154.0"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
@@ -6150,9 +6150,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-win32-ia32-msvc@npm:0.155.0":
-  version: 0.155.0
-  resolution: "@oxc-parser/binding-win32-ia32-msvc@npm:0.155.0"
+"@oxc-parser/binding-win32-ia32-msvc@npm:0.154.0":
+  version: 0.154.0
+  resolution: "@oxc-parser/binding-win32-ia32-msvc@npm:0.154.0"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
@@ -6171,9 +6171,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-parser/binding-win32-x64-msvc@npm:0.155.0":
-  version: 0.155.0
-  resolution: "@oxc-parser/binding-win32-x64-msvc@npm:0.155.0"
+"@oxc-parser/binding-win32-x64-msvc@npm:0.154.0":
+  version: 0.154.0
+  resolution: "@oxc-parser/binding-win32-x64-msvc@npm:0.154.0"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -6220,10 +6220,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-project/types@npm:^0.155.0":
-  version: 0.155.0
-  resolution: "@oxc-project/types@npm:0.155.0"
-  checksum: 10c0/07227fb2c2e03b07453129f2407b49b165eadaa679a34dad68e0b0526420506cea223431807983413f6968053de873c13b05d3978a9a43cabb3999ca97ba2ec5
+"@oxc-project/types@npm:^0.154.0":
+  version: 0.154.0
+  resolution: "@oxc-project/types@npm:0.154.0"
+  checksum: 10c0/fa91599d087ea4d37c5a3b40dd8e2cb431a7d37730116069f2577dee0b104dc5abb06c96b931c517c8b86f618df1e0c7a37d24086f3cfe39d81eb6db59e70add
   languageName: node
   linkType: hard
 
@@ -28319,30 +28319,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"oxc-parser@npm:^0.155.0":
-  version: 0.155.0
-  resolution: "oxc-parser@npm:0.155.0"
-  dependencies:
-    "@oxc-parser/binding-android-arm-eabi": "npm:0.155.0"
-    "@oxc-parser/binding-android-arm64": "npm:0.155.0"
-    "@oxc-parser/binding-darwin-arm64": "npm:0.155.0"
-    "@oxc-parser/binding-darwin-x64": "npm:0.155.0"
-    "@oxc-parser/binding-freebsd-x64": "npm:0.155.0"
-    "@oxc-parser/binding-linux-arm-gnueabihf": "npm:0.155.0"
-    "@oxc-parser/binding-linux-arm-musleabihf": "npm:0.155.0"
-    "@oxc-parser/binding-linux-arm64-gnu": "npm:0.155.0"
-    "@oxc-parser/binding-linux-arm64-musl": "npm:0.155.0"
-    "@oxc-parser/binding-linux-ppc64-gnu": "npm:0.155.0"
-    "@oxc-parser/binding-linux-riscv64-gnu": "npm:0.155.0"
-    "@oxc-parser/binding-linux-riscv64-musl": "npm:0.155.0"
-    "@oxc-parser/binding-linux-s390x-gnu": "npm:0.155.0"
-    "@oxc-parser/binding-linux-x64-gnu": "npm:0.155.0"
-    "@oxc-parser/binding-linux-x64-musl": "npm:0.155.0"
-    "@oxc-parser/binding-openharmony-arm64": "npm:0.155.0"
-    "@oxc-parser/binding-win32-arm64-msvc": "npm:0.155.0"
-    "@oxc-parser/binding-win32-ia32-msvc": "npm:0.155.0"
-    "@oxc-parser/binding-win32-x64-msvc": "npm:0.155.0"
-    "@oxc-project/types": "npm:^0.155.0"
+"oxc-parser@npm:^0.154.0":
+  version: 0.154.0
+  resolution: "oxc-parser@npm:0.154.0"
+  dependencies:
+    "@oxc-parser/binding-android-arm-eabi": "npm:0.154.0"
+    "@oxc-parser/binding-android-arm64": "npm:0.154.0"
+    "@oxc-parser/binding-darwin-arm64": "npm:0.154.0"
+    "@oxc-parser/binding-darwin-x64": "npm:0.154.0"
+    "@oxc-parser/binding-freebsd-x64": "npm:0.154.0"
+    "@oxc-parser/binding-linux-arm-gnueabihf": "npm:0.154.0"
+    "@oxc-parser/binding-linux-arm-musleabihf": "npm:0.154.0"
+    "@oxc-parser/binding-linux-arm64-gnu": "npm:0.154.0"
+    "@oxc-parser/binding-linux-arm64-musl": "npm:0.154.0"
+    "@oxc-parser/binding-linux-ppc64-gnu": "npm:0.154.0"
+    "@oxc-parser/binding-linux-riscv64-gnu": "npm:0.154.0"
+    "@oxc-parser/binding-linux-riscv64-musl": "npm:0.154.0"
+    "@oxc-parser/binding-linux-s390x-gnu": "npm:0.154.0"
+    "@oxc-parser/binding-linux-x64-gnu": "npm:0.154.0"
+    "@oxc-parser/binding-linux-x64-musl": "npm:0.154.0"
+    "@oxc-parser/binding-openharmony-arm64": "npm:0.154.0"
+    "@oxc-parser/binding-win32-arm64-msvc": "npm:0.154.0"
+    "@oxc-parser/binding-win32-ia32-msvc": "npm:0.154.0"
+    "@oxc-parser/binding-win32-x64-msvc": "npm:0.154.0"
+    "@oxc-project/types": "npm:^0.154.0"
   dependenciesMeta:
     "@oxc-parser/binding-android-arm-eabi":
       optional: true
@@ -28382,7 +28382,7 @@ __metadata:
       optional: true
     "@oxc-parser/binding-win32-x64-msvc":
       optional: true
-  checksum: 10c0/8c5896a2072cd5f3b2df4e8f3c558f34f81e978557399a599ec49d76f1822e534d2301933e73f6071447bad1ba87e62e34958cd6f56d5fba53aebff27f2c032a
+  checksum: 10c0/6512e0901618735f5baea0619a021e23ee8e51fedb9c54c1d6807bf2655f9642c3355672b5c0492e3fd7f0dd0de43e98e6e28f4a9d3f2ffbb5e7aaef7ca25564
   languageName: node
   linkType: hard
 
@@ -33650,7 +33650,7 @@ __metadata:
     nanoid: "npm:^4.0.2"
     npmlog: "npm:^7.0.0"
     open: "npm:^10.2.0"
-    oxc-parser: "npm:^0.155.0"
+    oxc-parser: "npm:^0.154.0"
     oxc-resolver: "npm:11.21.2"
     p-limit: "npm:^7.2.0"
     package-manager-detector: "npm:^1.1.0"

From b9119564b34cc393be2b4404bd29617d3a53444b Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Tue, 20 Oct 2026 08:59:08 +0200
Subject: [PATCH 242/326] Update
 code/renderers/react/src/preview-react-alias.ts

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
---
 code/renderers/react/src/preview-react-alias.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/renderers/react/src/preview-react-alias.ts b/code/renderers/react/src/preview-react-alias.ts
index 456fee1d67e8..a4f93d04c458 100644
--- a/code/renderers/react/src/preview-react-alias.ts
+++ b/code/renderers/react/src/preview-react-alias.ts
@@ -1,4 +1,4 @@
-import { isAbsolute } from 'node:path';
+import { isAbsolute } from 'pathe';
 
 export type ReactAliasTarget = {
   react: string;

From 7cf59da4f093f01e523f0e5e225d33b3c130619d Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <sidnioulz@gmail.com>
Date: Tue, 20 Oct 2026 09:19:33 +0200
Subject: [PATCH 243/326] Reserve pnpm flag to create,add,init

---
 .../csf-factories-automigrate-with-config-directory.md        | 4 ++--
 docs/_snippets/csf-factories-automigrate.md                   | 2 +-
 docs/_snippets/storybook-automigrate.md                       | 2 +-
 docs/_snippets/storybook-doctor.md                            | 2 +-
 docs/_snippets/storybook-extract-specific-version.md          | 2 +-
 docs/_snippets/storybook-migrate-csf-2-to-3.md                | 2 +-
 docs/_snippets/storybook-migrate-mdx-to-csf.md                | 2 +-
 docs/_snippets/storybook-remove-command.md                    | 2 +-
 docs/get-started/install.mdx                                  | 2 +-
 9 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/docs/_snippets/csf-factories-automigrate-with-config-directory.md b/docs/_snippets/csf-factories-automigrate-with-config-directory.md
index c20017122b11..bca2ac0e9914 100644
--- a/docs/_snippets/csf-factories-automigrate-with-config-directory.md
+++ b/docs/_snippets/csf-factories-automigrate-with-config-directory.md
@@ -4,8 +4,8 @@ npx storybook automigrate csf-factories -c apps/website/.storybook
 ```
 
 ```shell renderer="common" packageManager="pnpm"
-pnpm --allow-build=esbuild dlx storybook automigrate csf-factories -c apps/admin/.storybook
-pnpm --allow-build=esbuild dlx storybook automigrate csf-factories -c apps/website/.storybook
+pnpm dlx storybook automigrate csf-factories -c apps/admin/.storybook
+pnpm dlx storybook automigrate csf-factories -c apps/website/.storybook
 ```
 
 ```shell renderer="common" packageManager="yarn"
diff --git a/docs/_snippets/csf-factories-automigrate.md b/docs/_snippets/csf-factories-automigrate.md
index 97272a8c748d..d14a1935b93b 100644
--- a/docs/_snippets/csf-factories-automigrate.md
+++ b/docs/_snippets/csf-factories-automigrate.md
@@ -3,7 +3,7 @@ npx storybook automigrate csf-factories
 ```
 
 ```shell renderer="common" packageManager="pnpm"
-pnpm --allow-build=esbuild dlx storybook automigrate csf-factories
+pnpm dlx storybook automigrate csf-factories
 ```
 
 ```shell renderer="common" packageManager="yarn"
diff --git a/docs/_snippets/storybook-automigrate.md b/docs/_snippets/storybook-automigrate.md
index 585c29092480..a3c6a1ef2008 100644
--- a/docs/_snippets/storybook-automigrate.md
+++ b/docs/_snippets/storybook-automigrate.md
@@ -3,7 +3,7 @@ npx storybook@latest automigrate
 ```
 
 ```shell renderer="common" packageManager="pnpm"
-pnpm --allow-build=esbuild dlx storybook@latest automigrate
+pnpm dlx storybook@latest automigrate
 ```
 
 ```shell renderer="common" packageManager="yarn"
diff --git a/docs/_snippets/storybook-doctor.md b/docs/_snippets/storybook-doctor.md
index 45c10213eca4..41aaaf99424e 100644
--- a/docs/_snippets/storybook-doctor.md
+++ b/docs/_snippets/storybook-doctor.md
@@ -3,7 +3,7 @@ npx storybook@latest doctor
 ```
 
 ```shell renderer="common" packageManager="pnpm"
-pnpm --allow-build=esbuild dlx storybook@latest doctor
+pnpm dlx storybook@latest doctor
 ```
 
 ```shell renderer="common" packageManager="yarn"
diff --git a/docs/_snippets/storybook-extract-specific-version.md b/docs/_snippets/storybook-extract-specific-version.md
index 34a5c1c3ec90..1a0fbc3cc26c 100644
--- a/docs/_snippets/storybook-extract-specific-version.md
+++ b/docs/_snippets/storybook-extract-specific-version.md
@@ -3,7 +3,7 @@ npx storybook@7.5.3 extract
 ```
 
 ```shell renderer="common" packageManager="pnpm"
-pnpm --allow-build=esbuild dlx storybook@7.5.3 extract
+pnpm dlx storybook@7.5.3 extract
 ```
 
 ```shell renderer="common" packageManager="yarn"
diff --git a/docs/_snippets/storybook-migrate-csf-2-to-3.md b/docs/_snippets/storybook-migrate-csf-2-to-3.md
index 1bb29d277047..343786022670 100644
--- a/docs/_snippets/storybook-migrate-csf-2-to-3.md
+++ b/docs/_snippets/storybook-migrate-csf-2-to-3.md
@@ -5,7 +5,7 @@ npx storybook@latest migrate csf-2-to-3 --glob="**/*.stories.tsx" --parser=tsx
 
 ```sh renderer="common" packageManager="pnpm"
 # Convert CSF 2 to CSF 3
-pnpm --allow-build=esbuild dlx storybook@latest migrate csf-2-to-3 --glob="**/*.stories.tsx" --parser=tsx
+pnpm dlx storybook@latest migrate csf-2-to-3 --glob="**/*.stories.tsx" --parser=tsx
 ```
 
 ```sh renderer="common" packageManager="yarn"
diff --git a/docs/_snippets/storybook-migrate-mdx-to-csf.md b/docs/_snippets/storybook-migrate-mdx-to-csf.md
index 12cbb32d1a5d..276f09506486 100644
--- a/docs/_snippets/storybook-migrate-mdx-to-csf.md
+++ b/docs/_snippets/storybook-migrate-mdx-to-csf.md
@@ -5,7 +5,7 @@ npx storybook@latest migrate mdx-to-csf --glob "src/**/*.stories.mdx"
 
 ```sh renderer="common" packageManager="pnpm"
 # Convert stories in MDX to CSF
-pnpm --allow-build=esbuild dlx storybook@latest migrate mdx-to-csf --glob "src/**/*.stories.mdx"
+pnpm dlx storybook@latest migrate mdx-to-csf --glob "src/**/*.stories.mdx"
 ```
 
 ```sh renderer="common" packageManager="yarn"
diff --git a/docs/_snippets/storybook-remove-command.md b/docs/_snippets/storybook-remove-command.md
index de6bcd74aa0e..b297ba992348 100644
--- a/docs/_snippets/storybook-remove-command.md
+++ b/docs/_snippets/storybook-remove-command.md
@@ -3,7 +3,7 @@ npx storybook@latest remove @storybook/addon-a11y
 ```
 
 ```shell renderer="common" packageManager="pnpm"
-pnpm --allow-build=esbuild dlx storybook@latest remove @storybook/addon-a11y
+pnpm dlx storybook@latest remove @storybook/addon-a11y
 ```
 
 ```shell renderer="common" packageManager="yarn"
diff --git a/docs/get-started/install.mdx b/docs/get-started/install.mdx
index c7e936f227a6..9d66f4dc892d 100644
--- a/docs/get-started/install.mdx
+++ b/docs/get-started/install.mdx
@@ -169,7 +169,7 @@ The Storybook CLI includes support for the industry's popular package managers (
 
 #### pnpm asks me to approve builds, or reports "Ignored build scripts: esbuild"
 
-pnpm 10 and later block dependency postinstall scripts until you approve them, and Storybook depends on [esbuild](https://esbuild.github.io/), which uses a postinstall script. You can pass `--allow-build=esbuild` to `pnpm create` or `pnpm dlx` to run the Storybook CLI with esbuild pre-approved (available since pnpm 10.2).
+pnpm 10+ blocks dependencies' postinstall scripts until you approve them. Storybook depends on [esbuild](https://esbuild.github.io/), which uses a postinstall script. You can pass `--allow-build=esbuild` to `pnpm create` or `pnpm dlx` to run the Storybook CLI with esbuild pre-approved (available since pnpm 10.2).
 
 The Storybook CLI approves esbuild for your project by recording it under `allowBuilds` in `pnpm-workspace.yaml` (available since pnpm 10.26), so that future installs and updates run without problems. On older pnpm 10 releases, you may need to run `pnpm approve-builds` manually before installing Storybook.
 

From ee6fe5af612e9c2a42e983691965f086b9e71903 Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <sidnioulz@gmail.com>
Date: Tue, 20 Oct 2026 09:20:59 +0200
Subject: [PATCH 244/326] Core: Use pathe in the pnpm catalog test

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../src/common/js-package-manager/PNPMProxy.catalog.test.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/core/src/common/js-package-manager/PNPMProxy.catalog.test.ts b/code/core/src/common/js-package-manager/PNPMProxy.catalog.test.ts
index 5a1fe18be214..f7b1f91dc5c6 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.catalog.test.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.catalog.test.ts
@@ -1,5 +1,5 @@
 import { readFileSync, renameSync, unlinkSync, writeFileSync } from 'node:fs';
-import { join } from 'node:path';
+import { join } from 'pathe';
 
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 

From 25922ce335570c6b564afa267861e30f7ca5c24d Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <sidnioulz@gmail.com>
Date: Tue, 20 Oct 2026 09:29:35 +0200
Subject: [PATCH 245/326] Core: Use pathe in PNPMProxy

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/common/js-package-manager/PNPMProxy.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/core/src/common/js-package-manager/PNPMProxy.ts b/code/core/src/common/js-package-manager/PNPMProxy.ts
index 8ff377a8852e..43c686d4fb44 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.ts
@@ -1,6 +1,6 @@
 import { randomBytes } from 'node:crypto';
 import { existsSync, readFileSync, renameSync, unlinkSync, writeFileSync } from 'node:fs';
-import { dirname, join, resolve } from 'node:path';
+import { dirname, join, resolve } from 'pathe';
 
 import { logger, prompt } from 'storybook/internal/node-logger';
 import {

From 5acea2b4054c82dd8522cc46d29375f6d109aa10 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 09:54:26 +0200
Subject: [PATCH 246/326] fix(csf-tools): let set add a field after a spread or
 computed key

`set` refused any field an object's spread or computed key might also
provide, such as `play` on `{ ...Primary, args: {} }` or `args.label` on
`args: { ...base }`. A missing field is appended after every member, so
the new value overrides whatever those members provide and the edit is
safe. Porting storybook-addon-test-codegen hit this for stories built
from another story.

Lookups now take the access they are for: a `set` of the last field
only refuses a spread or computed key after a field it replaces. Creating
a missing parent through a spread, changing a field a later spread could
override, removing a field and moving to a field a spread could provide
are still refused.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/CsfObject.test.ts | 46 +++++++++++++++++++++++
 code/core/src/csf-tools/CsfObject.ts      | 28 ++++++++++----
 code/core/src/csf-tools/README.md         |  1 +
 3 files changed, 67 insertions(+), 8 deletions(-)

diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index 9d515c05633d..fb44fc7ad33d 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -610,6 +610,52 @@ describe('CsfObject', () => {
     expect(printCsf(csf).code).toBe(source);
   });
 
+  it.each([
+    ['spread', '...Primary'],
+    ['computed key', '[field]: true'],
+  ])('adds a field after an earlier %s, which it then overrides', (_kind, member) => {
+    const csf = parse(`export default {};\nexport const A = { ${member}, args: { ${member} } };`);
+    const [story] = csf.objects({ meta: false });
+
+    expect(story.set(['play'], parseExpression('async () => {}'))).toEqual({
+      ok: true,
+      changed: true,
+    });
+    expect(story.set(['args', 'label'], 'x')).toEqual({ ok: true, changed: true });
+    expect(printCsf(csf).code).toBe(
+      `export default {};\nexport const A = { ${member}, args: { ${member}, label: "x" }, play: async () => {} };`
+    );
+    expect(csf.mutationDiagnostics).toEqual([]);
+  });
+
+  it.each([
+    ['creating a parent a spread could provide', '{ ...Primary }', ['args', 'label']],
+    ['changing a field a later spread could shadow', "{ label: 'a', ...base }", ['label']],
+  ])('rejects %s', (_case, object, path) => {
+    const source = `export default {};\nexport const A = ${object};`;
+    const csf = parse(source);
+    const [story] = csf.objects({ meta: false });
+
+    expect(story.set(path, 'x')).toMatchObject({
+      ok: false,
+      changed: false,
+      diagnostic: { code: 'spread-field' },
+    });
+    expect(printCsf(csf).code).toBe(source);
+  });
+
+  it('rejects moving to a field a spread could provide', () => {
+    const source = `export default {};\nexport const A = { label: 'a', args: { ...base } };`;
+    const csf = parse(source);
+    const [story] = csf.objects({ meta: false });
+
+    expect(story.move(['label'], ['args', 'label'])).toMatchObject({
+      ok: false,
+      diagnostic: { code: 'spread-field' },
+    });
+    expect(printCsf(csf).code).toBe(source);
+  });
+
   it('keeps the original source of nodes reused by a transformed value', () => {
     const csf = parse(`
       export default {
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index 181f8fa3af56..a741c0e3fc33 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -290,10 +290,14 @@ type PropertyLookup =
 
 const unsafePath = (path: readonly string[]) => path.includes('__proto__');
 
+// A `set` appends a missing field after every member, so it overrides what they could provide;
+// a removal could reveal what an earlier member provides.
+type Access = 'read' | 'set' | 'remove';
+
 const lookupProperty = (
   properties: readonly E.ObjectPropertyKind[],
   name: string,
-  removing = false
+  access: Access = 'read'
 ): PropertyLookup => {
   const matches: Property[] = [];
   let unknown: { code: CsfMutationDiagnosticCode; node: Node } | undefined;
@@ -326,7 +330,9 @@ const lookupProperty = (
   // A member whose key is only known at runtime cannot shadow an explicit property declared after
   // it, but it can shadow one declared before it, and with no explicit property at all it leaves
   // both the value and its absence unproven.
-  const unproven = unknownAfterMatch ?? (removing || matches.length === 0 ? unknown : undefined);
+  const unproven =
+    unknownAfterMatch ??
+    (access === 'remove' || (access === 'read' && matches.length === 0) ? unknown : undefined);
   if (unproven) {
     return { ok: false, code: unproven.code, node: unproven.node };
   }
@@ -448,7 +454,7 @@ class CsfObjectEditor implements CsfObject {
     if (!logicalPath || logicalPath.length === 0 || unsafePath(logicalPath)) {
       return this.failure('unsupported-member', path, this.anchor());
     }
-    const inspected = this.inspect(logicalPath);
+    const inspected = this.inspect(logicalPath, 'set');
     if (inspected.ok === false) {
       return this.failure(inspected.code, path, inspected.node);
     }
@@ -504,7 +510,7 @@ class CsfObjectEditor implements CsfObject {
     if (!inspected.property || !inspected.parent) {
       return { ok: true, changed: false };
     }
-    const removal = lookupProperty(inspected.parent.root.properties, logicalPath.at(-1)!, true);
+    const removal = lookupProperty(inspected.parent.root.properties, logicalPath.at(-1)!, 'remove');
     if (!removal.ok) {
       return this.failure(removal.code, path, removal.node);
     }
@@ -554,7 +560,7 @@ class CsfObjectEditor implements CsfObject {
     if (!source.property || !source.parent) {
       return { ok: true, changed: false };
     }
-    const removal = lookupProperty(source.parent.root.properties, sourcePath.at(-1)!, true);
+    const removal = lookupProperty(source.parent.root.properties, sourcePath.at(-1)!, 'remove');
     if (!removal.ok) {
       return this.failure(removal.code, from, removal.node);
     }
@@ -776,7 +782,7 @@ class CsfObjectEditor implements CsfObject {
       if (value?.type !== 'ObjectExpression' || value.properties.length > 0) {
         return;
       }
-      if (!lookupProperty(ancestor.parent.root.properties, path[depth - 1], true).ok) {
+      if (!lookupProperty(ancestor.parent.root.properties, path[depth - 1], 'remove').ok) {
         return;
       }
       ancestor.parent.root.remove([ancestor.property]);
@@ -801,8 +807,10 @@ class CsfObjectEditor implements CsfObject {
     return path.slice(this.prefix.length);
   }
 
+  // `access` applies to the last field of the path; its parents are read.
   private inspect(
-    path: readonly string[]
+    path: readonly string[],
+    access: Access = 'read'
   ):
     | { ok: true; parent?: ParentObject; property?: Property }
     | { ok: false; code: CsfMutationDiagnosticCode; node: Node } {
@@ -810,7 +818,11 @@ class CsfObjectEditor implements CsfObject {
     let property: Property | undefined;
 
     for (const [index, name] of path.entries()) {
-      const lookup = lookupProperty(parent.root.properties, name);
+      const lookup = lookupProperty(
+        parent.root.properties,
+        name,
+        index === path.length - 1 ? access : 'read'
+      );
       if (lookup.ok === false) {
         return lookup;
       }
diff --git a/code/core/src/csf-tools/README.md b/code/core/src/csf-tools/README.md
index 1bd50dc4b1fa..3e6e7d8a2e9f 100644
--- a/code/core/src/csf-tools/README.md
+++ b/code/core/src/csf-tools/README.md
@@ -25,6 +25,7 @@ Annotation editors take the same paths as their story counterparts, so `['parame
 
 Discovery and mutation are conservative: an object or a path whose shape cannot be proven is left untouched, and the reason is reported on `CsfFile.mutationDiagnostics` as a `CsfMutationDiagnostic`.
 Unproven shapes include story or meta bindings that are reassigned or aliased, a CSF factory configuration that is not an object literal owned by that single factory call, dynamically computed annotation names, and target paths shadowed by a spread, a duplicate field, or a computed key.
+`set` can still add a field missing from an object with a spread or a computed key: the field is appended after them, so it overrides any value they provide. It cannot create a missing parent there, nor change a field that a later spread or computed key could override.
 
 `CsfFile.changed` is true once any mutation has been applied, which is the signal for whether the file needs to be written back.
 

From 4bc6b03c45d8e001785aa2ddfa51914270b24a5b Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Tue, 20 Oct 2026 10:01:06 +0200
Subject: [PATCH 247/326] Update
 scripts/ecosystem-ci/disable-npm-minimal-age-gate.ts

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
---
 scripts/ecosystem-ci/disable-npm-minimal-age-gate.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/ecosystem-ci/disable-npm-minimal-age-gate.ts b/scripts/ecosystem-ci/disable-npm-minimal-age-gate.ts
index d5d345468e82..1100f6cf042d 100644
--- a/scripts/ecosystem-ci/disable-npm-minimal-age-gate.ts
+++ b/scripts/ecosystem-ci/disable-npm-minimal-age-gate.ts
@@ -1,5 +1,5 @@
 import { readFile, writeFile } from 'node:fs/promises';
-import { join } from 'node:path';
+import { join } from 'pathe';
 
 const AGE_GATE_KEY = /^[ \t]*npmMinimalAgeGate[ \t]*:/m;
 const AGE_GATE_LINE = /^([ \t]*npmMinimalAgeGate[ \t]*:)[^\r\n]*$/gm;

From 1bd43a7adcff8fee855b1817df030b4be4f3e6b6 Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Tue, 20 Oct 2026 10:16:20 +0200
Subject: [PATCH 248/326] Docs: Add runtime WC manifest API deprecation to
 MIGRATION.md

---
 MIGRATION.md | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/MIGRATION.md b/MIGRATION.md
index 08676d51127a..7763edd741f2 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -60,6 +60,7 @@
   - [Automigrations for Storybook 10 and earlier removed](#automigrations-for-storybook-10-and-earlier-removed)
   - [Web Components: server-side docgen suffixes event, slot and part argType keys](#web-components-server-side-docgen-suffixes-event-slot-and-part-argtype-keys)
   - [Web Components: the default render binds args by key](#web-components-the-default-render-binds-args-by-key)
+  - [Web Components: the runtime Custom Elements Manifest API is deprecated](#web-components-the-runtime-custom-elements-manifest-api-is-deprecated)
   - [SvelteKit: Require v3 and up](#sveltekit-require-v3-and-up)
   - [Svelte CSF is built into the Svelte frameworks](#svelte-csf-is-built-into-the-svelte-frameworks)
   - [Svelte CSF: legacy story syntax removed](#svelte-csf-legacy-story-syntax-removed)
@@ -1646,6 +1647,44 @@ A decorator that calls element methods on the story result must read the element
 },
 ```
 
+### Web Components: the runtime Custom Elements Manifest API is deprecated
+
+`setCustomElementsManifest()` and `setCustomElements()`, which hand the preview a Custom Elements Manifest from `.storybook/preview.ts`, are deprecated and will be removed in Storybook 12, together with the `getCustomElements()`, `isValidComponent()` and `isValidMetaData()` helpers.
+Calling either setter logs a deprecation warning.
+
+With server-side docgen, which is on by default (see [`docgenServer` is stable and enabled by default](#docgenserver-is-stable-and-enabled-by-default)), `@storybook/web-components-vite` reads your elements from your sources, so you no longer need a manifest.
+Remove the call and its import from the preview; there is nothing to add:
+
+```ts
+// Before: .storybook/preview.ts
+import { setCustomElementsManifest } from '@storybook/web-components-vite';
+import customElements from '../custom-elements.json';
+
+setCustomElementsManifest(customElements);
+
+// After: .storybook/preview.ts
+// (nothing; Storybook reads your elements from your sources)
+```
+
+To keep a manifest you generate yourself, point `main` at the file instead:
+
+```ts
+// .storybook/main.ts
+export default {
+  framework: {
+    name: '@storybook/web-components-vite',
+    options: { customElementsManifest: '../custom-elements.json' },
+  },
+};
+```
+
+When the option is not set, Storybook reads the `customElements` field of the nearest `package.json`.
+Elements the manifest does not declare are still read from your sources.
+
+The `web-components-runtime-manifest` automigration removes the setter call and its import from the preview and, when the manifest came from a file the preview imported, keeps it by adding its path to `framework.options.customElementsManifest`.
+It does nothing when `features.docgenServer` is `false`, and it leaves the preview alone with a warning when the manifest it finds is not readable.
+You can also run it with `storybook automigrate web-components-runtime-manifest`.
+
 ### SvelteKit: Require v3 and up
 
 Storybook 11 requires SvelteKit 3, and `@storybook/sveltekit` requires Vite 8, like SvelteKit 3 does. Upgrade SvelteKit before you upgrade Storybook. SvelteKit's migration tool does most of the work:

From f63c2a59221865de40d248941a8b5f352ae5bf97 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 09:59:05 +0200
Subject: [PATCH 249/326] fix(csf-tools): indent a replaced value like the
 field it is written to

`set` indented a new field's value to the object's indent, but wrote a
replacement for an existing field with the text's own indent, so
`set(['play'], parseExpression('async () => {\n  await x();\n}'))` left
the body at the wrong depth when `play` existed. The addon port worked
around it with `remove` then `set`, which drops the comment above
`play`.

`replaceValue` now indents the lines of its text like the line the
value starts on, as `appendToList` does for a new member, and so does
the named-export config root. For that to be a round trip, a value's
source is now taken as if its line had no indent wherever it leaves its
place: `get`, the value `transform` passes, a file node given to `set`
or returned by `transform`, and a value `move` writes as a named
export. They kept the indent of their file position, which a replace
now indented again and which an added field already over-indented. A
value copied with `set(path, get(other))` now keeps its layout wherever
it goes.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/ConfigObject.test.ts  | 28 ++++++++++
 code/core/src/csf-tools/ConfigObject.ts       | 14 +++--
 code/core/src/csf-tools/CsfObject.test.ts     | 54 +++++++++++++++++++
 code/core/src/csf-tools/CsfObject.ts          |  8 +--
 code/core/src/csf-tools/README.md             |  1 +
 code/core/src/csf-tools/estree/editor.test.ts |  6 +++
 code/core/src/csf-tools/estree/editor.ts      | 28 +++++++---
 code/core/src/csf-tools/estree/values.ts      | 13 +++--
 8 files changed, 129 insertions(+), 23 deletions(-)

diff --git a/code/core/src/csf-tools/ConfigObject.test.ts b/code/core/src/csf-tools/ConfigObject.test.ts
index 8df212364d73..4102daa1ca1a 100644
--- a/code/core/src/csf-tools/ConfigObject.test.ts
+++ b/code/core/src/csf-tools/ConfigObject.test.ts
@@ -69,6 +69,34 @@ describe('ConfigFile mutations', () => {
     }
   );
 
+  it('keeps the layout of named exports that are copied, transformed or moved', () => {
+    const source =
+      'export const a = 1,\n  b = {\n    x: 1,\n  };\nexport const parameters = {\n  docs: {\n    a: 1,\n  },\n  other: 1,\n};';
+    const config = loadConfig(source).parse();
+
+    expect(config.set(['b'], config.get(['b'])!)).toEqual({ ok: true, changed: true });
+    expect(config.transform(['b'], (value) => parseExpression(textOf(value)))).toEqual({
+      ok: true,
+      changed: true,
+    });
+    expect(printConfig(config).code).toBe(source);
+
+    expect(config.move(['parameters', 'docs'], ['docs'])).toEqual({ ok: true, changed: true });
+    expect(printConfig(config).code).toContain('const _docs = {\n  a: 1,\n};');
+  });
+
+  it('indents a node of the file like the place it is set', () => {
+    const config = loadConfig('export default {\n  a: {\n    x: 1,\n  },\n  b: 1,\n};').parse();
+
+    expect(config.set(['b'], config.getFieldNode(['a']) as E.Expression)).toEqual({
+      ok: true,
+      changed: true,
+    });
+    expect(printConfig(config).code).toBe(
+      'export default {\n  a: {\n    x: 1,\n  },\n  b: {\n    x: 1,\n  },\n};'
+    );
+  });
+
   it('infers quotes and keeps the line endings of CRLF sources', () => {
     const source = [
       "import { definePreview } from '@storybook/react';",
diff --git a/code/core/src/csf-tools/ConfigObject.ts b/code/core/src/csf-tools/ConfigObject.ts
index 8ee1f730e400..fc067f070f9f 100644
--- a/code/core/src/csf-tools/ConfigObject.ts
+++ b/code/core/src/csf-tools/ConfigObject.ts
@@ -26,8 +26,10 @@ import {
   type SourceEditor,
   appendStatement,
   declaratorList,
+  lineIndent,
   printKey,
   printString,
+  reindent,
   removeFromList,
   removeStatement,
   specifierList,
@@ -414,24 +416,26 @@ const namedExportsRoot = (editor: SourceEditor, entries: NamedEntry[]): ObjectRo
     remove: (members) => removeEntries(members.map(entryOf)),
     replaceValue: (member, text) => {
       const { declaration } = entryOf(member);
+      const span =
+        declaration.type === 'VariableDeclarator' ? outerSpan(declaration.init!) : declaration;
+      const indented = reindent(text, '', lineIndent(editor.code, span.start));
       if (declaration.type === 'VariableDeclarator') {
-        const value = outerSpan(declaration.init!);
-        editor.edits.overwrite(value.start, value.end, text);
+        editor.edits.overwrite(span.start, span.end, indented);
         return;
       }
       const id = declaration.id!.name;
-      const fn = /^(async\s+)?function\s*(\*)?\s*([\w$]*)\s*(?=[(<])/.exec(text);
+      const fn = /^(async\s+)?function\s*(\*)?\s*([\w$]*)\s*(?=[(<])/.exec(indented);
       if (fn && (!fn[3] || fn[3] === id)) {
         // Keep `export function name() {}` when the replacement is a compatible function.
         const prefix = `${fn[1] ? 'async ' : ''}function${fn[2] ? '*' : ''} ${id}`;
         editor.edits.overwrite(
           declaration.start,
           declaration.end,
-          prefix + text.slice(fn[0].length)
+          prefix + indented.slice(fn[0].length)
         );
         return;
       }
-      editor.edits.overwrite(declaration.start, declaration.end, `const ${id} = ${text};`);
+      editor.edits.overwrite(declaration.start, declaration.end, `const ${id} = ${indented};`);
     },
     rename: (member, key) => {
       const entry = entryOf(member);
diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index fb44fc7ad33d..e0e75df0abe6 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -656,6 +656,60 @@ describe('CsfObject', () => {
     expect(printCsf(csf).code).toBe(source);
   });
 
+  it('indents a replaced value like the member, keeping the comment above it', () => {
+    const csf = parse(
+      'export default {};\nexport const A = {\n  // Records the steps.\n  play: async () => {},\n};'
+    );
+    const [story] = csf.objects({ meta: false });
+
+    expect(story.set(['play'], parseExpression('async () => {\n  await x();\n}'))).toEqual({
+      ok: true,
+      changed: true,
+    });
+    expect(printCsf(csf).code).toBe(
+      'export default {};\nexport const A = {\n  // Records the steps.\n  play: async () => {\n    await x();\n  },\n};'
+    );
+  });
+
+  it('indents a value from get like the place it is set', () => {
+    const source = [
+      'export default {};',
+      'export const A = {',
+      '  play: async () => {',
+      '    await step(`one',
+      '  two`);',
+      '  },',
+      '};',
+      'export const B = { args: {} };',
+    ].join('\n');
+    const csf = parse(source);
+    const [a, b] = csf.objects({ meta: false });
+
+    expect(a.set(['play'], a.get(['play'])!)).toEqual({ ok: true, changed: true });
+    expect(a.transform(['play'], (value) => parseExpression(textOf(value)))).toEqual({
+      ok: true,
+      changed: true,
+    });
+    expect(printCsf(csf).code).toBe(source);
+
+    expect(b.set(['args', 'play'], a.get(['play'])!)).toEqual({ ok: true, changed: true });
+    expect(printCsf(csf).code).toContain(
+      'export const B = { args: {\n  play: async () => {\n    await step(`one\n  two`);\n  },\n} };'
+    );
+  });
+
+  it('indents a value from the line it starts on, below its key', () => {
+    const csf = parse(
+      'export default {};\nexport const A = {\n  play:\n    async () => {\n      x();\n    },\n};\nexport const B = {\n  play: 1,\n};'
+    );
+    const [a, b] = csf.objects({ meta: false });
+
+    expect(b.set(['play'], a.get(['play'])!)).toEqual({ ok: true, changed: true });
+    expect(printCsf(csf).code).toContain(
+      'export const B = {\n  play: async () => {\n    x();\n  },\n};'
+    );
+  });
+
   it('keeps the original source of nodes reused by a transformed value', () => {
     const csf = parse(`
       export default {
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index a741c0e3fc33..8724209c8dbd 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -14,6 +14,8 @@ import {
 import {
   type SourceEditor,
   appendMembers,
+  detachedText,
+  detachedTextOf,
   groupMembers,
   keySource,
   prependMembers,
@@ -385,7 +387,7 @@ class CsfObjectEditor implements CsfObject {
   get(path: readonly string[]): CsfExpression | undefined {
     const root = this.rootNodeFor(path);
     if (root) {
-      return parseExpression(this.editor.source(root));
+      return parseExpression(detachedText(this.editor.code, root.start, this.editor.source(root)));
     }
     const found = this.getProperty(path);
     return found ? parseExpression(valueSource(this.editor, found)) : undefined;
@@ -439,7 +441,7 @@ class CsfObjectEditor implements CsfObject {
 
   private sourceFor(value: CsfValue | CsfExpression) {
     if (isNode(value) && moduleOf(value)) {
-      return placeableTextOf(value);
+      return detachedTextOf(value);
     }
     if (isAstLike(value)) {
       throw new Error(
@@ -494,7 +496,7 @@ class CsfObjectEditor implements CsfObject {
     if (!derived || derived === value) {
       return { ok: true, changed: false };
     }
-    parent.root.replaceValue(property, placeableTextOf(derived));
+    parent.root.replaceValue(property, detachedTextOf(derived));
     return this.commit(path);
   }
 
diff --git a/code/core/src/csf-tools/README.md b/code/core/src/csf-tools/README.md
index 3e6e7d8a2e9f..83071c51dcf1 100644
--- a/code/core/src/csf-tools/README.md
+++ b/code/core/src/csf-tools/README.md
@@ -17,6 +17,7 @@ It can parse MDX into CSF.
 Each editor reads and writes static property paths with `get`, `getValue`, `set`, `transform`, `remove`, `rename`, `move`, and `group`.
 `get` returns an AST expression; `getValue` reads plain values from literals, nested arrays and objects, and local constants without executing code. Missing fields return `undefined`. Values that cannot be resolved statically return `undefined` and add a mutation diagnostic; reads never return a partially decoded object.
 `set` accepts an expression from `get` or `parseExpression`, or plain strings, numbers, booleans, `null`, `undefined`, and nested arrays or objects of those values. Plain values are printed into the source, so later changes to the input do not affect the file.
+An expression from `get` is indented as if its line had no indent, and `set` and `transform` indent a value's lines like the line of the field it is written to, so a value copied between fields keeps its layout.
 Successful removals and moves recursively remove empty source parents, stopping at the editor's root object or an empty parent that shadows an earlier spread or computed key. Removing a field that could reveal an earlier spread value produces a diagnostic. Moves clean up after inserting the destination, so shared ancestors remain intact. Unrelated empty objects are preserved.
 Nested object paths can follow local constants used only by that object; shared or reassigned references remain untouched.
 Nodes reused by `transform` keep their original source, so relocating a value prints it as written instead of pretty-printing it.
diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index 2d2c312937ca..a1617f0e551d 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -420,6 +420,12 @@ describe('replaceValue', () => {
     expect(removedFirst.toString()).toBe(result);
   });
 
+  it('indents the lines of the text like the member, except inside literals', () => {
+    const editor = new SourceEditor(`export default {\n  a: 1,\n};`);
+    replaceValue(editor, firstMember(editor).members[0], 'f(() => {\n  x(`\n`);\n})');
+    expect(editor.toString()).toBe(`export default {\n  a: f(() => {\n    x(\`\n\`);\n  }),\n};`);
+  });
+
   it('takes the comma after the value before a line comment that ends the text', () => {
     const editor = new SourceEditor(`export default { a: 1, b: 2 };`);
     replaceValue(editor, firstMember(editor).members[0], 'x // c\n');
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 2274c484d7cb..0bcc492b8dbc 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -15,6 +15,7 @@ import {
   outerSpan,
   parseModule,
   parsePrintable,
+  placeableTextOf,
   restoreLineEndings,
   sourceOf,
   walk,
@@ -675,6 +676,16 @@ export const reindent = (source: string, from: string, to: string) => {
   return literals ? reindentLines(text, from, to, literals) : text;
 };
 
+// `text`, the source of a node at `start` in `code`, indented as if the node's line had no indent.
+export const detachedText = (code: string, start: number, text: string) =>
+  reindent(text, lineIndent(code, start), '');
+
+// `placeableTextOf` as `detachedText`, for a node of `get`, `parseExpression` or a file.
+export const detachedTextOf = (node: Node) => {
+  const text = placeableTextOf(node);
+  return detachedText(moduleOf(node)!.code, node.start, text);
+};
+
 const dedentSource = (editor: SourceEditor, start: number, end: number, from: string) => {
   const text = editor.code.slice(start, end);
   return from === '' || !text.includes('\n')
@@ -1206,19 +1217,20 @@ export const setImportSpecifiers = (
   }
 };
 
+// The lines of `text` are indented like the line of the code it replaces.
 export const replaceValue = (editor: SourceEditor, member: Property, text: string) => {
   editor.assertCurrent(member);
   const { code } = editor;
-  let span: Span = outerSpan(member.value);
-  let replacement = text;
+  const replacesMember = member.shorthand || member.method || member.kind !== 'init';
+  const span: Span = replacesMember ? member : outerSpan(member.value);
+  const indented = reindent(text, '', lineIndent(code, span.start));
+  let replacement = indented;
   if (member.shorthand) {
-    span = member;
-    replacement = `${editor.source(member.key)}: ${text}`;
-  } else if (member.method || member.kind !== 'init') {
-    span = member;
+    replacement = `${editor.source(member.key)}: ${indented}`;
+  } else if (replacesMember) {
     replacement =
-      methodFromFunction(text, keySource(editor, member)) ??
-      `${keySource(editor, member)}: ${text}`;
+      methodFromFunction(indented, keySource(editor, member)) ??
+      `${keySource(editor, member)}: ${indented}`;
   }
   // A text ending in a line comment takes the comma after the replaced code on its line before
   // the comment. The comma is removed as an edit of its own, so a removal of the next member can
diff --git a/code/core/src/csf-tools/estree/values.ts b/code/core/src/csf-tools/estree/values.ts
index be3d856bf894..ab6ece0cf83c 100644
--- a/code/core/src/csf-tools/estree/values.ts
+++ b/code/core/src/csf-tools/estree/values.ts
@@ -7,11 +7,10 @@ import {
   isIdentifier,
   isNode,
   isNumericLiteral,
-  placeableTextOf,
   staticKey,
   unwrapExpression,
 } from './ast.ts';
-import { type SourceEditor, functionFromMethod } from './editor.ts';
+import { type SourceEditor, detachedText, detachedTextOf, functionFromMethod } from './editor.ts';
 import type { ScopeInfo } from './scope.ts';
 
 // Node types Babel produces that OXC's ESTree output has no equivalent for (`@babel/types`
@@ -49,17 +48,17 @@ const BABEL_ONLY_TYPES = new Set([
 export const isAstLike = (value: unknown): value is Node =>
   isNode(value) && (Object.hasOwn(visitorKeys, value.type) || BABEL_ONLY_TYPES.has(value.type));
 
-/** A member's value as source; methods become function expressions. */
+// A member's value as `detachedText`; methods become function expressions.
 export const valueSource = (editor: SourceEditor, member: Property) =>
   member.method || member.kind !== 'init'
-    ? functionFromMethod(editor, member)
-    : editor.source(member.value);
+    ? detachedText(editor.code, member.start, functionFromMethod(editor, member))
+    : detachedText(editor.code, member.value.start, editor.source(member.value));
 
 // `valueSource` ready to be placed as another value, as `placeableTextOf` prints it.
 export const placeableValueSource = (editor: SourceEditor, member: Property) =>
   member.method || member.kind !== 'init'
-    ? functionFromMethod(editor, member)
-    : placeableTextOf(member.value);
+    ? detachedText(editor.code, member.start, functionFromMethod(editor, member))
+    : detachedTextOf(member.value);
 
 export type CsfValue =
   | string

From 10e17a36f68eb093fedc3e218b549517275aba31 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 10:03:22 +0200
Subject: [PATCH 250/326] fix(csf-tools): write expressions nested in a plain
 value as their source

`set(['args'], { onClick: parseExpression('() => {}'), label: 'x' })`
returned `ok: true` and wrote the arrow function as an object of its
ESTree fields, as `printValue` only knew plain data. Saving a story
with a function arg needs exactly this shape.

`printValue` now prints a node of `get`, `parseExpression` or a file,
which the parse tags carry, as its source at any depth, indented as if
its line had no indent. `set` lays out an object or array with an item
that spans lines one item per line, like the parents it creates; its
layout option is one `{ indent, expand }` value, so an expansion without
an indent cannot be asked for. `CsfValue` takes the expression type as a
parameter, so `set` accepts `CsfValue<CsfExpression>` while `getValue`
still returns plain data.

An object that names an AST node type but has no parse, such as a
spread copy of a node or a Babel builder's node, is now rejected with an
`unsupported-value` diagnostic at any depth instead of a throw at the
top and its fields below. Plain data shaped like a node, such as
`{ type: 'Identifier', name }`, is rejected too, as it cannot be told
from a node built by hand; write it with `parseExpression`.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../utils/save-story/valueToSource.ts         |  2 +-
 code/core/src/csf-tools/ConfigFile.ts         |  2 +-
 code/core/src/csf-tools/CsfObject.test.ts     | 83 +++++++++++++++++--
 code/core/src/csf-tools/CsfObject.ts          | 34 ++++----
 code/core/src/csf-tools/README.md             |  2 +-
 code/core/src/csf-tools/estree/editor.ts      | 40 +++++----
 code/core/src/csf-tools/estree/values.ts      | 29 ++++++-
 7 files changed, 145 insertions(+), 47 deletions(-)

diff --git a/code/core/src/core-server/utils/save-story/valueToSource.ts b/code/core/src/core-server/utils/save-story/valueToSource.ts
index bb114a6c974f..9f4cc193d4c4 100644
--- a/code/core/src/core-server/utils/save-story/valueToSource.ts
+++ b/code/core/src/core-server/utils/save-story/valueToSource.ts
@@ -24,4 +24,4 @@ const withoutUndefined = (value: unknown): unknown => {
 
 /** Print an arg value as source in the editor's style, objects one member per line. */
 export const valueToSource = (value: unknown, { quote, indent }: SourceEditor): string =>
-  printValue(withoutUndefined(value), quote, { indent });
+  printValue(withoutUndefined(value), quote, { indent, expand: 'objects' });
diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index e6fd5dd2c9aa..b0c5d67444a3 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -229,7 +229,7 @@ export class ConfigFile implements CsfObject {
    * object.getValue(['parameters']); // { a11y: { test: 'todo', enabled: true } }
    * ```
    */
-  set(path: readonly string[], value: CsfValue | CsfExpression): CsfMutationResult {
+  set(path: readonly string[], value: CsfValue<CsfExpression>): CsfMutationResult {
     return this._mutate((object) => object.set(path, value));
   }
 
diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index e0e75df0abe6..47b229b406d6 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -3,7 +3,13 @@ import { afterEach, describe, expect, it, vi } from 'vitest';
 import { loadCsf, printCsf } from './CsfFile.ts';
 import { loadConfig, printConfig } from './ConfigFile.ts';
 import type { CsfExpression, CsfValue } from './CsfObject.ts';
-import { parseExpression, placeableTextOf, textOf } from './estree/ast.ts';
+import {
+  type E as ESTree,
+  parseExpression,
+  parseModule,
+  placeableTextOf,
+  textOf,
+} from './estree/ast.ts';
 
 const parse = (source: string) =>
   loadCsf(source, { makeTitle: (title) => title ?? 'title' }).parse();
@@ -120,9 +126,13 @@ describe('CsfObject', () => {
     const csf = parse(`export default { title: 'X' };`);
     const [meta] = csf.objects({ stories: false });
 
-    expect(() => meta.set(['framework'], { type: 'StringLiteral', value: 'x' } as any)).toThrow(
-      'StringLiteral node'
-    );
+    expect(meta.set(['framework'], { type: 'StringLiteral', value: 'x' } as any)).toMatchObject({
+      ok: false,
+      diagnostic: { code: 'unsupported-value', message: expect.stringContaining('StringLiteral') },
+    });
+    expect(
+      meta.set(['control'], { type: 'button', data: { type: 'Identifier', name: 'plainData' } })
+    ).toMatchObject({ ok: false, diagnostic: { code: 'unsupported-value' } });
     expect(meta.set(['control'], { type: 'button', label: 'Save' })).toEqual({
       ok: true,
       changed: true,
@@ -158,9 +168,15 @@ describe('CsfObject', () => {
     const [meta] = csf.objects({ stories: false });
 
     const copy = { ...meta.get(['a'])!, value: 5, raw: '5' } as CsfExpression;
-    expect(() => meta.set(['b'], copy)).toThrow(
-      'CsfObject: expressions must come from `get`, `transform` or `parseExpression`, not a Literal node'
-    );
+    expect(meta.set(['b'], copy)).toMatchObject({
+      ok: false,
+      changed: false,
+      diagnostic: {
+        code: 'unsupported-value',
+        message:
+          'Cannot set b to a Literal node that did not come from `get`, `transform` or `parseExpression`',
+      },
+    });
     expect(printCsf(csf).code).toBe(`export default { a: 1 };`);
   });
 
@@ -428,7 +444,6 @@ describe('CsfObject', () => {
     { value: [1, false, 'autodocs', null] },
     { value: {} },
     { value: { nested: { enabled: true, 'font-size': 12 }, levels: [0, ['dark', false]] } },
-    { value: { type: 'button', data: { type: 'Identifier', name: 'plainData' } } },
   ] satisfies { value: CsfValue }[])('sets the literal value $value', ({ value }) => {
     const csf = parse('export default { parameters: { existing: true } };');
     const [meta] = csf.objects({ stories: false });
@@ -710,6 +725,58 @@ describe('CsfObject', () => {
     );
   });
 
+  it('writes expressions nested in a plain value as their source', () => {
+    const csf = parse("export default {};\nexport const A = {\n  name: 'A',\n};");
+    const [story] = csf.objects({ meta: false });
+
+    expect(
+      story.set(['args'], {
+        onClick: parseExpression('() => {}'),
+        items: [parseExpression('first'), { label: 'x' }],
+      })
+    ).toEqual({ ok: true, changed: true });
+    expect(
+      story.set(['play'], {
+        run: parseExpression('async () => {\n  await x();\n}'),
+        steps: [parseExpression('() => {\n  a();\n}'), 'b'],
+      })
+    ).toEqual({ ok: true, changed: true });
+    expect(printCsf(csf).code).toBe(
+      [
+        'export default {};',
+        'export const A = {',
+        "  name: 'A',",
+        "  args: { onClick: () => {}, items: [first, { label: 'x' }] },",
+        '  play: {',
+        '    run: async () => {',
+        '      await x();',
+        '    },',
+        '    steps: [',
+        '      () => {',
+        '        a();',
+        '      },',
+        "      'b',",
+        '    ],',
+        '  },',
+        '};',
+      ].join('\n')
+    );
+  });
+
+  it('rejects a node without a parse nested in a value', () => {
+    const source = 'export default {};\nexport const A = {};';
+    const csf = parse(source);
+    const [story] = csf.objects({ meta: false });
+    const statement = parseModule('() => {}').program.body[0] as ESTree.ExpressionStatement;
+
+    expect(story.set(['args'], { onClick: statement.expression })).toMatchObject({
+      ok: false,
+      changed: false,
+      diagnostic: { code: 'unsupported-value' },
+    });
+    expect(printCsf(csf).code).toBe(source);
+  });
+
   it('keeps the original source of nodes reused by a transformed value', () => {
     const csf = parse(`
       export default {
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index 8724209c8dbd..e7368a8d2af7 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -3,11 +3,8 @@ import {
   type Node,
   type Property,
   type SourceLocation,
-  isNode,
   locationOf,
-  moduleOf,
   parseExpression,
-  placeableTextOf,
   staticKey,
   unwrapExpression,
 } from './estree/ast.ts';
@@ -30,8 +27,8 @@ import {
 import {
   type CsfValue,
   UNRESOLVED,
-  isAstLike,
   isEvaluationInert,
+  nodeWithoutParse,
   placeableValueSource,
   readValue,
   resolveExpression,
@@ -138,6 +135,7 @@ export interface CsfObject {
   getValue(path: readonly string[]): CsfValue;
   /**
    * Set a plain value or an expression from `get` / `parseExpression`, creating missing parents.
+   * Expressions can also be nested in the arrays and objects of a plain value.
    *
    * @example
    * ```ts
@@ -147,7 +145,7 @@ export interface CsfObject {
    * object.getValue(['parameters']); // { a11y: { test: 'todo', enabled: true } }
    * ```
    */
-  set(path: readonly string[], value: CsfValue | CsfExpression): CsfMutationResult;
+  set(path: readonly string[], value: CsfValue<CsfExpression>): CsfMutationResult;
   /**
    * Replace a value derived from its current expression. Return a new expression, or `undefined`
    * (or the input) to leave the value unchanged.
@@ -439,28 +437,26 @@ class CsfObjectEditor implements CsfObject {
     return found.property;
   }
 
-  private sourceFor(value: CsfValue | CsfExpression) {
-    if (isNode(value) && moduleOf(value)) {
-      return detachedTextOf(value);
-    }
-    if (isAstLike(value)) {
-      throw new Error(
-        `CsfObject: expressions must come from \`get\`, \`transform\` or \`parseExpression\`, not a ${value.type} node`
-      );
-    }
-    return printValue(value, this.editor.quote);
-  }
-
-  set(path: readonly string[], value: CsfValue | CsfExpression): CsfMutationResult {
+  set(path: readonly string[], value: CsfValue<CsfExpression>): CsfMutationResult {
     const logicalPath = this.normalizePath(path);
     if (!logicalPath || logicalPath.length === 0 || unsafePath(logicalPath)) {
       return this.failure('unsupported-member', path, this.anchor());
     }
+    const unprintable = nodeWithoutParse(value);
+    if (unprintable) {
+      return this.failure(
+        'unsupported-value',
+        path,
+        this.anchor(),
+        `Cannot set ${path.join('.')} to a ${unprintable.type} node that did not come from \`get\`, \`transform\` or \`parseExpression\``
+      );
+    }
     const inspected = this.inspect(logicalPath, 'set');
     if (inspected.ok === false) {
       return this.failure(inspected.code, path, inspected.node);
     }
-    const text = this.sourceFor(value);
+    const { quote, indent } = this.editor;
+    const text = printValue(value, quote, { indent, expand: 'multiline' });
     if (inspected.property && inspected.parent) {
       inspected.parent.root.replaceValue(inspected.property, text);
     } else {
diff --git a/code/core/src/csf-tools/README.md b/code/core/src/csf-tools/README.md
index 83071c51dcf1..bde00c2e77be 100644
--- a/code/core/src/csf-tools/README.md
+++ b/code/core/src/csf-tools/README.md
@@ -16,7 +16,7 @@ It can parse MDX into CSF.
 
 Each editor reads and writes static property paths with `get`, `getValue`, `set`, `transform`, `remove`, `rename`, `move`, and `group`.
 `get` returns an AST expression; `getValue` reads plain values from literals, nested arrays and objects, and local constants without executing code. Missing fields return `undefined`. Values that cannot be resolved statically return `undefined` and add a mutation diagnostic; reads never return a partially decoded object.
-`set` accepts an expression from `get` or `parseExpression`, or plain strings, numbers, booleans, `null`, `undefined`, and nested arrays or objects of those values. Plain values are printed into the source, so later changes to the input do not affect the file.
+`set` accepts an expression from `get` or `parseExpression`, or plain strings, numbers, booleans, `null`, `undefined`, and nested arrays or objects of those values and expressions. An object whose `type` names an AST node is rejected with a diagnostic unless it came from `get` or `parseExpression`. Plain values are printed into the source, so later changes to the input do not affect the file.
 An expression from `get` is indented as if its line had no indent, and `set` and `transform` indent a value's lines like the line of the field it is written to, so a value copied between fields keeps its layout.
 Successful removals and moves recursively remove empty source parents, stopping at the editor's root object or an empty parent that shadows an earlier spread or computed key. Removing a field that could reveal an earlier spread value produces a diagnostic. Moves clean up after inserting the destination, so shared ancestors remain intact. Unrelated empty objects are preserved.
 Nested object paths can follow local constants used only by that object; shared or reassigned references remain untouched.
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 0bcc492b8dbc..80634e8d1ed1 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -7,6 +7,7 @@ import {
   type ParsedModule,
   type Property,
   type Span,
+  isNode,
   isStringLiteral,
   isValidIdentifier,
   derivedFrom,
@@ -325,18 +326,23 @@ export const printString = (value: string, quote: string) => {
     : `'${json.slice(1, -1).replaceAll('\\"', '"').replaceAll("'", "\\'")}'`;
 };
 
+const printLines = (items: string[], indent: string, open: string, close: string) =>
+  items.length === 0
+    ? `${open}${close}`
+    : `${open}\n${items.map((item) => `${indent}${withComma(reindent(item, '', indent), ',', true)}`).join('\n')}\n${close}`;
+
 /** An object literal laid out one member per line, so formatters keep it expanded. */
 export const printMembers = (members: string[], indent: string) =>
-  members.length === 0
-    ? '{}'
-    : `{\n${members.map((member) => `${indent}${withComma(reindent(member, '', indent), ',', true)}`).join('\n')}\n}`;
-
-/** Print a JS value as source. With an `indent`, objects are laid out one member per line. */
-export const printValue = (
-  value: unknown,
-  quote: string,
-  options: { indent?: string } = {}
-): string => {
+  printLines(members, indent, '{', '}');
+
+// Objects, or with `multiline` only objects and arrays with an item that spans lines, are laid out
+// one item per line.
+type ValueLayout = { indent: string; expand: 'objects' | 'multiline' };
+
+const spansLines = (texts: string[]) => texts.some((text) => text.includes('\n'));
+
+// A JS value as source, and a node of `get`, `parseExpression` or a file in it as `detachedTextOf`.
+export const printValue = (value: unknown, quote: string, layout?: ValueLayout): string => {
   if (value === undefined) {
     return 'undefined';
   }
@@ -364,18 +370,24 @@ export const printValue = (
   if (typeof value === 'boolean') {
     return String(value);
   }
+  if (isNode(value) && moduleOf(value)) {
+    return detachedTextOf(value);
+  }
   if (value instanceof RegExp) {
     return value.toString();
   }
   if (Array.isArray(value)) {
-    return `[${Array.from(value, (item) => printValue(item, quote, options)).join(', ')}]`;
+    const items = Array.from(value, (item) => printValue(item, quote, layout));
+    return layout?.expand === 'multiline' && spansLines(items)
+      ? printLines(items, layout.indent, '[', ']')
+      : `[${items.join(', ')}]`;
   }
   if (typeof value === 'object') {
     const members = Object.entries(value as Record<string, unknown>).map(
-      ([key, item]) => `${printKey(key, quote)}: ${printValue(item, quote, options)}`
+      ([key, item]) => `${printKey(key, quote)}: ${printValue(item, quote, layout)}`
     );
-    if (options.indent) {
-      return printMembers(members, options.indent);
+    if (layout && (layout.expand === 'objects' || spansLines(members))) {
+      return printMembers(members, layout.indent);
     }
     return members.length === 0 ? '{}' : `{ ${members.join(', ')} }`;
   }
diff --git a/code/core/src/csf-tools/estree/values.ts b/code/core/src/csf-tools/estree/values.ts
index ab6ece0cf83c..3668b1a379ab 100644
--- a/code/core/src/csf-tools/estree/values.ts
+++ b/code/core/src/csf-tools/estree/values.ts
@@ -7,6 +7,7 @@ import {
   isIdentifier,
   isNode,
   isNumericLiteral,
+  moduleOf,
   staticKey,
   unwrapExpression,
 } from './ast.ts';
@@ -60,14 +61,36 @@ export const placeableValueSource = (editor: SourceEditor, member: Property) =>
     ? detachedText(editor.code, member.start, functionFromMethod(editor, member))
     : detachedTextOf(member.value);
 
-export type CsfValue =
+/**
+ * A plain value, as `getValue` reads it. `CsfValue<CsfExpression>`, which `set` takes, can also hold
+ * expressions from `get` or `parseExpression`, at any depth.
+ */
+export type CsfValue<Expression = never> =
   | string
   | number
   | boolean
   | null
   | undefined
-  | readonly CsfValue[]
-  | { readonly [key: string]: CsfValue };
+  | Expression
+  | readonly CsfValue<Expression>[]
+  | { readonly [key: string]: CsfValue<Expression> };
+
+// The first node in `value` that no parse produced, which `printValue` would print as its fields.
+export const nodeWithoutParse = (value: unknown): Node | undefined => {
+  if (typeof value !== 'object' || value === null || moduleOf(value)) {
+    return undefined;
+  }
+  if (isAstLike(value)) {
+    return value;
+  }
+  for (const item of Object.values(value)) {
+    const node = nodeWithoutParse(item);
+    if (node) {
+      return node;
+    }
+  }
+  return undefined;
+};
 
 export const UNRESOLVED = Symbol('unresolved');
 

From 925d78945bed7ea92b0b747c947e7414eb2abda2 Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Tue, 20 Oct 2026 10:27:58 +0200
Subject: [PATCH 251/326] docs: feedback

---
 ...ts-main-config-custom-elements-manifest.md | 53 -------------------
 .../web-components-story-snippet-args.md      | 12 +++--
 .../web-components-story-snippet-listeners.md |  8 ++-
 .../web-components-story-snippet-template.md  | 12 +++--
 .../frameworks/web-components-vite.mdx        | 25 ++++-----
 5 files changed, 33 insertions(+), 77 deletions(-)
 delete mode 100644 docs/_snippets/web-components-main-config-custom-elements-manifest.md

diff --git a/docs/_snippets/web-components-main-config-custom-elements-manifest.md b/docs/_snippets/web-components-main-config-custom-elements-manifest.md
deleted file mode 100644
index 3f737dd226d4..000000000000
--- a/docs/_snippets/web-components-main-config-custom-elements-manifest.md
+++ /dev/null
@@ -1,53 +0,0 @@
-```js filename=".storybook/main.js" renderer="web-components" language="js" tabTitle="CSF 3"
-export default {
-  framework: {
-    name: '@storybook/web-components-vite',
-    options: {
-      customElementsManifest: '../custom-elements.json',
-    },
-  },
-};
-```
-
-```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
-import type { StorybookConfig } from '@storybook/web-components-vite';
-
-const config: StorybookConfig = {
-  framework: {
-    name: '@storybook/web-components-vite',
-    options: {
-      customElementsManifest: '../custom-elements.json',
-    },
-  },
-};
-
-export default config;
-```
-
-```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
-import { defineMain } from '@storybook/web-components-vite/node';
-
-export default defineMain({
-  framework: {
-    name: '@storybook/web-components-vite',
-    options: {
-      customElementsManifest: '../custom-elements.json',
-    },
-  },
-});
-```
-
-<!-- JS snippets still needed while providing both CSF 3 & Next -->
-
-```js filename=".storybook/main.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
-import { defineMain } from '@storybook/web-components-vite/node';
-
-export default defineMain({
-  framework: {
-    name: '@storybook/web-components-vite',
-    options: {
-      customElementsManifest: '../custom-elements.json',
-    },
-  },
-});
-```
diff --git a/docs/_snippets/web-components-story-snippet-args.md b/docs/_snippets/web-components-story-snippet-args.md
index a64db5fb7916..dc2d8ca7f1eb 100644
--- a/docs/_snippets/web-components-story-snippet-args.md
+++ b/docs/_snippets/web-components-story-snippet-args.md
@@ -1,11 +1,13 @@
 ```js filename="lit-slots-and-css.stories.js" renderer="web-components" language="js"
+import './lit-slots-and-css';
+
 export default {
   component: 'lit-slots-and-css',
 };
 
-export const Args = {
+export const Basic = {
   args: {
-    heading: 'Default render',
+    heading: 'Hello',
     'default-slot': 'Body <b>text</b>',
     'actions-slot': '<button>Confirm</button>',
     'panel-part': 'color: rebeccapurple;',
@@ -17,6 +19,8 @@ export const Args = {
 ```ts filename="lit-slots-and-css.stories.ts" renderer="web-components" language="ts"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
+import './lit-slots-and-css';
+
 const meta = {
   component: 'lit-slots-and-css',
 } satisfies Meta;
@@ -24,9 +28,9 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Args: Story = {
+export const Basic: Story = {
   args: {
-    heading: 'Default render',
+    heading: 'Hello',
     'default-slot': 'Body <b>text</b>',
     'actions-slot': '<button>Confirm</button>',
     'panel-part': 'color: rebeccapurple;',
diff --git a/docs/_snippets/web-components-story-snippet-listeners.md b/docs/_snippets/web-components-story-snippet-listeners.md
index 102ad3533cdc..84db8e0ad49c 100644
--- a/docs/_snippets/web-components-story-snippet-listeners.md
+++ b/docs/_snippets/web-components-story-snippet-listeners.md
@@ -1,9 +1,11 @@
 ```js filename="lit-events.stories.js" renderer="web-components" language="js"
+import './lit-events';
+
 export default {
   component: 'lit-events',
 };
 
-export const Listeners = {
+export const WithListener = {
   args: {
     value: 'changed',
     'my-change-event': () => {},
@@ -14,6 +16,8 @@ export const Listeners = {
 ```ts filename="lit-events.stories.ts" renderer="web-components" language="ts"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
+import './lit-events';
+
 const meta = {
   component: 'lit-events',
 } satisfies Meta;
@@ -21,7 +25,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Listeners: Story = {
+export const WithListener: Story = {
   args: {
     value: 'changed',
     'my-change-event': () => {},
diff --git a/docs/_snippets/web-components-story-snippet-template.md b/docs/_snippets/web-components-story-snippet-template.md
index 16ed03fd569a..2fd6e798c18f 100644
--- a/docs/_snippets/web-components-story-snippet-template.md
+++ b/docs/_snippets/web-components-story-snippet-template.md
@@ -1,18 +1,20 @@
 ```js filename="lit-slots-and-css.stories.js" renderer="web-components" language="js"
 import { html } from 'lit';
 
+import './lit-slots-and-css';
+
 export default {
   component: 'lit-slots-and-css',
 };
 
-export const Template = {
+export const CustomMarkup = {
   render: (args) =>
     html`<lit-slots-and-css heading=${args.heading}
       ><p>Default slot content</p>
       <button slot="actions">Confirm</button></lit-slots-and-css
     >`,
   args: {
-    heading: 'Projected',
+    heading: 'Hello',
   },
 };
 ```
@@ -21,6 +23,8 @@ export const Template = {
 import { html } from 'lit';
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
+import './lit-slots-and-css';
+
 const meta = {
   component: 'lit-slots-and-css',
 } satisfies Meta;
@@ -28,14 +32,14 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Template: Story = {
+export const CustomMarkup: Story = {
   render: (args) =>
     html`<lit-slots-and-css heading=${args.heading}
       ><p>Default slot content</p>
       <button slot="actions">Confirm</button></lit-slots-and-css
     >`,
   args: {
-    heading: 'Projected',
+    heading: 'Hello',
   },
 };
 ```
diff --git a/docs/get-started/frameworks/web-components-vite.mdx b/docs/get-started/frameworks/web-components-vite.mdx
index 8406039d1209..5975dbc5ddc2 100644
--- a/docs/get-started/frameworks/web-components-vite.mdx
+++ b/docs/get-started/frameworks/web-components-vite.mdx
@@ -12,11 +12,7 @@ Storybook for Web components & Vite is a [framework](../../contribute/framework.
 
 To install Storybook in an existing project, run this command in your project's root directory:
 
-<CodeSnippets
-  path="create-command.md"
-  variant="new-users"
-  copyEvent="CreateCommandCopy"
-/>
+<CodeSnippets path="create-command.md" variant="new-users" copyEvent="CreateCommandCopy" />
 
 You can then get started [writing stories](../whats-a-story.mdx), [running tests](../../writing-tests/index.mdx) and [documenting your components](../../writing-docs/index.mdx). For more control over the installation process, refer to the [installation guide](../install.mdx).
 
@@ -25,9 +21,9 @@ You can then get started [writing stories](../whats-a-story.mdx), [running tests
 <GetStartedVersions
   versions={[
     {
-      name: "Vite",
-      range: "≥ 5",
-      icon: "/images/logos/builders/vite.svg",
+      name: 'Vite',
+      range: '≥ 5',
+      icon: '/images/logos/builders/vite.svg',
     },
   ]}
 />
@@ -46,7 +42,7 @@ You will find the output in the configured `outputDir` (default is `storybook-st
 
 ## Configure
 
-Storybook for Web components with Vite needs no extra configuration. It reads your custom elements from your source code and turns their JSDoc comments into controls and documentation.
+Storybook for Web components with Vite needs no extra configuration. It reads your custom elements from your source code and turns their JSDoc comments into controls and documentation. This needs the [`docgenServer`](../../api/main-config/main-config-features.mdx) feature, which is on by default.
 
 ### Writing stories
 
@@ -63,6 +59,7 @@ Each arg key tells Storybook which part of the element to set. Keys for events,
 | Attribute           | The attribute name                                    | `heading: 'Hello'`                           | `heading="Hello"`. `true` adds the attribute, `false` omits it. |
 | Property            | The property name                                     | `items: ['a', 'b']`                          | `element.items = ['a', 'b']`                                    |
 | Event               | `<name>-event`                                        | `'my-change-event': () => {}`                | A listener for the `my-change` event                            |
+| Method              | `<name>-method`                                       |                                              | Listed in the docs table only. Nothing is rendered.             |
 | Slot                | `<name>-slot`, or `default-slot` for the default slot | `'actions-slot': '<button>Confirm</button>'` | Child content with `slot="actions"`                             |
 | CSS part            | `<name>-part`                                         | `'panel-part': 'color: rebeccapurple;'`      | A `::part(panel)` rule                                          |
 | CSS state           | `<name>-state`                                        | `'active-state': 'opacity: 0.5;'`            | A `:state(active)` rule                                         |
@@ -82,7 +79,7 @@ A story file without `component` gets no automatic controls. The `Button`, `Head
 
 ### Code snippets
 
-Autodocs and the Code panel show HTML that Storybook generates from your story. For a story that uses args, the snippet is one element with its attributes and slot content, plus a `<style>` block when needed. For example, the `Args` story above becomes:
+Autodocs and the Code panel show HTML that Storybook generates from your story. For a story that uses args, the snippet is one element with its attributes and slot content, plus a `<style>` block when needed. For example, the `Basic` story above becomes:
 
 ```html
 <style>
@@ -90,7 +87,7 @@ Autodocs and the Code panel show HTML that Storybook generates from your story.
     color: rebeccapurple;
   }
 </style>
-<lit-slots-and-css heading="Default render" style="--slot-panel-color: teal;">
+<lit-slots-and-css heading="Hello" style="--slot-panel-color: teal;">
   Body <b>text</b>
   <button slot="actions">Confirm</button>
 </lit-slots-and-css>
@@ -106,9 +103,9 @@ Some things cannot be shown as HTML, such as a Lit directive or a property that
 
 A [Custom Elements Manifest](https://github.com/webcomponents/custom-elements-manifest) is optional. If your project already has one, you can tell Storybook where to find it. Storybook then reads the elements in the manifest from the manifest instead of from your source code:
 
-<CodeSnippets path="web-components-main-config-custom-elements-manifest.md" />
+<CodeSnippets path="web-components-vite-framework-options.md" />
 
-If you do not set this option, Storybook uses the `customElements` field in your `package.json`, if it exists.
+If you do not set this option, Storybook uses the `customElements` field in your `package.json`, if it exists. This option replaces the runtime `setCustomElementsManifest()` call, which is deprecated and will be removed in Storybook 12.
 
 If you generate the manifest with `@custom-elements-manifest/analyzer`, enable the plugin for your library, such as `--litelement` for Lit. Without it, the manifest does not include attributes that you declare with decorators.
 
@@ -121,7 +118,7 @@ If you register Stencil components with `defineCustomElements()` from the genera
 For Stencil 4.26 and later:
 
 ```ts title="stencil.config.ts"
-import type { Config } from "@stencil/core";
+import type { Config } from '@stencil/core';
 
 export const config: Config = {
   extras: {

From a29f0f47c4fbdd447bf93099ca76cda0a3c195e2 Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <Sidnioulz@users.noreply.github.com>
Date: Tue, 20 Oct 2026 10:29:59 +0200
Subject: [PATCH 252/326] Apply suggestion from @Sidnioulz

---
 code/core/src/common/js-package-manager/PNPMProxy.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/code/core/src/common/js-package-manager/PNPMProxy.ts b/code/core/src/common/js-package-manager/PNPMProxy.ts
index 43c686d4fb44..a863ed5b6ab7 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.ts
@@ -68,7 +68,10 @@ const STORYBOOK_BUILD_SCRIPT_PACKAGES = ['esbuild'];
 const isRecord = (value: unknown): value is Record<string, unknown> =>
   typeof value === 'object' && value !== null && !Array.isArray(value);
 
-// A matcher is a bare name, or a name pinned to versions or a source: `esbuild@0.25.0 || 0.25.1`.
+/**
+ * Matches a package name, including pinned versions of that package.
+ * For instance, if `matcher` is `esbuild@0.25.0 || 0.25.1`, it matches `pkg` `esbuild`.
+ */
 const matchesPackage = (matcher: unknown, pkg: string): boolean =>
   typeof matcher === 'string' && (matcher === pkg || matcher.startsWith(`${pkg}@`));
 

From 67f593c8d2dd3536fdb62688584ca2c63b1c57f0 Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <sidnioulz@gmail.com>
Date: Tue, 20 Oct 2026 10:53:45 +0200
Subject: [PATCH 253/326] Improve docs and simplify code

---
 .../common/js-package-manager/PNPMProxy.ts    | 39 +++++++++++++++----
 1 file changed, 31 insertions(+), 8 deletions(-)

diff --git a/code/core/src/common/js-package-manager/PNPMProxy.ts b/code/core/src/common/js-package-manager/PNPMProxy.ts
index a863ed5b6ab7..fdcb53f43e64 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.ts
@@ -70,28 +70,51 @@ const isRecord = (value: unknown): value is Record<string, unknown> =>
 
 /**
  * Matches a package name, including pinned versions of that package.
- * For instance, if `matcher` is `esbuild@0.25.0 || 0.25.1`, it matches `pkg` `esbuild`.
+ * For instance, if `value` is `esbuild@0.25.0 || 0.25.1`, it matches `pkg` `esbuild`.
+ * @param value The package name or pinned version to match against.
+ * @param pkg The package name to check against the value.
+ * @returns whether the package matches the given value.
  */
-const matchesPackage = (matcher: unknown, pkg: string): boolean =>
-  typeof matcher === 'string' && (matcher === pkg || matcher.startsWith(`${pkg}@`));
+const matchesPackage = (value: unknown, pkg: string): boolean =>
+  typeof value === 'string' && (value === pkg || value.startsWith(`${pkg}@`));
 
+/**
+ * Checks if a list of packages matches a given package name, including if the
+ * list contains pinned versions of that package.
+ * @param list List of package names to check.
+ * @param pkg The package name to check against the list of matchers.
+ * @returns whether the package matches any of the entries in the list.
+ */
 const listsPackage = (list: unknown, pkg: string): boolean =>
-  Array.isArray(list) && list.some((matcher) => matchesPackage(matcher, pkg));
+  Array.isArray(list) && list.some((value) => matchesPackage(value, pkg));
 
-// The bare key only counts once it holds a boolean, so the placeholder pnpm 12 writes still gets
-// resolved; a pinned matcher counts whatever its value, as a bare entry would widen it.
+/**
+ * Checks if PNPM settings contain an `allowBuilds` decision for the given package.
+ * Does not check whether it's allowed or refused, we only care to not modify `allowBuilds`
+ * when a pre-existing user decision exists.
+ *
+ * Note however that PNPM 12 inserts placeholder keys in `allowBuilds` for package names
+ * where the user has not made a decision. This does not happen for pinned versions but
+ * only for exact matches. So we verify we do have a boolean value for exact matches.
+ *
+ * @param settings The PNPM settings object to check.
+ * @param pkg The package name to check for an `allowBuilds` decision.
+ * @returns `true` if there is an existing `allowBuilds` decision for the package, `false` otherwise.
+ */
 function hasAllowBuildsDecision(settings: unknown, pkg: string): boolean {
   if (!isRecord(settings)) {
     return false;
   }
+
   if (settings.dangerouslyAllowAllBuilds === true) {
     return true;
   }
+
   const { allowBuilds } = settings;
   return (
     isRecord(allowBuilds) &&
-    Object.entries(allowBuilds).some(([matcher, value]) =>
-      matcher === pkg ? typeof value === 'boolean' : matchesPackage(matcher, pkg)
+    Object.keys(allowBuilds).some(
+      (matcher) => matchesPackage(matcher, pkg) && typeof allowBuilds[matcher] === 'boolean'
     )
   );
 }

From 5fa76cfc944e88e7bdb23cbac1c2e22e6598b22b Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 10:12:23 +0200
Subject: [PATCH 254/326] fix(csf-tools): let the import helpers see every
 import, keep types and follow the file's style

setImport, setRequireImport and removeImport looked only at the first
declaration of a module, so a second import of it was invisible: names it
already bound were added again, and names it bound were not removed. They
also edited an `import type` declaration as if it were a value import, which
turned an added value binding into a type, and a `const a = require('x')`
made setRequireImport(['b'], 'x') a silent no-op.

They now look at every import and top-level require of the module and add
value bindings only to value imports. A binding that only a type-only import
provides moves out of it into a value import, since the two would clash;
other type-only imports are left alone. A named binding can be given as
`'name as alias'`, the form setImportSpecifiers already takes, and counts as
present only under its own local name, `{ a = 1 }` in a require included.
A malformed name throws instead of printing invalid code. removeImport keeps
its contract that a plain name removes every import of that export.

The statements these helpers add now follow the file's semicolon style,
inferred like its quotes. ensureNamedImport uses setImport for its aliased
import, so it gets the same style and merges into an existing import.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../utils/wrap-getAbsolutePath-utils.ts       |   8 +-
 code/core/src/csf-tools/ConfigFile.test.ts    | 179 +++++++++
 code/core/src/csf-tools/ConfigFile.ts         | 374 ++++++++++--------
 code/core/src/csf-tools/README.md             |   2 +
 code/core/src/csf-tools/estree/editor.test.ts |  27 ++
 code/core/src/csf-tools/estree/editor.ts      |  47 ++-
 6 files changed, 473 insertions(+), 164 deletions(-)

diff --git a/code/core/src/common/utils/wrap-getAbsolutePath-utils.ts b/code/core/src/common/utils/wrap-getAbsolutePath-utils.ts
index 7ad0a6cdcca0..44698ce83194 100644
--- a/code/core/src/common/utils/wrap-getAbsolutePath-utils.ts
+++ b/code/core/src/common/utils/wrap-getAbsolutePath-utils.ts
@@ -1,7 +1,7 @@
 import type { ConfigFile } from 'storybook/internal/csf-tools';
 
 import { type Node, isStringLiteral } from '../../csf-tools/estree/ast.ts';
-import { prependStatement, printString } from '../../csf-tools/estree/editor.ts';
+import { printString } from '../../csf-tools/estree/editor.ts';
 
 const PREFERRED_GET_ABSOLUTE_PATH_WRAPPER_NAME = 'getAbsolutePath';
 const ALTERNATIVE_GET_ABSOLUTE_PATH_WRAPPER_NAME = 'wrapForPnp';
@@ -203,10 +203,6 @@ export function ensureNamedImport(config: ConfigFile, imported: string, source:
   while (taken.has(local)) {
     local = `_${local}`;
   }
-  prependStatement(
-    config._editor,
-    `import { ${imported} as ${local} } from ${printString(source, config._editor.quote)};`
-  );
-  config._editor.commit();
+  config.setImport([`${imported} as ${local}`], source);
   return local;
 }
diff --git a/code/core/src/csf-tools/ConfigFile.test.ts b/code/core/src/csf-tools/ConfigFile.test.ts
index ebe32a17a5d5..37264b512be5 100644
--- a/code/core/src/csf-tools/ConfigFile.test.ts
+++ b/code/core/src/csf-tools/ConfigFile.test.ts
@@ -1619,6 +1619,104 @@ describe('ConfigFile', () => {
       expect(printConfig(config).code).toBe(output);
     });
 
+    it.each([
+      {
+        source: `import type { A } from 'x';\nexport default {};`,
+        specifier: ['b'],
+        output: `import type { A } from 'x';\nimport { b } from 'x';\nexport default {};`,
+      },
+      {
+        source: `import type A from 'x';`,
+        specifier: 'b',
+        output: `import type A from 'x';\nimport b from 'x';`,
+      },
+      {
+        source: `import type { A } from 'x';\nimport { b } from 'x';`,
+        specifier: ['c'],
+        output: `import type { A } from 'x';\nimport { b, c } from 'x';`,
+      },
+      {
+        source: `import * as ns from 'x';\nimport { a } from 'x';`,
+        specifier: ['a', 'b'],
+        output: `import * as ns from 'x';\nimport { a, b } from 'x';`,
+      },
+      {
+        source: `import { a } from 'x';\nimport d from 'x';`,
+        specifier: 'd',
+        output: `import { a } from 'x';\nimport d from 'x';`,
+      },
+    ])('adds value specifiers $specifier to $source', ({ source, specifier, output }) => {
+      const config = loadConfig(source).parse();
+      config.setImport(specifier, 'x');
+
+      expect(printConfig(config).code).toBe(output);
+    });
+
+    it.each([
+      { source: ``, output: `import { a as b } from "x";\n` },
+      { source: `import { a } from 'x';`, output: `import { a, a as b } from 'x';` },
+      { source: `import { a as b } from 'x';`, output: `import { a as b } from 'x';` },
+    ])('adds the alias `a as b` to $source', ({ source, output }) => {
+      const config = loadConfig(source).parse();
+      config.setImport(['a as b'], 'x');
+
+      expect(printConfig(config).code).toBe(output);
+    });
+
+    it.each([
+      {
+        source: `import type { A } from 'x';\nexport default {};`,
+        specifier: ['A'],
+        output: `import { A } from 'x';\nexport default {};`,
+      },
+      {
+        source: `import { type A, b } from 'x';`,
+        specifier: ['A'],
+        output: `import { b, A } from 'x';`,
+      },
+      {
+        source: `import type { A as B, C } from 'x';`,
+        specifier: ['A as B'],
+        output: `import type { C } from 'x';\nimport { A as B } from 'x';`,
+      },
+      {
+        source: `import type A from 'x';\nexport default {};`,
+        specifier: 'A',
+        output: `import A from 'x';\nexport default {};`,
+      },
+    ])(
+      'turns the type-only binding of $specifier in $source into a value import',
+      ({ source, specifier, output }) => {
+        const config = loadConfig(source).parse();
+        config.setImport(specifier, 'x');
+
+        expect(printConfig(config).code).toBe(output);
+      }
+    );
+
+    it.each(['a-b', 'a as b as c', ''])('rejects the import name %j', (name) => {
+      const config = loadConfig('').parse();
+
+      expect(() => config.setImport([name], 'x')).toThrow('import name');
+    });
+
+    it('adds a name that the file only imports under an alias', () => {
+      const config = loadConfig(`import { a as b } from 'x';`).parse();
+      config.setImport(['a'], 'x');
+
+      expect(printConfig(config).code).toBe(`import { a as b, a } from 'x';`);
+    });
+
+    it('ends the statements it adds like the file does', () => {
+      const config = loadConfig(`import a from 'a'\nexport default {}\n`).parse();
+      config.setImport(['b'], 'b');
+      config.setImport(null, 'c');
+
+      expect(printConfig(config).code).toBe(
+        `import a from 'a'\nimport { b } from 'b'\nimport 'c'\nexport default {}\n`
+      );
+    });
+
     it(`supports setting a namespaced import`, () => {
       const config = loadConfig('').parse();
       config.setImport({ namespace: 'path' }, 'path');
@@ -1731,6 +1829,49 @@ describe('ConfigFile', () => {
       expect(printConfig(config).code).toBe(output);
     });
 
+    it.each([
+      {
+        source: `const a = require('x');`,
+        specifier: ['b'],
+        output: `const { b } = require('x');\nconst a = require('x');`,
+      },
+      {
+        source: `const a = require('x');\nconst { b } = require('x');`,
+        specifier: ['c'],
+        output: `const a = require('x');\nconst { b, c } = require('x');`,
+      },
+      {
+        source: `const { b } = require('x');\nconst a = require('x');`,
+        specifier: 'a',
+        output: `const { b } = require('x');\nconst a = require('x');`,
+      },
+      {
+        source: `const { b } = require('x');`,
+        specifier: ['a as c', 'b'],
+        output: `const { b, a: c } = require('x');`,
+      },
+      {
+        source: `const { a: c } = require('x');`,
+        specifier: ['a as c', 'a'],
+        output: `const { a: c, a } = require('x');`,
+      },
+      {
+        source: `const { a = 1, b: c = 2 } = require('x');`,
+        specifier: ['a', 'b as c'],
+        output: `const { a = 1, b: c = 2 } = require('x');`,
+      },
+      {
+        source: `module.exports = {}`,
+        specifier: 'a',
+        output: `const a = require("x")\nmodule.exports = {}`,
+      },
+    ])('adds $specifier to $source', ({ source, specifier, output }) => {
+      const config = loadConfig(source).parse();
+      config.setRequireImport(specifier, 'x');
+
+      expect(printConfig(config).code).toBe(output);
+    });
+
     it(`supports setting a named import for a field where the source already exists without "node:" prefix`, () => {
       const source = dedent`
         const { dirname } = require('path');
@@ -2024,6 +2165,44 @@ describe('ConfigFile', () => {
       expect(parsed).toMatchInlineSnapshot(source);
     });
 
+    it.each([
+      {
+        source: `import type { A } from 'x';\nimport { b } from 'x';\nimport { c, d } from 'x';`,
+        specifier: ['A', 'c'],
+        output: `import type { A } from 'x';\nimport { b } from 'x';\nimport { d } from 'x';`,
+      },
+      {
+        source: `import { a as b, a } from 'x';`,
+        specifier: ['a as b'],
+        output: `import { a } from 'x';`,
+      },
+      {
+        source: `import { a as b } from 'x';\nimport { a } from 'x';`,
+        specifier: ['a'],
+        output: ``,
+      },
+      {
+        source: `import 'x';\nimport { a } from 'x';\nimport 'x';`,
+        specifier: null,
+        output: `import { a } from 'x';\n`,
+      },
+      {
+        source: `const a = require('x');\nconst { b, c } = require('x');`,
+        specifier: ['b'],
+        output: `const a = require('x');\nconst { c } = require('x');`,
+      },
+      {
+        source: `const { a: b = 1, c } = require('x');`,
+        specifier: ['a as b'],
+        output: `const { c } = require('x');`,
+      },
+    ])('removes $specifier from $source', ({ source, specifier, output }) => {
+      const config = loadConfig(source).parse();
+      config.removeImport(specifier, 'x');
+
+      expect(printConfig(config).code).toBe(output);
+    });
+
     it(`removes ES6 import while preserving require import`, () => {
       const source = dedent`
         import { readFile } from 'fs';
diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index b0c5d67444a3..b39bc524d216 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -129,15 +129,56 @@ const _findVarDeclarator = (
   return undefined;
 };
 
-const namesToAdd = (names: readonly string[], has: (name: string) => boolean) =>
-  [...new Set(names)].filter((name) => !has(name));
-
 const isRequireOf = (node: Node | null | undefined, fromImport: string) =>
   node?.type === 'CallExpression' &&
   isIdentifier(node.callee, 'require') &&
   isStringLiteral(node.arguments[0]) &&
-  (node.arguments[0].value === fromImport ||
-    node.arguments[0].value === fromImport.split('node:')[1]);
+  isSource(node.arguments[0].value, fromImport);
+
+// `node:path` also finds an import of `path`.
+const isSource = (value: string, fromImport: string) =>
+  value === fromImport || value === fromImport.split('node:')[1];
+
+interface ImportName {
+  imported: string;
+  local: string;
+}
+
+// `'a as b'` imports `a` under the local name `b`.
+const IMPORT_NAME = /^\s*([\p{L}\p{N}_$]+)(?:\s+as\s+([\p{L}\p{N}_$]+))?\s*$/u;
+
+const importNames = (specifiers: readonly string[]) => {
+  const names = new Map<string, ImportName>();
+  for (const specifier of specifiers) {
+    const match = IMPORT_NAME.exec(specifier);
+    if (!match) {
+      throw new Error(`Expected an import name like 'a' or 'a as b', got '${specifier}'`);
+    }
+    const [, imported, local = imported] = match;
+    names.set(`${imported} as ${local}`, { imported, local });
+  }
+  return [...names.values()];
+};
+
+const printImportName = ({ imported, local }: ImportName, separator: string) =>
+  imported === local ? imported : `${imported}${separator}${local}`;
+
+const bindsImport = (name: ImportName, imported: Node, local: Node) =>
+  isIdentifier(imported, name.imported) &&
+  // `{ a = 1 }` binds `a` too.
+  isIdentifier(local.type === 'AssignmentPattern' ? local.left : local, name.local);
+
+// A plain name removes every import of that export, an alias only the import under that name.
+const removesImport = (name: ImportName, imported: Node, local: Node) =>
+  name.imported === name.local
+    ? isIdentifier(imported, name.imported)
+    : bindsImport(name, imported, local);
+
+type ImportSpecifierNode = E.ImportDeclaration['specifiers'][number];
+
+const isTypeOnly = (declaration: E.ImportDeclaration, specifier: ImportSpecifierNode) =>
+  declaration.importKind === 'type' ||
+  (specifier.type === 'ImportSpecifier' && specifier.importKind === 'type');
 
 export class ConfigFile implements CsfObject {
   /**
@@ -827,62 +868,65 @@ export class ConfigFile implements CsfObject {
   }
 
   /**
-   * Import specifiers for a specific require import
+   * Add `require` bindings of a module: a string as `const name = require(…)`, an array of names or
+   * `'name as alias'` as destructured properties. A binding a top-level `require` of the module has
+   * already is skipped. Statements end with `;` unless most statements of the file omit it.
    *
    * @example
    *
    * ```ts
-   * // const { foo } = require('bar');
-   * setRequireImport(['foo'], 'bar');
+   * // const { foo, bar: baz } = require('bar');
+   * setRequireImport(['foo', 'bar as baz'], 'bar');
    *
    * // const foo = require('bar');
    * setRequireImport('foo', 'bar');
    * ```
    *
-   * @param importSpecifiers - The import specifiers to set. If a string is passed in, a default
-   *   import will be set. Otherwise, an array of named imports will be set
-   * @param fromImport - The module to import from
+   * @throws When a name is neither an identifier nor `'name as alias'`.
    */
   setRequireImport(importSpecifier: string[] | string, fromImport: string) {
-    const requireDeclaration = this._findRequire(fromImport);
-    if (requireDeclaration) {
-      fromImport = (
-        (requireDeclaration.declarations[0].init as E.CallExpression)
-          .arguments[0] as E.StringLiteral
-      ).value;
-    }
-    const source = printString(fromImport, this._editor.quote);
+    const requires = this._findRequires(fromImport);
+    const call = requires[0]?.declarations[0].init as E.CallExpression | undefined;
+    const source = printString(
+      call ? (call.arguments[0] as E.StringLiteral).value : fromImport,
+      this._editor.quote
+    );
+    const end = this._editor.semicolons ? ';' : '';
     const editor = this._editor;
+    const ids = requires.map((declaration) => declaration.declarations[0].id);
 
-    // if the import specifier is a string, we're dealing with default imports
     if (typeof importSpecifier === 'string') {
-      const declarator = requireDeclaration?.declarations[0];
-      if (!declarator || !isIdentifier(declarator.id, importSpecifier)) {
-        // If the import declaration hasn't the specified default identifier, we add a new variable declaration
-        prependStatement(editor, `const ${importSpecifier} = require(${source});`);
+      if (!ids.some((id) => isIdentifier(id, importSpecifier))) {
+        prependStatement(editor, `const ${importSpecifier} = require(${source})${end}`);
       }
-      // if the import specifier is an array, we're dealing with named imports
     } else {
-      const pattern = requireDeclaration?.declarations[0].id;
-      const names = namesToAdd(
-        importSpecifier,
-        (name) =>
-          pattern?.type === 'ObjectPattern' &&
-          pattern.properties.some(
-            (property) => property.type === 'Property' && isIdentifier(property.key, name)
-          )
+      const patterns = ids.filter((id): id is E.ObjectPattern => id.type === 'ObjectPattern');
+      const texts = importNames(importSpecifier)
+        .filter(
+          (name) =>
+            !patterns.some((pattern) =>
+              pattern.properties.some(
+                (property) =>
+                  property.type === 'Property' && bindsImport(name, property.key, property.value)
+              )
+            )
+        )
+        .map((name) => printImportName(name, ': '));
+      // Nothing may follow a rest element.
+      const pattern = patterns.find((id) =>
+        id.properties.every((property) => property.type === 'Property')
       );
-      if (!pattern) {
-        prependStatement(editor, `const { ${names.join(', ')} } = require(${source});`);
-      } else if (pattern.type === 'ObjectPattern' && names.length > 0) {
-        appendToList(editor, objectList(editor, pattern), names);
+      if (texts.length > 0 && pattern) {
+        appendToList(editor, objectList(editor, pattern), texts);
+      } else if (texts.length > 0) {
+        prependStatement(editor, `const { ${texts.join(', ')} } = require(${source})${end}`);
       }
     }
     this._editor.commit();
   }
 
-  _findRequire(fromImport: string) {
-    return this._program.body.find(
+  _findRequires(fromImport: string) {
+    return this._program.body.filter(
       (node): node is E.VariableDeclaration =>
         node.type === 'VariableDeclaration' &&
         node.declarations.length === 1 &&
@@ -890,24 +934,24 @@ export class ConfigFile implements CsfObject {
     );
   }
 
-  _findImport(fromImport: string) {
-    return this._program.body.find(
+  _findImports(fromImport: string) {
+    return this._program.body.filter(
       (node): node is E.ImportDeclaration =>
-        node.type === 'ImportDeclaration' &&
-        (node.source.value === fromImport || node.source.value === fromImport.split('node:')[1])
+        node.type === 'ImportDeclaration' && isSource(node.source.value, fromImport)
     );
   }
 
   /**
-   * Set import specifiers for a given import statement.
-   *
-   * Does not support setting type imports (yet)
+   * Add import bindings of a module: a string as the default import, an array of names or
+   * `'name as alias'` as named imports. A binding a value import of the module has already is
+   * skipped; one only a type-only import has becomes a value import. Statements end with `;` unless
+   * most statements of the file omit it.
    *
    * @example
    *
    * ```ts
-   * // import { foo } from 'bar';
-   * setImport(['foo'], 'bar');
+   * // import { foo, bar as baz } from 'bar';
+   * setImport(['foo', 'bar as baz'], 'bar');
    *
    * // import foo from 'bar';
    * setImport('foo', 'bar');
@@ -919,104 +963,144 @@ export class ConfigFile implements CsfObject {
    * setImport(null, 'bar');
    * ```
    *
-   * @param importSpecifiers - The import specifiers to set. If a string is passed in, a default
-   *   import will be set. Otherwise, an array of named imports will be set
-   * @param fromImport - The module to import from
+   * @throws When a name is neither an identifier nor `'name as alias'`.
    */
   setImport(importSpecifier: string[] | string | { namespace: string } | null, fromImport: string) {
-    const importDeclaration = this._findImport(fromImport);
-    if (importDeclaration) {
-      fromImport = importDeclaration.source.value;
-    }
+    const names = Array.isArray(importSpecifier) ? importNames(importSpecifier) : [];
+    const spelled = this._findImports(fromImport)[0]?.source.value ?? fromImport;
+    // A type-only binding of a name to import as a value would clash with it, so it goes.
+    this._removeImportSpecifiers(
+      fromImport,
+      (declaration, specifier) =>
+        isTypeOnly(declaration, specifier) &&
+        (specifier.type === 'ImportSpecifier'
+          ? names.some((name) => bindsImport(name, specifier.imported, specifier.local))
+          : specifier.type === 'ImportDefaultSpecifier' && specifier.local.name === importSpecifier)
+    );
+    this._editor.commit();
+
+    const values = this._findImports(fromImport).filter(
+      (declaration) => declaration.importKind !== 'type'
+    );
     const editor = this._editor;
-    const source = printString(fromImport, this._editor.quote);
-    const has = (type: string, name?: string) =>
-      !!importDeclaration?.specifiers.some(
-        (specifier) =>
-          specifier.type === type &&
-          (name === undefined ||
-            (type === 'ImportSpecifier'
-              ? isIdentifier((specifier as E.ImportSpecifier).imported, name)
-              : specifier.local.name === name))
-      );
-    // A new import goes after the existing ones, and a clause the declaration cannot take gets a
-    // declaration of its own right after it, which keeps the module evaluation order.
-    const addImport = (clause: string, merged?: { default?: string; named?: string[] }) => {
-      if (!importDeclaration) {
-        insertAfterImports(editor, `import ${clause} from ${source};`);
-      } else if (merged) {
-        setImportSpecifiers(editor, importDeclaration, importDeclaration.specifiers, merged);
+    const source = printString(spelled, this._editor.quote);
+    const end = this._editor.semicolons ? ';' : '';
+    const specifiers = values.flatMap((declaration) =>
+      declaration.specifiers.filter((specifier) => !isTypeOnly(declaration, specifier))
+    );
+    // A clause goes into the first value import without a specifier that blocks it. Otherwise it
+    // gets a declaration of its own after the module's value imports, or after all imports, which
+    // keeps the module evaluation order.
+    const addImport = (
+      clause: string,
+      merged?: { blockedBy: string; specifiers: { default?: string; named?: string[] } }
+    ) => {
+      const target =
+        merged &&
+        values.find(
+          (declaration) =>
+            !declaration.specifiers.some((specifier) => specifier.type === merged.blockedBy)
+        );
+      if (target) {
+        setImportSpecifiers(editor, target, target.specifiers, merged.specifiers);
+      } else if (values.length > 0) {
+        insertStatementAfter(editor, values.at(-1)!, `import ${clause} from ${source}${end}`);
       } else {
-        insertStatementAfter(editor, importDeclaration, `import ${clause} from ${source};`);
+        insertAfterImports(editor, `import ${clause} from ${source}${end}`);
       }
     };
 
     // Handle side-effect imports (e.g., import 'foo')
     if (importSpecifier === null) {
-      if (!importDeclaration) {
-        insertAfterImports(editor, `import ${source};`);
+      if (values.length === 0) {
+        insertAfterImports(editor, `import ${source}${end}`);
       }
       // Handle default imports e.g. import foo from 'bar'
     } else if (typeof importSpecifier === 'string') {
-      if (!has('ImportDefaultSpecifier', importSpecifier)) {
-        addImport(
-          importSpecifier,
-          has('ImportDefaultSpecifier') ? undefined : { default: importSpecifier }
-        );
+      if (
+        !specifiers.some(
+          (specifier) =>
+            specifier.type === 'ImportDefaultSpecifier' && specifier.local.name === importSpecifier
+        )
+      ) {
+        addImport(importSpecifier, {
+          blockedBy: 'ImportDefaultSpecifier',
+          specifiers: { default: importSpecifier },
+        });
       }
       // Handle named imports e.g. import { foo } from 'bar'
     } else if (Array.isArray(importSpecifier)) {
-      const names = namesToAdd(importSpecifier, (name) => has('ImportSpecifier', name));
-      if (names.length > 0) {
-        addImport(
-          `{ ${names.join(', ')} }`,
-          has('ImportNamespaceSpecifier') ? undefined : { named: names }
-        );
+      const texts = names
+        .filter(
+          (name) =>
+            !specifiers.some(
+              (specifier) =>
+                specifier.type === 'ImportSpecifier' &&
+                bindsImport(name, specifier.imported, specifier.local)
+            )
+        )
+        .map((name) => printImportName(name, ' as '));
+      if (texts.length > 0) {
+        addImport(`{ ${texts.join(', ')} }`, {
+          blockedBy: 'ImportNamespaceSpecifier',
+          specifiers: { named: texts },
+        });
       }
       // Handle namespace imports e.g. import * as foo from 'bar'
     } else if (
       importSpecifier.namespace &&
-      !has('ImportNamespaceSpecifier', importSpecifier.namespace)
+      !specifiers.some(
+        (specifier) =>
+          specifier.type === 'ImportNamespaceSpecifier' &&
+          specifier.local.name === importSpecifier.namespace
+      )
     ) {
       addImport(`* as ${importSpecifier.namespace}`);
     }
     this._editor.commit();
   }
 
+  // Removes the matching specifiers of a module's imports, and each import left without any.
+  _removeImportSpecifiers(
+    fromImport: string,
+    matches: (declaration: E.ImportDeclaration, specifier: ImportSpecifierNode) => boolean
+  ) {
+    for (const declaration of this._findImports(fromImport)) {
+      const kept = declaration.specifiers.filter((specifier) => !matches(declaration, specifier));
+      if (kept.length === 0 && declaration.specifiers.length > 0) {
+        removeStatement(this._editor, declaration);
+      } else if (kept.length < declaration.specifiers.length) {
+        setImportSpecifiers(this._editor, declaration, kept);
+      }
+    }
+  }
+
   _removeRequireImport(
     importSpecifier: string[] | string | { namespace: string } | null,
     fromImport: string
   ) {
-    const requireDeclaration = this._findRequire(fromImport);
-    // require() has no side-effect only or namespace forms, so those are skipped.
-    if (!requireDeclaration || importSpecifier === null) {
-      return;
-    }
-    const declarator = requireDeclaration.declarations[0];
     const editor = this._editor;
-
-    // Handle default requires e.g. const foo = require('bar')
-    if (typeof importSpecifier === 'string') {
-      // For default requires, if the identifier matches, remove the entire declaration
-      if (isIdentifier(declarator.id, importSpecifier)) {
-        removeStatement(editor, requireDeclaration);
+    // require() has no side-effect only or namespace forms, so those are skipped.
+    const names = Array.isArray(importSpecifier) ? importNames(importSpecifier) : undefined;
+    for (const declaration of this._findRequires(fromImport)) {
+      const { id } = declaration.declarations[0];
+      // Handle default requires e.g. const foo = require('bar')
+      if (typeof importSpecifier === 'string' && isIdentifier(id, importSpecifier)) {
+        removeStatement(editor, declaration);
       }
-      return;
-    }
-
-    // Handle named requires e.g. const { foo, bar } = require('baz')
-    if (Array.isArray(importSpecifier) && declarator.id.type === 'ObjectPattern') {
-      const pattern = declarator.id;
-      const removed = pattern.properties.filter(
+      // Handle named requires e.g. const { foo, bar } = require('baz')
+      if (!names || id.type !== 'ObjectPattern') {
+        continue;
+      }
+      const removed = id.properties.filter(
         (property) =>
           property.type === 'Property' &&
-          importSpecifier.some((specifier) => isIdentifier(property.key, specifier))
+          names.some((name) => removesImport(name, property.key, property.value))
       );
-      // If no properties left in the destructuring, remove the entire declaration
-      if (removed.length === pattern.properties.length) {
-        removeStatement(editor, requireDeclaration);
+      if (removed.length === id.properties.length) {
+        removeStatement(editor, declaration);
       } else if (removed.length > 0) {
-        removeFromList(editor, objectList(editor, pattern), removed);
+        removeFromList(editor, objectList(editor, id), removed);
       }
     }
   }
@@ -1025,27 +1109,19 @@ export class ConfigFile implements CsfObject {
     importSpecifier: string[] | string | { namespace: string } | null,
     fromImport: string
   ) {
-    const importDeclaration = this._findImport(fromImport);
-    if (!importDeclaration) {
-      return;
-    }
-    const editor = this._editor;
-
     // Remove side-effect imports (e.g., import 'foo') if exact match, else do nothing.
     if (importSpecifier === null) {
-      if (importDeclaration.specifiers.length === 0) {
-        removeStatement(editor, importDeclaration);
+      for (const declaration of this._findImports(fromImport)) {
+        if (declaration.specifiers.length === 0) {
+          removeStatement(this._editor, declaration);
+        }
       }
       return;
     }
-
-    const removed = importDeclaration.specifiers.filter((specifier) => {
-      // Handle namespace imports e.g. import * as foo from 'bar'
-      if (typeof importSpecifier === 'object' && 'namespace' in importSpecifier) {
-        return (
-          specifier.type === 'ImportNamespaceSpecifier' &&
-          specifier.local.name === importSpecifier.namespace
-        );
+    const names = Array.isArray(importSpecifier) ? importNames(importSpecifier) : [];
+    this._removeImportSpecifiers(fromImport, (declaration, specifier) => {
+      if (isTypeOnly(declaration, specifier)) {
+        return false;
       }
       // Handle default imports e.g. import foo from 'bar'
       if (typeof importSpecifier === 'string') {
@@ -1054,51 +1130,41 @@ export class ConfigFile implements CsfObject {
         );
       }
       // Handle named imports e.g. import { foo } from 'bar'
+      if (Array.isArray(importSpecifier)) {
+        return (
+          specifier.type === 'ImportSpecifier' &&
+          names.some((name) => removesImport(name, specifier.imported, specifier.local))
+        );
+      }
+      // Handle namespace imports e.g. import * as foo from 'bar'
       return (
-        specifier.type === 'ImportSpecifier' &&
-        importSpecifier.some((name) => isIdentifier(specifier.imported, name))
+        specifier.type === 'ImportNamespaceSpecifier' &&
+        specifier.local.name === importSpecifier.namespace
       );
     });
-    if (removed.length === 0) {
-      return;
-    }
-
-    // If the import declaration has no specifiers left, remove it.
-    if (removed.length === importDeclaration.specifiers.length) {
-      removeStatement(editor, importDeclaration);
-      return;
-    }
-    setImportSpecifiers(
-      editor,
-      importDeclaration,
-      importDeclaration.specifiers.filter((specifier) => !removed.includes(specifier))
-    );
   }
 
   /**
-   * Remove import specifiers for a given import statement.
-   *
-   * Does not support removing type imports (yet)
+   * Remove import and `require` bindings of a module: a string removes the default import, an
+   * array named imports. A name removes every import of that export, whatever its local name;
+   * `'name as alias'` removes only the import under that alias. Type-only imports are left as they
+   * are.
    *
    * @example
    *
    * ```ts
    * // import { foo } from 'bar';
-   * setImport(['foo'], 'bar');
+   * removeImport(['foo'], 'bar');
    *
    * // import foo from 'bar';
-   * setImport('foo', 'bar');
+   * removeImport('foo', 'bar');
    *
    * // import * as foo from 'bar';
-   * setImport({ namespace: 'foo' }, 'bar');
+   * removeImport({ namespace: 'foo' }, 'bar');
    *
    * // import 'bar';
-   * setImport(null, 'bar');
+   * removeImport(null, 'bar');
    * ```
-   *
-   * @param importSpecifiers - The import specifiers to remove. If a string is passed in, will only
-   *   remove the default import. Otherwise, named imports matching the array will be removed.
-   * @param fromImport - The module to import from
    */
   removeImport(
     importSpecifier: string[] | string | { namespace: string } | null,
diff --git a/code/core/src/csf-tools/README.md b/code/core/src/csf-tools/README.md
index bde00c2e77be..2f44ea8ba956 100644
--- a/code/core/src/csf-tools/README.md
+++ b/code/core/src/csf-tools/README.md
@@ -48,6 +48,8 @@ if (config.changed && config.mutationDiagnostics.length === 0) {
 
 `ConfigFile.changed` and `ConfigFile.mutationDiagnostics` track these editor operations. Existing `getFieldNode` reads reflect editor changes. Array and import helpers remain available; their edits are not tracked by `changed`. `writeConfig` rejects files with mutation diagnostics to avoid writing partial edits.
 
+`setImport`, `setRequireImport`, and `removeImport` look at every import or top-level `require` of the module, and take a named binding as `'name'` or `'name as alias'`. `setImport` and `setRequireImport` skip a binding the module already provides under that local name. A binding that only an `import type` provides becomes a value import; other type-only imports are left alone. `removeImport` removes every import of a plain name, whatever its local name, but only the matching import of an alias. Added statements follow the file's quotes and semicolons.
+
 Discovery rejects shared or reassigned bindings, unresolved re-exports, and conditional or repeated CommonJS assignments. Inline object methods and exported function declarations can be transformed as function expressions while retaining their declaration form. Path edits use the same spread, duplicate-key, occupied-destination, and dynamic-value checks as story edits. Unsupported input produces diagnostics without rewriting that input.
 
 ## Transforming method call arguments
diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index a1617f0e551d..a72da53188b4 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -175,6 +175,22 @@ describe('style', () => {
     expect(new SourceEditor('const a = 1;').quote).toBe('"');
   });
 
+  it('ends statements with a semicolon unless most statements of the file omit it', () => {
+    expect(new SourceEditor("import a from 'a'\nconst b = 1\nexport default b;").semicolons).toBe(
+      false
+    );
+    expect(
+      new SourceEditor("import a from 'a';\nfor (let i = 0; i < 1; i++) a(i)").semicolons
+    ).toBe(true);
+    expect(new SourceEditor('export function f() {}').semicolons).toBe(true);
+    expect(
+      new SourceEditor(
+        'export type A = 1\ntype B = 2\nclass C { d = 1 }\nexport const e = 1;',
+        'a.ts'
+      ).semicolons
+    ).toBe(false);
+  });
+
   it('keeps the style of the code it was created with after a commit', () => {
     const editor = new SourceEditor("const a = 'a';\n");
     editor.edits.overwrite(10, 13, '1');
@@ -624,6 +640,12 @@ describe('prependStatement', () => {
     expect(editor.toString()).toBe(`\uFEFF// @ts-nocheck\nimport a from 'a';\n`);
   });
 
+  it('ends the statement when the first statement would continue it', () => {
+    const editor = new SourceEditor(`[1].map(f)\n`);
+    prependStatement(editor, `const a = require('a')`);
+    expect(editor.toString()).toBe(`const a = require('a');\n[1].map(f)\n`);
+  });
+
   it('inserts right after the BOM of a file with nothing else', () => {
     const editor = new SourceEditor('\uFEFF');
     prependStatement(editor, `import a from 'a';`);
@@ -792,6 +814,11 @@ describe('setImportSpecifiers', () => {
     setImportSpecifiers(editor, second, second.specifiers, { default: 'D', named: ['e'] });
     expect(editor.toString()).toBe(`import A, { c } from 'x';\nimport D, { b, e } from 'y';`);
 
+    const aliased = new SourceEditor(`import { a } from 'x';`);
+    const imported = aliased.program.body[0] as E.ImportDeclaration;
+    setImportSpecifiers(aliased, imported, imported.specifiers, { named: ['b as c'] });
+    expect(aliased.toString()).toBe(`import { a, b as c } from 'x';`);
+
     const replaced = new SourceEditor(`import { a, b } from 'x';`);
     const declaration = replaced.program.body[0] as E.ImportDeclaration;
     setImportSpecifiers(replaced, declaration, [declaration.specifiers[0]], { named: ['c'] });
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 80634e8d1ed1..2b79fef04ff9 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -271,17 +271,51 @@ export class SourceEditor {
     this._style ??= inferStyle(this._module);
     return this._style.indent;
   }
+
+  /** Whether statements to generate end with `;`: false only when most statements of the file omit it. */
+  get semicolons() {
+    this._style ??= inferStyle(this._module);
+    return this._style.semicolons;
+  }
 }
 
-type Style = { quote: "'" | '"'; indent: string };
+type Style = { quote: "'" | '"'; indent: string; semicolons: boolean };
+
+// Statements and class fields that end with an optional `;`. A declaration in a `for` head has none;
+// an exported declaration ends with the `;` of its `export`.
+const endsWithOptionalSemicolon = (node: Node, parent: Node | null) => {
+  switch (node.type) {
+    case 'ImportDeclaration':
+    case 'ExportAllDeclaration':
+    case 'ExpressionStatement':
+    case 'ReturnStatement':
+    case 'ThrowStatement':
+      return true;
+    case 'TSTypeAliasDeclaration':
+    case 'PropertyDefinition':
+      return true;
+    case 'ExportNamedDeclaration':
+      return !node.declaration;
+    case 'ExportDefaultDeclaration':
+      return !/Declaration$/.test(node.declaration.type);
+    case 'VariableDeclaration':
+      return !parent?.type.startsWith('For');
+    default:
+      return false;
+  }
+};
 
 // The style of the code the editor was created with, so edits do not change it. A tie between
 // quotes goes to the first literal; JSX attributes are left out, as they keep double quotes.
 const inferStyle = ({ code, program }: ParsedModule): Style => {
   const counts = { "'": 0, '"': 0 };
+  const endings = { with: 0, without: 0 };
   let first: "'" | '"' | undefined;
   let indent: string | undefined;
   walk(program, (node, parent) => {
+    if (endsWithOptionalSemicolon(node, parent)) {
+      endings[code[node.end - 1] === ';' ? 'with' : 'without']++;
+    }
     if (isStringLiteral(node) && parent?.type !== 'JSXAttribute') {
       const quote = node.raw?.[0];
       if (quote === "'" || quote === '"') {
@@ -293,7 +327,7 @@ const inferStyle = ({ code, program }: ParsedModule): Style => {
   });
   const quote =
     counts["'"] === counts['"'] ? (first ?? '"') : counts["'"] > counts['"'] ? "'" : '"';
-  return { quote, indent: indent ?? '  ' };
+  return { quote, indent: indent ?? '  ', semicolons: endings.without <= endings.with };
 };
 
 // The indent step from a block's line to the line of its first item, if that is a deeper one.
@@ -1098,7 +1132,12 @@ export const prependStatement = (editor: SourceEditor, text: string) => {
     appendStatement(editor, text);
     return;
   }
-  editor.edits.appendRight((leadingComments(editor, first)[0] ?? first).start, `${text}\n`);
+  const separator =
+    !text.endsWith(';') && CONTINUES_STATEMENT.test(editor.code.slice(first.start)) ? ';' : '';
+  editor.edits.appendRight(
+    (leadingComments(editor, first)[0] ?? first).start,
+    `${text}${separator}\n`
+  );
 };
 
 // Whether pending edits removed a span; one cutting through either end of it counts as that.
@@ -1187,7 +1226,7 @@ export const removeStatements = (editor: SourceEditor, statements: ReadonlySet<N
 
 /**
  * Rewrite an import's specifiers to `kept` plus `added`, keeping each kept specifier as written,
- * comments and layout included.
+ * comments and layout included. A named specifier is its source text, such as `a` or `a as b`.
  */
 export const setImportSpecifiers = (
   editor: SourceEditor,

From ab9c83ea96af5047d19d5964b00cd366b1820dc0 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 10:18:21 +0200
Subject: [PATCH 255/326] fix(csf-tools): return a mutation result from the
 array helpers instead of throwing

appendValueToArray, appendNodeToArray and removeEntryFromArray threw on a
field that is not an array literal, while every other ConfigFile mutation
returns a CsfMutationResult and records a diagnostic. A caller had to wrap
them in try/catch and could not tell a bad config from a bug.

They now return a CsfMutationResult: a field that is not an array literal
leaves the file as written and adds an `unsupported-value` diagnostic to
mutationDiagnostics, and a successful edit sets `changed`. A missing entry
in removeEntryFromArray is a no-op, like `remove` of a missing field.
setupAddonInConfig, which relied on the throw to stop before writing, now
throws the diagnostic itself.

This changes behaviour for callers that caught the throw and wrote the file
anyway: the diagnostic now makes writeConfig refuse it, and a missing entry
no longer throws.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../utils/setup-addon-in-config.test.ts       | 23 ++++-
 .../src/common/utils/setup-addon-in-config.ts | 16 ++--
 code/core/src/csf-tools/ConfigFile.test.ts    | 69 ++++++++-------
 code/core/src/csf-tools/ConfigFile.ts         | 85 +++++++++++--------
 code/core/src/csf-tools/README.md             |  6 +-
 5 files changed, 121 insertions(+), 78 deletions(-)

diff --git a/code/core/src/common/utils/setup-addon-in-config.test.ts b/code/core/src/common/utils/setup-addon-in-config.test.ts
index 6938324b06cc..0939353409eb 100644
--- a/code/core/src/common/utils/setup-addon-in-config.test.ts
+++ b/code/core/src/common/utils/setup-addon-in-config.test.ts
@@ -25,8 +25,8 @@ describe('setupAddonInConfig', () => {
       _editor: { quote: "'" },
       getBodyDeclarations: () => [],
       getFieldNode: vi.fn(),
-      appendNodeToArray: vi.fn(),
-      appendValueToArray: vi.fn(),
+      appendNodeToArray: vi.fn(() => ({ ok: true, changed: true })),
+      appendValueToArray: vi.fn(() => ({ ok: true, changed: true })),
     } as any;
 
     mockMainConfig = {
@@ -104,6 +104,25 @@ describe('setupAddonInConfig', () => {
     expect(csfTools.writeConfig).toHaveBeenCalledWith(mockMain);
   });
 
+  it('throws without writing when the addons field is not an array', async () => {
+    const diagnostic = { message: "Expected an array literal at 'addons', got 'Identifier'" };
+    vi.mocked(mockMain.appendValueToArray).mockReturnValue({
+      ok: false,
+      changed: false,
+      diagnostic,
+    } as any);
+
+    await expect(
+      setupAddonInConfig({
+        addonName: '@storybook/addon-docs',
+        mainConfigCSFFile: mockMain,
+        previewConfigPath: undefined,
+        configDir: '.storybook',
+      })
+    ).rejects.toThrow(diagnostic.message);
+    expect(csfTools.writeConfig).not.toHaveBeenCalled();
+  });
+
   it('should handle sync errors gracefully', async () => {
     vi.mocked(mockMain.getFieldNode).mockReturnValue(undefined);
     vi.mocked(syncModule.syncStorybookAddons).mockRejectedValue(new Error('Sync failed'));
diff --git a/code/core/src/common/utils/setup-addon-in-config.ts b/code/core/src/common/utils/setup-addon-in-config.ts
index a1e3dd391e5f..fc123e246170 100644
--- a/code/core/src/common/utils/setup-addon-in-config.ts
+++ b/code/core/src/common/utils/setup-addon-in-config.ts
@@ -25,13 +25,15 @@ export async function setupAddonInConfig({
   mainConfigCSFFile,
 }: SetupAddonInConfigOptions): Promise<void> {
   const mainConfigAddons = mainConfigCSFFile.getFieldNode(['addons']);
-  if (mainConfigAddons && getAbsolutePathWrapperName(mainConfigCSFFile) !== null) {
-    mainConfigCSFFile.appendNodeToArray(
-      ['addons'],
-      parseExpression(getAbsolutePathCall(mainConfigCSFFile, addonName))
-    );
-  } else {
-    mainConfigCSFFile.appendValueToArray(['addons'], addonName);
+  const result =
+    mainConfigAddons && getAbsolutePathWrapperName(mainConfigCSFFile) !== null
+      ? mainConfigCSFFile.appendNodeToArray(
+          ['addons'],
+          parseExpression(getAbsolutePathCall(mainConfigCSFFile, addonName))
+        )
+      : mainConfigCSFFile.appendValueToArray(['addons'], addonName);
+  if (!result.ok) {
+    throw new Error(result.diagnostic.message);
   }
 
   await writeConfig(mainConfigCSFFile);
diff --git a/code/core/src/csf-tools/ConfigFile.test.ts b/code/core/src/csf-tools/ConfigFile.test.ts
index 37264b512be5..3e4bc9057d23 100644
--- a/code/core/src/csf-tools/ConfigFile.test.ts
+++ b/code/core/src/csf-tools/ConfigFile.test.ts
@@ -781,16 +781,28 @@ describe('ConfigFile', () => {
         `export default { core: { builder: 'webpack5' }, addons: ['docs'] };`
       );
     });
-    it('found scalar', () => {
-      expect(() =>
-        appendToArray(
-          ['addons'],
-          'docs',
-          dedent`
-              export default { addons: 5 };
-            `
-        )
-      ).toThrowErrorMatchingInlineSnapshot(`Error: Expected array at 'addons', got 'Literal'`);
+    it('reports a field that is not an array literal and leaves it as written', () => {
+      const config = loadConfig(`export default { addons: 5 };`).parse();
+      const result = config.appendValueToArray(['addons'], 'docs');
+
+      expect(result).toEqual({
+        ok: false,
+        changed: false,
+        diagnostic: expect.objectContaining({ code: 'unsupported-value', path: ['addons'] }),
+      });
+      expect(config.mutationDiagnostics).toHaveLength(1);
+      expect(config.appendNodeToArray(['addons'], parseExpression('docs'))).toMatchObject({
+        ok: false,
+      });
+      expect(config.changed).toBe(false);
+      expect(printConfig(config).code).toBe(`export default { addons: 5 };`);
+    });
+
+    it('reports a change like the other mutations', () => {
+      const config = loadConfig(`export default { addons: [] };`).parse();
+
+      expect(config.appendValueToArray(['addons'], 'docs')).toEqual({ ok: true, changed: true });
+      expect(config.changed).toBe(true);
     });
     it('array of simple values', () => {
       expect(
@@ -2299,28 +2311,25 @@ describe('ConfigFile', () => {
       );
     });
 
-    it('throws when entry is missing', () => {
-      const source = dedent`
-        export default {
-          addons: ['a', { name: 'b', options: {} }, 'c'],
-        }
-      `;
-      const config = loadConfig(source).parse();
-      expect(() => config.removeEntryFromArray(['addons'], 'x')).toThrowErrorMatchingInlineSnapshot(
-        `Error: Could not find 'x' in array at 'addons'`
-      );
+    it('leaves an array without the entry unchanged, like a missing field', () => {
+      const config = loadConfig(`export default { addons: ['a'] };`).parse();
+
+      expect(config.removeEntryFromArray(['addons'], 'x')).toEqual({ ok: true, changed: false });
+      expect(config.removeEntryFromArray(['stories'], 'x')).toEqual({ ok: true, changed: false });
+      expect(config.removeEntryFromArray(['addons'], 'a')).toEqual({ ok: true, changed: true });
+      expect(config.changed).toBe(true);
     });
 
-    it('throws when target array is not an arral', () => {
-      const source = dedent`
-        export default {
-          addons: {},
-        }
-      `;
-      const config = loadConfig(source).parse();
-      expect(() => config.removeEntryFromArray(['addons'], 'x')).toThrowErrorMatchingInlineSnapshot(
-        `Error: Expected array at 'addons', got 'ObjectExpression'`
-      );
+    it('reports a field that is not an array literal', () => {
+      const config = loadConfig(`export default { addons: {} };`).parse();
+      const result = config.removeEntryFromArray(['addons'], 'x');
+
+      expect(result).toEqual({
+        ok: false,
+        changed: false,
+        diagnostic: expect.objectContaining({ code: 'unsupported-value', path: ['addons'] }),
+      });
+      expect(config.mutationDiagnostics).toHaveLength(1);
     });
   });
 
diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index b39bc524d216..1eba1ec80ecb 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -756,60 +756,71 @@ export class ConfigFile implements CsfObject {
     }
   }
 
-  appendValueToArray(path: string[], value: any) {
-    const node = this.valueToNode(value);
-
-    if (node) {
-      this.appendNodeToArray(path, node);
-    }
+  /** Append a plain value to the array literal at a path, creating the field when it is missing. */
+  appendValueToArray(path: string[], value: any): CsfMutationResult {
+    return this.appendNodeToArray(path, this.valueToNode(value));
   }
 
-  appendNodeToArray(path: string[], node: CsfExpression) {
+  /** Append an expression to the array literal at a path, creating the field when it is missing. */
+  appendNodeToArray(path: string[], node: CsfExpression): CsfMutationResult {
     const current = this.getFieldNode(path);
     const source = placeableTextOf(node);
     if (!current) {
-      this.set(path, parseExpression(`[${source}]`));
-    } else if (current.type === 'ArrayExpression') {
-      appendToList(this._editor, arrayList(this._editor, current), [source]);
-      this._editor.commit();
-    } else {
-      throw new Error(`Expected array at '${path.join('.')}', got '${current.type}'`);
+      return this.set(path, parseExpression(`[${source}]`));
+    }
+    if (current.type !== 'ArrayExpression') {
+      return this._notAnArray(path, current);
     }
+    appendToList(this._editor, arrayList(this._editor, current), [source]);
+    this._editor.commit();
+    this._changed = true;
+    return { ok: true, changed: true };
   }
 
   /**
-   * Specialized helper to remove addons or other array entries that can either be strings or
-   * objects with a name property.
+   * Remove the first entry of the array literal at a path that names `value`: a string, a
+   * `{ name }` object, or a call like `getAbsolutePath(value)`. A missing field or entry is a no-op.
    */
-  removeEntryFromArray(path: string[], value: string) {
+  removeEntryFromArray(path: string[], value: string): CsfMutationResult {
     const current = this.getFieldNode(path);
-
     if (!current) {
-      return;
+      return { ok: true, changed: false };
     }
-    if (current.type === 'ArrayExpression') {
-      const element = current.elements.find((element) => {
-        if (isStringLiteral(element)) {
-          return element.value === value;
-        }
-        if (element?.type === 'ObjectExpression') {
-          const name = this._getPresetValue(element, 'name');
-          return name === value;
-        }
-        return element ? this._getWrappedValue(element) === value : false;
-      });
-      if (element) {
-        removeFromList(this._editor, arrayList(this._editor, current), [element]);
-        this._editor.commit();
-      } else {
-        throw new Error(`Could not find '${value}' in array at '${path.join('.')}'`);
+    if (current.type !== 'ArrayExpression') {
+      return this._notAnArray(path, current);
+    }
+    const element = current.elements.find((element) => {
+      if (isStringLiteral(element)) {
+        return element.value === value;
       }
-    } else {
-      throw new Error(`Expected array at '${path.join('.')}', got '${current.type}'`);
+      if (element?.type === 'ObjectExpression') {
+        const name = this._getPresetValue(element, 'name');
+        return name === value;
+      }
+      return element ? this._getWrappedValue(element) === value : false;
+    });
+    if (!element) {
+      return { ok: true, changed: false };
     }
+    removeFromList(this._editor, arrayList(this._editor, current), [element]);
+    this._editor.commit();
+    this._changed = true;
+    return { ok: true, changed: true };
+  }
+
+  _notAnArray(path: string[], node: Node): CsfMutationResult {
+    const diagnostic: CsfMutationDiagnostic = {
+      code: 'unsupported-value',
+      target: this.target,
+      path,
+      message: `Expected an array literal at '${path.join('.')}', got '${node.type}'`,
+      loc: locationOf(this._code, node.start, node.end),
+    };
+    this._mutationDiagnostics.push(diagnostic);
+    return { ok: false, changed: false, diagnostic };
   }
 
-  valueToNode(value: any): CsfExpression | undefined {
+  valueToNode(value: any): CsfExpression {
     return parseExpression(printValue(value, this._editor.quote));
   }
 
diff --git a/code/core/src/csf-tools/README.md b/code/core/src/csf-tools/README.md
index 2f44ea8ba956..edb1f5c8c2da 100644
--- a/code/core/src/csf-tools/README.md
+++ b/code/core/src/csf-tools/README.md
@@ -46,9 +46,11 @@ if (config.changed && config.mutationDiagnostics.length === 0) {
 }
 ```
 
-`ConfigFile.changed` and `ConfigFile.mutationDiagnostics` track these editor operations. Existing `getFieldNode` reads reflect editor changes. Array and import helpers remain available; their edits are not tracked by `changed`. `writeConfig` rejects files with mutation diagnostics to avoid writing partial edits.
+`ConfigFile.changed` and `ConfigFile.mutationDiagnostics` track these editor operations. Existing `getFieldNode` reads reflect editor changes. `writeConfig` rejects files with mutation diagnostics to avoid writing partial edits.
 
-`setImport`, `setRequireImport`, and `removeImport` look at every import or top-level `require` of the module, and take a named binding as `'name'` or `'name as alias'`. `setImport` and `setRequireImport` skip a binding the module already provides under that local name. A binding that only an `import type` provides becomes a value import; other type-only imports are left alone. `removeImport` removes every import of a plain name, whatever its local name, but only the matching import of an alias. Added statements follow the file's quotes and semicolons.
+`appendValueToArray`, `appendNodeToArray`, and `removeEntryFromArray` return a `CsfMutationResult` like the editor operations. A field that is not an array literal leaves the file as it is and adds an `unsupported-value` diagnostic; a missing field or entry is a no-op for `removeEntryFromArray`.
+
+`setImport`, `setRequireImport`, and `removeImport` look at every import or top-level `require` of the module, and take a named binding as `'name'` or `'name as alias'`. `setImport` and `setRequireImport` skip a binding the module already provides under that local name. A binding that only an `import type` provides becomes a value import; other type-only imports are left alone. `removeImport` removes every import of a plain name, whatever its local name, but only the matching import of an alias. Added statements follow the file's quotes and semicolons. Import helper edits are not tracked by `changed`.
 
 Discovery rejects shared or reassigned bindings, unresolved re-exports, and conditional or repeated CommonJS assignments. Inline object methods and exported function declarations can be transformed as function expressions while retaining their declaration form. Path edits use the same spread, duplicate-key, occupied-destination, and dynamic-value checks as story edits. Unsupported input produces diagnostics without rewriting that input.
 

From 58b8356e081180514d84b73260f74e1eed685e7c Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 10:21:55 +0200
Subject: [PATCH 256/326] feat(csf-tools): expose the edited object literal as
 CsfObject.node

A consumer that holds a CsfObject and needs the object itself, to inspect
members the path API does not cover or to anchor its own edit, had to run
discovery again and match the target by hand. The editor already finds its
object in the current parse after every commit, so it now exposes it.

`node` returns the meta or story object, the object assigned to a CSF2
annotation, or the config object, and `undefined` for a config made of
named exports. It is the file's own node rather than a detached copy, read
again on every access, and reading it adds no diagnostic.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/ConfigFile.ts     | 18 +++++++++++-
 code/core/src/csf-tools/CsfObject.test.ts | 35 +++++++++++++++++++++++
 code/core/src/csf-tools/CsfObject.ts      | 20 +++++++++++++
 code/core/src/csf-tools/README.md         |  1 +
 4 files changed, 73 insertions(+), 1 deletion(-)

diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index 1eba1ec80ecb..99a6943b7a66 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -6,7 +6,7 @@ import { dedent } from 'ts-dedent';
 import invariant from 'tiny-invariant';
 
 import type { PrintResultType } from './PrintResultType.ts';
-import { createConfigObject } from './ConfigObject.ts';
+import { createConfigObject, locateConfigRoot } from './ConfigObject.ts';
 import {
   type CsfExpression,
   type CsfMutationDiagnostic,
@@ -211,6 +211,22 @@ export class ConfigFile implements CsfObject {
     return this._changed;
   }
 
+  /**
+   * Find the config object literal in the current parse, or `undefined` for a config made of named
+   * exports or one whose config object cannot be located. It is the file's own node, not a copy: do
+   * not change it, and read it again after a mutation, which parses the file again.
+   *
+   * @example
+   * ```ts
+   * const config = loadConfig('export default definePreview({ tags: [] });').parse();
+   * textOf(config.node!); // '{ tags: [] }'
+   * ```
+   */
+  get node(): E.ObjectExpression | undefined {
+    const located = locateConfigRoot(this, 'read');
+    return located.ok ? located.root.node : undefined;
+  }
+
   /**
    * Read diagnostics from unsupported discovery, reads, or mutations. `writeConfig` refuses to
    * write a config with diagnostics, even if another edit succeeded.
diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index 47b229b406d6..c0528b0b45d6 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -1187,3 +1187,38 @@ describe('CsfObject', () => {
     });
   });
 });
+
+describe('CsfObject.node', () => {
+  it('returns the object literal of the current parse, found again after an edit', () => {
+    const csf = parse(`export default { title: 'A' };\nexport const Primary = { args: {} };`);
+    const [meta, story] = csf.objects();
+    const before = story.node!;
+
+    expect(textOf(before)).toBe('{ args: {} }');
+    expect(meta.node).toBe(csf._metaNode);
+
+    story.set(['args', 'disabled'], true);
+
+    expect(story.node).not.toBe(before);
+    expect(textOf(story.node!)).toBe('{ args: { disabled: true } }');
+  });
+
+  it('returns the assigned object of a CSF2 annotation and the argument of a factory', () => {
+    const csf = parse(
+      `export default {};\nexport const Primary = () => null;\nPrimary.parameters = { a: 1 };`
+    );
+    const [annotation] = csf.objects({ meta: false });
+
+    expect(textOf(annotation.node!)).toBe('{ a: 1 }');
+
+    const config = loadConfig(`export default definePreview({ tags: [] });`).parse();
+    expect(textOf(config.node!)).toBe('{ tags: [] }');
+  });
+
+  it('returns undefined for a config made of named exports, without a diagnostic', () => {
+    const config = loadConfig(`export const tags = [];`).parse();
+
+    expect(config.node).toBeUndefined();
+    expect(config.mutationDiagnostics).toEqual([]);
+  });
+});
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index e7368a8d2af7..6d6463df3df4 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -108,6 +108,22 @@ export interface CsfObject {
    * ```
    */
   readonly changed: boolean;
+  /**
+   * Find the object literal this editor edits in the current parse; for a CSF2 annotation editor,
+   * the object its annotation path names. It is `undefined` for a config made of named exports and
+   * once the object is gone. It is the file's own node, not a copy: do not change it, and read it
+   * again after a mutation, which parses the file again.
+   *
+   * @example
+   * ```ts
+   * const csf = loadCsf('export default {}; export const Primary = { args: {} };', {
+   *   makeTitle: () => 'Example',
+   * }).parse();
+   * const [story] = csf.objects({ meta: false });
+   * textOf(story.node!); // '{ args: {} }'
+   * ```
+   */
+  readonly node: E.ObjectExpression | undefined;
   /**
    * Read a detached copy of the expression at a property path. For a CSF2 annotation, its
    * annotation path returns the whole object. Missing fields return `undefined`.
@@ -370,6 +386,10 @@ class CsfObjectEditor implements CsfObject {
     return this.#changed;
   }
 
+  get node() {
+    return this.host.root()?.node;
+  }
+
   private get editor() {
     return this.host.editor;
   }
diff --git a/code/core/src/csf-tools/README.md b/code/core/src/csf-tools/README.md
index edb1f5c8c2da..c88e14315ce4 100644
--- a/code/core/src/csf-tools/README.md
+++ b/code/core/src/csf-tools/README.md
@@ -22,6 +22,7 @@ Successful removals and moves recursively remove empty source parents, stopping
 Nested object paths can follow local constants used only by that object; shared or reassigned references remain untouched.
 Nodes reused by `transform` keep their original source, so relocating a value prints it as written instead of pretty-printing it.
 `group(path, names)` nests named siblings under a destination object, retaining their source order. A new group replaces a contiguous run of source fields at their original position. Grouping into an existing object requires values whose relocation cannot change expression evaluation order. Conflicts, ambiguous keys, and unsafe relocations produce diagnostics before the operation changes the source; absent source fields are ignored.
+`node` is the editor's object literal in the current parse: the meta or story object, a call argument, a config object, or for a CSF2 annotation editor the assigned object that its annotation path (such as `['parameters']`) names. It is the file's own node, found again after every mutation: read it after editing instead of keeping it, and do not change it, since edits go through the source. It is `undefined` for a config made of named exports and once the object is gone.
 Annotation editors take the same paths as their story counterparts, so `['parameters', 'a11y']` addresses `Story.parameters.a11y` and an inline `parameters.a11y` alike.
 
 Discovery and mutation are conservative: an object or a path whose shape cannot be proven is left untouched, and the reason is reported on `CsfFile.mutationDiagnostics` as a `CsfMutationDiagnostic`.

From 08b60d1b3a9a4594358cba35f079ec4a044d4182 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 10:25:05 +0200
Subject: [PATCH 257/326] feat(csf-tools): expose the meta component's import
 as CsfFile.componentImport

`meta.component` is the component as written and `imports` lists module
specifiers, but which export a component was imported as, and under which
local name, was only on the private `_componentImportSpecifier` node. An
addon that rewrites or resolves the component had to reach into it and
handle default and string-named specifiers itself.

`componentImport` returns `{ source, imported, local }`, with `imported`
set to `'default'` for a default import, or `undefined` when `component` is
not an identifier bound by a default or named import.
`_componentImportSpecifier` stays as it is for the vitest transformer.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/CsfFile.test.ts | 34 +++++++++++++++++++++++
 code/core/src/csf-tools/CsfFile.ts      | 36 +++++++++++++++++++++++++
 code/core/src/csf-tools/README.md       |  2 ++
 3 files changed, 72 insertions(+)

diff --git a/code/core/src/csf-tools/CsfFile.test.ts b/code/core/src/csf-tools/CsfFile.test.ts
index 1f56c75db6d1..34199647bd79 100644
--- a/code/core/src/csf-tools/CsfFile.test.ts
+++ b/code/core/src/csf-tools/CsfFile.test.ts
@@ -2488,6 +2488,40 @@ describe('CsfFile', () => {
     });
   });
 
+  describe('component import', () => {
+    const componentImport = (code: string) =>
+      loadCsf(code, { makeTitle, fileName: 'Button.stories.ts' }).parse().componentImport;
+
+    it.each([
+      {
+        code: `import { Button as B } from './Button';\nexport default { component: B };`,
+        expected: { source: './Button', imported: 'Button', local: 'B' },
+      },
+      {
+        code: `import Button from './Button';\nexport default { component: Button };`,
+        expected: { source: './Button', imported: 'default', local: 'Button' },
+      },
+      {
+        code: `import { 'my-button' as B } from 'lib';\nexport default { component: B };`,
+        expected: { source: 'lib', imported: 'my-button', local: 'B' },
+      },
+      {
+        code: `import preview from '#.storybook/preview';\nimport { Button } from './Button';\nconst meta = preview.meta({ component: Button });\nexport const A = meta.story();`,
+        expected: { source: './Button', imported: 'Button', local: 'Button' },
+      },
+    ])('reads $expected.local from $expected.source', ({ code, expected }) => {
+      expect(componentImport(code)).toEqual(expected);
+    });
+
+    it.each([
+      `export default {};`,
+      `const Button = () => null;\nexport default { component: Button };`,
+      `import * as UI from './ui';\nexport default { component: UI.Button };`,
+    ])('is undefined for %s', (code) => {
+      expect(componentImport(code)).toBeUndefined();
+    });
+  });
+
   describe('beforeEach', () => {
     it('basic', () => {
       expect(
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index ec5849435aec..47cee9f5b38f 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -313,6 +313,13 @@ export interface StoryTest {
   parent: { node: Node | undefined };
 }
 
+/** The import a meta's `component` refers to: `imported` is `'default'` for a default import. */
+export interface CsfComponentImport {
+  source: string;
+  imported: string;
+  local: string;
+}
+
 export class CsfFile {
   _editor: SourceEditor;
 
@@ -1104,6 +1111,35 @@ export class CsfFile {
     return this._meta;
   }
 
+  /**
+   * Read the import the meta's `component` refers to, or `undefined` when `component` is not an
+   * identifier bound by a default or named import, such as a local component, a namespace import or
+   * member, or `Button as any`.
+   *
+   * @example
+   * ```ts
+   * const csf = loadCsf(
+   *   "import { Button as B } from './Button';\nexport default { component: B };",
+   *   { makeTitle: () => 'Example' }
+   * ).parse();
+   * csf.componentImport; // { source: './Button', imported: 'Button', local: 'B' }
+   * ```
+   */
+  public get componentImport(): CsfComponentImport | undefined {
+    this._assertIndexed();
+    const specifier = this._componentImportSpecifier;
+    if (!specifier || this._rawComponentPath === undefined) {
+      return undefined;
+    }
+    const imported =
+      specifier.type === 'ImportDefaultSpecifier'
+        ? 'default'
+        : specifier.imported.type === 'Identifier'
+          ? specifier.imported.name
+          : specifier.imported.value;
+    return { source: this._rawComponentPath, imported, local: specifier.local.name };
+  }
+
   public get stories() {
     this._assertIndexed();
     return Object.values(this._stories);
diff --git a/code/core/src/csf-tools/README.md b/code/core/src/csf-tools/README.md
index c88e14315ce4..df4daac98f3f 100644
--- a/code/core/src/csf-tools/README.md
+++ b/code/core/src/csf-tools/README.md
@@ -9,6 +9,8 @@ An experimental library to read, analyze, transform, and write CSF programmatica
 
 It can parse MDX into CSF.
 
+`CsfFile.meta.component` is the meta's `component` as written. `CsfFile.componentImport` is the import it refers to, as `{ source, imported, local }`, so `import { Button as B } from './Button'` gives `{ source: './Button', imported: 'Button', local: 'B' }`; `imported` is `'default'` for a default import. It is `undefined` when `component` is not an identifier bound by a default or named import, such as a local component, a namespace import or a member like `UI.Button`, or `Button as any`.
+
 ## Transforming stories
 
 `CsfFile.objects()` returns one `CsfObject` editor per mutable object it can prove safe to edit: the meta, each story export, and each CSF2 `Story.parameters` / `Story.argTypes` annotation assignment.

From 89aee3c440f58fd49437685f6435c3836727639c Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 10:28:28 +0200
Subject: [PATCH 258/326] docs(csf-tools): explain how to tell a missing field
 from an unreadable one

`get` and `getValue` return `undefined` for a missing field and for one
they cannot read statically, and the README only said so for `getValue`.
A port that treats every `undefined` as missing overwrites values it could
not see. The README now spells out both cases, that only the second adds a
CsfMutationDiagnostic, that a field written as `undefined` is a third case
`get` can tell apart, and shows the before/after diagnostics check. It also
notes that a read diagnostic makes writeConfig refuse the file.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/ConfigFile.ts |  4 +++-
 code/core/src/csf-tools/CsfObject.ts  |  4 +++-
 code/core/src/csf-tools/README.md     | 18 +++++++++++++++++-
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index 99a6943b7a66..12174059305f 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -244,7 +244,9 @@ export class ConfigFile implements CsfObject {
   }
 
   /**
-   * Read a detached copy of the expression at a property path. Missing fields return `undefined`.
+   * Read a detached copy of the expression at a property path. Missing fields return `undefined`;
+   * so does a path through a value that is not an object literal, or one a spread, computed key, or
+   * duplicate field leaves unproven, which also adds a mutation diagnostic.
    *
    * @example
    * ```ts
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index 6d6463df3df4..1c663eaeb4ea 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -126,7 +126,9 @@ export interface CsfObject {
   readonly node: E.ObjectExpression | undefined;
   /**
    * Read a detached copy of the expression at a property path. For a CSF2 annotation, its
-   * annotation path returns the whole object. Missing fields return `undefined`.
+   * annotation path returns the whole object. Missing fields return `undefined`; so does a path
+   * through a value that is not an object literal, or one a spread, computed key, or duplicate field
+   * leaves unproven, which also adds a mutation diagnostic.
    *
    * @example
    * ```ts
diff --git a/code/core/src/csf-tools/README.md b/code/core/src/csf-tools/README.md
index df4daac98f3f..ba44cb768bb2 100644
--- a/code/core/src/csf-tools/README.md
+++ b/code/core/src/csf-tools/README.md
@@ -17,7 +17,23 @@ It can parse MDX into CSF.
 `{ meta, stories }` narrows what is discovered; both are included by default. Story discovery also includes separate CSF2 parameter assignments, so callers use the same paths regardless of the source format.
 
 Each editor reads and writes static property paths with `get`, `getValue`, `set`, `transform`, `remove`, `rename`, `move`, and `group`.
-`get` returns an AST expression; `getValue` reads plain values from literals, nested arrays and objects, and local constants without executing code. Missing fields return `undefined`. Values that cannot be resolved statically return `undefined` and add a mutation diagnostic; reads never return a partially decoded object.
+`get` returns an AST expression; `getValue` reads plain values from literals, nested arrays and objects, and local constants without executing code. Reads never return a partially decoded object.
+
+`get` and `getValue` return `undefined` both for a field that is missing and for one that cannot be read statically. Only the second adds a `CsfMutationDiagnostic` to `mutationDiagnostics`. For `get` that is a path whose parent is not an object literal, or that a spread, a computed key, or a duplicate field leaves unproven; `getValue` also reports a value it cannot evaluate, such as a call or a function. A field written as `undefined` is `undefined` without a diagnostic too, but `get` returns its expression. Compare the diagnostics before and after a read to tell the cases apart:
+
+```ts
+const before = csf.mutationDiagnostics.length;
+const size = story.getValue(['args', 'size']);
+const [unreadable] = csf.mutationDiagnostics.slice(before);
+if (size === undefined && unreadable) {
+  // `args.size` may be set to a value that cannot be read statically: see `unreadable.code`
+} else if (size === undefined) {
+  // `args.size` is missing, or written as `undefined`
+}
+```
+
+Read diagnostics count like mutation ones, so `writeConfig` refuses a config after a read that added one.
+
 `set` accepts an expression from `get` or `parseExpression`, or plain strings, numbers, booleans, `null`, `undefined`, and nested arrays or objects of those values and expressions. An object whose `type` names an AST node is rejected with a diagnostic unless it came from `get` or `parseExpression`. Plain values are printed into the source, so later changes to the input do not affect the file.
 An expression from `get` is indented as if its line had no indent, and `set` and `transform` indent a value's lines like the line of the field it is written to, so a value copied between fields keeps its layout.
 Successful removals and moves recursively remove empty source parents, stopping at the editor's root object or an empty parent that shadows an earlier spread or computed key. Removing a field that could reveal an earlier spread value produces a diagnostic. Moves clean up after inserting the destination, so shared ancestors remain intact. Unrelated empty objects are preserved.

From f3969663130f89135665d8ac7c0557f424a9e052 Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <sidnioulz@gmail.com>
Date: Tue, 20 Oct 2026 11:23:18 +0200
Subject: [PATCH 259/326] JSDoc improvements

---
 .../common/js-package-manager/PNPMProxy.ts    | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/code/core/src/common/js-package-manager/PNPMProxy.ts b/code/core/src/common/js-package-manager/PNPMProxy.ts
index fdcb53f43e64..72572b8083df 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.ts
@@ -119,6 +119,12 @@ function hasAllowBuildsDecision(settings: unknown, pkg: string): boolean {
   );
 }
 
+/**
+ * Reads an existing `onlyBuiltDependenciesFile` and returns its contents as an array of package names or pins.
+ * @param file The path to the `onlyBuiltDependenciesFile`.
+ * @param dir The directory containing the `onlyBuiltDependenciesFile`.
+ * @returns An array of package names listed in the file, or an empty array if the file does not exist or is invalid.
+ */
 function readOnlyBuiltDependenciesFile(file: unknown, dir: string): unknown[] {
   if (typeof file !== 'string') {
     return [];
@@ -131,13 +137,23 @@ function readOnlyBuiltDependenciesFile(file: unknown, dir: string): unknown[] {
   }
 }
 
-// pnpm 10 refuses to combine `neverBuiltDependencies` with any allow list, so its presence alone
-// is a decision.
+/**
+ * Checks whether there is any user setting that indicates we cannot decide for them to
+ * preallow a package. This can be because they made an explicit decision, or because us
+ * setting `allowBuilds` in a `pnpm-workspace.yaml` file would lead to invalid config
+ * or unwanted side effects.
+ * @param settings The PNPM settings object to check.
+ * @param pkg The package name to check for an existing decision.
+ * @param dir The directory containing the `onlyBuiltDependenciesFile`.
+ * @returns `true` if there is an existing decision that prevents preallowing the package, `false` otherwise.
+ */
 function hasPnpm10ListDecision(settings: unknown, pkg: string, dir: string): boolean {
   if (!isRecord(settings)) {
     return false;
   }
   return (
+    // pnpm 10 refuses to combine `neverBuiltDependencies` with any allow list,
+    // so its presence alone is a decision.
     Array.isArray(settings.neverBuiltDependencies) ||
     listsPackage(settings.onlyBuiltDependencies, pkg) ||
     listsPackage(settings.ignoredBuiltDependencies, pkg) ||

From 266bce906a19af035a57cf641abf50a87ac2d8dd Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <sidnioulz@gmail.com>
Date: Tue, 20 Oct 2026 11:27:23 +0200
Subject: [PATCH 260/326] Core: Write pnpm-workspace.yaml directly and
 unit-test the build-script helpers

The workspace file is already written with a plain writeFileSync by the
catalog and minimum-release-age paths, so the temp-file rename was an
exception without a reason. The decision helpers move to their own
module so they can be tested on their own.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../PNPMProxy.catalog.test.ts                 |   6 +-
 .../js-package-manager/PNPMProxy.test.ts      |  20 +--
 .../common/js-package-manager/PNPMProxy.ts    | 120 +--------------
 .../pnpm-build-scripts.test.ts                | 141 ++++++++++++++++++
 .../js-package-manager/pnpm-build-scripts.ts  |  98 ++++++++++++
 5 files changed, 245 insertions(+), 140 deletions(-)
 create mode 100644 code/core/src/common/js-package-manager/pnpm-build-scripts.test.ts
 create mode 100644 code/core/src/common/js-package-manager/pnpm-build-scripts.ts

diff --git a/code/core/src/common/js-package-manager/PNPMProxy.catalog.test.ts b/code/core/src/common/js-package-manager/PNPMProxy.catalog.test.ts
index f7b1f91dc5c6..34deddbafd01 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.catalog.test.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.catalog.test.ts
@@ -1,4 +1,4 @@
-import { readFileSync, renameSync, unlinkSync, writeFileSync } from 'node:fs';
+import { readFileSync, writeFileSync } from 'node:fs';
 import { join } from 'pathe';
 
 import { beforeEach, describe, expect, it, vi } from 'vitest';
@@ -32,14 +32,10 @@ describe('PNPMProxy catalogs', () => {
     // Restore the real fs so the proxy can be constructed, then redirect fs to memfs.
     vi.mocked(readFileSync).mockReset();
     vi.mocked(writeFileSync).mockReset();
-    vi.mocked(renameSync).mockReset();
-    vi.mocked(unlinkSync).mockReset();
     pnpmProxy = new PNPMProxy();
     vol.reset();
     vi.mocked(readFileSync).mockImplementation(memfs.readFileSync as typeof readFileSync);
     vi.mocked(writeFileSync).mockImplementation(memfs.writeFileSync as typeof writeFileSync);
-    vi.mocked(renameSync).mockImplementation(memfs.renameSync as typeof renameSync);
-    vi.mocked(unlinkSync).mockImplementation(memfs.unlinkSync as typeof unlinkSync);
     vi.mocked(getProjectRoot).mockReturnValue('/root');
     vi.mocked(find.up).mockReturnValue(WORKSPACE_YAML);
     // Drive the version resolution through controllable inputs.
diff --git a/code/core/src/common/js-package-manager/PNPMProxy.test.ts b/code/core/src/common/js-package-manager/PNPMProxy.test.ts
index 18ff007be8d9..d3447580cc0a 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.test.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.test.ts
@@ -1,4 +1,4 @@
-import { readFileSync, renameSync, unlinkSync, writeFileSync } from 'node:fs';
+import { readFileSync, writeFileSync } from 'node:fs';
 
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
@@ -67,16 +67,12 @@ describe('PNPM Proxy', () => {
   beforeEach(() => {
     vi.mocked(readFileSync).mockReset();
     vi.mocked(writeFileSync).mockReset();
-    vi.mocked(renameSync).mockReset();
-    vi.mocked(unlinkSync).mockReset();
     mockPnpmVersion('11.18.0');
     pnpmProxy = new PNPMProxy();
     vol.reset();
     vol.mkdirSync(PROJECT_DIR, { recursive: true });
     vi.mocked(readFileSync).mockImplementation(memfs.readFileSync as typeof readFileSync);
     vi.mocked(writeFileSync).mockImplementation(memfs.writeFileSync as typeof writeFileSync);
-    vi.mocked(renameSync).mockImplementation(memfs.renameSync as typeof renameSync);
-    vi.mocked(unlinkSync).mockImplementation(memfs.unlinkSync as typeof unlinkSync);
     useMemfsProject(pnpmProxy);
     JsPackageManager.clearLatestVersionCache();
     vi.spyOn(pnpmProxy, 'writePackageJson').mockImplementation(vi.fn());
@@ -169,16 +165,6 @@ describe('PNPM Proxy', () => {
       await install();
 
       expect(workspaceYaml()).toBe('allowBuilds:\n  esbuild: true\n');
-      expect(writeFileSync).toHaveBeenCalledWith(
-        expect.stringMatching(/\/project\/pnpm-workspace\.yaml\.[0-9a-f]+\.tmp$/),
-        'allowBuilds:\n  esbuild: true\n',
-        'utf8'
-      );
-      expect(renameSync).toHaveBeenCalledWith(
-        expect.stringMatching(/\/project\/pnpm-workspace\.yaml\.[0-9a-f]+\.tmp$/),
-        WORKSPACE_YAML
-      );
-      expect(Object.keys(vol.toJSON()).some((filePath) => filePath.endsWith('.tmp'))).toBe(false);
       expect(mockedExecuteCommand).toHaveBeenCalledWith(
         expect.objectContaining({ command: 'pnpm', args: ['install'] })
       );
@@ -228,10 +214,6 @@ describe('PNPM Proxy', () => {
         'a git-pinned allowBuilds matcher',
         "allowBuilds:\n  'esbuild@git+ssh://git@example.com/esbuild.git': true\n",
       ],
-      [
-        'a pinned allowBuilds matcher pnpm has not resolved yet',
-        'allowBuilds:\n  esbuild@0.28.2: set this to true or false\n',
-      ],
       ['dangerouslyAllowAllBuilds', 'dangerouslyAllowAllBuilds: true\n'],
     ])('does not add a bare esbuild key when %s already covers it', async (_, yaml) => {
       vol.fromJSON({ [WORKSPACE_YAML]: yaml });
diff --git a/code/core/src/common/js-package-manager/PNPMProxy.ts b/code/core/src/common/js-package-manager/PNPMProxy.ts
index 72572b8083df..6153fd707ab3 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.ts
@@ -1,6 +1,5 @@
-import { randomBytes } from 'node:crypto';
-import { existsSync, readFileSync, renameSync, unlinkSync, writeFileSync } from 'node:fs';
-import { dirname, join, resolve } from 'pathe';
+import { existsSync, readFileSync, writeFileSync } from 'node:fs';
+import { dirname, join } from 'pathe';
 
 import { logger, prompt } from 'storybook/internal/node-logger';
 import {
@@ -20,6 +19,7 @@ import { executeCommand, executeCommandSync } from '../utils/command.ts';
 import { getProjectRoot } from '../utils/paths.ts';
 import { JsPackageManager, PackageManagerName } from './JsPackageManager.ts';
 import type { PackageJson } from './PackageJson.ts';
+import { hasAllowBuildsDecision, hasPnpm10ListDecision } from './pnpm-build-scripts.ts';
 import type { InstallationMetadata, PackageMetadata } from './types.ts';
 import {
   getAgeInMinutes,
@@ -65,118 +65,6 @@ const PNPM_LEGACY_BUILD_LISTS_REMOVED = '11.0.0';
 // Storybook dependencies with a build script that pnpm 10+ refuses to run until it is approved.
 const STORYBOOK_BUILD_SCRIPT_PACKAGES = ['esbuild'];
 
-const isRecord = (value: unknown): value is Record<string, unknown> =>
-  typeof value === 'object' && value !== null && !Array.isArray(value);
-
-/**
- * Matches a package name, including pinned versions of that package.
- * For instance, if `value` is `esbuild@0.25.0 || 0.25.1`, it matches `pkg` `esbuild`.
- * @param value The package name or pinned version to match against.
- * @param pkg The package name to check against the value.
- * @returns whether the package matches the given value.
- */
-const matchesPackage = (value: unknown, pkg: string): boolean =>
-  typeof value === 'string' && (value === pkg || value.startsWith(`${pkg}@`));
-
-/**
- * Checks if a list of packages matches a given package name, including if the
- * list contains pinned versions of that package.
- * @param list List of package names to check.
- * @param pkg The package name to check against the list of matchers.
- * @returns whether the package matches any of the entries in the list.
- */
-const listsPackage = (list: unknown, pkg: string): boolean =>
-  Array.isArray(list) && list.some((value) => matchesPackage(value, pkg));
-
-/**
- * Checks if PNPM settings contain an `allowBuilds` decision for the given package.
- * Does not check whether it's allowed or refused, we only care to not modify `allowBuilds`
- * when a pre-existing user decision exists.
- *
- * Note however that PNPM 12 inserts placeholder keys in `allowBuilds` for package names
- * where the user has not made a decision. This does not happen for pinned versions but
- * only for exact matches. So we verify we do have a boolean value for exact matches.
- *
- * @param settings The PNPM settings object to check.
- * @param pkg The package name to check for an `allowBuilds` decision.
- * @returns `true` if there is an existing `allowBuilds` decision for the package, `false` otherwise.
- */
-function hasAllowBuildsDecision(settings: unknown, pkg: string): boolean {
-  if (!isRecord(settings)) {
-    return false;
-  }
-
-  if (settings.dangerouslyAllowAllBuilds === true) {
-    return true;
-  }
-
-  const { allowBuilds } = settings;
-  return (
-    isRecord(allowBuilds) &&
-    Object.keys(allowBuilds).some(
-      (matcher) => matchesPackage(matcher, pkg) && typeof allowBuilds[matcher] === 'boolean'
-    )
-  );
-}
-
-/**
- * Reads an existing `onlyBuiltDependenciesFile` and returns its contents as an array of package names or pins.
- * @param file The path to the `onlyBuiltDependenciesFile`.
- * @param dir The directory containing the `onlyBuiltDependenciesFile`.
- * @returns An array of package names listed in the file, or an empty array if the file does not exist or is invalid.
- */
-function readOnlyBuiltDependenciesFile(file: unknown, dir: string): unknown[] {
-  if (typeof file !== 'string') {
-    return [];
-  }
-  try {
-    const list = JSON.parse(readFileSync(resolve(dir, file), 'utf8'));
-    return Array.isArray(list) ? list : [];
-  } catch {
-    return [];
-  }
-}
-
-/**
- * Checks whether there is any user setting that indicates we cannot decide for them to
- * preallow a package. This can be because they made an explicit decision, or because us
- * setting `allowBuilds` in a `pnpm-workspace.yaml` file would lead to invalid config
- * or unwanted side effects.
- * @param settings The PNPM settings object to check.
- * @param pkg The package name to check for an existing decision.
- * @param dir The directory containing the `onlyBuiltDependenciesFile`.
- * @returns `true` if there is an existing decision that prevents preallowing the package, `false` otherwise.
- */
-function hasPnpm10ListDecision(settings: unknown, pkg: string, dir: string): boolean {
-  if (!isRecord(settings)) {
-    return false;
-  }
-  return (
-    // pnpm 10 refuses to combine `neverBuiltDependencies` with any allow list,
-    // so its presence alone is a decision.
-    Array.isArray(settings.neverBuiltDependencies) ||
-    listsPackage(settings.onlyBuiltDependencies, pkg) ||
-    listsPackage(settings.ignoredBuiltDependencies, pkg) ||
-    listsPackage(readOnlyBuiltDependenciesFile(settings.onlyBuiltDependenciesFile, dir), pkg)
-  );
-}
-
-// Same-directory rename so a crash cannot truncate the user's workspace file.
-function writeFileAtomically(filePath: string, contents: string): void {
-  const tempPath = `${filePath}.${randomBytes(8).toString('hex')}.tmp`;
-  try {
-    writeFileSync(tempPath, contents, 'utf8');
-    renameSync(tempPath, filePath);
-  } catch (error) {
-    try {
-      unlinkSync(tempPath);
-    } catch {
-      // The temp file was never created, or rename already consumed it.
-    }
-    throw error;
-  }
-}
-
 export class PNPMProxy extends JsPackageManager {
   readonly type = PackageManagerName.PNPM;
 
@@ -480,7 +368,7 @@ export class PNPMProxy extends JsPackageManager {
       for (const pkg of pending) {
         doc.setIn(['allowBuilds', pkg], true);
       }
-      writeFileAtomically(path, doc.toString());
+      writeFileSync(path, doc.toString(), 'utf8');
     } catch (e) {
       logger.warn(
         `Could not allow build scripts of ${STORYBOOK_BUILD_SCRIPT_PACKAGES.join(', ')} in ${path}: ${String(e)}`
diff --git a/code/core/src/common/js-package-manager/pnpm-build-scripts.test.ts b/code/core/src/common/js-package-manager/pnpm-build-scripts.test.ts
new file mode 100644
index 000000000000..e0e25cfa8940
--- /dev/null
+++ b/code/core/src/common/js-package-manager/pnpm-build-scripts.test.ts
@@ -0,0 +1,141 @@
+import { readFileSync } from 'node:fs';
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { fs as memfs, vol } from 'memfs';
+
+import {
+  hasAllowBuildsDecision,
+  hasPnpm10ListDecision,
+  listsPackage,
+  matchesPackage,
+  readOnlyBuiltDependenciesFile,
+} from './pnpm-build-scripts.ts';
+
+vi.mock('node:fs', { spy: true });
+
+describe('matchesPackage', () => {
+  it.each([
+    ['esbuild', true],
+    ['esbuild@0.25.0', true],
+    ['esbuild@0.25.0 || 0.25.1', true],
+    ['esbuild@git+ssh://git@example.com/esbuild.git', true],
+    ['esbuild-wasm', false],
+    ['esbuild-wasm@1.0.0', false],
+    ['@scope/esbuild', false],
+    [42, false],
+    [null, false],
+  ])('%j matches esbuild: %s', (value, expected) => {
+    expect(matchesPackage(value, 'esbuild')).toBe(expected);
+  });
+});
+
+describe('listsPackage', () => {
+  it('finds a bare or pinned entry', () => {
+    expect(listsPackage(['sharp', 'esbuild@0.25.0'], 'esbuild')).toBe(true);
+  });
+
+  it('is false for a list of other packages, or anything that is not a list', () => {
+    expect(listsPackage(['sharp', 'esbuild-wasm'], 'esbuild')).toBe(false);
+    expect(listsPackage('esbuild', 'esbuild')).toBe(false);
+    expect(listsPackage(undefined, 'esbuild')).toBe(false);
+  });
+});
+
+describe('hasAllowBuildsDecision', () => {
+  it.each([
+    ['an approval', { allowBuilds: { esbuild: true } }],
+    ['a denial', { allowBuilds: { esbuild: false } }],
+    ['a version-pinned entry', { allowBuilds: { 'esbuild@0.25.0 || 0.25.1': false } }],
+    ['dangerouslyAllowAllBuilds', { dangerouslyAllowAllBuilds: true }],
+  ])('is true for %s', (_, settings) => {
+    expect(hasAllowBuildsDecision(settings, 'esbuild')).toBe(true);
+  });
+
+  it.each([
+    [
+      'the placeholder pnpm writes for an unreviewed package',
+      { allowBuilds: { esbuild: 'set this to true or false' } },
+    ],
+    ['entries for other packages', { allowBuilds: { sharp: true, 'esbuild-wasm@1.0.0': true } }],
+    ['an empty allowBuilds key', { allowBuilds: null }],
+    ['allowBuilds that is not a map', { allowBuilds: ['esbuild'] }],
+    ['dangerouslyAllowAllBuilds set to false', { dangerouslyAllowAllBuilds: false }],
+    ['no settings', undefined],
+  ])('is false for %s', (_, settings) => {
+    expect(hasAllowBuildsDecision(settings, 'esbuild')).toBe(false);
+  });
+});
+
+describe('readOnlyBuiltDependenciesFile', () => {
+  beforeEach(() => {
+    vol.reset();
+    vi.mocked(readFileSync).mockImplementation(memfs.readFileSync as typeof readFileSync);
+  });
+
+  it('reads the list relative to the workspace directory', () => {
+    vol.fromJSON({ '/root/trusted/allow.json': '["@swc/core", "esbuild@0.25.0"]' });
+
+    expect(readOnlyBuiltDependenciesFile('trusted/allow.json', '/root')).toEqual([
+      '@swc/core',
+      'esbuild@0.25.0',
+    ]);
+  });
+
+  it.each([
+    ['the setting is absent', undefined, {}],
+    ['the file is missing', 'trusted/allow.json', {}],
+    ['the file is not JSON', 'trusted/allow.json', { '/root/trusted/allow.json': '[' }],
+    [
+      'the file holds no list',
+      'trusted/allow.json',
+      { '/root/trusted/allow.json': '{"esbuild": true}' },
+    ],
+  ])('lists nothing when %s', (_, file, files) => {
+    vol.fromJSON(files);
+
+    expect(readOnlyBuiltDependenciesFile(file, '/root')).toEqual([]);
+  });
+});
+
+describe('hasPnpm10ListDecision', () => {
+  beforeEach(() => {
+    vol.reset();
+    vi.mocked(readFileSync).mockImplementation(memfs.readFileSync as typeof readFileSync);
+  });
+
+  it.each([
+    ['onlyBuiltDependencies names the package', { onlyBuiltDependencies: ['esbuild'] }],
+    ['ignoredBuiltDependencies pins the package', { ignoredBuiltDependencies: ['esbuild@0.25.0'] }],
+    ['neverBuiltDependencies names the package', { neverBuiltDependencies: ['esbuild'] }],
+    ['neverBuiltDependencies names only other packages', { neverBuiltDependencies: ['fsevents'] }],
+    ['neverBuiltDependencies is empty', { neverBuiltDependencies: [] }],
+  ])('is true when %s', (_, settings) => {
+    expect(hasPnpm10ListDecision(settings, 'esbuild', '/root')).toBe(true);
+  });
+
+  it('is true when the trusted-dependencies file names the package', () => {
+    vol.fromJSON({ '/root/trusted/allow.json': '["esbuild"]' });
+
+    expect(
+      hasPnpm10ListDecision({ onlyBuiltDependenciesFile: 'trusted/allow.json' }, 'esbuild', '/root')
+    ).toBe(true);
+  });
+
+  it.each([
+    [
+      'the lists name only other packages',
+      { onlyBuiltDependencies: ['sharp'], ignoredBuiltDependencies: ['fsevents'] },
+    ],
+    [
+      'the trusted-dependencies file names only other packages',
+      { onlyBuiltDependenciesFile: 'trusted/allow.json' },
+    ],
+    ['only allowBuilds is set', { allowBuilds: { esbuild: true } }],
+    ['no settings', undefined],
+  ])('is false when %s', (_, settings) => {
+    vol.fromJSON({ '/root/trusted/allow.json': '["sharp"]' });
+
+    expect(hasPnpm10ListDecision(settings, 'esbuild', '/root')).toBe(false);
+  });
+});
diff --git a/code/core/src/common/js-package-manager/pnpm-build-scripts.ts b/code/core/src/common/js-package-manager/pnpm-build-scripts.ts
new file mode 100644
index 000000000000..ad9b1b5939c0
--- /dev/null
+++ b/code/core/src/common/js-package-manager/pnpm-build-scripts.ts
@@ -0,0 +1,98 @@
+import { readFileSync } from 'node:fs';
+import { resolve } from 'pathe';
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === 'object' && value !== null && !Array.isArray(value);
+
+/**
+ * Matches a package name, including pinned versions of that package.
+ * For instance, if `value` is `esbuild@0.25.0 || 0.25.1`, it matches `pkg` `esbuild`.
+ * @param value The package name or pinned version to match against.
+ * @param pkg The package name to check against the value.
+ * @returns whether the package matches the given value.
+ */
+export const matchesPackage = (value: unknown, pkg: string): boolean =>
+  typeof value === 'string' && (value === pkg || value.startsWith(`${pkg}@`));
+
+/**
+ * Checks if a list of packages matches a given package name, including if the
+ * list contains pinned versions of that package.
+ * @param list List of package names to check.
+ * @param pkg The package name to check against the list of matchers.
+ * @returns whether the package matches any of the entries in the list.
+ */
+export const listsPackage = (list: unknown, pkg: string): boolean =>
+  Array.isArray(list) && list.some((value) => matchesPackage(value, pkg));
+
+/**
+ * Checks if PNPM settings contain an `allowBuilds` decision for the given package.
+ * Does not check whether it's allowed or refused, we only care to not modify `allowBuilds`
+ * when a pre-existing user decision exists.
+ *
+ * Note however that PNPM 12 inserts placeholder keys in `allowBuilds` for package names
+ * where the user has not made a decision. This does not happen for pinned versions but
+ * only for exact matches. So we verify we do have a boolean value for exact matches.
+ *
+ * @param settings The PNPM settings object to check.
+ * @param pkg The package name to check for an `allowBuilds` decision.
+ * @returns `true` if there is an existing `allowBuilds` decision for the package, `false` otherwise.
+ */
+export function hasAllowBuildsDecision(settings: unknown, pkg: string): boolean {
+  if (!isRecord(settings)) {
+    return false;
+  }
+
+  if (settings.dangerouslyAllowAllBuilds === true) {
+    return true;
+  }
+
+  const { allowBuilds } = settings;
+  return (
+    isRecord(allowBuilds) &&
+    Object.keys(allowBuilds).some(
+      (matcher) => matchesPackage(matcher, pkg) && typeof allowBuilds[matcher] === 'boolean'
+    )
+  );
+}
+
+/**
+ * Reads an existing `onlyBuiltDependenciesFile` and returns its contents as an array of package names or pins.
+ * @param file The path to the `onlyBuiltDependenciesFile`.
+ * @param dir The directory containing the `onlyBuiltDependenciesFile`.
+ * @returns An array of package names listed in the file, or an empty array if the file does not exist or is invalid.
+ */
+export function readOnlyBuiltDependenciesFile(file: unknown, dir: string): unknown[] {
+  if (typeof file !== 'string') {
+    return [];
+  }
+  try {
+    const list = JSON.parse(readFileSync(resolve(dir, file), 'utf8'));
+    return Array.isArray(list) ? list : [];
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Checks whether there is any user setting that indicates we cannot decide for them to
+ * preallow a package. This can be because they made an explicit decision, or because us
+ * setting `allowBuilds` in a `pnpm-workspace.yaml` file would lead to invalid config
+ * or unwanted side effects.
+ * @param settings The PNPM settings object to check.
+ * @param pkg The package name to check for an existing decision.
+ * @param dir The directory containing the `onlyBuiltDependenciesFile`.
+ * @returns `true` if there is an existing decision that prevents preallowing the package, `false` otherwise.
+ */
+export function hasPnpm10ListDecision(settings: unknown, pkg: string, dir: string): boolean {
+  if (!isRecord(settings)) {
+    return false;
+  }
+  return (
+    // pnpm 10 refuses to combine `neverBuiltDependencies` with any allow list,
+    // so its presence alone is a decision.
+    Array.isArray(settings.neverBuiltDependencies) ||
+    listsPackage(settings.onlyBuiltDependencies, pkg) ||
+    listsPackage(settings.ignoredBuiltDependencies, pkg) ||
+    listsPackage(readOnlyBuiltDependenciesFile(settings.onlyBuiltDependenciesFile, dir), pkg)
+  );
+}

From 2b30d6cd6c075af4dc447e71066d35d7eb16557f Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 11:13:14 +0200
Subject: [PATCH 261/326] fix(csf-tools): append after the items an earlier
 append of the batch added

`appendToList` read only the code the editor was created with, so a
second append to the same list before a commit did not see the first.
A multi-line list whose last item has a trailing comment and no comma
got `Button,, // c` and items without a comma between them; an empty
`{}` got `{ a: 1  b: 2 }`, and `{ }` lost the first item to the second
overwrite. `enrichCsf` and a bundler transformer both appending to a
meta with a JSDoc description and no `parameters` hit this.

Each batch of edits now remembers per list what its appends wrote, and
a later append goes after it with the comma it needs. The text that
closes an empty list is written to the right of its end, so later items
land before it. Two appends now write what one append of both items
writes, except after an item ending in a line comment, where the comma
goes on the next line.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/editor.test.ts |  48 ++++++
 code/core/src/csf-tools/estree/editor.ts      | 140 ++++++++++++++----
 2 files changed, 158 insertions(+), 30 deletions(-)

diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index a72da53188b4..d79476700384 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -286,6 +286,54 @@ describe('lists', () => {
   });
 });
 
+describe('appendToList', () => {
+  const exported = (editor: SourceEditor) =>
+    (editor.program.body[0] as E.ExportDefaultDeclaration).declaration as
+      | E.ObjectExpression
+      | E.ArrayExpression;
+  const listOf = (editor: SourceEditor) => {
+    const node = exported(editor);
+    return node.type === 'ObjectExpression' ? objectList(editor, node) : arrayList(editor, node);
+  };
+  const append = (code: string, ...batches: string[][]) => {
+    const editor = new SourceEditor(code);
+    for (const texts of batches) {
+      appendToList(editor, listOf(editor), texts);
+    }
+    return editor.toString();
+  };
+
+  it.each([
+    "export default {\n  title: 'X',\n  component: Button // c\n};",
+    "export default {\n  title: 'X',\n  component: Button, // c\n};",
+    "export default {\n  title: 'X',\n  component: Button\n};",
+    "export default { title: 'X' };",
+    "export default { title: 'X', };",
+    "export default { title: 'X' /* c */ };",
+    'export default {};',
+    'export default { };',
+    'export default {\n};',
+    'export default { /* c */ };',
+    'export default {/* c */};',
+    'export default {\n  // c\n};',
+    'export default [];',
+    'export default [a, ,];',
+  ])('appends in two calls of one batch what one call appends, to %j', (code) => {
+    const batch = code.includes('[') ? [['x'], ['y']] : [['a: 1'], ['b: 2']];
+    const once = append(code, batch.flat());
+
+    expect(append(code, ...batch)).toBe(once);
+    expect(() => parseModule(once)).not.toThrow();
+  });
+
+  it('separates an item from an earlier one of the batch that ends in a line comment', () => {
+    const output = append("export default {\n  title: 'X'\n};", ['a: x // c\n'], ['b: 2']);
+
+    expect(output).toBe("export default {\n  title: 'X',\n  a: x // c\n  ,\n  b: 2\n};");
+    expect(() => parseModule(output)).not.toThrow();
+  });
+});
+
 describe('parenthesized array elements', () => {
   it('appends after a comma expression and removes a doubly parenthesized one whole', () => {
     const editor = new SourceEditor(`export default { addons: [(a, b)] };`);
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 2b79fef04ff9..319ca3cbf032 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -818,10 +818,61 @@ const inline = (
   return joined;
 };
 
-export const appendToList = (editor: SourceEditor, list: List, texts: string[]) => {
-  editor.assertCurrent(list);
+// What the appends of a batch of edits wrote to a list: where later items go, one per line at
+// `indent` or on the list's line without one, the list's trailing comma, whether a line break
+// follows, and what has to come before the next item.
+interface Appended {
+  at: number;
+  indent: string | undefined;
+  trailingComma: string;
+  lineBreakFollows: boolean;
+  separator: string;
+}
+
+const appendedTo = new WeakMap<SourceEdits, Map<string, Appended>>();
+
+// Items one per line at `indent`, each after a line break.
+const itemLines = (
+  texts: string[],
+  indent: string,
+  trailingComma: string,
+  lineBreakFollows: boolean
+) =>
+  texts
+    .map((text, index) => {
+      const isLast = index === texts.length - 1;
+      return `\n${indent}${withComma(reindent(text, '', indent), isLast ? trailingComma : ',', !isLast || lineBreakFollows)}`;
+    })
+    .join('');
+
+// A line comment ending the last item puts the comma for the next one on the next line.
+const appended = (
+  layout: Omit<Appended, 'separator'>,
+  written: string,
+  lastItem: string
+): Appended => ({
+  ...layout,
+  separator:
+    layout.trailingComma === ','
+      ? ''
+      : endsInLineComment(lastItem)
+        ? `${written.endsWith('\n') ? '' : '\n'}${layout.indent ?? ''},`
+        : ',',
+});
+
+const appendFirst = (editor: SourceEditor, list: List, texts: string[]): Appended => {
   const { code, edits } = editor;
   const { items, padding } = list;
+  const write = (layout: Omit<Appended, 'separator'>, text: string) => {
+    edits.appendLeft(layout.at, text);
+    return appended(layout, text, texts.at(-1)!);
+  };
+  // The text after the items goes to the right of the list's end, so later items go before it.
+  const close = (text: string) => {
+    if (text !== '') {
+      edits.appendRight(list.close, text);
+    }
+  };
   if (items.length === 0) {
     // Only comments can be inside an empty list, and the items go after them.
     const inner = code.slice(list.open, list.close);
@@ -838,18 +889,22 @@ export const appendToList = (editor: SourceEditor, list: List, texts: string[])
       if (list.close > end) {
         edits.remove(end, list.close);
       }
-      edits.appendLeft(
-        end,
-        `\n${texts.map((text) => `${indent}${withComma(reindent(text, '', indent), ',', true)}`).join('\n')}\n${outer}`
-      );
-    } else if (end > list.open) {
-      edits.appendLeft(end, ` ${texts.join(', ')}${end === list.close ? padding : ''}`);
-    } else if (list.close > list.open) {
-      edits.overwrite(list.open, list.close, `${padding}${texts.join(', ')}${padding}`);
-    } else {
-      edits.appendLeft(list.open, `${padding}${texts.join(', ')}${padding}`);
+      close(`\n${outer}`);
+      const layout = { at: end, indent, trailingComma: ',', lineBreakFollows: true };
+      return write(layout, itemLines(texts, indent, ',', true));
     }
-    return;
+    const inline = { indent: undefined, trailingComma: '', lineBreakFollows: false };
+    if (end > list.open) {
+      if (end === list.close) {
+        close(padding);
+      }
+      return write({ ...inline, at: end }, ` ${texts.join(', ')}`);
+    }
+    if (list.close > list.open) {
+      edits.remove(list.open, list.close);
+    }
+    close(padding);
+    return write({ ...inline, at: list.open }, `${padding}${texts.join(', ')}`);
   }
   const last = items.at(-1)!;
   const comma = separatorAfter(editor, last);
@@ -858,28 +913,53 @@ export const appendToList = (editor: SourceEditor, list: List, texts: string[])
   if (isMultiline(code, list)) {
     const indent = lineIndent(code, last.start);
     const at = itemEnd(editor, list, items.length - 1);
-    const block = texts
-      .map((text, index) => {
-        const isLast = index === texts.length - 1;
-        const separator = isLast ? trailingComma : ',';
-        const lineBreakFollows = !isLast || lineBreakAt(code, at);
-        return `${indent}${withComma(reindent(text, '', indent), separator, lineBreakFollows)}`;
-      })
-      .join('\n');
     if (comma === undefined) {
       edits.appendLeft(last.end, ',');
     }
-    edits.appendLeft(at, `\n${block}`);
-    return;
-  }
-  if (comma !== undefined) {
-    edits.appendLeft(
-      comma,
-      ` ${inline(editor, list, texts, trailingComma, lineBreakAt(code, comma))}`
+    const lineBreakFollows = lineBreakAt(code, at);
+    return write(
+      { at, indent, trailingComma, lineBreakFollows },
+      itemLines(texts, indent, trailingComma, lineBreakFollows)
     );
-  } else {
-    edits.appendLeft(last.end, `, ${inline(editor, list, texts, '', lineBreakAt(code, last.end))}`);
   }
+  const at = comma ?? last.end;
+  const lineBreakFollows = lineBreakAt(code, at);
+  const text = inline(editor, list, texts, trailingComma, lineBreakFollows);
+  return write(
+    { at, indent: undefined, trailingComma, lineBreakFollows },
+    comma === undefined ? `, ${text}` : ` ${text}`
+  );
+};
+
+const appendAfter = (editor: SourceEditor, list: List, previous: Appended, texts: string[]) => {
+  const { at, indent, trailingComma, lineBreakFollows, separator } = previous;
+  const text =
+    indent === undefined
+      ? ` ${inline(editor, list, texts, trailingComma, lineBreakFollows)}`
+      : itemLines(texts, indent, trailingComma, lineBreakFollows);
+  editor.edits.appendLeft(at, `${separator}${text}`);
+  return appended(previous, text, texts.at(-1)!);
+};
+
+/**
+ * Append items to a list, after the items earlier appends of the same batch of edits added to it.
+ * That writes what one append of all of them writes, except that a comma after an item ending in
+ * a line comment goes on the next line, and items stay on the line of a list an earlier append
+ * laid out so.
+ */
+export const appendToList = (editor: SourceEditor, list: List, texts: string[]) => {
+  editor.assertCurrent(list);
+  let lists = appendedTo.get(editor.edits);
+  if (!lists) {
+    lists = new Map();
+    appendedTo.set(editor.edits, lists);
+  }
+  const key = `${list.open}:${list.close}`;
+  const previous = lists.get(key);
+  lists.set(
+    key,
+    previous ? appendAfter(editor, list, previous, texts) : appendFirst(editor, list, texts)
+  );
 };
 
 export const prependToList = (editor: SourceEditor, list: List, texts: string[]) => {

From fa5d69cc75ce3a1a49f79b6ffefecfe1c4c8f925 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 11:15:58 +0200
Subject: [PATCH 262/326] fix(csf-tools): keep a wrapper around its expression
 alone when list edits write next to it

`wrapExpression` wrote its suffix with `appendLeft`, the same insertion
`appendToList` uses for an item after the last one. When the item was
appended first, `render: (args) => null` became
`render: (wrapped((args) => null, parameters: {}))`. Wrapping the same
expression twice was broken the same way: `[(x])`.

Edits at the same offset now follow one rule: text an edit writes at
an expression's end, such as the codemod's `.input`, and an earlier
wrapper belong to the expression, so a later wrapper goes around them.
`wrapExpression` writes its prefix with `prependRight` and its suffix
with `appendLeft`. Items list edits add next to an item belong to the
list, so `appendToList` writes after a last item to the right of its
end and `prependToList` before a first item to the left of its start;
a wrapper of that item, before or after, stays around the item alone.
`SourceEdits` gains `prependRight`, the one insertion this needs.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/editor.test.ts | 51 +++++++++++++++++++
 code/core/src/csf-tools/estree/editor.ts      | 37 +++++++++-----
 2 files changed, 75 insertions(+), 13 deletions(-)

diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index d79476700384..eda1c5b8675f 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -29,6 +29,7 @@ import {
   removeStatements,
   replaceValue,
   setImportSpecifiers,
+  wrapExpression,
 } from './editor.ts';
 
 const parse = (source: string, fileName?: string) =>
@@ -334,6 +335,56 @@ describe('appendToList', () => {
   });
 });
 
+describe('wrapExpression', () => {
+  const render = (editor: SourceEditor) => {
+    const meta = (editor.program.body[0] as E.ExportDefaultDeclaration)
+      .declaration as E.ObjectExpression;
+    return { meta, value: (meta.properties[1] as E.ObjectProperty).value };
+  };
+  const elements = (editor: SourceEditor) => {
+    const array = (editor.program.body[0] as E.ExportDefaultDeclaration)
+      .declaration as E.ArrayExpression;
+    return { array, first: array.elements[0]! };
+  };
+
+  it.each([true, false])(
+    'writes the wrapper around the expression alone, the list edits next to it first: %s',
+    (listEditsFirst) => {
+      const editor = new SourceEditor("export default { title: 'X', render: (args) => null };");
+      const list = new SourceEditor('export default [a];');
+      const listEdits = () => {
+        appendToList(editor, objectList(editor, render(editor).meta), ['a: {}']);
+        prependToList(list, arrayList(list, elements(list).array), ['b']);
+        appendToList(list, arrayList(list, elements(list).array), ['c']);
+      };
+      if (listEditsFirst) {
+        listEdits();
+      }
+      wrapExpression(editor, render(editor).value, 'wrapped(', ')');
+      wrapExpression(list, elements(list).first, 'f(', ')');
+      if (!listEditsFirst) {
+        listEdits();
+      }
+
+      expect(editor.toString()).toBe(
+        "export default { title: 'X', render: wrapped((args) => null), a: {} };"
+      );
+      expect(list.toString()).toBe('export default [b, f(a), c];');
+    }
+  );
+
+  it('wraps text an earlier edit wrote at its end, and an earlier wrapper', () => {
+    const editor = new SourceEditor("export default { title: 'X', render: (args) => null };");
+    const { value } = render(editor);
+    editor.edits.appendLeft(value.end, '.input');
+    wrapExpression(editor, value, '[', ']');
+    wrapExpression(editor, value, '(', ')');
+    expect(editor.toString()).toBe(
+      "export default { title: 'X', render: ([(args) => null.input]) };"
+    );
+  });
+});
+
 describe('parenthesized array elements', () => {
   it('appends after a comma expression and removes a doubly parenthesized one whole', () => {
     const editor = new SourceEditor(`export default { addons: [(a, b)] };`);
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 319ca3cbf032..9207006856f7 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -47,6 +47,7 @@ export interface SourceEdits {
   append(content: string): this;
   appendLeft(index: number, content: string): this;
   appendRight(index: number, content: string): this;
+  prependRight(index: number, content: string): this;
   overwrite(start: number, end: number, content: string): this;
   remove(start: number, end: number): this;
   /** The content of a span as edited so far; throws when an edit cuts through its ends. */
@@ -820,9 +821,11 @@ const inline = (
 
 // What the appends of a batch of edits wrote to a list: where later items go, one per line at
 // `indent` or on the list's line without one, the list's trailing comma, whether a line break
-// follows, and what has to come before the next item.
+// follows, and what has to come before the next item. Items after an item are written to the right
+// of its end, so a wrapper of that item stays around the item alone.
 interface Appended {
   at: number;
+  right: boolean;
   indent: string | undefined;
   trailingComma: string;
   lineBreakFollows: boolean;
@@ -831,6 +834,9 @@ interface Appended {
 
 const appendedTo = new WeakMap<SourceEdits, Map<string, Appended>>();
 
+const insert = (edits: SourceEdits, { at, right }: Pick<Appended, 'at' | 'right'>, text: string) =>
+  right ? edits.appendRight(at, text) : edits.appendLeft(at, text);
+
 // Items one per line at `indent`, each after a line break.
 const itemLines = (
   texts: string[],
@@ -864,7 +870,7 @@ const appendFirst = (editor: SourceEditor, list: List, texts: string[]): Appende
   const { code, edits } = editor;
   const { items, padding } = list;
   const write = (layout: Omit<Appended, 'separator'>, text: string) => {
-    edits.appendLeft(layout.at, text);
+    insert(edits, layout, text);
     return appended(layout, text, texts.at(-1)!);
   };
   // The text after the items goes to the right of the list's end, so later items go before it.
@@ -890,10 +896,10 @@ const appendFirst = (editor: SourceEditor, list: List, texts: string[]): Appende
         edits.remove(end, list.close);
       }
       close(`\n${outer}`);
-      const layout = { at: end, indent, trailingComma: ',', lineBreakFollows: true };
+      const layout = { at: end, right: false, indent, trailingComma: ',', lineBreakFollows: true };
       return write(layout, itemLines(texts, indent, ',', true));
     }
-    const inline = { indent: undefined, trailingComma: '', lineBreakFollows: false };
+    const inline = { right: false, indent: undefined, trailingComma: '', lineBreakFollows: false };
     if (end > list.open) {
       if (end === list.close) {
         close(padding);
@@ -914,11 +920,11 @@ const appendFirst = (editor: SourceEditor, list: List, texts: string[]): Appende
     const indent = lineIndent(code, last.start);
     const at = itemEnd(editor, list, items.length - 1);
     if (comma === undefined) {
-      edits.appendLeft(last.end, ',');
+      edits.appendRight(last.end, ',');
     }
     const lineBreakFollows = lineBreakAt(code, at);
     return write(
-      { at, indent, trailingComma, lineBreakFollows },
+      { at, right: true, indent, trailingComma, lineBreakFollows },
       itemLines(texts, indent, trailingComma, lineBreakFollows)
     );
   }
@@ -926,18 +932,18 @@ const appendFirst = (editor: SourceEditor, list: List, texts: string[]): Appende
   const lineBreakFollows = lineBreakAt(code, at);
   const text = inline(editor, list, texts, trailingComma, lineBreakFollows);
   return write(
-    { at, indent: undefined, trailingComma, lineBreakFollows },
+    { at, right: true, indent: undefined, trailingComma, lineBreakFollows },
     comma === undefined ? `, ${text}` : ` ${text}`
   );
 };
 
 const appendAfter = (editor: SourceEditor, list: List, previous: Appended, texts: string[]) => {
-  const { at, indent, trailingComma, lineBreakFollows, separator } = previous;
+  const { indent, trailingComma, lineBreakFollows, separator } = previous;
   const text =
     indent === undefined
       ? ` ${inline(editor, list, texts, trailingComma, lineBreakFollows)}`
       : itemLines(texts, indent, trailingComma, lineBreakFollows);
-  editor.edits.appendLeft(at, `${separator}${text}`);
+  insert(editor.edits, previous, `${separator}${text}`);
   return appended(previous, text, texts.at(-1)!);
 };
 
@@ -982,11 +988,12 @@ export const prependToList = (editor: SourceEditor, list: List, texts: string[])
         return `${indent}${withComma(reindent(text, '', indent), ',', lineBreakFollows)}`;
       })
       .join('\n');
-    edits.appendRight(list.open, `\n${block}`);
+    edits.appendLeft(list.open, `\n${block}`);
     return;
   }
+  // To the left of the first item, so a wrapper of it stays around it alone.
   const items = inline(editor, list, texts, ',', false);
-  edits.appendRight(first.start, items.endsWith('\n') ? items : `${items} `);
+  edits.appendLeft(first.start, items.endsWith('\n') ? items : `${items} `);
 };
 
 /** Remove items with their separators and the comments that lead and trail them from a list. */
@@ -1383,11 +1390,15 @@ export const replaceValue = (editor: SourceEditor, member: Property, text: strin
   }
 };
 
-/** Write `before` and `after` around an expression and the parentheses written around it. */
+/**
+ * Write `before` and `after` around an expression and the parentheses written around it. Text an
+ * earlier edit wrote at its ends, such as `.input` after it, ends up inside, as does an earlier
+ * wrapper; items list edits add next to it stay outside in either order.
+ */
 export const wrapExpression = (editor: SourceEditor, node: Node, before: string, after: string) => {
   editor.assertCurrent(node);
   const { start, end } = outerSpan(node);
-  editor.edits.appendRight(start, before);
+  editor.edits.prependRight(start, before);
   editor.edits.appendLeft(end, after);
 };
 

From 1be8bc8524b5d9c14aefef00d9d147164c68ddc4 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 11:18:19 +0200
Subject: [PATCH 263/326] fix(csf-tools): separate an appended statement that
 starts with ( after its blank line

`appendStatement` sets a statement apart from a multi-line one with a
blank line, which `insertStatementAfter` received as the text's leading
`\n`. The check for a statement that would continue the one before it,
such as `(a.b).c = 1`, tested that text and so missed the `(`: after
`export default {\n  title: 'X'\n}` the two statements became one call.

The check now skips the text's leading line breaks and the `;` goes
after them, as `;(a.b).c = 1`. It also looks at the text inserted after
the same statement before, which is what the new text follows, so
`f()` then `(a.b).c = 1` get the separator too.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/editor.test.ts | 31 +++++++++++++++++++
 code/core/src/csf-tools/estree/editor.ts      | 18 +++++++++--
 2 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index eda1c5b8675f..8cfe40d32acf 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -845,6 +845,37 @@ describe('appendStatement', () => {
     );
   });
 
+  it.each([
+    [
+      'a multi-line statement',
+      'export default {\n  title: "X"\n}\n',
+      'export default {\n  title: "X"\n}\n\n;(a.b).c = 1;\n',
+    ],
+    [
+      'a one-line statement',
+      'export default { title: "X" }\n',
+      'export default { title: "X" }\n;(a.b).c = 1;\n',
+    ],
+  ])('separates a statement that would continue %s without a semicolon', (_case, code, output) => {
+    const editor = new SourceEditor(code);
+    appendStatement(editor, '(a.b).c = 1;');
+    expect(editor.toString()).toBe(output);
+  });
+
+  it('separates a statement that would continue the one appended before it', () => {
+    const editor = new SourceEditor('const a = 1;\n');
+    appendStatement(editor, 'f()');
+    appendStatement(editor, '(a.b).c = 1;');
+    expect(editor.toString()).toBe('const a = 1;\nf()\n;(a.b).c = 1;\n');
+  });
+
+  it('separates a statement from one whose line comment ends in a semicolon', () => {
+    const editor = new SourceEditor('const a = 1;\n');
+    appendStatement(editor, 'f() // done;');
+    appendStatement(editor, '(a.b).c = 1;');
+    expect(editor.toString()).toBe('const a = 1;\nf() // done;\n;(a.b).c = 1;\n');
+  });
+
   it('appends to the end of a file whose statements are all removed', () => {
     const editor = new SourceEditor(`const a = 1;\nconst b = 2;\n`);
     removeStatements(editor, new Set(editor.program.body));
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 9207006856f7..a81492a3c3ba 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -1159,6 +1159,12 @@ export const statementEnd = (editor: SourceEditor, statement: Span) => {
 // Text that would continue a statement not ended by `;` on the line before, such as `[1].map(f)`.
 const CONTINUES_STATEMENT = /^[([`+\-/]/;
 
+// Whether a text ends its statement with `;`, before a line comment that ends it.
+const endsStatement = (text: string) => {
+  const { body, at } = trailingLineComment(`${text}\n`);
+  return body.slice(0, at).trimEnd().endsWith(';');
+};
+
 /**
  * Insert a statement on its own line right after a statement and the comments it owns. What else
  * shares that line moves below the inserted statements.
@@ -1170,15 +1176,21 @@ export const insertStatementAfter = (editor: SourceEditor, statement: Span, text
     inserted = new Map();
     lastInserted.set(edits, inserted);
   }
+  // The new text follows the text inserted after the statement earlier in the batch, if any.
+  const before = inserted.get(statement) ?? editor.source(statement);
   inserted.set(statement, text);
   const end = statementEnd(editor, statement);
   const next = end + /^[^\S\n]*/.exec(code.slice(end))![0].length;
-  const separator = code[statement.end - 1] !== ';' && CONTINUES_STATEMENT.test(text) ? ';' : '';
+  // The separator goes after the line breaks that lead the text.
+  const lead = /^\s*/.exec(text)![0];
+  const body = text.slice(lead.length);
+  const separator = !endsStatement(before) && CONTINUES_STATEMENT.test(body) ? ';' : '';
+  const written = `\n${lead}${separator}${body}`;
   if (next === code.length || code[next] === '\n') {
-    edits.appendLeft(next, `\n${separator}${text}`);
+    edits.appendLeft(next, written);
     return;
   }
-  edits.appendLeft(end, `\n${separator}${text}`);
+  edits.appendLeft(end, written);
   // The same line break for every statement inserted here.
   if (next > end) {
     edits.overwrite(end, next, '\n');

From 296cfcd8ecdee9d4a280202894f26285100d17f1 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 11:21:31 +0200
Subject: [PATCH 264/326] feat(csf-tools): add CsfObject#inspect to read a path
 without recording a diagnostic

A read that cannot be proven adds a diagnostic to `mutationDiagnostics`,
which makes `writeConfig` refuse the file: an automigration must not
write after an unreadable read. An addon that only reads, such as one
showing a story's args, had no way to ask, and the README told it to
count the diagnostics before and after a read.

`inspect(path)` returns `{ kind: 'value', node }`, `{ kind: 'missing' }`
or `{ kind: 'unreadable', diagnostic }` and records nothing. `get` is now
`inspect` plus reporting the diagnostic, and `getValue` finds its field
through the same lookup, so the three agree on what is unreadable.
`ConfigFile#inspect` also returns a root it cannot locate as unreadable
instead of recording it. The README's example uses `inspect` and says
when to use which.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/ConfigFile.ts        |  27 +++++
 code/core/src/csf-tools/ConfigObject.test.ts |  13 +++
 code/core/src/csf-tools/CsfObject.test.ts    |  37 ++++++
 code/core/src/csf-tools/CsfObject.ts         | 115 +++++++++++++++----
 code/core/src/csf-tools/README.md            |  20 ++--
 code/core/src/csf-tools/index.ts             |   1 +
 6 files changed, 181 insertions(+), 32 deletions(-)

diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index 12174059305f..0158364a8a3f 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -9,6 +9,7 @@ import type { PrintResultType } from './PrintResultType.ts';
 import { createConfigObject, locateConfigRoot } from './ConfigObject.ts';
 import {
   type CsfExpression,
+  type CsfInspection,
   type CsfMutationDiagnostic,
   type CsfMutationResult,
   type CsfObject,
@@ -260,6 +261,32 @@ export class ConfigFile implements CsfObject {
     return editor.ok ? editor.object.get(path) : undefined;
   }
 
+  /**
+   * Read the expression at a property path like `get`, telling a missing field from one that cannot
+   * be read statically, without adding a mutation diagnostic. Use it for reads that only inform;
+   * `get` and `getValue` record why a read failed, which stops `writeConfig`.
+   *
+   * @example
+   * ```ts
+   * const config = loadConfig('export default { tags: [], args: { ...base } };').parse();
+   * config.inspect(['tags']).kind; // 'value'
+   * config.inspect(['missing']); // { kind: 'missing' }
+   * config.inspect(['args', 'size']).kind; // 'unreadable'
+   * config.mutationDiagnostics; // []
+   * ```
+   */
+  inspect(path: readonly string[]): CsfInspection {
+    const editor = createConfigObject(
+      this,
+      'read',
+      () => {},
+      () => {}
+    );
+    return editor.ok
+      ? editor.object.inspect(path)
+      : { kind: 'unreadable', diagnostic: { ...editor.diagnostic, path: [...path] } };
+  }
+
   /**
    * Read plain values without executing code. Missing fields return `undefined`; unresolved
    * expressions also return `undefined` and add a mutation diagnostic.
diff --git a/code/core/src/csf-tools/ConfigObject.test.ts b/code/core/src/csf-tools/ConfigObject.test.ts
index 4102daa1ca1a..cc5a3614b71a 100644
--- a/code/core/src/csf-tools/ConfigObject.test.ts
+++ b/code/core/src/csf-tools/ConfigObject.test.ts
@@ -97,6 +97,19 @@ describe('ConfigFile mutations', () => {
     );
   });
 
+  it('inspects a config without recording a diagnostic, also when its root is unreadable', () => {
+    const config = loadConfig("export default { tags: ['docs'] };").parse();
+    const tags = config.inspect(['tags']);
+    expect(tags.kind === 'value' && textOf(tags.node)).toBe("['docs']");
+
+    const unreadable = loadConfig('export default createConfig();').parse();
+    expect(unreadable.inspect(['tags'])).toMatchObject({
+      kind: 'unreadable',
+      diagnostic: { code: 'unsupported-initializer', path: ['tags'] },
+    });
+    expect(unreadable.mutationDiagnostics).toEqual([]);
+  });
+
   it('infers quotes and keeps the line endings of CRLF sources', () => {
     const source = [
       "import { definePreview } from '@storybook/react';",
diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index c0528b0b45d6..979f2058392b 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -61,6 +61,43 @@ describe('CsfObject', () => {
     expect(csf.mutationDiagnostics).toEqual([]);
   });
 
+  it('tells a field from a missing and an unreadable one without recording a diagnostic', () => {
+    const csf = parse(
+      'export default {};\nexport const A = { args: { ...base }, parameters: { a: 1 } };'
+    );
+    const [story] = csf.objects({ meta: false });
+
+    const value = story.inspect(['parameters', 'a']);
+    expect(value.kind === 'value' && textOf(value.node)).toBe('1');
+    expect(story.inspect(['missing'])).toEqual({ kind: 'missing' });
+    expect(story.inspect(['args', 'size'])).toMatchObject({
+      kind: 'unreadable',
+      diagnostic: { code: 'spread-field', path: ['args', 'size'] },
+    });
+    expect(csf.mutationDiagnostics).toEqual([]);
+
+    expect(story.get(['args', 'size'])).toBeUndefined();
+    expect(csf.mutationDiagnostics).toMatchObject([{ code: 'spread-field' }]);
+  });
+
+  it('inspects a path a CSF2 annotation editor does not hold, and the object itself, as unreadable', () => {
+    const csf = parse(
+      'export default {};\nexport const A = Template.bind({});\nA.args = { size: "l" };\nA.parameters = { a: 1 };'
+    );
+    const [parameters] = csf.objects({ meta: false });
+    const [meta] = csf.objects({ stories: false });
+
+    expect(parameters.target).toMatchObject({ kind: 'story-annotation', annotation: 'parameters' });
+    expect(parameters.inspect(['parameters']).kind).toBe('value');
+    expect(parameters.inspect(['args', 'size'])).toMatchObject({
+      kind: 'unreadable',
+      diagnostic: { code: 'unsupported-member', path: ['args', 'size'] },
+    });
+    expect(meta.inspect([])).toMatchObject({ kind: 'unreadable' });
+    expect(parameters.get(['args', 'size'])).toBeUndefined();
+    expect(csf.mutationDiagnostics).toEqual([]);
+  });
+
   it('keeps local bindings readable after replacing a story expression', () => {
     const csf = parse(`
       const params = { a11y: { element: '#app' } };
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index 1c663eaeb4ea..6bfc646ac2c3 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -70,6 +70,15 @@ export interface CsfMutationDiagnostic {
   loc?: SourceLocation;
 }
 
+/**
+ * What `inspect` found at a path. A path that is not a field of the object, such as one outside a
+ * CSF2 annotation editor's annotation, is unreadable.
+ */
+export type CsfInspection =
+  | { kind: 'value'; node: CsfExpression }
+  | { kind: 'missing' }
+  | { kind: 'unreadable'; diagnostic: CsfMutationDiagnostic };
+
 /**
  * Outcome of a mutation. `ok: false` with `changed: true` means the edit was applied but left a file
  * the CSF indexer rejects, such as a meta `tags` that is no longer an array of string literals.
@@ -138,6 +147,21 @@ export interface CsfObject {
    * ```
    */
   get(path: readonly string[]): CsfExpression | undefined;
+  /**
+   * Read the expression at a property path like `get`, telling a missing field from one that cannot
+   * be read statically, without adding a mutation diagnostic. Use it for reads that only inform;
+   * `get` and `getValue` record why a read failed, which stops `writeConfig`.
+   *
+   * @example
+   * ```ts
+   * const object = loadConfig('export default { tags: [], args: { ...base } };').parse();
+   * object.inspect(['tags']).kind; // 'value'
+   * object.inspect(['missing']); // { kind: 'missing' }
+   * object.inspect(['args', 'size']).kind; // 'unreadable'
+   * object.mutationDiagnostics; // []
+   * ```
+   */
+  inspect(path: readonly string[]): CsfInspection;
   /**
    * Read plain values without executing code. Missing fields return `undefined`; unresolved
    * expressions also return `undefined` and add a mutation diagnostic.
@@ -405,12 +429,37 @@ class CsfObjectEditor implements CsfObject {
   }
 
   get(path: readonly string[]): CsfExpression | undefined {
+    const read = this.read(path);
+    if (read.kind === 'unreadable') {
+      this.reportDiagnostic(read.diagnostic);
+    }
+    return read.kind === 'value' ? read.node : undefined;
+  }
+
+  inspect(path: readonly string[]): CsfInspection {
+    const read = this.read(path);
+    if (read.kind !== 'outside') {
+      return read;
+    }
+    const name = path.length > 0 ? path.join('.') : 'the object itself';
+    const message = `Cannot read ${name}, which is not a field of this ${this.target.kind} object`;
+    return {
+      kind: 'unreadable',
+      diagnostic: this.diagnostic('unsupported-member', path, this.anchor(), message),
+    };
+  }
+
+  // `get` reads a path outside the object as missing, without a diagnostic.
+  private read(path: readonly string[]): CsfInspection | { kind: 'outside' } {
     const root = this.rootNodeFor(path);
     if (root) {
-      return parseExpression(detachedText(this.editor.code, root.start, this.editor.source(root)));
+      const source = detachedText(this.editor.code, root.start, this.editor.source(root));
+      return { kind: 'value', node: parseExpression(source) };
     }
-    const found = this.getProperty(path);
-    return found ? parseExpression(valueSource(this.editor, found)) : undefined;
+    const found = this.find(path);
+    return found.kind === 'property'
+      ? { kind: 'value', node: parseExpression(valueSource(this.editor, found.property)) }
+      : found;
   }
 
   getValue(path: readonly string[]): CsfValue {
@@ -446,17 +495,30 @@ class CsfObjectEditor implements CsfObject {
       : undefined;
   }
 
-  private getProperty(path: readonly string[]): Property | undefined {
+  private find(
+    path: readonly string[]
+  ):
+    | { kind: 'property'; property: Property }
+    | { kind: 'missing' }
+    | { kind: 'outside' }
+    | { kind: 'unreadable'; diagnostic: CsfMutationDiagnostic } {
     const logicalPath = this.normalizePath(path);
-    if (!logicalPath) {
-      return undefined;
+    if (!logicalPath || logicalPath.length === 0) {
+      return { kind: 'outside' };
     }
-    const found = this.inspect(logicalPath);
+    const found = this.locate(logicalPath);
     if (found.ok === false) {
-      this.failure(found.code, path, found.node);
-      return undefined;
+      return { kind: 'unreadable', diagnostic: this.diagnostic(found.code, path, found.node) };
+    }
+    return found.property ? { kind: 'property', property: found.property } : { kind: 'missing' };
+  }
+
+  private getProperty(path: readonly string[]): Property | undefined {
+    const found = this.find(path);
+    if (found.kind === 'unreadable') {
+      this.reportDiagnostic(found.diagnostic);
     }
-    return found.property;
+    return found.kind === 'property' ? found.property : undefined;
   }
 
   set(path: readonly string[], value: CsfValue<CsfExpression>): CsfMutationResult {
@@ -473,7 +535,7 @@ class CsfObjectEditor implements CsfObject {
         `Cannot set ${path.join('.')} to a ${unprintable.type} node that did not come from \`get\`, \`transform\` or \`parseExpression\``
       );
     }
-    const inspected = this.inspect(logicalPath, 'set');
+    const inspected = this.locate(logicalPath, 'set');
     if (inspected.ok === false) {
       return this.failure(inspected.code, path, inspected.node);
     }
@@ -501,7 +563,7 @@ class CsfObjectEditor implements CsfObject {
     if (!logicalPath || logicalPath.length === 0 || unsafePath(logicalPath)) {
       return this.failure('unsupported-member', path, this.anchor());
     }
-    const inspected = this.inspect(logicalPath);
+    const inspected = this.locate(logicalPath);
     if (inspected.ok === false) {
       return this.failure(inspected.code, path, inspected.node);
     }
@@ -523,7 +585,7 @@ class CsfObjectEditor implements CsfObject {
     if (!logicalPath || logicalPath.length === 0 || unsafePath(logicalPath)) {
       return this.failure('unsupported-member', path, this.anchor());
     }
-    const inspected = this.inspect(logicalPath);
+    const inspected = this.locate(logicalPath);
     if (inspected.ok === false) {
       return this.failure(inspected.code, path, inspected.node);
     }
@@ -573,7 +635,7 @@ class CsfObjectEditor implements CsfObject {
       return this.failure('cyclic-move', to, this.anchor());
     }
 
-    const source = this.inspect(sourcePath);
+    const source = this.locate(sourcePath);
     if (source.ok === false) {
       return this.failure(source.code, from, source.node);
     }
@@ -584,7 +646,7 @@ class CsfObjectEditor implements CsfObject {
     if (!removal.ok) {
       return this.failure(removal.code, from, removal.node);
     }
-    const destination = this.inspect(destinationPath);
+    const destination = this.locate(destinationPath);
     if (destination.ok === false) {
       return this.failure(destination.code, to, destination.node);
     }
@@ -611,7 +673,7 @@ class CsfObjectEditor implements CsfObject {
     if (!inserted.ok) {
       return inserted;
     }
-    const remaining = this.inspect(sourcePath);
+    const remaining = this.locate(sourcePath);
     if (remaining.ok === false || !remaining.property || !remaining.parent) {
       throw new Error(`CsfObject: ${sourcePath.join('.')} was not found again after moving it`);
     }
@@ -634,7 +696,7 @@ class CsfObjectEditor implements CsfObject {
     }
     let parent: ObjectRoot = this.root();
     if (logicalPath.length > 1) {
-      const inspected = this.inspect(logicalPath.slice(0, -1));
+      const inspected = this.locate(logicalPath.slice(0, -1));
       if (inspected.ok === false) {
         return this.failure(inspected.code, path, inspected.node);
       }
@@ -789,7 +851,7 @@ class CsfObjectEditor implements CsfObject {
     reported: readonly string[]
   ): CsfMutationResult | undefined {
     for (let depth = path.length - 1; depth > 0; depth--) {
-      const ancestor = this.inspect(path.slice(0, depth));
+      const ancestor = this.locate(path.slice(0, depth));
       if (
         ancestor.ok === false ||
         !ancestor.property ||
@@ -828,7 +890,7 @@ class CsfObjectEditor implements CsfObject {
   }
 
   // `access` applies to the last field of the path; its parents are read.
-  private inspect(
+  private locate(
     path: readonly string[],
     access: Access = 'read'
   ):
@@ -903,13 +965,13 @@ class CsfObjectEditor implements CsfObject {
     return this.editor.program;
   }
 
-  private failure(
+  private diagnostic(
     code: CsfMutationDiagnosticCode,
     path: readonly string[],
     node: Node,
     message = `Cannot mutate ${path.join('.')} because the target contains ${code.replaceAll('-', ' ')}`
-  ) {
-    const diagnostic: CsfMutationDiagnostic = {
+  ): CsfMutationDiagnostic {
+    return {
       code,
       target: this.target,
       path: [...path],
@@ -918,6 +980,15 @@ class CsfObjectEditor implements CsfObject {
         ? { loc: locationOf(this.editor.code, node.start, node.end) }
         : {}),
     };
+  }
+
+  private failure(
+    code: CsfMutationDiagnosticCode,
+    path: readonly string[],
+    node: Node,
+    message?: string
+  ) {
+    const diagnostic = this.diagnostic(code, path, node, message);
     this.reportDiagnostic(diagnostic);
     return { ok: false as const, changed: false as const, diagnostic };
   }
diff --git a/code/core/src/csf-tools/README.md b/code/core/src/csf-tools/README.md
index ba44cb768bb2..b8fc4c4049e3 100644
--- a/code/core/src/csf-tools/README.md
+++ b/code/core/src/csf-tools/README.md
@@ -16,23 +16,23 @@ It can parse MDX into CSF.
 `CsfFile.objects()` returns one `CsfObject` editor per mutable object it can prove safe to edit: the meta, each story export, and each CSF2 `Story.parameters` / `Story.argTypes` annotation assignment.
 `{ meta, stories }` narrows what is discovered; both are included by default. Story discovery also includes separate CSF2 parameter assignments, so callers use the same paths regardless of the source format.
 
-Each editor reads and writes static property paths with `get`, `getValue`, `set`, `transform`, `remove`, `rename`, `move`, and `group`.
+Each editor reads and writes static property paths with `get`, `getValue`, `inspect`, `set`, `transform`, `remove`, `rename`, `move`, and `group`.
 `get` returns an AST expression; `getValue` reads plain values from literals, nested arrays and objects, and local constants without executing code. Reads never return a partially decoded object.
 
-`get` and `getValue` return `undefined` both for a field that is missing and for one that cannot be read statically. Only the second adds a `CsfMutationDiagnostic` to `mutationDiagnostics`. For `get` that is a path whose parent is not an object literal, or that a spread, a computed key, or a duplicate field leaves unproven; `getValue` also reports a value it cannot evaluate, such as a call or a function. A field written as `undefined` is `undefined` without a diagnostic too, but `get` returns its expression. Compare the diagnostics before and after a read to tell the cases apart:
+`get` and `getValue` return `undefined` both for a field that is missing and for one that cannot be read statically. Only the second adds a `CsfMutationDiagnostic` to `mutationDiagnostics`. For `get` that is a path whose parent is not an object literal, or that a spread, a computed key, or a duplicate field leaves unproven; `getValue` also reports a value it cannot evaluate, such as a call or a function. A field written as `undefined` is `undefined` without a diagnostic too, but `get` returns its expression. `inspect` tells the cases apart without recording a diagnostic. It reads the expression like `get`, without evaluating it:
 
 ```ts
-const before = csf.mutationDiagnostics.length;
-const size = story.getValue(['args', 'size']);
-const [unreadable] = csf.mutationDiagnostics.slice(before);
-if (size === undefined && unreadable) {
-  // `args.size` may be set to a value that cannot be read statically: see `unreadable.code`
-} else if (size === undefined) {
-  // `args.size` is missing, or written as `undefined`
+const size = story.inspect(['args', 'size']);
+if (size.kind === 'value') {
+  // `size.node` is the expression, `undefined` included
+} else if (size.kind === 'unreadable') {
+  // `args.size` may be set where it cannot be read statically: see `size.diagnostic.code`
+} else {
+  // `args.size` is missing
 }
 ```
 
-Read diagnostics count like mutation ones, so `writeConfig` refuses a config after a read that added one.
+Read diagnostics count like mutation ones, so `writeConfig` refuses a config after a read that added one. Use `get` and `getValue` for the reads an edit depends on, so a file whose shape was not proven is not written, and `inspect` for reads that only inform, such as an addon showing a field.
 
 `set` accepts an expression from `get` or `parseExpression`, or plain strings, numbers, booleans, `null`, `undefined`, and nested arrays or objects of those values and expressions. An object whose `type` names an AST node is rejected with a diagnostic unless it came from `get` or `parseExpression`. Plain values are printed into the source, so later changes to the input do not affect the file.
 An expression from `get` is indented as if its line had no indent, and `set` and `transform` indent a value's lines like the line of the field it is written to, so a value copied between fields keeps its layout.
diff --git a/code/core/src/csf-tools/index.ts b/code/core/src/csf-tools/index.ts
index 529195f6783f..6e8e3d6cc03a 100644
--- a/code/core/src/csf-tools/index.ts
+++ b/code/core/src/csf-tools/index.ts
@@ -1,5 +1,6 @@
 export * from './CsfFile.ts';
 export type {
+  CsfInspection,
   CsfMutationDiagnostic,
   CsfMutationDiagnosticCode,
   CsfMutationResult,

From 18e6038772bffe261a745727f14ebfe9aaa42ef1 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 11:36:09 +0200
Subject: [PATCH 265/326] test(cli-storybook): expect the dirname import to
 join the existing node:path import

`setImport` now merges a value specifier into the declaration of the same module instead of
adding a second one, so the wrap-getAbsolutePath automigration writes one `node:path` import.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../src/automigrate/fixes/wrap-getAbsolutePath.test.ts      | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.test.ts
index b2b7ce3e7b25..a1b8c43e8af1 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/wrap-getAbsolutePath.test.ts
@@ -118,8 +118,7 @@ describe('wrapGetAbsolutePath', () => {
 
       expect(() => parseModule(output, 'main.js')).not.toThrow();
       expect(output).toMatchInlineSnapshot(`
-        "import { dirname as pathDirname } from 'node:path';
-        import path from 'node:path';
+        "import path, { dirname as pathDirname } from 'node:path';
         import { fileURLToPath } from 'node:url';
 
         const dirname = path.dirname(fileURLToPath(import.meta.url));
@@ -187,8 +186,7 @@ describe('wrapGetAbsolutePath', () => {
 
       expect(() => parseModule(output, 'main.js')).not.toThrow();
       expect(output).toMatchInlineSnapshot(`
-        "import { dirname as pathDirname } from 'node:path';
-        import path from 'node:path';
+        "import path, { dirname as pathDirname } from 'node:path';
         import { fileURLToPath } from 'node:url';
 
         const { dirname } = path;

From a0d4d70a8f68779db8f87196444c60526746b0ee Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <sidnioulz@gmail.com>
Date: Tue, 20 Oct 2026 11:42:46 +0200
Subject: [PATCH 266/326] Core: Share one pnpm-workspace.yaml writer and inline
 the path lookup

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../js-package-manager/PNPMProxy.test.ts      | 21 ++++++++++++----
 .../common/js-package-manager/PNPMProxy.ts    | 24 +++++++++----------
 2 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/code/core/src/common/js-package-manager/PNPMProxy.test.ts b/code/core/src/common/js-package-manager/PNPMProxy.test.ts
index d3447580cc0a..5f0f78691f5d 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.test.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.test.ts
@@ -5,9 +5,11 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { logger, prompt } from 'storybook/internal/node-logger';
 import { MinimumReleaseAgeHandledError } from 'storybook/internal/server-errors';
 
+import * as find from 'empathic/find';
 import { fs as memfs, vol } from 'memfs';
 
 import { executeCommand, executeCommandSync } from '../utils/command.ts';
+import { getProjectRoot } from '../utils/paths.ts';
 import { JsPackageManager } from './JsPackageManager.ts';
 import { PNPMProxy } from './PNPMProxy.ts';
 
@@ -27,6 +29,8 @@ vi.mock('storybook/internal/node-logger', () => ({
 
 vi.mock(import('../utils/command.ts'), { spy: true });
 vi.mock('node:fs', { spy: true });
+vi.mock('empathic/find', { spy: true });
+vi.mock('../utils/paths.ts', { spy: true });
 const mockedExecuteCommand = vi.mocked(executeCommand);
 const mockedExecuteCommandSync = vi.mocked(executeCommandSync);
 
@@ -55,8 +59,9 @@ describe('PNPM Proxy', () => {
   const workspaceYaml = () => vol.toJSON()[WORKSPACE_YAML];
 
   const useMemfsProject = (proxy: PNPMProxy, packageJson: Record<string, unknown> = {}) => {
-    vi.spyOn(proxy as any, 'findWorkspaceYamlPath').mockImplementation(() =>
-      vol.existsSync(WORKSPACE_YAML) ? WORKSPACE_YAML : undefined
+    vi.mocked(getProjectRoot).mockReturnValue(PROJECT_DIR);
+    vi.mocked(find.up).mockImplementation((name) =>
+      name === 'pnpm-workspace.yaml' && vol.existsSync(WORKSPACE_YAML) ? WORKSPACE_YAML : undefined
     );
     vi.spyOn(proxy, 'primaryPackageJson', 'get').mockReturnValue({
       operationDir: PROJECT_DIR,
@@ -379,14 +384,20 @@ describe('PNPM Proxy', () => {
       );
     });
 
-    it('does nothing on pnpm < 10.26, which has no allowBuilds setting', async () => {
-      mockPnpmVersion('10.25.0');
+    it.each([
+      ['pnpm 9, which runs build scripts without approval', '9.15.9'],
+      ['pnpm < 10.26, which has no allowBuilds setting', '10.25.0'],
+    ])('neither reads nor writes the workspace file on %s', async (_, version) => {
+      mockPnpmVersion(version);
       pnpmProxy = new PNPMProxy();
       useMemfsProject(pnpmProxy);
+      vol.fromJSON({ [WORKSPACE_YAML]: 'packages:\n  - "packages/*"\n' });
 
       await install();
 
-      expect(workspaceYaml()).toBeUndefined();
+      expect(readFileSync).not.toHaveBeenCalledWith(WORKSPACE_YAML, expect.anything());
+      expect(writeFileSync).not.toHaveBeenCalled();
+      expect(workspaceYaml()).toBe('packages:\n  - "packages/*"\n');
     });
   });
 
diff --git a/code/core/src/common/js-package-manager/PNPMProxy.ts b/code/core/src/common/js-package-manager/PNPMProxy.ts
index 6153fd707ab3..af218f1f00a3 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.ts
@@ -287,7 +287,7 @@ export class PNPMProxy extends JsPackageManager {
         /^[~^]/.test(version) || prerelease(version) ? '' : (current.match(/^[~^]/)?.[0] ?? '');
       workspace.doc.setIn(keyPath, `${modifier}${version}`);
     }
-    writeFileSync(workspace.path, workspace.doc.toString(), 'utf8');
+    this.#writeWorkspaceYaml(workspace);
     return upgrades.filter(({ catalog }) => catalog === null).map(({ specifier }) => specifier);
   }
 
@@ -319,14 +319,6 @@ export class PNPMProxy extends JsPackageManager {
     return match ? match[1].trim() : null;
   }
 
-  /** Looks for a `pnpm-workspace.yaml` all the way down to the project root. */
-  protected findWorkspaceYamlPath(): string | undefined {
-    return find.up('pnpm-workspace.yaml', {
-      cwd: this.primaryPackageJson.operationDir,
-      last: getProjectRoot(),
-    });
-  }
-
   // From pnpm 11, an unreviewed build script fails a non-interactive install outright, and
   // `pnpm install` has no flag to approve one, so record the approval like `pnpm approve-builds`.
   protected allowStorybookBuildScripts(): void {
@@ -368,7 +360,7 @@ export class PNPMProxy extends JsPackageManager {
       for (const pkg of pending) {
         doc.setIn(['allowBuilds', pkg], true);
       }
-      writeFileSync(path, doc.toString(), 'utf8');
+      this.#writeWorkspaceYaml({ path, doc });
     } catch (e) {
       logger.warn(
         `Could not allow build scripts of ${STORYBOOK_BUILD_SCRIPT_PACKAGES.join(', ')} in ${path}: ${String(e)}`
@@ -376,12 +368,20 @@ export class PNPMProxy extends JsPackageManager {
     }
   }
 
+  #writeWorkspaceYaml({ path, doc }: { path: string; doc: Document }): void {
+    logger.debug(`Writing pnpm workspace file ${path}`);
+    writeFileSync(path, doc.toString(), 'utf8');
+  }
+
   // Null when the file is malformed, or missing without `createIfMissing`; with it, a missing file
   // yields an empty document addressed next to the package.json we operate on.
   #readWorkspaceYaml(options?: {
     createIfMissing: boolean;
   }): { path: string; doc: Document } | null {
-    const path = this.findWorkspaceYamlPath();
+    const path = find.up('pnpm-workspace.yaml', {
+      cwd: this.primaryPackageJson.operationDir,
+      last: getProjectRoot(),
+    });
     if (!path) {
       return options?.createIfMissing
         ? {
@@ -456,7 +456,7 @@ export class PNPMProxy extends JsPackageManager {
       }
 
       if (changed) {
-        writeFileSync(workspace.path, workspace.doc.toString(), 'utf8');
+        this.#writeWorkspaceYaml(workspace);
       }
       return true;
     } catch (e) {

From 7dbdb6badddd55bed3a8e733775a2c66c7538f13 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 10:14:05 +0200
Subject: [PATCH 267/326] feat(csf-tools): apply several mutations as one with
 transaction

Every CsfObject mutation commits on its own. A codemod that removes
parameters.msw and then has its beforeEach set refused leaves the file half
edited, with nothing to undo the removal.

CsfFile.transaction(fn) and ConfigFile.transaction(fn) snapshot the editor
(tree, pending edits, committed edits), run fn, and put the snapshot back and
index it again through the commit hook when fn throws, returns false, or any
mutation in it returned ok: false. Per-object and per-file changed flags are
restored through rollbacks registered while the transaction runs. Reads that
cannot resolve a value still report a diagnostic but do not count as refusals.
Diagnostics stay, so a codemod can report why a story was skipped.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 code/core/src/csf-tools/ConfigFile.ts     |  30 ++++-
 code/core/src/csf-tools/CsfFile.ts        |  23 ++++
 code/core/src/csf-tools/CsfObject.test.ts | 140 ++++++++++++++++++++++
 code/core/src/csf-tools/CsfObject.ts      |  15 ++-
 code/core/src/csf-tools/README.md         |  14 +++
 code/core/src/csf-tools/estree/editor.ts  |  55 +++++++++
 6 files changed, 270 insertions(+), 7 deletions(-)

diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index 0158364a8a3f..8bc33eabae61 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -402,11 +402,34 @@ export class ConfigFile implements CsfObject {
     return this._mutate((object) => object.group(path, names));
   }
 
+  /**
+   * Apply mutations together: when `fn` throws, returns `false`, or any mutation in it returns
+   * `{ ok: false }`, every edit made in it is rolled back, those of array and import helpers too.
+   * Its diagnostics stay, to report why. Returns whether the edits were kept.
+   *
+   * @example
+   * ```ts
+   * const config = loadConfig("export default { layout: 'centered', tags: ['a'] };").parse();
+   * config.transaction(() => {
+   *   config.remove(['layout']);
+   *   config.set(['tags', 'value'], 'b');
+   * }); // false: `tags` is an array, so the removal is rolled back too
+   * ```
+   */
+  transaction(fn: () => boolean | void): boolean {
+    const changed = this._changed;
+    return this._editor.transaction(fn, () => {
+      this._changed = changed;
+    });
+  }
+
   _mutate(operation: (object: CsfObject) => CsfMutationResult): CsfMutationResult {
     const editor = this._objectEditor('mutate');
-    return editor.ok === true
-      ? operation(editor.object)
-      : { ok: false, changed: false, diagnostic: editor.diagnostic };
+    if (editor.ok === true) {
+      return operation(editor.object);
+    }
+    this._editor._refuse();
+    return { ok: false, changed: false, diagnostic: editor.diagnostic };
   }
 
   _objectEditor(mode: 'read' | 'mutate') {
@@ -862,6 +885,7 @@ export class ConfigFile implements CsfObject {
       loc: locationOf(this._code, node.start, node.end),
     };
     this._mutationDiagnostics.push(diagnostic);
+    this._editor._refuse();
     return { ok: false, changed: false, diagnostic };
   }
 
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index 47cee9f5b38f..198323fecd62 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -447,6 +447,29 @@ export class CsfFile {
     );
   }
 
+  /**
+   * Apply mutations together: when `fn` throws, returns `false`, or any mutation in it returns
+   * `{ ok: false }`, every edit made in it is rolled back. Its diagnostics stay, to report why.
+   * Returns whether the edits were kept.
+   *
+   * @example
+   * ```ts
+   * const [story] = csf.objects({ meta: false });
+   * const migrated = csf.transaction(() => {
+   *   story.remove(['parameters', 'msw']);
+   *   story.set(['beforeEach'], parseExpression('mockHandlers'));
+   * });
+   * // false, and the file as it was, when `beforeEach` cannot be set
+   * ```
+   */
+  transaction(fn: () => boolean | void): boolean {
+    const state = mutationStates.get(this)!;
+    const { changed } = state;
+    return this._editor.transaction(fn, () => {
+      state.changed = changed;
+    });
+  }
+
   // Not committed: `formatCsf` prints it with the other pending edits.
   _appendStatement(code: string) {
     appendStatement(this._editor, code);
diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index 979f2058392b..bbcf40400c38 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -1223,6 +1223,146 @@ describe('CsfObject', () => {
       expect(() => csf.objects()).toThrow(error);
     });
   });
+
+  describe('transaction', () => {
+    const source = `export default { title: 'B' };
+export const A = {
+  beforeEach: setup,
+  ...shared,
+  parameters: { msw: { handlers: [] }, layout: 'centered' },
+};
+`;
+
+    it('rolls every edit back when a mutation in it is refused', () => {
+      const csf = parse(source);
+      const [story] = csf.objects({ meta: false });
+
+      const kept = csf.transaction(() => {
+        expect(story.remove(['parameters', 'msw'])).toEqual({ ok: true, changed: true });
+        expect(story.set(['beforeEach'], parseExpression('mockHandlers')).ok).toBe(false);
+      });
+
+      expect(kept).toBe(false);
+      expect(printCsf(csf).code).toBe(source);
+      expect(story.getValue(['parameters', 'layout'])).toBe('centered');
+      expect(story.get(['parameters', 'msw'])).toBeDefined();
+      expect(csf.changed).toBe(false);
+      expect(story.changed).toBe(false);
+      expect(csf.mutationDiagnostics).toEqual([
+        expect.objectContaining({ code: 'spread-field', path: ['beforeEach'] }),
+      ]);
+    });
+
+    it('keeps the edits when every mutation in it succeeds', () => {
+      const csf = parse(source);
+      const [story] = csf.objects({ meta: false });
+
+      const kept = csf.transaction(() => {
+        story.remove(['parameters', 'msw']);
+        story.set(['parameters', 'layout'], 'fullscreen');
+      });
+
+      expect(kept).toBe(true);
+      expect(printCsf(csf).code).toContain("parameters: { layout: 'fullscreen' },");
+      expect(csf.changed).toBe(true);
+      expect(story.changed).toBe(true);
+    });
+
+    it('rolls back when the function returns false or throws, and rethrows', () => {
+      const csf = parse(source);
+      const [story] = csf.objects({ meta: false });
+
+      expect(csf.transaction(() => (story.remove(['parameters']), false))).toBe(false);
+      expect(() =>
+        csf.transaction(() => {
+          story.remove(['parameters']);
+          throw new Error('codemod bug');
+        })
+      ).toThrow('codemod bug');
+
+      expect(printCsf(csf).code).toBe(source);
+      expect(csf.stories.map(({ name }) => name)).toEqual(['A']);
+    });
+
+    it('rolls back an edit the CSF indexer rejects, so the file indexes again', () => {
+      const csf = parse("export default { title: 'B', tags: ['docs'] };\nexport const A = {};\n");
+      const [meta] = csf.objects({ stories: false });
+
+      const kept = csf.transaction(() => {
+        meta.set(['tags'], parseExpression("[...['docs'], 'autodocs']"));
+      });
+
+      expect(kept).toBe(false);
+      expect(csf.meta?.tags).toEqual(['docs']);
+      expect(meta.set(['tags'], ['docs', 'autodocs'])).toEqual({ ok: true, changed: true });
+    });
+
+    it('rolls back an inner transaction on its own', () => {
+      const csf = parse(source);
+      const [story] = csf.objects({ meta: false });
+
+      const kept = csf.transaction(() => {
+        story.remove(['parameters', 'msw']);
+        expect(csf.transaction(() => story.set(['beforeEach'], 'x').ok)).toBe(false);
+      });
+
+      expect(kept).toBe(true);
+      expect(printCsf(csf).code).toContain("parameters: { layout: 'centered' },");
+      expect(printCsf(csf).code).toContain('beforeEach: setup,');
+    });
+
+    it('rolls back a kept inner transaction with the outer one', () => {
+      const csf = parse(source);
+      const [story] = csf.objects({ meta: false });
+
+      const kept = csf.transaction(() => {
+        expect(csf.transaction(() => story.remove(['parameters', 'msw']).ok)).toBe(true);
+        story.set(['beforeEach'], 'x');
+      });
+
+      expect(kept).toBe(false);
+      expect(printCsf(csf).code).toBe(source);
+      expect(story.changed).toBe(false);
+    });
+
+    it('rolls back what a function returning a promise did before throwing', () => {
+      const csf = parse(source);
+      const [story] = csf.objects({ meta: false });
+
+      // @ts-expect-error A transaction runs synchronously.
+      expect(() => csf.transaction(async () => story.remove(['parameters']))).toThrow('promise');
+      expect(printCsf(csf).code).toBe(source);
+    });
+
+    it('rolls back when an array helper is refused', () => {
+      const code = "export default { layout: 'centered', tags: 'a' };";
+      const config = loadConfig(code).parse();
+
+      const kept = config.transaction(() => {
+        config.remove(['layout']);
+        config.appendValueToArray(['tags'], 'b');
+      });
+
+      expect(kept).toBe(false);
+      expect(printConfig(config).code).toBe(code);
+    });
+
+    it('rolls back config edits, named exports included', () => {
+      const code =
+        "export const parameters = { layout: 'centered' };\nexport const tags = ['a'];\n";
+      const config = loadConfig(code).parse();
+
+      const kept = config.transaction(() => {
+        config.remove(['parameters', 'layout']);
+        config.set(['tags', 'nested'], 1);
+      });
+
+      expect(kept).toBe(false);
+      expect(printConfig(config).code).toBe(code);
+      expect(config.changed).toBe(false);
+      expect(config.getValue(['parameters'])).toEqual({ layout: 'centered' });
+    });
+  });
 });
 
 describe('CsfObject.node', () => {
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index 6bfc646ac2c3..7dcb7d3625be 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -467,7 +467,7 @@ class CsfObjectEditor implements CsfObject {
     if (root) {
       const value = readValue(this.editor.scopes, root);
       if (value === UNRESOLVED) {
-        this.failure('unsupported-value', path, root);
+        this.reportDiagnostic(this.diagnostic('unsupported-value', path, root));
         return undefined;
       }
       return value;
@@ -477,12 +477,12 @@ class CsfObjectEditor implements CsfObject {
       return undefined;
     }
     if (property.method) {
-      this.failure('unsupported-value', path, property);
+      this.reportDiagnostic(this.diagnostic('unsupported-value', path, property));
       return undefined;
     }
     const value = readValue(this.editor.scopes, property.value);
     if (value === UNRESOLVED) {
-      this.failure('unsupported-value', path, property.value);
+      this.reportDiagnostic(this.diagnostic('unsupported-value', path, property.value));
       return undefined;
     }
     return value;
@@ -990,6 +990,8 @@ class CsfObjectEditor implements CsfObject {
   ) {
     const diagnostic = this.diagnostic(code, path, node, message);
     this.reportDiagnostic(diagnostic);
+    // Unlike a read, a refused mutation rolls back the transaction it runs in.
+    this.editor._refuse();
     return { ok: false as const, changed: false as const, diagnostic };
   }
 
@@ -997,7 +999,12 @@ class CsfObjectEditor implements CsfObject {
   // JS, so that is a diagnostic rather than an error. Code that does not parse is left pending by
   // the editor, and the error is the caller's.
   private commit(path: readonly string[]): CsfMutationResult {
-    this.#changed = true;
+    if (!this.#changed) {
+      this.#changed = true;
+      this.editor._transaction?.rollbacks.push(() => {
+        this.#changed = false;
+      });
+    }
     this.markChanged();
     try {
       this.editor.commit();
diff --git a/code/core/src/csf-tools/README.md b/code/core/src/csf-tools/README.md
index b8fc4c4049e3..613b3e6f1d39 100644
--- a/code/core/src/csf-tools/README.md
+++ b/code/core/src/csf-tools/README.md
@@ -49,6 +49,20 @@ Unproven shapes include story or meta bindings that are reassigned or aliased, a
 
 `CsfFile.changed` is true once any mutation has been applied, which is the signal for whether the file needs to be written back.
 
+Each mutation is applied on its own. To apply several as one, run them in `transaction(fn)` on `CsfFile` or `ConfigFile`: when `fn` throws, returns `false`, or any mutation in it returns `{ ok: false }`, every edit made in it is rolled back, and `changed` with it. Mutations inside return their results as usual, and the diagnostics of refused ones stay on `mutationDiagnostics`. `transaction` returns whether the edits were kept. `fn` runs synchronously; one that returns a promise throws. A transaction inside another rolls back on its own, and with the outer one.
+
+```ts
+for (const story of csf.objects()) {
+  const handlers = story.get(['parameters', 'msw', 'handlers']);
+  if (handlers) {
+    csf.transaction(() => {
+      story.remove(['parameters', 'msw']);
+      story.set(['beforeEach'], parseExpression(`() => worker.use(...${placeableTextOf(handlers)})`));
+    });
+  }
+}
+```
+
 ## Transforming preview and main configuration
 
 `ConfigFile` implements `CsfObject` directly, exposing the same methods and mutation results as the editors returned by `CsfFile.objects()`. Config files use `{ kind: 'config' }` as their target. Default-exported objects, identifier-backed objects, `definePreview` configurations, and CommonJS `module.exports` use their config object as the root.
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index a81492a3c3ba..435857de6e38 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -50,6 +50,7 @@ export interface SourceEdits {
   prependRight(index: number, content: string): this;
   overwrite(start: number, end: number, content: string): this;
   remove(start: number, end: number): this;
+  clone(): SourceEdits;
   /** The content of a span as edited so far; throws when an edit cuts through its ends. */
   slice(start: number, end: number): string;
   hasChanged(): boolean;
@@ -105,6 +106,17 @@ export class SourceEditor {
 
   _style: Style | undefined;
 
+  // The transaction running, if any: whether a mutation in it was refused, so it rolls back, and
+  // how to undo state kept outside the editor, such as a `changed` flag.
+  _transaction: { refused: boolean; rollbacks: (() => void)[] } | undefined;
+
+  /** Mark a mutation as refused, so the transaction it runs in rolls back. */
+  _refuse() {
+    if (this._transaction) {
+      this._transaction.refused = true;
+    }
+  }
+
   constructor(code: string, fileName?: string, onCommit?: () => void) {
     this.fileName = fileName;
     this._onCommit = onCommit;
@@ -206,6 +218,49 @@ export class SourceEditor {
     return true;
   }
 
+  /**
+   * Run `fn`, keeping its edits only when it does not throw, does not return `false` and no
+   * mutation in it was refused. Otherwise the code, the tree and the pending and committed edits
+   * are put back as they were and indexed again, as a commit would, and `onRollback` runs. Returns
+   * whether they were kept.
+   */
+  transaction(fn: () => boolean | void, onRollback?: () => void): boolean {
+    const { _module, _style, _transaction: outer } = this;
+    const committed = this._committed.length;
+    const edits = this._edits.clone();
+    const transaction = { refused: false, rollbacks: onRollback ? [onRollback] : [] };
+    this._transaction = transaction;
+    let kept = false;
+    try {
+      const result = fn();
+      if (typeof (result as unknown as PromiseLike<unknown> | undefined)?.then === 'function') {
+        throw new Error(
+          'A transaction cannot wait for a promise: its edits would be made after it'
+        );
+      }
+      kept = result !== false && !transaction.refused;
+    } finally {
+      this._transaction = outer;
+      if (kept) {
+        outer?.rollbacks.push(...transaction.rollbacks);
+      } else {
+        transaction.rollbacks.reverse().forEach((rollback) => rollback());
+        this._module = _module;
+        this._style = _style;
+        this._committed.length = committed;
+        this._edits = edits;
+        this._scopes = undefined;
+        this._parents = undefined;
+        try {
+          this._onCommit?.();
+        } catch {
+          // The code before `fn` indexed, or failed to, the same way.
+        }
+      }
+    }
+    return kept;
+  }
+
   /**
    * Hi-res map from the code the editor was created with to `toString()`, through every commit,
    * and through `inputSourceMap` when the code came from an earlier transform. Without an input

From 8da8b518a79e5e7be271ce5b74696efed8643f17 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 11:49:41 +0200
Subject: [PATCH 268/326] fix(csf-tools): put a one-line object on several
 lines for a multi-line member
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adding `play: async () => {…}` to `{ args: { a: 1 } }` wrote the function
inside the one-line object, a layout no formatter produces and that reads
badly in a diff.

When a multi-line item, or one ending in a line comment, is appended to an
object or array written on one line, appendToList now puts every item on a
line of its own at the list's indent plus the file's step, and the closing
brace or bracket on the line after them. The items' text stays as written,
and so does the list's trailing comma convention. A later append of the same
batch continues the broken layout. Call arguments keep hugging their call,
as `f(a, () => {…})` does in formatted code, other lists (declarators,
specifiers) keep their line, and a one-line item leaves the list on its
line. Lists around the broken one, and prepends, keep their layout.

The line breaks replace the spaces between items with `update`, which keeps
what was written next to them, so appended items stay to the right of the
last item and a wrapper written around it before or after the break stays
around it alone. Without spaces before the closing token, the token itself
takes the line break, so it follows the items. `SourceEdits` gains `update`.

No automigration or create-storybook snapshot changed. Two editor and config
tests that appended an item ending in a line comment now expect the broken
layout, which is closer to what a formatter makes of them.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 code/core/src/csf-tools/ConfigFile.test.ts    |   2 +-
 code/core/src/csf-tools/README.md             |   2 +-
 code/core/src/csf-tools/estree/editor.test.ts | 101 ++++++++++++++++--
 code/core/src/csf-tools/estree/editor.ts      |  42 +++++++-
 4 files changed, 132 insertions(+), 15 deletions(-)

diff --git a/code/core/src/csf-tools/ConfigFile.test.ts b/code/core/src/csf-tools/ConfigFile.test.ts
index 3e4bc9057d23..8451fadfab60 100644
--- a/code/core/src/csf-tools/ConfigFile.test.ts
+++ b/code/core/src/csf-tools/ConfigFile.test.ts
@@ -845,7 +845,7 @@ describe('ConfigFile', () => {
       {
         source: `export default { addons: ['b'] };`,
         expression: `'x' //c`,
-        output: `export default { addons: ['b', 'x' //c\n] };`,
+        output: `export default { addons: [\n  'b',\n  'x' //c\n] };`,
       },
       {
         source: `export default {};`,
diff --git a/code/core/src/csf-tools/README.md b/code/core/src/csf-tools/README.md
index 613b3e6f1d39..98350476f6f8 100644
--- a/code/core/src/csf-tools/README.md
+++ b/code/core/src/csf-tools/README.md
@@ -35,7 +35,7 @@ if (size.kind === 'value') {
 Read diagnostics count like mutation ones, so `writeConfig` refuses a config after a read that added one. Use `get` and `getValue` for the reads an edit depends on, so a file whose shape was not proven is not written, and `inspect` for reads that only inform, such as an addon showing a field.
 
 `set` accepts an expression from `get` or `parseExpression`, or plain strings, numbers, booleans, `null`, `undefined`, and nested arrays or objects of those values and expressions. An object whose `type` names an AST node is rejected with a diagnostic unless it came from `get` or `parseExpression`. Plain values are printed into the source, so later changes to the input do not affect the file.
-An expression from `get` is indented as if its line had no indent, and `set` and `transform` indent a value's lines like the line of the field it is written to, so a value copied between fields keeps its layout.
+An expression from `get` is indented as if its line had no indent, and `set` and `transform` indent a value's lines like the line of the field it is written to, so a value copied between fields keeps its layout. A field that spans lines, added to an object written on one line, puts every field of that object on a line of its own; a one-line field leaves the object on its line. Objects around it, and an object a field is grouped into, keep their layout.
 Successful removals and moves recursively remove empty source parents, stopping at the editor's root object or an empty parent that shadows an earlier spread or computed key. Removing a field that could reveal an earlier spread value produces a diagnostic. Moves clean up after inserting the destination, so shared ancestors remain intact. Unrelated empty objects are preserved.
 Nested object paths can follow local constants used only by that object; shared or reassigned references remain untouched.
 Nodes reused by `transform` keep their original source, so relocating a value prints it as written instead of pretty-printing it.
diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index 8cfe40d32acf..77b0aa1db03c 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -249,13 +249,94 @@ describe('lists', () => {
     expect(editor.toString()).toBe('f?.<T>(/* ( */ a, b);');
   });
 
-  it('indents the continuation lines of an item added to a one-line list like its line', () => {
-    const { editor } = firstStatement('const a = {\n  b: [1],\n};');
-    const array = editor.program.body[0] as E.VariableDeclaration;
-    const object = array.declarations[0].init as E.ObjectExpression;
-    const value = (object.properties[0] as E.ObjectProperty).value as E.ArrayExpression;
-    appendToList(editor, arrayList(editor, value), ['{\n  c: 2,\n}']);
-    expect(editor.toString()).toBe('const a = {\n  b: [1, {\n    c: 2,\n  }],\n};');
+  it('indents the continuation lines of an argument added to a one-line call like its line', () => {
+    const { editor } = firstStatement('const a = {\n  b: f(1),\n};');
+    const declaration = editor.program.body[0] as E.VariableDeclaration;
+    const object = declaration.declarations[0].init as E.ObjectExpression;
+    const value = (object.properties[0] as E.ObjectProperty).value as E.CallExpression;
+    appendToList(editor, argumentList(editor, value), ['{\n  c: 2,\n}']);
+    expect(editor.toString()).toBe('const a = {\n  b: f(1, {\n    c: 2,\n  }),\n};');
+  });
+
+  it('puts the items of a one-line object or array on lines of their own for a multi-line item', () => {
+    const csf = parse('export default {};\nexport const A = { args: { a: 1 } };\n');
+    const [story] = csf.objects({ meta: false });
+    story.set(['play'], parseExpression('async () => {\n  await x();\n}'));
+    expect(printCsf(csf).code).toBe(dedent`
+      export default {};
+      export const A = {
+        args: { a: 1 },
+        play: async () => {
+          await x();
+        }
+      };
+
+    `);
+
+    const { editor, statement } = firstStatement('call([1, /* two */ 2]);');
+    const call = expressionOf(statement) as E.CallExpression;
+    appendToList(editor, arrayList(editor, call.arguments[0] as E.ArrayExpression), [
+      '() => {\n  y();\n}',
+    ]);
+    expect(editor.toString()).toBe('call([\n  1,\n  /* two */ 2,\n  () => {\n    y();\n  }\n]);');
+  });
+
+  it('keeps a one-line object on its line for a one-line item', () => {
+    const csf = parse('export default {};\nexport const A = { args: { a: 1 } };\n');
+    const [story] = csf.objects({ meta: false });
+    story.set(['args', 'b'], 2);
+    story.set(['tags'], ['x']);
+    expect(printCsf(csf).code).toBe(
+      'export default {};\nexport const A = { args: { a: 1, b: 2 }, tags: ["x"] };\n'
+    );
+  });
+
+  it('lays out a multi-line item added to an object without spaces inside its braces', () => {
+    const { editor, statement } = firstStatement('({a: 1});');
+    appendToList(editor, objectList(editor, expressionOf(statement) as E.ObjectExpression), [
+      'b: {\n  c: 2,\n}',
+    ]);
+    expect(editor.toString()).toBe('({\n  a: 1,\n  b: {\n    c: 2,\n  }\n});');
+  });
+
+  it('keeps the comma of each item when appending to a one-line list twice before a commit', () => {
+    const { editor, statement } = firstStatement('f([1], { a: 1 });');
+    const call = expressionOf(statement) as E.CallExpression;
+    const [array, object] = call.arguments as [E.ArrayExpression, E.ObjectExpression];
+    appendToList(editor, arrayList(editor, array), ['() => {\n  x();\n}']);
+    appendToList(editor, arrayList(editor, array), ['3']);
+    appendToList(editor, objectList(editor, object), ['b: {\n  c: 2,\n}']);
+    appendToList(editor, objectList(editor, object), ['d: {\n  e: 3,\n}']);
+    expect(editor.toString()).toBe(
+      'f([\n  1,\n  () => {\n    x();\n  },\n  3\n], {\n  a: 1,\n  b: {\n    c: 2,\n  },\n  d: {\n    e: 3,\n  }\n});'
+    );
+    expect(() => parseModule(editor.toString())).not.toThrow();
+  });
+
+  it.each([
+    ['before', '({a: x});'],
+    ['after', '({ a: x });'],
+  ])('keeps a wrapper written %s the break around its member alone', (order, code) => {
+    const { editor, statement } = firstStatement(code);
+    const object = expressionOf(statement) as E.ObjectExpression;
+    const wrap = () =>
+      wrapExpression(editor, (object.properties[0] as E.ObjectProperty).value, 'w(', ')');
+    if (order === 'before') {
+      wrap();
+    }
+    appendToList(editor, objectList(editor, object), ['b: {\n  c: 2,\n}']);
+    if (order === 'after') {
+      wrap();
+    }
+    expect(editor.toString()).toBe('({\n  a: w(x),\n  b: {\n    c: 2,\n  }\n});');
+  });
+
+  it('keeps a declaration on its line for a multi-line declarator', () => {
+    const { editor, statement } = firstStatement('const a = 1;');
+    appendToList(editor, declaratorList(editor, statement as E.VariableDeclaration), [
+      'b = {\n  c: 2,\n}',
+    ]);
+    expect(editor.toString()).toBe('const a = 1, b = {\n  c: 2,\n};');
   });
 
   it('keeps the line break of a prepended item ending in a line comment when code follows it', () => {
@@ -555,19 +636,19 @@ describe('replaceValue', () => {
     expect(editor.toString()).toBe(`export default { a: x, // c\n };`);
   });
 
-  it('ends a line comment before the member it is appended after on one line', () => {
+  it('puts the members of a one-line object on lines of their own for one ending in a line comment', () => {
     const trailingComma = new SourceEditor(`export default { a: 1, };`);
     appendToList(trailingComma, objectList(trailingComma, firstMember(trailingComma).object), [
       'b: x // c\n',
     ]);
-    expect(trailingComma.toString()).toBe(`export default { a: 1, b: x, // c\n };`);
+    expect(trailingComma.toString()).toBe(`export default {\n  a: 1,\n  b: x, // c\n};`);
 
     const noComma = new SourceEditor(`export default { a: 1 };`);
     appendToList(noComma, objectList(noComma, firstMember(noComma).object), [
       'b: x // c\n',
       'd: 2',
     ]);
-    expect(noComma.toString()).toBe(`export default { a: 1, b: x, // c\nd: 2 };`);
+    expect(noComma.toString()).toBe(`export default {\n  a: 1,\n  b: x, // c\n  d: 2\n};`);
   });
 });
 
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 435857de6e38..cd6d6e775034 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -49,6 +49,8 @@ export interface SourceEdits {
   appendRight(index: number, content: string): this;
   prependRight(index: number, content: string): this;
   overwrite(start: number, end: number, content: string): this;
+  /** Like `overwrite`, but keeps what was written next to the span. */
+  update(start: number, end: number, content: string): this;
   remove(start: number, end: number): this;
   clone(): SourceEdits;
   /** The content of a span as edited so far; throws when an edit cuts through its ends. */
@@ -921,6 +923,29 @@ const appended = (
         : ',',
 });
 
+// Each item of a one-line list on a line of its own at `indent`, and its closing token on the next.
+// The line breaks replace the spaces in place, so items written next to them keep their side.
+const breakLines = (editor: SourceEditor, list: List, indent: string) => {
+  const { code, edits } = editor;
+  list.items.forEach((_, index) => {
+    const from = itemStart(editor, list, index);
+    const to = from + /^\s*/.exec(code.slice(from))![0].length;
+    if (to > from) {
+      edits.update(from, to, `\n${indent}`);
+    } else {
+      edits.appendRight(from, `\n${indent}`);
+    }
+  });
+  const outer = `\n${lineIndent(code, list.open)}`;
+  const end = list.close - /\s*$/.exec(code.slice(list.open, list.close))![0].length;
+  if (end < list.close) {
+    edits.update(end, list.close, outer);
+  } else {
+    // Without spaces before it, the closing token takes the line break, so it follows the items.
+    edits.update(list.close, list.close + 1, `${outer}${code[list.close]}`);
+  }
+};
+
 const appendFirst = (editor: SourceEditor, list: List, texts: string[]): Appended => {
   const { code, edits } = editor;
   const { items, padding } = list;
@@ -971,13 +996,24 @@ const appendFirst = (editor: SourceEditor, list: List, texts: string[]): Appende
   const comma = separatorAfter(editor, last);
   // The comma of a hole writes the hole, so it is no trailing comma to keep.
   const trailingComma = comma === undefined || isHole(last) ? '' : ',';
-  if (isMultiline(code, list)) {
-    const indent = lineIndent(code, last.start);
+  // A formatter puts the items of an object or array on lines of their own once one spans lines,
+  // but keeps a last argument that does on the line of the call: `f(a, () => {…})`.
+  const breaks =
+    (code[list.open - 1] === '{' || code[list.open - 1] === '[') &&
+    !isMultiline(code, list) &&
+    texts.some((text) => text.includes('\n'));
+  if (breaks || isMultiline(code, list)) {
+    const indent = breaks
+      ? `${lineIndent(code, list.open)}${editor.indent}`
+      : lineIndent(code, last.start);
+    if (breaks) {
+      breakLines(editor, list, indent);
+    }
     const at = itemEnd(editor, list, items.length - 1);
     if (comma === undefined) {
       edits.appendRight(last.end, ',');
     }
-    const lineBreakFollows = lineBreakAt(code, at);
+    const lineBreakFollows = breaks || lineBreakAt(code, at);
     return write(
       { at, right: true, indent, trailingComma, lineBreakFollows },
       itemLines(texts, indent, trailingComma, lineBreakFollows)

From 629316ae5a37449871387135f459a93566fc166f Mon Sep 17 00:00:00 2001
From: storybook-bot <32066757+storybook-bot@users.noreply.github.com>
Date: Tue, 20 Oct 2026 09:50:21 +0000
Subject: [PATCH 269/326] Update CHANGELOG.md for v10.6.3 [skip ci]

---
 CHANGELOG.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 158e7c1b6bff..5cd0b049b2aa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+## 10.6.3
+
+- Addon Vitest: Support Vitest 5 - [#36671](https://github.com/storybookjs/storybook/pull/36671), thanks @PaulMest!
+- Next.js: Fix app-router mock crash on Next.js 16.4 - [#36588](https://github.com/storybookjs/storybook/pull/36588), thanks @obvious-autobuild!
+- Nextjs-Vite: Provide parentRenderTree.bfcacheId in app router mock - [#36732](https://github.com/storybookjs/storybook/pull/36732), thanks @bhushan4work!
+- TypeScript: Explicitly type returntype of ArgsStore#get - [#36583](https://github.com/storybookjs/storybook/pull/36583), thanks @mrginglymus!
+
 ## 10.6.2
 
 - Angular-Vite: Require @analogjs/vite-plugin-angular 2.7.3 or later - [#36525](https://github.com/storybookjs/storybook/pull/36525), thanks @valentinpalkovic!

From 78f0c0c0e99c526d2288154be49d957681752808 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 10:30:41 +0200
Subject: [PATCH 270/326] fix(csf-tools): set an appended statement apart when
 a later commit makes it span lines

appendStatement chose the blank line before a statement from the statement
and the one before it as they were when it was appended. A story copied as
`export const Copy = {};` and then given args or a play function through the
next edits stayed glued to the story above it.

The editor now remembers what it appended without a blank line, as text
until the commit that parses it and as a statement after that. Each commit
finds those statements in the code it parses: a text by its source, a
statement by where its start lands in the edited code. When one of them, or
the statement before it, spans lines with no blank line between them, the
commit adds the blank line as a second batch of edits over the code it
parsed, pushed onto the committed edits so source maps still chain, and
parses once more. A statement a commit removes, or that no statement starts
at any more, is forgotten, which leaves the layout as it was before this
change. A transaction that rolls back restores the list too.

Deciding at commit time keeps the existing rule within one batch of edits,
so the existing editor.test.ts cases stay as they were, and costs a second
parse only in a commit that adds a blank line.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/editor.test.ts | 85 +++++++++++++++++++
 code/core/src/csf-tools/estree/editor.ts      | 80 ++++++++++++++++-
 2 files changed, 164 insertions(+), 1 deletion(-)

diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index 77b0aa1db03c..6400ef8c8973 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -957,6 +957,91 @@ describe('appendStatement', () => {
     expect(editor.toString()).toBe('const a = 1;\nf() // done;\n;(a.b).c = 1;\n');
   });
 
+  it('sets an appended statement apart once a later commit makes it span lines', () => {
+    const csf = parse('export default {};\nexport const A = {};\n');
+    appendStatement(csf._editor, 'export const B = {};');
+    csf._editor.commit();
+    const story = csf
+      .objects({ meta: false })
+      .find(({ target }) => 'exportName' in target && target.exportName === 'B')!;
+    story.set(['args', 'a'], 1);
+    expect(printCsf(csf).code).toBe(
+      'export default {};\nexport const A = {};\nexport const B = { args: { a: 1 } };\n'
+    );
+
+    story.set(['play'], parseExpression('async () => {\n  await x();\n}'));
+    expect(printCsf(csf).code).toBe(dedent`
+      export default {};
+      export const A = {};
+
+      export const B = {
+        args: { a: 1 },
+        play: async () => {
+          await x();
+        }
+      };
+
+    `);
+  });
+
+  it('sets an appended statement apart once a later commit makes the one before it span lines', () => {
+    const csf = parse('export default {};\nexport const A = {};\n');
+    appendStatement(csf._editor, 'export const B = {};');
+    csf._editor.commit();
+    const [story] = csf.objects({ meta: false });
+    story.set(['play'], parseExpression('async () => {\n  await x();\n}'));
+    expect(printCsf(csf).code).toBe(dedent`
+      export default {};
+      export const A = {
+        play: async () => {
+          await x();
+        },
+      };
+
+      export const B = {};
+
+    `);
+  });
+
+  it('sets a pending appended statement apart in the commit that makes the one before it span lines', () => {
+    const csf = parse('export default {};\nexport const A = {}; // A\n');
+    csf._appendStatement('export const B = {};');
+    const [story] = csf.objects({ meta: false });
+    story.set(['play'], parseExpression('async () => {\n  await x();\n}'));
+    expect(printCsf(csf).code).toBe(dedent`
+      export default {};
+      export const A = {
+        play: async () => {
+          await x();
+        },
+      }; // A
+
+      export const B = {};
+
+    `);
+  });
+
+  it('forgets a statement appended in a transaction that rolls back', () => {
+    const csf = parse('export default {};\nexport const A = {};\nexport const B = {};\n');
+    csf.transaction(() => {
+      csf._appendStatement('export const B = {};');
+      return false;
+    });
+    const [first, story] = csf.objects({ meta: false });
+    first.set(['args'], {});
+    story.set(['play'], parseExpression('async () => {\n  await x();\n}'));
+    expect(printCsf(csf).code).toBe(dedent`
+      export default {};
+      export const A = { args: {} };
+      export const B = {
+        play: async () => {
+          await x();
+        },
+      };
+
+    `);
+  });
+
   it('appends to the end of a file whose statements are all removed', () => {
     const editor = new SourceEditor(`const a = 1;\nconst b = 2;\n`);
     removeStatements(editor, new Set(editor.program.body));
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index cd6d6e775034..4d25c838c0ff 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -119,6 +119,11 @@ export class SourceEditor {
     }
   }
 
+  // What `appendStatement` wrote without a blank line before it: statements of this parse, and
+  // texts of pending edits. Each commit finds them in the code it parses, and sets one apart once it
+  // or the statement before it spans lines.
+  _appendedWithoutBlankLine: (Node | string)[] = [];
+
   constructor(code: string, fileName?: string, onCommit?: () => void) {
     this.fileName = fileName;
     this._onCommit = onCommit;
@@ -209,9 +214,27 @@ export class SourceEditor {
     if (!this.pending) {
       return false;
     }
-    const module = parsePrintable(this._edits.toString(), this.fileName);
+    let module = parsePrintable(this._edits.toString(), this.fileName);
     this._style ??= inferStyle(this._module);
     this._committed.push(this._edits);
+    let appended = this._appendedWithoutBlankLine
+      .map((statement) => committedStatement(this._edits, module, statement))
+      .filter((statement) => statement !== undefined);
+    // The blank lines go in as edits of their own, over the code just parsed.
+    const apart = appended.filter((statement) => setsApart(module, statement));
+    if (apart.length > 0) {
+      const spacing = new MagicString(module.code, { filename: this.fileName });
+      for (const statement of apart) {
+        spacing.appendLeft(ownLineStart(module, statement), '\n');
+      }
+      module = parsePrintable(spacing.toString(), this.fileName);
+      this._committed.push(spacing);
+      appended = appended
+        .filter((statement) => !apart.includes(statement))
+        .map((statement) => committedStatement(spacing, module, statement))
+        .filter((statement) => statement !== undefined);
+    }
+    this._appendedWithoutBlankLine = appended;
     this._module = module;
     this._scopes = undefined;
     this._parents = undefined;
@@ -230,6 +253,8 @@ export class SourceEditor {
     const { _module, _style, _transaction: outer } = this;
     const committed = this._committed.length;
     const edits = this._edits.clone();
+    lastInserted.set(edits, new Map(lastInserted.get(this._edits)));
+    const appended = [...this._appendedWithoutBlankLine];
     const transaction = { refused: false, rollbacks: onRollback ? [onRollback] : [] };
     this._transaction = transaction;
     let kept = false;
@@ -251,6 +276,7 @@ export class SourceEditor {
         this._style = _style;
         this._committed.length = committed;
         this._edits = edits;
+        this._appendedWithoutBlankLine = appended;
         this._scopes = undefined;
         this._parents = undefined;
         try {
@@ -1358,9 +1384,61 @@ export const appendStatement = (editor: SourceEditor, text: string) => {
   // The text inserted last may lead with the blank line that set it apart.
   const before = lastInserted.get(editor.edits)?.get(last)?.trim() ?? editor.source(last);
   const multiline = text.includes('\n') || before.includes('\n');
+  if (!multiline) {
+    editor._appendedWithoutBlankLine.push(text);
+  }
   insertStatementAfter(editor, last, `${multiline ? '\n' : ''}${text}`);
 };
 
+// The statement of the parse of `edits` that a statement of the code they edit became, or that a
+// text appended in them is.
+const committedStatement = (
+  edits: SourceEdits,
+  { code, program }: ParsedModule,
+  statement: Node | string
+) => {
+  if (typeof statement === 'string') {
+    return program.body.findLast((node) => sourceOf(code, node) === statement);
+  }
+  let start: number;
+  try {
+    if (edits.slice(statement.start, statement.end) === '') {
+      return undefined;
+    }
+    start = normalizeLineEndings(edits.slice(0, statement.start)).length;
+  } catch {
+    // An edit cut through the statement.
+    return undefined;
+  }
+  return program.body.find((node) => node.start === start);
+};
+
+const statementBefore = (program: E.Program, statement: Node): Node | undefined =>
+  (program.body as readonly Node[])[program.body.indexOf(statement as E.Statement) - 1];
+
+// Whether a statement, or the statement before it, spans lines with no blank line between them.
+const setsApart = ({ code, program }: ParsedModule, statement: Node) => {
+  const before = statementBefore(program, statement);
+  return (
+    !!before &&
+    [before, statement].some((node) => sourceOf(code, node).includes('\n')) &&
+    !/\n[^\S\n]*\n/.test(code.slice(before.end, statement.start))
+  );
+};
+
+// The start of the first line of a statement with the comments above it, below the statement
+// before it and the comments that share that statement's line.
+const ownLineStart = ({ code, program, comments }: ParsedModule, statement: Node) => {
+  const before = statementBefore(program, statement)!;
+  const above = comments.find(
+    (comment) =>
+      comment.start >= before.end &&
+      comment.end <= statement.start &&
+      code.slice(before.end, comment.start).includes('\n')
+  );
+  return lineStart(code, (above ?? statement).start);
+};
+
 /** The span of a statement with the comments it owns. */
 export const statementSpan = (editor: SourceEditor, statement: Span): Span => ({
   start: (leadingComments(editor, statement)[0] ?? statement).start,

From 93fc3eee5c5b2ad6db172e3efd912b0e73a71dd2 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 10:44:09 +0200
Subject: [PATCH 271/326] feat(csf-tools): edit a CSF2 story's annotation
 assignments as fields of the story
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

objects() found `Story.parameters = {…}` and `Story.argTypes = {…}` as
separate editors that each refused every path outside their own
annotation. A codemod porting `parameters.msw` to `beforeEach` could remove
the msw handlers but not add `beforeEach`, and `args`, `play`, `tags` and
the other annotations had no editor at all.

A story is now one editor whose fields are the members of its object
literal, if it has one, followed by its top-level `Story.name = value`
assignments, which run after it. Every CSF annotation written that way is a
field, read and written with the same paths as an inline one. A story
without an object literal (a function or a bound template) adds a missing
field as `Story.name = value;` after its last assignment, or after its
declaration when it has none; removing a field, or emptying it through
cleanup, removes its statement. A field written inline and assigned is a
duplicate field, and fields from both places cannot be grouped together.
The assignments become members of an in-memory root, as named config
exports already are (both now build them with `detachedMember`), so the
mutation code has no second path and the annotation prefix and its path
rewriting are gone. `node` is the story's object literal, or `undefined`
for a story without one.

The conservative rules stay and are now checked through the references to
the story's binding. A reassigned binding, or any write other than a
top-level `Story.name = value` (a nested write such as `Story.args.x = 1`,
a compound or computed assignment), leaves the story uneditable with a
diagnostic; that now includes story objects with a nested write, which
were editable before although their fields did not show it. For a story
whose assignments are edited, an alias, a spread, or a call or array that
receives the story does the same; calling or rendering it does not. A story
holding another value than an object, a function or a bound template cannot
be annotated, since that could change other stories.

The `story-annotation` target is gone; these editors are `story` targets.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 code/core/src/csf-tools/ConfigFile.ts         |   2 +-
 code/core/src/csf-tools/ConfigObject.ts       |  15 +-
 code/core/src/csf-tools/CsfFile.ts            |   4 +-
 code/core/src/csf-tools/CsfObject.test.ts     |  53 ++-
 code/core/src/csf-tools/CsfObject.ts          | 183 ++++----
 .../src/csf-tools/CsfObjectDiscovery.test.ts  | 249 ++++++++++-
 code/core/src/csf-tools/CsfObjectDiscovery.ts | 393 ++++++++++++------
 code/core/src/csf-tools/README.md             |  11 +-
 8 files changed, 617 insertions(+), 293 deletions(-)

diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index 8bc33eabae61..db752903040c 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -935,7 +935,7 @@ export class ConfigFile implements CsfObject {
           return node && literalRoot(this._editor, node);
         },
       };
-      return createCsfObject(target, host, [], report, () => {
+      return createCsfObject(target, host, report, () => {
         this._changed = true;
       });
     });
diff --git a/code/core/src/csf-tools/ConfigObject.ts b/code/core/src/csf-tools/ConfigObject.ts
index fc067f070f9f..10bde64dce25 100644
--- a/code/core/src/csf-tools/ConfigObject.ts
+++ b/code/core/src/csf-tools/ConfigObject.ts
@@ -6,6 +6,7 @@ import {
   type MemberInsert,
   type ObjectRoot,
   createCsfObject,
+  detachedMember,
   literalRoot,
 } from './CsfObject.ts';
 import {
@@ -337,17 +338,7 @@ const namedExportsRoot = (editor: SourceEditor, entries: NamedEntry[]): ObjectRo
       entry.declaration.type === 'VariableDeclarator' ? entry.declaration.init : entry.declaration
     ) as E.Expression;
     const key = entry.specifier ? entry.specifier.specifier.exported : entry.declaration.id!;
-    const property = {
-      type: 'Property',
-      kind: 'init',
-      method: false,
-      shorthand: false,
-      computed: false,
-      key,
-      value,
-      start: entry.declaration.start,
-      end: entry.declaration.end,
-    } as unknown as Property;
+    const property = detachedMember(key, value, false, entry.declaration);
     byProperty.set(property, entry);
     return property;
   });
@@ -496,5 +487,5 @@ export function createConfigObject(
       return current.ok ? current.root : undefined;
     },
   };
-  return { ok: true, object: createCsfObject({ kind: 'config' }, host, [], report, markChanged) };
+  return { ok: true, object: createCsfObject({ kind: 'config' }, host, report, markChanged) };
 }
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index 198323fecd62..83bc9b49c598 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -421,8 +421,8 @@ export class CsfFile {
   }
 
   /**
-   * Discover editors for the meta and stories, including CSF2 parameter and argTypes assignments. Unsupported
-   * targets are skipped and reported in `mutationDiagnostics`.
+   * Discover editors for the meta and stories; a story's CSF2 annotation assignments are its fields.
+   * Unsupported targets are skipped and reported in `mutationDiagnostics`.
    *
    * @example
    * ```ts
diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index bbcf40400c38..91cbbae3999b 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -80,21 +80,22 @@ describe('CsfObject', () => {
     expect(csf.mutationDiagnostics).toMatchObject([{ code: 'spread-field' }]);
   });
 
-  it('inspects a path a CSF2 annotation editor does not hold, and the object itself, as unreadable', () => {
+  it('inspects every annotation of a CSF2 story, and the object itself as unreadable', () => {
     const csf = parse(
       'export default {};\nexport const A = Template.bind({});\nA.args = { size: "l" };\nA.parameters = { a: 1 };'
     );
-    const [parameters] = csf.objects({ meta: false });
+    const [story] = csf.objects({ meta: false });
     const [meta] = csf.objects({ stories: false });
 
-    expect(parameters.target).toMatchObject({ kind: 'story-annotation', annotation: 'parameters' });
-    expect(parameters.inspect(['parameters']).kind).toBe('value');
-    expect(parameters.inspect(['args', 'size'])).toMatchObject({
+    expect(story.target).toEqual({ kind: 'story', exportName: 'A', localName: 'A' });
+    expect(story.inspect(['parameters']).kind).toBe('value');
+    expect(story.inspect(['args', 'size']).kind).toBe('value');
+    expect(story.inspect([])).toMatchObject({
       kind: 'unreadable',
-      diagnostic: { code: 'unsupported-member', path: ['args', 'size'] },
+      diagnostic: { code: 'unsupported-member', path: [] },
     });
     expect(meta.inspect([])).toMatchObject({ kind: 'unreadable' });
-    expect(parameters.get(['args', 'size'])).toBeUndefined();
+    expect(story.get([])).toBeUndefined();
     expect(csf.mutationDiagnostics).toEqual([]);
   });
 
@@ -427,19 +428,24 @@ describe('CsfObject', () => {
     expect(csf.changed).toBe(false);
   });
 
-  it('stops cleanup at a CSF2 annotation root', () => {
+  it('removes a CSF2 annotation that cleanup empties', () => {
     const csf = parse(`
       export default { title: 'Example' };
       export const Basic = () => null;
       Basic.parameters = { viewport: { disable: true } };
+      Basic.args = {};
     `);
-    const [parameters] = csf.objects({ meta: false });
+    const [story] = csf.objects({ meta: false });
 
-    expect(parameters.remove(['parameters', 'viewport', 'disable'])).toEqual({
+    expect(story.remove(['parameters', 'viewport', 'disable'])).toEqual({
       ok: true,
       changed: true,
     });
-    expect(printCsf(csf).code).toContain('Basic.parameters = {};');
+    expect(story.remove(['args'])).toEqual({ ok: true, changed: true });
+    expect(printCsf(csf).code).toBe(`
+      export default { title: 'Example' };
+      export const Basic = () => null;
+    `);
     expect(csf.mutationDiagnostics).toEqual([]);
   });
 
@@ -595,15 +601,17 @@ describe('CsfObject', () => {
       export const Basic = () => null;
       Basic.parameters = { first: true };
       Basic.parameters = { second: true };
+      Basic.args = {};
     `);
+    const [story] = csf.objects({ meta: false });
 
-    expect(csf.objects({ meta: false })).toEqual([]);
-    expect(csf.mutationDiagnostics).toContainEqual(
-      expect.objectContaining({
-        code: 'ambiguous-binding',
-        target: expect.objectContaining({ kind: 'story-annotation', exportName: 'Basic' }),
-      })
-    );
+    expect(story.get(['parameters'])).toBeUndefined();
+    expect(story.remove(['parameters', 'first']).ok).toBe(false);
+    expect(story.set(['args', 'label'], 'Label').ok).toBe(true);
+    expect(csf.mutationDiagnostics).toEqual([
+      expect.objectContaining({ code: 'duplicate-field', path: ['parameters'] }),
+      expect.objectContaining({ code: 'duplicate-field', path: ['parameters', 'first'] }),
+    ]);
   });
 
   it.each([
@@ -1380,13 +1388,14 @@ describe('CsfObject.node', () => {
     expect(textOf(story.node!)).toBe('{ args: { disabled: true } }');
   });
 
-  it('returns the assigned object of a CSF2 annotation and the argument of a factory', () => {
+  it('returns the object of a story with assignments, nothing without one, and the argument of a factory', () => {
     const csf = parse(
-      `export default {};\nexport const Primary = () => null;\nPrimary.parameters = { a: 1 };`
+      `export default {};\nexport const Primary = () => null;\nPrimary.parameters = { a: 1 };\nexport const Secondary = { args: {} };\nSecondary.parameters = { a: 1 };`
     );
-    const [annotation] = csf.objects({ meta: false });
+    const [primary, secondary] = csf.objects({ meta: false });
 
-    expect(textOf(annotation.node!)).toBe('{ a: 1 }');
+    expect(primary.node).toBeUndefined();
+    expect(textOf(secondary.node!)).toBe('{ args: {} }');
 
     const config = loadConfig(`export default definePreview({ tags: [] });`).parse();
     expect(textOf(config.node!)).toBe('{ tags: [] }');
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index 7dcb7d3625be..f906e87bc806 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -3,6 +3,7 @@ import {
   type Node,
   type Property,
   type SourceLocation,
+  type Span,
   locationOf,
   parseExpression,
   staticKey,
@@ -11,7 +12,6 @@ import {
 import {
   type SourceEditor,
   appendMembers,
-  detachedText,
   detachedTextOf,
   groupMembers,
   keySource,
@@ -41,13 +41,7 @@ export type CsfObjectTarget =
   | { kind: 'config' }
   | { kind: 'call-argument'; importedName: string; methodName: string }
   | { kind: 'meta' }
-  | { kind: 'story'; exportName: string; localName: string }
-  | {
-      kind: 'story-annotation';
-      exportName: string;
-      localName: string;
-      annotation: 'parameters' | 'argTypes';
-    };
+  | { kind: 'story'; exportName: string; localName: string };
 
 export type CsfMutationDiagnosticCode =
   | 'unsupported-initializer'
@@ -71,8 +65,8 @@ export interface CsfMutationDiagnostic {
 }
 
 /**
- * What `inspect` found at a path. A path that is not a field of the object, such as one outside a
- * CSF2 annotation editor's annotation, is unreadable.
+ * What `inspect` found at a path. A path that is not a field of the object, the empty path, is
+ * unreadable.
  */
 export type CsfInspection =
   | { kind: 'value'; node: CsfExpression }
@@ -96,7 +90,7 @@ export type CsfExpression = E.Expression;
 
 export interface CsfObject {
   /**
-   * Identify the config, meta, story, annotation, or call argument this editor represents.
+   * Identify the config, meta, story, or call argument this editor represents.
    *
    * @example
    * ```ts
@@ -118,9 +112,9 @@ export interface CsfObject {
    */
   readonly changed: boolean;
   /**
-   * Find the object literal this editor edits in the current parse; for a CSF2 annotation editor,
-   * the object its annotation path names. It is `undefined` for a config made of named exports and
-   * once the object is gone. It is the file's own node, not a copy: do not change it, and read it
+   * Find the object literal this editor edits in the current parse. It is `undefined` for a config
+   * made of named exports, for a story without an object literal, whose fields are all
+   * `Story.name = value` assignments, and once the object is gone. It is the file's own node, not a copy: do not change it, and read it
    * again after a mutation, which parses the file again.
    *
    * @example
@@ -134,8 +128,7 @@ export interface CsfObject {
    */
   readonly node: E.ObjectExpression | undefined;
   /**
-   * Read a detached copy of the expression at a property path. For a CSF2 annotation, its
-   * annotation path returns the whole object. Missing fields return `undefined`; so does a path
+   * Read a detached copy of the expression at a property path. Missing fields return `undefined`; so does a path
    * through a value that is not an object literal, or one a spread, computed key, or duplicate field
    * leaves unproven, which also adds a mutation diagnostic.
    *
@@ -288,6 +281,24 @@ export interface ObjectRoot {
   take(member: Property, key: string): MemberInsert;
 }
 
+/**
+ * A member of an `ObjectRoot` that is not written as one, such as a named export or a
+ * `Story.name = value` assignment. Its key and value are real nodes, so every span a shared helper
+ * reads is a real one; the member itself only exists in memory, spanning `statement`.
+ */
+export const detachedMember = (key: Node, value: Node, computed: boolean, statement: Span) =>
+  ({
+    type: 'Property',
+    kind: 'init',
+    method: false,
+    shorthand: false,
+    computed,
+    key,
+    value,
+    start: statement.start,
+    end: statement.end,
+  }) as unknown as Property;
+
 export interface CsfObjectHost {
   readonly editor: SourceEditor;
   // Located again after every commit.
@@ -388,8 +399,6 @@ class CsfObjectEditor implements CsfObject {
 
   private readonly host: CsfObjectHost;
 
-  private readonly prefix: readonly string[];
-
   private readonly reportDiagnostic: ReportDiagnostic;
 
   private readonly markChanged: MarkChanged;
@@ -397,13 +406,11 @@ class CsfObjectEditor implements CsfObject {
   constructor(
     target: CsfObjectTarget,
     host: CsfObjectHost,
-    prefix: readonly string[],
     reportDiagnostic: ReportDiagnostic,
     markChanged: MarkChanged
   ) {
     this.target = target;
     this.host = host;
-    this.prefix = prefix;
     this.reportDiagnostic = reportDiagnostic;
     this.markChanged = markChanged;
   }
@@ -451,11 +458,6 @@ class CsfObjectEditor implements CsfObject {
 
   // `get` reads a path outside the object as missing, without a diagnostic.
   private read(path: readonly string[]): CsfInspection | { kind: 'outside' } {
-    const root = this.rootNodeFor(path);
-    if (root) {
-      const source = detachedText(this.editor.code, root.start, this.editor.source(root));
-      return { kind: 'value', node: parseExpression(source) };
-    }
     const found = this.find(path);
     return found.kind === 'property'
       ? { kind: 'value', node: parseExpression(valueSource(this.editor, found.property)) }
@@ -463,15 +465,6 @@ class CsfObjectEditor implements CsfObject {
   }
 
   getValue(path: readonly string[]): CsfValue {
-    const root = this.rootNodeFor(path);
-    if (root) {
-      const value = readValue(this.editor.scopes, root);
-      if (value === UNRESOLVED) {
-        this.reportDiagnostic(this.diagnostic('unsupported-value', path, root));
-        return undefined;
-      }
-      return value;
-    }
     const property = this.getProperty(path);
     if (!property) {
       return undefined;
@@ -488,13 +481,6 @@ class CsfObjectEditor implements CsfObject {
     return value;
   }
 
-  // A CSF2 annotation editor answers its own annotation path with the whole assigned object.
-  private rootNodeFor(path: readonly string[]): E.ObjectExpression | undefined {
-    return this.prefix.length > 0 && this.normalizePath(path)?.length === 0
-      ? this.root().node
-      : undefined;
-  }
-
   private find(
     path: readonly string[]
   ):
@@ -502,11 +488,10 @@ class CsfObjectEditor implements CsfObject {
     | { kind: 'missing' }
     | { kind: 'outside' }
     | { kind: 'unreadable'; diagnostic: CsfMutationDiagnostic } {
-    const logicalPath = this.normalizePath(path);
-    if (!logicalPath || logicalPath.length === 0) {
+    if (path.length === 0) {
       return { kind: 'outside' };
     }
-    const found = this.locate(logicalPath);
+    const found = this.locate(path);
     if (found.ok === false) {
       return { kind: 'unreadable', diagnostic: this.diagnostic(found.code, path, found.node) };
     }
@@ -522,8 +507,7 @@ class CsfObjectEditor implements CsfObject {
   }
 
   set(path: readonly string[], value: CsfValue<CsfExpression>): CsfMutationResult {
-    const logicalPath = this.normalizePath(path);
-    if (!logicalPath || logicalPath.length === 0 || unsafePath(logicalPath)) {
+    if (path.length === 0 || unsafePath(path)) {
       return this.failure('unsupported-member', path, this.anchor());
     }
     const unprintable = nodeWithoutParse(value);
@@ -535,7 +519,7 @@ class CsfObjectEditor implements CsfObject {
         `Cannot set ${path.join('.')} to a ${unprintable.type} node that did not come from \`get\`, \`transform\` or \`parseExpression\``
       );
     }
-    const inspected = this.locate(logicalPath, 'set');
+    const inspected = this.locate(path, 'set');
     if (inspected.ok === false) {
       return this.failure(inspected.code, path, inspected.node);
     }
@@ -544,11 +528,11 @@ class CsfObjectEditor implements CsfObject {
     if (inspected.property && inspected.parent) {
       inspected.parent.root.replaceValue(inspected.property, text);
     } else {
-      this.insert(logicalPath, [
+      this.insert(path, [
         {
-          key: logicalPath.at(-1)!,
+          key: path.at(-1)!,
           value: text,
-          text: `${printKey(logicalPath.at(-1)!, this.editor.quote)}: ${text}`,
+          text: `${printKey(path.at(-1)!, this.editor.quote)}: ${text}`,
         },
       ]);
     }
@@ -559,11 +543,10 @@ class CsfObjectEditor implements CsfObject {
     path: readonly string[],
     derive: (value: CsfExpression) => CsfExpression | undefined
   ): CsfMutationResult {
-    const logicalPath = this.normalizePath(path);
-    if (!logicalPath || logicalPath.length === 0 || unsafePath(logicalPath)) {
+    if (path.length === 0 || unsafePath(path)) {
       return this.failure('unsupported-member', path, this.anchor());
     }
-    const inspected = this.locate(logicalPath);
+    const inspected = this.locate(path);
     if (inspected.ok === false) {
       return this.failure(inspected.code, path, inspected.node);
     }
@@ -581,18 +564,17 @@ class CsfObjectEditor implements CsfObject {
   }
 
   remove(path: readonly string[]): CsfMutationResult {
-    const logicalPath = this.normalizePath(path);
-    if (!logicalPath || logicalPath.length === 0 || unsafePath(logicalPath)) {
+    if (path.length === 0 || unsafePath(path)) {
       return this.failure('unsupported-member', path, this.anchor());
     }
-    const inspected = this.locate(logicalPath);
+    const inspected = this.locate(path);
     if (inspected.ok === false) {
       return this.failure(inspected.code, path, inspected.node);
     }
     if (!inspected.property || !inspected.parent) {
       return { ok: true, changed: false };
     }
-    const removal = lookupProperty(inspected.parent.root.properties, logicalPath.at(-1)!, 'remove');
+    const removal = lookupProperty(inspected.parent.root.properties, path.at(-1)!, 'remove');
     if (!removal.ok) {
       return this.failure(removal.code, path, removal.node);
     }
@@ -601,7 +583,7 @@ class CsfObjectEditor implements CsfObject {
     if (!removed.ok) {
       return removed;
     }
-    return this.removeEmptyParents(logicalPath, path) ?? removed;
+    return this.removeEmptyParents(path) ?? removed;
   }
 
   rename(path: readonly string[], name: string): CsfMutationResult {
@@ -610,43 +592,28 @@ class CsfObjectEditor implements CsfObject {
   }
 
   move(from: readonly string[], to: readonly string[]): CsfMutationResult {
-    const sourcePath = this.normalizePath(from);
-    const destinationPath = this.normalizePath(to);
-    if (
-      !sourcePath ||
-      !destinationPath ||
-      sourcePath.length === 0 ||
-      destinationPath.length === 0 ||
-      unsafePath(sourcePath) ||
-      unsafePath(destinationPath)
-    ) {
-      return this.failure('unsupported-member', !sourcePath ? from : to, this.anchor());
+    if (from.length === 0 || to.length === 0 || unsafePath(from) || unsafePath(to)) {
+      return this.failure('unsupported-member', from.length === 0 ? from : to, this.anchor());
     }
-    if (
-      sourcePath.length === destinationPath.length &&
-      sourcePath.every((part, index) => destinationPath[index] === part)
-    ) {
+    if (from.length === to.length && from.every((part, index) => to[index] === part)) {
       return { ok: true, changed: false };
     }
-    if (
-      destinationPath.length > sourcePath.length &&
-      sourcePath.every((part, index) => destinationPath[index] === part)
-    ) {
+    if (to.length > from.length && from.every((part, index) => to[index] === part)) {
       return this.failure('cyclic-move', to, this.anchor());
     }
 
-    const source = this.locate(sourcePath);
+    const source = this.locate(from);
     if (source.ok === false) {
       return this.failure(source.code, from, source.node);
     }
     if (!source.property || !source.parent) {
       return { ok: true, changed: false };
     }
-    const removal = lookupProperty(source.parent.root.properties, sourcePath.at(-1)!, 'remove');
+    const removal = lookupProperty(source.parent.root.properties, from.at(-1)!, 'remove');
     if (!removal.ok) {
       return this.failure(removal.code, from, removal.node);
     }
-    const destination = this.locate(destinationPath);
+    const destination = this.locate(to);
     if (destination.ok === false) {
       return this.failure(destination.code, to, destination.node);
     }
@@ -654,9 +621,9 @@ class CsfObjectEditor implements CsfObject {
       return this.failure('occupied-destination', to, destination.property);
     }
 
-    const key = destinationPath.at(-1)!;
-    const sourceParent = sourcePath.slice(0, -1);
-    const destinationParent = destinationPath.slice(0, -1);
+    const key = to.at(-1)!;
+    const sourceParent = from.slice(0, -1);
+    const destinationParent = to.slice(0, -1);
     if (
       sourceParent.length === destinationParent.length &&
       sourceParent.every((part, index) => destinationParent[index] === part)
@@ -668,35 +635,34 @@ class CsfObjectEditor implements CsfObject {
     const moved = source.parent.root.take(source.property, key);
     // Insert first: if that throws, nothing has been committed. The source is removed afterwards,
     // looked up again since the insertion moved its spans.
-    this.insert(destinationPath, [{ ...moved, key }]);
+    this.insert(to, [{ ...moved, key }]);
     const inserted = this.commit(from);
     if (!inserted.ok) {
       return inserted;
     }
-    const remaining = this.locate(sourcePath);
+    const remaining = this.locate(from);
     if (remaining.ok === false || !remaining.property || !remaining.parent) {
-      throw new Error(`CsfObject: ${sourcePath.join('.')} was not found again after moving it`);
+      throw new Error(`CsfObject: ${from.join('.')} was not found again after moving it`);
     }
     remaining.parent.root.remove([remaining.property]);
     const removed = this.commit(from);
     if (!removed.ok) {
       return removed;
     }
-    return this.removeEmptyParents(sourcePath, from) ?? removed;
+    return this.removeEmptyParents(from) ?? removed;
   }
 
   group(path: readonly string[], names: readonly string[]): CsfMutationResult {
-    const logicalPath = this.normalizePath(path);
-    if (!logicalPath || logicalPath.length === 0 || unsafePath(logicalPath) || unsafePath(names)) {
+    if (path.length === 0 || unsafePath(path) || unsafePath(names)) {
       return this.failure('unsupported-member', path, this.anchor());
     }
-    const group = logicalPath.at(-1)!;
+    const group = path.at(-1)!;
     if (names.includes(group)) {
       return this.failure('cyclic-move', path, this.anchor());
     }
     let parent: ObjectRoot = this.root();
-    if (logicalPath.length > 1) {
-      const inspected = this.locate(logicalPath.slice(0, -1));
+    if (path.length > 1) {
+      const inspected = this.locate(path.slice(0, -1));
       if (inspected.ok === false) {
         return this.failure(inspected.code, path, inspected.node);
       }
@@ -830,6 +796,16 @@ class CsfObjectEditor implements CsfObject {
           );
         }
       }
+      // The members a root adds after its object literal, like a story's assignments, run later.
+      const inLiteral = (property: Property) => parent.node?.properties.includes(property);
+      if (moved.some(inLiteral) && !moved.every(inLiteral)) {
+        return this.failure(
+          'evaluation-order',
+          path,
+          moved.find((property) => !inLiteral(property))!,
+          `the ${group} options are written both in the object and after it, so grouping them could change expression evaluation order`
+        );
+      }
       const first = parent.properties.indexOf(moved[0]);
       const last = parent.properties.indexOf(moved.at(-1)!);
       if (last - first + 1 !== moved.length) {
@@ -846,10 +822,7 @@ class CsfObjectEditor implements CsfObject {
   }
 
   // Returns the result of a rejected commit, which ends the clean-up.
-  private removeEmptyParents(
-    path: readonly string[],
-    reported: readonly string[]
-  ): CsfMutationResult | undefined {
+  private removeEmptyParents(path: readonly string[]): CsfMutationResult | undefined {
     for (let depth = path.length - 1; depth > 0; depth--) {
       const ancestor = this.locate(path.slice(0, depth));
       if (
@@ -868,7 +841,7 @@ class CsfObjectEditor implements CsfObject {
         return;
       }
       ancestor.parent.root.remove([ancestor.property]);
-      const committed = this.commit(reported);
+      const committed = this.commit(path);
       if (!committed.ok) {
         return committed;
       }
@@ -876,19 +849,6 @@ class CsfObjectEditor implements CsfObject {
     return undefined;
   }
 
-  private normalizePath(path: readonly string[]) {
-    if (this.prefix.length === 0) {
-      return [...path];
-    }
-    if (
-      path.length < this.prefix.length ||
-      this.prefix.some((part, index) => path[index] !== part)
-    ) {
-      return undefined;
-    }
-    return path.slice(this.prefix.length);
-  }
-
   // `access` applies to the last field of the path; its parents are read.
   private locate(
     path: readonly string[],
@@ -1028,9 +988,8 @@ class CsfObjectEditor implements CsfObject {
 export const createCsfObject = (
   target: CsfObjectTarget,
   host: CsfObjectHost,
-  prefix: readonly string[],
   report: ReportDiagnostic,
   markChanged: MarkChanged
-): CsfObject => new CsfObjectEditor(target, host, prefix, report, markChanged);
+): CsfObject => new CsfObjectEditor(target, host, report, markChanged);
 
 export { keySource };
diff --git a/code/core/src/csf-tools/CsfObjectDiscovery.test.ts b/code/core/src/csf-tools/CsfObjectDiscovery.test.ts
index e24a723c8f68..b28641bd7e8f 100644
--- a/code/core/src/csf-tools/CsfObjectDiscovery.test.ts
+++ b/code/core/src/csf-tools/CsfObjectDiscovery.test.ts
@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest';
 
 import { loadCsf, printCsf } from './CsfFile.ts';
+import { parseExpression } from './estree/ast.ts';
 
 const parse = (source: string) =>
   loadCsf(source, { makeTitle: (title) => title ?? 'title' }).parse();
@@ -29,13 +30,8 @@ describe('CsfObject discovery', () => {
     expect(csf.objects({ meta: false })).toEqual([]);
     expect(csf.mutationDiagnostics).toContainEqual(
       expect.objectContaining({
-        code: 'unsupported-initializer',
-        target: {
-          kind: 'story-annotation',
-          exportName: 'Basic',
-          localName: 'Basic',
-          annotation: 'parameters',
-        },
+        code: 'dynamic-key',
+        target: { kind: 'story', exportName: 'Basic', localName: 'Basic' },
       })
     );
   });
@@ -50,14 +46,12 @@ describe('CsfObject discovery', () => {
     `);
 
     expect(csf.objects({ meta: false })).toEqual([]);
-    expect(csf.mutationDiagnostics).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          code: 'ambiguous-binding',
-          target: expect.objectContaining({ annotation: 'parameters' }),
-        }),
-      ])
-    );
+    expect(csf.mutationDiagnostics).toEqual([
+      expect.objectContaining({
+        code: 'dynamic-key',
+        target: { kind: 'story', exportName: 'Basic', localName: 'Basic' },
+      }),
+    ]);
   });
 
   it('does not discover excluded CSF4 factory exports', () => {
@@ -222,4 +216,229 @@ describe('CsfObject discovery', () => {
       })
     );
   });
+
+  describe('CSF2 annotation assignments', () => {
+    const legacy = `export default { title: 'Example' };
+const Template = (args) => args;
+export const Primary = Template.bind({});
+Primary.args = { label: 'Primary' };
+Primary.argTypes = { label: { control: 'text' } };
+Primary.parameters = { msw: { handlers: [] } };
+Primary.decorators = [withTheme];
+Primary.loaders = [async () => ({})];
+Primary.beforeEach = setup;
+Primary.play = async () => {};
+Primary.render = (args) => args;
+Primary.tags = ['autodocs'];
+`;
+
+    it('edits every annotation of a story through one editor with the paths of a story object', () => {
+      const csf = parse(legacy);
+      const objects = csf.objects({ meta: false });
+
+      expect(objects.map(({ target }) => target)).toEqual([
+        { kind: 'story', exportName: 'Primary', localName: 'Primary' },
+      ]);
+      const [story] = objects;
+      expect(story.getValue(['args'])).toEqual({ label: 'Primary' });
+      expect(story.getValue(['argTypes', 'label', 'control'])).toBe('text');
+      expect(story.getValue(['tags'])).toEqual(['autodocs']);
+      for (const annotation of ['decorators', 'loaders', 'beforeEach', 'play', 'render']) {
+        expect(story.get([annotation])).toBeDefined();
+      }
+
+      expect(story.set(['args', 'label'], 'Changed').ok).toBe(true);
+      expect(story.set(['play'], parseExpression('async () => run()')).ok).toBe(true);
+      expect(story.remove(['tags']).ok).toBe(true);
+      expect(printCsf(csf).code).toContain("Primary.args = { label: 'Changed' };");
+      expect(printCsf(csf).code).toContain('Primary.play = async () => run();');
+      expect(printCsf(csf).code).not.toContain('Primary.tags');
+      expect(csf.mutationDiagnostics).toEqual([]);
+    });
+
+    it('adds a missing annotation after the last one and removes an annotation that is emptied', () => {
+      const csf = parse(
+        legacy.replace(/^Primary\.(decorators|loaders|beforeEach|play|render|tags) = .*\n/gm, '')
+      );
+      const [story] = csf.objects({ meta: false });
+
+      const kept = csf.transaction(() => {
+        story.remove(['parameters', 'msw']);
+        story.set(['beforeEach'], parseExpression('mockHandlers'));
+      });
+
+      expect(kept).toBe(true);
+      expect(printCsf(csf).code).toBe(`export default { title: 'Example' };
+const Template = (args) => args;
+export const Primary = Template.bind({});
+Primary.args = { label: 'Primary' };
+Primary.argTypes = { label: { control: 'text' } };
+Primary.beforeEach = mockHandlers;
+`);
+    });
+
+    it('adds the first annotation of a story after its declaration', () => {
+      const csf = parse(`export default { title: 'Example' };
+const Local = () => null;
+export { Local as Primary };
+const after = 1;
+`);
+      const [story] = csf.objects({ meta: false });
+
+      expect(story.set(['parameters', 'layout'], 'centered')).toEqual({ ok: true, changed: true });
+      expect(printCsf(csf).code).toBe(`export default { title: 'Example' };
+const Local = () => null;
+Local.parameters = { layout: 'centered' };
+export { Local as Primary };
+const after = 1;
+`);
+    });
+
+    it('adds an annotation to a story declared as a function', () => {
+      const csf = parse(`export default { title: 'Example' };
+export function Primary() {}
+`);
+      const [story] = csf.objects({ meta: false });
+
+      expect(story.set(['args'], { label: 'Primary' })).toEqual({ ok: true, changed: true });
+      expect(printCsf(csf).code).toBe(`export default { title: 'Example' };
+export function Primary() {}
+Primary.args = { label: 'Primary' };
+`);
+    });
+
+    it('edits the object of a story and its assignments as one object', () => {
+      const csf = parse(`export default { title: 'Example' };
+export const Primary = { args: { label: 'Primary' } };
+Primary.parameters = { layout: 'centered' };
+`);
+      const objects = csf.objects({ meta: false });
+      expect(objects).toHaveLength(1);
+      const [story] = objects;
+
+      expect(story.set(['tags'], ['autodocs']).ok).toBe(true);
+      expect(story.remove(['parameters', 'layout']).ok).toBe(true);
+      expect(printCsf(csf).code).toBe(`export default { title: 'Example' };
+export const Primary = { args: { label: 'Primary' }, tags: ['autodocs'] };
+`);
+    });
+
+    it('rejects an annotation written both in the story object and as an assignment', () => {
+      const csf = parse(`export default { title: 'Example' };
+export const Primary = { args: { label: 'Primary' } };
+Primary.args = { label: 'Assigned' };
+`);
+      const [story] = csf.objects({ meta: false });
+
+      expect(story.set(['args', 'label'], 'Changed').ok).toBe(false);
+      expect(story.getValue(['args'])).toBeUndefined();
+      expect(csf.mutationDiagnostics.map(({ code }) => code)).toEqual([
+        'duplicate-field',
+        'duplicate-field',
+      ]);
+    });
+
+    it.each([
+      ['an alias', 'export const Secondary = Primary;\nSecondary.args = {};'],
+      ['a nested write', "Primary.args.label = 'Changed';"],
+      ['an Object.assign call', 'Object.assign(Primary, { args: {} });'],
+    ])('rejects a story whose binding has %s', (_kind, code) => {
+      const csf = parse(`export default { title: 'Example' };
+export const Primary = () => null;
+Primary.args = { label: 'Primary' };
+${code}
+`);
+
+      expect(
+        csf
+          .objects({ meta: false })
+          .filter(({ target }) => 'exportName' in target && target.exportName === 'Primary')
+      ).toEqual([]);
+      expect(csf.mutationDiagnostics).toContainEqual(
+        expect.objectContaining({
+          code: 'ambiguous-binding',
+          target: { kind: 'story', exportName: 'Primary', localName: 'Primary' },
+        })
+      );
+    });
+
+    it('groups assignments into a new assignment and refuses to group them with object fields', () => {
+      const csf = parse(`export default { title: 'Example' };
+export const Primary = () => null;
+Primary.width = 1;
+Primary.height = 2;
+export const Mixed = { width: 1 };
+Mixed.height = 2;
+`);
+      const [primary, mixed] = csf.objects({ meta: false });
+
+      expect(primary.group(['size'], ['width', 'height'])).toEqual({ ok: true, changed: true });
+      expect(mixed.group(['size'], ['width', 'height'])).toMatchObject({
+        ok: false,
+        diagnostic: { code: 'evaluation-order' },
+      });
+      expect(printCsf(csf).code).toBe(`export default { title: 'Example' };
+export const Primary = () => null;
+Primary.size = { width: 1, height: 2 };
+export const Mixed = { width: 1 };
+Mixed.height = 2;
+`);
+    });
+
+    it('edits a story that another story calls', () => {
+      const csf = parse(`export default { title: 'Example' };
+export const Primary = (args) => null;
+export const Secondary = (args) => Primary(args);
+`);
+
+      expect(csf.objects({ meta: false })).toHaveLength(2);
+      expect(csf.mutationDiagnostics).toEqual([]);
+    });
+
+    it.each([
+      ['a story without annotations in an array', 'export const all = [Primary];'],
+      ['a spread of the story', 'export const Copy = { ...Primary };'],
+    ])('rejects %s, which could see the annotations it adds', (_kind, code) => {
+      const csf = parse(`export default { title: 'Example' };
+export const Primary = Template.bind({});
+${code}
+`);
+
+      expect(
+        csf
+          .objects({ meta: false })
+          .filter(({ target }) => 'exportName' in target && target.exportName === 'Primary')
+      ).toEqual([]);
+      expect(csf.mutationDiagnostics).toContainEqual(
+        expect.objectContaining({
+          code: 'ambiguous-binding',
+          target: { kind: 'story', exportName: 'Primary', localName: 'Primary' },
+        })
+      );
+    });
+
+    it('rejects a story object with a nested write, which its fields would not show', () => {
+      const csf = parse(`export default { title: 'Example' };
+export const Primary = { args: { label: 'Primary' } };
+Primary.args.label = 'Changed';
+`);
+
+      expect(csf.objects({ meta: false })).toEqual([]);
+      expect(csf.mutationDiagnostics).toEqual([
+        expect.objectContaining({ code: 'ambiguous-binding', path: [] }),
+      ]);
+    });
+
+    it('does not add annotations to a story that holds another value', () => {
+      const csf = parse(`export default { title: 'Example' };
+export const Primary = shared;
+Primary.args = {};
+`);
+
+      expect(csf.objects({ meta: false })).toEqual([]);
+      expect(csf.mutationDiagnostics).toContainEqual(
+        expect.objectContaining({ code: 'unsupported-initializer', path: ['args'] })
+      );
+    });
+  });
 });
diff --git a/code/core/src/csf-tools/CsfObjectDiscovery.ts b/code/core/src/csf-tools/CsfObjectDiscovery.ts
index 3de32de71339..35c746c87204 100644
--- a/code/core/src/csf-tools/CsfObjectDiscovery.ts
+++ b/code/core/src/csf-tools/CsfObjectDiscovery.ts
@@ -2,14 +2,38 @@ import type { CsfFile } from './CsfFile.ts';
 import { csfFactoryReceiver, isCsfFactoryCall, withoutTypeCalls } from './CsfFile.ts';
 import {
   type CsfMutationDiagnostic,
+  type CsfMutationDiagnosticCode,
   type CsfObject,
   type CsfObjectHost,
   type CsfObjectOptions,
   type CsfObjectTarget,
+  type MemberInsert,
+  type ObjectRoot,
   createCsfObject,
+  detachedMember,
   literalRoot,
 } from './CsfObject.ts';
-import { type E, type Node, isStringLiteral, locationOf, unwrapExpression } from './estree/ast.ts';
+import {
+  type E,
+  type Node,
+  type Property,
+  isFunction,
+  isIdentifier,
+  isStringLiteral,
+  isValidIdentifier,
+  locationOf,
+  outerSpan,
+  staticKey,
+  unwrapExpression,
+} from './estree/ast.ts';
+import {
+  insertStatementAfter,
+  printKey,
+  printMembers,
+  printString,
+  removeStatements,
+} from './estree/editor.ts';
+import { placeableValueSource } from './estree/values.ts';
 import type { Binding } from './estree/scope.ts';
 
 type ReportDiagnostic = (diagnostic: CsfMutationDiagnostic) => void;
@@ -21,16 +45,17 @@ type StoryBinding = {
   declaration: E.VariableDeclarator | E.Function;
 };
 
-type AnnotationCandidate = {
-  target: Extract<CsfObjectTarget, { kind: 'story-annotation' }>;
-  annotation: 'parameters' | 'argTypes';
-  root?: E.ObjectExpression;
-  node: Node;
-  message?: string;
+// The object an editor works on, before it is wrapped into a `CsfObject`.
+type Discovered = { target: CsfObjectTarget; root: ObjectRoot };
+
+// A top-level `Story.name = value` statement, as a member of the story.
+type Assignment = {
+  statement: E.ExpressionStatement;
+  expression: E.AssignmentExpression & { left: E.MemberExpression };
+  property: Property;
 };
 
-// An object literal an editor works on, before it is wrapped into a `CsfObject`.
-type Discovered = { target: CsfObjectTarget; prefix: readonly string[]; node: E.ObjectExpression };
+type Rejection = { code: CsfMutationDiagnosticCode; node: Node; path: string[]; message: string };
 
 const loc = (csf: CsfFile, node: Node) => ({ loc: locationOf(csf._code, node.start, node.end) });
 
@@ -232,7 +257,7 @@ const discoverMeta = (csf: CsfFile, report: ReportDiagnostic): Discovered[] => {
       });
       return [];
     }
-    return [{ target: { kind: 'meta' }, prefix: [], node: csf._metaNode }];
+    return [{ target: { kind: 'meta' }, root: literalRoot(csf._editor, csf._metaNode) }];
   }
   if (csf._metaIsFactory && csf._metaFactoryCall) {
     report({
@@ -246,6 +271,212 @@ const discoverMeta = (csf: CsfFile, report: ReportDiagnostic): Discovered[] => {
   return [];
 };
 
+const annotationName = (left: E.MemberExpression) =>
+  !left.computed && left.property.type === 'Identifier'
+    ? left.property.name
+    : left.computed && isStringLiteral(left.property)
+      ? left.property.value
+      : undefined;
+
+// Where a reference to a story neither writes to it nor lets other code see its annotations.
+const NON_SHARING_PARENTS = new Set([
+  'ExportSpecifier',
+  'TSTypeQuery',
+  'JSXOpeningElement',
+  'JSXClosingElement',
+]);
+
+// The `Story.name = value` statements of a story, found through the references to its binding.
+// Any other write to it, such as a nested or a compound one, is a `write` rejection. A reference
+// that could share the story, such as an alias or a call that receives it, is a `shared` one: it
+// only matters for a story whose assignments are edited, as it could add them to another story.
+const assignmentsOf = (csf: CsfFile, binding: StoryBinding) => {
+  const editor = csf._editor;
+  const parentOf = (node: Node) => editor.parentOf(node);
+  const assignments: Assignment[] = [];
+  let shared: Rejection | undefined;
+  const references = editor.scopes.program.bindings.get(binding.localName)?.references ?? [];
+  for (const reference of references) {
+    // An `export` of the declaration counts as a reference.
+    if (reference.type !== 'Identifier' && reference.type !== 'JSXIdentifier') {
+      continue;
+    }
+    const parent = parentOf(reference);
+    if (
+      parent &&
+      (NON_SHARING_PARENTS.has(parent.type) ||
+        (parent.type === 'CallExpression' && parent.callee === reference))
+    ) {
+      continue;
+    }
+    if (parent?.type !== 'MemberExpression' || parent.object !== reference) {
+      shared ??= {
+        code: 'ambiguous-binding',
+        node: reference,
+        path: [],
+        message: `Cannot mutate ${binding.exportName} because ${binding.localName} is shared with other code`,
+      };
+      continue;
+    }
+    let outer: Node = parent;
+    for (
+      let next = parentOf(outer);
+      next?.type === 'MemberExpression' && next.object === outer;
+      next = parentOf(outer)
+    ) {
+      outer = next;
+    }
+    const user = parentOf(outer);
+    const writes =
+      (user?.type === 'AssignmentExpression' && user.left === outer) ||
+      user?.type === 'UpdateExpression' ||
+      (user?.type === 'UnaryExpression' && user.operator === 'delete');
+    if (!writes) {
+      continue;
+    }
+    const statement = parentOf(user);
+    if (
+      outer !== parent ||
+      user.type !== 'AssignmentExpression' ||
+      statement?.type !== 'ExpressionStatement' ||
+      parentOf(statement)?.type !== 'Program'
+    ) {
+      const write: Rejection = {
+        code: 'ambiguous-binding',
+        node: user,
+        path: [],
+        message: `Cannot mutate ${binding.exportName} because ${binding.localName} is written to outside its top-level annotations`,
+      };
+      return { assignments, write };
+    }
+    const name = annotationName(parent);
+    if (name === undefined) {
+      const write: Rejection = {
+        code: 'dynamic-key',
+        node: parent.property,
+        path: [],
+        message: `Cannot mutate ${binding.exportName} because an annotation name is computed at runtime`,
+      };
+      return { assignments, write };
+    }
+    if (user.operator !== '=') {
+      const write: Rejection = {
+        code: 'unsupported-initializer',
+        node: user,
+        path: [name],
+        message: `Cannot mutate ${binding.localName}.${name} because it uses ${user.operator} assignment`,
+      };
+      return { assignments, write };
+    }
+    const property = detachedMember(parent.property, user.right, parent.computed, statement);
+    assignments.push({ statement, expression: user as Assignment['expression'], property });
+  }
+  assignments.sort((a, b) => a.statement.start - b.statement.start);
+  return { assignments, shared };
+};
+
+// A story edited as one object: the members of its object literal, if it has one, then its
+// `Story.name = value` assignments, which run after it. A missing member goes into the object
+// literal, or else into a new assignment after the story's last one.
+const storyRoot = (
+  csf: CsfFile,
+  binding: StoryBinding,
+  object: E.ObjectExpression | undefined,
+  assignments: Assignment[]
+): ObjectRoot => {
+  const editor = csf._editor;
+  const literal = object && literalRoot(editor, object);
+  const byProperty = new Map(assignments.map((assignment) => [assignment.property, assignment]));
+  const own = (members: readonly Property[]) => members.filter((member) => !byProperty.has(member));
+  const declaration = csf._program.body.find(
+    (statement) =>
+      statement.start <= binding.declaration.start && binding.declaration.end <= statement.end
+  )!;
+  const accessor = (key: string) =>
+    isValidIdentifier(key) ? `.${key}` : `[${printString(key, editor.quote)}]`;
+  // `removed` are statements the same edits remove, which the new ones cannot follow.
+  const assign = (members: MemberInsert[], removed: ReadonlySet<Node> = new Set()) => {
+    const after =
+      assignments.findLast(({ statement }) => !removed.has(statement))?.statement ?? declaration;
+    for (const { key, value } of members) {
+      insertStatementAfter(editor, after, `${binding.localName}${accessor(key)} = ${value};`);
+    }
+  };
+  const statementsOf = (members: readonly Property[]) =>
+    new Set<Node>(members.flatMap((member) => byProperty.get(member)?.statement ?? []));
+  const remove = (members: Property[]) => {
+    const inObject = own(members);
+    if (inObject.length > 0) {
+      literal!.remove(inObject);
+    }
+    const statements = statementsOf(members);
+    if (statements.size > 0) {
+      removeStatements(editor, statements);
+    }
+  };
+  const take = (member: Property, key: string): MemberInsert => {
+    const assignment = byProperty.get(member);
+    if (!assignment) {
+      return literal!.take(member, key);
+    }
+    const value = placeableValueSource(editor, member);
+    return { key, value, text: `${printKey(key, editor.quote)}: ${value}` };
+  };
+  const append = (members: MemberInsert[]) => (literal ? literal.append(members) : assign(members));
+  return {
+    properties: [...(object?.properties ?? []), ...assignments.map(({ property }) => property)],
+    // Moving an assignment's value moves when it is evaluated.
+    detached: assignments.length > 0,
+    node: object,
+    append,
+    prepend: (members) => (literal ? literal.prepend(members) : assign(members)),
+    remove,
+    replaceValue: (member, text) => {
+      const assignment = byProperty.get(member);
+      if (!assignment) {
+        literal!.replaceValue(member, text);
+        return;
+      }
+      const { start, end } = outerSpan(assignment.expression.right);
+      editor.edits.overwrite(start, end, text);
+    },
+    rename: (member, key) => {
+      const assignment = byProperty.get(member);
+      if (!assignment) {
+        literal!.rename(member, key);
+        return;
+      }
+      const { left } = assignment.expression;
+      editor.edits.overwrite(left.object.end, left.end, accessor(key));
+    },
+    // `CsfObject` refuses a group of members from both the object and the assignments.
+    group: (members, key) => {
+      if (literal && own(members).length === members.length) {
+        literal.group(members, key);
+        return;
+      }
+      const texts = members.map((member) => take(member, staticKey(member)!).text);
+      const value = texts.some((text) => text.includes('\n'))
+        ? printMembers(texts, editor.indent)
+        : `{ ${texts.join(', ')} }`;
+      const statements = statementsOf(members);
+      removeStatements(editor, statements);
+      assign([{ key, value, text: '' }], statements);
+    },
+    take,
+  };
+};
+
+// A story without an object literal is a function or a bound template, which its assignments
+// annotate. Any other value may be shared, so annotating it could change other stories.
+const isAnnotatable = (node: Node | undefined) =>
+  !!node &&
+  (isFunction(node) ||
+    (node.type === 'CallExpression' &&
+      node.callee.type === 'MemberExpression' &&
+      !node.callee.computed &&
+      isIdentifier(node.callee.property, 'bind')));
+
 const discoverStories = (
   csf: CsfFile,
   bindings: StoryBinding[],
@@ -265,7 +496,7 @@ const discoverStories = (
         node.arguments.length === 1 &&
         argumentNode?.type === 'ObjectExpression'
       ) {
-        return [{ target: storyTarget(binding), prefix: [], node: argumentNode }];
+        return [{ target: storyTarget(binding), root: literalRoot(csf._editor, argumentNode) }];
       }
       report({
         code: 'unsupported-initializer',
@@ -276,116 +507,34 @@ const discoverStories = (
       });
       return [];
     }
-    return node?.type === 'ObjectExpression'
-      ? [{ target: storyTarget(binding), prefix: [], node }]
-      : [];
-  });
-
-const annotationCandidates = (
-  statement: Node,
-  bindings: Map<string, StoryBinding>
-): AnnotationCandidate[] => {
-  if (statement.type !== 'ExpressionStatement') {
-    return [];
-  }
-  const { expression } = statement;
-  if (expression.type !== 'AssignmentExpression') {
-    return [];
-  }
-  const { left, right } = expression;
-  if (left.type !== 'MemberExpression' || left.object.type !== 'Identifier') {
-    return [];
-  }
-  const property = left.property;
-  const propertyName =
-    !left.computed && property.type === 'Identifier'
-      ? property.name
-      : left.computed && isStringLiteral(property)
-        ? property.value
-        : undefined;
-  const binding = bindings.get(left.object.name);
-  if (!propertyName && left.computed && binding) {
-    return [
-      {
-        target: {
-          kind: 'story-annotation',
-          exportName: binding.exportName,
-          localName: binding.localName,
-          annotation: 'parameters',
-        },
-        annotation: 'parameters',
-        node: property,
-        message: `Cannot mutate ${binding.localName} annotation because its computed name is not a static string literal`,
-      },
-    ];
-  }
-  const annotation =
-    propertyName === 'parameters' || propertyName === 'argTypes' ? propertyName : undefined;
-  if (!annotation || !binding) {
-    return [];
-  }
-  const rootNode = unwrapExpression(right);
-  return [
-    {
-      target: {
-        kind: 'story-annotation',
-        exportName: binding.exportName,
-        localName: binding.localName,
-        annotation,
-      },
-      annotation,
-      root:
-        expression.operator === '=' && rootNode.type === 'ObjectExpression' ? rootNode : undefined,
-      node: right,
-      ...(expression.operator === '='
-        ? {}
-        : {
-            message: `Cannot mutate ${binding.localName}.${annotation} because it uses ${expression.operator} assignment`,
-          }),
-    },
-  ];
-};
-
-const discoverAnnotations = (
-  csf: CsfFile,
-  storyBindings: StoryBinding[],
-  report: ReportDiagnostic
-): Discovered[] => {
-  const bindings = new Map(storyBindings.map((binding) => [binding.localName, binding]));
-  const candidates = new Map<string, AnnotationCandidate[]>();
-  for (const statement of csf._program.body) {
-    for (const candidate of annotationCandidates(statement, bindings)) {
-      const identity = `${candidate.target.localName}:${candidate.annotation}`;
-      candidates.set(identity, [...(candidates.get(identity) ?? []), candidate]);
-    }
-  }
-  return [...candidates.values()].flatMap((matches): Discovered[] => {
-    const [candidate] = matches;
-    if (matches.length > 1) {
-      report({
-        code: 'ambiguous-binding',
-        target: candidate.target,
-        path: [candidate.annotation],
-        message: `Cannot mutate repeated ${candidate.target.localName}.${candidate.annotation} assignments`,
-        ...loc(csf, candidate.node),
-      });
+    const object = node?.type === 'ObjectExpression' ? node : undefined;
+    const { assignments, write, shared } = assignmentsOf(csf, binding);
+    const reject = ({ code, node: at, path, message }: Rejection): Discovered[] => {
+      report({ code, target: storyTarget(binding), path, message, ...loc(csf, at) });
       return [];
+    };
+    if (write) {
+      return reject(write);
     }
-    if (!candidate.root) {
-      report({
+    if (assignments.length === 0 && (object || !isAnnotatable(node))) {
+      return object
+        ? [{ target: storyTarget(binding), root: literalRoot(csf._editor, object) }]
+        : [];
+    }
+    if (shared) {
+      return reject(shared);
+    }
+    if (!object && !isAnnotatable(node)) {
+      const name = annotationName(assignments[0].expression.left)!;
+      return reject({
         code: 'unsupported-initializer',
-        target: candidate.target,
-        path: [candidate.annotation],
-        message:
-          candidate.message ??
-          `Cannot mutate ${candidate.target.localName}.${candidate.annotation} because its value is not an object literal`,
-        ...loc(csf, candidate.node),
+        node: assignments[0].property.value,
+        path: [name],
+        message: `Cannot mutate ${binding.localName}.${name} because ${binding.localName} is not a story object, function or bound template`,
       });
-      return [];
     }
-    return [{ target: candidate.target, prefix: [candidate.annotation], node: candidate.root }];
+    return [{ target: storyTarget(binding), root: storyRoot(csf, binding, object, assignments) }];
   });
-};
 
 const discover = (
   csf: CsfFile,
@@ -398,7 +547,6 @@ const discover = (
   return [
     ...((options.meta ?? true) ? discoverMeta(csf, report) : []),
     ...(includeStories ? discoverStories(csf, bindings, report) : []),
-    ...(includeStories ? discoverAnnotations(csf, bindings, report) : []),
   ];
 };
 
@@ -411,16 +559,13 @@ export const discoverCsfObjects = (
   report: ReportDiagnostic,
   markChanged: MarkChanged
 ): readonly CsfObject[] =>
-  discover(csf, options, report).map(({ target, prefix }) => {
+  discover(csf, options, report).map(({ target }) => {
     const host: CsfObjectHost = {
       editor: csf._editor,
-      root: () => {
+      root: () =>
         // Edits re-parse the file, so the object is found again by its target.
-        const current = discover(csf, options, () => {}).find((candidate) =>
-          sameTarget(candidate.target, target)
-        );
-        return current && literalRoot(csf._editor, current.node);
-      },
+        discover(csf, options, () => {}).find((candidate) => sameTarget(candidate.target, target))
+          ?.root,
     };
-    return createCsfObject(target, host, prefix, report, markChanged);
+    return createCsfObject(target, host, report, markChanged);
   });
diff --git a/code/core/src/csf-tools/README.md b/code/core/src/csf-tools/README.md
index 98350476f6f8..a9de60d0c49b 100644
--- a/code/core/src/csf-tools/README.md
+++ b/code/core/src/csf-tools/README.md
@@ -13,8 +13,8 @@ It can parse MDX into CSF.
 
 ## Transforming stories
 
-`CsfFile.objects()` returns one `CsfObject` editor per mutable object it can prove safe to edit: the meta, each story export, and each CSF2 `Story.parameters` / `Story.argTypes` annotation assignment.
-`{ meta, stories }` narrows what is discovered; both are included by default. Story discovery also includes separate CSF2 parameter assignments, so callers use the same paths regardless of the source format.
+`CsfFile.objects()` returns one `CsfObject` editor per mutable object it can prove safe to edit: the meta and each story export.
+`{ meta, stories }` narrows what is discovered; both are included by default.
 
 Each editor reads and writes static property paths with `get`, `getValue`, `inspect`, `set`, `transform`, `remove`, `rename`, `move`, and `group`.
 `get` returns an AST expression; `getValue` reads plain values from literals, nested arrays and objects, and local constants without executing code. Reads never return a partially decoded object.
@@ -40,11 +40,12 @@ Successful removals and moves recursively remove empty source parents, stopping
 Nested object paths can follow local constants used only by that object; shared or reassigned references remain untouched.
 Nodes reused by `transform` keep their original source, so relocating a value prints it as written instead of pretty-printing it.
 `group(path, names)` nests named siblings under a destination object, retaining their source order. A new group replaces a contiguous run of source fields at their original position. Grouping into an existing object requires values whose relocation cannot change expression evaluation order. Conflicts, ambiguous keys, and unsafe relocations produce diagnostics before the operation changes the source; absent source fields are ignored.
-`node` is the editor's object literal in the current parse: the meta or story object, a call argument, a config object, or for a CSF2 annotation editor the assigned object that its annotation path (such as `['parameters']`) names. It is the file's own node, found again after every mutation: read it after editing instead of keeping it, and do not change it, since edits go through the source. It is `undefined` for a config made of named exports and once the object is gone.
-Annotation editors take the same paths as their story counterparts, so `['parameters', 'a11y']` addresses `Story.parameters.a11y` and an inline `parameters.a11y` alike.
+`node` is the editor's object literal in the current parse: the meta or story object, a call argument, or a config object. It is the file's own node, found again after every mutation: read it after editing instead of keeping it, and do not change it, since edits go through the source. It is `undefined` for a config made of named exports, for a story without an object literal, and once the object is gone.
+A story's top-level `Story.name = value` assignments (CSF2 annotations such as `args`, `argTypes`, `parameters`, `decorators`, `loaders`, `beforeEach`, `play`, `render` and `tags`) are fields of the story, after the fields of its object literal if it has one. The same paths address both forms, so `['parameters', 'a11y']` is `Story.parameters.a11y` and an inline `parameters.a11y` alike. A story without an object literal, a function or a bound template, adds a missing field as a new `Story.name = value;` statement after its last annotation, or after its declaration; removing a field, or emptying it through cleanup, removes its statement. A field written both inline and as an assignment is a duplicate field.
 
 Discovery and mutation are conservative: an object or a path whose shape cannot be proven is left untouched, and the reason is reported on `CsfFile.mutationDiagnostics` as a `CsfMutationDiagnostic`.
-Unproven shapes include story or meta bindings that are reassigned or aliased, a CSF factory configuration that is not an object literal owned by that single factory call, dynamically computed annotation names, and target paths shadowed by a spread, a duplicate field, or a computed key.
+Unproven shapes include story or meta bindings that are reassigned or aliased, a CSF factory configuration that is not an object literal owned by that single factory call, and target paths shadowed by a spread, a duplicate field, or a computed key.
+A story is also left untouched when it is written to other than by a top-level `Story.name = value`, such as `Story.args.label = 'x'`, `Story.parameters ||= {}` or `Story[name] = {}`. A story whose assignments are edited is left untouched when other code could see them: an alias, a spread, or a call or array that receives the story; calling or rendering the story is fine. Such a story without an object literal holds a function or a bound template; any other value could be shared with other stories.
 `set` can still add a field missing from an object with a spread or a computed key: the field is appended after them, so it overrides any value they provide. It cannot create a missing parent there, nor change a field that a later spread or computed key could override.
 
 `CsfFile.changed` is true once any mutation has been applied, which is the signal for whether the file needs to be written back.

From 1351cbd757f5a633d945a6f471ab2bafd1f543a3 Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <sidnioulz@gmail.com>
Date: Tue, 20 Oct 2026 12:04:30 +0200
Subject: [PATCH 272/326] Core: Announce pnpm build approvals and keep the
 workspace reader plain

Log an info line whenever Storybook records an approval in
pnpm-workspace.yaml, drop the createIfMissing mode from the reader in
favor of a private path lookup, and rename the helper module to
pnpm-build-approvals.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../PNPMProxy.catalog.test.ts                 |  2 +-
 .../js-package-manager/PNPMProxy.test.ts      |  4 +++
 .../common/js-package-manager/PNPMProxy.ts    | 30 ++++++++++---------
 ...s.test.ts => pnpm-build-approvals.test.ts} |  2 +-
 ...ild-scripts.ts => pnpm-build-approvals.ts} |  0
 5 files changed, 22 insertions(+), 16 deletions(-)
 rename code/core/src/common/js-package-manager/{pnpm-build-scripts.test.ts => pnpm-build-approvals.test.ts} (99%)
 rename code/core/src/common/js-package-manager/{pnpm-build-scripts.ts => pnpm-build-approvals.ts} (100%)

diff --git a/code/core/src/common/js-package-manager/PNPMProxy.catalog.test.ts b/code/core/src/common/js-package-manager/PNPMProxy.catalog.test.ts
index 34deddbafd01..0e4e42bc42a3 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.catalog.test.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.catalog.test.ts
@@ -285,7 +285,7 @@ describe('PNPMProxy catalogs', () => {
     });
   });
 
-  describe('allowStorybookBuildScripts (workspace reader with createIfMissing)', () => {
+  describe('allowStorybookBuildScripts', () => {
     const allowBuildScripts = () => (pnpmProxy as any).allowStorybookBuildScripts();
     // The package.json being installed lives below the workspace root, on memfs.
     const PROJECT_DIR = '/root/packages/app';
diff --git a/code/core/src/common/js-package-manager/PNPMProxy.test.ts b/code/core/src/common/js-package-manager/PNPMProxy.test.ts
index 5f0f78691f5d..b006f87c8d96 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.test.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.test.ts
@@ -170,6 +170,9 @@ describe('PNPM Proxy', () => {
       await install();
 
       expect(workspaceYaml()).toBe('allowBuilds:\n  esbuild: true\n');
+      expect(logger.info).toHaveBeenCalledWith(
+        'Approved build scripts for esbuild in /project/pnpm-workspace.yaml'
+      );
       expect(mockedExecuteCommand).toHaveBeenCalledWith(
         expect.objectContaining({ command: 'pnpm', args: ['install'] })
       );
@@ -203,6 +206,7 @@ describe('PNPM Proxy', () => {
 
       expect(workspaceYaml()).toBe('allowBuilds:\n  esbuild: false\n');
       expect(writeFileSync).not.toHaveBeenCalled();
+      expect(logger.info).not.toHaveBeenCalled();
     });
 
     it('resolves the placeholder pnpm 12 writes for unreviewed packages', async () => {
diff --git a/code/core/src/common/js-package-manager/PNPMProxy.ts b/code/core/src/common/js-package-manager/PNPMProxy.ts
index af218f1f00a3..1e10caa98569 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.ts
@@ -19,7 +19,7 @@ import { executeCommand, executeCommandSync } from '../utils/command.ts';
 import { getProjectRoot } from '../utils/paths.ts';
 import { JsPackageManager, PackageManagerName } from './JsPackageManager.ts';
 import type { PackageJson } from './PackageJson.ts';
-import { hasAllowBuildsDecision, hasPnpm10ListDecision } from './pnpm-build-scripts.ts';
+import { hasAllowBuildsDecision, hasPnpm10ListDecision } from './pnpm-build-approvals.ts';
 import type { InstallationMetadata, PackageMetadata } from './types.ts';
 import {
   getAgeInMinutes,
@@ -325,7 +325,12 @@ export class PNPMProxy extends JsPackageManager {
     if (!this.#pnpmGte(PNPM_ALLOW_BUILDS_MIN)) {
       return;
     }
-    const workspace = this.#readWorkspaceYaml({ createIfMissing: true });
+    const workspace = this.#findWorkspaceYamlPath()
+      ? this.#readWorkspaceYaml()
+      : {
+          path: join(this.primaryPackageJson.operationDir, 'pnpm-workspace.yaml'),
+          doc: new Document(),
+        };
     if (!workspace) {
       logger.warn(
         `Could not allow build scripts of ${STORYBOOK_BUILD_SCRIPT_PACKAGES.join(', ')}: pnpm-workspace.yaml is unreadable`
@@ -361,6 +366,7 @@ export class PNPMProxy extends JsPackageManager {
         doc.setIn(['allowBuilds', pkg], true);
       }
       this.#writeWorkspaceYaml({ path, doc });
+      logger.info(`Approved build scripts for ${pending.join(', ')} in ${path}`);
     } catch (e) {
       logger.warn(
         `Could not allow build scripts of ${STORYBOOK_BUILD_SCRIPT_PACKAGES.join(', ')} in ${path}: ${String(e)}`
@@ -373,22 +379,18 @@ export class PNPMProxy extends JsPackageManager {
     writeFileSync(path, doc.toString(), 'utf8');
   }
 
-  // Null when the file is malformed, or missing without `createIfMissing`; with it, a missing file
-  // yields an empty document addressed next to the package.json we operate on.
-  #readWorkspaceYaml(options?: {
-    createIfMissing: boolean;
-  }): { path: string; doc: Document } | null {
-    const path = find.up('pnpm-workspace.yaml', {
+  #findWorkspaceYamlPath(): string | undefined {
+    return find.up('pnpm-workspace.yaml', {
       cwd: this.primaryPackageJson.operationDir,
       last: getProjectRoot(),
     });
+  }
+
+  // Null when the file is missing or malformed.
+  #readWorkspaceYaml(): { path: string; doc: Document } | null {
+    const path = this.#findWorkspaceYamlPath();
     if (!path) {
-      return options?.createIfMissing
-        ? {
-            path: join(this.primaryPackageJson.operationDir, 'pnpm-workspace.yaml'),
-            doc: new Document(),
-          }
-        : null;
+      return null;
     }
     try {
       const doc = parseDocument(readFileSync(path, 'utf8'));
diff --git a/code/core/src/common/js-package-manager/pnpm-build-scripts.test.ts b/code/core/src/common/js-package-manager/pnpm-build-approvals.test.ts
similarity index 99%
rename from code/core/src/common/js-package-manager/pnpm-build-scripts.test.ts
rename to code/core/src/common/js-package-manager/pnpm-build-approvals.test.ts
index e0e25cfa8940..4a721abe7cc1 100644
--- a/code/core/src/common/js-package-manager/pnpm-build-scripts.test.ts
+++ b/code/core/src/common/js-package-manager/pnpm-build-approvals.test.ts
@@ -10,7 +10,7 @@ import {
   listsPackage,
   matchesPackage,
   readOnlyBuiltDependenciesFile,
-} from './pnpm-build-scripts.ts';
+} from './pnpm-build-approvals.ts';
 
 vi.mock('node:fs', { spy: true });
 
diff --git a/code/core/src/common/js-package-manager/pnpm-build-scripts.ts b/code/core/src/common/js-package-manager/pnpm-build-approvals.ts
similarity index 100%
rename from code/core/src/common/js-package-manager/pnpm-build-scripts.ts
rename to code/core/src/common/js-package-manager/pnpm-build-approvals.ts

From e65ab90fcb0309b8379c603df9e70df0e530afab Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Tue, 20 Oct 2026 12:37:39 +0200
Subject: [PATCH 273/326] test: the test cases for Svelte CSF factories in the
 codemod and the sandboxes

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/plugins/svelte-csf.test.ts            |  16 +-
 .../helpers/story-to-csf-factory.test.ts      |  96 ++++-
 .../helpers/svelte-csf-to-csf-factory.test.ts | 347 ++++++++++++++++++
 .../codemod/component.svelte                  |  19 +
 .../codemod/renamed.svelte                    |   9 +
 .../codemod/render.svelte                     |  11 +
 .../generic-component.stories.svelte          |  16 +
 .../svelte-csf-factories.test.ts              |   9 +-
 .../svelte-csf-factories/type-checks.svelte   |  22 ++
 .../template/stories/csf-factories/csf4.mdx   |  20 +
 .../stories/csf-factories/csf4.stories.ts     |  17 +
 .../csf-factories/svelte-csf.stories.svelte   |  33 ++
 12 files changed, 610 insertions(+), 5 deletions(-)
 create mode 100644 code/lib/cli-storybook/src/codemod/helpers/svelte-csf-to-csf-factory.test.ts
 create mode 100644 code/renderers/svelte/src/__test__/svelte-csf-factories/codemod/component.svelte
 create mode 100644 code/renderers/svelte/src/__test__/svelte-csf-factories/codemod/renamed.svelte
 create mode 100644 code/renderers/svelte/src/__test__/svelte-csf-factories/codemod/render.svelte
 create mode 100644 code/renderers/svelte/src/__test__/svelte-csf-factories/generic-component.stories.svelte
 create mode 100644 code/renderers/svelte/template/stories/csf-factories/csf4.mdx
 create mode 100644 code/renderers/svelte/template/stories/csf-factories/csf4.stories.ts
 create mode 100644 code/renderers/svelte/template/stories/csf-factories/svelte-csf.stories.svelte

diff --git a/code/frameworks/svelte-vite/src/plugins/svelte-csf.test.ts b/code/frameworks/svelte-vite/src/plugins/svelte-csf.test.ts
index 25f94aa79136..30cfd40dca28 100644
--- a/code/frameworks/svelte-vite/src/plugins/svelte-csf.test.ts
+++ b/code/frameworks/svelte-vite/src/plugins/svelte-csf.test.ts
@@ -27,14 +27,24 @@ describe(svelteCsf.name, () => {
     expect(handler()).toBe(svelteCsfRuntimeStoriesPath);
   });
 
-  it('only transforms stories files', () => {
+  it('only transforms stories files and their styles', () => {
     const { filter } = svelteCsf().transform as Handler<unknown>;
 
     expect(filter.id.test('/project/src/Button.stories.svelte')).toBe(true);
-    expect(filter.id.test('/project/src/Button.svelte')).toBe(false);
     expect(filter.id.test('/project/src/Button.stories.svelte?svelte&type=style&lang.css')).toBe(
-      false
+      true
     );
+    expect(filter.id.test('/project/src/Button.svelte')).toBe(false);
+    expect(filter.id.test('/project/src/Button.svelte?svelte&type=style&lang.css')).toBe(false);
+  });
+
+  it('keeps the styles of a stories file while the stories file is used, not only its default export', () => {
+    const { handler } = svelteCsf().transform as Handler<(code: string, id: string) => unknown>;
+
+    expect(handler('', '/project/src/Button.stories.svelte?svelte&type=style&lang.css')).toEqual({
+      code: '',
+      meta: { vite: { cssScopeTo: ['/project/src/Button.stories.svelte', undefined] } },
+    });
   });
 
   it('passes the preprocessors that vite-plugin-svelte resolved, including its inline options', async () => {
diff --git a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
index e94487e6226f..e952d2418db5 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
@@ -3,7 +3,9 @@ import { describe, expect, it, vi } from 'vitest';
 import { formatFileContent } from 'storybook/internal/common';
 import { logger } from 'storybook/internal/node-logger';
 
-import path from 'path';
+import { mkdtempSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import path, { join } from 'path';
 import { dedent } from 'ts-dedent';
 
 import { storyToCsfFactory } from './story-to-csf-factory.ts';
@@ -293,6 +295,38 @@ describe('stories codemod', () => {
       `);
     });
 
+    it('keeps the exports of an imported Svelte CSF file that are not stories', async () => {
+      const dir = mkdtempSync(join(tmpdir(), 'svelte-csf-'));
+      writeFileSync(
+        join(dir, 'Task.stories.svelte'),
+        dedent`
+          <script module>
+            export const TaskData = { task: { id: '1' } };
+          </script>
+        `
+      );
+
+      await expect(
+        storyToCsfFactory(
+          {
+            path: join(dir, 'TaskList.stories.ts'),
+            source: dedent`
+              import * as TaskStories from './Task.stories.svelte';
+
+              export default { title: 'TaskList' };
+
+              export const Default = {
+                args: { ...TaskStories.Default.args, task: TaskStories.TaskData.task },
+              };
+            `,
+          },
+          { useSubPathImports: true }
+        )
+      ).resolves.toContain(
+        'args: { ...TaskStories.Default.input.args, task: TaskStories.TaskData.task }'
+      );
+    });
+
     it('migrate cross-file story imports from `ImportedStories.Story.xyz` to `ImportedStories.Story.input.xyz`', async () => {
       await expect(
         transform(dedent`
@@ -1157,6 +1191,66 @@ describe('stories codemod', () => {
       });
     });
 
+    it('migrates story imports from Svelte CSF files', async () => {
+      await expect(
+        transform(dedent`
+          import * as HeaderStories from './Header.stories.svelte';
+
+          export default { title: 'Page' };
+
+          export const LoggedIn = { args: HeaderStories.LoggedIn.args };
+        `)
+      ).resolves.toMatchInlineSnapshot(`
+        import preview from "#.storybook/preview";
+        import * as HeaderStories from "./Header.stories.svelte";
+
+        const meta = preview.meta({
+          title: "Page",
+        });
+
+        export const LoggedIn = meta.story({ args: HeaderStories.LoggedIn.input.args });
+      `);
+    });
+
+    it('migrates a Svelte stories file', async () => {
+      await expect(
+        transform(dedent`
+          import type { Meta, StoryObj } from '@storybook/svelte';
+          import { fn } from 'storybook/test';
+
+          import Button from './Button.svelte';
+
+          const meta = {
+            title: 'Example/Button',
+            component: Button,
+            args: { onclick: fn() },
+          } satisfies Meta<typeof Button>;
+
+          export default meta;
+          type Story = StoryObj<typeof meta>;
+
+          export const Primary: Story = {
+            args: { primary: true, label: 'Button' },
+          };
+        `)
+      ).resolves.toMatchInlineSnapshot(`
+        import preview from "#.storybook/preview";
+        import { fn } from "storybook/test";
+
+        import Button from "./Button.svelte";
+
+        const meta = preview.meta({
+          title: "Example/Button",
+          component: Button,
+          args: { onclick: fn() },
+        });
+
+        export const Primary = meta.story({
+          args: { primary: true, label: "Button" },
+        });
+      `);
+    });
+
     it('should remove unused Story types', async () => {
       await expect(
         transform(
diff --git a/code/lib/cli-storybook/src/codemod/helpers/svelte-csf-to-csf-factory.test.ts b/code/lib/cli-storybook/src/codemod/helpers/svelte-csf-to-csf-factory.test.ts
new file mode 100644
index 000000000000..6cb4ef710536
--- /dev/null
+++ b/code/lib/cli-storybook/src/codemod/helpers/svelte-csf-to-csf-factory.test.ts
@@ -0,0 +1,347 @@
+import { mkdtempSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+
+import { describe, expect, it } from 'vitest';
+
+import { dedent } from 'ts-dedent';
+
+import { svelteCsfToCsfFactory } from './svelte-csf-to-csf-factory.ts';
+
+// The Svelte renderer type-checks the files written there with `svelte-check`
+const TYPE_FIXTURES_DIR = join(
+  import.meta.dirname,
+  '../../../../../renderers/svelte/src/__test__/svelte-csf-factories/codemod'
+);
+
+const transform = (source: string, path = '/project/src/stories/Button.stories.svelte') =>
+  svelteCsfToCsfFactory({ source, path }, { useSubPathImports: true });
+
+const transformRelative = (source: string, path = '/project/src/stories/Button.stories.svelte') =>
+  svelteCsfToCsfFactory(
+    { source, path },
+    { useSubPathImports: false, previewConfigPath: '/project/.storybook/preview.ts' }
+  );
+
+const transformTypeFixture = (source: string, name: string) =>
+  svelteCsfToCsfFactory(
+    { source: `${source}\n`, path: join(TYPE_FIXTURES_DIR, name) },
+    { useSubPathImports: false, previewConfigPath: join(TYPE_FIXTURES_DIR, '../preview.ts') }
+  );
+
+describe('svelteCsfToCsfFactory', () => {
+  it('changes defineMeta() to preview.meta() with a subpath import', () => {
+    expect(
+      transform(dedent`
+        <script module>
+          import { defineMeta } from '@storybook/svelte';
+          import Button from './Button.svelte';
+
+          const { Story } = defineMeta({ component: Button });
+        </script>
+
+        <Story name="Primary" args={{ label: 'Button' }} />
+      `)
+    ).toMatchInlineSnapshot(`
+      "<script module>
+        import preview from '#.storybook/preview';
+        import Button from './Button.svelte';
+
+        const { Story } = preview.meta({ component: Button });
+      </script>
+
+      <Story name="Primary" args={{ label: 'Button' }} />"
+    `);
+  });
+
+  it('imports the preview with a relative path', () => {
+    expect(
+      transformRelative(dedent`
+        <script module>
+          import { defineMeta } from "@storybook/svelte-vite"
+          const { Story } = defineMeta({})
+        </script>
+      `)
+    ).toMatchInlineSnapshot(`
+      "<script module>
+        import preview from "../../.storybook/preview"
+        const { Story } = preview.meta({})
+      </script>"
+    `);
+  });
+
+  it('keeps the other imports from the Svelte CSF module', () => {
+    expect(
+      transform(dedent`
+        <script module lang="ts">
+          import { type Args, defineMeta } from '@storybook/sveltekit';
+          const { Story } = defineMeta({});
+        </script>
+      `)
+    ).toMatchInlineSnapshot(`
+      "<script module lang="ts">
+        import { type Args } from '@storybook/sveltekit';
+        import preview from '#.storybook/preview';
+        const { Story } = preview.meta({});
+      </script>"
+    `);
+  });
+
+  it('finds defineMeta after a type import from the same module', () => {
+    expect(
+      transform(dedent`
+        <script module lang="ts">
+          import type { Args } from '@storybook/svelte';
+          import { defineMeta } from '@storybook/svelte';
+          const { Story } = defineMeta({});
+        </script>
+      `)
+    ).toMatchInlineSnapshot(`
+      "<script module lang="ts">
+        import type { Args } from '@storybook/svelte';
+        import preview from '#.storybook/preview';
+        const { Story } = preview.meta({});
+      </script>"
+    `);
+  });
+
+  it('reads the annotations of stories from other stories files from their input', () => {
+    expect(
+      transform(dedent`
+        <script module>
+          import { defineMeta } from '@storybook/svelte';
+          import * as HeaderStories from './Header.stories.svelte';
+          import { Unchecked } from './ListItem.stories.svelte';
+
+          const { Story } = defineMeta({ args: { items: [Unchecked.args] } });
+        </script>
+
+        <Story name="LoggedIn" args={{ ...HeaderStories.LoggedIn.args }} />
+
+        <Story name="Checked" args={{ ...Unchecked.args, checked: true }} play={Unchecked.play} />
+      `)
+    ).toMatchInlineSnapshot(`
+      "<script module>
+        import preview from '#.storybook/preview';
+        import * as HeaderStories from './Header.stories.svelte';
+        import { Unchecked } from './ListItem.stories.svelte';
+
+        const { Story } = preview.meta({ args: { items: [Unchecked.input.args] } });
+      </script>
+
+      <Story name="LoggedIn" args={{ ...HeaderStories.LoggedIn.input.args }} />
+
+      <Story name="Checked" args={{ ...Unchecked.input.args, checked: true }} play={Unchecked.play} />"
+    `);
+  });
+
+  it('keeps the exports of an imported Svelte CSF file that are not stories', () => {
+    const dir = mkdtempSync(join(tmpdir(), 'svelte-csf-'));
+    writeFileSync(
+      join(dir, 'Task.stories.svelte'),
+      dedent`
+        <script module>
+          import { defineMeta } from '@storybook/svelte';
+          export const TaskData = { task: { id: '1' }, events: {} };
+          const { Story } = defineMeta({});
+        </script>
+
+        <Story name="Default" />
+      `
+    );
+
+    expect(
+      transform(
+        dedent`
+          <script module>
+            import { defineMeta } from '@storybook/svelte';
+            import * as TaskStories from './Task.stories.svelte';
+            import { TaskData } from './Task.stories.svelte';
+
+            const { Story } = defineMeta({ args: { ...TaskStories.TaskData.events } });
+          </script>
+
+          <Story name="Default" args={{ ...TaskStories.Default.args, events: TaskData.events }} />
+        `,
+        join(dir, 'TaskList.stories.svelte')
+      )
+    ).toMatchInlineSnapshot(`
+      "<script module>
+        import preview from '#.storybook/preview';
+        import * as TaskStories from './Task.stories.svelte';
+        import { TaskData } from './Task.stories.svelte';
+
+        const { Story } = preview.meta({ args: { ...TaskStories.TaskData.events } });
+      </script>
+
+      <Story name="Default" args={{ ...TaskStories.Default.input.args, events: TaskData.events }} />"
+    `);
+  });
+
+  it('reads the story imports of every module script', () => {
+    expect(
+      transform(dedent`
+        <!--
+        <script module>
+          import { defineMeta } from '@storybook/svelte';
+          const { Story } = defineMeta({});
+        </script>
+        -->
+        <script module>
+          import { defineMeta } from '@storybook/svelte';
+          import { Primary } from './Button.stories.svelte';
+          const { Story } = defineMeta({ args: Primary.args });
+        </script>
+      `)
+    ).toMatchInlineSnapshot(`
+      "<!--
+      <script module>
+        import preview from '#.storybook/preview';
+        const { Story } = preview.meta({});
+      </script>
+      -->
+      <script module>
+        import preview from '#.storybook/preview';
+        import { Primary } from './Button.stories.svelte';
+        const { Story } = preview.meta({ args: Primary.input.args });
+      </script>"
+    `);
+  });
+
+  it('names the import storybookPreview when the file declares preview', () => {
+    expect(
+      transform(dedent`
+        <script module>
+          import { defineMeta } from '@storybook/svelte';
+          import preview from './preview-image.png';
+          const { Story } = defineMeta({ parameters: { preview } });
+        </script>
+      `)
+    ).toMatchInlineSnapshot(`
+      "<script module>
+        import storybookPreview from '#.storybook/preview';
+        import preview from './preview-image.png';
+        const { Story } = storybookPreview.meta({ parameters: { preview } });
+      </script>"
+    `);
+  });
+
+  it('changes a <script context="module"> block', () => {
+    expect(
+      transform(dedent`
+        <script context="module">
+          import { defineMeta } from '@storybook/svelte';
+          const { Story } = defineMeta({});
+        </script>
+      `)
+    ).toMatchInlineSnapshot(`
+      "<script context="module">
+        import preview from '#.storybook/preview';
+        const { Story } = preview.meta({});
+      </script>"
+    `);
+  });
+
+  it.for([
+    [
+      'a file that already calls preview.meta()',
+      dedent`
+        <script module>
+          import preview from '#.storybook/preview';
+          const { Story } = preview.meta({});
+        </script>
+      `,
+    ],
+    [
+      'a defineMeta() call in the instance script',
+      dedent`
+        <script>
+          import { defineMeta } from '@storybook/svelte';
+          const { Story } = defineMeta({});
+        </script>
+      `,
+    ],
+    [
+      'a defineMeta() import from another module',
+      dedent`
+        <script module>
+          import { defineMeta } from './my-meta';
+          const { Story } = defineMeta({});
+        </script>
+      `,
+    ],
+  ])('does not change %s', ([, source]) => {
+    expect(transform(source)).toBe(source);
+  });
+
+  describe('writes code that type-checks', () => {
+    it('for a meta with a component', async () => {
+      await expect(
+        transformTypeFixture(
+          dedent`
+            <script module lang="ts">
+              import { defineMeta } from '@storybook/svelte';
+              import { fn } from 'storybook/test';
+
+              import Button from '../../Button.svelte';
+
+              const { Story } = defineMeta({
+                component: Button,
+                args: { clicked: fn() },
+              });
+            </script>
+
+            <Story name="Primary" args={{ label: 'Button', disabled: false }} />
+
+            <Story name="Template" args={{ label: 'Button', disabled: true }}>
+              {#snippet template(args)}
+                <Button {...args} />
+              {/snippet}
+            </Story>
+          `,
+          'component.svelte'
+        )
+      ).toMatchFileSnapshot(join(TYPE_FIXTURES_DIR, 'component.svelte'));
+    });
+
+    it('for a renamed defineMeta and Story', async () => {
+      await expect(
+        transformTypeFixture(
+          dedent`
+            <script module lang="ts">
+              import { defineMeta as d } from '@storybook/svelte';
+
+              const { Story: S } = d({ parameters: { controls: { disable: true } } });
+            </script>
+
+            <S name="Default">
+              <p>Static content</p>
+            </S>
+          `,
+          'renamed.svelte'
+        )
+      ).toMatchFileSnapshot(join(TYPE_FIXTURES_DIR, 'renamed.svelte'));
+    });
+
+    it('for a meta with a render snippet', async () => {
+      await expect(
+        transformTypeFixture(
+          dedent`
+            <script module lang="ts">
+              import { defineMeta } from '@storybook/svelte';
+
+              const { Story } = defineMeta({ render: template });
+            </script>
+
+            {#snippet template(args: { text: string })}
+              <p>{args.text}</p>
+            {/snippet}
+
+            <Story name="Text" args={{ text: 'Hello' }} />
+          `,
+          'render.svelte'
+        )
+      ).toMatchFileSnapshot(join(TYPE_FIXTURES_DIR, 'render.svelte'));
+    });
+  });
+});
diff --git a/code/renderers/svelte/src/__test__/svelte-csf-factories/codemod/component.svelte b/code/renderers/svelte/src/__test__/svelte-csf-factories/codemod/component.svelte
new file mode 100644
index 000000000000..5729d73f053e
--- /dev/null
+++ b/code/renderers/svelte/src/__test__/svelte-csf-factories/codemod/component.svelte
@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import preview from '../preview';
+  import { fn } from 'storybook/test';
+
+  import Button from '../../Button.svelte';
+
+  const { Story } = preview.meta({
+    component: Button,
+    args: { clicked: fn() },
+  });
+</script>
+
+<Story name="Primary" args={{ label: 'Button', disabled: false }} />
+
+<Story name="Template" args={{ label: 'Button', disabled: true }}>
+  {#snippet template(args)}
+    <Button {...args} />
+  {/snippet}
+</Story>
diff --git a/code/renderers/svelte/src/__test__/svelte-csf-factories/codemod/renamed.svelte b/code/renderers/svelte/src/__test__/svelte-csf-factories/codemod/renamed.svelte
new file mode 100644
index 000000000000..4413d7af5cb7
--- /dev/null
+++ b/code/renderers/svelte/src/__test__/svelte-csf-factories/codemod/renamed.svelte
@@ -0,0 +1,9 @@
+<script module lang="ts">
+  import preview from '../preview';
+
+  const { Story: S } = preview.meta({ parameters: { controls: { disable: true } } });
+</script>
+
+<S name="Default">
+  <p>Static content</p>
+</S>
diff --git a/code/renderers/svelte/src/__test__/svelte-csf-factories/codemod/render.svelte b/code/renderers/svelte/src/__test__/svelte-csf-factories/codemod/render.svelte
new file mode 100644
index 000000000000..ed0e79d91f00
--- /dev/null
+++ b/code/renderers/svelte/src/__test__/svelte-csf-factories/codemod/render.svelte
@@ -0,0 +1,11 @@
+<script module lang="ts">
+  import preview from '../preview';
+
+  const { Story } = preview.meta({ render: template });
+</script>
+
+{#snippet template(args: { text: string })}
+  <p>{args.text}</p>
+{/snippet}
+
+<Story name="Text" args={{ text: 'Hello' }} />
diff --git a/code/renderers/svelte/src/__test__/svelte-csf-factories/generic-component.stories.svelte b/code/renderers/svelte/src/__test__/svelte-csf-factories/generic-component.stories.svelte
new file mode 100644
index 000000000000..26d285ab983a
--- /dev/null
+++ b/code/renderers/svelte/src/__test__/svelte-csf-factories/generic-component.stories.svelte
@@ -0,0 +1,16 @@
+<script module lang="ts">
+  import { expect } from 'storybook/test';
+
+  import preview from './preview.ts';
+  import List from '../List.svelte';
+
+  const { Story } = preview.meta({ component: List<{ id: number; name: string }> });
+</script>
+
+<Story
+  name="Items"
+  args={{ items: [{ id: 1, name: 'Ada' }], getLabel: (item) => item.name }}
+  play={async ({ canvas }) => {
+    await expect(canvas.getByRole('listitem')).toHaveTextContent('Ada');
+  }}
+/>
diff --git a/code/renderers/svelte/src/__test__/svelte-csf-factories/svelte-csf-factories.test.ts b/code/renderers/svelte/src/__test__/svelte-csf-factories/svelte-csf-factories.test.ts
index c727198f57d4..9565510e2ecd 100644
--- a/code/renderers/svelte/src/__test__/svelte-csf-factories/svelte-csf-factories.test.ts
+++ b/code/renderers/svelte/src/__test__/svelte-csf-factories/svelte-csf-factories.test.ts
@@ -5,6 +5,7 @@ import { isStory } from 'storybook/internal/csf';
 
 import { composeStories } from '../../portable-stories.ts';
 import * as ButtonStories from './button.stories.svelte';
+import * as GenericComponentStories from './generic-component.stories.svelte';
 import * as InteractionsStories from './interactions.stories.svelte';
 import * as MetaTypeStories from './meta-type.stories.svelte';
 import * as TemplatingStories from './templating.stories.svelte';
@@ -13,7 +14,13 @@ afterEach(() => {
   cleanup();
 });
 
-const files = { ButtonStories, InteractionsStories, MetaTypeStories, TemplatingStories };
+const files = {
+  ButtonStories,
+  GenericComponentStories,
+  InteractionsStories,
+  MetaTypeStories,
+  TemplatingStories,
+};
 
 describe.each(Object.entries(files))('%s', (_name, file) => {
   const stories = Object.entries(file).filter(([, story]) => isStory(story));
diff --git a/code/renderers/svelte/src/__test__/svelte-csf-factories/type-checks.svelte b/code/renderers/svelte/src/__test__/svelte-csf-factories/type-checks.svelte
index d71528e37960..b9a0faf3e7a3 100644
--- a/code/renderers/svelte/src/__test__/svelte-csf-factories/type-checks.svelte
+++ b/code/renderers/svelte/src/__test__/svelte-csf-factories/type-checks.svelte
@@ -6,12 +6,14 @@
   import preview from './preview.ts';
   import Button from '../Button.svelte';
   import Layout from '../Layout.svelte';
+  import List from '../List.svelte';
 
   // svelte-check fails on each `@ts-expect-error` without an error. This isn't a stories file,
   // because it has more than one meta.
   const { Story } = preview.meta({ component: Button, args: { disabled: false } });
   const { Story: LayoutStory } = preview.meta({ component: Layout });
   const { Story: RenderStory } = preview.meta({ render: textTemplate });
+  const { Story: ListStory } = preview.meta({ component: List<{ id: number; name: string }> });
 </script>
 
 {#snippet textTemplate(args: { text: string })}
@@ -77,6 +79,26 @@
 {/* @ts-expect-error children is missing */ null}
 <LayoutStory name="No children" args={{ title: 'Title' }} />
 
+<ListStory
+  name="Generic args"
+  args={{
+    items: [{ id: 1, name: 'Ada' }],
+    getLabel: (item) => {
+      expectTypeOf(item).toEqualTypeOf<{ id: number; name: string }>();
+      return item.name;
+    },
+  }}
+/>
+
+<ListStory
+  name="Generic args wrong item"
+  args={{
+    // @ts-expect-error name must be a string
+    items: [{ id: 1, name: 1 }],
+    getLabel: (item) => item.name,
+  }}
+/>
+
 <RenderStory name="Render args" args={{ text: 'Text' }} />
 
 {/* @ts-expect-error text is missing */ null}
diff --git a/code/renderers/svelte/template/stories/csf-factories/csf4.mdx b/code/renderers/svelte/template/stories/csf-factories/csf4.mdx
new file mode 100644
index 000000000000..9e89de798c17
--- /dev/null
+++ b/code/renderers/svelte/template/stories/csf-factories/csf4.mdx
@@ -0,0 +1,20 @@
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+
+import * as SvelteCsfStories from './svelte-csf.stories.svelte';
+import * as Csf4Stories from './csf4.stories';
+
+<Meta of={SvelteCsfStories} />
+
+# CSF factories in MDX
+
+A story from a Svelte CSF file with `preview.meta()`:
+
+<Canvas of={SvelteCsfStories.Primary} />
+
+A story of a `Story` component from `meta.type<>()`:
+
+<Canvas of={SvelteCsfStories.Icon} />
+
+A story from a `.stories.ts` file with `meta.story()`:
+
+<Canvas of={Csf4Stories.Primary} />
diff --git a/code/renderers/svelte/template/stories/csf-factories/csf4.stories.ts b/code/renderers/svelte/template/stories/csf-factories/csf4.stories.ts
new file mode 100644
index 000000000000..358f2fbae6a2
--- /dev/null
+++ b/code/renderers/svelte/template/stories/csf-factories/csf4.stories.ts
@@ -0,0 +1,17 @@
+import preview from '#.storybook/preview';
+
+import { expect } from 'storybook/test';
+
+const meta = preview.meta({
+  // @ts-expect-error fix globalThis.__TEMPLATE_COMPONENTS__ type not existing later
+  component: globalThis.__TEMPLATE_COMPONENTS__.Button,
+  args: { label: 'Hello world!' },
+});
+
+export const Primary = meta.story({
+  args: { primary: true },
+  play: async ({ args, canvas }) => {
+    await expect(args).toMatchObject({ label: 'Hello world!', primary: true });
+    await expect(canvas.getByRole('button')).toHaveTextContent('Hello world!');
+  },
+});
diff --git a/code/renderers/svelte/template/stories/csf-factories/svelte-csf.stories.svelte b/code/renderers/svelte/template/stories/csf-factories/svelte-csf.stories.svelte
new file mode 100644
index 000000000000..8bb30bf5ee5f
--- /dev/null
+++ b/code/renderers/svelte/template/stories/csf-factories/svelte-csf.stories.svelte
@@ -0,0 +1,33 @@
+<script module lang="ts">
+  import preview from '#.storybook/preview';
+  import { expect } from 'storybook/test';
+
+  // @ts-expect-error fix globalThis.__TEMPLATE_COMPONENTS__ type not existing later
+  const Button = globalThis.__TEMPLATE_COMPONENTS__.Button;
+
+  const meta = preview.meta({ component: Button, args: { label: 'Hello world!' } });
+  const { Story } = meta;
+  const { Story: IconStory } = meta.type<{ args: { icon: string } }>();
+</script>
+
+<Story
+  name="Primary"
+  args={{ primary: true }}
+  play={async ({ args, canvas }) => {
+    await expect(args).toMatchObject({ label: 'Hello world!', primary: true });
+    await expect(canvas.getByRole('button')).toHaveTextContent('Hello world!');
+  }}
+/>
+
+<IconStory
+  name="Icon"
+  args={{ icon: '★' }}
+  play={async ({ args, canvas }) => {
+    await expect(args).toMatchObject({ label: 'Hello world!', icon: '★' });
+    await expect(canvas.getByRole('button')).toHaveTextContent('★ Hello world!');
+  }}
+>
+  {#snippet template({ icon, label, ...args })}
+    <Button {...args} label="{icon} {label}" />
+  {/snippet}
+</IconStory>

From 23235d02526576e2976d328c96e253ee292d23ec Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 12:42:24 +0200
Subject: [PATCH 274/326] test(addon-vitest): expect projects to be laid out
 one per line when a multi-line entry is added

Since 8da8b51, appending a multi-line item to a one-line array puts
the array on several lines, one item per line, as a formatter would.
Adding the Storybook project to `projects: ['packages/*']` now
produces that layout, so the three expectations follow it.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../src/updateVitestFile.config.4.test.ts     | 106 ++++++++++--------
 1 file changed, 58 insertions(+), 48 deletions(-)

diff --git a/code/addons/vitest/src/updateVitestFile.config.4.test.ts b/code/addons/vitest/src/updateVitestFile.config.4.test.ts
index 8a4ab1a4fd26..35720bbf1cea 100644
--- a/code/addons/vitest/src/updateVitestFile.config.4.test.ts
+++ b/code/addons/vitest/src/updateVitestFile.config.4.test.ts
@@ -71,23 +71,26 @@ describe('updateConfigFile', () => {
         
       -           projects: ['packages/*']
       - 
-      +           projects: ['packages/*', {
-      +             extends: true,
-      +             plugins: [
-      +               // The plugin will run tests for the stories defined in your Storybook config
-      +               // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +               storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
-      +             ],
-      +             test: {
-      +               name: 'storybook',
-      +               browser: {
-      +                 enabled: true,
-      +                 headless: true,
-      +                 provider: playwright({}),
-      +                 instances: [{ browser: 'chromium' }],
+      +           projects: [
+      +             'packages/*',
+      +             {
+      +               extends: true,
+      +               plugins: [
+      +                 // The plugin will run tests for the stories defined in your Storybook config
+      +                 // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +                 storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
+      +               ],
+      +               test: {
+      +                 name: 'storybook',
+      +                 browser: {
+      +                   enabled: true,
+      +                   headless: true,
+      +                   provider: playwright({}),
+      +                   instances: [{ browser: 'chromium' }],
+      +                 },
       +               },
-      +             },
-      +           }]
+      +             }
+      +           ]
       + 
                 },
               })
@@ -145,23 +148,26 @@ describe('updateConfigFile', () => {
         
       -           projects: ['packages/*']
       - 
-      +           projects: ['packages/*', {
-      +             extends: true,
-      +             plugins: [
-      +               // The plugin will run tests for the stories defined in your Storybook config
-      +               // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +               storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
-      +             ],
-      +             test: {
-      +               name: 'storybook',
-      +               browser: {
-      +                 enabled: true,
-      +                 headless: true,
-      +                 provider: playwright({}),
-      +                 instances: [{ browser: 'chromium' }],
+      +           projects: [
+      +             'packages/*',
+      +             {
+      +               extends: true,
+      +               plugins: [
+      +                 // The plugin will run tests for the stories defined in your Storybook config
+      +                 // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +                 storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
+      +               ],
+      +               test: {
+      +                 name: 'storybook',
+      +                 browser: {
+      +                   enabled: true,
+      +                   headless: true,
+      +                   provider: playwright({}),
+      +                   instances: [{ browser: 'chromium' }],
+      +                 },
       +               },
-      +             },
-      +           }]
+      +             }
+      +           ]
       + 
                 },
               }
@@ -608,23 +614,27 @@ b'],
         
       -           projects: ['packages/*', {some: 'config'}]
       - 
-      +           projects: ['packages/*', {some: 'config'}, {
-      +             extends: true,
-      +             plugins: [
-      +               // The plugin will run tests for the stories defined in your Storybook config
-      +               // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      +               storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
-      +             ],
-      +             test: {
-      +               name: 'storybook',
-      +               browser: {
-      +                 enabled: true,
-      +                 headless: true,
-      +                 provider: playwright({}),
-      +                 instances: [{ browser: 'chromium' }],
+      +           projects: [
+      +             'packages/*',
+      +             {some: 'config'},
+      +             {
+      +               extends: true,
+      +               plugins: [
+      +                 // The plugin will run tests for the stories defined in your Storybook config
+      +                 // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +                 storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') }),
+      +               ],
+      +               test: {
+      +                 name: 'storybook',
+      +                 browser: {
+      +                   enabled: true,
+      +                   headless: true,
+      +                   provider: playwright({}),
+      +                   instances: [{ browser: 'chromium' }],
+      +                 },
       +               },
-      +             },
-      +           }]
+      +             }
+      +           ]
       + 
                 }
               })

From 311cf3ebe550d7cbbcd36b59d0dd72091535bcd5 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 12:45:17 +0200
Subject: [PATCH 275/326] feat(csf-tools): create a missing parent after a
 spread by carrying its member forward

`set(['args', 'a'], 1)` on `{ ...Base }` was refused, as `args: { a: 1 }`
after the spread would hide `Base.args` entirely. `appendValueToArray`
on `{ ...shared }` went the other way and wrote `addons: ['x']`, which
hides `shared.addons`; the msw codemod port hit that.

A missing parent created after spreads now carries their member
forward at every level it creates: `args: { ...Base.args, a: 1 }`, and
two levels deep
`parameters: { ...Base.parameters, docs: { ...Base.parameters?.docs, x: 1 } }`.
Of several spreads the last one with the member replaces the others, so
they are read after `??` rather than merged:
`args: { ...(Two.args ?? One.args), a: 1 }`. `appendValueToArray` and
`appendNodeToArray` create a missing array the same way,
`addons: [...(shared.addons ?? []), 'x']`, as an array spread of
`undefined` throws.

The spread's own member is read with `.`: a story that spreads a value
that is not an object is broken already, and `?.` there is noise that
strict lint rules flag. A member below it is read with `?.`, as it may
be missing. For a spread of a local constant object literal the members
are known: one it has is read with `.`, and one it lacks is left out,
which also keeps TypeScript from rejecting a member the literal's type
does not have. A type assertion on the spread is kept.

Only a spread of an identifier or a member chain is carried, as reading
it again cannot change behaviour. After a spread of a call or any other
expression, or after a computed key, creating a parent or an array is
still refused, and so are changing and removing a field a later spread
could override. `set` of the field itself still overrides what the
spreads provide.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/ConfigFile.test.ts    |  48 ++++
 code/core/src/csf-tools/ConfigFile.ts         |   3 +-
 code/core/src/csf-tools/CsfObject.test.ts     | 101 +++++++-
 code/core/src/csf-tools/CsfObject.ts          | 241 +++++++++++++++---
 code/core/src/csf-tools/README.md             |   2 +-
 .../src/automigrate/pipeline.test.ts          |   2 +-
 6 files changed, 360 insertions(+), 37 deletions(-)

diff --git a/code/core/src/csf-tools/ConfigFile.test.ts b/code/core/src/csf-tools/ConfigFile.test.ts
index 8451fadfab60..a50daec80668 100644
--- a/code/core/src/csf-tools/ConfigFile.test.ts
+++ b/code/core/src/csf-tools/ConfigFile.test.ts
@@ -798,6 +798,54 @@ describe('ConfigFile', () => {
       expect(printConfig(config).code).toBe(`export default { addons: 5 };`);
     });
 
+    it.each([
+      [
+        'a local object',
+        "const shared = { addons: ['a'] };\nexport default { ...shared };",
+        ['addons'],
+        "export default { ...shared, addons: [...(shared.addons ?? []), 'x'] };",
+      ],
+      [
+        'several imports, the last one first',
+        "import a from './a';\nimport b from './b';\nexport default { ...a, ...b };",
+        ['addons'],
+        "export default { ...a, ...b, addons: [...(b.addons ?? a.addons ?? []), 'x'] };",
+      ],
+      [
+        'an import, through a missing parent',
+        "import shared from './shared';\nexport default { ...shared };",
+        ['framework', 'addons'],
+        "export default { ...shared, framework: { ...shared.framework, addons: [...(shared.framework?.addons ?? []), 'x'] } };",
+      ],
+    ])(
+      'creates a missing array after a spread of %s, carrying its elements forward',
+      (_case, code, path, line) => {
+        const viaValue = loadConfig(code).parse();
+        expect(viaValue.appendValueToArray(path, 'x')).toEqual({ ok: true, changed: true });
+        expect(printConfig(viaValue).code.split('\n').at(-1)).toBe(line);
+
+        const viaNode = loadConfig(code).parse();
+        expect(viaNode.appendNodeToArray(path, parseExpression("'x'"))).toEqual({
+          ok: true,
+          changed: true,
+        });
+        expect(printConfig(viaNode).code).toBe(printConfig(viaValue).code);
+      }
+    );
+
+    it.each([
+      ['a spread of a call', 'export default { ...getShared() };', 'spread-field'],
+      ['a computed key, which may name it', 'export default { [key]: [] };', 'dynamic-key'],
+    ])('rejects creating an array after %s', (_case, source, code) => {
+      const config = loadConfig(source).parse();
+
+      expect(config.appendValueToArray(['addons'], 'x')).toMatchObject({
+        ok: false,
+        diagnostic: { code },
+      });
+      expect(printConfig(config).code).toBe(source);
+    });
+
     it('reports a change like the other mutations', () => {
       const config = loadConfig(`export default { addons: [] };`).parse();
 
diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index db752903040c..5235eb945f53 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -15,6 +15,7 @@ import {
   type CsfObject,
   type CsfObjectHost,
   type CsfValue,
+  createArray,
   createCsfObject,
   literalRoot,
 } from './CsfObject.ts';
@@ -834,7 +835,7 @@ export class ConfigFile implements CsfObject {
     const current = this.getFieldNode(path);
     const source = placeableTextOf(node);
     if (!current) {
-      return this.set(path, parseExpression(`[${source}]`));
+      return this._mutate((object) => createArray(object, path, [source]));
     }
     if (current.type !== 'ArrayExpression') {
       return this._notAnArray(path, current);
diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index 91cbbae3999b..3e96314feaf0 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -689,9 +689,102 @@ describe('CsfObject', () => {
   });
 
   it.each([
-    ['creating a parent a spread could provide', '{ ...Primary }', ['args', 'label']],
-    ['changing a field a later spread could shadow', "{ label: 'a', ...base }", ['label']],
-  ])('rejects %s', (_case, object, path) => {
+    [
+      'a spread of a local object with the field',
+      'const Base = { args: { b: 2 } };\nexport const A = { ...Base };',
+      ['args', 'a'],
+      "export const A = { ...Base, args: { ...Base.args, a: 'x' } };",
+    ],
+    [
+      'a spread of a local object without the field',
+      'const Base = { title: "B" };\nexport const A = { ...Base };',
+      ['args', 'a'],
+      "export const A = { ...Base, args: { a: 'x' } };",
+    ],
+    [
+      'a spread of a local object, two parents deep',
+      'const Base = { parameters: { docs: { y: 1 } } };\nexport const A = { ...Base };',
+      ['parameters', 'docs', 'a'],
+      "export const A = { ...Base, parameters: { ...Base.parameters, docs: { ...Base.parameters.docs, a: 'x' } } };",
+    ],
+    [
+      'a spread of an import, two parents deep',
+      "import { Base } from './Base.stories';\nexport const A = { ...Base };",
+      ['parameters', 'my-addon', 'a'],
+      "export const A = { ...Base, parameters: { ...Base.parameters, 'my-addon': { ...Base.parameters?.['my-addon'], a: 'x' } } };",
+    ],
+    [
+      'several spreads, of which the last with the field replaces the others',
+      "import { One, Two } from './stories';\nexport const A = { ...One, title: 'A', ...Two };",
+      ['args', 'a'],
+      "export const A = { ...One, title: 'A', ...Two, args: { ...(Two.args ?? One.args), a: 'x' } };",
+    ],
+    [
+      'a spread of a member chain',
+      "import * as stories from './Base.stories';\nexport const A = { ...stories.Base };",
+      ['args', 'a'],
+      "export const A = { ...stories.Base, args: { ...stories.Base.args, a: 'x' } };",
+    ],
+    [
+      'a spread with a type assertion',
+      "import { Base } from './Base.stories';\nexport const A = { ...(Base as Story) };",
+      ['args', 'a'],
+      "export const A = { ...(Base as Story), args: { ...(Base as Story).args, a: 'x' } };",
+    ],
+    [
+      'a spread inside a nested object',
+      "import { base } from './base';\nexport const A = { args: { ...base } };",
+      ['args', 'nested', 'a'],
+      "export const A = { args: { ...base, nested: { ...base.nested, a: 'x' } } };",
+    ],
+  ])(
+    'creates a missing parent after %s, carrying the spread member forward',
+    (_case, code, path, line) => {
+      const csf = parse(`export default { title: 'X' };\n${code}`);
+      const [story] = csf.objects({ meta: false });
+
+      expect(story.set(path, 'x')).toEqual({ ok: true, changed: true });
+      expect(printCsf(csf).code.split('\n').at(-1)).toBe(line);
+      expect(csf.mutationDiagnostics).toEqual([]);
+    }
+  );
+
+  it('lays a created parent after a spread out on lines for a multi-line value', () => {
+    const csf = parse(
+      "export default { title: 'X' };\nconst Base = { args: {} };\nexport const A = {\n  ...Base,\n};"
+    );
+    const [story] = csf.objects({ meta: false });
+
+    expect(story.set(['args', 'onClick'], parseExpression('() => {\n  x();\n}'))).toEqual({
+      ok: true,
+      changed: true,
+    });
+    expect(printCsf(csf).code).toContain(
+      'export const A = {\n  ...Base,\n  args: {\n    ...Base.args,\n    onClick: () => {\n      x();\n    },\n  },\n};'
+    );
+  });
+
+  it.each([
+    [
+      'creating a parent after a spread of a call',
+      '{ ...make() }',
+      ['args', 'label'],
+      'spread-field',
+    ],
+    ['creating a parent after a computed key', '{ [key]: {} }', ['args', 'label'], 'dynamic-key'],
+    [
+      'changing a field a later spread could shadow',
+      "{ label: 'a', ...base }",
+      ['label'],
+      'spread-field',
+    ],
+    [
+      'setting into a field a later spread could shadow',
+      '{ args: {}, ...base }',
+      ['args', 'a'],
+      'spread-field',
+    ],
+  ])('rejects %s', (_case, object, path, code) => {
     const source = `export default {};\nexport const A = ${object};`;
     const csf = parse(source);
     const [story] = csf.objects({ meta: false });
@@ -699,7 +792,7 @@ describe('CsfObject', () => {
     expect(story.set(path, 'x')).toMatchObject({
       ok: false,
       changed: false,
-      diagnostic: { code: 'spread-field' },
+      diagnostic: { code },
     });
     expect(printCsf(csf).code).toBe(source);
   });
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index f906e87bc806..b4401af1aaab 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -4,6 +4,7 @@ import {
   type Property,
   type SourceLocation,
   type Span,
+  isValidIdentifier,
   locationOf,
   parseExpression,
   staticKey,
@@ -18,6 +19,7 @@ import {
   prependMembers,
   printKey,
   printMembers,
+  printString,
   printValue,
   removeMembers,
   renameKey,
@@ -392,6 +394,119 @@ const lookupProperty = (
   return { ok: true, property: matches[0] };
 };
 
+// A spread a parent created after it carries forward, with the object literal of the local
+// constant it spreads, whose members are known.
+type CarriedSpread = { source: string; literal: E.ObjectExpression | undefined };
+
+// A reference reads the same value when it is read again.
+const isReference = (node: Node): boolean =>
+  node.type === 'Identifier' ||
+  (node.type === 'MemberExpression' &&
+    !node.computed &&
+    !node.optional &&
+    node.property.type === 'Identifier' &&
+    isReference(node.object));
+
+const carriedSpreads = (
+  editor: SourceEditor,
+  properties: readonly E.ObjectPropertyKind[]
+):
+  | { ok: true; spreads: CarriedSpread[] }
+  | { ok: false; code: CsfMutationDiagnosticCode; node: Node } => {
+  const spreads: CarriedSpread[] = [];
+  for (const member of properties) {
+    if (member.type !== 'SpreadElement') {
+      if (staticKey(member) === undefined) {
+        return { ok: false, code: 'dynamic-key', node: member };
+      }
+      continue;
+    }
+    const reference = unwrapExpression(member.argument);
+    if (!isReference(reference)) {
+      return { ok: false, code: 'spread-field', node: member };
+    }
+    const binding =
+      reference.type === 'Identifier' ? editor.scopes.bindingOf(reference) : undefined;
+    const init =
+      binding?.constant && binding.node.type === 'VariableDeclarator'
+        ? unwrapExpression(binding.node.init)
+        : undefined;
+    // A type assertion stays, so the carried member has the type the spread was given.
+    const source = editor.source(member.argument);
+    spreads.push({
+      source: reference === member.argument ? source : `(${source})`,
+      literal: init?.type === 'ObjectExpression' ? init : undefined,
+    });
+  }
+  return { ok: true, spreads };
+};
+
+const memberAccess = (key: string, optional: boolean, quote: string) =>
+  isValidIdentifier(key, false)
+    ? `${optional ? '?.' : '.'}${key}`
+    : `${optional ? '?.' : ''}[${printString(key, quote)}]`;
+
+// What an object literal is known to hold at `key`: no member, the value of one, or unknown.
+const literalMember = (literal: E.ObjectExpression, key: string) => {
+  const lookup = lookupProperty(literal.properties, key);
+  if (!lookup.ok || lookup.property?.method) {
+    return { kind: 'unknown' as const };
+  }
+  if (!lookup.property) {
+    return { kind: 'missing' as const };
+  }
+  const value = unwrapExpression(lookup.property.value);
+  return { kind: 'value' as const, literal: value.type === 'ObjectExpression' ? value : undefined };
+};
+
+// The value the spreads give the member at `keys`, or `undefined` when none gives it one. The last
+// spread with the first key replaces what earlier ones give it, which are only read when it may
+// lack it, after `??`. A member below the spread's own is read with `?.`, as it may be missing; one
+// a local literal lacks is left out.
+const carriedValue = (
+  spreads: readonly CarriedSpread[],
+  keys: readonly string[],
+  quote: string
+) => {
+  const [first, ...rest] = keys;
+  const candidates: { expression: string; literal: E.ObjectExpression | undefined }[] = [];
+  for (const spread of [...spreads].reverse()) {
+    const member = spread.literal ? literalMember(spread.literal, first) : undefined;
+    if (member?.kind === 'missing') {
+      continue;
+    }
+    candidates.push({
+      expression: `${spread.source}${memberAccess(first, false, quote)}`,
+      literal: member?.kind === 'value' ? member.literal : undefined,
+    });
+    if (member?.kind === 'value') {
+      break;
+    }
+  }
+  if (candidates.length === 0) {
+    return undefined;
+  }
+  if (candidates.length > 1) {
+    const either = candidates.map(({ expression }) => expression).join(' ?? ');
+    return rest.length === 0
+      ? { expression: either, alternatives: true }
+      : {
+          expression: `(${either})${rest.map((key) => memberAccess(key, true, quote)).join('')}`,
+          alternatives: false,
+        };
+  }
+  let [{ expression, literal }] = candidates;
+  for (const key of rest) {
+    const member = literal ? literalMember(literal, key) : undefined;
+    if (member?.kind === 'missing') {
+      return undefined;
+    }
+    expression += memberAccess(key, !literal, quote);
+    literal = member?.kind === 'value' ? member.literal : undefined;
+  }
+  return { expression, alternatives: false };
+};
+
 class CsfObjectEditor implements CsfObject {
   #changed = false;
 
@@ -523,22 +638,46 @@ class CsfObjectEditor implements CsfObject {
     if (inspected.ok === false) {
       return this.failure(inspected.code, path, inspected.node);
     }
+    if (inspected.missing !== undefined && inspected.missing < path.length - 1) {
+      const carried = carriedSpreads(this.editor, inspected.parent!.root.properties);
+      if (carried.ok === false) {
+        return this.failure(carried.code, path, carried.node);
+      }
+    }
     const { quote, indent } = this.editor;
     const text = printValue(value, quote, { indent, expand: 'multiline' });
     if (inspected.property && inspected.parent) {
       inspected.parent.root.replaceValue(inspected.property, text);
     } else {
-      this.insert(path, [
-        {
-          key: path.at(-1)!,
-          value: text,
-          text: `${printKey(path.at(-1)!, this.editor.quote)}: ${text}`,
-        },
-      ]);
+      const key = path.at(-1)!;
+      this.insert(path.slice(0, -1), {
+        members: [{ key, value: text, text: `${printKey(key, quote)}: ${text}` }],
+      });
     }
     return this.commit(path);
   }
 
+  // `set` of an array of `items` at a missing path, which carries the spreads before it forward
+  // like a missing parent, for appending to the array a spread may provide.
+  createArray(path: readonly string[], items: string[]): CsfMutationResult {
+    if (path.length === 0 || unsafePath(path)) {
+      return this.failure('unsupported-member', path, this.anchor());
+    }
+    const inspected = this.locate(path, 'set');
+    if (inspected.ok === false) {
+      return this.failure(inspected.code, path, inspected.node);
+    }
+    if (inspected.property) {
+      return this.failure('occupied-destination', path, inspected.property);
+    }
+    const carried = carriedSpreads(this.editor, inspected.parent!.root.properties);
+    if (carried.ok === false) {
+      return this.failure(carried.code, path, carried.node);
+    }
+    this.insert(path, { items });
+    return this.commit(path);
+  }
+
   transform(
     path: readonly string[],
     derive: (value: CsfExpression) => CsfExpression | undefined
@@ -635,7 +774,7 @@ class CsfObjectEditor implements CsfObject {
     const moved = source.parent.root.take(source.property, key);
     // Insert first: if that throws, nothing has been committed. The source is removed afterwards,
     // looked up again since the insertion moved its spans.
-    this.insert(to, [{ ...moved, key }]);
+    this.insert(to.slice(0, -1), { members: [{ ...moved, key }] });
     const inserted = this.commit(from);
     if (!inserted.ok) {
       return inserted;
@@ -849,12 +988,13 @@ class CsfObjectEditor implements CsfObject {
     return undefined;
   }
 
-  // `access` applies to the last field of the path; its parents are read.
+  // `access` applies to the last field of the path, and to its parents for a `set`, which creates
+  // missing ones; other parents are read.
   private locate(
     path: readonly string[],
     access: Access = 'read'
   ):
-    | { ok: true; parent?: ParentObject; property?: Property }
+    | { ok: true; parent?: ParentObject; property?: Property; missing?: number }
     | { ok: false; code: CsfMutationDiagnosticCode; node: Node } {
     let parent: ParentObject = { root: this.root() };
     let property: Property | undefined;
@@ -863,13 +1003,16 @@ class CsfObjectEditor implements CsfObject {
       const lookup = lookupProperty(
         parent.root.properties,
         name,
-        index === path.length - 1 ? access : 'read'
+        index === path.length - 1 || access === 'set' ? access : 'read'
       );
       if (lookup.ok === false) {
         return lookup;
       }
       property = lookup.property;
-      if (!property || index === path.length - 1) {
+      if (!property) {
+        return { ok: true, parent, missing: index };
+      }
+      if (index === path.length - 1) {
         return { ok: true, parent, property };
       }
       if (property.method) {
@@ -885,28 +1028,55 @@ class CsfObjectEditor implements CsfObject {
     return { ok: true, parent, property };
   }
 
-  // Parents may not exist yet; the caller has validated the path.
-  private insert(path: readonly string[], members: MemberInsert[]) {
+  // Writes `content` into the object at `containers`, creating the missing ones, which carry the
+  // spreads before them forward; the last one is an array for `items`. The caller has validated it.
+  private insert(
+    containers: readonly string[],
+    content: { members: MemberInsert[] } | { items: string[] }
+  ) {
     let parent = this.root();
     const { quote, indent } = this.editor;
-    for (const [index, name] of path.slice(0, -1).entries()) {
-      const lookup = lookupProperty(parent.properties, name);
+    const invalidated = () => new Error('CsfObject mutation preflight was invalidated');
+    for (const [index, name] of containers.entries()) {
+      const lookup = lookupProperty(parent.properties, name, 'set');
       if (lookup.ok === false) {
-        throw new Error('CsfObject mutation preflight was invalidated');
+        throw invalidated();
       }
       if (!lookup.property) {
-        const missing = path.slice(index, -1);
+        const carried = carriedSpreads(this.editor, parent.properties);
+        if (carried.ok === false) {
+          throw invalidated();
+        }
+        const missing = containers.slice(index);
+        const texts =
+          'members' in content ? content.members.map((member) => member.text) : content.items;
         // Comments travel with moved members; a line comment needs the object to span lines.
-        const multiline = members.some((member) => member.text.includes('\n'));
-        const block = (texts: string[]) =>
-          multiline ? printMembers(texts, indent) : `{ ${texts.join(', ')} }`;
-        const nested = missing
-          .slice(1)
-          .reverse()
-          .reduce(
-            (inner, key) => block([`${printKey(key, quote)}: ${inner}`]),
-            block(members.map((member) => member.text))
-          );
+        const multiline = texts.some((text) => text.includes('\n'));
+        const block = (members: string[]) =>
+          multiline ? printMembers(members, indent) : `{ ${members.join(', ')} }`;
+        const forward = (depth: number, array: boolean) => {
+          const value = carriedValue(carried.spreads, missing.slice(0, depth + 1), quote);
+          if (!value) {
+            return [];
+          }
+          const { expression, alternatives } = value;
+          return [
+            array
+              ? `...(${expression} ?? [])`
+              : `...${alternatives ? `(${expression})` : expression}`,
+          ];
+        };
+        const last = missing.length - 1;
+        let nested =
+          'members' in content
+            ? block([...forward(last, false), ...texts])
+            : `[${[...forward(last, true), ...texts].join(', ')}]`;
+        for (let depth = last - 1; depth >= 0; depth--) {
+          nested = block([
+            ...forward(depth, false),
+            `${printKey(missing[depth + 1], quote)}: ${nested}`,
+          ]);
+        }
         parent.append([{ key: name, value: nested, text: `${printKey(name, quote)}: ${nested}` }]);
         return;
       }
@@ -914,11 +1084,14 @@ class CsfObjectEditor implements CsfObject {
         ? undefined
         : resolveExpression(this.editor.scopes, lookup.property.value);
       if (value?.type !== 'ObjectExpression') {
-        throw new Error('CsfObject mutation preflight was invalidated');
+        throw invalidated();
       }
       parent = literalRoot(this.editor, value);
     }
-    parent.append(members);
+    if (!('members' in content)) {
+      throw invalidated();
+    }
+    parent.append(content.members);
   }
 
   private anchor(): Node {
@@ -985,6 +1158,14 @@ class CsfObjectEditor implements CsfObject {
   }
 }
 
+// Append to an array at a missing field, as `ConfigFile#appendNodeToArray` does.
+export const createArray = (object: CsfObject, path: readonly string[], items: string[]) => {
+  if (!(object instanceof CsfObjectEditor)) {
+    throw new Error('CsfObject: createArray needs an editor of createCsfObject');
+  }
+  return object.createArray(path, items);
+};
+
 export const createCsfObject = (
   target: CsfObjectTarget,
   host: CsfObjectHost,
diff --git a/code/core/src/csf-tools/README.md b/code/core/src/csf-tools/README.md
index a9de60d0c49b..ee1212a1d7a6 100644
--- a/code/core/src/csf-tools/README.md
+++ b/code/core/src/csf-tools/README.md
@@ -46,7 +46,7 @@ A story's top-level `Story.name = value` assignments (CSF2 annotations such as `
 Discovery and mutation are conservative: an object or a path whose shape cannot be proven is left untouched, and the reason is reported on `CsfFile.mutationDiagnostics` as a `CsfMutationDiagnostic`.
 Unproven shapes include story or meta bindings that are reassigned or aliased, a CSF factory configuration that is not an object literal owned by that single factory call, and target paths shadowed by a spread, a duplicate field, or a computed key.
 A story is also left untouched when it is written to other than by a top-level `Story.name = value`, such as `Story.args.label = 'x'`, `Story.parameters ||= {}` or `Story[name] = {}`. A story whose assignments are edited is left untouched when other code could see them: an alias, a spread, or a call or array that receives the story; calling or rendering the story is fine. Such a story without an object literal holds a function or a bound template; any other value could be shared with other stories.
-`set` can still add a field missing from an object with a spread or a computed key: the field is appended after them, so it overrides any value they provide. It cannot create a missing parent there, nor change a field that a later spread or computed key could override.
+`set` can still add a field missing from an object with a spread or a computed key: the field is appended after them, so it overrides any value they provide. A missing parent it creates there carries the spreads' member forward at every level it creates: `set(['args', 'a'], 1)` on `{ ...Base }` writes `args: { ...Base.args, a: 1 }`, and two levels deep `parameters: { ...Base.parameters, docs: { ...Base.parameters?.docs, x: 1 } }`. Of several spreads the last one with the member replaces the others, so they are read after `??`: `args: { ...(Two.args ?? One.args), a: 1 }`. `appendValueToArray` and `appendNodeToArray` create a missing array the same way, as `addons: [...(shared.addons ?? []), 'x']`. The spread's own member is read with `.`, as a story spreading a value that is not an object is broken already, and a member below it with `?.`, as it may be missing. For a spread of a local constant object literal the members are known: a member it has is read with `.`, and one it lacks is left out. A type assertion on the spread is kept. Only a spread of an identifier or a member chain such as `...stories.Base` is carried, as reading it again cannot change behaviour; after a spread of anything else, such as a call, or after a computed key, creating a parent or an array is refused. Changing or removing a field that a later spread or computed key could override is refused as well.
 
 `CsfFile.changed` is true once any mutation has been applied, which is the signal for whether the file needs to be written back.
 
diff --git a/code/lib/cli-storybook/src/automigrate/pipeline.test.ts b/code/lib/cli-storybook/src/automigrate/pipeline.test.ts
index 5ca375287aaf..8869a16cf337 100644
--- a/code/lib/cli-storybook/src/automigrate/pipeline.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/pipeline.test.ts
@@ -415,7 +415,7 @@ describe('edit hooks', () => {
   });
 
   it('fails a hook that leaves mutation diagnostics, with their line', async () => {
-    fs.writeFileSync(mainConfigPath, 'const base = {};\nexport default { ...base };');
+    fs.writeFileSync(mainConfigPath, 'const base = {};\nexport default { ...getBase() };');
 
     const outcomes = await runTransforms(project, [{ fixId: 'a', hooks: [setFeature('a')] }], {
       write: true,

From ab7ca3536328b7ba2147c33067a33cfdca9b174f Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 12:47:38 +0200
Subject: [PATCH 276/326] fix(csf-tools): end a CSF2 annotation statement like
 the file ends its statements

A story without an object literal gets a missing field as a new
`Story.name = value` statement. It always ended with `;`, also in a file
without semicolons, where the import helpers already follow
`editor.semicolons`. It now does too.

Without its `;`, a statement `insertStatementAfter` writes could be
continued by the code after it: `Primary.args = { a: 1 }` followed by
`[1].forEach(f)` indexes the object. It now ends with `;` when the code
after it starts like a continuation, as `prependStatement` already
checks.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../src/csf-tools/CsfObjectDiscovery.test.ts  | 37 +++++++++++++++++++
 code/core/src/csf-tools/CsfObjectDiscovery.ts |  3 +-
 code/core/src/csf-tools/estree/editor.ts      |  5 ++-
 3 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/code/core/src/csf-tools/CsfObjectDiscovery.test.ts b/code/core/src/csf-tools/CsfObjectDiscovery.test.ts
index b28641bd7e8f..7806acf2b353 100644
--- a/code/core/src/csf-tools/CsfObjectDiscovery.test.ts
+++ b/code/core/src/csf-tools/CsfObjectDiscovery.test.ts
@@ -277,6 +277,43 @@ Primary.beforeEach = mockHandlers;
 `);
     });
 
+    it('writes an annotation without a semicolon in a file without semicolons', () => {
+      const csf = parse(`export default { title: 'Example' }
+const Template = (args) => args
+export const Primary = Template.bind({})
+Primary.args = { label: 'Primary' }
+const after = 1
+`);
+      const [story] = csf.objects({ meta: false });
+
+      expect(story.set(['beforeEach'], parseExpression('mockHandlers'))).toEqual({
+        ok: true,
+        changed: true,
+      });
+      expect(printCsf(csf).code).toBe(`export default { title: 'Example' }
+const Template = (args) => args
+export const Primary = Template.bind({})
+Primary.args = { label: 'Primary' }
+Primary.beforeEach = mockHandlers
+const after = 1
+`);
+    });
+
+    it('ends an annotation with a semicolon before a statement that would continue it', () => {
+      const csf = parse(`export default { title: 'Example' }
+export function Primary() {}
+[1].forEach(f)
+`);
+      const [story] = csf.objects({ meta: false });
+
+      expect(story.set(['args', 'a'], 1)).toEqual({ ok: true, changed: true });
+      expect(printCsf(csf).code).toBe(`export default { title: 'Example' }
+export function Primary() {}
+Primary.args = { a: 1 };
+[1].forEach(f)
+`);
+    });
+
     it('adds the first annotation of a story after its declaration', () => {
       const csf = parse(`export default { title: 'Example' };
 const Local = () => null;
diff --git a/code/core/src/csf-tools/CsfObjectDiscovery.ts b/code/core/src/csf-tools/CsfObjectDiscovery.ts
index 35c746c87204..2a9ea351d151 100644
--- a/code/core/src/csf-tools/CsfObjectDiscovery.ts
+++ b/code/core/src/csf-tools/CsfObjectDiscovery.ts
@@ -398,8 +398,9 @@ const storyRoot = (
   const assign = (members: MemberInsert[], removed: ReadonlySet<Node> = new Set()) => {
     const after =
       assignments.findLast(({ statement }) => !removed.has(statement))?.statement ?? declaration;
+    const end = editor.semicolons ? ';' : '';
     for (const { key, value } of members) {
-      insertStatementAfter(editor, after, `${binding.localName}${accessor(key)} = ${value};`);
+      insertStatementAfter(editor, after, `${binding.localName}${accessor(key)} = ${value}${end}`);
     }
   };
   const statementsOf = (members: readonly Property[]) =>
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 4d25c838c0ff..5e3b2063edf2 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -1302,7 +1302,10 @@ export const insertStatementAfter = (editor: SourceEditor, statement: Span, text
   const lead = /^\s*/.exec(text)![0];
   const body = text.slice(lead.length);
   const separator = !endsStatement(before) && CONTINUES_STATEMENT.test(body) ? ';' : '';
-  const written = `\n${lead}${separator}${body}`;
+  // A statement without `;` ends before code that would continue it, such as `[1].map(f)`.
+  const terminator =
+    !endsStatement(body) && CONTINUES_STATEMENT.test(code.slice(next).trimStart()) ? ';' : '';
+  const written = `\n${lead}${separator}${body}${terminator}`;
   if (next === code.length || code[next] === '\n') {
     edits.appendLeft(next, written);
     return;

From 2a3f8624d0c883cc20a6923d67adca1192d6b8ad Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 12:50:46 +0200
Subject: [PATCH 277/326] fix(csf-tools): insert a statement to the right of
 the one it follows

`insertStatementAfter` wrote the new statement with `appendLeft` at the
end of the statement before it. Without a semicolon that end is also the
end of its last expression, so a wrapper written there afterwards closed
after the inserted statement: `const Primary = wrap(fn\nPrimary.args = {})`.
The parcel transformer port hit this.

By the rule of `wrapExpression`, text at an expression's end belongs to
the expression and a statement inserted after it does not, so the
statement now goes to the right of that end and a later wrapper stays
around the expression, in either order.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/editor.test.ts | 20 +++++++++++++++++++
 code/core/src/csf-tools/estree/editor.ts      |  4 +++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index 6400ef8c8973..5bf77be7fd72 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -18,6 +18,7 @@ import {
   arrayList,
   declaratorList,
   insertAfterImports,
+  insertStatementAfter,
   objectList,
   prependStatement,
   prependToList,
@@ -833,6 +834,25 @@ describe('prependStatement', () => {
   });
 });
 
+describe('insertStatementAfter', () => {
+  it.each([true, false])(
+    'keeps a wrapper of the last expression of a statement without a semicolon around it alone, inserting first: %s',
+    (insertFirst) => {
+      const editor = new SourceEditor('const Primary = fn\nfoo()\n');
+      const [declaration] = editor.program.body as E.VariableDeclaration[];
+      const insert = () => insertStatementAfter(editor, declaration, 'Primary.args = {}');
+      if (insertFirst) {
+        insert();
+      }
+      wrapExpression(editor, declaration.declarations[0].init!, 'wrap(', ')');
+      if (!insertFirst) {
+        insert();
+      }
+      expect(editor.toString()).toBe('const Primary = wrap(fn)\nPrimary.args = {}\nfoo()\n');
+    }
+  );
+});
+
 describe('insertAfterImports', () => {
   const insert = (code: string) => {
     const editor = new SourceEditor(code);
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 5e3b2063edf2..4aa66b4d34a9 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -1306,8 +1306,10 @@ export const insertStatementAfter = (editor: SourceEditor, statement: Span, text
   const terminator =
     !endsStatement(body) && CONTINUES_STATEMENT.test(code.slice(next).trimStart()) ? ';' : '';
   const written = `\n${lead}${separator}${body}${terminator}`;
+  // To the right of the statement's end, which can be its last expression's end: text written
+  // there later belongs to the expression and goes before the statement.
   if (next === code.length || code[next] === '\n') {
-    edits.appendLeft(next, written);
+    edits.appendRight(next, written);
     return;
   }
   edits.appendLeft(end, written);

From 9d7efe0ebf49422f4e81a17791bf48d9d48e9bf9 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 12:53:57 +0200
Subject: [PATCH 278/326] fix(csf-tools): keep statements inserted next to a
 statement a batch removes

`removeStatement` removes the statement's lines, and a removal clears
what other edits wrote inside its range. A statement that
`insertAfterImports` or `appendStatement` wrote after an import was
lost when the same batch removed the import, and in the other order it
landed as `\nconst b = 1;foo();`. The parcel transformer port hit this.

A statement inserted after one that ends its line is now written at the
start of the next line, to the left of that offset, so it is neither
part of the previous statement's last expression nor of edits that
start at the next statement, such as a wrapper of it or an overwrite.
Each batch remembers where, and `removeStatement` splits its removal
of whole lines around those points, so the statement survives in either
order, laid out as if it had been written in place of the removed one.

A statement that shares its line with the code after it is still
inserted at its end and can still be lost to a removal of that
statement in the same batch.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/editor.test.ts | 52 +++++++++++++++++++
 code/core/src/csf-tools/estree/editor.ts      | 37 +++++++++++--
 2 files changed, 85 insertions(+), 4 deletions(-)

diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index 5bf77be7fd72..f6288876006d 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -654,6 +654,35 @@ describe('replaceValue', () => {
 });
 
 describe('removeStatement', () => {
+  it.each([
+    ['inserted after imports', "import a from 'a';\nfoo();\n", 'const b = 1;\nfoo();\n'],
+    [
+      'inserted after imports, above a blank line',
+      "import a from 'a';\n\nfoo();\n",
+      'const b = 1;\nfoo();\n',
+    ],
+    ['appended', "import a from 'a';\n", 'const b = 1;\n'],
+  ])(
+    'keeps a statement %s next to a removed one in the same batch, in either order',
+    (how, code, output) => {
+      for (const removeFirst of [false, true]) {
+        const editor = new SourceEditor(code);
+        const add = () =>
+          how === 'appended'
+            ? appendStatement(editor, 'const b = 1;')
+            : insertAfterImports(editor, 'const b = 1;');
+        if (!removeFirst) {
+          add();
+        }
+        removeStatement(editor, editor.program.body[0]);
+        if (removeFirst) {
+          add();
+        }
+        expect(editor.toString()).toBe(output);
+      }
+    }
+  );
+
   it('removes the leading comments with the statement', () => {
     const editor = new SourceEditor(dedent`
       import a from 'a';
@@ -851,6 +880,29 @@ describe('insertStatementAfter', () => {
       expect(editor.toString()).toBe('const Primary = wrap(fn)\nPrimary.args = {}\nfoo()\n');
     }
   );
+
+  it.each([true, false])(
+    'keeps edits of the next statement to that statement, inserting first: %s',
+    (insertFirst) => {
+      const editor = new SourceEditor('const Primary = fn\nfoo()\nbar()\n');
+      const [declaration, foo, bar] = editor.program.body as E.ExpressionStatement[];
+      const insert = () => {
+        insertStatementAfter(editor, declaration, 'Primary.args = {}');
+        insertStatementAfter(editor, foo, 'x = 1');
+      };
+      if (insertFirst) {
+        insert();
+      }
+      wrapExpression(editor, foo.expression, 'wrap(', ')');
+      editor.edits.overwrite(bar.start, bar.end, 'baz()');
+      if (!insertFirst) {
+        insert();
+      }
+      expect(editor.toString()).toBe(
+        'const Primary = fn\nPrimary.args = {}\nwrap(foo())\nx = 1\nbaz()\n'
+      );
+    }
+  );
 });
 
 describe('insertAfterImports', () => {
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 4aa66b4d34a9..8fc883682eb8 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -1306,12 +1306,24 @@ export const insertStatementAfter = (editor: SourceEditor, statement: Span, text
   const terminator =
     !endsStatement(body) && CONTINUES_STATEMENT.test(code.slice(next).trimStart()) ? ';' : '';
   const written = `\n${lead}${separator}${body}${terminator}`;
-  // To the right of the statement's end, which can be its last expression's end: text written
-  // there later belongs to the expression and goes before the statement.
-  if (next === code.length || code[next] === '\n') {
+  // At the start of the next line: not at the statement's end, which can be its last expression's
+  // end, where later text belongs to the expression, and left of the next statement, where text
+  // belongs to that one. A removal of the statement keeps text at the start of the next line.
+  if (next === code.length) {
     edits.appendRight(next, written);
     return;
   }
+  if (code[next] === '\n') {
+    const at = next + 1;
+    edits.appendLeft(at, `${written.slice(1)}\n`);
+    let points = insertedAt.get(edits);
+    if (!points) {
+      points = new Set();
+      insertedAt.set(edits, points);
+    }
+    points.add(at);
+    return;
+  }
   edits.appendLeft(end, written);
   // The same line break for every statement inserted here.
   if (next > end) {
@@ -1370,6 +1382,23 @@ const isRemoved = (editor: SourceEditor, span: Span) => {
   }
 };
 
+// Where `insertStatementAfter` wrote statements at the start of a line, per batch of edits, which
+// a removal around them keeps.
+const insertedAt = new WeakMap<SourceEdits, Set<number>>();
+
+// `remove`, split around the statements inserted inside the range, as removing a range clears what
+// other edits wrote inside it.
+const removeKeeping = (editor: SourceEditor, start: number, end: number) => {
+  const inside = [...(insertedAt.get(editor.edits) ?? [])]
+    .filter((at) => start < at && at < end)
+    .sort((a, b) => a - b);
+  let from = start;
+  for (const at of [...inside, end]) {
+    editor.edits.remove(from, at);
+    from = at;
+  }
+};
+
 // The text `insertStatementAfter` added last after each statement, per batch of edits.
 const lastInserted = new WeakMap<SourceEdits, Map<Span, string>>();
 
@@ -1476,7 +1505,7 @@ export const removeStatement = (editor: SourceEditor, statement: Span, atTop?: b
       from = lineStart(code, from - 1);
     }
   }
-  editor.edits.remove(from, to);
+  removeKeeping(editor, from, to);
 };
 
 /** Remove top-level statements, each with a `;` that directly follows it. */

From 06f765459e04d2e63a0feabae4aea6eaa93c9429 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 12:49:52 +0200
Subject: [PATCH 279/326] test(docgen-harness): re-record the vue3 baselines
 for the oxc error wording

5f12533999e passes the story file name to loadCsf in the Vue docgen,
so the code frame in the "No component import found" error now starts
with the file path (rewritten to <sandbox>). The error name, position,
marked line and embedded source are unchanged; only the frame header
differs.

decorators, before:
  (12:0)
after:
  <sandbox>/src/stories/renderers/vue3_vue3-vite-default-ts/decorators.stories.ts: (12:0)

mount-in-play, before:
  (10:0)
after:
  <sandbox>/src/stories/renderers/vue3_vue3-vite-default-ts/mount-in-play.stories.ts: (10:0)

The first line of both messages is unchanged:
  No component file found for the component declared in meta.component.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../stories-renderers-vue3-vue3-vite-default-ts-decorators.json | 2 +-
 ...ories-renderers-vue3-vue3-vite-default-ts-mount-in-play.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/lib/docgen-harness/src/sandbox-baselines/__baselines__/vue3-vite-default-ts/stories-renderers-vue3-vue3-vite-default-ts-decorators.json b/code/lib/docgen-harness/src/sandbox-baselines/__baselines__/vue3-vite-default-ts/stories-renderers-vue3-vue3-vite-default-ts-decorators.json
index 5baac7e13bcd..40189a8cb81e 100644
--- a/code/lib/docgen-harness/src/sandbox-baselines/__baselines__/vue3-vite-default-ts/stories-renderers-vue3-vue3-vite-default-ts-decorators.json
+++ b/code/lib/docgen-harness/src/sandbox-baselines/__baselines__/vue3-vite-default-ts/stories-renderers-vue3-vue3-vite-default-ts-decorators.json
@@ -1,6 +1,6 @@
 {
   "error": {
-    "message": "No component file found for the component declared in meta.component.\n(12:0)\n> 12 | const meta = {\n     | ^\n\n./src/stories/renderers/vue3_vue3-vite-default-ts/decorators.stories.ts:\nimport type { DecoratorFunction } from 'storybook/internal/types';\n\nimport { global as globalThis } from '@storybook/global';\nimport type { Meta, StoryObj, VueRenderer } from '@storybook/vue3';\n\nimport { useArgs } from 'storybook/preview-api';\nimport { h } from 'vue';\nimport { computed } from 'vue';\n\nconst { Button, Pre } = (globalThis as any).__TEMPLATE_COMPONENTS__;\n\nconst meta = {\n  component: Button,\n} satisfies Meta<typeof Button>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst ComponentTemplateWrapper = () => ({\n  components: {\n    Pre,\n  },\n  template: `\n    <Pre text=\"decorator\" />\n    <story v-bind=\"$attrs\"/>\n  `,\n});\n\nconst SimpleTemplateWrapper = () => ({\n  template: `\n    <div style=\"border: 5px solid red;\">\n      <story/>\n    </div>\n    `,\n});\n\nconst VueWrapperWrapper: DecoratorFunction<VueRenderer> = (storyFn, context) => {\n  // Call the `storyFn` to receive a component that Vue can render\n  const story = storyFn();\n  // Vue 3 \"Functional\" component as decorator\n  return () => {\n    return h('div', { style: 'border: 5px solid blue' }, h(story, context.args));\n  };\n};\n\nconst DynamicWrapperWrapper: DecoratorFunction<VueRenderer> = (storyFn, { args }) => ({\n  template: `<div :style=\"{ borderWidth: level, borderColor: 'green', borderStyle: 'solid' }\"><story /></div>`,\n  computed: { level: () => `${args.level}px` },\n});\n\nconst getCaptionForLocale = (locale: string) => {\n  switch (locale) {\n    case 'es':\n      return 'Hola!';\n    case 'kr':\n      return '안녕하세요!';\n    case 'zh':\n      return '你好!';\n    case 'en':\n      return 'Hello!';\n    default:\n      return undefined;\n  }\n};\n\nconst updateArgsDecorator: DecoratorFunction<VueRenderer> = (story, { args }) => {\n  const [, updateArgs] = useArgs();\n  return {\n    components: { story },\n    setup() {\n      return {\n        args,\n        updateArgs,\n      };\n    },\n    template: `\n      <div>\n        <button @click=\"() => updateArgs({ label: Number(args.label) + 1 })\">Add 1</button>\n        <hr />\n        <story />\n      </div>\n    `,\n  };\n};\n\nconst localeDecorator: DecoratorFunction<VueRenderer> = (story, { globals }) => {\n  return {\n    components: { story },\n    setup() {\n      const ctxGreeting = computed(() => getCaptionForLocale(globals?.locale) || 'Hello!');\n\n      return {\n        ctxGreeting,\n        globals,\n      };\n    },\n    template: `\n      <div>\n        <p>Greeting: {{ctxGreeting}}</p>\n        <p>Locale: {{globals?.locale}}</p>\n        <story />\n      </div>\n    `,\n  };\n};\n\nexport const ComponentTemplate: Story = {\n  args: { label: 'With component' },\n  decorators: [ComponentTemplateWrapper],\n};\n\nexport const SimpleTemplate: Story = {\n  args: { label: 'With border' },\n  decorators: [SimpleTemplateWrapper],\n};\n\nexport const VueWrapper: Story = {\n  args: { label: 'With Vue wrapper' },\n  decorators: [VueWrapperWrapper],\n};\n\nexport const DynamicWrapper: Story = {\n  args: { label: 'With dynamic wrapper', primary: true },\n  argTypes: {\n    // Number type is detected, but we still want to constrain the range from 1-6\n    level: { control: { type: 'range', min: 1, max: 6 } },\n  },\n  decorators: [DynamicWrapperWrapper],\n};\n\nexport const MultipleWrappers = {\n  args: { label: 'With multiple wrappers' },\n  argTypes: {\n    // Number type is detected, but we still want to constrain the range from 1-6\n    level: { control: { type: 'range', min: 1, max: 6 } },\n  },\n  decorators: [\n    ComponentTemplateWrapper,\n    SimpleTemplateWrapper,\n    VueWrapperWrapper,\n    DynamicWrapperWrapper,\n  ],\n};\n\nexport const UpdateArgs = {\n  args: { label: '0' },\n  decorators: [updateArgsDecorator],\n};\n\nexport const ReactiveGlobalDecorator = {\n  args: { label: 'With reactive global decorator' },\n  decorators: [localeDecorator],\n};\n",
+    "message": "No component file found for the component declared in meta.component.\n<sandbox>/src/stories/renderers/vue3_vue3-vite-default-ts/decorators.stories.ts: (12:0)\n> 12 | const meta = {\n     | ^\n\n./src/stories/renderers/vue3_vue3-vite-default-ts/decorators.stories.ts:\nimport type { DecoratorFunction } from 'storybook/internal/types';\n\nimport { global as globalThis } from '@storybook/global';\nimport type { Meta, StoryObj, VueRenderer } from '@storybook/vue3';\n\nimport { useArgs } from 'storybook/preview-api';\nimport { h } from 'vue';\nimport { computed } from 'vue';\n\nconst { Button, Pre } = (globalThis as any).__TEMPLATE_COMPONENTS__;\n\nconst meta = {\n  component: Button,\n} satisfies Meta<typeof Button>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst ComponentTemplateWrapper = () => ({\n  components: {\n    Pre,\n  },\n  template: `\n    <Pre text=\"decorator\" />\n    <story v-bind=\"$attrs\"/>\n  `,\n});\n\nconst SimpleTemplateWrapper = () => ({\n  template: `\n    <div style=\"border: 5px solid red;\">\n      <story/>\n    </div>\n    `,\n});\n\nconst VueWrapperWrapper: DecoratorFunction<VueRenderer> = (storyFn, context) => {\n  // Call the `storyFn` to receive a component that Vue can render\n  const story = storyFn();\n  // Vue 3 \"Functional\" component as decorator\n  return () => {\n    return h('div', { style: 'border: 5px solid blue' }, h(story, context.args));\n  };\n};\n\nconst DynamicWrapperWrapper: DecoratorFunction<VueRenderer> = (storyFn, { args }) => ({\n  template: `<div :style=\"{ borderWidth: level, borderColor: 'green', borderStyle: 'solid' }\"><story /></div>`,\n  computed: { level: () => `${args.level}px` },\n});\n\nconst getCaptionForLocale = (locale: string) => {\n  switch (locale) {\n    case 'es':\n      return 'Hola!';\n    case 'kr':\n      return '안녕하세요!';\n    case 'zh':\n      return '你好!';\n    case 'en':\n      return 'Hello!';\n    default:\n      return undefined;\n  }\n};\n\nconst updateArgsDecorator: DecoratorFunction<VueRenderer> = (story, { args }) => {\n  const [, updateArgs] = useArgs();\n  return {\n    components: { story },\n    setup() {\n      return {\n        args,\n        updateArgs,\n      };\n    },\n    template: `\n      <div>\n        <button @click=\"() => updateArgs({ label: Number(args.label) + 1 })\">Add 1</button>\n        <hr />\n        <story />\n      </div>\n    `,\n  };\n};\n\nconst localeDecorator: DecoratorFunction<VueRenderer> = (story, { globals }) => {\n  return {\n    components: { story },\n    setup() {\n      const ctxGreeting = computed(() => getCaptionForLocale(globals?.locale) || 'Hello!');\n\n      return {\n        ctxGreeting,\n        globals,\n      };\n    },\n    template: `\n      <div>\n        <p>Greeting: {{ctxGreeting}}</p>\n        <p>Locale: {{globals?.locale}}</p>\n        <story />\n      </div>\n    `,\n  };\n};\n\nexport const ComponentTemplate: Story = {\n  args: { label: 'With component' },\n  decorators: [ComponentTemplateWrapper],\n};\n\nexport const SimpleTemplate: Story = {\n  args: { label: 'With border' },\n  decorators: [SimpleTemplateWrapper],\n};\n\nexport const VueWrapper: Story = {\n  args: { label: 'With Vue wrapper' },\n  decorators: [VueWrapperWrapper],\n};\n\nexport const DynamicWrapper: Story = {\n  args: { label: 'With dynamic wrapper', primary: true },\n  argTypes: {\n    // Number type is detected, but we still want to constrain the range from 1-6\n    level: { control: { type: 'range', min: 1, max: 6 } },\n  },\n  decorators: [DynamicWrapperWrapper],\n};\n\nexport const MultipleWrappers = {\n  args: { label: 'With multiple wrappers' },\n  argTypes: {\n    // Number type is detected, but we still want to constrain the range from 1-6\n    level: { control: { type: 'range', min: 1, max: 6 } },\n  },\n  decorators: [\n    ComponentTemplateWrapper,\n    SimpleTemplateWrapper,\n    VueWrapperWrapper,\n    DynamicWrapperWrapper,\n  ],\n};\n\nexport const UpdateArgs = {\n  args: { label: '0' },\n  decorators: [updateArgsDecorator],\n};\n\nexport const ReactiveGlobalDecorator = {\n  args: { label: 'With reactive global decorator' },\n  decorators: [localeDecorator],\n};\n",
     "name": "No component import found"
   },
   "id": "stories-renderers-vue3-vue3-vite-default-ts-decorators",
diff --git a/code/lib/docgen-harness/src/sandbox-baselines/__baselines__/vue3-vite-default-ts/stories-renderers-vue3-vue3-vite-default-ts-mount-in-play.json b/code/lib/docgen-harness/src/sandbox-baselines/__baselines__/vue3-vite-default-ts/stories-renderers-vue3-vue3-vite-default-ts-mount-in-play.json
index 8b124278c677..8082b740c60a 100644
--- a/code/lib/docgen-harness/src/sandbox-baselines/__baselines__/vue3-vite-default-ts/stories-renderers-vue3-vue3-vite-default-ts-mount-in-play.json
+++ b/code/lib/docgen-harness/src/sandbox-baselines/__baselines__/vue3-vite-default-ts/stories-renderers-vue3-vue3-vite-default-ts-mount-in-play.json
@@ -1,6 +1,6 @@
 {
   "error": {
-    "message": "No component file found for the component declared in meta.component.\n(10:0)\n> 10 | export default {\n     | ^\n\n./src/stories/renderers/vue3_vue3-vite-default-ts/mount-in-play.stories.ts:\nimport type { StoryObj } from '@storybook/vue3';\n\nimport { defineComponent } from 'vue';\n\nconst Button = defineComponent({\n  template: '<button :disabled=\"disabled\">{{label}}</button>',\n  props: ['disabled', 'label'],\n});\n\nexport default {\n  component: Button,\n};\n\nexport const Basic: StoryObj<typeof Button> = {\n  args: {\n    disabled: true,\n  },\n  async play({ mount, args }) {\n    await mount(Button, { props: { ...args, label: 'set in play' } });\n  },\n};\n",
+    "message": "No component file found for the component declared in meta.component.\n<sandbox>/src/stories/renderers/vue3_vue3-vite-default-ts/mount-in-play.stories.ts: (10:0)\n> 10 | export default {\n     | ^\n\n./src/stories/renderers/vue3_vue3-vite-default-ts/mount-in-play.stories.ts:\nimport type { StoryObj } from '@storybook/vue3';\n\nimport { defineComponent } from 'vue';\n\nconst Button = defineComponent({\n  template: '<button :disabled=\"disabled\">{{label}}</button>',\n  props: ['disabled', 'label'],\n});\n\nexport default {\n  component: Button,\n};\n\nexport const Basic: StoryObj<typeof Button> = {\n  args: {\n    disabled: true,\n  },\n  async play({ mount, args }) {\n    await mount(Button, { props: { ...args, label: 'set in play' } });\n  },\n};\n",
     "name": "No component import found"
   },
   "id": "stories-renderers-vue3-vue3-vite-default-ts-mount-in-play",

From 60fb08d2e4610ff287ad7663a551ee698d0b2787 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 13:05:55 +0200
Subject: [PATCH 280/326] ci: skip the rsbuild and solid sandboxes until their
 Storybook 11 releases

The published storybook-builder-rsbuild imports `babelParser` from
`storybook/internal/mocking-utils`, which Storybook 11 removed, so the
four rsbuild sandboxes cannot be created. They leave the CI cadences
until https://github.com/rstackjs/storybook-rsbuild/pull/603 is released.

The published storybook-solidjs-vite imports `storybook/internal/babel`,
which Storybook 11 removed, so its built Storybook renders no stories.
Creating and building the sandbox still pass, so only its chromatic job
is skipped until https://github.com/solidjs-community/storybook/pull/76
is released.

The generated NX sandbox projects are regenerated to drop the rsbuild
CI tags.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../cli-storybook/src/sandbox-templates.ts    | 28 +++++++++++++++----
 .../html-rsbuild-default-ts/project.json      |  2 +-
 .../lit-rsbuild-default-ts/project.json       |  2 +-
 .../react-rsbuild-default-ts/project.json     |  2 +-
 .../vue3-rsbuild-default-ts/project.json      |  2 +-
 5 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts
index 3cfb6385615f..dd28a803cf96 100644
--- a/code/lib/cli-storybook/src/sandbox-templates.ts
+++ b/code/lib/cli-storybook/src/sandbox-templates.ts
@@ -428,7 +428,13 @@ export const baseTemplates = {
       renderer: 'storybook-solidjs-vite',
       builder: '@storybook/builder-vite',
     },
-    skipTasks: ['e2e-tests', 'e2e-tests-dev', 'bench', 'vitest-integration'],
+    // `chromatic` is skipped: the published storybook-solidjs-vite imports
+    // `storybook/internal/babel`, which Storybook 11 removed, so its preset fails to load and
+    // the built Storybook renders no stories ("Expected your framework's preset to export a
+    // `renderToCanvas` field"). Creating and building the sandbox still pass.
+    // Fix: https://github.com/solidjs-community/storybook/pull/76
+    // Re-enable once storybook-solidjs-vite releases a version that works with Storybook 11.
+    skipTasks: ['e2e-tests', 'e2e-tests-dev', 'bench', 'vitest-integration', 'chromatic'],
   },
   'tanstack-react-router/default-ts': {
     name: 'TanStack React Router Latest (Vite | TypeScript)',
@@ -1065,7 +1071,11 @@ export const normal: TemplateKey[] = [
   'bench/react-vite-default-ts-test-build',
   'bench/react-webpack-18-ts-test-build',
   // 'ember/default-js',
-  'react-rsbuild/default-ts',
+  // Disabled in CI: the published storybook-builder-rsbuild imports `babelParser` from
+  // `storybook/internal/mocking-utils`, which Storybook 11 removed, so the sandbox cannot be
+  // created. Fix: https://github.com/rstackjs/storybook-rsbuild/pull/603
+  // Re-enable once storybook-builder-rsbuild releases a version that works with Storybook 11.
+  // 'react-rsbuild/default-ts',
   'tanstack-react-router/default-ts',
   'tanstack-react-start/default-ts',
 ];
@@ -1078,7 +1088,11 @@ export const merged: TemplateKey[] = [
   'preact-vite/default-ts',
   'html-vite/default-ts',
   'solid-vite/default-ts',
-  'vue3-rsbuild/default-ts',
+  // Disabled in CI: the published storybook-builder-rsbuild imports `babelParser` from
+  // `storybook/internal/mocking-utils`, which Storybook 11 removed, so the sandbox cannot be
+  // created. Fix: https://github.com/rstackjs/storybook-rsbuild/pull/603
+  // Re-enable once storybook-builder-rsbuild releases a version that works with Storybook 11.
+  // 'vue3-rsbuild/default-ts',
 ];
 
 export const daily: TemplateKey[] = [
@@ -1097,8 +1111,12 @@ export const daily: TemplateKey[] = [
   'html-vite/default-js',
   'internal/react18-webpack-babel',
   'react-native-web-vite/expo-ts',
-  'lit-rsbuild/default-ts',
-  'html-rsbuild/default-ts',
+  // Disabled in CI: the published storybook-builder-rsbuild imports `babelParser` from
+  // `storybook/internal/mocking-utils`, which Storybook 11 removed, so the sandbox cannot be
+  // created. Fix: https://github.com/rstackjs/storybook-rsbuild/pull/603
+  // Re-enable once storybook-builder-rsbuild releases a version that works with Storybook 11.
+  // 'lit-rsbuild/default-ts',
+  // 'html-rsbuild/default-ts',
   // 'react-native-web-vite/rn-cli-ts',
 ];
 
diff --git a/code/sandbox/html-rsbuild-default-ts/project.json b/code/sandbox/html-rsbuild-default-ts/project.json
index 1bfb15b53405..da752a3dc657 100644
--- a/code/sandbox/html-rsbuild-default-ts/project.json
+++ b/code/sandbox/html-rsbuild-default-ts/project.json
@@ -25,5 +25,5 @@
     "chromatic": {},
     "serve": {}
   },
-  "tags": ["ci:daily"]
+  "tags": []
 }
diff --git a/code/sandbox/lit-rsbuild-default-ts/project.json b/code/sandbox/lit-rsbuild-default-ts/project.json
index 938f59915da5..a82177865a87 100644
--- a/code/sandbox/lit-rsbuild-default-ts/project.json
+++ b/code/sandbox/lit-rsbuild-default-ts/project.json
@@ -25,5 +25,5 @@
     "chromatic": {},
     "serve": {}
   },
-  "tags": ["ci:daily"]
+  "tags": []
 }
diff --git a/code/sandbox/react-rsbuild-default-ts/project.json b/code/sandbox/react-rsbuild-default-ts/project.json
index 7416fea10b04..57cfc17758bf 100644
--- a/code/sandbox/react-rsbuild-default-ts/project.json
+++ b/code/sandbox/react-rsbuild-default-ts/project.json
@@ -25,5 +25,5 @@
     "chromatic": {},
     "serve": {}
   },
-  "tags": ["ci:normal", "ci:merged", "ci:daily"]
+  "tags": []
 }
diff --git a/code/sandbox/vue3-rsbuild-default-ts/project.json b/code/sandbox/vue3-rsbuild-default-ts/project.json
index 980f4e6bf4ca..1a4f0c69dc22 100644
--- a/code/sandbox/vue3-rsbuild-default-ts/project.json
+++ b/code/sandbox/vue3-rsbuild-default-ts/project.json
@@ -25,5 +25,5 @@
     "chromatic": {},
     "serve": {}
   },
-  "tags": ["ci:merged", "ci:daily"]
+  "tags": []
 }

From 7d8cb61338f58108a9a76647cfe36fde1c00b3a0 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <dev@valentinpalkovic.dev>
Date: Tue, 20 Oct 2026 13:39:22 +0200
Subject: [PATCH 281/326] fix(core): preapprove chromatic alongside
 @chromatic-com/storybook

@chromatic-com/storybook is exempt from the release-age gate, so Yarn
picks its newest release, but its chromatic dependency is not. When
that release raises the chromatic range past every version older than
the gate (5.6.0 requires ^18.12.1), the install fails with YN0016.
---
 code/core/src/common/js-package-manager/BUNProxy.test.ts   | 3 ++-
 code/core/src/common/js-package-manager/BUNProxy.ts        | 2 +-
 code/core/src/common/js-package-manager/PNPMProxy.test.ts  | 2 ++
 code/core/src/common/js-package-manager/PNPMProxy.ts       | 2 +-
 code/core/src/common/js-package-manager/Yarn2Proxy.test.ts | 4 +++-
 code/core/src/common/js-package-manager/Yarn2Proxy.ts      | 2 +-
 code/core/src/common/js-package-manager/util.test.ts       | 4 +++-
 code/core/src/common/js-package-manager/util.ts            | 1 +
 8 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/code/core/src/common/js-package-manager/BUNProxy.test.ts b/code/core/src/common/js-package-manager/BUNProxy.test.ts
index a5c716b9c984..f26c84587277 100644
--- a/code/core/src/common/js-package-manager/BUNProxy.test.ts
+++ b/code/core/src/common/js-package-manager/BUNProxy.test.ts
@@ -178,7 +178,7 @@ describe('BUN Proxy', () => {
         [
           '[install]',
           'minimumReleaseAge = 3600',
-          'minimumReleaseAgeExcludes = ["storybook", "@storybook/*", "eslint-plugin-storybook", "@chromatic-com/storybook"]',
+          'minimumReleaseAgeExcludes = ["storybook", "@storybook/*", "eslint-plugin-storybook", "@chromatic-com/storybook", "chromatic"]',
           '',
         ].join('\n')
       );
@@ -225,6 +225,7 @@ describe('BUN Proxy', () => {
             '  "@storybook/*",',
             '  "eslint-plugin-storybook",',
             '  "@chromatic-com/storybook",',
+            '  "chromatic",',
             ']',
             '[test]',
             'coverageThreshold = 0.9',
diff --git a/code/core/src/common/js-package-manager/BUNProxy.ts b/code/core/src/common/js-package-manager/BUNProxy.ts
index a5a86233689c..8311082103b9 100644
--- a/code/core/src/common/js-package-manager/BUNProxy.ts
+++ b/code/core/src/common/js-package-manager/BUNProxy.ts
@@ -302,7 +302,7 @@ export class BUNProxy extends JsPackageManager {
         dedent`
           bun minimumReleaseAge would block storybook@${storybookVersion} from being installed because it was released within the configured minimumReleaseAge window, so Storybook updated minimumReleaseAgeExcludes for this project automatically.
 
-          Added patterns: storybook, @storybook/*, eslint-plugin-storybook, @chromatic-com/storybook
+          Added patterns: ${STORYBOOK_PACKAGE_PATTERNS.join(', ')}
 
           Read more:
           - https://bun.com/docs/pm/cli/install#minimum-release-age
diff --git a/code/core/src/common/js-package-manager/PNPMProxy.test.ts b/code/core/src/common/js-package-manager/PNPMProxy.test.ts
index 1902b7b424b0..d780fc48ec24 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.test.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.test.ts
@@ -50,6 +50,7 @@ const expectedMinimumReleaseAgeExcludePackages = [
   '@storybook/*',
   'eslint-plugin-storybook',
   '@chromatic-com/storybook',
+  'chromatic',
 ];
 
 describe('PNPM Proxy', () => {
@@ -1015,6 +1016,7 @@ describe('PNPM Proxy', () => {
             '@storybook/*',
             'eslint-plugin-storybook',
             '@chromatic-com/storybook',
+            'chromatic',
           ]),
         } as any);
 
diff --git a/code/core/src/common/js-package-manager/PNPMProxy.ts b/code/core/src/common/js-package-manager/PNPMProxy.ts
index b50b20906aa0..12ac40792e8d 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.ts
@@ -544,7 +544,7 @@ export class PNPMProxy extends JsPackageManager {
         dedent`
           pnpm minimumReleaseAge would block storybook@${storybookVersion} from being installed because it was released within the configured minimumReleaseAge window, so Storybook updated minimumReleaseAgeExclude for this project automatically.
 
-          Added patterns: storybook, @storybook/*, eslint-plugin-storybook, @chromatic-com/storybook
+          Added patterns: ${STORYBOOK_PACKAGE_PATTERNS.join(', ')}
 
           Read more:
           - https://pnpm.io/settings#minimumreleaseage
diff --git a/code/core/src/common/js-package-manager/Yarn2Proxy.test.ts b/code/core/src/common/js-package-manager/Yarn2Proxy.test.ts
index 271d8410b868..ec80a6d0b57a 100644
--- a/code/core/src/common/js-package-manager/Yarn2Proxy.test.ts
+++ b/code/core/src/common/js-package-manager/Yarn2Proxy.test.ts
@@ -306,6 +306,7 @@ describe('Yarn 2 Proxy', () => {
               '@storybook/*',
               'eslint-plugin-storybook',
               '@chromatic-com/storybook',
+              'chromatic',
             ]),
           ],
         })
@@ -384,6 +385,7 @@ describe('Yarn 2 Proxy', () => {
               '@storybook/*',
               'eslint-plugin-storybook',
               '@chromatic-com/storybook',
+              'chromatic',
             ]),
           ],
         })
@@ -469,7 +471,7 @@ describe('Yarn 2 Proxy', () => {
         .mockResolvedValueOnce({ stdout: '1440\n' } as any)
         .mockResolvedValueOnce({
           stdout:
-            "[\n  'storybook',\n  '@storybook/*',\n  'eslint-plugin-storybook',\n  '@chromatic-com/storybook',\n]\n",
+            "[\n  'storybook',\n  '@storybook/*',\n  'eslint-plugin-storybook',\n  '@chromatic-com/storybook',\n  'chromatic',\n]\n",
         } as any);
 
       await expect(
diff --git a/code/core/src/common/js-package-manager/Yarn2Proxy.ts b/code/core/src/common/js-package-manager/Yarn2Proxy.ts
index 23d769bd0dd4..8f5d2f8fd493 100644
--- a/code/core/src/common/js-package-manager/Yarn2Proxy.ts
+++ b/code/core/src/common/js-package-manager/Yarn2Proxy.ts
@@ -288,7 +288,7 @@ export class Yarn2Proxy extends JsPackageManager {
         dedent`
           yarn npmMinimalAgeGate would block storybook@${storybookVersion} from being installed because it was released within the configured npmMinimalAgeGate window, so Storybook updated npmPreapprovedPackages for this project automatically.
 
-          Added patterns: storybook, @storybook/*, eslint-plugin-storybook, @chromatic-com/storybook
+          Added patterns: ${STORYBOOK_PACKAGE_PATTERNS.join(', ')}
 
           Read more:
           - https://yarnpkg.com/configuration/yarnrc#npmMinimalAgeGate
diff --git a/code/core/src/common/js-package-manager/util.test.ts b/code/core/src/common/js-package-manager/util.test.ts
index 9cdbf380222d..6bc5fade7a2b 100644
--- a/code/core/src/common/js-package-manager/util.test.ts
+++ b/code/core/src/common/js-package-manager/util.test.ts
@@ -105,10 +105,12 @@ describe('js package manager util', () => {
         '@storybook/*',
         'eslint-plugin-storybook',
         '@chromatic-com/storybook',
+        'chromatic',
       ])
     ).toBe(true);
     expect(hasStorybookMinimumAgeExclusions(['storybook', '@storybook/react-vite'])).toBe(false);
-    expect(hasStorybookMinimumAgeExclusions(['*storybook*'])).toBe(true);
+    expect(hasStorybookMinimumAgeExclusions(['*storybook*', 'chromatic'])).toBe(true);
+    expect(hasStorybookMinimumAgeExclusions(['*storybook*'])).toBe(false);
   });
 
   it('builds rerun guidance', () => {
diff --git a/code/core/src/common/js-package-manager/util.ts b/code/core/src/common/js-package-manager/util.ts
index 930245d14bb9..354990d3810e 100644
--- a/code/core/src/common/js-package-manager/util.ts
+++ b/code/core/src/common/js-package-manager/util.ts
@@ -10,6 +10,7 @@ export const STORYBOOK_PACKAGE_PATTERNS = [
   '@storybook/*',
   'eslint-plugin-storybook',
   '@chromatic-com/storybook',
+  'chromatic',
 ] as const;
 
 const escapePatternForRegex = (pattern: string) => pattern.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

From 60083c343d7601207e88adb8cec3a3815651f2f6 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 13:32:40 +0200
Subject: [PATCH 282/326] fix(csf-tools): keep a batch's list and statement
 bookkeeping across a rollback

A transaction snapshots the pending edits and puts a clone of them back
when it rolls back. Only the texts inserted after each statement were
copied to the clone; what earlier appends wrote to each list and where
statements were inserted at a line start were lost. An append to a list
that was appended to before the transaction then wrote over the first
one (`{ a: 1 b: 2  }`), and removing the statement an insertion
followed dropped the inserted statement.

The clone now gets copies of all three.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/editor.test.ts | 21 +++++++++++++++++++
 code/core/src/csf-tools/estree/editor.ts      |  2 ++
 2 files changed, 23 insertions(+)

diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index f6288876006d..8b8f152548f8 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -166,6 +166,27 @@ describe('commit', () => {
   });
 });
 
+describe('transaction', () => {
+  it('appends after the items an append before a rolled back transaction added', () => {
+    const editor = new SourceEditor('export default {};\n');
+    const object = () =>
+      (editor.program.body[0] as E.ExportDefaultDeclaration).declaration as E.ObjectExpression;
+    appendToList(editor, objectList(editor, object()), ['a: 1']);
+    editor.transaction(() => false);
+    appendToList(editor, objectList(editor, object()), ['b: 2']);
+    expect(editor.toString()).toBe('export default { a: 1, b: 2 };\n');
+  });
+
+  it('keeps a statement inserted before a rolled back transaction when its anchor is removed', () => {
+    const editor = new SourceEditor("import a from 'a';\n\nfoo();\n");
+    const [anchor] = editor.program.body;
+    insertStatementAfter(editor, anchor, 'const b = 1;');
+    editor.transaction(() => false);
+    removeStatement(editor, anchor);
+    expect(editor.toString()).toBe('const b = 1;\nfoo();\n');
+  });
+});
+
 describe('style', () => {
   it('quotes like most string literals, leaving JSX attributes out', () => {
     expect(new SourceEditor('import a from \'a\';\nconst x = <A b="1" c="2" />;').quote).toBe("'");
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 8fc883682eb8..4aecc15a3d01 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -254,6 +254,8 @@ export class SourceEditor {
     const committed = this._committed.length;
     const edits = this._edits.clone();
     lastInserted.set(edits, new Map(lastInserted.get(this._edits)));
+    appendedTo.set(edits, new Map(appendedTo.get(this._edits)));
+    insertedAt.set(edits, new Set(insertedAt.get(this._edits)));
     const appended = [...this._appendedWithoutBlankLine];
     const transaction = { refused: false, rollbacks: onRollback ? [onRollback] : [] };
     this._transaction = transaction;

From c8380f3cc4b6780103e0a6d69cdee59d5a0eaca1 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 13:33:38 +0200
Subject: [PATCH 283/326] refactor(csf-tools): keep the pending edits and what
 they wrote in one record

The list appends, the texts inserted after statements and the line
starts statements were inserted at lived in three WeakMaps keyed by the
pending edits, each created lazily, and a transaction had to remember to
copy every one of them next to the edits. They are now one `Batch` on
the editor that holds the edits too, which `commit` replaces and
`transaction` copies and restores as a whole.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/editor.ts | 89 ++++++++++++------------
 1 file changed, 44 insertions(+), 45 deletions(-)

diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 4aecc15a3d01..8fe92045653f 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -93,7 +93,8 @@ export class SourceEditor {
 
   _parents: Map<Node, Node | null> | undefined;
 
-  _edits: SourceEdits;
+  // The pending edits, with what they wrote that later edits of the same batch build on.
+  _batch: Batch;
 
   // The edits each earlier commit applied, oldest first. Their maps are only generated when one
   // is requested, so the output still maps to the code the editor was created with.
@@ -129,7 +130,7 @@ export class SourceEditor {
     this._onCommit = onCommit;
     this._originalCode = code;
     this._module = parsePrintable(code, fileName);
-    this._edits = new MagicString(this.code, { filename: fileName });
+    this._batch = newBatch(this.code, fileName);
   }
 
   get code() {
@@ -172,11 +173,11 @@ export class SourceEditor {
   }
 
   get edits() {
-    return this._edits;
+    return this._batch.edits;
   }
 
   get pending() {
-    return this._edits.hasChanged();
+    return this.edits.hasChanged();
   }
 
   source(node: Span) {
@@ -214,11 +215,11 @@ export class SourceEditor {
     if (!this.pending) {
       return false;
     }
-    let module = parsePrintable(this._edits.toString(), this.fileName);
+    let module = parsePrintable(this.edits.toString(), this.fileName);
     this._style ??= inferStyle(this._module);
-    this._committed.push(this._edits);
+    this._committed.push(this.edits);
     let appended = this._appendedWithoutBlankLine
-      .map((statement) => committedStatement(this._edits, module, statement))
+      .map((statement) => committedStatement(this.edits, module, statement))
       .filter((statement) => statement !== undefined);
     // The blank lines go in as edits of their own, over the code just parsed.
     const apart = appended.filter((statement) => setsApart(module, statement));
@@ -238,7 +239,7 @@ export class SourceEditor {
     this._module = module;
     this._scopes = undefined;
     this._parents = undefined;
-    this._edits = new MagicString(this.code, { filename: this.fileName });
+    this._batch = newBatch(this.code, this.fileName);
     this._onCommit?.();
     return true;
   }
@@ -252,10 +253,7 @@ export class SourceEditor {
   transaction(fn: () => boolean | void, onRollback?: () => void): boolean {
     const { _module, _style, _transaction: outer } = this;
     const committed = this._committed.length;
-    const edits = this._edits.clone();
-    lastInserted.set(edits, new Map(lastInserted.get(this._edits)));
-    appendedTo.set(edits, new Map(appendedTo.get(this._edits)));
-    insertedAt.set(edits, new Set(insertedAt.get(this._edits)));
+    const batch = copyBatch(this._batch);
     const appended = [...this._appendedWithoutBlankLine];
     const transaction = { refused: false, rollbacks: onRollback ? [onRollback] : [] };
     this._transaction = transaction;
@@ -277,7 +275,7 @@ export class SourceEditor {
         this._module = _module;
         this._style = _style;
         this._committed.length = committed;
-        this._edits = edits;
+        this._batch = batch;
         this._appendedWithoutBlankLine = appended;
         this._scopes = undefined;
         this._parents = undefined;
@@ -298,7 +296,7 @@ export class SourceEditor {
    */
   generateMap(options: { source?: string; inputSourceMap?: InputSourceMap } = {}): GeneratedMap {
     const source = options.source ?? this.fileName ?? '';
-    const chain = [this._edits, ...this._committed.slice().reverse()].map((edits) =>
+    const chain = [this.edits, ...this._committed.slice().reverse()].map((edits) =>
       edits.generateMap({ hires: true, includeContent: true, source: mapSource(this) })
     );
     const [current] = chain;
@@ -343,7 +341,7 @@ export class SourceEditor {
   }
 
   toString() {
-    return restoreLineEndings(this._edits.toString(), this._originalCode);
+    return restoreLineEndings(this.edits.toString(), this._originalCode);
   }
 
   /** Quote for generated strings: the one most string literals of the file use. */
@@ -367,6 +365,30 @@ export class SourceEditor {
 
 type Style = { quote: "'" | '"'; indent: string; semicolons: boolean };
 
+interface Batch {
+  edits: SourceEdits;
+  // What the appends to each list wrote, by the list's span.
+  lists: Map<string, Appended>;
+  // The text inserted last after each statement.
+  lastInsertedAfter: Map<Span, string>;
+  // The line starts statements were inserted at, which a removal around them keeps.
+  insertedAt: Set<number>;
+}
+
+const newBatch = (code: string, fileName: string | undefined): Batch => ({
+  edits: new MagicString(code, { filename: fileName }),
+  lists: new Map(),
+  lastInsertedAfter: new Map(),
+  insertedAt: new Set(),
+});
+
+const copyBatch = ({ edits, lists, lastInsertedAfter, insertedAt }: Batch): Batch => ({
+  edits: edits.clone(),
+  lists: new Map(lists),
+  lastInsertedAfter: new Map(lastInsertedAfter),
+  insertedAt: new Set(insertedAt),
+});
+
 // Statements and class fields that end with an optional `;`. A declaration in a `for` head has none;
 // an exported declaration ends with the `;` of its `export`.
 const endsWithOptionalSemicolon = (node: Node, parent: Node | null) => {
@@ -917,8 +939,6 @@ interface Appended {
   separator: string;
 }
 
-const appendedTo = new WeakMap<SourceEdits, Map<string, Appended>>();
-
 const insert = (edits: SourceEdits, { at, right }: Pick<Appended, 'at' | 'right'>, text: string) =>
   right ? edits.appendRight(at, text) : edits.appendLeft(at, text);
 
@@ -1074,11 +1094,7 @@ const appendAfter = (editor: SourceEditor, list: List, previous: Appended, texts
  */
 export const appendToList = (editor: SourceEditor, list: List, texts: string[]) => {
   editor.assertCurrent(list);
-  let lists = appendedTo.get(editor.edits);
-  if (!lists) {
-    lists = new Map();
-    appendedTo.set(editor.edits, lists);
-  }
+  const { lists } = editor._batch;
   const key = `${list.open}:${list.close}`;
   const previous = lists.get(key);
   lists.set(
@@ -1289,15 +1305,10 @@ const endsStatement = (text: string) => {
  * shares that line moves below the inserted statements.
  */
 export const insertStatementAfter = (editor: SourceEditor, statement: Span, text: string) => {
-  const { code, edits } = editor;
-  let inserted = lastInserted.get(edits);
-  if (!inserted) {
-    inserted = new Map();
-    lastInserted.set(edits, inserted);
-  }
+  const { code, edits, _batch: batch } = editor;
   // The new text follows the text inserted after the statement earlier in the batch, if any.
-  const before = inserted.get(statement) ?? editor.source(statement);
-  inserted.set(statement, text);
+  const before = batch.lastInsertedAfter.get(statement) ?? editor.source(statement);
+  batch.lastInsertedAfter.set(statement, text);
   const end = statementEnd(editor, statement);
   const next = end + /^[^\S\n]*/.exec(code.slice(end))![0].length;
   // The separator goes after the line breaks that lead the text.
@@ -1318,12 +1329,7 @@ export const insertStatementAfter = (editor: SourceEditor, statement: Span, text
   if (code[next] === '\n') {
     const at = next + 1;
     edits.appendLeft(at, `${written.slice(1)}\n`);
-    let points = insertedAt.get(edits);
-    if (!points) {
-      points = new Set();
-      insertedAt.set(edits, points);
-    }
-    points.add(at);
+    batch.insertedAt.add(at);
     return;
   }
   edits.appendLeft(end, written);
@@ -1384,14 +1390,10 @@ const isRemoved = (editor: SourceEditor, span: Span) => {
   }
 };
 
-// Where `insertStatementAfter` wrote statements at the start of a line, per batch of edits, which
-// a removal around them keeps.
-const insertedAt = new WeakMap<SourceEdits, Set<number>>();
-
 // `remove`, split around the statements inserted inside the range, as removing a range clears what
 // other edits wrote inside it.
 const removeKeeping = (editor: SourceEditor, start: number, end: number) => {
-  const inside = [...(insertedAt.get(editor.edits) ?? [])]
+  const inside = [...editor._batch.insertedAt]
     .filter((at) => start < at && at < end)
     .sort((a, b) => a - b);
   let from = start;
@@ -1401,9 +1403,6 @@ const removeKeeping = (editor: SourceEditor, start: number, end: number) => {
   }
 };
 
-// The text `insertStatementAfter` added last after each statement, per batch of edits.
-const lastInserted = new WeakMap<SourceEdits, Map<Span, string>>();
-
 /**
  * Insert a statement after the last statement that pending edits did not remove. A blank line
  * sets it apart when it or what it follows spans lines: that statement, or the text appended after
@@ -1418,7 +1417,7 @@ export const appendStatement = (editor: SourceEditor, text: string) => {
     return;
   }
   // The text inserted last may lead with the blank line that set it apart.
-  const before = lastInserted.get(editor.edits)?.get(last)?.trim() ?? editor.source(last);
+  const before = editor._batch.lastInsertedAfter.get(last)?.trim() ?? editor.source(last);
   const multiline = text.includes('\n') || before.includes('\n');
   if (!multiline) {
     editor._appendedWithoutBlankLine.push(text);

From 9c9213603cc14b3fdb19000db6e24e7deb5e4595 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 13:34:38 +0200
Subject: [PATCH 284/326] refactor(csf-tools): dedent a value's source with the
 editor's parse, like item texts

A value read from the file was dedented by `detachedText`, which parses
the text again to find its literals, while item texts were dedented by
`dedentSource` with the literals of the editor's parse. A value is code
of the same parse, so `valueSource` now uses that one too, through
`detachedSource`, and `functionFromMethod` returns the dedented function
itself. `detachedTextOf` stays for a node placed as a value, from this
parse or another, as `placeableTextOf` can wrap it in parentheses that
are not in the code.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/editor.ts | 37 ++++++++++++------------
 code/core/src/csf-tools/estree/values.ts | 10 +++----
 2 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 8fe92045653f..9bb6e0642395 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -830,23 +830,24 @@ export const reindent = (source: string, from: string, to: string) => {
   return literals ? reindentLines(text, from, to, literals) : text;
 };
 
-// `text`, the source of a node at `start` in `code`, indented as if the node's line had no indent.
-export const detachedText = (code: string, start: number, text: string) =>
-  reindent(text, lineIndent(code, start), '');
-
-// `placeableTextOf` as `detachedText`, for a node of `get`, `parseExpression` or a file.
-export const detachedTextOf = (node: Node) => {
-  const text = placeableTextOf(node);
-  return detachedText(moduleOf(node)!.code, node.start, text);
-};
-
-const dedentSource = (editor: SourceEditor, start: number, end: number, from: string) => {
+// The editor's code from `start` to `end`, its continuation lines without `indent`.
+const dedentSource = (editor: SourceEditor, start: number, end: number, indent: string) => {
   const text = editor.code.slice(start, end);
-  return from === '' || !text.includes('\n')
+  return indent === '' || !text.includes('\n')
     ? text
-    : reindentLines(text, from, '', literalSpans(editor.program, { start, end }));
+    : reindentLines(text, indent, '', literalSpans(editor.program, { start, end }));
+};
+
+// The source of a span of the editor's code as if the line it starts on had no indent.
+export const detachedSource = (editor: SourceEditor, span: Span) => {
+  editor.assertCurrent(span);
+  return dedentSource(editor, span.start, span.end, lineIndent(editor.code, span.start));
 };
 
+// `placeableTextOf` as `detachedSource`, for a node of `get`, `parseExpression` or any file.
+export const detachedTextOf = (node: Node) =>
+  reindent(placeableTextOf(node), lineIndent(moduleOf(node)!.code, node.start), '');
+
 // An item owns the comments after its separator when they end the line. Followed by code on that
 // line, they lead the next item instead.
 const trailingComments = (editor: SourceEditor, separatorEnd: number) => {
@@ -892,9 +893,7 @@ const itemTextWith = (editor: SourceEditor, list: List, index: number, print: ()
 export const itemText = (editor: SourceEditor, list: List, item: Span) => {
   editor.assertCurrent(list);
   editor.assertCurrent(item);
-  return itemTextWith(editor, list, list.items.indexOf(item), () =>
-    dedentSource(editor, item.start, item.end, lineIndent(editor.code, item.start))
-  );
+  return itemTextWith(editor, list, list.items.indexOf(item), () => detachedSource(editor, item));
 };
 
 export const memberText = (
@@ -1663,12 +1662,12 @@ export const renamedMemberText = (
   });
 };
 
-// Function expression source for a method, so reads and transforms of `play() {}` see a value.
-// `async *play(a) {}` becomes `async function* (a) {}`.
+// A method as the source of a function expression, as `detachedSource`, so reads and transforms
+// of `play() {}` see a value. `async *play(a) {}` becomes `async function* (a) {}`.
 export const functionFromMethod = (editor: SourceEditor, member: Property) => {
   const fn = member.value as E.Function;
   const range = keyRange(editor, member);
-  const rest = editor.code.slice(range.end, member.end);
+  const rest = dedentSource(editor, range.end, member.end, lineIndent(editor.code, member.start));
   return `${fn.async ? 'async ' : ''}function${fn.generator ? '*' : ''} ${rest.replace(/^\s*/, '')}`;
 };
 
diff --git a/code/core/src/csf-tools/estree/values.ts b/code/core/src/csf-tools/estree/values.ts
index 3668b1a379ab..68ac14c4c1d7 100644
--- a/code/core/src/csf-tools/estree/values.ts
+++ b/code/core/src/csf-tools/estree/values.ts
@@ -11,7 +11,7 @@ import {
   staticKey,
   unwrapExpression,
 } from './ast.ts';
-import { type SourceEditor, detachedText, detachedTextOf, functionFromMethod } from './editor.ts';
+import { type SourceEditor, detachedSource, detachedTextOf, functionFromMethod } from './editor.ts';
 import type { ScopeInfo } from './scope.ts';
 
 // Node types Babel produces that OXC's ESTree output has no equivalent for (`@babel/types`
@@ -49,16 +49,16 @@ const BABEL_ONLY_TYPES = new Set([
 export const isAstLike = (value: unknown): value is Node =>
   isNode(value) && (Object.hasOwn(visitorKeys, value.type) || BABEL_ONLY_TYPES.has(value.type));
 
-// A member's value as `detachedText`; methods become function expressions.
+// A member's value as `detachedSource`; methods become function expressions.
 export const valueSource = (editor: SourceEditor, member: Property) =>
   member.method || member.kind !== 'init'
-    ? detachedText(editor.code, member.start, functionFromMethod(editor, member))
-    : detachedText(editor.code, member.value.start, editor.source(member.value));
+    ? functionFromMethod(editor, member)
+    : detachedSource(editor, member.value);
 
 // `valueSource` ready to be placed as another value, as `placeableTextOf` prints it.
 export const placeableValueSource = (editor: SourceEditor, member: Property) =>
   member.method || member.kind !== 'init'
-    ? detachedText(editor.code, member.start, functionFromMethod(editor, member))
+    ? functionFromMethod(editor, member)
     : detachedTextOf(member.value);
 
 /**

From f14875e1fd03efedd72d2fb9cebc73ed382d31f4 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 13:35:33 +0200
Subject: [PATCH 285/326] refactor(csf-tools): print a member access with one
 helper

Carrying a spread forward and writing a `Story.name = value` annotation
both print `.key` or `['key']`, with two helpers that disagreed on
reserved words. `printMemberAccess` sits next to `printKey` and writes
`.default` like any other identifier name, which member access allows.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 code/core/src/csf-tools/CsfObject.ts               | 14 ++++----------
 code/core/src/csf-tools/CsfObjectDiscovery.test.ts | 13 +++++++++++++
 code/core/src/csf-tools/CsfObjectDiscovery.ts      | 13 +++++++------
 code/core/src/csf-tools/estree/editor.ts           |  6 ++++++
 4 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index b4401af1aaab..4f6bd521e04f 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -4,7 +4,6 @@ import {
   type Property,
   type SourceLocation,
   type Span,
-  isValidIdentifier,
   locationOf,
   parseExpression,
   staticKey,
@@ -18,8 +17,8 @@ import {
   keySource,
   prependMembers,
   printKey,
+  printMemberAccess,
   printMembers,
-  printString,
   printValue,
   removeMembers,
   renameKey,
@@ -441,11 +440,6 @@ const carriedSpreads = (
   return { ok: true, spreads };
 };
 
-const memberAccess = (key: string, optional: boolean, quote: string) =>
-  isValidIdentifier(key, false)
-    ? `${optional ? '?.' : '.'}${key}`
-    : `${optional ? '?.' : ''}[${printString(key, quote)}]`;
-
 // What an object literal is known to hold at `key`: no member, the value of one, or unknown.
 const literalMember = (literal: E.ObjectExpression, key: string) => {
   const lookup = lookupProperty(literal.properties, key);
@@ -476,7 +470,7 @@ const carriedValue = (
       continue;
     }
     candidates.push({
-      expression: `${spread.source}${memberAccess(first, false, quote)}`,
+      expression: `${spread.source}${printMemberAccess(first, quote)}`,
       literal: member?.kind === 'value' ? member.literal : undefined,
     });
     if (member?.kind === 'value') {
@@ -491,7 +485,7 @@ const carriedValue = (
     return rest.length === 0
       ? { expression: either, alternatives: true }
       : {
-          expression: `(${either})${rest.map((key) => memberAccess(key, true, quote)).join('')}`,
+          expression: `(${either})${rest.map((key) => printMemberAccess(key, quote, true)).join('')}`,
           alternatives: false,
         };
   }
@@ -501,7 +495,7 @@ const carriedValue = (
     if (member?.kind === 'missing') {
       return undefined;
     }
-    expression += memberAccess(key, !literal, quote);
+    expression += printMemberAccess(key, quote, !literal);
     literal = member?.kind === 'value' ? member.literal : undefined;
   }
   return { expression, alternatives: false };
diff --git a/code/core/src/csf-tools/CsfObjectDiscovery.test.ts b/code/core/src/csf-tools/CsfObjectDiscovery.test.ts
index 7806acf2b353..cc58bb37d820 100644
--- a/code/core/src/csf-tools/CsfObjectDiscovery.test.ts
+++ b/code/core/src/csf-tools/CsfObjectDiscovery.test.ts
@@ -299,6 +299,19 @@ const after = 1
 `);
     });
 
+    it('writes an annotation named by a reserved word as a member access', () => {
+      const csf = parse(`export default { title: 'Example' };
+export const Primary = () => null;
+`);
+      const [story] = csf.objects({ meta: false });
+
+      expect(story.set(['default'], true)).toEqual({ ok: true, changed: true });
+      expect(printCsf(csf).code).toBe(`export default { title: 'Example' };
+export const Primary = () => null;
+Primary.default = true;
+`);
+    });
+
     it('ends an annotation with a semicolon before a statement that would continue it', () => {
       const csf = parse(`export default { title: 'Example' }
 export function Primary() {}
diff --git a/code/core/src/csf-tools/CsfObjectDiscovery.ts b/code/core/src/csf-tools/CsfObjectDiscovery.ts
index 2a9ea351d151..a24ee71347ff 100644
--- a/code/core/src/csf-tools/CsfObjectDiscovery.ts
+++ b/code/core/src/csf-tools/CsfObjectDiscovery.ts
@@ -20,7 +20,6 @@ import {
   isFunction,
   isIdentifier,
   isStringLiteral,
-  isValidIdentifier,
   locationOf,
   outerSpan,
   staticKey,
@@ -29,8 +28,8 @@ import {
 import {
   insertStatementAfter,
   printKey,
+  printMemberAccess,
   printMembers,
-  printString,
   removeStatements,
 } from './estree/editor.ts';
 import { placeableValueSource } from './estree/values.ts';
@@ -392,15 +391,17 @@ const storyRoot = (
     (statement) =>
       statement.start <= binding.declaration.start && binding.declaration.end <= statement.end
   )!;
-  const accessor = (key: string) =>
-    isValidIdentifier(key) ? `.${key}` : `[${printString(key, editor.quote)}]`;
   // `removed` are statements the same edits remove, which the new ones cannot follow.
   const assign = (members: MemberInsert[], removed: ReadonlySet<Node> = new Set()) => {
     const after =
       assignments.findLast(({ statement }) => !removed.has(statement))?.statement ?? declaration;
     const end = editor.semicolons ? ';' : '';
     for (const { key, value } of members) {
-      insertStatementAfter(editor, after, `${binding.localName}${accessor(key)} = ${value}${end}`);
+      insertStatementAfter(
+        editor,
+        after,
+        `${binding.localName}${printMemberAccess(key, editor.quote)} = ${value}${end}`
+      );
     }
   };
   const statementsOf = (members: readonly Property[]) =>
@@ -448,7 +449,7 @@ const storyRoot = (
         return;
       }
       const { left } = assignment.expression;
-      editor.edits.overwrite(left.object.end, left.end, accessor(key));
+      editor.edits.overwrite(left.object.end, left.end, printMemberAccess(key, editor.quote));
     },
     // `CsfObject` refuses a group of members from both the object and the assignments.
     group: (members, key) => {
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 9bb6e0642395..ef92d2d411d9 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -461,6 +461,12 @@ const blockIndent = (code: string, node: Node) => {
 export const printKey = (name: string, quote: string) =>
   isValidIdentifier(name, false) ? name : printString(name, quote);
 
+// `.key`, or `['key']` for a key that is no identifier; with `?.` when `optional`.
+export const printMemberAccess = (key: string, quote: string, optional = false) =>
+  isValidIdentifier(key, false)
+    ? `${optional ? '?.' : '.'}${key}`
+    : `${optional ? '?.' : ''}[${printString(key, quote)}]`;
+
 export const printString = (value: string, quote: string) => {
   const json = JSON.stringify(value);
   return quote === '"'

From 8f6d6f35948b089e20b6dc9266ea6f6ecc32b478 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 13:40:38 +0200
Subject: [PATCH 286/326] refactor(csf-tools): let types carry what CsfObject
 checked or cast

- `get` finds its field like `getValue`, and only `inspect` treats the
  empty path apart, so the `outside` read kind and `read` are gone.
- `locate` always returns the parent object it looked in, so callers
  stop checking for one, and that parent is the `ObjectRoot` itself
  rather than a wrapper with an unread copy of its node.
- `createCsfObject` returns the editor's own type, so `ConfigFile` calls
  `createArray` on it directly instead of through a function that checks
  `instanceof` and throws.
- `carriedSpread` prints the spread it carries, so it no longer returns
  an `alternatives` flag for the caller to print it with.
- `detachedMember` builds a typed `Property` instead of casting the
  whole member; the named-export root narrows its key where it knows it
  is an identifier. A story assignment keeps its typed `left` instead of
  a cast assignment expression, and `statementBefore` takes a top-level
  statement.

The `node` and `get` docs of `CsfObject` are wrapped at 100 columns.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 code/core/src/csf-tools/ConfigFile.ts         |   6 +-
 code/core/src/csf-tools/ConfigObject.ts       |   8 +-
 code/core/src/csf-tools/CsfObject.ts          | 184 ++++++++----------
 code/core/src/csf-tools/CsfObjectDiscovery.ts |  10 +-
 code/core/src/csf-tools/estree/editor.ts      |  12 +-
 5 files changed, 97 insertions(+), 123 deletions(-)

diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index 5235eb945f53..c8fa1451a71d 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -13,9 +13,9 @@ import {
   type CsfMutationDiagnostic,
   type CsfMutationResult,
   type CsfObject,
+  type CsfObjectEditor,
   type CsfObjectHost,
   type CsfValue,
-  createArray,
   createCsfObject,
   literalRoot,
 } from './CsfObject.ts';
@@ -424,7 +424,7 @@ export class ConfigFile implements CsfObject {
     });
   }
 
-  _mutate(operation: (object: CsfObject) => CsfMutationResult): CsfMutationResult {
+  _mutate(operation: (object: CsfObjectEditor) => CsfMutationResult): CsfMutationResult {
     const editor = this._objectEditor('mutate');
     if (editor.ok === true) {
       return operation(editor.object);
@@ -835,7 +835,7 @@ export class ConfigFile implements CsfObject {
     const current = this.getFieldNode(path);
     const source = placeableTextOf(node);
     if (!current) {
-      return this._mutate((object) => createArray(object, path, [source]));
+      return this._mutate((object) => object.createArray(path, [source]));
     }
     if (current.type !== 'ArrayExpression') {
       return this._notAnArray(path, current);
diff --git a/code/core/src/csf-tools/ConfigObject.ts b/code/core/src/csf-tools/ConfigObject.ts
index 10bde64dce25..8f5a4399ca89 100644
--- a/code/core/src/csf-tools/ConfigObject.ts
+++ b/code/core/src/csf-tools/ConfigObject.ts
@@ -1,7 +1,7 @@
 import type { ConfigFile } from './ConfigFile.ts';
 import {
   type CsfMutationDiagnostic,
-  type CsfObject,
+  type CsfObjectEditor,
   type CsfObjectHost,
   type MemberInsert,
   type ObjectRoot,
@@ -337,7 +337,9 @@ const namedExportsRoot = (editor: SourceEditor, entries: NamedEntry[]): ObjectRo
     const value = (
       entry.declaration.type === 'VariableDeclarator' ? entry.declaration.init : entry.declaration
     ) as E.Expression;
-    const key = entry.specifier ? entry.specifier.specifier.exported : entry.declaration.id!;
+    const key = entry.specifier
+      ? entry.specifier.specifier.exported
+      : (entry.declaration.id as E.IdentifierName);
     const property = detachedMember(key, value, false, entry.declaration);
     byProperty.set(property, entry);
     return property;
@@ -475,7 +477,7 @@ export function createConfigObject(
   mode: 'read' | 'mutate',
   report: (diagnostic: CsfMutationDiagnostic) => void,
   markChanged: () => void
-): { ok: true; object: CsfObject } | { ok: false; diagnostic: CsfMutationDiagnostic } {
+): { ok: true; object: CsfObjectEditor } | { ok: false; diagnostic: CsfMutationDiagnostic } {
   const located = locateConfigRoot(config, mode);
   if (located.ok === false) {
     return located;
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index 4f6bd521e04f..9f99eab4ceba 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -115,8 +115,8 @@ export interface CsfObject {
   /**
    * Find the object literal this editor edits in the current parse. It is `undefined` for a config
    * made of named exports, for a story without an object literal, whose fields are all
-   * `Story.name = value` assignments, and once the object is gone. It is the file's own node, not a copy: do not change it, and read it
-   * again after a mutation, which parses the file again.
+   * `Story.name = value` assignments, and once the object is gone. It is the file's own node, not
+   * a copy: do not change it, and read it again after a mutation, which parses the file again.
    *
    * @example
    * ```ts
@@ -129,9 +129,9 @@ export interface CsfObject {
    */
   readonly node: E.ObjectExpression | undefined;
   /**
-   * Read a detached copy of the expression at a property path. Missing fields return `undefined`; so does a path
-   * through a value that is not an object literal, or one a spread, computed key, or duplicate field
-   * leaves unproven, which also adds a mutation diagnostic.
+   * Read a detached copy of the expression at a property path. Missing fields return `undefined`;
+   * so does a path through a value that is not an object literal, or one a spread, computed key, or
+   * duplicate field leaves unproven, which also adds a mutation diagnostic.
    *
    * @example
    * ```ts
@@ -282,23 +282,25 @@ export interface ObjectRoot {
   take(member: Property, key: string): MemberInsert;
 }
 
-/**
- * A member of an `ObjectRoot` that is not written as one, such as a named export or a
- * `Story.name = value` assignment. Its key and value are real nodes, so every span a shared helper
- * reads is a real one; the member itself only exists in memory, spanning `statement`.
- */
-export const detachedMember = (key: Node, value: Node, computed: boolean, statement: Span) =>
-  ({
-    type: 'Property',
-    kind: 'init',
-    method: false,
-    shorthand: false,
-    computed,
-    key,
-    value,
-    start: statement.start,
-    end: statement.end,
-  }) as unknown as Property;
+// A member of an `ObjectRoot` that is not written as one, such as a named export or a
+// `Story.name = value` assignment. Its key and value are nodes of the file, so every span read from
+// it is real; the member itself only exists in memory, spanning `statement`.
+export const detachedMember = (
+  key: Property['key'],
+  value: Property['value'],
+  computed: boolean,
+  statement: Span
+): Property => ({
+  type: 'Property',
+  kind: 'init',
+  method: false,
+  shorthand: false,
+  computed,
+  key,
+  value,
+  start: statement.start,
+  end: statement.end,
+});
 
 export interface CsfObjectHost {
   readonly editor: SourceEditor;
@@ -336,8 +338,6 @@ export const literalRoot = (editor: SourceEditor, object: E.ObjectExpression): O
 type ReportDiagnostic = (diagnostic: CsfMutationDiagnostic) => void;
 type MarkChanged = () => void;
 
-type ParentObject = { root: ObjectRoot; node?: E.ObjectExpression };
-
 type PropertyLookup =
   | { ok: true; property?: Property }
   | { ok: false; code: CsfMutationDiagnosticCode; node: Node };
@@ -453,15 +453,18 @@ const literalMember = (literal: E.ObjectExpression, key: string) => {
   return { kind: 'value' as const, literal: value.type === 'ObjectExpression' ? value : undefined };
 };
 
-// The value the spreads give the member at `keys`, or `undefined` when none gives it one. The last
-// spread with the first key replaces what earlier ones give it, which are only read when it may
-// lack it, after `??`. A member below the spread's own is read with `?.`, as it may be missing; one
-// a local literal lacks is left out.
-const carriedValue = (
+// The spread that carries the member the spreads give at `keys` into an object, or an `array`,
+// created there; `undefined` when none gives it one. The last spread with the first key replaces
+// what earlier ones give it, which are only read when it may lack it, after `??`. A member below
+// the spread's own is read with `?.`, as it may be missing; one a local literal lacks is left out.
+const carriedSpread = (
   spreads: readonly CarriedSpread[],
   keys: readonly string[],
-  quote: string
+  quote: string,
+  array: boolean
 ) => {
+  const spreadOf = (expression: string, alternatives = false) =>
+    array ? `...(${expression} ?? [])` : `...${alternatives ? `(${expression})` : expression}`;
   const [first, ...rest] = keys;
   const candidates: { expression: string; literal: E.ObjectExpression | undefined }[] = [];
   for (const spread of [...spreads].reverse()) {
@@ -483,11 +486,8 @@ const carriedValue = (
   if (candidates.length > 1) {
     const either = candidates.map(({ expression }) => expression).join(' ?? ');
     return rest.length === 0
-      ? { expression: either, alternatives: true }
-      : {
-          expression: `(${either})${rest.map((key) => printMemberAccess(key, quote, true)).join('')}`,
-          alternatives: false,
-        };
+      ? spreadOf(either, true)
+      : spreadOf(`(${either})${rest.map((key) => printMemberAccess(key, quote, true)).join('')}`);
   }
   let [{ expression, literal }] = candidates;
   for (const key of rest) {
@@ -498,7 +498,7 @@ const carriedValue = (
     expression += printMemberAccess(key, quote, !literal);
     literal = member?.kind === 'value' ? member.literal : undefined;
   }
-  return { expression, alternatives: false };
+  return spreadOf(expression);
 };
 
 class CsfObjectEditor implements CsfObject {
@@ -545,28 +545,19 @@ class CsfObjectEditor implements CsfObject {
   }
 
   get(path: readonly string[]): CsfExpression | undefined {
-    const read = this.read(path);
-    if (read.kind === 'unreadable') {
-      this.reportDiagnostic(read.diagnostic);
-    }
-    return read.kind === 'value' ? read.node : undefined;
+    const property = this.getProperty(path);
+    return property && parseExpression(valueSource(this.editor, property));
   }
 
+  // Unlike `get`, which reads the object itself as missing, `inspect` reports it.
   inspect(path: readonly string[]): CsfInspection {
-    const read = this.read(path);
-    if (read.kind !== 'outside') {
-      return read;
+    if (path.length === 0) {
+      const message = `Cannot read the object itself, which is not a field of this ${this.target.kind} object`;
+      return {
+        kind: 'unreadable',
+        diagnostic: this.diagnostic('unsupported-member', path, this.anchor(), message),
+      };
     }
-    const name = path.length > 0 ? path.join('.') : 'the object itself';
-    const message = `Cannot read ${name}, which is not a field of this ${this.target.kind} object`;
-    return {
-      kind: 'unreadable',
-      diagnostic: this.diagnostic('unsupported-member', path, this.anchor(), message),
-    };
-  }
-
-  // `get` reads a path outside the object as missing, without a diagnostic.
-  private read(path: readonly string[]): CsfInspection | { kind: 'outside' } {
     const found = this.find(path);
     return found.kind === 'property'
       ? { kind: 'value', node: parseExpression(valueSource(this.editor, found.property)) }
@@ -595,10 +586,9 @@ class CsfObjectEditor implements CsfObject {
   ):
     | { kind: 'property'; property: Property }
     | { kind: 'missing' }
-    | { kind: 'outside' }
     | { kind: 'unreadable'; diagnostic: CsfMutationDiagnostic } {
     if (path.length === 0) {
-      return { kind: 'outside' };
+      return { kind: 'missing' };
     }
     const found = this.locate(path);
     if (found.ok === false) {
@@ -633,15 +623,15 @@ class CsfObjectEditor implements CsfObject {
       return this.failure(inspected.code, path, inspected.node);
     }
     if (inspected.missing !== undefined && inspected.missing < path.length - 1) {
-      const carried = carriedSpreads(this.editor, inspected.parent!.root.properties);
+      const carried = carriedSpreads(this.editor, inspected.parent.properties);
       if (carried.ok === false) {
         return this.failure(carried.code, path, carried.node);
       }
     }
     const { quote, indent } = this.editor;
     const text = printValue(value, quote, { indent, expand: 'multiline' });
-    if (inspected.property && inspected.parent) {
-      inspected.parent.root.replaceValue(inspected.property, text);
+    if (inspected.property) {
+      inspected.parent.replaceValue(inspected.property, text);
     } else {
       const key = path.at(-1)!;
       this.insert(path.slice(0, -1), {
@@ -664,7 +654,7 @@ class CsfObjectEditor implements CsfObject {
     if (inspected.property) {
       return this.failure('occupied-destination', path, inspected.property);
     }
-    const carried = carriedSpreads(this.editor, inspected.parent!.root.properties);
+    const carried = carriedSpreads(this.editor, inspected.parent.properties);
     if (carried.ok === false) {
       return this.failure(carried.code, path, carried.node);
     }
@@ -684,7 +674,7 @@ class CsfObjectEditor implements CsfObject {
       return this.failure(inspected.code, path, inspected.node);
     }
     const { property, parent } = inspected;
-    if (!property || !parent) {
+    if (!property) {
       return { ok: true, changed: false };
     }
     const value = parseExpression(valueSource(this.editor, property));
@@ -692,7 +682,7 @@ class CsfObjectEditor implements CsfObject {
     if (!derived || derived === value) {
       return { ok: true, changed: false };
     }
-    parent.root.replaceValue(property, detachedTextOf(derived));
+    parent.replaceValue(property, detachedTextOf(derived));
     return this.commit(path);
   }
 
@@ -704,14 +694,14 @@ class CsfObjectEditor implements CsfObject {
     if (inspected.ok === false) {
       return this.failure(inspected.code, path, inspected.node);
     }
-    if (!inspected.property || !inspected.parent) {
+    if (!inspected.property) {
       return { ok: true, changed: false };
     }
-    const removal = lookupProperty(inspected.parent.root.properties, path.at(-1)!, 'remove');
+    const removal = lookupProperty(inspected.parent.properties, path.at(-1)!, 'remove');
     if (!removal.ok) {
       return this.failure(removal.code, path, removal.node);
     }
-    inspected.parent.root.remove([inspected.property]);
+    inspected.parent.remove([inspected.property]);
     const removed = this.commit(path);
     if (!removed.ok) {
       return removed;
@@ -739,10 +729,10 @@ class CsfObjectEditor implements CsfObject {
     if (source.ok === false) {
       return this.failure(source.code, from, source.node);
     }
-    if (!source.property || !source.parent) {
+    if (!source.property) {
       return { ok: true, changed: false };
     }
-    const removal = lookupProperty(source.parent.root.properties, from.at(-1)!, 'remove');
+    const removal = lookupProperty(source.parent.properties, from.at(-1)!, 'remove');
     if (!removal.ok) {
       return this.failure(removal.code, from, removal.node);
     }
@@ -761,11 +751,11 @@ class CsfObjectEditor implements CsfObject {
       sourceParent.length === destinationParent.length &&
       sourceParent.every((part, index) => destinationParent[index] === part)
     ) {
-      source.parent.root.rename(source.property, key);
+      source.parent.rename(source.property, key);
       return this.commit(from);
     }
 
-    const moved = source.parent.root.take(source.property, key);
+    const moved = source.parent.take(source.property, key);
     // Insert first: if that throws, nothing has been committed. The source is removed afterwards,
     // looked up again since the insertion moved its spans.
     this.insert(to.slice(0, -1), { members: [{ ...moved, key }] });
@@ -774,10 +764,10 @@ class CsfObjectEditor implements CsfObject {
       return inserted;
     }
     const remaining = this.locate(from);
-    if (remaining.ok === false || !remaining.property || !remaining.parent) {
+    if (remaining.ok === false || !remaining.property) {
       throw new Error(`CsfObject: ${from.join('.')} was not found again after moving it`);
     }
-    remaining.parent.root.remove([remaining.property]);
+    remaining.parent.remove([remaining.property]);
     const removed = this.commit(from);
     if (!removed.ok) {
       return removed;
@@ -958,22 +948,17 @@ class CsfObjectEditor implements CsfObject {
   private removeEmptyParents(path: readonly string[]): CsfMutationResult | undefined {
     for (let depth = path.length - 1; depth > 0; depth--) {
       const ancestor = this.locate(path.slice(0, depth));
-      if (
-        ancestor.ok === false ||
-        !ancestor.property ||
-        ancestor.property.method ||
-        !ancestor.parent
-      ) {
+      if (ancestor.ok === false || !ancestor.property || ancestor.property.method) {
         return;
       }
       const value = resolveExpression(this.editor.scopes, ancestor.property.value);
       if (value?.type !== 'ObjectExpression' || value.properties.length > 0) {
         return;
       }
-      if (!lookupProperty(ancestor.parent.root.properties, path[depth - 1], 'remove').ok) {
+      if (!lookupProperty(ancestor.parent.properties, path[depth - 1], 'remove').ok) {
         return;
       }
-      ancestor.parent.root.remove([ancestor.property]);
+      ancestor.parent.remove([ancestor.property]);
       const committed = this.commit(path);
       if (!committed.ok) {
         return committed;
@@ -988,14 +973,14 @@ class CsfObjectEditor implements CsfObject {
     path: readonly string[],
     access: Access = 'read'
   ):
-    | { ok: true; parent?: ParentObject; property?: Property; missing?: number }
+    | { ok: true; parent: ObjectRoot; property?: Property; missing?: number }
     | { ok: false; code: CsfMutationDiagnosticCode; node: Node } {
-    let parent: ParentObject = { root: this.root() };
+    let parent = this.root();
     let property: Property | undefined;
 
     for (const [index, name] of path.entries()) {
       const lookup = lookupProperty(
-        parent.root.properties,
+        parent.properties,
         name,
         index === path.length - 1 || access === 'set' ? access : 'read'
       );
@@ -1016,7 +1001,7 @@ class CsfObjectEditor implements CsfObject {
       if (value?.type !== 'ObjectExpression') {
         return { ok: false, code: 'unsupported-member', node: property.value };
       }
-      parent = { root: literalRoot(this.editor, value), node: value };
+      parent = literalRoot(this.editor, value);
     }
 
     return { ok: true, parent, property };
@@ -1048,28 +1033,17 @@ class CsfObjectEditor implements CsfObject {
         const multiline = texts.some((text) => text.includes('\n'));
         const block = (members: string[]) =>
           multiline ? printMembers(members, indent) : `{ ${members.join(', ')} }`;
-        const forward = (depth: number, array: boolean) => {
-          const value = carriedValue(carried.spreads, missing.slice(0, depth + 1), quote);
-          if (!value) {
-            return [];
-          }
-          const { expression, alternatives } = value;
-          return [
-            array
-              ? `...(${expression} ?? [])`
-              : `...${alternatives ? `(${expression})` : expression}`,
-          ];
+        const forward = (depth: number, array = false) => {
+          const spread = carriedSpread(carried.spreads, missing.slice(0, depth + 1), quote, array);
+          return spread ? [spread] : [];
         };
         const last = missing.length - 1;
         let nested =
           'members' in content
-            ? block([...forward(last, false), ...texts])
+            ? block([...forward(last), ...texts])
             : `[${[...forward(last, true), ...texts].join(', ')}]`;
         for (let depth = last - 1; depth >= 0; depth--) {
-          nested = block([
-            ...forward(depth, false),
-            `${printKey(missing[depth + 1], quote)}: ${nested}`,
-          ]);
+          nested = block([...forward(depth), `${printKey(missing[depth + 1], quote)}: ${nested}`]);
         }
         parent.append([{ key: name, value: nested, text: `${printKey(name, quote)}: ${nested}` }]);
         return;
@@ -1152,19 +1126,13 @@ class CsfObjectEditor implements CsfObject {
   }
 }
 
-// Append to an array at a missing field, as `ConfigFile#appendNodeToArray` does.
-export const createArray = (object: CsfObject, path: readonly string[], items: string[]) => {
-  if (!(object instanceof CsfObjectEditor)) {
-    throw new Error('CsfObject: createArray needs an editor of createCsfObject');
-  }
-  return object.createArray(path, items);
-};
-
 export const createCsfObject = (
   target: CsfObjectTarget,
   host: CsfObjectHost,
   report: ReportDiagnostic,
   markChanged: MarkChanged
-): CsfObject => new CsfObjectEditor(target, host, report, markChanged);
+) => new CsfObjectEditor(target, host, report, markChanged);
+
+export type { CsfObjectEditor };
 
 export { keySource };
diff --git a/code/core/src/csf-tools/CsfObjectDiscovery.ts b/code/core/src/csf-tools/CsfObjectDiscovery.ts
index a24ee71347ff..30635e53e444 100644
--- a/code/core/src/csf-tools/CsfObjectDiscovery.ts
+++ b/code/core/src/csf-tools/CsfObjectDiscovery.ts
@@ -50,7 +50,7 @@ type Discovered = { target: CsfObjectTarget; root: ObjectRoot };
 // A top-level `Story.name = value` statement, as a member of the story.
 type Assignment = {
   statement: E.ExpressionStatement;
-  expression: E.AssignmentExpression & { left: E.MemberExpression };
+  left: E.MemberExpression;
   property: Property;
 };
 
@@ -368,7 +368,7 @@ const assignmentsOf = (csf: CsfFile, binding: StoryBinding) => {
       return { assignments, write };
     }
     const property = detachedMember(parent.property, user.right, parent.computed, statement);
-    assignments.push({ statement, expression: user as Assignment['expression'], property });
+    assignments.push({ statement, left: parent, property });
   }
   assignments.sort((a, b) => a.statement.start - b.statement.start);
   return { assignments, shared };
@@ -439,7 +439,7 @@ const storyRoot = (
         literal!.replaceValue(member, text);
         return;
       }
-      const { start, end } = outerSpan(assignment.expression.right);
+      const { start, end } = outerSpan(assignment.property.value);
       editor.edits.overwrite(start, end, text);
     },
     rename: (member, key) => {
@@ -448,7 +448,7 @@ const storyRoot = (
         literal!.rename(member, key);
         return;
       }
-      const { left } = assignment.expression;
+      const { left } = assignment;
       editor.edits.overwrite(left.object.end, left.end, printMemberAccess(key, editor.quote));
     },
     // `CsfObject` refuses a group of members from both the object and the assignments.
@@ -527,7 +527,7 @@ const discoverStories = (
       return reject(shared);
     }
     if (!object && !isAnnotatable(node)) {
-      const name = annotationName(assignments[0].expression.left)!;
+      const name = annotationName(assignments[0].left)!;
       return reject({
         code: 'unsupported-initializer',
         node: assignments[0].property.value,
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index ef92d2d411d9..c8e6ed655c42 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -1453,11 +1453,15 @@ const committedStatement = (
   return program.body.find((node) => node.start === start);
 };
 
-const statementBefore = (program: E.Program, statement: Node): Node | undefined =>
-  (program.body as readonly Node[])[program.body.indexOf(statement as E.Statement) - 1];
+type TopLevel = E.Program['body'][number];
+
+const statementBefore = (program: E.Program, statement: TopLevel) => {
+  const index = program.body.indexOf(statement);
+  return index > 0 ? program.body[index - 1] : undefined;
+};
 
 // Whether a statement, or the statement before it, spans lines with no blank line between them.
-const setsApart = ({ code, program }: ParsedModule, statement: Node) => {
+const setsApart = ({ code, program }: ParsedModule, statement: TopLevel) => {
   const before = statementBefore(program, statement);
   return (
     !!before &&
@@ -1468,7 +1472,7 @@ const setsApart = ({ code, program }: ParsedModule, statement: Node) => {
 
 // The start of the first line of a statement with the comments above it, below the statement
 // before it and the comments that share that statement's line.
-const ownLineStart = ({ code, program, comments }: ParsedModule, statement: Node) => {
+const ownLineStart = ({ code, program, comments }: ParsedModule, statement: TopLevel) => {
   const before = statementBefore(program, statement)!;
   const above = comments.find(
     (comment) =>

From 823d040b0de55d52413619b8034f077f13aacbb5 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 14:01:00 +0200
Subject: [PATCH 287/326] refactor(csf-tools): wrap long comments and list each
 semicolon case once

`_refuse` is internal, so its comment is a line comment, the comment
lines past 100 columns are wrapped, and `endsWithOptionalSemicolon`
lists the statements that end with an optional `;` in one case group.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/editor.ts | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index c8e6ed655c42..59ec29535bf6 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -113,7 +113,7 @@ export class SourceEditor {
   // how to undo state kept outside the editor, such as a `changed` flag.
   _transaction: { refused: boolean; rollbacks: (() => void)[] } | undefined;
 
-  /** Mark a mutation as refused, so the transaction it runs in rolls back. */
+  // Marks a mutation as refused, so the transaction it runs in rolls back.
   _refuse() {
     if (this._transaction) {
       this._transaction.refused = true;
@@ -121,8 +121,8 @@ export class SourceEditor {
   }
 
   // What `appendStatement` wrote without a blank line before it: statements of this parse, and
-  // texts of pending edits. Each commit finds them in the code it parses, and sets one apart once it
-  // or the statement before it spans lines.
+  // texts of pending edits. Each commit finds them in the code it parses, and sets one apart once
+  // it or the statement before it spans lines.
   _appendedWithoutBlankLine: (Node | string)[] = [];
 
   constructor(code: string, fileName?: string, onCommit?: () => void) {
@@ -356,7 +356,7 @@ export class SourceEditor {
     return this._style.indent;
   }
 
-  /** Whether statements to generate end with `;`: false only when most statements of the file omit it. */
+  /** Whether generated statements end with `;`: unless most statements of the file omit it. */
   get semicolons() {
     this._style ??= inferStyle(this._module);
     return this._style.semicolons;
@@ -389,8 +389,8 @@ const copyBatch = ({ edits, lists, lastInsertedAfter, insertedAt }: Batch): Batc
   insertedAt: new Set(insertedAt),
 });
 
-// Statements and class fields that end with an optional `;`. A declaration in a `for` head has none;
-// an exported declaration ends with the `;` of its `export`.
+// Statements and class fields that end with an optional `;`. A declaration in a `for` head has
+// none; an exported declaration ends with the `;` of its `export`.
 const endsWithOptionalSemicolon = (node: Node, parent: Node | null) => {
   switch (node.type) {
     case 'ImportDeclaration':
@@ -398,7 +398,6 @@ const endsWithOptionalSemicolon = (node: Node, parent: Node | null) => {
     case 'ExpressionStatement':
     case 'ReturnStatement':
     case 'ThrowStatement':
-      return true;
     case 'TSTypeAliasDeclaration':
     case 'PropertyDefinition':
       return true;
@@ -1430,8 +1429,8 @@ export const appendStatement = (editor: SourceEditor, text: string) => {
   insertStatementAfter(editor, last, `${multiline ? '\n' : ''}${text}`);
 };
 
-// The statement of the parse of `edits` that a statement of the code they edit became, or that a
-// text appended in them is.
+// The statement of `module`, the parse of `edits`, that a statement of the code they edit became,
+// or whose source is a text they appended.
 const committedStatement = (
   edits: SourceEdits,
   { code, program }: ParsedModule,

From 3ca63d168c0b56853b6602a78574e35c1400db8b Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 14:01:00 +0200
Subject: [PATCH 288/326] docs(csf-tools): say what componentImport is in one
 sentence

The two sentences on `meta.component` and `componentImport` become one,
and the examples of a `component` without an import keep the local
component, the member and the type assertion.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 code/core/src/csf-tools/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/core/src/csf-tools/README.md b/code/core/src/csf-tools/README.md
index ee1212a1d7a6..f2e6cb1013bf 100644
--- a/code/core/src/csf-tools/README.md
+++ b/code/core/src/csf-tools/README.md
@@ -9,7 +9,7 @@ An experimental library to read, analyze, transform, and write CSF programmatica
 
 It can parse MDX into CSF.
 
-`CsfFile.meta.component` is the meta's `component` as written. `CsfFile.componentImport` is the import it refers to, as `{ source, imported, local }`, so `import { Button as B } from './Button'` gives `{ source: './Button', imported: 'Button', local: 'B' }`; `imported` is `'default'` for a default import. It is `undefined` when `component` is not an identifier bound by a default or named import, such as a local component, a namespace import or a member like `UI.Button`, or `Button as any`.
+`CsfFile.meta.component` is the meta's `component` as written, and `CsfFile.componentImport` the import it refers to, as `{ source, imported, local }`: `import { Button as B } from './Button'` gives `{ source: './Button', imported: 'Button', local: 'B' }`, and a default import has `imported: 'default'`. It is `undefined` when `component` is not an identifier bound by a default or named import, such as a local component, a member like `UI.Button`, or `Button as any`.
 
 ## Transforming stories
 

From 17681813deb728742735607141c49d896b7d94ba Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 13:58:11 +0200
Subject: [PATCH 289/326] fix(csf-tools): rename an annotation of a
 parenthesized story

Renaming a `Story.name = value` field overwrote from the end of the
story's identifier to the end of the member, so `(Primary).argTypes`
lost its closing parenthesis and the commit threw a parse error. The
overwrite now starts after the parentheses around the story.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 code/core/src/csf-tools/CsfObjectDiscovery.test.ts | 14 ++++++++++++++
 code/core/src/csf-tools/CsfObjectDiscovery.ts      |  6 +++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/code/core/src/csf-tools/CsfObjectDiscovery.test.ts b/code/core/src/csf-tools/CsfObjectDiscovery.test.ts
index cc58bb37d820..3f96027d8dec 100644
--- a/code/core/src/csf-tools/CsfObjectDiscovery.test.ts
+++ b/code/core/src/csf-tools/CsfObjectDiscovery.test.ts
@@ -479,6 +479,20 @@ Primary.args.label = 'Changed';
       ]);
     });
 
+    it('renames an annotation of a parenthesized story', () => {
+      const csf = parse(`export default { title: 'Example' };
+export const Primary = () => null;
+(Primary).argTypes = { label: { control: 'text' } };
+`);
+      const [story] = csf.objects({ meta: false });
+
+      expect(story.rename(['argTypes'], 'args')).toEqual({ ok: true, changed: true });
+      expect(printCsf(csf).code).toBe(`export default { title: 'Example' };
+export const Primary = () => null;
+(Primary).args = { label: { control: 'text' } };
+`);
+    });
+
     it('does not add annotations to a story that holds another value', () => {
       const csf = parse(`export default { title: 'Example' };
 export const Primary = shared;
diff --git a/code/core/src/csf-tools/CsfObjectDiscovery.ts b/code/core/src/csf-tools/CsfObjectDiscovery.ts
index 30635e53e444..8175c843c34c 100644
--- a/code/core/src/csf-tools/CsfObjectDiscovery.ts
+++ b/code/core/src/csf-tools/CsfObjectDiscovery.ts
@@ -449,7 +449,11 @@ const storyRoot = (
         return;
       }
       const { left } = assignment;
-      editor.edits.overwrite(left.object.end, left.end, printMemberAccess(key, editor.quote));
+      editor.edits.overwrite(
+        outerSpan(left.object).end,
+        left.end,
+        printMemberAccess(key, editor.quote)
+      );
     },
     // `CsfObject` refuses a group of members from both the object and the assignments.
     group: (members, key) => {

From 75c5d611bc0d62a171cc35e0db0864c5e166a949 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 13:59:13 +0200
Subject: [PATCH 290/326] refactor(csf-tools): give the list helpers and spread
 carrying names of their own

- `withSeparator` and `oneLine` no longer share their names with the
  `appended` locals of `commit` and `transaction` and with `inline`.
- `carriedSpread` takes `into: 'object' | 'array'` instead of a boolean.
- The dead `keySource` re-export of CsfObject.ts goes.
- `transaction` reads its result as `unknown` before looking for `then`.
- The comments on `semicolons`, `committedStatement`, `carriedSpread` and
  the named-export root say what they hold in fewer words, and the one
  restating `printMemberAccess` goes.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 code/core/src/csf-tools/ConfigObject.ts  |  5 ++---
 code/core/src/csf-tools/CsfObject.ts     | 23 +++++++++++------------
 code/core/src/csf-tools/estree/editor.ts | 22 ++++++++++------------
 3 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/code/core/src/csf-tools/ConfigObject.ts b/code/core/src/csf-tools/ConfigObject.ts
index 8f5a4399ca89..a285268e31bf 100644
--- a/code/core/src/csf-tools/ConfigObject.ts
+++ b/code/core/src/csf-tools/ConfigObject.ts
@@ -327,9 +327,8 @@ export const locateConfigRoot = (
 const exportedName = (node: E.ModuleExportName) =>
   node.type === 'Identifier' ? node.name : (node as E.StringLiteral).value;
 
-// A config made of named exports, edited as if it were one object literal. Each member's key is the
-// node that carries the exported name and its value the declaration's initializer, so every span a
-// shared helper could read is a real one; the member itself only exists in memory.
+// A config made of named exports, edited as if it were one object literal of `detachedMember`s: the
+// exported name is the key and the declaration's initializer the value.
 const namedExportsRoot = (editor: SourceEditor, entries: NamedEntry[]): ObjectRoot => {
   const quote = editor.quote;
   const byProperty = new Map<Property, NamedEntry>();
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index 9f99eab4ceba..08eaca6f316a 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -14,7 +14,6 @@ import {
   appendMembers,
   detachedTextOf,
   groupMembers,
-  keySource,
   prependMembers,
   printKey,
   printMemberAccess,
@@ -453,18 +452,20 @@ const literalMember = (literal: E.ObjectExpression, key: string) => {
   return { kind: 'value' as const, literal: value.type === 'ObjectExpression' ? value : undefined };
 };
 
-// The spread that carries the member the spreads give at `keys` into an object, or an `array`,
-// created there; `undefined` when none gives it one. The last spread with the first key replaces
-// what earlier ones give it, which are only read when it may lack it, after `??`. A member below
-// the spread's own is read with `?.`, as it may be missing; one a local literal lacks is left out.
+// The spread that writes the member at `keys` of `spreads` into a new object or array, or
+// `undefined` when none can have it. The last spread that may have the first key wins, earlier ones
+// follow after `??` in case it lacks it; a local literal known to have it ends that list, and one
+// known to lack it is skipped. A member below a spread's own is read with `?.`.
 const carriedSpread = (
   spreads: readonly CarriedSpread[],
   keys: readonly string[],
   quote: string,
-  array: boolean
+  into: 'object' | 'array'
 ) => {
   const spreadOf = (expression: string, alternatives = false) =>
-    array ? `...(${expression} ?? [])` : `...${alternatives ? `(${expression})` : expression}`;
+    into === 'array'
+      ? `...(${expression} ?? [])`
+      : `...${alternatives ? `(${expression})` : expression}`;
   const [first, ...rest] = keys;
   const candidates: { expression: string; literal: E.ObjectExpression | undefined }[] = [];
   for (const spread of [...spreads].reverse()) {
@@ -1033,15 +1034,15 @@ class CsfObjectEditor implements CsfObject {
         const multiline = texts.some((text) => text.includes('\n'));
         const block = (members: string[]) =>
           multiline ? printMembers(members, indent) : `{ ${members.join(', ')} }`;
-        const forward = (depth: number, array = false) => {
-          const spread = carriedSpread(carried.spreads, missing.slice(0, depth + 1), quote, array);
+        const forward = (depth: number, into: 'object' | 'array' = 'object') => {
+          const spread = carriedSpread(carried.spreads, missing.slice(0, depth + 1), quote, into);
           return spread ? [spread] : [];
         };
         const last = missing.length - 1;
         let nested =
           'members' in content
             ? block([...forward(last), ...texts])
-            : `[${[...forward(last, true), ...texts].join(', ')}]`;
+            : `[${[...forward(last, 'array'), ...texts].join(', ')}]`;
         for (let depth = last - 1; depth >= 0; depth--) {
           nested = block([...forward(depth), `${printKey(missing[depth + 1], quote)}: ${nested}`]);
         }
@@ -1134,5 +1135,3 @@ export const createCsfObject = (
 ) => new CsfObjectEditor(target, host, report, markChanged);
 
 export type { CsfObjectEditor };
-
-export { keySource };
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 59ec29535bf6..69ae0a865d6d 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -259,8 +259,8 @@ export class SourceEditor {
     this._transaction = transaction;
     let kept = false;
     try {
-      const result = fn();
-      if (typeof (result as unknown as PromiseLike<unknown> | undefined)?.then === 'function') {
+      const result: unknown = fn();
+      if (typeof (result as PromiseLike<unknown> | undefined)?.then === 'function') {
         throw new Error(
           'A transaction cannot wait for a promise: its edits would be made after it'
         );
@@ -356,7 +356,7 @@ export class SourceEditor {
     return this._style.indent;
   }
 
-  /** Whether generated statements end with `;`: unless most statements of the file omit it. */
+  /** Whether generated statements end with `;`, as they do unless most of the file's omit it. */
   get semicolons() {
     this._style ??= inferStyle(this._module);
     return this._style.semicolons;
@@ -460,7 +460,6 @@ const blockIndent = (code: string, node: Node) => {
 export const printKey = (name: string, quote: string) =>
   isValidIdentifier(name, false) ? name : printString(name, quote);
 
-// `.key`, or `['key']` for a key that is no identifier; with `?.` when `optional`.
 export const printMemberAccess = (key: string, quote: string, optional = false) =>
   isValidIdentifier(key, false)
     ? `${optional ? '?.' : '.'}${key}`
@@ -961,7 +960,7 @@ const itemLines = (
     .join('');
 
 // A line comment ending the last item puts the comma for the next one on the next line.
-const appended = (
+const withSeparator = (
   layout: Omit<Appended, 'separator'>,
   written: string,
   lastItem: string
@@ -1003,7 +1002,7 @@ const appendFirst = (editor: SourceEditor, list: List, texts: string[]): Appende
   const { items, padding } = list;
   const write = (layout: Omit<Appended, 'separator'>, text: string) => {
     insert(edits, layout, text);
-    return appended(layout, text, texts.at(-1)!);
+    return withSeparator(layout, text, texts.at(-1)!);
   };
   // The text after the items goes to the right of the list's end, so later items go before it.
   const close = (text: string) => {
@@ -1031,18 +1030,18 @@ const appendFirst = (editor: SourceEditor, list: List, texts: string[]): Appende
       const layout = { at: end, right: false, indent, trailingComma: ',', lineBreakFollows: true };
       return write(layout, itemLines(texts, indent, ',', true));
     }
-    const inline = { right: false, indent: undefined, trailingComma: '', lineBreakFollows: false };
+    const oneLine = { right: false, indent: undefined, trailingComma: '', lineBreakFollows: false };
     if (end > list.open) {
       if (end === list.close) {
         close(padding);
       }
-      return write({ ...inline, at: end }, ` ${texts.join(', ')}`);
+      return write({ ...oneLine, at: end }, ` ${texts.join(', ')}`);
     }
     if (list.close > list.open) {
       edits.remove(list.open, list.close);
     }
     close(padding);
-    return write({ ...inline, at: list.open }, `${padding}${texts.join(', ')}`);
+    return write({ ...oneLine, at: list.open }, `${padding}${texts.join(', ')}`);
   }
   const last = items.at(-1)!;
   const comma = separatorAfter(editor, last);
@@ -1087,7 +1086,7 @@ const appendAfter = (editor: SourceEditor, list: List, previous: Appended, texts
       ? ` ${inline(editor, list, texts, trailingComma, lineBreakFollows)}`
       : itemLines(texts, indent, trailingComma, lineBreakFollows);
   insert(editor.edits, previous, `${separator}${text}`);
-  return appended(previous, text, texts.at(-1)!);
+  return withSeparator(previous, text, texts.at(-1)!);
 };
 
 /**
@@ -1429,8 +1428,7 @@ export const appendStatement = (editor: SourceEditor, text: string) => {
   insertStatementAfter(editor, last, `${multiline ? '\n' : ''}${text}`);
 };
 
-// The statement of `module`, the parse of `edits`, that a statement of the code they edit became,
-// or whose source is a text they appended.
+// Where a statement, or a text appended as one, is in `module`, the code `edits` produced.
 const committedStatement = (
   edits: SourceEdits,
   { code, program }: ParsedModule,

From 9f6f5a33714e668f985db06f200d51920792b7b7 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 14:39:52 +0200
Subject: [PATCH 291/326] fix(csf-tools): type the editor ConfigFile mutates as
 an interface

ConfigFile._mutate took the CsfObject editor class as its type. The class has
private members, so the type was nominal and the ConfigFile of src and of
dist were no longer assignable to each other, which the scripts typecheck
mixes. CsfObjectEditor is now an interface: CsfObject with createArray.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/CsfObject.ts | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index 08eaca6f316a..e6e473bc1b75 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -251,6 +251,11 @@ export interface CsfObject {
   group(path: readonly string[], names: readonly string[]): CsfMutationResult;
 }
 
+// `CsfObject` with the mutation `ConfigFile` adds: a new array at a missing field.
+export interface CsfObjectEditor extends CsfObject {
+  createArray(path: readonly string[], items: string[]): CsfMutationResult;
+}
+
 export interface CsfObjectOptions {
   meta?: boolean;
   stories?: boolean;
@@ -502,7 +507,7 @@ const carriedSpread = (
   return spreadOf(expression);
 };
 
-class CsfObjectEditor implements CsfObject {
+class Editor implements CsfObjectEditor {
   #changed = false;
 
   readonly target: CsfObjectTarget;
@@ -1132,6 +1137,4 @@ export const createCsfObject = (
   host: CsfObjectHost,
   report: ReportDiagnostic,
   markChanged: MarkChanged
-) => new CsfObjectEditor(target, host, report, markChanged);
-
-export type { CsfObjectEditor };
+): CsfObjectEditor => new Editor(target, host, report, markChanged);

From 99039cbfcb7a3806466ceebe90428994a6f7fafc Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 14:08:27 +0200
Subject: [PATCH 292/326] fix(csf-tools): put what follows a removed item after
 a line comment at its indent

Removing the last member after one that ends in a line comment kept the
space before the closing token, so it landed at the start of the next line
one space in. What follows the removed run now starts that line at the
list's indent when it is the closing token, and at the removed item's
indent when it is the next item.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/editor.test.ts | 33 +++++++++++++++++--
 code/core/src/csf-tools/estree/editor.ts      | 15 ++++++---
 2 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index 8b8f152548f8..d205e20e9f60 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -589,7 +589,7 @@ describe('removeFromList', () => {
 
   it('keeps what follows a removed item off the line of the comment before it', () => {
     expect(removeElement(`export default { addons: ['a', /* x */ // l\n  'b', 'c'] };`, 1)).toBe(
-      `export default { addons: ['a', /* x */ // l\n 'c'] };`
+      `export default { addons: ['a', /* x */ // l\n  'c'] };`
     );
     expect(removeElement(`export default { addons: ['a', // l\n  'b'] };`, 1)).toBe(
       `export default { addons: ['a' // l\n] };`
@@ -602,6 +602,35 @@ describe('removeFromList', () => {
     );
   });
 
+  it.each([
+    [
+      'shares the line of the removed item after a line comment',
+      `({\n    render: () => null, // custom render\n    name() { return 1; } })`,
+      `({\n    render: () => null // custom render\n})`,
+    ],
+    [
+      'is on a line of its own after a line comment',
+      `({\n    render: () => null, // custom render\n    name() { return 1; }\n})`,
+      `({\n    render: () => null // custom render\n})`,
+    ],
+    [
+      'follows a trailing comma after a line comment',
+      `({\n    render: () => null, // custom render\n    name() { return 1; }, })`,
+      `({\n    render: () => null, // custom render\n})`,
+    ],
+    [
+      'is on the line of a one-line list',
+      `({ render: () => null, name() { return 1; } })`,
+      `({ render: () => null })`,
+    ],
+  ])('puts the closing token at the indent of the list when it %s', (_, code, result) => {
+    const editor = new SourceEditor(code);
+    const object = (editor.program.body[0] as E.ExpressionStatement)
+      .expression as E.ObjectExpression;
+    removeFromList(editor, objectList(editor, object), [object.properties[1]]);
+    expect(editor.toString()).toBe(result);
+  });
+
   it.each(['\n', '\r\n'])(
     'keeps what follows adjacent removed items off the line of the comment before them',
     (eol) => {
@@ -609,7 +638,7 @@ describe('removeFromList', () => {
       const array = (editor.program.body[0] as E.ExportDefaultDeclaration)
         .declaration as E.ArrayExpression;
       removeFromList(editor, arrayList(editor, array), array.elements.slice(1, 3) as E.Node[]);
-      expect(editor.toString()).toBe(`export default [1, /* k */ // k${eol} 4,${eol}];`);
+      expect(editor.toString()).toBe(`export default [1, /* k */ // k${eol}4,${eol}];`);
     }
   );
 });
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 69ae0a865d6d..6abe984fa84a 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -1179,12 +1179,17 @@ export const removeFromList = (editor: SourceEditor, list: List, removedItems: r
       const item = items[0].start;
       edits.remove(start, item - /\s*$/.exec(code.slice(start, item))![0].length);
       edits.remove(item, end + /^\s*/.exec(code.slice(end))![0].length);
+    } else if (
+      commentAt(editor, start, 'end')?.type === 'Line' &&
+      code.slice(end, lineEnd(code, end)).trim()
+    ) {
+      // Code after the run on its line must not join the line of a line comment before it, so it
+      // starts the next line, where the run's first item started or at the list's indent.
+      const next = end + /^\s*/.exec(code.slice(end))![0].length;
+      const indent = lineIndent(code, last === items.length - 1 ? list.open : items[first].start);
+      edits.update(lineEnd(code, start) + 1, next, indent);
     } else {
-      // Code after the run on its line must not join the line of a line comment before it.
-      const joins =
-        commentAt(editor, start, 'end')?.type === 'Line' &&
-        code.slice(end, lineEnd(code, end)).trim();
-      edits.remove(joins ? lineEnd(code, start) + 1 : start, end);
+      edits.remove(start, end);
     }
     first = last;
   }

From 0ffb2d3019c80243c9de8b81c77066ad8e34bb54 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 14:09:48 +0200
Subject: [PATCH 293/326] feat(csf-tools): export detachedTextOf

A snippet generator that places a value from a story file at another
indent needs the value's text with its lines dedented, which
detachedTextOf gives and the entry point did not export.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/README.md             |  2 ++
 code/core/src/csf-tools/estree/editor.test.ts | 13 +++++++++++++
 code/core/src/csf-tools/estree/editor.ts      |  5 ++++-
 code/core/src/csf-tools/index.ts              |  1 +
 4 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/code/core/src/csf-tools/README.md b/code/core/src/csf-tools/README.md
index f2e6cb1013bf..5f8b52d4430c 100644
--- a/code/core/src/csf-tools/README.md
+++ b/code/core/src/csf-tools/README.md
@@ -64,6 +64,8 @@ for (const story of csf.objects()) {
 }
 ```
 
+`textOf` gives a node's source as written, and `placeableTextOf` that source ready to place as a value. `detachedTextOf` also dedents it as if the node's line had no indent, to place a value from a file at another indent, such as in a generated snippet.
+
 ## Transforming preview and main configuration
 
 `ConfigFile` implements `CsfObject` directly, exposing the same methods and mutation results as the editors returned by `CsfFile.objects()`. Config files use `{ kind: 'config' }` as their target. Default-exported objects, identifier-backed objects, `definePreview` configurations, and CommonJS `module.exports` use their config object as the root.
diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index d205e20e9f60..ac756bae805c 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -8,6 +8,7 @@ import { dedent } from 'ts-dedent';
 
 import { loadConfig, printConfig } from '../ConfigFile.ts';
 import { loadCsf, printCsf } from '../CsfFile.ts';
+import { detachedTextOf } from '../index.ts';
 import type { E } from './ast.ts';
 import { parseExpression, parseModule } from './ast.ts';
 import {
@@ -643,6 +644,18 @@ describe('removeFromList', () => {
   );
 });
 
+describe('detachedTextOf', () => {
+  it('gives the text of a value of the file as if its line had no indent', () => {
+    const editor = new SourceEditor(
+      `export default {\n  args: {\n    a: [\n      1, // one\n    ],\n  },\n};`
+    );
+    const object = (editor.program.body[0] as E.ExportDefaultDeclaration)
+      .declaration as E.ObjectExpression;
+    const args = (object.properties[0] as E.ObjectProperty).value as E.ObjectExpression;
+    expect(detachedTextOf(args)).toBe(`{\n  a: [\n    1, // one\n  ],\n}`);
+  });
+});
+
 describe('replaceValue', () => {
   const firstMember = (editor: SourceEditor) => {
     const statement = editor.program.body[0] as E.ExportDefaultDeclaration;
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 6abe984fa84a..de943a2d2908 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -848,7 +848,10 @@ export const detachedSource = (editor: SourceEditor, span: Span) => {
   return dedentSource(editor, span.start, span.end, lineIndent(editor.code, span.start));
 };
 
-// `placeableTextOf` as `detachedSource`, for a node of `get`, `parseExpression` or any file.
+/**
+ * `placeableTextOf` dedented as if the node's line had no indent, to place a node of `get`,
+ * `parseExpression` or a `SourceEditor` at another indent.
+ */
 export const detachedTextOf = (node: Node) =>
   reindent(placeableTextOf(node), lineIndent(moduleOf(node)!.code, node.start), '');
 
diff --git a/code/core/src/csf-tools/index.ts b/code/core/src/csf-tools/index.ts
index 6e8e3d6cc03a..693d073343ed 100644
--- a/code/core/src/csf-tools/index.ts
+++ b/code/core/src/csf-tools/index.ts
@@ -38,6 +38,7 @@ export {
   argumentList,
   arrayList,
   declaratorList,
+  detachedTextOf,
   insertAfterImports,
   itemText,
   lineIndent,

From b3835d2c75739503cbe8bc6ebb7da5c2e01e5160 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 14:37:31 +0200
Subject: [PATCH 294/326] fix(csf-tools): indent a value written out from a
 spread one level below its member

objectFrom indented every line of a member value, but a value read from the
story file still had the indent of its line there, so a nested object came
out one level too deep, and a template literal's lines moved with it. The
value is now dedented as if its line had no indent, and its lines are
indented with the file's indent, except inside literals. The elements of a
rebuilt array are dedented the same way.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../story-shape/resolve-arg-value.test.ts     | 50 +++++++++++++++++++
 .../story-shape/resolve-arg-value.ts          | 12 +++--
 2 files changed, 57 insertions(+), 5 deletions(-)

diff --git a/code/core/src/csf-tools/story-shape/resolve-arg-value.test.ts b/code/core/src/csf-tools/story-shape/resolve-arg-value.test.ts
index aff5d0c90917..98875330216f 100644
--- a/code/core/src/csf-tools/story-shape/resolve-arg-value.test.ts
+++ b/code/core/src/csf-tools/story-shape/resolve-arg-value.test.ts
@@ -1,5 +1,8 @@
 import { describe, expect, it } from 'vitest';
 
+import { dedent } from 'ts-dedent';
+
+import { textOf } from '../estree/ast.ts';
 import { SourceEditor } from '../estree/editor.ts';
 import { resolveArgValue } from './resolve-arg-value.ts';
 import {
@@ -130,6 +133,53 @@ describe('resolveArgValue', () => {
     });
   });
 
+  const textOfValue = (code: string) => {
+    const ctx = contextOf(code);
+    const record = resolveArgsRecord(resolveBindingMembers(ctx, 'Story')?.properties.args, ctx);
+    return textOf(resolveArgValue(record.properties.v, ctx).node);
+  };
+
+  it.each([
+    [
+      'two levels deep',
+      `const base = {\n  nested: {\n    deep: 1,\n  },\n};`,
+      `{\n  nested: {\n    deep: 1,\n  },\n  tone: 'x'\n}`,
+    ],
+    [
+      'three levels deep',
+      `const base = {\n  nested: {\n    deeper: {\n      deepest: \`a\n  b\`,\n    },\n  },\n};`,
+      `{\n  nested: {\n    deeper: {\n      deepest: \`a\n  b\`,\n    },\n  },\n  tone: 'x'\n}`,
+    ],
+    [
+      'indented with tabs',
+      `const base = {\n\tnested: {\n\t\tdeep: \`a\n\tb\`,\n\t},\n};`,
+      `{\n\tnested: {\n\t\tdeep: \`a\n\tb\`,\n\t},\n\ttone: 'x'\n}`,
+    ],
+  ])(
+    "writes out a spread's members %s at the file's indent, leaving literal lines alone",
+    (_, code, text) => {
+      const story = `export const Story = { args: { v: { ...base, tone: 'x' } } };`;
+      expect(textOfValue(`${code}\n${story}`)).toBe(text);
+    }
+  );
+
+  it('writes out the elements of an array holding a spread as if their lines had no indent', () => {
+    const code = dedent`
+      const base = { a: 1 };
+      export const Story = {
+        args: {
+          v: [
+            { ...base },
+            {
+              z: 2,
+            },
+          ],
+        },
+      };
+    `;
+    expect(textOfValue(code)).toBe(`[{\n  a: 1\n}, {\n  z: 2,\n}]`);
+  });
+
   it('names nothing for a global or a parameter the expression declares itself', () => {
     expect(valueOf('', '(event) => Math.max(event.x, 0)')).toEqual({
       node: '(event) => Math.max(event.x, 0)',
diff --git a/code/core/src/csf-tools/story-shape/resolve-arg-value.ts b/code/core/src/csf-tools/story-shape/resolve-arg-value.ts
index ba7e2af3951f..63a5d476f75c 100644
--- a/code/core/src/csf-tools/story-shape/resolve-arg-value.ts
+++ b/code/core/src/csf-tools/story-shape/resolve-arg-value.ts
@@ -11,6 +11,7 @@ import {
   textOf,
   unwrapExpression,
 } from '../estree/ast.ts';
+import { detachedTextOf, reindent } from '../estree/editor.ts';
 import { analyzeScopes } from '../estree/scope.ts';
 import { type ImportRef } from './import-statements.ts';
 import { type ImportBinding, collectImportBindings } from './imports.ts';
@@ -101,9 +102,9 @@ const inlineSpreads = (node: Node, ctx: ReferenceContext, unresolved: string[]):
         .map((element) =>
           element === null
             ? ''
-            : element.type === 'SpreadElement'
-              ? textOf(element)
-              : placeableTextOf(inlineSpreads(element, ctx, unresolved))
+            : detachedTextOf(
+                element.type === 'SpreadElement' ? element : inlineSpreads(element, ctx, unresolved)
+              )
         )
         .join(', ')}]`
     );
@@ -187,13 +188,14 @@ const objectFrom = (
     // A shorthand prints its key and nothing else, so it may only stay shorthand while its value is
     // still the one the key stands for.
     const shorthand = 'type' in property && property.shorthand && value === property.value;
-    members.push(shorthand ? key : `${key}: ${placeableTextOf(value)}`);
+    members.push(shorthand ? key : `${key}: ${detachedTextOf(value)}`);
   }
   // One member per line, so formatters keep the object expanded.
+  const { indent } = ctx.editor;
   return rebuilt(
     members.length === 0
       ? '{}'
-      : `{\n${members.map((member) => `  ${member.replaceAll('\n', '\n  ')}`).join(',\n')}\n}`
+      : `{\n${members.map((member) => `${indent}${reindent(member, '', indent)}`).join(',\n')}\n}`
   );
 };
 

From 209b3fb450963574368557d05c9c5909d13d9776 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 14:42:03 +0200
Subject: [PATCH 295/326] fix(react): print a string arg JSX cannot hold as an
 expression

A JSX attribute string has no escapes, decodes entities and folds line
breaks, and JSX text also cannot hold braces or tags. A string arg with an
ampersand or a line break became a different attribute value, and children
with braces, angle brackets or an ampersand became different JSX. Those
strings now print as an expression, as one with a double quote already did.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../generateCodeSnippet.test.tsx              | 24 +++++++++++++++++++
 .../componentManifest/generateCodeSnippet.ts  |  7 ++++--
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/code/renderers/react/src/componentManifest/generateCodeSnippet.test.tsx b/code/renderers/react/src/componentManifest/generateCodeSnippet.test.tsx
index c17cca09a31c..c5df1c09657f 100644
--- a/code/renderers/react/src/componentManifest/generateCodeSnippet.test.tsx
+++ b/code/renderers/react/src/componentManifest/generateCodeSnippet.test.tsx
@@ -975,3 +975,27 @@ test('an arg value keeps a shorthand property shorthand', () => {
   `
   );
 });
+
+test('a string arg prints as an attribute only when JSX reads it back unchanged', () => {
+  const input = withCSF3(dedent`
+    export const Strings: Story = {
+      args: { quote: 'say "hi"', entity: 'a &amp; b', lines: 'a\\nb', path: 'C:\\\\temp' },
+    };
+  `);
+  expect(generateExample(input)).toMatchInlineSnapshot(
+    `"const Strings = () => <Button quote={'say "hi"'} entity={'a &amp; b'} lines={'a\\nb'} path="C:\\temp">Click me</Button>;"`
+  );
+});
+
+test('children that JSX text cannot hold stay an expression', () => {
+  const input = withCSF3(dedent`
+    export const Braces: Story = { args: { children: 'a {b} <c>' } };
+    export const Entity: Story = { args: { children: 'a &amp; b' } };
+    export const Lines: Story = { args: { children: 'a\\nb' } };
+  `);
+  expect(generateExample(input)).toMatchInlineSnapshot(`
+    "const Braces = () => <Button>{'a {b} <c>'}</Button>;
+    const Entity = () => <Button>{'a &amp; b'}</Button>;
+    const Lines = () => <Button>{'a\\nb'}</Button>;"
+  `);
+});
diff --git a/code/renderers/react/src/componentManifest/generateCodeSnippet.ts b/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
index 013f31335d50..30b6318c8394 100644
--- a/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
+++ b/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
@@ -259,7 +259,9 @@ const toAttr = (key: string, value: Node) => {
   if (value.type === 'Literal' && typeof value.value === 'boolean') {
     return value.value ? key : `${key}={false}`;
   }
-  if (isStringLiteral(value) && !value.value.includes('"')) {
+  // A JSX attribute string has no escapes, decodes entities and folds line breaks, so a value it
+  // cannot hold as written stays an expression.
+  if (isStringLiteral(value) && !/["&\r\n]/.test(value.value)) {
     return `${key}="${value.value}"`;
   }
   return `${key}={${placeableTextOf(value)}}`;
@@ -279,10 +281,11 @@ function injectedAttributes(merged: Args, existing: ReadonlySet<string>): string
   return attrs;
 }
 
+// JSX text cannot hold braces or tags, decodes entities and folds line breaks.
 const toJsxChildren = (node: Node | null | undefined) =>
   !node
     ? ''
-    : isStringLiteral(node)
+    : isStringLiteral(node) && !/[{}<>&\r\n]/.test(node.value)
       ? node.value
       : isJsx(node)
         ? textOf(node)

From 633887306f7a85df17620cb0776e9914413b81e6 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 14:42:06 +0200
Subject: [PATCH 296/326] fix(react): read only the story's own args into a
 snippet

`key in merged` also holds for a name every object inherits, so a render
reading `args.constructor` took Object as an arg and threw. Only an own
property of the args is inlined now, and an own arg with an empty name,
read as `args['']`, is inlined too.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../componentManifest/generateCodeSnippet.test.tsx    | 11 +++++++++++
 .../src/componentManifest/generateCodeSnippet.ts      |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/code/renderers/react/src/componentManifest/generateCodeSnippet.test.tsx b/code/renderers/react/src/componentManifest/generateCodeSnippet.test.tsx
index c5df1c09657f..6d7667bf34fc 100644
--- a/code/renderers/react/src/componentManifest/generateCodeSnippet.test.tsx
+++ b/code/renderers/react/src/componentManifest/generateCodeSnippet.test.tsx
@@ -999,3 +999,14 @@ test('children that JSX text cannot hold stay an expression', () => {
     const Lines = () => <Button>{'a\\nb'}</Button>;"
   `);
 });
+
+test('a read of a name every object inherits is not an arg', () => {
+  const input = withCSF3(dedent`
+    export const Inherited: Story = {
+      render: (args) => <Button title={args.constructor} />,
+    };
+  `);
+  expect(generateExample(input)).toMatchInlineSnapshot(
+    `"const Inherited = (args) => <Button title={args.constructor} />;"`
+  );
+});
diff --git a/code/renderers/react/src/componentManifest/generateCodeSnippet.ts b/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
index 30b6318c8394..b1a5006dfdc7 100644
--- a/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
+++ b/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
@@ -369,7 +369,7 @@ function rewriteJsx(
         continue;
       }
       const key = getArgsMemberKey(a.value.expression);
-      if (key && key in merged) {
+      if (key !== null && Object.hasOwn(merged, key)) {
         edits.push({ start: a.start, end: a.end, text: toAttr(a.name.name, merged[key]) });
         changed = true;
       }

From deebf2f32ca80e774bd262442c5658287d00ef9a Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 15:15:39 +0200
Subject: [PATCH 297/326] fix(builder-vite): print the found Vite config path
 with forward slashes

The discovery-miss warning embedded the path from empathic's
find.any verbatim. On Windows that is a backslash path, so the
suggested snippet `viteConfigPath: 'C:\project\vite.config.mjs'`
is not a valid path once pasted into a JS string (`\v` is a
vertical tab), and the nested-configDir test failed on the daily
Windows unit job because it expected the posix form.

Normalise the path with pathe before printing it, compute the
expected string the same way in the test, and add a test that
feeds a Windows path and expects forward slashes.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../builder-vite/src/vite-config.test.ts      | 27 ++++++++++++++++---
 code/builders/builder-vite/src/vite-config.ts |  9 +++++--
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/code/builders/builder-vite/src/vite-config.test.ts b/code/builders/builder-vite/src/vite-config.test.ts
index 88c09db09d87..50f1f00d29d4 100644
--- a/code/builders/builder-vite/src/vite-config.test.ts
+++ b/code/builders/builder-vite/src/vite-config.test.ts
@@ -9,6 +9,7 @@ import { getProjectRoot } from 'storybook/internal/common';
 import type { Options, Presets } from 'storybook/internal/types';
 
 import * as find from 'empathic/find';
+import { normalize } from 'pathe';
 import { loadConfigFromFile } from 'vite';
 
 import { storybookConfigPlugin } from './plugins/storybook-config-plugin.ts';
@@ -208,8 +209,11 @@ describe('resolveVitePublicDir', () => {
 
 describe('discovery miss reporting', () => {
   it('warns when configDir is nested and the Vite config sits at the project root', async () => {
+    // `resolve` gives the drive-letter, backslash form on Windows, as `find.any` does there.
+    const found = resolve('/project/vite.config.mjs');
+    const printed = normalize(found);
     vi.mocked(getProjectRoot).mockReturnValue('/project');
-    vi.mocked(find.any).mockReturnValueOnce(resolve('/project/vite.config.mjs'));
+    vi.mocked(find.any).mockReturnValueOnce(found);
     loadConfigFromFileMock.mockResolvedValueOnce(null);
 
     await commonConfig(
@@ -222,13 +226,30 @@ describe('discovery miss reporting', () => {
       last: '/project',
     });
     expect(loggerWarnMock).toHaveBeenCalledTimes(1);
-    expect(loggerWarnMock.mock.calls[0][0]).toContain('/project/vite.config.mjs');
+    expect(loggerWarnMock.mock.calls[0][0]).toContain(`found at "${printed}"`);
     expect(loggerWarnMock.mock.calls[0][0]).toContain(
-      "core: { builder: { options: { viteConfigPath: '/project/vite.config.mjs' } } }"
+      `core: { builder: { options: { viteConfigPath: '${printed}' } } }`
     );
     expect(loggerWarnMock.mock.calls[0][0]).toContain('viteConfigPath: null');
   });
 
+  it('prints a Windows config path with forward slashes so the snippet stays pasteable', async () => {
+    vi.mocked(getProjectRoot).mockReturnValue('/project');
+    vi.mocked(find.any).mockReturnValueOnce('C:\\project\\vite.config.mjs');
+    loadConfigFromFileMock.mockResolvedValueOnce(null);
+
+    await commonConfig(
+      { ...dummyOptions, configDir: '/project/configuration/storybook' },
+      'development'
+    );
+
+    expect(loggerWarnMock).toHaveBeenCalledTimes(1);
+    expect(loggerWarnMock.mock.calls[0][0]).toContain('found at "C:/project/vite.config.mjs"');
+    expect(loggerWarnMock.mock.calls[0][0]).toContain(
+      "core: { builder: { options: { viteConfigPath: 'C:/project/vite.config.mjs' } } }"
+    );
+  });
+
   it('stays quiet when no Vite config exists in the project at all', async () => {
     vi.mocked(getProjectRoot).mockReturnValue('/project');
     vi.mocked(find.any).mockReturnValueOnce(undefined);
diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts
index 729e0820a964..912c1b6147ef 100644
--- a/code/builders/builder-vite/src/vite-config.ts
+++ b/code/builders/builder-vite/src/vite-config.ts
@@ -10,6 +10,7 @@ import { once } from 'storybook/internal/node-logger';
 import type { Options } from 'storybook/internal/types';
 
 import * as find from 'empathic/find';
+import { normalize } from 'pathe';
 import { dedent } from 'ts-dedent';
 import type {
   ConfigEnv,
@@ -64,15 +65,19 @@ function reportUnloadedUserViteConfig(configDir: string, projectRoot: string): v
     return;
   }
 
-  const unloadedConfig = find.any(DEFAULT_VITE_CONFIG_FILES, {
+  const found = find.any(DEFAULT_VITE_CONFIG_FILES, {
     cwd: projectRoot,
     last: root,
   });
 
-  if (!unloadedConfig) {
+  if (!found) {
     return;
   }
 
+  // Forward slashes keep the pasteable snippet valid on Windows, where a backslash path inside
+  // a JS string literal reads as escapes (`'C:\vite.config.ts'` holds a vertical tab).
+  const unloadedConfig = normalize(found);
+
   warnOnce(
     dedent`
       No user Vite config was loaded: Storybook auto-discovers a Vite config file in "${projectRoot}" (the directory above your Storybook config dir "${configDir}"), and none was found there.

From 29a935a7b81cb327d4be87f4c7dd4c67488e7b14 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 15:29:08 +0200
Subject: [PATCH 298/326] refactor(csf-tools): move spread carrying and the
 detached-member roots out of CsfObject.ts

Spread carrying moves to ObjectMembers.ts together with lookupProperty,
which literalMember reads through. ObjectRoot, MemberInsert, literalRoot
and detachedMember move to ObjectRoot.ts: CsfObject.ts calls literalRoot
itself, so CsfObjectDiscovery.ts would have made a runtime import cycle.

No behaviour change. CsfObject.ts goes from 1,140 to 897 lines.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/ConfigFile.ts         |   2 +-
 code/core/src/csf-tools/ConfigObject.ts       |   5 +-
 code/core/src/csf-tools/CsfObject.ts          | 247 +-----------------
 code/core/src/csf-tools/CsfObjectDiscovery.ts |   5 +-
 code/core/src/csf-tools/ObjectMembers.ts      | 168 ++++++++++++
 code/core/src/csf-tools/ObjectRoot.ts         |  86 ++++++
 6 files changed, 259 insertions(+), 254 deletions(-)
 create mode 100644 code/core/src/csf-tools/ObjectMembers.ts
 create mode 100644 code/core/src/csf-tools/ObjectRoot.ts

diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index c8fa1451a71d..770fb13d0adf 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -17,8 +17,8 @@ import {
   type CsfObjectHost,
   type CsfValue,
   createCsfObject,
-  literalRoot,
 } from './CsfObject.ts';
+import { literalRoot } from './ObjectRoot.ts';
 import {
   type E,
   EstreeParseError,
diff --git a/code/core/src/csf-tools/ConfigObject.ts b/code/core/src/csf-tools/ConfigObject.ts
index a285268e31bf..aa4aef1d591c 100644
--- a/code/core/src/csf-tools/ConfigObject.ts
+++ b/code/core/src/csf-tools/ConfigObject.ts
@@ -3,12 +3,9 @@ import {
   type CsfMutationDiagnostic,
   type CsfObjectEditor,
   type CsfObjectHost,
-  type MemberInsert,
-  type ObjectRoot,
   createCsfObject,
-  detachedMember,
-  literalRoot,
 } from './CsfObject.ts';
+import { type MemberInsert, type ObjectRoot, detachedMember, literalRoot } from './ObjectRoot.ts';
 import {
   type E,
   type Node,
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index e6e473bc1b75..6f0af6313908 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -1,9 +1,10 @@
+import { type Access, carriedSpread, carriedSpreads, lookupProperty } from './ObjectMembers.ts';
+import { type MemberInsert, type ObjectRoot, literalRoot } from './ObjectRoot.ts';
 import {
   type E,
   type Node,
   type Property,
   type SourceLocation,
-  type Span,
   locationOf,
   parseExpression,
   staticKey,
@@ -11,25 +12,16 @@ import {
 } from './estree/ast.ts';
 import {
   type SourceEditor,
-  appendMembers,
   detachedTextOf,
-  groupMembers,
-  prependMembers,
   printKey,
-  printMemberAccess,
   printMembers,
   printValue,
-  removeMembers,
-  renameKey,
-  renamedMemberText,
-  replaceValue,
 } from './estree/editor.ts';
 import {
   type CsfValue,
   UNRESOLVED,
   isEvaluationInert,
   nodeWithoutParse,
-  placeableValueSource,
   readValue,
   resolveExpression,
   valueSource,
@@ -261,252 +253,17 @@ export interface CsfObjectOptions {
   stories?: boolean;
 }
 
-// `text` is the whole member, including its leading comments.
-export interface MemberInsert {
-  key: string;
-  value: string;
-  text: string;
-}
-
-// Object literals edit their braces; a config made of named exports edits export declarations.
-export interface ObjectRoot {
-  readonly properties: readonly E.ObjectPropertyKind[];
-  readonly detached: boolean;
-  // The object literal itself, when the root is one.
-  readonly node?: E.ObjectExpression;
-  append(members: MemberInsert[]): void;
-  prepend(members: MemberInsert[]): void;
-  remove(members: Property[]): void;
-  replaceValue(member: Property, text: string): void;
-  // `key` is the raw property name.
-  rename(member: Property, key: string): void;
-  // Replaces contiguous members with `key: { ...members }`.
-  group(members: Property[], key: string): void;
-  // The member as text to insert elsewhere under another key.
-  take(member: Property, key: string): MemberInsert;
-}
-
-// A member of an `ObjectRoot` that is not written as one, such as a named export or a
-// `Story.name = value` assignment. Its key and value are nodes of the file, so every span read from
-// it is real; the member itself only exists in memory, spanning `statement`.
-export const detachedMember = (
-  key: Property['key'],
-  value: Property['value'],
-  computed: boolean,
-  statement: Span
-): Property => ({
-  type: 'Property',
-  kind: 'init',
-  method: false,
-  shorthand: false,
-  computed,
-  key,
-  value,
-  start: statement.start,
-  end: statement.end,
-});
-
 export interface CsfObjectHost {
   readonly editor: SourceEditor;
   // Located again after every commit.
   root(): ObjectRoot | undefined;
 }
 
-export const literalRoot = (editor: SourceEditor, object: E.ObjectExpression): ObjectRoot => ({
-  properties: object.properties,
-  detached: false,
-  node: object,
-  append: (members) =>
-    appendMembers(
-      editor,
-      object,
-      members.map((member) => member.text)
-    ),
-  prepend: (members) =>
-    prependMembers(
-      editor,
-      object,
-      members.map((member) => member.text)
-    ),
-  remove: (members) => removeMembers(editor, object, members),
-  replaceValue: (member, text) => replaceValue(editor, member, text),
-  rename: (member, key) => renameKey(editor, member, printKey(key, editor.quote)),
-  group: (members, key) => groupMembers(editor, object, members, key),
-  take: (member, key) => ({
-    key,
-    value: placeableValueSource(editor, member),
-    text: renamedMemberText(editor, object, member, printKey(key, editor.quote)),
-  }),
-});
-
 type ReportDiagnostic = (diagnostic: CsfMutationDiagnostic) => void;
 type MarkChanged = () => void;
 
-type PropertyLookup =
-  | { ok: true; property?: Property }
-  | { ok: false; code: CsfMutationDiagnosticCode; node: Node };
-
 const unsafePath = (path: readonly string[]) => path.includes('__proto__');
 
-// A `set` appends a missing field after every member, so it overrides what they could provide;
-// a removal could reveal what an earlier member provides.
-type Access = 'read' | 'set' | 'remove';
-
-const lookupProperty = (
-  properties: readonly E.ObjectPropertyKind[],
-  name: string,
-  access: Access = 'read'
-): PropertyLookup => {
-  const matches: Property[] = [];
-  let unknown: { code: CsfMutationDiagnosticCode; node: Node } | undefined;
-  let unknownAfterMatch: { code: CsfMutationDiagnosticCode; node: Node } | undefined;
-
-  for (const member of properties) {
-    const key = member.type === 'SpreadElement' ? undefined : staticKey(member);
-    if (key === undefined) {
-      unknown = {
-        code: member.type === 'SpreadElement' ? 'spread-field' : 'dynamic-key',
-        node: member,
-      };
-      if (matches.length > 0) {
-        unknownAfterMatch = unknown;
-      }
-      continue;
-    }
-    if (key !== name) {
-      continue;
-    }
-    if (member.type !== 'Property' || member.kind !== 'init') {
-      return { ok: false, code: 'unsupported-member', node: member };
-    }
-    matches.push(member);
-  }
-
-  if (matches.length > 1) {
-    return { ok: false, code: 'duplicate-field', node: matches[1] };
-  }
-  // A member whose key is only known at runtime cannot shadow an explicit property declared after
-  // it, but it can shadow one declared before it, and with no explicit property at all it leaves
-  // both the value and its absence unproven.
-  const unproven =
-    unknownAfterMatch ??
-    (access === 'remove' || (access === 'read' && matches.length === 0) ? unknown : undefined);
-  if (unproven) {
-    return { ok: false, code: unproven.code, node: unproven.node };
-  }
-  return { ok: true, property: matches[0] };
-};
-
-// A spread a parent created after it carries forward, with the object literal of the local
-// constant it spreads, whose members are known.
-type CarriedSpread = { source: string; literal: E.ObjectExpression | undefined };
-
-// A reference reads the same value when it is read again.
-const isReference = (node: Node): boolean =>
-  node.type === 'Identifier' ||
-  (node.type === 'MemberExpression' &&
-    !node.computed &&
-    !node.optional &&
-    node.property.type === 'Identifier' &&
-    isReference(node.object));
-
-const carriedSpreads = (
-  editor: SourceEditor,
-  properties: readonly E.ObjectPropertyKind[]
-):
-  | { ok: true; spreads: CarriedSpread[] }
-  | { ok: false; code: CsfMutationDiagnosticCode; node: Node } => {
-  const spreads: CarriedSpread[] = [];
-  for (const member of properties) {
-    if (member.type !== 'SpreadElement') {
-      if (staticKey(member) === undefined) {
-        return { ok: false, code: 'dynamic-key', node: member };
-      }
-      continue;
-    }
-    const reference = unwrapExpression(member.argument);
-    if (!isReference(reference)) {
-      return { ok: false, code: 'spread-field', node: member };
-    }
-    const binding =
-      reference.type === 'Identifier' ? editor.scopes.bindingOf(reference) : undefined;
-    const init =
-      binding?.constant && binding.node.type === 'VariableDeclarator'
-        ? unwrapExpression(binding.node.init)
-        : undefined;
-    // A type assertion stays, so the carried member has the type the spread was given.
-    const source = editor.source(member.argument);
-    spreads.push({
-      source: reference === member.argument ? source : `(${source})`,
-      literal: init?.type === 'ObjectExpression' ? init : undefined,
-    });
-  }
-  return { ok: true, spreads };
-};
-
-// What an object literal is known to hold at `key`: no member, the value of one, or unknown.
-const literalMember = (literal: E.ObjectExpression, key: string) => {
-  const lookup = lookupProperty(literal.properties, key);
-  if (!lookup.ok || lookup.property?.method) {
-    return { kind: 'unknown' as const };
-  }
-  if (!lookup.property) {
-    return { kind: 'missing' as const };
-  }
-  const value = unwrapExpression(lookup.property.value);
-  return { kind: 'value' as const, literal: value.type === 'ObjectExpression' ? value : undefined };
-};
-
-// The spread that writes the member at `keys` of `spreads` into a new object or array, or
-// `undefined` when none can have it. The last spread that may have the first key wins, earlier ones
-// follow after `??` in case it lacks it; a local literal known to have it ends that list, and one
-// known to lack it is skipped. A member below a spread's own is read with `?.`.
-const carriedSpread = (
-  spreads: readonly CarriedSpread[],
-  keys: readonly string[],
-  quote: string,
-  into: 'object' | 'array'
-) => {
-  const spreadOf = (expression: string, alternatives = false) =>
-    into === 'array'
-      ? `...(${expression} ?? [])`
-      : `...${alternatives ? `(${expression})` : expression}`;
-  const [first, ...rest] = keys;
-  const candidates: { expression: string; literal: E.ObjectExpression | undefined }[] = [];
-  for (const spread of [...spreads].reverse()) {
-    const member = spread.literal ? literalMember(spread.literal, first) : undefined;
-    if (member?.kind === 'missing') {
-      continue;
-    }
-    candidates.push({
-      expression: `${spread.source}${printMemberAccess(first, quote)}`,
-      literal: member?.kind === 'value' ? member.literal : undefined,
-    });
-    if (member?.kind === 'value') {
-      break;
-    }
-  }
-  if (candidates.length === 0) {
-    return undefined;
-  }
-  if (candidates.length > 1) {
-    const either = candidates.map(({ expression }) => expression).join(' ?? ');
-    return rest.length === 0
-      ? spreadOf(either, true)
-      : spreadOf(`(${either})${rest.map((key) => printMemberAccess(key, quote, true)).join('')}`);
-  }
-  let [{ expression, literal }] = candidates;
-  for (const key of rest) {
-    const member = literal ? literalMember(literal, key) : undefined;
-    if (member?.kind === 'missing') {
-      return undefined;
-    }
-    expression += printMemberAccess(key, quote, !literal);
-    literal = member?.kind === 'value' ? member.literal : undefined;
-  }
-  return spreadOf(expression);
-};
-
 class Editor implements CsfObjectEditor {
   #changed = false;
 
diff --git a/code/core/src/csf-tools/CsfObjectDiscovery.ts b/code/core/src/csf-tools/CsfObjectDiscovery.ts
index 8175c843c34c..4e28eaf10f93 100644
--- a/code/core/src/csf-tools/CsfObjectDiscovery.ts
+++ b/code/core/src/csf-tools/CsfObjectDiscovery.ts
@@ -7,12 +7,9 @@ import {
   type CsfObjectHost,
   type CsfObjectOptions,
   type CsfObjectTarget,
-  type MemberInsert,
-  type ObjectRoot,
   createCsfObject,
-  detachedMember,
-  literalRoot,
 } from './CsfObject.ts';
+import { type MemberInsert, type ObjectRoot, detachedMember, literalRoot } from './ObjectRoot.ts';
 import {
   type E,
   type Node,
diff --git a/code/core/src/csf-tools/ObjectMembers.ts b/code/core/src/csf-tools/ObjectMembers.ts
new file mode 100644
index 000000000000..a151ce747db7
--- /dev/null
+++ b/code/core/src/csf-tools/ObjectMembers.ts
@@ -0,0 +1,168 @@
+// Which member of an object literal a key statically reads, and the spreads that carry it into a new
+// object.
+import type { CsfMutationDiagnosticCode } from './CsfObject.ts';
+import { type E, type Node, type Property, staticKey, unwrapExpression } from './estree/ast.ts';
+import { type SourceEditor, printMemberAccess } from './estree/editor.ts';
+
+type PropertyLookup =
+  | { ok: true; property?: Property }
+  | { ok: false; code: CsfMutationDiagnosticCode; node: Node };
+
+// A `set` appends a missing field after every member, so it overrides what they could provide;
+// a removal could reveal what an earlier member provides.
+export type Access = 'read' | 'set' | 'remove';
+
+export const lookupProperty = (
+  properties: readonly E.ObjectPropertyKind[],
+  name: string,
+  access: Access = 'read'
+): PropertyLookup => {
+  const matches: Property[] = [];
+  let unknown: { code: CsfMutationDiagnosticCode; node: Node } | undefined;
+  let unknownAfterMatch: { code: CsfMutationDiagnosticCode; node: Node } | undefined;
+
+  for (const member of properties) {
+    const key = member.type === 'SpreadElement' ? undefined : staticKey(member);
+    if (key === undefined) {
+      unknown = {
+        code: member.type === 'SpreadElement' ? 'spread-field' : 'dynamic-key',
+        node: member,
+      };
+      if (matches.length > 0) {
+        unknownAfterMatch = unknown;
+      }
+      continue;
+    }
+    if (key !== name) {
+      continue;
+    }
+    if (member.type !== 'Property' || member.kind !== 'init') {
+      return { ok: false, code: 'unsupported-member', node: member };
+    }
+    matches.push(member);
+  }
+
+  if (matches.length > 1) {
+    return { ok: false, code: 'duplicate-field', node: matches[1] };
+  }
+  // A member whose key is only known at runtime cannot shadow an explicit property declared after
+  // it, but it can shadow one declared before it, and with no explicit property at all it leaves
+  // both the value and its absence unproven.
+  const unproven =
+    unknownAfterMatch ??
+    (access === 'remove' || (access === 'read' && matches.length === 0) ? unknown : undefined);
+  if (unproven) {
+    return { ok: false, code: unproven.code, node: unproven.node };
+  }
+  return { ok: true, property: matches[0] };
+};
+
+// A spread a parent created after it carries forward, with the object literal of the local
+// constant it spreads, whose members are known.
+type CarriedSpread = { source: string; literal: E.ObjectExpression | undefined };
+
+// A reference reads the same value when it is read again.
+const isReference = (node: Node): boolean =>
+  node.type === 'Identifier' ||
+  (node.type === 'MemberExpression' &&
+    !node.computed &&
+    !node.optional &&
+    node.property.type === 'Identifier' &&
+    isReference(node.object));
+
+export const carriedSpreads = (
+  editor: SourceEditor,
+  properties: readonly E.ObjectPropertyKind[]
+):
+  | { ok: true; spreads: CarriedSpread[] }
+  | { ok: false; code: CsfMutationDiagnosticCode; node: Node } => {
+  const spreads: CarriedSpread[] = [];
+  for (const member of properties) {
+    if (member.type !== 'SpreadElement') {
+      if (staticKey(member) === undefined) {
+        return { ok: false, code: 'dynamic-key', node: member };
+      }
+      continue;
+    }
+    const reference = unwrapExpression(member.argument);
+    if (!isReference(reference)) {
+      return { ok: false, code: 'spread-field', node: member };
+    }
+    const binding =
+      reference.type === 'Identifier' ? editor.scopes.bindingOf(reference) : undefined;
+    const init =
+      binding?.constant && binding.node.type === 'VariableDeclarator'
+        ? unwrapExpression(binding.node.init)
+        : undefined;
+    // A type assertion stays, so the carried member has the type the spread was given.
+    const source = editor.source(member.argument);
+    spreads.push({
+      source: reference === member.argument ? source : `(${source})`,
+      literal: init?.type === 'ObjectExpression' ? init : undefined,
+    });
+  }
+  return { ok: true, spreads };
+};
+
+// What an object literal is known to hold at `key`: no member, the value of one, or unknown.
+const literalMember = (literal: E.ObjectExpression, key: string) => {
+  const lookup = lookupProperty(literal.properties, key);
+  if (!lookup.ok || lookup.property?.method) {
+    return { kind: 'unknown' as const };
+  }
+  if (!lookup.property) {
+    return { kind: 'missing' as const };
+  }
+  const value = unwrapExpression(lookup.property.value);
+  return { kind: 'value' as const, literal: value.type === 'ObjectExpression' ? value : undefined };
+};
+
+// The spread that writes the member at `keys` of `spreads` into a new object or array, or
+// `undefined` when none can have it. The last spread that may have the first key wins, earlier ones
+// follow after `??` in case it lacks it; a local literal known to have it ends that list, and one
+// known to lack it is skipped. A member below a spread's own is read with `?.`.
+export const carriedSpread = (
+  spreads: readonly CarriedSpread[],
+  keys: readonly string[],
+  quote: string,
+  into: 'object' | 'array'
+) => {
+  const spreadOf = (expression: string, alternatives = false) =>
+    into === 'array'
+      ? `...(${expression} ?? [])`
+      : `...${alternatives ? `(${expression})` : expression}`;
+  const [first, ...rest] = keys;
+  const candidates: { expression: string; literal: E.ObjectExpression | undefined }[] = [];
+  for (const spread of [...spreads].reverse()) {
+    const member = spread.literal ? literalMember(spread.literal, first) : undefined;
+    if (member?.kind === 'missing') {
+      continue;
+    }
+    candidates.push({
+      expression: `${spread.source}${printMemberAccess(first, quote)}`,
+      literal: member?.kind === 'value' ? member.literal : undefined,
+    });
+    if (member?.kind === 'value') {
+      break;
+    }
+  }
+  if (candidates.length === 0) {
+    return undefined;
+  }
+  if (candidates.length > 1) {
+    const either = candidates.map(({ expression }) => expression).join(' ?? ');
+    return rest.length === 0
+      ? spreadOf(either, true)
+      : spreadOf(`(${either})${rest.map((key) => printMemberAccess(key, quote, true)).join('')}`);
+  }
+  let [{ expression, literal }] = candidates;
+  for (const key of rest) {
+    const member = literal ? literalMember(literal, key) : undefined;
+    if (member?.kind === 'missing') {
+      return undefined;
+    }
+    expression += printMemberAccess(key, quote, !literal);
+    literal = member?.kind === 'value' ? member.literal : undefined;
+  }
+  return spreadOf(expression);
+};
diff --git a/code/core/src/csf-tools/ObjectRoot.ts b/code/core/src/csf-tools/ObjectRoot.ts
new file mode 100644
index 000000000000..bcc1ed830d14
--- /dev/null
+++ b/code/core/src/csf-tools/ObjectRoot.ts
@@ -0,0 +1,86 @@
+// The object a `CsfObject` edits: an object literal, or members written as separate statements.
+import type { E, Property, Span } from './estree/ast.ts';
+import {
+  type SourceEditor,
+  appendMembers,
+  groupMembers,
+  prependMembers,
+  printKey,
+  removeMembers,
+  renameKey,
+  renamedMemberText,
+  replaceValue,
+} from './estree/editor.ts';
+import { placeableValueSource } from './estree/values.ts';
+
+// `text` is the whole member, including its leading comments.
+export interface MemberInsert {
+  key: string;
+  value: string;
+  text: string;
+}
+
+// Object literals edit their braces; a config made of named exports edits export declarations.
+export interface ObjectRoot {
+  readonly properties: readonly E.ObjectPropertyKind[];
+  readonly detached: boolean;
+  // The object literal itself, when the root is one.
+  readonly node?: E.ObjectExpression;
+  append(members: MemberInsert[]): void;
+  prepend(members: MemberInsert[]): void;
+  remove(members: Property[]): void;
+  replaceValue(member: Property, text: string): void;
+  // `key` is the raw property name.
+  rename(member: Property, key: string): void;
+  // Replaces contiguous members with `key: { ...members }`.
+  group(members: Property[], key: string): void;
+  // The member as text to insert elsewhere under another key.
+  take(member: Property, key: string): MemberInsert;
+}
+
+// A member of an `ObjectRoot` that is not written as one, such as a named export or a
+// `Story.name = value` assignment. Its key and value are nodes of the file, so every span read from
+// it is real; the member itself only exists in memory, spanning `statement`.
+export const detachedMember = (
+  key: Property['key'],
+  value: Property['value'],
+  computed: boolean,
+  statement: Span
+): Property => ({
+  type: 'Property',
+  kind: 'init',
+  method: false,
+  shorthand: false,
+  computed,
+  key,
+  value,
+  start: statement.start,
+  end: statement.end,
+});
+
+export const literalRoot = (editor: SourceEditor, object: E.ObjectExpression): ObjectRoot => ({
+  properties: object.properties,
+  detached: false,
+  node: object,
+  append: (members) =>
+    appendMembers(
+      editor,
+      object,
+      members.map((member) => member.text)
+    ),
+  prepend: (members) =>
+    prependMembers(
+      editor,
+      object,
+      members.map((member) => member.text)
+    ),
+  remove: (members) => removeMembers(editor, object, members),
+  replaceValue: (member, text) => replaceValue(editor, member, text),
+  rename: (member, key) => renameKey(editor, member, printKey(key, editor.quote)),
+  group: (members, key) => groupMembers(editor, object, members, key),
+  take: (member, key) => ({
+    key,
+    value: placeableValueSource(editor, member),
+    text: renamedMemberText(editor, object, member, printKey(key, editor.quote)),
+  }),
+});

From 87c87e9183b1fd10b0fcf338fea4c4cd7eaa2780 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 15:31:43 +0200
Subject: [PATCH 299/326] test(csf-tools): pin three review fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- A non-ASCII key such as `ñame` reads and writes as an identifier key.
- `config.set(['b'], { type: 'toString' })` writes plain data: an
  `Object.prototype` key is not an AST node type.
- A move refused at a non-object, a call spread or a computed key
  leaves the file byte-identical.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/CsfObject.test.ts | 50 +++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index 3e96314feaf0..f45bbedbf431 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -188,6 +188,16 @@ describe('CsfObject', () => {
     }
   );
 
+  it.each(['toString', 'hasOwnProperty', 'constructor'])(
+    'writes a config value whose type %s is an Object.prototype key as data',
+    (type) => {
+      const config = loadConfig(`export default { a: 'x' };`).parse();
+
+      expect(config.set(['b'], { type })).toEqual({ ok: true, changed: true });
+      expect(printConfig(config).code).toBe(`export default { a: 'x', b: { type: '${type}' } };`);
+    }
+  );
+
   it('places copied expressions so the surrounding code survives', () => {
     const csf = parse(`export default { a: (1, 2) };\nexport const B = { b: 0 };`);
     const [meta, story] = csf.objects();
@@ -962,6 +972,33 @@ describe('CsfObject', () => {
     expect(printCsf(csf).code).toBe(source);
   });
 
+  it.each([
+    {
+      reason: 'into a value that is not an object',
+      code: 'unsupported-member',
+      source: `export default { parameters: { docs: true, subtitle: 'New' } };`,
+    },
+    {
+      reason: 'past a spread of a call',
+      code: 'spread-field',
+      source: `export default { parameters: { ...getBase(), subtitle: 'New' } };`,
+    },
+    {
+      reason: 'past a computed key',
+      code: 'dynamic-key',
+      source: `export default { parameters: { [key]: {}, subtitle: 'New' } };`,
+    },
+  ])('leaves the file byte-identical when a move $reason is refused', ({ source, code }) => {
+    const csf = parse(source);
+    const [meta] = csf.objects({ meta: true, stories: false });
+
+    expect(meta.move(['parameters', 'subtitle'], ['parameters', 'docs', 'subtitle'])).toMatchObject(
+      { ok: false, changed: false, diagnostic: { code } }
+    );
+    expect(csf.changed).toBe(false);
+    expect(printCsf(csf).code).toBe(source);
+  });
+
   it('rejects moving a field below itself without changing the source', () => {
     const source = `export default { parameters: { docs: { source: true } } };`;
     const csf = parse(source);
@@ -1007,6 +1044,19 @@ describe('CsfObject', () => {
     expect(printCsf(csf).code).not.toContain(`1: 'one'`);
   });
 
+  it('reads and writes a non-ASCII key of a story as an identifier key', () => {
+    const csf = parse(`export default {};\nexport const A = { args: { ñame: 'a' } };`);
+    const [story] = csf.objects({ meta: false });
+
+    expect(story.getValue(['args', 'ñame'])).toBe('a');
+    expect(story.set(['args', 'ñandú'], 'b')).toEqual({ ok: true, changed: true });
+    expect(story.set(['parameters'], { ñame: 1, 'a-b': 2 })).toEqual({ ok: true, changed: true });
+    expect(textOf(story.get(['args'])!)).toBe(`{ ñame: 'a', ñandú: 'b' }`);
+    expect(printCsf(csf).code).toBe(
+      `export default {};\nexport const A = { args: { ñame: 'a', ñandú: 'b' }, parameters: { ñame: 1, 'a-b': 2 } };`
+    );
+  });
+
   it('rejects reassigned direct exports', () => {
     const csf = parse(`
       export default { title: 'Example' };

From 905fd4c21d20705d0a10df1bc4686a4633224407 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 15:35:12 +0200
Subject: [PATCH 300/326] fix(csf-tools): carry a spread only when its base is
 never changed after its declaration
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A story `{ ...Base }` trusted `Base`'s object literal even when
`Base.args = …` or `Object.assign(Base, …)` added members later, so
`set(['args', 'a'], 1)` wrote `args: { a: 1 }` and dropped
`Base.args.x`.

The literal is now trusted only when every reference to the binding
reads it: a spread (also into JSX), an export, a type query, or a member
read at any depth, called or not (`await Base.play(c)`). A write to the
binding or a member path of it, or the binding escaping (a call
argument, an alias), makes it unknown, so the carried member reads
through the spread as a non-literal base already did:
`args: { ...Base.args, a: 1 }`.

Only the literal's own members are trusted. A copy `{ ...Base }` shares
the objects it holds, so a nested literal is read through as well:
`args: { ...Base.args, b: { ...Base.args.b, w: 1 } }`.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/CsfObject.test.ts | 87 +++++++++++++++++++++
 code/core/src/csf-tools/ObjectMembers.ts  | 95 ++++++++++++++++++-----
 2 files changed, 164 insertions(+), 18 deletions(-)

diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index f45bbedbf431..35455988b5f1 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -711,6 +711,36 @@ describe('CsfObject', () => {
       ['args', 'a'],
       "export const A = { ...Base, args: { a: 'x' } };",
     ],
+    [
+      'a spread of a local object that other code only names as a type',
+      'const Base = { title: "B" };\ntype BaseType = typeof Base.title;\nexport const A = { ...Base };',
+      ['args', 'a'],
+      "export const A = { ...Base, args: { a: 'x' } };",
+    ],
+    [
+      'a spread of a local object whose play another story calls',
+      'const Base = { args: {}, play: async () => {} };\nexport const A = { ...Base, play: async (c) => { await Base.play(c); await Base.play?.(c); } };',
+      ['parameters', 'a'],
+      "export const A = { ...Base, play: async (c) => { await Base.play(c); await Base.play?.(c); }, parameters: { a: 'x' } };",
+    ],
+    [
+      'a spread of a local object whose args a render spreads into JSX',
+      'const Base = { args: {} };\nexport const A = { ...Base, render: (args) => <C {...Base.args} /> };',
+      ['parameters', 'a'],
+      "export const A = { ...Base, render: (args) => <C {...Base.args} />, parameters: { a: 'x' } };",
+    ],
+    [
+      'a spread of a local object a member of which is already spread',
+      'const Base = { title: "B" };\nexport const A = { ...Base, args: { ...Base.args } };',
+      ['parameters', 'a'],
+      "export const A = { ...Base, args: { ...Base.args }, parameters: { a: 'x' } };",
+    ],
+    [
+      'a spread of a local object whose nested object lacks the field',
+      'const Base = { parameters: {} };\nexport const A = { ...Base };',
+      ['parameters', 'docs', 'a'],
+      "export const A = { ...Base, parameters: { ...Base.parameters, docs: { ...Base.parameters.docs, a: 'x' } } };",
+    ],
     [
       'a spread of a local object, two parents deep',
       'const Base = { parameters: { docs: { y: 1 } } };\nexport const A = { ...Base };',
@@ -759,6 +789,63 @@ describe('CsfObject', () => {
     }
   );
 
+  it.each([
+    ['an assignment', 'const Base = { render: () => null };\nBase.args = { x: 1 };'],
+    [
+      'Object.assign',
+      'const Base = { render: () => null };\nObject.assign(Base, { args: { x: 1 } });',
+    ],
+    [
+      'an assignment to an exported base',
+      'export const Base = { render: () => null };\nBase.args = { x: 1 };',
+    ],
+    [
+      'a destructuring assignment',
+      'const Base = { render: () => null };\n({ args: Base.args } = source);',
+    ],
+    ['a call it is passed to', 'const Base = { render: () => null };\nmutate(Base);'],
+    ['an alias', 'const Base = { render: () => null };\nconst Alias = Base;'],
+  ])(
+    'reads through a spread whose base gets members from %s after its declaration',
+    (_case, base) => {
+      const csf = parse(`export default { title: 'X' };\n${base}\nexport const A = { ...Base };`);
+      const story = csf
+        .objects({ meta: false })
+        .find(({ target }) => target.kind === 'story' && target.exportName === 'A')!;
+
+      expect(story.set(['args', 'a'], 'x')).toEqual({ ok: true, changed: true });
+      expect(printCsf(csf).code.split('\n').at(-1)).toBe(
+        "export const A = { ...Base, args: { ...Base.args, a: 'x' } };"
+      );
+    }
+  );
+
+  it.each([
+    [
+      'a story',
+      'const Base = { args: { a: 1 } };\nexport const B = { ...Base };\nB.args.b = { z: 1 };',
+      ['args', 'b', 'w'],
+      "export const A = { ...Base, args: { ...Base.args, b: { ...Base.args.b, w: 'x' } } };",
+    ],
+    [
+      'a local constant',
+      'const Base = { parameters: {} };\nconst Other = { ...Base };\nOther.parameters.docs = { extra: 1 };',
+      ['parameters', 'docs', 'a'],
+      "export const A = { ...Base, parameters: { ...Base.parameters, docs: { ...Base.parameters.docs, a: 'x' } } };",
+    ],
+  ])(
+    'reads through a nested object of a spread base that a copy of it in %s shares',
+    (_case, base, path, line) => {
+      const csf = parse(`export default { title: 'X' };\n${base}\nexport const A = { ...Base };`);
+      const story = csf
+        .objects({ meta: false })
+        .find(({ target }) => target.kind === 'story' && target.exportName === 'A')!;
+
+      expect(story.set(path, 'x')).toEqual({ ok: true, changed: true });
+      expect(printCsf(csf).code.split('\n').at(-1)).toBe(line);
+    }
+  );
+
   it('lays a created parent after a spread out on lines for a multi-line value', () => {
     const csf = parse(
       "export default { title: 'X' };\nconst Base = { args: {} };\nexport const A = {\n  ...Base,\n};"
diff --git a/code/core/src/csf-tools/ObjectMembers.ts b/code/core/src/csf-tools/ObjectMembers.ts
index a151ce747db7..09cd951910e1 100644
--- a/code/core/src/csf-tools/ObjectMembers.ts
+++ b/code/core/src/csf-tools/ObjectMembers.ts
@@ -1,8 +1,16 @@
 // Which member of an object literal a key statically reads, and the spreads that carry it into a new
 // object.
 import type { CsfMutationDiagnosticCode } from './CsfObject.ts';
-import { type E, type Node, type Property, staticKey, unwrapExpression } from './estree/ast.ts';
+import {
+  type E,
+  type Node,
+  type Property,
+  isTSWrapper,
+  staticKey,
+  unwrapExpression,
+} from './estree/ast.ts';
 import { type SourceEditor, printMemberAccess } from './estree/editor.ts';
+import type { Binding } from './estree/scope.ts';
 
 type PropertyLookup =
   | { ok: true; property?: Property }
@@ -58,7 +66,7 @@ export const lookupProperty = (
 };
 
 // A spread a parent created after it carries forward, with the object literal of the local
-// constant it spreads, whose members are known.
+// constant it spreads, whose own members are known.
 type CarriedSpread = { source: string; literal: E.ObjectExpression | undefined };
 
 // A reference reads the same value when it is read again.
@@ -70,6 +78,59 @@ const isReference = (node: Node): boolean =>
     node.property.type === 'Identifier' &&
     isReference(node.object));
 
+// Whether `user` writes to `target`, the binding or a member path of it.
+const writes = (editor: SourceEditor, user: Node, target: Node) =>
+  ((user.type === 'AssignmentExpression' ||
+    user.type === 'AssignmentPattern' ||
+    user.type === 'ForInStatement' ||
+    user.type === 'ForOfStatement') &&
+    user.left === target) ||
+  user.type === 'UpdateExpression' ||
+  (user.type === 'UnaryExpression' && user.operator === 'delete') ||
+  user.type === 'ArrayPattern' ||
+  user.type === 'RestElement' ||
+  (user.type === 'Property' && editor.parentOf(user)?.type === 'ObjectPattern');
+
+// Code that only reads a binding cannot change which members its literal has. A member read, even
+// one that is called, is a read; the binding itself escaping, such as into `Object.assign`, is not.
+const onlyRead = (editor: SourceEditor, binding: Binding) =>
+  binding.references.every((reference) => {
+    if (reference.type !== 'Identifier') {
+      return reference.type === 'ExportNamedDeclaration';
+    }
+    let read: Node = reference;
+    let member = false;
+    for (let next = editor.parentOf(read); next; next = editor.parentOf(read)) {
+      if (
+        (next.type === 'MemberExpression' && next.object === read) ||
+        (next.type === 'TSQualifiedName' && next.left === read)
+      ) {
+        member = true;
+      } else if (
+        !isTSWrapper(next) &&
+        next.type !== 'ParenthesizedExpression' &&
+        next.type !== 'ChainExpression'
+      ) {
+        break;
+      }
+      read = next;
+    }
+    const user = editor.parentOf(read);
+    if (!user) {
+      return false;
+    }
+    switch (user.type) {
+      case 'SpreadElement':
+      case 'JSXSpreadAttribute':
+      case 'TSTypeQuery':
+        return true;
+      case 'ExportSpecifier':
+        return read === reference;
+      default:
+        return member && !writes(editor, user, read);
+    }
+  });
+
 export const carriedSpreads = (
   editor: SourceEditor,
   properties: readonly E.ObjectPropertyKind[]
@@ -91,7 +152,7 @@ export const carriedSpreads = (
     const binding =
       reference.type === 'Identifier' ? editor.scopes.bindingOf(reference) : undefined;
     const init =
-      binding?.constant && binding.node.type === 'VariableDeclarator'
+      binding?.constant && binding.node.type === 'VariableDeclarator' && onlyRead(editor, binding)
         ? unwrapExpression(binding.node.init)
         : undefined;
     // A type assertion stays, so the carried member has the type the spread was given.
@@ -104,7 +165,8 @@ export const carriedSpreads = (
   return { ok: true, spreads };
 };
 
-// What an object literal is known to hold at `key`: no member, the value of one, or unknown.
+// What an object literal is known to hold at `key`: no member, a value that may be an object
+// literal, or unknown.
 const literalMember = (literal: E.ObjectExpression, key: string) => {
   const lookup = lookupProperty(literal.properties, key);
   if (!lookup.ok || lookup.property?.method) {
@@ -114,13 +176,15 @@ const literalMember = (literal: E.ObjectExpression, key: string) => {
     return { kind: 'missing' as const };
   }
   const value = unwrapExpression(lookup.property.value);
-  return { kind: 'value' as const, literal: value.type === 'ObjectExpression' ? value : undefined };
+  return { kind: 'value' as const, object: value.type === 'ObjectExpression' };
 };
 
 // The spread that writes the member at `keys` of `spreads` into a new object or array, or
 // `undefined` when none can have it. The last spread that may have the first key wins, earlier ones
 // follow after `??` in case it lacks it; a local literal known to have it ends that list, and one
-// known to lack it is skipped. A member below a spread's own is read with `?.`.
+// known to lack it is skipped. A member below a spread's own is read with `?.`, unless it is read
+// from an object literal: only the literal's own members are known, as a copy of it shares the
+// objects it holds, through which code can change them.
 export const carriedSpread = (
   spreads: readonly CarriedSpread[],
   keys: readonly string[],
@@ -132,7 +196,7 @@ export const carriedSpread = (
       ? `...(${expression} ?? [])`
       : `...${alternatives ? `(${expression})` : expression}`;
   const [first, ...rest] = keys;
-  const candidates: { expression: string; literal: E.ObjectExpression | undefined }[] = [];
+  const candidates: { expression: string; object: boolean }[] = [];
   for (const spread of [...spreads].reverse()) {
     const member = spread.literal ? literalMember(spread.literal, first) : undefined;
     if (member?.kind === 'missing') {
@@ -140,7 +204,7 @@ export const carriedSpread = (
     }
     candidates.push({
       expression: `${spread.source}${printMemberAccess(first, quote)}`,
-      literal: member?.kind === 'value' ? member.literal : undefined,
+      object: member?.kind === 'value' && member.object,
     });
     if (member?.kind === 'value') {
       break;
@@ -155,14 +219,9 @@ export const carriedSpread = (
       ? spreadOf(either, true)
       : spreadOf(`(${either})${rest.map((key) => printMemberAccess(key, quote, true)).join('')}`);
   }
-  let [{ expression, literal }] = candidates;
-  for (const key of rest) {
-    const member = literal ? literalMember(literal, key) : undefined;
-    if (member?.kind === 'missing') {
-      return undefined;
-    }
-    expression += printMemberAccess(key, quote, !literal);
-    literal = member?.kind === 'value' ? member.literal : undefined;
-  }
-  return spreadOf(expression);
+  const [{ expression, object }] = candidates;
+  return spreadOf(
+    expression +
+      rest.map((key, index) => printMemberAccess(key, quote, index > 0 || !object)).join('')
+  );
 };

From b558b850a44d26dc4eb1a8a39bf234726de338bf Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 15:37:51 +0200
Subject: [PATCH 301/326] fix(csf-tools): refuse name and length annotations on
 a function story
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On a function story or `Template.bind({})`, `set(['name'], 'Pretty')`
wrote `A.name = 'Pretty';`, which throws at load because a function's
`name` and `length` are read-only; `caller` and `arguments` throw too.
`set`, `createArray`, `rename`, `move` and `group` now refuse to add
those members to a story without an object literal, with an
`unsupported-member` diagnostic ("Cannot add A.name …") that points to
`storyName`. A story object takes them as before.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/CsfObject.ts          | 23 ++++++++
 .../src/csf-tools/CsfObjectDiscovery.test.ts  | 56 +++++++++++++++++++
 code/core/src/csf-tools/CsfObjectDiscovery.ts |  9 +++
 code/core/src/csf-tools/ObjectRoot.ts         |  2 +
 4 files changed, 90 insertions(+)

diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index 6f0af6313908..3a2e6f1b1472 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -385,6 +385,12 @@ class Editor implements CsfObjectEditor {
     if (inspected.ok === false) {
       return this.failure(inspected.code, path, inspected.node);
     }
+    if (inspected.missing !== undefined) {
+      const refused = this.refusedKey(inspected.parent, path[inspected.missing], path);
+      if (refused) {
+        return refused;
+      }
+    }
     if (inspected.missing !== undefined && inspected.missing < path.length - 1) {
       const carried = carriedSpreads(this.editor, inspected.parent.properties);
       if (carried.ok === false) {
@@ -417,6 +423,10 @@ class Editor implements CsfObjectEditor {
     if (inspected.property) {
       return this.failure('occupied-destination', path, inspected.property);
     }
+    const refused = this.refusedKey(inspected.parent, path[inspected.missing!], path);
+    if (refused) {
+      return refused;
+    }
     const carried = carriedSpreads(this.editor, inspected.parent.properties);
     if (carried.ok === false) {
       return this.failure(carried.code, path, carried.node);
@@ -506,6 +516,10 @@ class Editor implements CsfObjectEditor {
     if (destination.property) {
       return this.failure('occupied-destination', to, destination.property);
     }
+    const refused = this.refusedKey(destination.parent, to[destination.missing!], to);
+    if (refused) {
+      return refused;
+    }
 
     const key = to.at(-1)!;
     const sourceParent = from.slice(0, -1);
@@ -671,6 +685,10 @@ class Editor implements CsfObjectEditor {
       );
       parent.remove(moved);
     } else {
+      const refused = this.refusedKey(parent, group, path);
+      if (refused) {
+        return refused;
+      }
       if (parent.detached) {
         const effectful = moved.find((property) => !isEvaluationInert(property.value));
         if (effectful) {
@@ -825,6 +843,11 @@ class Editor implements CsfObjectEditor {
     parent.append(content.members);
   }
 
+  private refusedKey(parent: ObjectRoot, key: string, path: readonly string[]) {
+    const refusal = parent.refuseKey?.(key);
+    return refusal ? this.failure('unsupported-member', path, this.anchor(), refusal) : undefined;
+  }
+
   private anchor(): Node {
     return this.editor.program;
   }
diff --git a/code/core/src/csf-tools/CsfObjectDiscovery.test.ts b/code/core/src/csf-tools/CsfObjectDiscovery.test.ts
index 3f96027d8dec..942f696d5dfe 100644
--- a/code/core/src/csf-tools/CsfObjectDiscovery.test.ts
+++ b/code/core/src/csf-tools/CsfObjectDiscovery.test.ts
@@ -357,6 +357,62 @@ Primary.args = { label: 'Primary' };
 `);
     });
 
+    it.each([
+      ['an arrow function', 'export const Primary = () => null;'],
+      [
+        'a bound template',
+        'const Template = () => null;\nexport const Primary = Template.bind({});',
+      ],
+    ])(
+      'refuses to give a story declared as %s an own function property that cannot be assigned',
+      (_case, story) => {
+        const source = `export default { title: 'Example' };\n${story}\nPrimary.storyName = 'Old';\n`;
+        const csf = parse(source);
+        const [primary] = csf.objects({ meta: false });
+        const refusal = (key: string, path = [key]) => ({
+          ok: false,
+          changed: false,
+          diagnostic: {
+            code: 'unsupported-member',
+            path,
+            message: expect.stringContaining(
+              `Cannot add Primary.${key} because a function's ${key} cannot be assigned`
+            ),
+          },
+        });
+
+        for (const key of ['name', 'length', 'caller', 'arguments']) {
+          expect(primary.set([key], 'Pretty')).toMatchObject(refusal(key));
+          expect(primary.set([key, 'nested'], 'Pretty')).toMatchObject(
+            refusal(key, [key, 'nested'])
+          );
+          expect(primary.rename(['storyName'], key)).toMatchObject(refusal(key));
+          expect(primary.move(['storyName'], [key])).toMatchObject(refusal(key));
+          expect(primary.group([key], ['storyName'])).toMatchObject(refusal(key));
+        }
+        expect(primary.set(['name'], 'Pretty')).toMatchObject({
+          diagnostic: { message: expect.stringContaining('; set storyName instead') },
+        });
+        expect(printCsf(csf).code).toBe(source);
+
+        expect(primary.set(['storyName'], 'Pretty')).toEqual({ ok: true, changed: true });
+        expect(printCsf(csf).code).toBe(source.replace(`'Old'`, `'Pretty'`));
+      }
+    );
+
+    it('sets name and length in a story object', () => {
+      const csf = parse(
+        `export default { title: 'Example' };\nexport const Primary = { args: {} };\n`
+      );
+      const [story] = csf.objects({ meta: false });
+
+      expect(story.set(['name'], 'Pretty')).toEqual({ ok: true, changed: true });
+      expect(story.set(['length'], 2)).toEqual({ ok: true, changed: true });
+      expect(printCsf(csf).code).toBe(
+        `export default { title: 'Example' };\nexport const Primary = { args: {}, name: 'Pretty', length: 2 };\n`
+      );
+    });
+
     it('edits the object of a story and its assignments as one object', () => {
       const csf = parse(`export default { title: 'Example' };
 export const Primary = { args: { label: 'Primary' } };
diff --git a/code/core/src/csf-tools/CsfObjectDiscovery.ts b/code/core/src/csf-tools/CsfObjectDiscovery.ts
index 4e28eaf10f93..e0f6478fe6ce 100644
--- a/code/core/src/csf-tools/CsfObjectDiscovery.ts
+++ b/code/core/src/csf-tools/CsfObjectDiscovery.ts
@@ -371,6 +371,9 @@ const assignmentsOf = (csf: CsfFile, binding: StoryBinding) => {
   return { assignments, shared };
 };
 
+// Own properties of a function that throw when a strict-mode module assigns them.
+const FUNCTION_OWN_KEYS = new Set(['name', 'length', 'caller', 'arguments']);
+
 // A story edited as one object: the members of its object literal, if it has one, then its
 // `Story.name = value` assignments, which run after it. A missing member goes into the object
 // literal, or else into a new assignment after the story's last one.
@@ -467,6 +470,12 @@ const storyRoot = (
       assign([{ key, value, text: '' }], statements);
     },
     take,
+    refuseKey: object
+      ? undefined
+      : (key) =>
+          FUNCTION_OWN_KEYS.has(key)
+            ? `Cannot add ${binding.localName}.${key} because a function's ${key} cannot be assigned${key === 'name' ? '; set storyName instead' : ''}`
+            : undefined,
   };
 };
 
diff --git a/code/core/src/csf-tools/ObjectRoot.ts b/code/core/src/csf-tools/ObjectRoot.ts
index bcc1ed830d14..30207842126f 100644
--- a/code/core/src/csf-tools/ObjectRoot.ts
+++ b/code/core/src/csf-tools/ObjectRoot.ts
@@ -36,6 +36,8 @@ export interface ObjectRoot {
   group(members: Property[], key: string): void;
   // The member as text to insert elsewhere under another key.
   take(member: Property, key: string): MemberInsert;
+  // Why the root cannot take a new member named `key`, when it cannot.
+  refuseKey?(key: string): string | undefined;
 }
 
 // A member of an `ObjectRoot` that is not written as one, such as a named export or a

From 3acd1eaee99a992a9dd4f8c4d351885617b4e934 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Tue, 20 Oct 2026 16:53:44 +0200
Subject: [PATCH 302/326] React: Mark the Vite alias helper as internal

A docblock marks package public API, and reactViteAlias is not exported from one.
---
 code/renderers/react/src/preview-react-alias.ts | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/code/renderers/react/src/preview-react-alias.ts b/code/renderers/react/src/preview-react-alias.ts
index a4f93d04c458..38e536473fcb 100644
--- a/code/renderers/react/src/preview-react-alias.ts
+++ b/code/renderers/react/src/preview-react-alias.ts
@@ -11,12 +11,10 @@ export const reactResolveAlias = ({ react, reactDom }: ReactAliasTarget) => ({
   'react-dom': reactDom,
 });
 
-/**
- * Vite merges object aliases with a spread, which keeps our key position while another plugin
- * replaces the value. A string key is a prefix match, so `react` pointing at a file would turn
- * `react/jsx-runtime` into `<file>/jsx-runtime`. Anchored regexes with an explicit subpath capture
- * keep each entry self-contained no matter how they are merged.
- */
+// Vite merges object aliases with a spread, which keeps our key position while another plugin
+// replaces the value. A string key is a prefix match, so `react` pointing at a file would turn
+// `react/jsx-runtime` into `<file>/jsx-runtime`. Anchored regexes with an explicit subpath capture
+// keep each entry self-contained no matter how they are merged.
 export const reactViteAlias = ({ react, reactDom }: ReactAliasTarget) => [
   ...(isAbsolute(reactDom)
     ? [{ find: /^react-dom\/server$/, replacement: `${reactDom}/server.browser.js` }]

From d16decb87b39be3643f17f241669b77f6fc77559 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 17:11:21 +0200
Subject: [PATCH 303/326] fix(csf-tools)!: let reads follow any constant and
 leave diagnostics to mutations

`get` and `getValue` no longer add mutation diagnostics, so a read never
stops a later write; each mutation proves the shape it edits and reports
its own refusal. `inspect` still gives the reason a field is unreadable.

Reads follow a local constant whatever its reference count, as reading
cannot affect its other users; edits keep the rule that a constant must
be referenced by the edited object alone. A constant that contains
itself reads as unresolved.

Callers that gated an edit on a read now check `inspect`: the preview
tag readers, the ESLint extends update, and the automigrations through
a `readForEdit` helper that reports an unreadable field like a refused
edit instead of skipping the file.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 MIGRATION.md                                  |  2 +-
 code/addons/vitest/src/vitest-plugin/index.ts |  9 +--
 code/core/src/cli/eslintPlugin.test.ts        | 13 ++++
 code/core/src/cli/eslintPlugin.ts             |  6 +-
 .../utils/StoryIndexGenerator.test.ts         |  1 +
 .../core-server/utils/StoryIndexGenerator.ts  | 11 ++--
 code/core/src/csf-tools/ConfigFile.ts         | 61 +++++++++----------
 .../src/csf-tools/ConfigFile.write.test.ts    | 14 +++--
 code/core/src/csf-tools/ConfigObject.test.ts  | 12 +++-
 code/core/src/csf-tools/CsfFile.ts            |  2 +-
 code/core/src/csf-tools/CsfObject.test.ts     | 43 +++++++++----
 code/core/src/csf-tools/CsfObject.ts          | 34 ++++-------
 .../src/csf-tools/CsfObjectDiscovery.test.ts  |  5 +-
 code/core/src/csf-tools/README.md             |  6 +-
 code/core/src/csf-tools/estree/values.ts      | 46 +++++++++++---
 .../fixes/argtypes-default-value.ts           |  3 +-
 .../fixes/component-subtitle.test.ts          | 12 ++++
 .../automigrate/fixes/component-subtitle.ts   |  5 +-
 .../src/automigrate/fixes/docgen-server.ts    |  5 +-
 .../automigrate/fixes/story-sort-to-main.ts   |  6 +-
 .../src/automigrate/fixes/tag-filter-api.ts   |  5 +-
 .../web-components-runtime-manifest.test.ts   | 13 ++++
 .../automigrate/helpers/edit-parsed-file.ts   | 30 +++++++--
 23 files changed, 224 insertions(+), 120 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 59dbb9103707..f8edd695034d 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1426,7 +1426,7 @@ If your custom migration tooling imports `ConfigFile` from `storybook/internal/c
 | `findNamedImportMethodCalls`         | `callArguments`          |
 | `FindNamedImportMethodCallsOptions`  | `CallArgumentsOptions`   |
 
-`getValue` reads static values without executing source code. When it cannot resolve a value, it returns `undefined` and adds a diagnostic. Mutation methods return a result that reports whether the edit succeeded and changed the file. `callArguments` returns `CsfObject` editors instead of Babel call expressions, so apply the same `get`, `getValue`, `set`, `transform`, `remove`, `rename`, `move`, and `group` methods you use for story and config objects.
+`getValue` reads static values without executing source code, following any local constant. When it cannot resolve a value, it returns `undefined`; reads add no diagnostics, so they never stop a later write. Use `inspect` to tell a missing field from one that cannot be read statically. Mutation methods return a result that reports whether the edit succeeded and changed the file. `callArguments` returns `CsfObject` editors instead of Babel call expressions, so apply the same `get`, `getValue`, `set`, `transform`, `remove`, `rename`, `move`, and `group` methods you use for story and config objects.
 
 Before writing a transformed file, check `changed` and `mutationDiagnostics`. `writeConfig` also rejects files with mutation diagnostics to prevent partial edits.
 
diff --git a/code/addons/vitest/src/vitest-plugin/index.ts b/code/addons/vitest/src/vitest-plugin/index.ts
index 1a88f6caac9c..766e509b51a8 100644
--- a/code/addons/vitest/src/vitest-plugin/index.ts
+++ b/code/addons/vitest/src/vitest-plugin/index.ts
@@ -69,12 +69,9 @@ const extractTagsFromPreview = async (configDir: string) => {
     return [];
   }
   const previewConfig = await readConfig(previewConfigPath);
-  const tags = previewConfig.getValue(['tags']) ?? [];
-  if (
-    previewConfig.mutationDiagnostics.some(({ code }) => code === 'unsupported-value') ||
-    !Array.isArray(tags) ||
-    !tags.every((tag) => typeof tag === 'string')
-  ) {
+  const tags =
+    previewConfig.inspect(['tags']).kind === 'value' ? previewConfig.getValue(['tags']) : [];
+  if (!Array.isArray(tags) || !tags.every((tag) => typeof tag === 'string')) {
     throw new HandledError('Preview tags must be a static array of strings');
   }
   return tags;
diff --git a/code/core/src/cli/eslintPlugin.test.ts b/code/core/src/cli/eslintPlugin.test.ts
index a8f43bbd4a69..4b657e7796cd 100644
--- a/code/core/src/cli/eslintPlugin.test.ts
+++ b/code/core/src/cli/eslintPlugin.test.ts
@@ -283,6 +283,19 @@ describe('configureEslintPlugin', () => {
         };"
       `);
     });
+
+    it('leaves an extends it cannot read statically unchanged', async () => {
+      vi.mocked(readFile).mockResolvedValue('module.exports = { extends: getExtends() };');
+
+      await expect(
+        configureEslintPlugin({
+          eslintConfigFile: '.eslintrc.js',
+          packageManager: { getAllDependencies: vi.fn() } as any,
+          isFlatConfig: false,
+        })
+      ).rejects.toThrow('Cannot read the extends of .eslintrc.js statically');
+      expect(vi.mocked(writeFile)).not.toHaveBeenCalled();
+    });
   });
 
   describe('flat config', () => {
diff --git a/code/core/src/cli/eslintPlugin.ts b/code/core/src/cli/eslintPlugin.ts
index 01aeea0ad3bb..5b97997156bc 100644
--- a/code/core/src/cli/eslintPlugin.ts
+++ b/code/core/src/cli/eslintPlugin.ts
@@ -426,7 +426,11 @@ export async function configureEslintPlugin({
         await writeFile(eslintConfigFile, output);
       } else {
         const eslint = await readConfig(eslintConfigFile);
-        const existingExtends = normalizeExtends(eslint.getValue(['extends'])).filter(Boolean);
+        const extendsValue = eslint.getValue(['extends']);
+        if (extendsValue === undefined && eslint.inspect(['extends']).kind !== 'missing') {
+          throw new Error(`Cannot read the extends of ${eslintConfigFile} statically`);
+        }
+        const existingExtends = normalizeExtends(extendsValue).filter(Boolean);
 
         if (existingExtends.includes('plugin:storybook/recommended')) {
           return;
diff --git a/code/core/src/core-server/utils/StoryIndexGenerator.test.ts b/code/core/src/core-server/utils/StoryIndexGenerator.test.ts
index e34de569a7ca..8ea2c11df341 100644
--- a/code/core/src/core-server/utils/StoryIndexGenerator.test.ts
+++ b/code/core/src/core-server/utils/StoryIndexGenerator.test.ts
@@ -60,6 +60,7 @@ describe('StoryIndexGenerator', () => {
     'const tags = ["autodocs"]; export default { tags };',
     'const preview = { tags: ["autodocs"] }; export const argTypesEnhancers = []; export default preview;',
     'const base = ["autodocs"]; export default { tags: [...base] };',
+    'const tags = ["autodocs"]; export default { tags, parameters: { tags } };',
     'export const parameters = {}; export const Preview = { parameters }; export const tags = ["autodocs"];',
   ])('reads project tags statically from %s', (source) => {
     const generator = new StoryIndexGenerator([], options);
diff --git a/code/core/src/core-server/utils/StoryIndexGenerator.ts b/code/core/src/core-server/utils/StoryIndexGenerator.ts
index 580a30508650..4da2544923d7 100644
--- a/code/core/src/core-server/utils/StoryIndexGenerator.ts
+++ b/code/core/src/core-server/utils/StoryIndexGenerator.ts
@@ -890,13 +890,12 @@ export class StoryIndexGenerator {
     if (preview) {
       try {
         const projectAnnotations = loadConfig(preview.code, preview.path).parse();
-        const tags = projectAnnotations.getValue(['tags']) ?? [];
+        const tags =
+          projectAnnotations.inspect(['tags']).kind === 'value'
+            ? projectAnnotations.getValue(['tags'])
+            : [];
         invariant(
-          !projectAnnotations.mutationDiagnostics.some(
-            ({ code }) => code === 'unsupported-value'
-          ) &&
-            Array.isArray(tags) &&
-            tags.every((tag) => typeof tag === 'string'),
+          Array.isArray(tags) && tags.every((tag) => typeof tag === 'string'),
           'Preview tags must be a static array of strings'
         );
         projectTags = tags;
diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index 770fb13d0adf..c2c2c40d647b 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -230,8 +230,8 @@ export class ConfigFile implements CsfObject {
   }
 
   /**
-   * Read diagnostics from unsupported discovery, reads, or mutations. `writeConfig` refuses to
-   * write a config with diagnostics, even if another edit succeeded.
+   * Read diagnostics from unsupported discovery or mutations. `writeConfig` refuses to write a
+   * config with diagnostics, even if another edit succeeded.
    *
    * @example
    * ```ts
@@ -248,7 +248,7 @@ export class ConfigFile implements CsfObject {
   /**
    * Read a detached copy of the expression at a property path. Missing fields return `undefined`;
    * so does a path through a value that is not an object literal, or one a spread, computed key, or
-   * duplicate field leaves unproven, which also adds a mutation diagnostic.
+   * duplicate field leaves unproven. `inspect` tells these apart.
    *
    * @example
    * ```ts
@@ -258,14 +258,13 @@ export class ConfigFile implements CsfObject {
    * ```
    */
   get(path: readonly string[]): CsfExpression | undefined {
-    const editor = this._objectEditor('read');
-    return editor.ok ? editor.object.get(path) : undefined;
+    const reader = this._reader();
+    return reader.ok ? reader.object.get(path) : undefined;
   }
 
   /**
    * Read the expression at a property path like `get`, telling a missing field from one that cannot
-   * be read statically, without adding a mutation diagnostic. Use it for reads that only inform;
-   * `get` and `getValue` record why a read failed, which stops `writeConfig`.
+   * be read statically, and why.
    *
    * @example
    * ```ts
@@ -273,24 +272,18 @@ export class ConfigFile implements CsfObject {
    * config.inspect(['tags']).kind; // 'value'
    * config.inspect(['missing']); // { kind: 'missing' }
    * config.inspect(['args', 'size']).kind; // 'unreadable'
-   * config.mutationDiagnostics; // []
    * ```
    */
   inspect(path: readonly string[]): CsfInspection {
-    const editor = createConfigObject(
-      this,
-      'read',
-      () => {},
-      () => {}
-    );
-    return editor.ok
-      ? editor.object.inspect(path)
-      : { kind: 'unreadable', diagnostic: { ...editor.diagnostic, path: [...path] } };
+    const reader = this._reader();
+    return reader.ok
+      ? reader.object.inspect(path)
+      : { kind: 'unreadable', diagnostic: { ...reader.diagnostic, path: [...path] } };
   }
 
   /**
-   * Read plain values without executing code. Missing fields return `undefined`; unresolved
-   * expressions also return `undefined` and add a mutation diagnostic.
+   * Read plain values without executing code, following local constants. Missing fields and
+   * expressions it cannot evaluate, such as calls and functions, return `undefined`.
    *
    * @example
    * ```ts
@@ -301,8 +294,8 @@ export class ConfigFile implements CsfObject {
    * ```
    */
   getValue(path: readonly string[]): CsfValue {
-    const editor = this._objectEditor('read');
-    return editor.ok ? editor.object.getValue(path) : undefined;
+    const reader = this._reader();
+    return reader.ok ? reader.object.getValue(path) : undefined;
   }
 
   /**
@@ -425,27 +418,29 @@ export class ConfigFile implements CsfObject {
   }
 
   _mutate(operation: (object: CsfObjectEditor) => CsfMutationResult): CsfMutationResult {
-    const editor = this._objectEditor('mutate');
+    const editor = createConfigObject(
+      this,
+      'mutate',
+      (diagnostic) => this._mutationDiagnostics.push(diagnostic),
+      () => {
+        this._changed = true;
+      }
+    );
     if (editor.ok === true) {
       return operation(editor.object);
     }
+    this._mutationDiagnostics.push(editor.diagnostic);
     this._editor._refuse();
     return { ok: false, changed: false, diagnostic: editor.diagnostic };
   }
 
-  _objectEditor(mode: 'read' | 'mutate') {
-    const editor = createConfigObject(
+  _reader() {
+    return createConfigObject(
       this,
-      mode,
-      (diagnostic) => this._mutationDiagnostics.push(diagnostic),
-      () => {
-        this._changed = true;
-      }
+      'read',
+      () => {},
+      () => {}
     );
-    if (editor.ok === false) {
-      this._mutationDiagnostics.push(editor.diagnostic);
-    }
-    return editor;
   }
 
   _editor: SourceEditor;
diff --git a/code/core/src/csf-tools/ConfigFile.write.test.ts b/code/core/src/csf-tools/ConfigFile.write.test.ts
index 1dd036c9384c..5c1c262efb8b 100644
--- a/code/core/src/csf-tools/ConfigFile.write.test.ts
+++ b/code/core/src/csf-tools/ConfigFile.write.test.ts
@@ -32,15 +32,19 @@ describe('writeConfig', () => {
     expect(output.getValue(['addons'])).toEqual(['old']);
   });
 
-  it('does not overwrite an expression that could not be read statically', async () => {
+  it('writes a config after a read that could not evaluate its value', async () => {
     const dynamicSource = 'export default { tags: getTags() };';
     vol.fromJSON({ [fileName]: dynamicSource });
     const config = loadConfig(dynamicSource, fileName).parse();
-    const tags = config.getValue(['tags']);
-    config.set(['tags'], Array.isArray(tags) ? [...tags, 'autodocs'] : ['autodocs']);
 
-    await expect(writeConfig(config)).rejects.toThrow('unsupported value');
-    expect(fs.readFileSync(fileName, 'utf8')).toBe(dynamicSource);
+    expect(config.getValue(['tags'])).toBeUndefined();
+    expect(config.inspect(['tags']).kind).toBe('value');
+    config.set(['features', 'enabled'], true);
+    await writeConfig(config);
+
+    expect(fs.readFileSync(fileName, 'utf8')).toBe(
+      'export default { tags: getTags(), features: { enabled: true } };'
+    );
   });
 
   it('leaves the file unchanged after a failed mutation', async () => {
diff --git a/code/core/src/csf-tools/ConfigObject.test.ts b/code/core/src/csf-tools/ConfigObject.test.ts
index cc5a3614b71a..da8d09a31ffa 100644
--- a/code/core/src/csf-tools/ConfigObject.test.ts
+++ b/code/core/src/csf-tools/ConfigObject.test.ts
@@ -153,11 +153,17 @@ describe('ConfigFile mutations', () => {
     'import { tags } from "./shared"; export default { tags };',
     'let tags = []; tags = other; export default { tags };',
     'const tags = [tags]; export default { tags };',
-    'const undefined = "shadowed"; use(undefined); export default { value: undefined };',
   ])('does not guess values from %s', (source) => {
     const config = loadConfig(source).parse();
-    expect(config.getValue([source.includes('shadowed') ? 'value' : 'tags'])).toBeUndefined();
-    expect(config.mutationDiagnostics.length).toBeGreaterThan(0);
+    expect(config.getValue(['tags'])).toBeUndefined();
+    expect(config.mutationDiagnostics).toEqual([]);
+  });
+
+  it('reads a local constant named undefined as its value', () => {
+    const config = loadConfig(
+      'const undefined = "shadowed"; use(undefined); export default { value: undefined };'
+    ).parse();
+    expect(config.getValue(['value'])).toBe('shadowed');
   });
 
   it.each([
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index 89ba98e710b9..f3ecaf0fd939 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -389,7 +389,7 @@ export class CsfFile {
   }
 
   /**
-   * Read diagnostics from object discovery, reads, and mutations. Check them before writing
+   * Read diagnostics from object discovery and mutations. Check them before writing
    * because a file can contain both successful edits and unsupported targets.
    *
    * @example
diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index 35455988b5f1..b905d0b2126c 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -61,7 +61,7 @@ describe('CsfObject', () => {
     expect(csf.mutationDiagnostics).toEqual([]);
   });
 
-  it('tells a field from a missing and an unreadable one without recording a diagnostic', () => {
+  it('tells a field from a missing and an unreadable one, and why', () => {
     const csf = parse(
       'export default {};\nexport const A = { args: { ...base }, parameters: { a: 1 } };'
     );
@@ -74,10 +74,37 @@ describe('CsfObject', () => {
       kind: 'unreadable',
       diagnostic: { code: 'spread-field', path: ['args', 'size'] },
     });
+    expect(story.get(['args', 'size'])).toBeUndefined();
     expect(csf.mutationDiagnostics).toEqual([]);
+  });
 
-    expect(story.get(['args', 'size'])).toBeUndefined();
-    expect(csf.mutationDiagnostics).toMatchObject([{ code: 'spread-field' }]);
+  it('reads a constant that other code uses too, which an edit would not go through', () => {
+    const csf = parse(`
+      const label = 'x';
+      const base = { size: 1 };
+      export default {};
+      export const A = { args: { label, base } };
+      export const B = { args: { label, base } };
+    `);
+    const [story] = csf.objects({ meta: false });
+
+    expect(story.getValue(['args'])).toEqual({ label: 'x', base: { size: 1 } });
+    expect(story.getValue(['args', 'base', 'size'])).toBe(1);
+    expect(textOf(story.get(['args', 'base', 'size'])!)).toBe('1');
+    expect(story.inspect(['args', 'base', 'size']).kind).toBe('value');
+    expect(csf.mutationDiagnostics).toEqual([]);
+
+    expect(story.set(['args', 'base', 'size'], 2)).toMatchObject({
+      ok: false,
+      diagnostic: { code: 'unsupported-member' },
+    });
+  });
+
+  it('reads a constant that contains itself as unresolved', () => {
+    const csf = parse('const own = { own }; export default { parameters: { own } };');
+    const [meta] = csf.objects({ stories: false });
+
+    expect(meta.getValue(['parameters'])).toBeUndefined();
   });
 
   it('inspects every annotation of a CSF2 story, and the object itself as unreadable', () => {
@@ -143,7 +170,7 @@ describe('CsfObject', () => {
     '{ get enabled() { return globalThis.csfReadProbe(); } }',
     'globalThis.csfReadProbe.value',
     '() => globalThis.csfReadProbe()',
-  ])('reports an unresolved value without executing %s', (expression) => {
+  ])('reads an unresolved value as undefined without executing %s', (expression) => {
     const probe = vi.fn();
     vi.stubGlobal('csfReadProbe', probe);
     const csf = parse(`export default { parameters: ${expression} };`);
@@ -151,12 +178,7 @@ describe('CsfObject', () => {
 
     expect(meta.getValue(['parameters'])).toBeUndefined();
     expect(probe).not.toHaveBeenCalled();
-    expect(csf.mutationDiagnostics).toContainEqual(
-      expect.objectContaining({
-        code: 'unsupported-value',
-        path: ['parameters'],
-      })
-    );
+    expect(csf.mutationDiagnostics).toEqual([]);
     expect(csf.changed).toBe(false);
   });
 
@@ -619,7 +641,6 @@ describe('CsfObject', () => {
     expect(story.remove(['parameters', 'first']).ok).toBe(false);
     expect(story.set(['args', 'label'], 'Label').ok).toBe(true);
     expect(csf.mutationDiagnostics).toEqual([
-      expect.objectContaining({ code: 'duplicate-field', path: ['parameters'] }),
       expect.objectContaining({ code: 'duplicate-field', path: ['parameters', 'first'] }),
     ]);
   });
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index 3a2e6f1b1472..beef2f4d3fae 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -122,7 +122,7 @@ export interface CsfObject {
   /**
    * Read a detached copy of the expression at a property path. Missing fields return `undefined`;
    * so does a path through a value that is not an object literal, or one a spread, computed key, or
-   * duplicate field leaves unproven, which also adds a mutation diagnostic.
+   * duplicate field leaves unproven. `inspect` tells these apart.
    *
    * @example
    * ```ts
@@ -134,8 +134,7 @@ export interface CsfObject {
   get(path: readonly string[]): CsfExpression | undefined;
   /**
    * Read the expression at a property path like `get`, telling a missing field from one that cannot
-   * be read statically, without adding a mutation diagnostic. Use it for reads that only inform;
-   * `get` and `getValue` record why a read failed, which stops `writeConfig`.
+   * be read statically, and why.
    *
    * @example
    * ```ts
@@ -143,13 +142,12 @@ export interface CsfObject {
    * object.inspect(['tags']).kind; // 'value'
    * object.inspect(['missing']); // { kind: 'missing' }
    * object.inspect(['args', 'size']).kind; // 'unreadable'
-   * object.mutationDiagnostics; // []
    * ```
    */
   inspect(path: readonly string[]): CsfInspection;
   /**
-   * Read plain values without executing code. Missing fields return `undefined`; unresolved
-   * expressions also return `undefined` and add a mutation diagnostic.
+   * Read plain values without executing code, following local constants. Missing fields and
+   * expressions it cannot evaluate, such as calls and functions, return `undefined`.
    *
    * @example
    * ```ts
@@ -329,19 +327,11 @@ class Editor implements CsfObjectEditor {
 
   getValue(path: readonly string[]): CsfValue {
     const property = this.getProperty(path);
-    if (!property) {
-      return undefined;
-    }
-    if (property.method) {
-      this.reportDiagnostic(this.diagnostic('unsupported-value', path, property));
+    if (!property || property.method) {
       return undefined;
     }
     const value = readValue(this.editor.scopes, property.value);
-    if (value === UNRESOLVED) {
-      this.reportDiagnostic(this.diagnostic('unsupported-value', path, property.value));
-      return undefined;
-    }
-    return value;
+    return value === UNRESOLVED ? undefined : value;
   }
 
   private find(
@@ -353,7 +343,7 @@ class Editor implements CsfObjectEditor {
     if (path.length === 0) {
       return { kind: 'missing' };
     }
-    const found = this.locate(path);
+    const found = this.locate(path, 'read', false);
     if (found.ok === false) {
       return { kind: 'unreadable', diagnostic: this.diagnostic(found.code, path, found.node) };
     }
@@ -362,9 +352,6 @@ class Editor implements CsfObjectEditor {
 
   private getProperty(path: readonly string[]): Property | undefined {
     const found = this.find(path);
-    if (found.kind === 'unreadable') {
-      this.reportDiagnostic(found.diagnostic);
-    }
     return found.kind === 'property' ? found.property : undefined;
   }
 
@@ -749,10 +736,11 @@ class Editor implements CsfObjectEditor {
   }
 
   // `access` applies to the last field of the path, and to its parents for a `set`, which creates
-  // missing ones; other parents are read.
+  // missing ones; other parents are read. Only a lookup for a read follows a shared constant.
   private locate(
     path: readonly string[],
-    access: Access = 'read'
+    access: Access = 'read',
+    edits = true
   ):
     | { ok: true; parent: ObjectRoot; property?: Property; missing?: number }
     | { ok: false; code: CsfMutationDiagnosticCode; node: Node } {
@@ -778,7 +766,7 @@ class Editor implements CsfObjectEditor {
       if (property.method) {
         return { ok: false, code: 'unsupported-member', node: property };
       }
-      const value = resolveExpression(this.editor.scopes, property.value);
+      const value = resolveExpression(this.editor.scopes, property.value, edits ? 'write' : 'read');
       if (value?.type !== 'ObjectExpression') {
         return { ok: false, code: 'unsupported-member', node: property.value };
       }
diff --git a/code/core/src/csf-tools/CsfObjectDiscovery.test.ts b/code/core/src/csf-tools/CsfObjectDiscovery.test.ts
index 942f696d5dfe..2f012985ff2b 100644
--- a/code/core/src/csf-tools/CsfObjectDiscovery.test.ts
+++ b/code/core/src/csf-tools/CsfObjectDiscovery.test.ts
@@ -438,10 +438,7 @@ Primary.args = { label: 'Assigned' };
 
       expect(story.set(['args', 'label'], 'Changed').ok).toBe(false);
       expect(story.getValue(['args'])).toBeUndefined();
-      expect(csf.mutationDiagnostics.map(({ code }) => code)).toEqual([
-        'duplicate-field',
-        'duplicate-field',
-      ]);
+      expect(csf.mutationDiagnostics.map(({ code }) => code)).toEqual(['duplicate-field']);
     });
 
     it.each([
diff --git a/code/core/src/csf-tools/README.md b/code/core/src/csf-tools/README.md
index 5f8b52d4430c..c5f43be7149a 100644
--- a/code/core/src/csf-tools/README.md
+++ b/code/core/src/csf-tools/README.md
@@ -19,7 +19,7 @@ It can parse MDX into CSF.
 Each editor reads and writes static property paths with `get`, `getValue`, `inspect`, `set`, `transform`, `remove`, `rename`, `move`, and `group`.
 `get` returns an AST expression; `getValue` reads plain values from literals, nested arrays and objects, and local constants without executing code. Reads never return a partially decoded object.
 
-`get` and `getValue` return `undefined` both for a field that is missing and for one that cannot be read statically. Only the second adds a `CsfMutationDiagnostic` to `mutationDiagnostics`. For `get` that is a path whose parent is not an object literal, or that a spread, a computed key, or a duplicate field leaves unproven; `getValue` also reports a value it cannot evaluate, such as a call or a function. A field written as `undefined` is `undefined` without a diagnostic too, but `get` returns its expression. `inspect` tells the cases apart without recording a diagnostic. It reads the expression like `get`, without evaluating it:
+`get` and `getValue` return `undefined` both for a field that is missing and for one that cannot be read statically: a path whose parent is not an object literal, or that a spread, a computed key, or a duplicate field leaves unproven, and for `getValue` a value it cannot evaluate, such as a call or a function. A field written as `undefined` is `undefined` too, but `get` returns its expression. Reads add no diagnostics, so they never stop a later write: a mutation proves the shape it edits again and reports its own. `inspect` tells the cases apart and gives the reason. It reads the expression like `get`, without evaluating it:
 
 ```ts
 const size = story.inspect(['args', 'size']);
@@ -32,12 +32,12 @@ if (size.kind === 'value') {
 }
 ```
 
-Read diagnostics count like mutation ones, so `writeConfig` refuses a config after a read that added one. Use `get` and `getValue` for the reads an edit depends on, so a file whose shape was not proven is not written, and `inspect` for reads that only inform, such as an addon showing a field.
+Use `inspect` when a missing field and an unreadable one call for different edits, such as an automigration that reports a file it cannot read instead of skipping it.
 
 `set` accepts an expression from `get` or `parseExpression`, or plain strings, numbers, booleans, `null`, `undefined`, and nested arrays or objects of those values and expressions. An object whose `type` names an AST node is rejected with a diagnostic unless it came from `get` or `parseExpression`. Plain values are printed into the source, so later changes to the input do not affect the file.
 An expression from `get` is indented as if its line had no indent, and `set` and `transform` indent a value's lines like the line of the field it is written to, so a value copied between fields keeps its layout. A field that spans lines, added to an object written on one line, puts every field of that object on a line of its own; a one-line field leaves the object on its line. Objects around it, and an object a field is grouped into, keep their layout.
 Successful removals and moves recursively remove empty source parents, stopping at the editor's root object or an empty parent that shadows an earlier spread or computed key. Removing a field that could reveal an earlier spread value produces a diagnostic. Moves clean up after inserting the destination, so shared ancestors remain intact. Unrelated empty objects are preserved.
-Nested object paths can follow local constants used only by that object; shared or reassigned references remain untouched.
+Reads follow any local constant. Edits follow only a constant that the edited object alone refers to; shared or reassigned references remain untouched.
 Nodes reused by `transform` keep their original source, so relocating a value prints it as written instead of pretty-printing it.
 `group(path, names)` nests named siblings under a destination object, retaining their source order. A new group replaces a contiguous run of source fields at their original position. Grouping into an existing object requires values whose relocation cannot change expression evaluation order. Conflicts, ambiguous keys, and unsafe relocations produce diagnostics before the operation changes the source; absent source fields are ignored.
 `node` is the editor's object literal in the current parse: the meta or story object, a call argument, or a config object. It is the file's own node, found again after every mutation: read it after editing instead of keeping it, and do not change it, since edits go through the source. It is `undefined` for a config made of named exports, for a story without an object literal, and once the object is gone.
diff --git a/code/core/src/csf-tools/estree/values.ts b/code/core/src/csf-tools/estree/values.ts
index 68ac14c4c1d7..1697282903c9 100644
--- a/code/core/src/csf-tools/estree/values.ts
+++ b/code/core/src/csf-tools/estree/values.ts
@@ -129,11 +129,27 @@ export const isEvaluationInert = (node: Node): boolean => {
   return false;
 };
 
-export const readValue = (scopes: ScopeInfo, node: Node): CsfValue | typeof UNRESOLVED => {
-  const value = resolveExpression(scopes, node);
-  if (!value) {
+// `reading` holds the values being read, so a constant that contains itself is unresolved.
+export const readValue = (
+  scopes: ScopeInfo,
+  node: Node,
+  reading = new Set<Node>()
+): CsfValue | typeof UNRESOLVED => {
+  const value = resolveExpression(scopes, node, 'read');
+  if (!value || reading.has(value)) {
     return UNRESOLVED;
   }
+  reading.add(value);
+  const result = readResolved(scopes, value, reading);
+  reading.delete(value);
+  return result;
+};
+
+const readResolved = (
+  scopes: ScopeInfo,
+  value: Node,
+  reading: Set<Node>
+): CsfValue | typeof UNRESOLVED => {
   if (value.type === 'Literal') {
     if ('regex' in value || 'bigint' in value) {
       return UNRESOLVED;
@@ -147,7 +163,7 @@ export const readValue = (scopes: ScopeInfo, node: Node): CsfValue | typeof UNRE
     return value.quasis[0].value.cooked ?? UNRESOLVED;
   }
   if (value.type === 'UnaryExpression') {
-    const argument = readValue(scopes, value.argument);
+    const argument = readValue(scopes, value.argument, reading);
     if (typeof argument !== 'number') {
       return UNRESOLVED;
     }
@@ -163,7 +179,11 @@ export const readValue = (scopes: ScopeInfo, node: Node): CsfValue | typeof UNRE
         elements.length++;
         continue;
       }
-      const item = readValue(scopes, element.type === 'SpreadElement' ? element.argument : element);
+      const item = readValue(
+        scopes,
+        element.type === 'SpreadElement' ? element.argument : element,
+        reading
+      );
       if (item === UNRESOLVED) {
         return UNRESOLVED;
       }
@@ -182,7 +202,7 @@ export const readValue = (scopes: ScopeInfo, node: Node): CsfValue | typeof UNRE
     const entries: [string, CsfValue][] = [];
     for (const property of value.properties) {
       if (property.type === 'SpreadElement') {
-        const spread = readValue(scopes, property.argument);
+        const spread = readValue(scopes, property.argument, reading);
         if (typeof spread !== 'object' || spread === null || Array.isArray(spread)) {
           return UNRESOLVED;
         }
@@ -198,7 +218,7 @@ export const readValue = (scopes: ScopeInfo, node: Node): CsfValue | typeof UNRE
       ) {
         return UNRESOLVED;
       }
-      const item = readValue(scopes, property.value);
+      const item = readValue(scopes, property.value, reading);
       if (item === UNRESOLVED) {
         return UNRESOLVED;
       }
@@ -209,7 +229,13 @@ export const readValue = (scopes: ScopeInfo, node: Node): CsfValue | typeof UNRE
   return UNRESOLVED;
 };
 
-export const resolveExpression = (scopes: ScopeInfo, node: Node): Node | undefined => {
+// Follows identifiers to the initializers of their constants. An edit through a constant changes
+// every user of it, so a `write` follows only a constant this identifier is the one reference of.
+export const resolveExpression = (
+  scopes: ScopeInfo,
+  node: Node,
+  access: 'read' | 'write' = 'write'
+): Node | undefined => {
   let value = unwrapExpression(node);
   const visited = new Set<Node>();
   while (isIdentifier(value) && !visited.has(value)) {
@@ -220,8 +246,8 @@ export const resolveExpression = (scopes: ScopeInfo, node: Node): Node | undefin
     }
     if (
       !binding?.constant ||
-      binding.references.length !== 1 ||
-      binding.references[0] !== value ||
+      (access === 'write' &&
+        (binding.references.length !== 1 || binding.references[0] !== value)) ||
       binding.node.type !== 'VariableDeclarator' ||
       binding.node.id.type !== 'Identifier' ||
       !binding.node.init
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/argtypes-default-value.ts b/code/lib/cli-storybook/src/automigrate/fixes/argtypes-default-value.ts
index 969d16ec3992..1c0b32566854 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/argtypes-default-value.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/argtypes-default-value.ts
@@ -2,6 +2,7 @@ import type { CsfObject, ESTree as E } from 'storybook/internal/csf-tools';
 
 import picocolors from 'picocolors';
 
+import { readForEdit } from '../helpers/edit-parsed-file.ts';
 import type { Fix } from '../types.ts';
 
 const argName = (property: E.ObjectProperty): string | undefined => {
@@ -15,7 +16,7 @@ const argName = (property: E.ObjectProperty): string | undefined => {
 };
 
 const strip = (object: CsfObject) => {
-  const argTypes = object.get(['argTypes']);
+  const argTypes = readForEdit(object, ['argTypes']);
   if (argTypes?.type !== 'ObjectExpression') {
     return;
   }
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/component-subtitle.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/component-subtitle.test.ts
index 6530374e5c83..dcb20fb83264 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/component-subtitle.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/component-subtitle.test.ts
@@ -107,4 +107,16 @@ describe('component-subtitle', () => {
     ]);
     expect(result.story).toBe(story);
   });
+
+  it('reports a componentSubtitle that a later spread may override', async () => {
+    const story =
+      "import { shared } from './shared';\nexport default { parameters: { componentSubtitle: 'A', ...shared } };";
+
+    const result = await migrate({ story });
+
+    expect(result.failures).toEqual([
+      { file: storyPath, kind: 'story', message: expect.stringContaining('spread') },
+    ]);
+    expect(result.story).toBe(story);
+  });
 });
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/component-subtitle.ts b/code/lib/cli-storybook/src/automigrate/fixes/component-subtitle.ts
index e45de52888d2..3bb58f8499ba 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/component-subtitle.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/component-subtitle.ts
@@ -2,6 +2,7 @@ import type { CsfObject } from 'storybook/internal/csf-tools';
 
 import picocolors from 'picocolors';
 
+import { readForEdit } from '../helpers/edit-parsed-file.ts';
 import type { Fix } from '../types.ts';
 
 const legacyPath = ['parameters', 'componentSubtitle'];
@@ -10,10 +11,10 @@ const subtitlePath = ['parameters', 'docs', 'subtitle'];
 // The Subtitle block read the preview and meta parameters only, and preferred `docs.subtitle`,
 // so an existing one keeps winning.
 const migrate = (object: CsfObject) => {
-  if (!object.get(legacyPath)) {
+  if (!readForEdit(object, legacyPath)) {
     return;
   }
-  if (object.get(subtitlePath)) {
+  if (readForEdit(object, subtitlePath)) {
     object.remove(legacyPath);
   } else {
     object.move(legacyPath, subtitlePath);
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/docgen-server.ts b/code/lib/cli-storybook/src/automigrate/fixes/docgen-server.ts
index e5fbd1266e88..540067658eb9 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/docgen-server.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/docgen-server.ts
@@ -1,3 +1,4 @@
+import { readForEdit } from '../helpers/edit-parsed-file.ts';
 import type { Fix } from '../types.ts';
 
 export const docgenServer: Fix = {
@@ -9,10 +10,10 @@ export const docgenServer: Fix = {
     {
       filter: { kind: ['main'], code: 'experimentalDocgenServer' },
       editConfig: (main) => {
-        if (!main.get(['features', 'experimentalDocgenServer'])) {
+        if (!readForEdit(main, ['features', 'experimentalDocgenServer'])) {
           return;
         }
-        if (main.get(['features', 'docgenServer'])) {
+        if (readForEdit(main, ['features', 'docgenServer'])) {
           main.remove(['features', 'experimentalDocgenServer']);
         } else {
           main.rename(['features', 'experimentalDocgenServer'], 'docgenServer');
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/story-sort-to-main.ts b/code/lib/cli-storybook/src/automigrate/fixes/story-sort-to-main.ts
index ca17360e4c7b..d5d5b7c582e7 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/story-sort-to-main.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/story-sort-to-main.ts
@@ -50,7 +50,11 @@ export const storySortToMain: Fix<StorySortToMainOptions> = {
         if (previewProblem) {
           fail(previewProblem);
         }
-        if (main.get(['storySorts'])) {
+        const existing = main.inspect(['storySorts']);
+        if (existing.kind === 'unreadable') {
+          fail(existing.diagnostic.message);
+        }
+        if (existing.kind === 'value') {
           fail('The main config already defines storySorts');
         }
         if (storySort === null || typeof storySort !== 'object') {
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/tag-filter-api.ts b/code/lib/cli-storybook/src/automigrate/fixes/tag-filter-api.ts
index 12d509e32eaa..4369991d62ee 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/tag-filter-api.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/tag-filter-api.ts
@@ -2,6 +2,7 @@ import { type ESTree as E, SourceEditor, walk } from 'storybook/internal/csf-too
 
 import picocolors from 'picocolors';
 
+import { readForEdit } from '../helpers/edit-parsed-file.ts';
 import type { Fix } from '../types.ts';
 
 const tagOptionRenames = {
@@ -81,12 +82,12 @@ export const tagFilterApi: Fix = {
     {
       filter: { kind: ['main'], code: /excludeFromSidebar|excludeFromDocsStories/ },
       editConfig: (main) => {
-        const tags = main.get(['tags']);
+        const tags = readForEdit(main, ['tags']);
         if (tags?.type !== 'ObjectExpression') {
           return;
         }
         for (const tagName of objectKeys(tags)) {
-          const option = main.get(['tags', tagName]);
+          const option = readForEdit(main, ['tags', tagName]);
           if (option?.type !== 'ObjectExpression') {
             continue;
           }
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/web-components-runtime-manifest.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/web-components-runtime-manifest.test.ts
index e734d7853ecb..abe8fce7b2fa 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/web-components-runtime-manifest.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/web-components-runtime-manifest.test.ts
@@ -464,6 +464,19 @@ describe('run', (): void => {
     `);
   });
 
+  it('adds customElementsManifest to a framework whose name is a call', async (): Promise<void> => {
+    vol.fromNestedJSON({
+      [MAIN]:
+        "export default { framework: { name: getAbsolutePath('@storybook/web-components-vite') } };",
+    });
+
+    await runWith();
+
+    expect(vol.readFileSync(MAIN, 'utf8')).toBe(
+      "export default { framework: { name: getAbsolutePath('@storybook/web-components-vite'), options: { customElementsManifest: '../custom-elements.json' } } };"
+    );
+  });
+
   it('grows a string framework into the object form', async (): Promise<void> => {
     vol.fromNestedJSON({
       [MAIN]: "export default { framework: '@storybook/web-components-vite' };",
diff --git a/code/lib/cli-storybook/src/automigrate/helpers/edit-parsed-file.ts b/code/lib/cli-storybook/src/automigrate/helpers/edit-parsed-file.ts
index f62b81ed69ed..53e8a4fd29f0 100644
--- a/code/lib/cli-storybook/src/automigrate/helpers/edit-parsed-file.ts
+++ b/code/lib/cli-storybook/src/automigrate/helpers/edit-parsed-file.ts
@@ -1,8 +1,16 @@
 import { HandledError } from 'storybook/internal/common';
-import type { ConfigFile } from 'storybook/internal/csf-tools';
+import type {
+  ConfigFile,
+  CsfMutationDiagnostic,
+  CsfObject,
+  ESTree as E,
+} from 'storybook/internal/csf-tools';
 
 type ParsedFile = { mutationDiagnostics: ConfigFile['mutationDiagnostics'] };
 
+const describeDiagnostic = ({ message, loc }: CsfMutationDiagnostic) =>
+  loc ? `line ${loc.start.line}: ${message}` : message;
+
 /** Run `edit` on a parsed file, and throw the mutation diagnostics it left, with their lines. */
 export const editParsedFile = async <File extends ParsedFile>(
   file: File,
@@ -12,9 +20,21 @@ export const editParsedFile = async <File extends ParsedFile>(
   await edit(file);
   const diagnostics = file.mutationDiagnostics.slice(diagnosticsBefore);
   if (diagnostics.length > 0) {
-    const messages = diagnostics.map(({ message, loc }) =>
-      loc ? `line ${loc.start.line}: ${message}` : message
-    );
-    throw new HandledError([...new Set(messages)].join('; '));
+    throw new HandledError([...new Set(diagnostics.map(describeDiagnostic))].join('; '));
+  }
+};
+
+/**
+ * Read the expression at a path that decides an edit, or `undefined` when it is missing. A field
+ * that cannot be read statically throws like a refused edit, so the file is reported, not skipped.
+ */
+export const readForEdit = (
+  object: CsfObject,
+  path: readonly string[]
+): E.Expression | undefined => {
+  const found = object.inspect(path);
+  if (found.kind === 'unreadable') {
+    throw new HandledError(describeDiagnostic(found.diagnostic));
   }
+  return found.kind === 'value' ? found.node : undefined;
 };

From 5eacb6504c00e3e94867fc53d7a0953074cea1a5 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 17:15:59 +0200
Subject: [PATCH 304/326] fix(csf-tools)!: roll back a refused mutation, so ok:
 false means unchanged

Every `CsfObject` mutation runs in a transaction of its own. An edit
that leaves valid JavaScript the CSF indexer rejects (`invalid-csf`), a
`move` refused between its two commits, and an edit that does not parse
all leave the file, its index and `changed` as they were, so
`csf.stories` and `objects()` keep working after a refusal. The failure
arm of `CsfMutationResult` is `changed: false`.

A refusal still rolls back the transaction around the mutation, and a
rollback without a commit in it no longer indexes the file again.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 MIGRATION.md                              |  2 +-
 code/core/src/csf-tools/CsfObject.test.ts | 73 +++++++++++++++--------
 code/core/src/csf-tools/CsfObject.ts      | 73 +++++++++++++++++------
 code/core/src/csf-tools/README.md         |  2 +-
 code/core/src/csf-tools/estree/editor.ts  | 24 ++++----
 5 files changed, 120 insertions(+), 54 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index f8edd695034d..113459ae68e3 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1393,7 +1393,7 @@ Storybook no longer bundles Babel or recast to read and write story and config f
 - `babelParse` is removed; use `parseModule(code, fileName)` from `storybook/internal/csf-tools`, which returns the ESTree `program` and `comments`. `babelParseFile` is removed as well; read CSF with `loadCsf(code, options)` or `readCsf(fileName, options)`.
 - Parsing normalizes line endings to `\n`. Node offsets from `parseModule`, `CsfFile._program` and `ConfigFile._program` index the normalized `code`/`_code`, not the string you passed in; lines and columns are unchanged.
 - `getHeaderComments(statement)` is removed. The editor keeps a file's header comments in place: `prependStatement` inserts below them, also in a file without statements, and `appendStatement` separates a multi-line statement from its neighbour with a blank line.
-- `CsfObject` mutations index the story file again after every edit, where they used to leave the index as it was and return `{ ok: true }`. An edit whose result is valid JavaScript but not valid CSF, for example a meta `tags` that is no longer an array of string literals, returns `{ ok: false, changed: true, diagnostic }` with code `'invalid-csf'`. The edit stays applied, and `csf.meta`, `csf.stories`, `csf.indexInputs`, `csf.getStoryExport()`, `csf.getStoryTests()` and `csf.objects()` throw the indexer's error until a commit indexes the file again; repair such a file through `csf._editor` edits and `csf._editor.commit()`, as `objects()` needs the index. An edit whose result does not parse throws, and its edits stay pending in `csf._editor`. The `ok: false` arm of `CsfMutationResult` now carries `changed: boolean`.
+- `CsfObject` mutations index the story file again after every edit, where they used to leave the index as it was and return `{ ok: true }`. An edit whose result is valid JavaScript but not valid CSF, for example a meta `tags` that is no longer an array of string literals, is rolled back and returns `{ ok: false, changed: false, diagnostic }` with code `'invalid-csf'`. A refused mutation always leaves the file as it was, so the index stays readable. An edit whose result does not parse throws, and is rolled back too. The `ok: false` arm of `CsfMutationResult` now carries `changed: false`.
 - `SourceEditor#edits`, the pending edits of an `_editor`, is a `SourceEdits`: text edits addressed by offsets into `code`, with `append`, `appendLeft`, `appendRight`, `overwrite`, `remove`, `slice`, `hasChanged`, `generateMap` and `toString`. `SourceEditor#generateMap()` returns a `GeneratedMap`.
 - `getAutomockCode(code, isSpy, fileName)` and `extractMockCalls(options, root, findMockRedirect)` in `storybook/internal/mocking-utils` parse the code themselves and no longer take a parser: drop the parser argument and pass the module's file name to `getAutomockCode`. `rewriteSbMockImportCalls(code, fileName)` requires the file name as well. `babelParser` is no longer exported; builders that passed it, such as `storybook-builder-rsbuild` 3.6, need a release that drops the argument. `automockModule` is no longer exported.
 - The story-shape helpers no longer take Babel paths: `jsDocTagsForPath` is `jsDocTagsForNode`, `metaObjectPath` is `metaObject`, `RenderFunctionPath` is `RenderFunction`, and `pathForNode` and `returnedExpressionPath` are removed in favor of `returnedExpression` and plain nodes. `keyOf` is `staticKey`, which returns `undefined` instead of `null` for a key it cannot read, and reads numeric and template-literal keys as well. `sourceOf` is `oneLineTextOf`: the node's source text with its line breaks collapsed and its comments kept, where `sourceOf` was a concise Babel reprint without comments; it takes nodes of `CsfFile._program`, `ConfigFile._program` or `parseExpression`, not of `parseModule`.
diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index b905d0b2126c..80e8dd998c1b 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -1424,9 +1424,10 @@ describe('CsfObject', () => {
   describe('an edit the CSF indexer rejects', () => {
     const load = (code: string) =>
       loadCsf(code, { fileName: 'B.stories.ts', makeTitle: (title) => title ?? 'B' }).parse();
+    const source = "export default { title: 'B', tags: ['docs'] };\nexport const A = {};\n";
 
-    it('keeps the edit and reports it instead of throwing', () => {
-      const csf = load("export default { title: 'B', tags: ['docs'] };\nexport const A = {};\n");
+    it('refuses the edit and leaves the file as it was', () => {
+      const csf = load(source);
       const [meta] = csf.objects({ stories: false });
 
       const result = meta.transform(['tags'], (value) =>
@@ -1435,52 +1436,76 @@ describe('CsfObject', () => {
 
       expect(result).toEqual({
         ok: false,
-        changed: true,
+        changed: false,
         diagnostic: expect.objectContaining({
           code: 'invalid-csf',
           path: ['tags'],
           message: expect.stringContaining('CSF: Expected tag to be string literal'),
         }),
       });
-      expect(printCsf(csf).code).toBe(
-        "export default { title: 'B', tags: [...['docs'], 'autodocs'] };\nexport const A = {};\n"
-      );
-      expect(csf.changed).toBe(true);
-      expect(meta.changed).toBe(true);
-      expect(csf._editor._committed).toHaveLength(1);
+      expect(printCsf(csf).code).toBe(source);
+      expect(csf.changed).toBe(false);
+      expect(meta.changed).toBe(false);
+      expect(csf.meta?.tags).toEqual(['docs']);
+      expect(csf.stories).toHaveLength(1);
+      expect(csf.objects()).toHaveLength(2);
       expect(csf.mutationDiagnostics).toEqual([
         expect.objectContaining({ code: 'invalid-csf', target: { kind: 'meta' } }),
       ]);
     });
 
-    it('throws for code that does not parse, leaving the edits pending and the index as it was', () => {
+    it('rolls back a move whose insertion the indexer rejects before its source is removed', () => {
+      const csf = load(
+        "export default { title: 'B', parameters: { a: 1 } };\nexport const A = {};\n"
+      );
+      const [meta] = csf.objects({ stories: false });
+
+      expect(meta.move(['parameters'], ['tags'])).toMatchObject({
+        ok: false,
+        changed: false,
+        diagnostic: { code: 'invalid-csf' },
+      });
+      expect(printCsf(csf).code).toBe(
+        "export default { title: 'B', parameters: { a: 1 } };\nexport const A = {};\n"
+      );
+      expect(csf.changed).toBe(false);
+    });
+
+    it('throws for code that does not parse, leaving earlier edits and the index as they were', () => {
       const csf = load("export default { title: 'B' };\nexport const A = {};\n");
       const [meta] = csf.objects({ stories: false });
       csf._editor.edits.appendLeft(0, '(');
 
       expect(() => meta.set(['tags'], ['docs'])).toThrow(/B\.stories\.ts$/);
-      expect(csf._editor.pending).toBe(true);
+      expect(csf._editor.edits.toString()).toBe(
+        "(export default { title: 'B' };\nexport const A = {};\n"
+      );
       expect(csf._editor._committed).toEqual([]);
       expect(csf.meta?.title).toBe('B');
+      expect(csf.changed).toBe(false);
       expect(csf.mutationDiagnostics).toEqual([]);
     });
 
     it.each([
       { path: ['title'], expression: '`B`', error: 'CSF: unexpected dynamic title' },
       { path: ['includeStories'], expression: 'fn()', error: 'Unknown include/exclude' },
-    ])('throws for the index after setting $path to $expression', ({ path, expression, error }) => {
-      const csf = load("export default { title: 'B' };\nexport const A = {};\n");
-      const [meta] = csf.objects({ stories: false });
-
-      expect(meta.set(path, parseExpression(expression)).ok).toBe(false);
-      expect(printCsf(csf).code).toContain(`${path[0]}: ${expression}`);
-      expect(() => csf.meta).toThrow(error);
-      expect(() => csf.stories).toThrow(error);
-      expect(() => csf.indexInputs).toThrow(error);
-      expect(() => csf.getStoryExport('A')).toThrow(error);
-      expect(() => csf.getStoryTests('A')).toThrow(error);
-      expect(() => csf.objects()).toThrow(error);
-    });
+    ])(
+      'refuses setting $path to $expression, keeping the index readable',
+      ({ path, expression, error }) => {
+        const csf = load("export default { title: 'B' };\nexport const A = {};\n");
+        const [meta] = csf.objects({ stories: false });
+
+        expect(meta.set(path, parseExpression(expression))).toMatchObject({
+          ok: false,
+          changed: false,
+          diagnostic: { code: 'invalid-csf', message: expect.stringContaining(error) },
+        });
+        expect(printCsf(csf).code).toBe("export default { title: 'B' };\nexport const A = {};\n");
+        expect(csf.meta?.title).toBe('B');
+        expect(csf.indexInputs).toHaveLength(1);
+        expect(csf.objects()).toHaveLength(2);
+      }
+    );
   });
 
   describe('transaction', () => {
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index beef2f4d3fae..05de52806f7b 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -66,12 +66,12 @@ export type CsfInspection =
   | { kind: 'unreadable'; diagnostic: CsfMutationDiagnostic };
 
 /**
- * Outcome of a mutation. `ok: false` with `changed: true` means the edit was applied but left a file
- * the CSF indexer rejects, such as a meta `tags` that is no longer an array of string literals.
+ * Outcome of a mutation. A refused one leaves the file as it was, also when its edit would leave a
+ * file the CSF indexer rejects, such as a meta `tags` that is no longer an array of string literals.
  */
 export type CsfMutationResult =
   | { ok: true; changed: boolean }
-  | { ok: false; changed: boolean; diagnostic: CsfMutationDiagnostic };
+  | { ok: false; changed: false; diagnostic: CsfMutationDiagnostic };
 
 /**
  * An expression detached from any file, as returned by `get` and accepted by `set` and
@@ -356,6 +356,10 @@ class Editor implements CsfObjectEditor {
   }
 
   set(path: readonly string[], value: CsfValue<CsfExpression>): CsfMutationResult {
+    return this.atomic(() => this.setValue(path, value));
+  }
+
+  private setValue(path: readonly string[], value: CsfValue<CsfExpression>): CsfMutationResult {
     if (path.length === 0 || unsafePath(path)) {
       return this.failure('unsupported-member', path, this.anchor());
     }
@@ -400,6 +404,10 @@ class Editor implements CsfObjectEditor {
   // `set` of an array of `items` at a missing path, which carries the spreads before it forward
   // like a missing parent, for appending to the array a spread may provide.
   createArray(path: readonly string[], items: string[]): CsfMutationResult {
+    return this.atomic(() => this.insertArray(path, items));
+  }
+
+  private insertArray(path: readonly string[], items: string[]): CsfMutationResult {
     if (path.length === 0 || unsafePath(path)) {
       return this.failure('unsupported-member', path, this.anchor());
     }
@@ -425,6 +433,13 @@ class Editor implements CsfObjectEditor {
   transform(
     path: readonly string[],
     derive: (value: CsfExpression) => CsfExpression | undefined
+  ): CsfMutationResult {
+    return this.atomic(() => this.transformValue(path, derive));
+  }
+
+  private transformValue(
+    path: readonly string[],
+    derive: (value: CsfExpression) => CsfExpression | undefined
   ): CsfMutationResult {
     if (path.length === 0 || unsafePath(path)) {
       return this.failure('unsupported-member', path, this.anchor());
@@ -447,6 +462,10 @@ class Editor implements CsfObjectEditor {
   }
 
   remove(path: readonly string[]): CsfMutationResult {
+    return this.atomic(() => this.removeValue(path));
+  }
+
+  private removeValue(path: readonly string[]): CsfMutationResult {
     if (path.length === 0 || unsafePath(path)) {
       return this.failure('unsupported-member', path, this.anchor());
     }
@@ -475,6 +494,10 @@ class Editor implements CsfObjectEditor {
   }
 
   move(from: readonly string[], to: readonly string[]): CsfMutationResult {
+    return this.atomic(() => this.moveValue(from, to));
+  }
+
+  private moveValue(from: readonly string[], to: readonly string[]): CsfMutationResult {
     if (from.length === 0 || to.length === 0 || unsafePath(from) || unsafePath(to)) {
       return this.failure('unsupported-member', from.length === 0 ? from : to, this.anchor());
     }
@@ -520,8 +543,7 @@ class Editor implements CsfObjectEditor {
     }
 
     const moved = source.parent.take(source.property, key);
-    // Insert first: if that throws, nothing has been committed. The source is removed afterwards,
-    // looked up again since the insertion moved its spans.
+    // The source is removed after the insertion, looked up again since the insertion moved its spans.
     this.insert(to.slice(0, -1), { members: [{ ...moved, key }] });
     const inserted = this.commit(from);
     if (!inserted.ok) {
@@ -540,6 +562,10 @@ class Editor implements CsfObjectEditor {
   }
 
   group(path: readonly string[], names: readonly string[]): CsfMutationResult {
+    return this.atomic(() => this.groupValues(path, names));
+  }
+
+  private groupValues(path: readonly string[], names: readonly string[]): CsfMutationResult {
     if (path.length === 0 || unsafePath(path) || unsafePath(names)) {
       return this.failure('unsupported-member', path, this.anchor());
     }
@@ -870,17 +896,31 @@ class Editor implements CsfObjectEditor {
     return { ok: false as const, changed: false as const, diagnostic };
   }
 
-  // The edit stays applied when the file's indexer rejects the committed code: the file is valid
-  // JS, so that is a diagnostic rather than an error. Code that does not parse is left pending by
-  // the editor, and the error is the caller's.
-  private commit(path: readonly string[]): CsfMutationResult {
-    if (!this.#changed) {
-      this.#changed = true;
-      this.editor._transaction?.rollbacks.push(() => {
-        this.#changed = false;
-      });
+  // Runs a mutation in a transaction of its own, so a refused or throwing one leaves the file as
+  // it was, also after some of its edits were committed. A refusal still rolls back the
+  // transaction around it.
+  private atomic(mutation: () => CsfMutationResult): CsfMutationResult {
+    let result = { ok: true, changed: false } as CsfMutationResult;
+    this.editor.transaction(() => {
+      result = mutation();
+    });
+    if (!result.ok) {
+      this.editor._refuse();
+    } else if (result.changed) {
+      if (!this.#changed) {
+        this.#changed = true;
+        this.editor._transaction?.rollbacks.push(() => {
+          this.#changed = false;
+        });
+      }
+      this.markChanged();
     }
-    this.markChanged();
+    return result;
+  }
+
+  // A file the indexer rejects is valid JS, so that is a diagnostic rather than an error. Code that
+  // does not parse throws, and the error is the caller's.
+  private commit(path: readonly string[]): CsfMutationResult {
     try {
       this.editor.commit();
     } catch (error) {
@@ -888,13 +928,12 @@ class Editor implements CsfObjectEditor {
         throw error;
       }
       const reason = error instanceof Error ? error.message : String(error);
-      const rejected = this.failure(
+      return this.failure(
         'invalid-csf',
         path,
         this.anchor(),
         `Edited ${path.join('.')}, but the result is not valid CSF: ${reason}`
       );
-      return { ...rejected, changed: true };
     }
     return { ok: true, changed: true };
   }
diff --git a/code/core/src/csf-tools/README.md b/code/core/src/csf-tools/README.md
index c5f43be7149a..42276a851f92 100644
--- a/code/core/src/csf-tools/README.md
+++ b/code/core/src/csf-tools/README.md
@@ -50,7 +50,7 @@ A story is also left untouched when it is written to other than by a top-level `
 
 `CsfFile.changed` is true once any mutation has been applied, which is the signal for whether the file needs to be written back.
 
-Each mutation is applied on its own. To apply several as one, run them in `transaction(fn)` on `CsfFile` or `ConfigFile`: when `fn` throws, returns `false`, or any mutation in it returns `{ ok: false }`, every edit made in it is rolled back, and `changed` with it. Mutations inside return their results as usual, and the diagnostics of refused ones stay on `mutationDiagnostics`. `transaction` returns whether the edits were kept. `fn` runs synchronously; one that returns a promise throws. A transaction inside another rolls back on its own, and with the outer one.
+Each mutation is applied on its own, and a refused one leaves the file as it was, also when its edit would leave a file the CSF indexer rejects (`invalid-csf`). To apply several as one, run them in `transaction(fn)` on `CsfFile` or `ConfigFile`: when `fn` throws, returns `false`, or any mutation in it returns `{ ok: false }`, every edit made in it is rolled back, and `changed` with it. Mutations inside return their results as usual, and the diagnostics of refused ones stay on `mutationDiagnostics`. `transaction` returns whether the edits were kept. `fn` runs synchronously; one that returns a promise throws. A transaction inside another rolls back on its own, and with the outer one.
 
 ```ts
 for (const story of csf.objects()) {
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index de943a2d2908..f0e14a2ba739 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -247,8 +247,8 @@ export class SourceEditor {
   /**
    * Run `fn`, keeping its edits only when it does not throw, does not return `false` and no
    * mutation in it was refused. Otherwise the code, the tree and the pending and committed edits
-   * are put back as they were and indexed again, as a commit would, and `onRollback` runs. Returns
-   * whether they were kept.
+   * are put back as they were, indexed again as a commit would when `fn` committed, and
+   * `onRollback` runs. Returns whether they were kept.
    */
   transaction(fn: () => boolean | void, onRollback?: () => void): boolean {
     const { _module, _style, _transaction: outer } = this;
@@ -272,17 +272,19 @@ export class SourceEditor {
         outer?.rollbacks.push(...transaction.rollbacks);
       } else {
         transaction.rollbacks.reverse().forEach((rollback) => rollback());
-        this._module = _module;
-        this._style = _style;
-        this._committed.length = committed;
         this._batch = batch;
         this._appendedWithoutBlankLine = appended;
-        this._scopes = undefined;
-        this._parents = undefined;
-        try {
-          this._onCommit?.();
-        } catch {
-          // The code before `fn` indexed, or failed to, the same way.
+        if (this._module !== _module) {
+          this._module = _module;
+          this._style = _style;
+          this._committed.length = committed;
+          this._scopes = undefined;
+          this._parents = undefined;
+          try {
+            this._onCommit?.();
+          } catch {
+            // The code before `fn` indexed, or failed to, the same way.
+          }
         }
       }
     }

From c3c52d8846c5998d135c25ed803a1ac17a69ab2c Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 17:16:51 +0200
Subject: [PATCH 305/326] fix(csf-tools): refuse a transform result no parse
 produced, as set does

`transform` printed its result directly, so a node from `parseModule`
or one built by hand threw while printing. It now returns the same
`unsupported-value` refusal as `set`.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/CsfObject.test.ts | 14 ++++++++++++
 code/core/src/csf-tools/CsfObject.ts      | 26 +++++++++++++++++------
 2 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index 80e8dd998c1b..59966aaf2372 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -250,6 +250,20 @@ describe('CsfObject', () => {
     expect(printCsf(csf).code).toBe(`export default { a: 1 };`);
   });
 
+  it('rejects a transform result that did not come from this API, like set', () => {
+    const source = 'export default { args: { n: 1 } };';
+    const csf = parse(source);
+    const [meta] = csf.objects({ stories: false });
+    const statement = parseModule('2').program.body[0] as ESTree.ExpressionStatement;
+
+    expect(meta.transform(['args', 'n'], () => statement.expression)).toMatchObject({
+      ok: false,
+      changed: false,
+      diagnostic: { code: 'unsupported-value', path: ['args', 'n'] },
+    });
+    expect(printCsf(csf).code).toBe(source);
+  });
+
   it('wraps a sequence expression unless its own parentheses already enclose it', () => {
     const csf = parse(`export default { b: ((1), 2) };`);
     const [meta] = csf.objects({ stories: false });
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index 05de52806f7b..95b8baa4f9b7 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -363,14 +363,9 @@ class Editor implements CsfObjectEditor {
     if (path.length === 0 || unsafePath(path)) {
       return this.failure('unsupported-member', path, this.anchor());
     }
-    const unprintable = nodeWithoutParse(value);
+    const unprintable = this.unprintable(path, value);
     if (unprintable) {
-      return this.failure(
-        'unsupported-value',
-        path,
-        this.anchor(),
-        `Cannot set ${path.join('.')} to a ${unprintable.type} node that did not come from \`get\`, \`transform\` or \`parseExpression\``
-      );
+      return unprintable;
     }
     const inspected = this.locate(path, 'set');
     if (inspected.ok === false) {
@@ -457,6 +452,10 @@ class Editor implements CsfObjectEditor {
     if (!derived || derived === value) {
       return { ok: true, changed: false };
     }
+    const unprintable = this.unprintable(path, derived);
+    if (unprintable) {
+      return unprintable;
+    }
     parent.replaceValue(property, detachedTextOf(derived));
     return this.commit(path);
   }
@@ -857,6 +856,19 @@ class Editor implements CsfObjectEditor {
     parent.append(content.members);
   }
 
+  // `printValue` would print a node no parse produced as its fields.
+  private unprintable(path: readonly string[], value: CsfValue<CsfExpression>) {
+    const node = nodeWithoutParse(value);
+    return node
+      ? this.failure(
+          'unsupported-value',
+          path,
+          this.anchor(),
+          `Cannot set ${path.join('.')} to a ${node.type} node that did not come from \`get\`, \`transform\` or \`parseExpression\``
+        )
+      : undefined;
+  }
+
   private refusedKey(parent: ObjectRoot, key: string, path: readonly string[]) {
     const refusal = parent.refuseKey?.(key);
     return refusal ? this.failure('unsupported-member', path, this.anchor(), refusal) : undefined;

From c8fe98dbbe9f11404ba215167dfb7e74398f9d1b Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 17:18:37 +0200
Subject: [PATCH 306/326] fix(csf-tools): report a story whose initializer
 objects() cannot edit

A story initialized with an identifier, a type assertion of one, or a
call that is not a bound template left `objects()` without a diagnostic.
It is now reported as `unsupported-initializer`, as the README promises
for every story discovery skips.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../src/csf-tools/CsfObjectDiscovery.test.ts  | 20 +++++++++++++++++++
 code/core/src/csf-tools/CsfObjectDiscovery.ts | 14 +++++++++----
 code/core/src/csf-tools/README.md             |  2 +-
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/code/core/src/csf-tools/CsfObjectDiscovery.test.ts b/code/core/src/csf-tools/CsfObjectDiscovery.test.ts
index 2f012985ff2b..a57ceca5c6d6 100644
--- a/code/core/src/csf-tools/CsfObjectDiscovery.test.ts
+++ b/code/core/src/csf-tools/CsfObjectDiscovery.test.ts
@@ -217,6 +217,26 @@ describe('CsfObject discovery', () => {
     );
   });
 
+  it.each(['base', 'base as Story', 'makeStory()'])(
+    'reports a story initialized with %s instead of leaving it out silently',
+    (initializer) => {
+      const csf = parse(`
+        export default { title: 'Example' };
+        const base = { args: {} };
+        export const Basic = ${initializer};
+      `);
+
+      expect(csf.objects({ meta: false })).toEqual([]);
+      expect(csf.mutationDiagnostics).toEqual([
+        expect.objectContaining({
+          code: 'unsupported-initializer',
+          target: { kind: 'story', exportName: 'Basic', localName: 'Basic' },
+          path: [],
+        }),
+      ]);
+    }
+  );
+
   describe('CSF2 annotation assignments', () => {
     const legacy = `export default { title: 'Example' };
 const Template = (args) => args;
diff --git a/code/core/src/csf-tools/CsfObjectDiscovery.ts b/code/core/src/csf-tools/CsfObjectDiscovery.ts
index e0f6478fe6ce..9252cd44b70b 100644
--- a/code/core/src/csf-tools/CsfObjectDiscovery.ts
+++ b/code/core/src/csf-tools/CsfObjectDiscovery.ts
@@ -528,10 +528,16 @@ const discoverStories = (
     if (write) {
       return reject(write);
     }
-    if (assignments.length === 0 && (object || !isAnnotatable(node))) {
-      return object
-        ? [{ target: storyTarget(binding), root: literalRoot(csf._editor, object) }]
-        : [];
+    if (assignments.length === 0 && object) {
+      return [{ target: storyTarget(binding), root: literalRoot(csf._editor, object) }];
+    }
+    if (assignments.length === 0 && !isAnnotatable(node)) {
+      return reject({
+        code: 'unsupported-initializer',
+        node: node ?? declaration,
+        path: [],
+        message: `Cannot mutate story ${binding.exportName} because it is not a story object, function or bound template`,
+      });
     }
     if (shared) {
       return reject(shared);
diff --git a/code/core/src/csf-tools/README.md b/code/core/src/csf-tools/README.md
index 42276a851f92..03d4a526dd9b 100644
--- a/code/core/src/csf-tools/README.md
+++ b/code/core/src/csf-tools/README.md
@@ -45,7 +45,7 @@ A story's top-level `Story.name = value` assignments (CSF2 annotations such as `
 
 Discovery and mutation are conservative: an object or a path whose shape cannot be proven is left untouched, and the reason is reported on `CsfFile.mutationDiagnostics` as a `CsfMutationDiagnostic`.
 Unproven shapes include story or meta bindings that are reassigned or aliased, a CSF factory configuration that is not an object literal owned by that single factory call, and target paths shadowed by a spread, a duplicate field, or a computed key.
-A story is also left untouched when it is written to other than by a top-level `Story.name = value`, such as `Story.args.label = 'x'`, `Story.parameters ||= {}` or `Story[name] = {}`. A story whose assignments are edited is left untouched when other code could see them: an alias, a spread, or a call or array that receives the story; calling or rendering the story is fine. Such a story without an object literal holds a function or a bound template; any other value could be shared with other stories.
+A story whose initializer is not an object literal, a function or a bound template, such as `export const A = base` or `makeStory()`, is reported as `unsupported-initializer`. A story is also left untouched when it is written to other than by a top-level `Story.name = value`, such as `Story.args.label = 'x'`, `Story.parameters ||= {}` or `Story[name] = {}`. A story whose assignments are edited is left untouched when other code could see them: an alias, a spread, or a call or array that receives the story; calling or rendering the story is fine. Such a story without an object literal holds a function or a bound template; any other value could be shared with other stories.
 `set` can still add a field missing from an object with a spread or a computed key: the field is appended after them, so it overrides any value they provide. A missing parent it creates there carries the spreads' member forward at every level it creates: `set(['args', 'a'], 1)` on `{ ...Base }` writes `args: { ...Base.args, a: 1 }`, and two levels deep `parameters: { ...Base.parameters, docs: { ...Base.parameters?.docs, x: 1 } }`. Of several spreads the last one with the member replaces the others, so they are read after `??`: `args: { ...(Two.args ?? One.args), a: 1 }`. `appendValueToArray` and `appendNodeToArray` create a missing array the same way, as `addons: [...(shared.addons ?? []), 'x']`. The spread's own member is read with `.`, as a story spreading a value that is not an object is broken already, and a member below it with `?.`, as it may be missing. For a spread of a local constant object literal the members are known: a member it has is read with `.`, and one it lacks is left out. A type assertion on the spread is kept. Only a spread of an identifier or a member chain such as `...stories.Base` is carried, as reading it again cannot change behaviour; after a spread of anything else, such as a call, or after a computed key, creating a parent or an array is refused. Changing or removing a field that a later spread or computed key could override is refused as well.
 
 `CsfFile.changed` is true once any mutation has been applied, which is the signal for whether the file needs to be written back.

From 058920dcec2980782a51e5ac4d9983bef0c88152 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 17:19:46 +0200
Subject: [PATCH 307/326] refactor(csf-tools)!: remove ConfigFile.removeField
 in favour of remove

`removeField` edited the file without setting `changed` or reporting
diagnostics, removed every declarator of a multi-declarator export and
ignored spreads. Nothing outside its tests called it. `remove` covers
it with the checks of the other mutations; MIGRATION maps one to the
other.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 MIGRATION.md                               |   1 +
 code/core/src/csf-tools/ConfigFile.test.ts | 309 +--------------------
 code/core/src/csf-tools/ConfigFile.ts      |  46 ---
 3 files changed, 7 insertions(+), 349 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 113459ae68e3..ee031d08590a 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1423,6 +1423,7 @@ If your custom migration tooling imports `ConfigFile` from `storybook/internal/c
 | ------------------------------------ | ------------------------ |
 | `getFieldValue`, `getSafeFieldValue` | `getValue`               |
 | `setFieldNode`, `setFieldValue`      | `set`                    |
+| `removeField`                        | `remove`                 |
 | `findNamedImportMethodCalls`         | `callArguments`          |
 | `FindNamedImportMethodCallsOptions`  | `CallArgumentsOptions`   |
 
diff --git a/code/core/src/csf-tools/ConfigFile.test.ts b/code/core/src/csf-tools/ConfigFile.test.ts
index a50daec80668..170927fb798c 100644
--- a/code/core/src/csf-tools/ConfigFile.test.ts
+++ b/code/core/src/csf-tools/ConfigFile.test.ts
@@ -28,12 +28,6 @@ const appendToArray = (path: string[], value: any, source: string) => {
   return printConfig(config).code;
 };
 
-const removeField = (path: string[], source: string) => {
-  const config = loadConfig(source).parse();
-  config.removeField(path);
-  return printConfig(config).code;
-};
-
 describe('ConfigFile', () => {
   it.each([
     `export default { parameters: { viewport: { disable: true } } };`,
@@ -48,7 +42,7 @@ describe('ConfigFile', () => {
     if (source.includes('disable: true')) {
       expect(config.getValue(['parameters', 'viewport', 'disable'])).toBe(true);
     }
-    config.removeField(['parameters', 'viewport', 'disable']);
+    config.remove(['parameters', 'viewport', 'disable']);
     config.set(['parameters', 'viewport', 'disabled'], true);
 
     const reparsed = loadConfig(printConfig(config).code).parse();
@@ -913,303 +907,12 @@ describe('ConfigFile', () => {
     });
   });
 
-  describe('removeField', () => {
-    describe('named exports', () => {
-      it('missing export', () => {
-        expect(
-          removeField(
-            ['core', 'builder'],
-            dedent`
-              export const addons = [];
-            `
-          )
-        ).toMatchInlineSnapshot(`export const addons = [];`);
-      });
-      it('missing field', () => {
-        expect(
-          removeField(
-            ['core', 'builder'],
-            dedent`
-              export const core = { foo: 'bar' };
-            `
-          )
-        ).toMatchInlineSnapshot(`export const core = { foo: 'bar' };`);
-      });
-      it('found scalar', () => {
-        expect(
-          removeField(
-            ['core', 'builder'],
-            dedent`
-              export const core = { builder: 'webpack4' };
-            `
-          )
-        ).toMatchInlineSnapshot(`export const core = {};`);
-      });
-      it('found object', () => {
-        expect(
-          removeField(
-            ['core', 'builder'],
-            dedent`
-              export const core = { builder: { name: 'webpack4' } };
-            `
-          )
-        ).toMatchInlineSnapshot(`export const core = {};`);
-      });
-      it('nested object', () => {
-        expect(
-          removeField(
-            ['core', 'builder', 'name'],
-            dedent`
-              export const core = { builder: { name: 'webpack4' } };
-            `
-          )
-        ).toMatchInlineSnapshot(`export const core = { builder: {} };`);
-      });
-      it('string literal key', () => {
-        expect(
-          removeField(
-            ['core', 'builder'],
-            dedent`
-              export const core = { 'builder': 'webpack4' };
-            `
-          )
-        ).toMatchInlineSnapshot(`export const core = {};`);
-      });
-      it('variable export', () => {
-        expect(
-          removeField(
-            ['core', 'builder'],
-            dedent`
-            const coreVar = { builder: 'webpack4' };
-            export const core = coreVar;
-            `
-          )
-        ).toMatchInlineSnapshot(`
-          const coreVar = {};
-          export const core = coreVar;
-        `);
-      });
-      it('root export variable', () => {
-        expect(
-          removeField(
-            ['core'],
-            dedent`
-              export const core = { builder: { name: 'webpack4' } };
+  it('removes a field of a multi-declarator export through remove, keeping its siblings', () => {
+    const config = loadConfig("export const framework = 'x', a = 1;").parse();
 
-              export const addons = [];
-            `
-          )
-        ).toMatchInlineSnapshot(`export const addons = [];`);
-      });
-    });
-
-    describe('module exports', () => {
-      it('missing export', () => {
-        expect(
-          removeField(
-            ['core', 'builder'],
-            dedent`
-              module.exports = { addons: [] };
-            `
-          )
-        ).toMatchInlineSnapshot(`module.exports = { addons: [] };`);
-      });
-      it('missing field', () => {
-        expect(
-          removeField(
-            ['core', 'builder'],
-            dedent`
-              module.exports = { core: { foo: 'bar' }};
-            `
-          )
-        ).toMatchInlineSnapshot(`module.exports = { core: { foo: 'bar' }};`);
-      });
-      it('found scalar', () => {
-        expect(
-          removeField(
-            ['core', 'builder'],
-            dedent`
-              module.exports = { core: { builder: 'webpack4' } };
-            `
-          )
-        ).toMatchInlineSnapshot(`module.exports = { core: {} };`);
-      });
-      it('nested scalar', () => {
-        expect(
-          removeField(
-            ['core', 'builder', 'name'],
-            dedent`
-              module.exports = { core: { builder: { name: 'webpack4' } } };
-            `
-          )
-        ).toMatchInlineSnapshot(`module.exports = { core: { builder: {} } };`);
-      });
-      it('string literal key', () => {
-        expect(
-          removeField(
-            ['core', 'builder'],
-            dedent`
-              module.exports = { 'core': { 'builder': 'webpack4' } };
-            `
-          )
-        ).toMatchInlineSnapshot(`module.exports = { 'core': {} };`);
-      });
-      it('root property', () => {
-        expect(
-          removeField(
-            ['core'],
-            dedent`
-              module.exports = { core: { builder: { name: 'webpack4' } }, addons: [] };
-            `
-          )
-        ).toMatchInlineSnapshot(`module.exports = { addons: [] };`);
-      });
-    });
-
-    describe('default export', () => {
-      it('missing export', () => {
-        expect(
-          removeField(
-            ['core', 'builder'],
-            dedent`
-              export default { addons: [] };
-            `
-          )
-        ).toMatchInlineSnapshot(`export default { addons: [] };`);
-      });
-      it('missing field', () => {
-        expect(
-          removeField(
-            ['core', 'builder'],
-            dedent`
-              export default { core: { foo: 'bar' }};
-            `
-          )
-        ).toMatchInlineSnapshot(`export default { core: { foo: 'bar' }};`);
-      });
-      it('found scalar', () => {
-        expect(
-          removeField(
-            ['core', 'builder'],
-            dedent`
-              export default { core: { builder: 'webpack4' } };
-            `
-          )
-        ).toMatchInlineSnapshot(`export default { core: {} };`);
-      });
-      it('nested scalar', () => {
-        expect(
-          removeField(
-            ['core', 'builder', 'name'],
-            dedent`
-              export default { core: { builder: { name: 'webpack4' } } };
-            `
-          )
-        ).toMatchInlineSnapshot(`export default { core: { builder: {} } };`);
-      });
-      it('string literal key', () => {
-        expect(
-          removeField(
-            ['core', 'builder'],
-            dedent`
-              export default { 'core': { 'builder': 'webpack4' } };
-            `
-          )
-        ).toMatchInlineSnapshot(`export default { 'core': {} };`);
-      });
-      it('root property', () => {
-        expect(
-          removeField(
-            ['core'],
-            dedent`
-              export default { core: { builder: { name: 'webpack4' } }, addons: [] };
-            `
-          )
-        ).toMatchInlineSnapshot(`export default { addons: [] };`);
-      });
-      it('root globals as variable', () => {
-        expect(
-          removeField(
-            ['globals'],
-            dedent`
-              const preview = { globals: { a: 1 }, bar: { a: 1 } };
-              export default preview;
-            `
-          )
-        ).toMatchInlineSnapshot(`
-          const preview = { bar: { a: 1 } };
-          export default preview;
-        `);
-      });
-
-      it('root globals satsifies as variable', () => {
-        expect(
-          removeField(
-            ['globals'],
-            dedent`
-              const preview = {
-                globals: { a: 1 },
-                bar: { a: 1 }
-              } satisfies Foo;
-              export default preview;
-            `
-          )
-        ).toMatchInlineSnapshot(`
-          const preview = {
-            bar: { a: 1 }
-          } satisfies Foo;
-          export default preview;
-        `);
-      });
-
-      it('root property of a config factory', () => {
-        expect(
-          removeField(['addons'], `export default defineMain({ framework: 'x', addons: ['a'] });`)
-        ).toBe(`export default defineMain({ framework: 'x' });`);
-      });
-
-      it('root globals as const satisfies as variable', () => {
-        expect(
-          removeField(
-            ['globals'],
-            dedent`
-              const preview = {
-                globals: { a: 1 },
-                bar: { a: 1 }
-              } as const satisfies Foo;
-              export default preview;
-            `
-          )
-        ).toMatchInlineSnapshot(`
-          const preview = {
-            bar: { a: 1 }
-          } as const satisfies Foo;
-          export default preview;
-        `);
-      });
-    });
-
-    describe('quotes', () => {
-      it('no quotes', () => {
-        expect(setField(['foo', 'bar'], 'baz', '')).toMatchInlineSnapshot(
-          `export const foo = { bar: "baz" };`
-        );
-      });
-      it('more single quotes', () => {
-        expect(setField(['foo', 'bar'], 'baz', `export const stories = ['a', 'b', "c"]`))
-          .toMatchInlineSnapshot(`
-            export const stories = ['a', 'b', "c"]
-            export const foo = { bar: 'baz' };
-          `);
-      });
-      it('more double quotes', () => {
-        expect(setField(['foo', 'bar'], 'baz', `export const stories = ['a', "b", "c"]`))
-          .toMatchInlineSnapshot(`
-            export const stories = ['a', "b", "c"]
-            export const foo = { bar: "baz" };
-          `);
-      });
-    });
+    expect('removeField' in config).toBe(false);
+    expect(config.remove(['framework'])).toEqual({ ok: true, changed: true });
+    expect(printConfig(config).code).toBe('export const a = 1;');
   });
 
   describe('config helpers', () => {
diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index c2c2c40d647b..61b5c4a99cf1 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -774,52 +774,6 @@ export class ConfigFile implements CsfObject {
     return value;
   }
 
-  removeField(path: string[]) {
-    const editor = this._editor;
-    const removeProperty = (object: E.ObjectExpression, prop: string) => {
-      const member = object.properties.find((p) => staticKey(p) === prop);
-      if (member) {
-        removeFromList(editor, objectList(editor, object), [member]);
-      }
-    };
-    // the structure of this._exports doesn't work for this use case
-    // so we have to manually bypass it here
-    if (path.length === 1) {
-      let removedRootProperty = false;
-      // removing the root export
-      for (const node of this._program.body) {
-        // named export
-        if (
-          node.type === 'ExportNamedDeclaration' &&
-          node.declaration?.type === 'VariableDeclaration'
-        ) {
-          const decl = node.declaration.declarations[0];
-          if (isIdentifier(decl.id, path[0])) {
-            removeStatement(editor, node);
-            removedRootProperty = true;
-          }
-        }
-      }
-      // The config object `parse` found, unwrapped from factory calls like `defineMain({})`.
-      if (this._exportsObject) {
-        removeProperty(this._exportsObject, path[0]);
-        removedRootProperty = true;
-      }
-
-      if (removedRootProperty) {
-        this._editor.commit();
-        return;
-      }
-    }
-
-    const [root, ...rest] = path;
-    const parentNode = _getPath(rest.slice(0, -1), this._exports[root]);
-    if (this._exports[root] && parentNode?.type === 'ObjectExpression') {
-      removeProperty(parentNode, path.at(-1)!);
-      this._editor.commit();
-    }
-  }
-
   /** Append a plain value to the array literal at a path, creating the field when it is missing. */
   appendValueToArray(path: string[], value: any): CsfMutationResult {
     return this.appendNodeToArray(path, this.valueToNode(value));

From 7407c0dd49d5a64cbcaac44d63e06e353bea1f8a Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Tue, 20 Oct 2026 17:24:46 +0200
Subject: [PATCH 308/326] fix(codemod): leave Svelte CSF files alone in
 csf-2-to-3

The csf-factories automigration runs csf-2-to-3 on its glob first, and that
glob now includes `.stories.svelte` files. loadCsf can't parse them, so each
valid Svelte CSF file printed a syntax error before the real migration.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/transforms/__tests__/csf-2-to-3.test.ts    | 14 ++++++++++++++
 code/lib/codemod/src/transforms/csf-2-to-3.ts      |  4 ++++
 2 files changed, 18 insertions(+)

diff --git a/code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts b/code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts
index ae17188cfc2a..accfdc359ff0 100644
--- a/code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts
+++ b/code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts
@@ -21,6 +21,20 @@ const tsTransform = async (source: string) =>
   ).trim();
 
 describe('csf-2-to-3', () => {
+  it('leaves Svelte CSF files unchanged', async () => {
+    const source = dedent`
+      <script module>
+        import { defineMeta } from '@storybook/svelte';
+        const { Story } = defineMeta({});
+      </script>
+
+      <Story name="Primary" args={{ primary: true }} />
+    `;
+    await expect(
+      _transform({ source, path: 'Button.stories.svelte' }, {} as API, {})
+    ).resolves.toBe(source);
+  });
+
   describe('javascript', () => {
     it('should replace non-simple function exports with objects', async () => {
       await expect(
diff --git a/code/lib/codemod/src/transforms/csf-2-to-3.ts b/code/lib/codemod/src/transforms/csf-2-to-3.ts
index 4fd671098a5f..599f73a3059c 100644
--- a/code/lib/codemod/src/transforms/csf-2-to-3.ts
+++ b/code/lib/codemod/src/transforms/csf-2-to-3.ts
@@ -132,6 +132,10 @@ function removeUnusedTemplates(csf: CsfFile) {
 }
 
 export default async function transform(info: FileInfo, api: API, options: { parser?: string }) {
+  // Svelte CSF files are never CSF 2, but the glob of the csf-factories automigration includes them
+  if (info.path.endsWith('.svelte')) {
+    return info.source;
+  }
   const makeTitle = (userTitle?: string) => {
     return userTitle || 'FIXME';
   };

From f38bfa2b9d2dc22f2126f68bfe83d4de75aa0543 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Tue, 20 Oct 2026 17:24:49 +0200
Subject: [PATCH 309/326] fix(cli): warn when the codemod can't read an aliased
 Svelte CSF import

The codemod reads an imported `.stories.svelte` file to find the exports that
aren't stories. It doesn't follow builder aliases such as `$lib`, so it now
warns that it treats every export of that file as a story.

The tests seed the imported files in memfs, not in a temporary directory.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../helpers/story-to-csf-factory.test.ts      | 29 ++++++----
 .../helpers/svelte-csf-to-csf-factory.test.ts | 56 +++++++++++++++----
 .../helpers/svelte-csf-to-csf-factory.ts      | 10 +++-
 3 files changed, 72 insertions(+), 23 deletions(-)

diff --git a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
index ea996a527e79..f0d38fd9e353 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
@@ -1,15 +1,17 @@
-import { describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import { formatFileContent } from 'storybook/internal/common';
 import { logger } from 'storybook/internal/node-logger';
 
-import { mkdtempSync, writeFileSync } from 'node:fs';
-import { tmpdir } from 'node:os';
-import path, { join } from 'path';
+import { readFileSync } from 'node:fs';
+
+import { fs, vol } from 'memfs';
+import path from 'path';
 import { dedent } from 'ts-dedent';
 
 import { storyToCsfFactory } from './story-to-csf-factory.ts';
 
+vi.mock('node:fs', { spy: true });
 vi.mock('storybook/internal/node-logger', () => ({
   logger: {
     log: vi.fn(),
@@ -17,6 +19,11 @@ vi.mock('storybook/internal/node-logger', () => ({
   },
 }));
 
+// Vitest reads its own modules through `node:fs` too, so only the tests that seed memfs read from it
+afterEach(() => {
+  vi.mocked(readFileSync).mockReset();
+});
+
 expect.addSnapshotSerializer({
   serialize: (val: any) => (typeof val === 'string' ? val : val.toString()),
   test: () => true,
@@ -296,20 +303,20 @@ describe('stories codemod', () => {
     });
 
     it('keeps the exports of an imported Svelte CSF file that are not stories', async () => {
-      const dir = mkdtempSync(join(tmpdir(), 'svelte-csf-'));
-      writeFileSync(
-        join(dir, 'Task.stories.svelte'),
-        dedent`
+      vol.reset();
+      vol.fromJSON({
+        '/project/src/Task.stories.svelte': dedent`
           <script module>
             export const TaskData = { task: { id: '1' } };
           </script>
-        `
-      );
+        `,
+      });
+      vi.mocked(readFileSync).mockImplementation(fs.readFileSync as typeof readFileSync);
 
       await expect(
         storyToCsfFactory(
           {
-            path: join(dir, 'TaskList.stories.ts'),
+            path: '/project/src/TaskList.stories.ts',
             source: dedent`
               import * as TaskStories from './Task.stories.svelte';
 
diff --git a/code/lib/cli-storybook/src/codemod/helpers/svelte-csf-to-csf-factory.test.ts b/code/lib/cli-storybook/src/codemod/helpers/svelte-csf-to-csf-factory.test.ts
index 6cb4ef710536..506c8dae7e98 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/svelte-csf-to-csf-factory.test.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/svelte-csf-to-csf-factory.test.ts
@@ -1,13 +1,27 @@
-import { mkdtempSync, writeFileSync } from 'node:fs';
-import { tmpdir } from 'node:os';
-import { join } from 'node:path';
+import { readFileSync } from 'node:fs';
 
-import { describe, expect, it } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
+import { logger } from 'storybook/internal/node-logger';
+
+import { fs, vol } from 'memfs';
+import { join } from 'pathe';
 import { dedent } from 'ts-dedent';
 
 import { svelteCsfToCsfFactory } from './svelte-csf-to-csf-factory.ts';
 
+vi.mock('node:fs', { spy: true });
+vi.mock('storybook/internal/node-logger', { spy: true });
+
+beforeEach(() => {
+  vi.mocked(logger.warn).mockImplementation(() => {});
+});
+
+// Vitest reads its own modules through `node:fs` too, so only the tests that seed memfs read from it
+afterEach(() => {
+  vi.mocked(readFileSync).mockReset();
+});
+
 // The Svelte renderer type-checks the files written there with `svelte-check`
 const TYPE_FIXTURES_DIR = join(
   import.meta.dirname,
@@ -136,10 +150,10 @@ describe('svelteCsfToCsfFactory', () => {
   });
 
   it('keeps the exports of an imported Svelte CSF file that are not stories', () => {
-    const dir = mkdtempSync(join(tmpdir(), 'svelte-csf-'));
-    writeFileSync(
-      join(dir, 'Task.stories.svelte'),
-      dedent`
+    vol.reset();
+    vi.mocked(readFileSync).mockImplementation(fs.readFileSync as typeof readFileSync);
+    vol.fromJSON({
+      '/project/src/stories/Task.stories.svelte': dedent`
         <script module>
           import { defineMeta } from '@storybook/svelte';
           export const TaskData = { task: { id: '1' }, events: {} };
@@ -147,8 +161,8 @@ describe('svelteCsfToCsfFactory', () => {
         </script>
 
         <Story name="Default" />
-      `
-    );
+      `,
+    });
 
     expect(
       transform(
@@ -163,7 +177,7 @@ describe('svelteCsfToCsfFactory', () => {
 
           <Story name="Default" args={{ ...TaskStories.Default.args, events: TaskData.events }} />
         `,
-        join(dir, 'TaskList.stories.svelte')
+        '/project/src/stories/TaskList.stories.svelte'
       )
     ).toMatchInlineSnapshot(`
       "<script module>
@@ -178,6 +192,26 @@ describe('svelteCsfToCsfFactory', () => {
     `);
   });
 
+  it('warns that it does not follow builder aliases', () => {
+    expect(
+      transform(dedent`
+        <script module>
+          import { defineMeta } from '@storybook/svelte';
+          import * as TaskStories from '$lib/Task.stories.svelte';
+
+          const { Story } = defineMeta({ args: { ...TaskStories.Default.args } });
+        </script>
+      `)
+    ).toContain('TaskStories.Default.input.args');
+    expect(vi.mocked(logger.warn).mock.calls).toMatchInlineSnapshot(`
+      [
+        [
+          "Can't read $lib/Task.stories.svelte, imported by /project/src/stories/Button.stories.svelte: the codemod doesn't follow builder aliases. It treats every export of that file as a story. Check the references to exports that aren't stories, such as data.",
+        ],
+      ]
+    `);
+  });
+
   it('reads the story imports of every module script', () => {
     expect(
       transform(dedent`
diff --git a/code/lib/cli-storybook/src/codemod/helpers/svelte-csf-to-csf-factory.ts b/code/lib/cli-storybook/src/codemod/helpers/svelte-csf-to-csf-factory.ts
index 80f5db1c5f95..9d806be9d40a 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/svelte-csf-to-csf-factory.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/svelte-csf-to-csf-factory.ts
@@ -1,7 +1,9 @@
 import { readFileSync } from 'node:fs';
-import { dirname, resolve } from 'node:path';
 
 import { parser, traverse, types as t } from 'storybook/internal/babel';
+import { logger } from 'storybook/internal/node-logger';
+
+import { dirname, resolve } from 'pathe';
 
 import type { FileInfo } from '../../automigrate/codemod.ts';
 import {
@@ -65,6 +67,12 @@ export function findSvelteCsfNonStoryExports(importer: string, source: string):
   if (!source.endsWith('.svelte')) {
     return [];
   }
+  if (!source.startsWith('.')) {
+    logger.warn(
+      `Can't read ${source}, imported by ${importer}: the codemod doesn't follow builder aliases. It treats every export of that file as a story. Check the references to exports that aren't stories, such as data.`
+    );
+    return [];
+  }
   let code;
   try {
     code = readFileSync(resolve(dirname(importer), source), 'utf-8');

From bc4cbe813bba24c0b8aa8032f27b10202adfe01a Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 17:27:59 +0200
Subject: [PATCH 310/326] feat(csf-tools): make editor, program and
 appendStatement public API

`CsfFile` and `ConfigFile` expose `editor` and `program`, and `CsfFile`
an `appendStatement`, for the edits no `CsfObject` path addresses. The
underscored names stay as deprecated aliases for Storybook 11; in-repo
callers use the public names, and MIGRATION points at them.

The parse, the pending batch and the running transaction of a
`SourceEditor` are private now; mutations register their rollbacks
through `_onRollback`. A full typecheck shows the class stays assignable
across the packages that consume it.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 MIGRATION.md                                  | 10 +-
 .../common/utils/resolve-meta-component.ts    |  4 +-
 .../utils/setup-addon-in-config.test.ts       |  2 +-
 code/core/src/common/utils/subcomponents.ts   |  4 +-
 .../common/utils/sync-main-preview-addons.ts  |  2 +-
 .../utils/wrap-getAbsolutePath-utils.ts       | 12 +--
 .../duplicate-story-with-new-name.ts          |  8 +-
 .../save-story/update-args-in-csf-file.ts     |  2 +-
 code/core/src/csf-tools/ConfigFile.test.ts    | 12 +++
 code/core/src/csf-tools/ConfigFile.ts         | 96 +++++++++++--------
 code/core/src/csf-tools/ConfigObject.ts       |  4 +-
 code/core/src/csf-tools/CsfFile.test.ts       | 16 ++++
 code/core/src/csf-tools/CsfFile.ts            | 89 ++++++++++-------
 code/core/src/csf-tools/CsfObject.test.ts     |  6 +-
 code/core/src/csf-tools/CsfObject.ts          |  2 +-
 code/core/src/csf-tools/CsfObjectDiscovery.ts | 26 ++---
 code/core/src/csf-tools/README.md             |  2 +
 code/core/src/csf-tools/corpus.test.ts        |  2 +-
 code/core/src/csf-tools/enrichCsf.ts          |  8 +-
 .../src/csf-tools/estree/editor.test-d.ts     | 13 +++
 code/core/src/csf-tools/estree/editor.test.ts | 18 ++--
 code/core/src/csf-tools/estree/editor.ts      | 25 +++--
 .../story-shape/import-statements.test.ts     |  2 +-
 .../src/csf-tools/story-shape/imports.test.ts |  2 +-
 .../src/csf-tools/story-shape/jsdoc.test.ts   |  2 +-
 .../story-shape/normalize-story.test.ts       |  4 +-
 .../src/csf-tools/story-shape/render.test.ts  |  8 +-
 code/core/src/csf-tools/story-shape/render.ts |  6 +-
 .../story-shape/resolve-story-args.ts         |  2 +-
 .../src/csf-tools/story-shape/utils.test.ts   | 10 +-
 .../csf-tools/vitest-plugin/transformer.ts    |  2 +-
 .../src/docgen/story-docs-build.ts            |  4 +-
 .../src/docgen/story-docs-markup.ts           |  4 +-
 .../fixes/angular-to-angular-vite.ts          |  2 +-
 .../fixes/angular-vite-remove-compodoc.ts     |  4 +-
 .../automigrate/fixes/csf-next-mocked-args.ts |  2 +-
 .../fixes/web-components-runtime-manifest.ts  | 10 +-
 .../src/automigrate/helpers/preview-call.ts   |  4 +-
 .../codemod/helpers/config-to-csf-factory.ts  | 16 ++--
 .../helpers/remove-unused-types.test.ts       |  2 +-
 .../codemod/helpers/story-to-csf-factory.ts   |  2 +-
 .../codemod/helpers/wrap-args-mocks.test.ts   |  2 +-
 code/lib/codemod/src/transforms/csf-2-to-3.ts |  2 +-
 .../src/transforms/find-implicit-spies.ts     |  2 +-
 .../buildReactComponentDocgen.ts              |  4 +-
 .../componentManifest/generateCodeSnippet.ts  |  6 +-
 .../componentManifest/getComponentImports.ts  |  6 +-
 .../componentManifest/resolveComponents.ts    |  2 +-
 code/renderers/react/src/enrichCsf.ts         |  2 +-
 .../docgen/component-docgen/build-docgen.ts   |  4 +-
 .../src/docgen/story-docs/build-story-docs.ts |  8 +-
 .../docgen/story-docs/print-h/print-h.test.ts | 14 +--
 .../docgen/component-docgen/build-docgen.ts   |  2 +-
 .../resolve-component/resolve-component.ts    |  4 +-
 .../src/docgen/story-docs/build-story-docs.ts |  2 +-
 .../src/docgen/story-docs/template-scope.ts   |  2 +-
 scripts/tasks/sandbox-parts.ts                | 14 +--
 57 files changed, 303 insertions(+), 224 deletions(-)
 create mode 100644 code/core/src/csf-tools/estree/editor.test-d.ts

diff --git a/MIGRATION.md b/MIGRATION.md
index ee031d08590a..72d9b3eaefd4 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1387,16 +1387,16 @@ Storybook no longer bundles Babel or recast to read and write story and config f
 
 - `storybook/internal/babel` is removed. Import Babel from your own `@babel/*` dependencies if you still need it.
 - `getBabelDependencies` is removed from `storybook/internal/cli`.
-- The nodes exposed by `storybook/internal/csf-tools` are ESTree (OXC) nodes instead of Babel nodes, for example `Literal` instead of `StringLiteral` and `Property` instead of `ObjectProperty`/`ObjectMethod`. `CsfFile._ast` and the `NodePath` fields are removed; use `CsfFile._program` and `CsfFile._editor`. `ConfigFile._ast` is removed as well; use `ConfigFile._program` and `ConfigFile._editor`. Both `_editor`s are a `SourceEditor`: call `_editor.commit()` to apply pending edits, after which the file parses the result again. The editing functions and `source()` throw for nodes of another parse, such as nodes from before a commit; offsets passed to `_editor.edits` are not checked.
+- The nodes exposed by `storybook/internal/csf-tools` are ESTree (OXC) nodes instead of Babel nodes, for example `Literal` instead of `StringLiteral` and `Property` instead of `ObjectProperty`/`ObjectMethod`. `CsfFile._ast` and the `NodePath` fields are removed; use `CsfFile.program` and `CsfFile.editor`. `ConfigFile._ast` is removed as well; use `ConfigFile.program` and `ConfigFile.editor`. Both `editor`s are a `SourceEditor`: call `editor.commit()` to apply pending edits, after which the file parses the result again. `_program` and `_editor` remain as deprecated aliases in Storybook 11. The editing functions and `source()` throw for nodes of another parse, such as nodes from before a commit; offsets passed to `editor.edits` are not checked.
 - `CsfObject#get` returns an ESTree expression, and `set`/`transform` accept expressions from `get()` or `parseExpression(code)`. Use `textOf(node)` to read an expression's source, and `placeableTextOf(node)` to build new code around it.
-- An `experimental_enrichCsf` function receives the new `CsfFile`. Add code with `csf._appendStatement(code)` instead of pushing Babel nodes onto `csf._ast`.
+- An `experimental_enrichCsf` function receives the new `CsfFile`. Add code with `csf.appendStatement(code)` instead of pushing Babel nodes onto `csf._ast`; `_appendStatement` remains as a deprecated alias.
 - `babelParse` is removed; use `parseModule(code, fileName)` from `storybook/internal/csf-tools`, which returns the ESTree `program` and `comments`. `babelParseFile` is removed as well; read CSF with `loadCsf(code, options)` or `readCsf(fileName, options)`.
-- Parsing normalizes line endings to `\n`. Node offsets from `parseModule`, `CsfFile._program` and `ConfigFile._program` index the normalized `code`/`_code`, not the string you passed in; lines and columns are unchanged.
+- Parsing normalizes line endings to `\n`. Node offsets from `parseModule`, `CsfFile.program` and `ConfigFile.program` index the normalized `code`/`_code`, not the string you passed in; lines and columns are unchanged.
 - `getHeaderComments(statement)` is removed. The editor keeps a file's header comments in place: `prependStatement` inserts below them, also in a file without statements, and `appendStatement` separates a multi-line statement from its neighbour with a blank line.
 - `CsfObject` mutations index the story file again after every edit, where they used to leave the index as it was and return `{ ok: true }`. An edit whose result is valid JavaScript but not valid CSF, for example a meta `tags` that is no longer an array of string literals, is rolled back and returns `{ ok: false, changed: false, diagnostic }` with code `'invalid-csf'`. A refused mutation always leaves the file as it was, so the index stays readable. An edit whose result does not parse throws, and is rolled back too. The `ok: false` arm of `CsfMutationResult` now carries `changed: false`.
-- `SourceEditor#edits`, the pending edits of an `_editor`, is a `SourceEdits`: text edits addressed by offsets into `code`, with `append`, `appendLeft`, `appendRight`, `overwrite`, `remove`, `slice`, `hasChanged`, `generateMap` and `toString`. `SourceEditor#generateMap()` returns a `GeneratedMap`.
+- `SourceEditor#edits`, the pending edits of an `editor`, is a `SourceEdits`: text edits addressed by offsets into `code`, with `append`, `appendLeft`, `appendRight`, `overwrite`, `remove`, `slice`, `hasChanged`, `generateMap` and `toString`. `SourceEditor#generateMap()` returns a `GeneratedMap`.
 - `getAutomockCode(code, isSpy, fileName)` and `extractMockCalls(options, root, findMockRedirect)` in `storybook/internal/mocking-utils` parse the code themselves and no longer take a parser: drop the parser argument and pass the module's file name to `getAutomockCode`. `rewriteSbMockImportCalls(code, fileName)` requires the file name as well. `babelParser` is no longer exported; builders that passed it, such as `storybook-builder-rsbuild` 3.6, need a release that drops the argument. `automockModule` is no longer exported.
-- The story-shape helpers no longer take Babel paths: `jsDocTagsForPath` is `jsDocTagsForNode`, `metaObjectPath` is `metaObject`, `RenderFunctionPath` is `RenderFunction`, and `pathForNode` and `returnedExpressionPath` are removed in favor of `returnedExpression` and plain nodes. `keyOf` is `staticKey`, which returns `undefined` instead of `null` for a key it cannot read, and reads numeric and template-literal keys as well. `sourceOf` is `oneLineTextOf`: the node's source text with its line breaks collapsed and its comments kept, where `sourceOf` was a concise Babel reprint without comments; it takes nodes of `CsfFile._program`, `ConfigFile._program` or `parseExpression`, not of `parseModule`.
+- The story-shape helpers no longer take Babel paths: `jsDocTagsForPath` is `jsDocTagsForNode`, `metaObjectPath` is `metaObject`, `RenderFunctionPath` is `RenderFunction`, and `pathForNode` and `returnedExpressionPath` are removed in favor of `returnedExpression` and plain nodes. `keyOf` is `staticKey`, which returns `undefined` instead of `null` for a key it cannot read, and reads numeric and template-literal keys as well. `sourceOf` is `oneLineTextOf`: the node's source text with its line breaks collapsed and its comments kept, where `sourceOf` was a concise Babel reprint without comments; it takes nodes of `CsfFile.program`, `ConfigFile.program` or `parseExpression`, not of `parseModule`.
 - The `getAbsolutePath` wrapper helpers in `storybook/internal/common` produce source text instead of Babel nodes. `getAbsolutePathWrapperAsCallExpression(isTs, names)`, which returned the wrapper's function declaration, is replaced by `getAbsolutePathWrapperDeclaration(config, isTs, names)`, which returns the declaration's source, indented like `config`, for `ConfigFile#setBodyDeclaration`. `getAbsolutePathCall(config, value)` returns the source of a call to the config's wrapper. `wrapValueWithGetAbsolutePathWrapper(config, node)` is replaced by `wrapValuesWithGetAbsolutePathWrapper(config, nodes)`, which wraps every node in the array and commits the edits to `config`.
 - `new CsfFile(code, options)` and `new ConfigFile(code, fileName)` take source code instead of a Babel AST.
 - `formatCsf(csf, { sourceMaps, sourceFileName, inputSourceMap })` replaces the Babel generator options; `printCsf` and `printConfig` take no options, and all three print a file whose first line ends in CRLF with CRLF line endings, and any other file with `\n`. A file that mixes line endings is printed with its first line's ending throughout, and a file with lone CR line endings with `\n`.
diff --git a/code/core/src/common/utils/resolve-meta-component.ts b/code/core/src/common/utils/resolve-meta-component.ts
index 45eca7a93c2a..1da32c7439c1 100644
--- a/code/core/src/common/utils/resolve-meta-component.ts
+++ b/code/core/src/common/utils/resolve-meta-component.ts
@@ -98,7 +98,7 @@ export function createMetaComponentResolver(options: MetaComponentResolverOption
       return { reason: 'no-meta-component' };
     }
 
-    const storyModule: ReferenceModule = { editor: csf._editor, filePath: storyPath };
+    const storyModule: ReferenceModule = { editor: csf.editor, filePath: storyPath };
     const expression = unwrapComponentExpression(node);
     if (expression.type === 'Identifier') {
       return fromIdentifier(storyModule, expression.name);
@@ -112,7 +112,7 @@ export function createMetaComponentResolver(options: MetaComponentResolverOption
       expression.object.type === 'Identifier' &&
       expression.property.type === 'Identifier'
     ) {
-      const namespace = findImport(csf._program, expression.object.name);
+      const namespace = findImport(csf.program, expression.object.name);
       if (namespace.kind === 'namespace') {
         const exportName = expression.property.name;
         return {
diff --git a/code/core/src/common/utils/setup-addon-in-config.test.ts b/code/core/src/common/utils/setup-addon-in-config.test.ts
index 0939353409eb..1b5f90800dc5 100644
--- a/code/core/src/common/utils/setup-addon-in-config.test.ts
+++ b/code/core/src/common/utils/setup-addon-in-config.test.ts
@@ -22,7 +22,7 @@ describe('setupAddonInConfig', () => {
     vi.clearAllMocks();
 
     mockMain = {
-      _editor: { quote: "'" },
+      editor: { quote: "'" },
       getBodyDeclarations: () => [],
       getFieldNode: vi.fn(),
       appendNodeToArray: vi.fn(() => ({ ok: true, changed: true })),
diff --git a/code/core/src/common/utils/subcomponents.ts b/code/core/src/common/utils/subcomponents.ts
index 883e85c37726..5caa0968bb73 100644
--- a/code/core/src/common/utils/subcomponents.ts
+++ b/code/core/src/common/utils/subcomponents.ts
@@ -8,7 +8,7 @@ export type DeclaredSubcomponent = {
 };
 
 export function extractDeclaredSubcomponents(csf: CsfFile): DeclaredSubcomponent[] {
-  const rawSubcomponents = unwrapSubcomponentNode(csf._metaAnnotations.subcomponents, csf._program);
+  const rawSubcomponents = unwrapSubcomponentNode(csf._metaAnnotations.subcomponents, csf.program);
 
   if (rawSubcomponents?.type !== 'ObjectExpression') {
     return [];
@@ -21,7 +21,7 @@ export function extractDeclaredSubcomponents(csf: CsfFile): DeclaredSubcomponent
 
     const name = getObjectKeyName(property.key);
     const directComponentName = getComponentExpressionName(property.value);
-    const componentExpression = unwrapSubcomponentNode(property.value, csf._program);
+    const componentExpression = unwrapSubcomponentNode(property.value, csf.program);
     const componentName = getComponentExpressionName(componentExpression) ?? directComponentName;
 
     return name && componentName ? [{ name, componentName }] : [];
diff --git a/code/core/src/common/utils/sync-main-preview-addons.ts b/code/core/src/common/utils/sync-main-preview-addons.ts
index 2995a9e0a480..ee056cd57ca5 100644
--- a/code/core/src/common/utils/sync-main-preview-addons.ts
+++ b/code/core/src/common/utils/sync-main-preview-addons.ts
@@ -57,7 +57,7 @@ export async function syncPreviewAddonsWithMainConfig(
   for (const addon of addons) {
     const annotations = await getAddonAnnotations(addon, configDir);
     if (annotations) {
-      const hasAlreadyImportedAddonAnnotations = previewConfig._program.body.find(
+      const hasAlreadyImportedAddonAnnotations = previewConfig.program.body.find(
         (node) => node.type === 'ImportDeclaration' && node.source.value === annotations.importPath
       );
 
diff --git a/code/core/src/common/utils/wrap-getAbsolutePath-utils.ts b/code/core/src/common/utils/wrap-getAbsolutePath-utils.ts
index 44698ce83194..9b82be6d7abd 100644
--- a/code/core/src/common/utils/wrap-getAbsolutePath-utils.ts
+++ b/code/core/src/common/utils/wrap-getAbsolutePath-utils.ts
@@ -52,7 +52,7 @@ export function getAbsolutePathWrapperName(config: ConfigFile) {
 /** Source of a call to the config's getAbsolutePath wrapper, such as `getAbsolutePath('x')`. */
 export function getAbsolutePathCall(config: ConfigFile, value: string) {
   const wrapper = getAbsolutePathWrapperName(config) ?? PREFERRED_GET_ABSOLUTE_PATH_WRAPPER_NAME;
-  return `${wrapper}(${printString(value, config._editor.quote)})`;
+  return `${wrapper}(${printString(value, config.editor.quote)})`;
 }
 
 // Relative paths resolve from the config dir; the wrapper's `${value}/package.json` lookup breaks them.
@@ -148,7 +148,7 @@ export function getAbsolutePathWrapperDeclaration(
     ' * It is needed in projects that are set up within a monorepo.',
     ' */',
     `function ${PREFERRED_GET_ABSOLUTE_PATH_WRAPPER_NAME}(${parameter}${isConfigTypescript ? ': string' : ''})${isConfigTypescript ? ': any' : ''} {`,
-    `${config._editor.indent}return ${names.dirname}(${names.fileURLToPath}(import.meta.resolve(\`\${${parameter}}/package.json\`)));`,
+    `${config.editor.indent}return ${names.dirname}(${names.fileURLToPath}(import.meta.resolve(\`\${${parameter}}/package.json\`)));`,
     '}',
   ].join('\n');
 }
@@ -157,7 +157,7 @@ export function wrapValuesWithGetAbsolutePathWrapper(config: ConfigFile, nodes:
   const wrap = (node: Node) =>
     isGetAbsolutePathWrapperNecessary(node, (target) => {
       if (isStringLiteral(target)) {
-        config._editor.edits.overwrite(
+        config.editor.edits.overwrite(
           target.start,
           target.end,
           getAbsolutePathCall(config, target.value)
@@ -167,7 +167,7 @@ export function wrapValuesWithGetAbsolutePathWrapper(config: ConfigFile, nodes:
       }
     });
   nodes.forEach(wrap);
-  config._editor.commit();
+  config.editor.commit();
 }
 
 /**
@@ -178,7 +178,7 @@ export function wrapValuesWithGetAbsolutePathWrapper(config: ConfigFile, nodes:
 export function ensureNamedImport(config: ConfigFile, imported: string, source: string) {
   const sameSource = (value: string) =>
     value.replace(/^node:/, '') === source.replace(/^node:/, '');
-  for (const node of config._program.body) {
+  for (const node of config.program.body) {
     if (node.type === 'ImportDeclaration' && sameSource(node.source.value)) {
       const existing = node.specifiers.find(
         (specifier) =>
@@ -193,7 +193,7 @@ export function ensureNamedImport(config: ConfigFile, imported: string, source:
     }
   }
 
-  const taken = config._editor.scopes.program.bindings;
+  const taken = config.editor.scopes.program.bindings;
   if (!taken.has(imported)) {
     config.setImport([imported], source);
     return imported;
diff --git a/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.ts b/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.ts
index 2bc4c2e22a38..9c6d2d7c26fa 100644
--- a/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.ts
+++ b/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.ts
@@ -30,7 +30,7 @@ export const duplicateStoryWithNewName = (csfFile: In, storyName: string, newSto
     throw new SaveStoryError(`Creating a new story based on a CSF2 story is not supported`);
   }
 
-  const copy = new SourceEditor(`(${csfFile._editor.source(init)})`, csfFile._options.fileName);
+  const copy = new SourceEditor(`(${csfFile.editor.source(init)})`, csfFile._options.fileName);
   walk(copy.program, (child) => {
     if (child.type !== 'ObjectExpression') {
       return;
@@ -46,11 +46,11 @@ export const duplicateStoryWithNewName = (csfFile: In, storyName: string, newSto
   const initCode = copy.toString().slice(1, -1);
   const typeAnnotation =
     node.id.type === 'Identifier' && node.id.typeAnnotation
-      ? csfFile._editor.source(node.id.typeAnnotation)
+      ? csfFile.editor.source(node.id.typeAnnotation)
       : '';
 
-  appendStatement(csfFile._editor, `export const ${newStoryName}${typeAnnotation} = ${initCode};`);
-  csfFile._editor.commit();
+  appendStatement(csfFile.editor, `export const ${newStoryName}${typeAnnotation} = ${initCode};`);
+  csfFile.editor.commit();
 
   const duplicated = csfFile._storyExports[newStoryName];
   return (duplicated?.type === 'VariableDeclarator' ? duplicated.init : duplicated) as Node;
diff --git a/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts b/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts
index 1eaa2f480d57..c1bbdb390e17 100644
--- a/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts
+++ b/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts
@@ -27,7 +27,7 @@ export const updateArgsInCsfFile = async (
   if (!node) {
     throw new SaveStoryError(`Updating a re-exported story is not supported`);
   }
-  const editor = csf._editor;
+  const editor = csf.editor;
   const args = Object.fromEntries(
     Object.entries(input).map(([k, v]) => {
       if (!isValidIdentifier(k, false)) {
diff --git a/code/core/src/csf-tools/ConfigFile.test.ts b/code/core/src/csf-tools/ConfigFile.test.ts
index 170927fb798c..397e233461d3 100644
--- a/code/core/src/csf-tools/ConfigFile.test.ts
+++ b/code/core/src/csf-tools/ConfigFile.test.ts
@@ -29,6 +29,18 @@ const appendToArray = (path: string[], value: any, source: string) => {
 };
 
 describe('ConfigFile', () => {
+  it('edits its source through editor and program, and their deprecated aliases', () => {
+    const config = loadConfig('export default { a: 1 };').parse();
+
+    expect(config._editor).toBe(config.editor);
+    expect(config._program).toBe(config.program);
+    config.editor.edits.append('\nexport const b = 2;');
+    config.editor.commit();
+
+    expect(config.program.body).toHaveLength(2);
+    expect(config.getValue(['a'])).toBe(1);
+  });
+
   it.each([
     `export default { parameters: { viewport: { disable: true } } };`,
     `export default definePreview({ parameters: { viewport: { disable: true } } });`,
diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index 61b5c4a99cf1..94f18ae7d055 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -412,7 +412,7 @@ export class ConfigFile implements CsfObject {
    */
   transaction(fn: () => boolean | void): boolean {
     const changed = this._changed;
-    return this._editor.transaction(fn, () => {
+    return this.editor.transaction(fn, () => {
       this._changed = changed;
     });
   }
@@ -430,7 +430,7 @@ export class ConfigFile implements CsfObject {
       return operation(editor.object);
     }
     this._mutationDiagnostics.push(editor.diagnostic);
-    this._editor._refuse();
+    this.editor._refuse();
     return { ok: false, changed: false, diagnostic: editor.diagnostic };
   }
 
@@ -443,7 +443,8 @@ export class ConfigFile implements CsfObject {
     );
   }
 
-  _editor: SourceEditor;
+  /** Edit the file's source directly, for edits that have no path. Commit to parse it again. */
+  editor: SourceEditor;
 
   _exports: Record<string, Node> = {};
 
@@ -459,7 +460,7 @@ export class ConfigFile implements CsfObject {
   hasDefaultExport = false;
 
   constructor(code: string, fileName?: string) {
-    this._editor = new SourceEditor(code, fileName, () => {
+    this.editor = new SourceEditor(code, fileName, () => {
       this._exports = {};
       this._exportDecls = {};
       this._exportsObject = undefined;
@@ -469,12 +470,23 @@ export class ConfigFile implements CsfObject {
     this.fileName = fileName;
   }
 
+  /** Read the program of the current parse. */
+  get program(): E.Program {
+    return this.editor.program;
+  }
+
+  /** @deprecated Use `editor`. */
+  get _editor(): SourceEditor {
+    return this.editor;
+  }
+
+  /** @deprecated Use `program`. */
   get _program(): E.Program {
-    return this._editor.program;
+    return this.program;
   }
 
   get _code(): string {
-    return this._editor.code;
+    return this.editor.code;
   }
 
   _parseExportsObject(exportsObject: E.ObjectExpression) {
@@ -494,14 +506,14 @@ export class ConfigFile implements CsfObject {
   _resolveDeclaration = (node: Node, isTopLevel = true) => {
     const decl = unwrapExpression(node);
     if (decl?.type === 'Identifier' && isTopLevel) {
-      const initialization = findVarInitialization(decl.name, this._program);
+      const initialization = findVarInitialization(decl.name, this.program);
       return initialization ? unwrapExpression(initialization) : decl;
     }
     return decl;
   };
 
   parse() {
-    walk(this._program, (node, parent) => {
+    walk(this.program, (node, parent) => {
       const isTopLevel = parent?.type === 'Program';
       if (node.type === 'ExportDefaultDeclaration') {
         this.hasDefaultExport = true;
@@ -562,7 +574,7 @@ export class ConfigFile implements CsfObject {
               spec.exported.type === 'Identifier'
                 ? spec.exported.name
                 : (spec.exported as E.StringLiteral).value;
-            if (isTopLevel && !node.source && !isDeclared(this._editor, spec.local)) {
+            if (isTopLevel && !node.source && !isDeclared(this.editor, spec.local)) {
               throw new EstreeParseError(
                 `Export '${localName}' is not defined`,
                 this.fileName,
@@ -571,8 +583,8 @@ export class ConfigFile implements CsfObject {
             }
 
             const decl =
-              _findVarDeclarator(localName, this._program) ??
-              this._program.body.find(
+              _findVarDeclarator(localName, this.program) ??
+              this.program.body.find(
                 (statement): statement is E.Function =>
                   statement.type === 'FunctionDeclaration' && statement.id?.name === localName
               );
@@ -789,8 +801,8 @@ export class ConfigFile implements CsfObject {
     if (current.type !== 'ArrayExpression') {
       return this._notAnArray(path, current);
     }
-    appendToList(this._editor, arrayList(this._editor, current), [source]);
-    this._editor.commit();
+    appendToList(this.editor, arrayList(this.editor, current), [source]);
+    this.editor.commit();
     this._changed = true;
     return { ok: true, changed: true };
   }
@@ -820,8 +832,8 @@ export class ConfigFile implements CsfObject {
     if (!element) {
       return { ok: true, changed: false };
     }
-    removeFromList(this._editor, arrayList(this._editor, current), [element]);
-    this._editor.commit();
+    removeFromList(this.editor, arrayList(this.editor, current), [element]);
+    this.editor.commit();
     this._changed = true;
     return { ok: true, changed: true };
   }
@@ -835,16 +847,16 @@ export class ConfigFile implements CsfObject {
       loc: locationOf(this._code, node.start, node.end),
     };
     this._mutationDiagnostics.push(diagnostic);
-    this._editor._refuse();
+    this.editor._refuse();
     return { ok: false, changed: false, diagnostic };
   }
 
   valueToNode(value: any): CsfExpression {
-    return parseExpression(printValue(value, this._editor.quote));
+    return parseExpression(printValue(value, this.editor.quote));
   }
 
   getBodyDeclarations(): Node[] {
-    return this._program.body;
+    return this.program.body;
   }
 
   /**
@@ -878,11 +890,11 @@ export class ConfigFile implements CsfObject {
     const calls = findCallArguments(this, options, report);
     return calls.map((_, index) => {
       const host: CsfObjectHost = {
-        editor: this._editor,
+        editor: this.editor,
         root: () => {
           // Edits re-parse the file, so the argument is found again by its position among calls.
           const node = findCallArguments(this, options, () => {})[index];
-          return node && literalRoot(this._editor, node);
+          return node && literalRoot(this.editor, node);
         },
       };
       return createCsfObject(target, host, report, () => {
@@ -893,8 +905,8 @@ export class ConfigFile implements CsfObject {
 
   /** Appends a statement, given as source, to the end of the file. */
   setBodyDeclaration(declaration: string) {
-    appendStatement(this._editor, declaration);
-    this._editor.commit();
+    appendStatement(this.editor, declaration);
+    this.editor.commit();
   }
 
   /**
@@ -919,10 +931,10 @@ export class ConfigFile implements CsfObject {
     const call = requires[0]?.declarations[0].init as E.CallExpression | undefined;
     const source = printString(
       call ? (call.arguments[0] as E.StringLiteral).value : fromImport,
-      this._editor.quote
+      this.editor.quote
     );
-    const end = this._editor.semicolons ? ';' : '';
-    const editor = this._editor;
+    const end = this.editor.semicolons ? ';' : '';
+    const editor = this.editor;
     const ids = requires.map((declaration) => declaration.declarations[0].id);
 
     if (typeof importSpecifier === 'string') {
@@ -952,11 +964,11 @@ export class ConfigFile implements CsfObject {
         prependStatement(editor, `const { ${texts.join(', ')} } = require(${source})${end}`);
       }
     }
-    this._editor.commit();
+    this.editor.commit();
   }
 
   _findRequires(fromImport: string) {
-    return this._program.body.filter(
+    return this.program.body.filter(
       (node): node is E.VariableDeclaration =>
         node.type === 'VariableDeclaration' &&
         node.declarations.length === 1 &&
@@ -965,7 +977,7 @@ export class ConfigFile implements CsfObject {
   }
 
   _findImports(fromImport: string) {
-    return this._program.body.filter(
+    return this.program.body.filter(
       (node): node is E.ImportDeclaration =>
         node.type === 'ImportDeclaration' && isSource(node.source.value, fromImport)
     );
@@ -1007,14 +1019,14 @@ export class ConfigFile implements CsfObject {
           ? names.some((name) => bindsImport(name, specifier.imported, specifier.local))
           : specifier.type === 'ImportDefaultSpecifier' && specifier.local.name === importSpecifier)
     );
-    this._editor.commit();
+    this.editor.commit();
 
     const values = this._findImports(fromImport).filter(
       (declaration) => declaration.importKind !== 'type'
     );
-    const editor = this._editor;
-    const source = printString(spelled, this._editor.quote);
-    const end = this._editor.semicolons ? ';' : '';
+    const editor = this.editor;
+    const source = printString(spelled, this.editor.quote);
+    const end = this.editor.semicolons ? ';' : '';
     const specifiers = values.flatMap((declaration) =>
       declaration.specifiers.filter((specifier) => !isTypeOnly(declaration, specifier))
     );
@@ -1087,7 +1099,7 @@ export class ConfigFile implements CsfObject {
     ) {
       addImport(`* as ${importSpecifier.namespace}`);
     }
-    this._editor.commit();
+    this.editor.commit();
   }
 
   // Removes the matching specifiers of a module's imports, and each import left without any.
@@ -1098,9 +1110,9 @@ export class ConfigFile implements CsfObject {
     for (const declaration of this._findImports(fromImport)) {
       const kept = declaration.specifiers.filter((specifier) => !matches(declaration, specifier));
       if (kept.length === 0 && declaration.specifiers.length > 0) {
-        removeStatement(this._editor, declaration);
+        removeStatement(this.editor, declaration);
       } else if (kept.length < declaration.specifiers.length) {
-        setImportSpecifiers(this._editor, declaration, kept);
+        setImportSpecifiers(this.editor, declaration, kept);
       }
     }
   }
@@ -1109,7 +1121,7 @@ export class ConfigFile implements CsfObject {
     importSpecifier: string[] | string | { namespace: string } | null,
     fromImport: string
   ) {
-    const editor = this._editor;
+    const editor = this.editor;
     // require() has no side-effect only or namespace forms, so those are skipped.
     const names = Array.isArray(importSpecifier) ? importNames(importSpecifier) : undefined;
     for (const declaration of this._findRequires(fromImport)) {
@@ -1143,7 +1155,7 @@ export class ConfigFile implements CsfObject {
     if (importSpecifier === null) {
       for (const declaration of this._findImports(fromImport)) {
         if (declaration.specifiers.length === 0) {
-          removeStatement(this._editor, declaration);
+          removeStatement(this.editor, declaration);
         }
       }
       return;
@@ -1201,9 +1213,9 @@ export class ConfigFile implements CsfObject {
     fromImport: string
   ) {
     this._removeRequireImport(importSpecifier, fromImport);
-    this._editor.commit();
+    this.editor.commit();
     this._removeImport(importSpecifier, fromImport);
-    this._editor.commit();
+    this.editor.commit();
   }
 }
 
@@ -1213,7 +1225,7 @@ const findCallArguments = (
   { importedName, methodName, moduleNames }: CallArgumentsOptions,
   report: (diagnostic: CsfMutationDiagnostic) => void
 ): E.ObjectExpression[] => {
-  const editor = config._editor;
+  const editor = config.editor;
   const modules = new Set(moduleNames);
   const imports = new Map<string, Set<Node>>();
   const addImport = (name: string, node: Node) =>
@@ -1313,7 +1325,7 @@ export const formatConfig = (config: ConfigFile): string => {
  * like the first one: CRLF when that is CRLF, `\n` otherwise.
  */
 export const printConfig = (config: ConfigFile): PrintResultType => {
-  const code = config._editor.toString();
+  const code = config.editor.toString();
   return { code, toString: () => code };
 };
 
@@ -1334,7 +1346,7 @@ export const writeConfig = async (config: ConfigFile, fileName?: string) => {
 };
 
 export const isCsfFactoryPreview = (previewConfig: ConfigFile) => {
-  return previewConfig._program.body.some(
+  return previewConfig.program.body.some(
     (node) =>
       node.type === 'ImportDeclaration' &&
       node.source.value.includes('storybook') &&
diff --git a/code/core/src/csf-tools/ConfigObject.ts b/code/core/src/csf-tools/ConfigObject.ts
index aa4aef1d591c..845a1c11b4b9 100644
--- a/code/core/src/csf-tools/ConfigObject.ts
+++ b/code/core/src/csf-tools/ConfigObject.ts
@@ -79,7 +79,7 @@ export const locateConfigRoot = (
   config: ConfigFile,
   mode: 'read' | 'mutate'
 ): { ok: true; root: ObjectRoot } | Rejection => {
-  const editor = config._editor;
+  const editor = config.editor;
   const { program } = editor;
   const reject = (
     node: Node | Span | undefined,
@@ -479,7 +479,7 @@ export function createConfigObject(
     return located;
   }
   const host: CsfObjectHost = {
-    editor: config._editor,
+    editor: config.editor,
     root: () => {
       const current = locateConfigRoot(config, mode);
       return current.ok ? current.root : undefined;
diff --git a/code/core/src/csf-tools/CsfFile.test.ts b/code/core/src/csf-tools/CsfFile.test.ts
index 391f59b3d89b..09c5ceb3795e 100644
--- a/code/core/src/csf-tools/CsfFile.test.ts
+++ b/code/core/src/csf-tools/CsfFile.test.ts
@@ -36,6 +36,22 @@ const transform = (code: string, options: Partial<CsfOptions> = { makeTitle }) =
 };
 
 describe('CsfFile', () => {
+  it('edits its source through editor, program and appendStatement, and their deprecated aliases', () => {
+    const csf = loadCsf("export default { title: 'A' };\nexport const B = {};\n", {
+      makeTitle,
+    }).parse();
+
+    expect(csf._editor).toBe(csf.editor);
+    expect(csf._program).toBe(csf.program);
+    expect(csf.program.body).toHaveLength(2);
+    csf.appendStatement('export const C = {};');
+    csf._appendStatement('export const D = {};');
+    csf.editor.commit();
+
+    expect(csf.program.body).toHaveLength(4);
+    expect(csf.stories.map(({ name }) => name)).toEqual(['B', 'C', 'D']);
+  });
+
   it('prints an edited CRLF source with CRLF line endings', () => {
     const source = ['export default { title: "foo/bar" };', '', 'export const Story = {};'].join(
       '\r\n'
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index f3ecaf0fd939..3a1d13b370b6 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -181,7 +181,7 @@ const isArgsStory = (init: Node, isTopLevel: boolean, csf: CsfFile) => {
   // export const Foo = Bar.bind({})
   if (isTopLevel && isCanonicalCsf2BindCall(init)) {
     const boundIdentifier = init.callee.object.name;
-    const template = findVarInitialization(boundIdentifier, csf._program);
+    const template = findVarInitialization(boundIdentifier, csf.program);
     if (template) {
       csf._templates[boundIdentifier] = template;
       storyFn = template;
@@ -321,7 +321,11 @@ export interface CsfComponentImport {
 }
 
 export class CsfFile {
-  _editor: SourceEditor;
+  /**
+   * Edit the file's source directly, for edits `objects()` has no path for. A commit parses and
+   * indexes the file again, so nodes read before it are stale.
+   */
+  editor: SourceEditor;
 
   _options: CsfOptions;
 
@@ -370,22 +374,33 @@ export class CsfFile {
   _indexError: unknown;
 
   constructor(code: string, options: CsfOptions) {
-    this._editor = new SourceEditor(code, options.fileName, () => this._reindex());
+    this.editor = new SourceEditor(code, options.fileName, () => this._reindex());
     this._options = options;
     this.imports = [];
     mutationStates.set(this, { diagnostics: [], changed: false });
   }
 
+  /** Read the program of the current parse. */
+  get program(): E.Program {
+    return this.editor.program;
+  }
+
+  /** @deprecated Use `editor`. */
+  get _editor(): SourceEditor {
+    return this.editor;
+  }
+
+  /** @deprecated Use `program`. */
   get _program(): E.Program {
-    return this._editor.program;
+    return this.program;
   }
 
   get _code(): string {
-    return this._editor.code;
+    return this.editor.code;
   }
 
   _loc(node: Span | undefined): Located {
-    return node ? { loc: locationOf(this._editor.code, node.start, node.end) } : undefined;
+    return node ? { loc: locationOf(this.editor.code, node.start, node.end) } : undefined;
   }
 
   /**
@@ -465,14 +480,22 @@ export class CsfFile {
   transaction(fn: () => boolean | void): boolean {
     const state = mutationStates.get(this)!;
     const { changed } = state;
-    return this._editor.transaction(fn, () => {
+    return this.editor.transaction(fn, () => {
       state.changed = changed;
     });
   }
 
-  // Not committed: `formatCsf` prints it with the other pending edits.
+  /**
+   * Append a statement, given as source, to the end of the file. It is not committed: `formatCsf`
+   * prints it with the other pending edits.
+   */
+  appendStatement(code: string) {
+    appendStatement(this.editor, code);
+  }
+
+  /** @deprecated Use `appendStatement`. */
   _appendStatement(code: string) {
-    appendStatement(this._editor, code);
+    this.appendStatement(code);
   }
 
   _reset() {
@@ -516,7 +539,7 @@ export class CsfFile {
 
   _parseTitle(value: Node) {
     const node =
-      value.type === 'Identifier' ? findVarInitialization(value.name, this._program) : value;
+      value.type === 'Identifier' ? findVarInitialization(value.name, this.program) : value;
     if (isStringLiteral(node)) {
       return node.value;
     }
@@ -579,11 +602,11 @@ export class CsfFile {
             }
           }
         }
-        meta.component = this._editor.source(p.value);
+        meta.component = this.editor.source(p.value);
       } else if (key === 'tags') {
         let node: Node | null = p.value;
         if (node.type === 'Identifier') {
-          node = findVarInitialization(node.name, this._program);
+          node = findVarInitialization(node.name, this.program);
         }
         meta.tags = parseTags(node);
       } else if (key === 'id') {
@@ -653,15 +676,11 @@ export class CsfFile {
        *
        * `const _meta = {}; export default _meta;`
        */
-      const metaName = generateUid(this._editor.scopes, 'meta');
+      const metaName = generateUid(this.editor.scopes, 'meta');
       this._metaVariableName = metaName;
       const { declaration } = node;
-      this._editor.edits.overwrite(
-        node.start,
-        outerSpan(declaration).start,
-        `const ${metaName} = `
-      );
-      insertStatementAfter(this._editor, node, `export default ${metaName};`);
+      this.editor.edits.overwrite(node.start, outerSpan(declaration).start, `const ${metaName} = `);
+      insertStatementAfter(this.editor, node, `export default ${metaName};`);
       this._metaStatement = node;
       decl = declaration;
     } else if (isVariableReference) {
@@ -669,7 +688,7 @@ export class CsfFile {
       // export default meta;
       const variableName = (node.declaration as E.IdentifierReference).name;
       this._metaVariableName = variableName;
-      const statement = this._program.body.find(
+      const statement = this.program.body.find(
         (candidate): candidate is E.VariableDeclaration =>
           candidate.type === 'VariableDeclaration' &&
           candidate.declarations.some((d) => isIdentifier(d.id, variableName))
@@ -683,7 +702,7 @@ export class CsfFile {
 
     const metaNode = this._metaObjectFrom(decl);
     if (metaNode) {
-      this._parseMeta(metaNode, this._program);
+      this._parseMeta(metaNode, this.program);
     }
 
     if (this._metaStatement && !this._metaNode) {
@@ -827,20 +846,20 @@ export class CsfFile {
             ? specifier.exported.name
             : (specifier.exported as E.StringLiteral).value;
         const localName = specifier.local.name;
-        if (isTopLevel && !node.source && !isDeclared(this._editor, specifier.local)) {
+        if (isTopLevel && !node.source && !isDeclared(this.editor, specifier.local)) {
           throw new EstreeParseError(
             `Export '${localName}' is not defined`,
             this._options.fileName,
             locationOf(this._code, specifier.local.start, specifier.local.start)
           );
         }
-        const decl = isTopLevel ? findVarInitialization(localName, this._program) : specifier.local;
+        const decl = isTopLevel ? findVarInitialization(localName, this.program) : specifier.local;
 
         if (exportName === 'default') {
           this._metaVariableName = localName;
           const metaNode = this._metaObjectFrom(decl);
           if (metaNode && isTopLevel) {
-            this._parseMeta(metaNode, this._program);
+            this._parseMeta(metaNode, this.program);
           }
         } else {
           const annotations = {} as Record<string, Node>;
@@ -853,7 +872,7 @@ export class CsfFile {
           }
           // A story from another file is kept: its declaration isn't in this file
           const isImported =
-            !!node.source || this._editor.scopes.bindingOf(specifier.local)?.kind === 'import';
+            !!node.source || this.editor.scopes.bindingOf(specifier.local)?.kind === 'import';
           if (this._metaIsFactory && !storyIsFactory && !isImported) {
             continue;
           }
@@ -922,7 +941,7 @@ export class CsfFile {
       const testFunction =
         expression.arguments.length === 2 ? expression.arguments[1] : expression.arguments[2];
       const testArguments = expression.arguments.length === 2 ? null : expression.arguments[1];
-      const tags = parseTestTags(testArguments, this._program);
+      const tags = parseTestTags(testArguments, this.program);
 
       this._tests.push({
         function: testFunction,
@@ -963,7 +982,7 @@ export class CsfFile {
       }
 
       if (rootObject.type === 'Identifier') {
-        const configCandidate = this._editor.scopes.bindingOf(rootObject);
+        const configCandidate = this.editor.scopes.bindingOf(rootObject);
         const configParent = configCandidate?.declaration;
         if (configParent?.type === 'ImportDeclaration') {
           if (isValidPreviewPath(configParent.source.value)) {
@@ -980,19 +999,19 @@ export class CsfFile {
               metaDeclarator?.id.type === 'Identifier' ? metaDeclarator.id.name : 'meta';
             const [argument] = node.arguments;
             const argumentBinding =
-              argument?.type === 'Identifier' ? this._editor.scopes.bindingOf(argument) : undefined;
+              argument?.type === 'Identifier' ? this.editor.scopes.bindingOf(argument) : undefined;
             const argumentNode =
               argumentBinding?.constant && argumentBinding.node.type === 'VariableDeclarator'
                 ? argumentBinding.node.init
                 : argument;
             const unwrappedArgument = argumentNode && unwrapExpression(argumentNode as Node);
             if (unwrappedArgument?.type === 'ObjectExpression') {
-              this._parseMeta(unwrappedArgument, this._program);
+              this._parseMeta(unwrappedArgument, this.program);
             } else {
               this._metaNodeIsSynthetic = true;
               this._parseMeta(
                 { type: 'ObjectExpression', properties: [], start: node.start, end: node.start },
-                this._program
+                this.program
               );
             }
           } else if (rootObject.name === 'preview') {
@@ -1040,7 +1059,7 @@ export class CsfFile {
       }
       ancestors.pop();
     };
-    visit(this._program, []);
+    visit(this.program, []);
 
     if (!this._meta) {
       // The program node starts at its first statement, not at the start of the file.
@@ -1079,7 +1098,7 @@ export class CsfFile {
         const { tags, play } = storyAnnotations;
         if (tags) {
           const node =
-            tags.type === 'Identifier' ? findVarInitialization(tags.name, this._program) : tags;
+            tags.type === 'Identifier' ? findVarInitialization(tags.name, this.program) : tags;
           acc[key].tags = parseTags(node);
         }
         if (play) {
@@ -1280,13 +1299,13 @@ export const formatCsf = (
   csf: CsfFile,
   options: FormatCsfOptions = { sourceMaps: false }
 ): { code: string; map: CsfSourceMap } | string => {
-  const code = csf._editor.toString();
+  const code = csf.editor.toString();
   if (!options.sourceMaps) {
     return code;
   }
   return {
     code,
-    map: csf._editor.generateMap({
+    map: csf.editor.generateMap({
       source: options.sourceFileName ?? csf._options.fileName,
       inputSourceMap: options.inputSourceMap,
     }) as unknown as CsfSourceMap,
@@ -1298,7 +1317,7 @@ export const formatCsf = (
  * ends like the first one: CRLF when that is CRLF, `\n` otherwise.
  */
 export const printCsf = (csf: CsfFile): PrintResultType => {
-  const code = csf._editor.toString();
+  const code = csf.editor.toString();
   return { code, toString: () => code };
 };
 
diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index 59966aaf2372..6bfd23331246 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -1488,13 +1488,13 @@ describe('CsfObject', () => {
     it('throws for code that does not parse, leaving earlier edits and the index as they were', () => {
       const csf = load("export default { title: 'B' };\nexport const A = {};\n");
       const [meta] = csf.objects({ stories: false });
-      csf._editor.edits.appendLeft(0, '(');
+      csf.editor.edits.appendLeft(0, '(');
 
       expect(() => meta.set(['tags'], ['docs'])).toThrow(/B\.stories\.ts$/);
-      expect(csf._editor.edits.toString()).toBe(
+      expect(csf.editor.edits.toString()).toBe(
         "(export default { title: 'B' };\nexport const A = {};\n"
       );
-      expect(csf._editor._committed).toEqual([]);
+      expect(csf.editor._committed).toEqual([]);
       expect(csf.meta?.title).toBe('B');
       expect(csf.changed).toBe(false);
       expect(csf.mutationDiagnostics).toEqual([]);
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index 95b8baa4f9b7..c5cc0795e22f 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -921,7 +921,7 @@ class Editor implements CsfObjectEditor {
     } else if (result.changed) {
       if (!this.#changed) {
         this.#changed = true;
-        this.editor._transaction?.rollbacks.push(() => {
+        this.editor._onRollback(() => {
           this.#changed = false;
         });
       }
diff --git a/code/core/src/csf-tools/CsfObjectDiscovery.ts b/code/core/src/csf-tools/CsfObjectDiscovery.ts
index 9252cd44b70b..7a5394b0434d 100644
--- a/code/core/src/csf-tools/CsfObjectDiscovery.ts
+++ b/code/core/src/csf-tools/CsfObjectDiscovery.ts
@@ -73,7 +73,7 @@ const addQualifiedBinding = (
   report: ReportDiagnostic,
   isStory: boolean
 ) => {
-  const binding = csf._editor.scopes.program.bindings.get(localName);
+  const binding = csf.editor.scopes.program.bindings.get(localName);
   if (
     !binding?.constant ||
     (binding.node.type !== 'VariableDeclarator' && binding.node.type !== 'FunctionDeclaration')
@@ -98,7 +98,7 @@ const addQualifiedBinding = (
 
 const storyBindings = (csf: CsfFile, report: ReportDiagnostic): StoryBinding[] => {
   const bindings = new Map<string, StoryBinding>();
-  for (const statement of csf._program.body) {
+  for (const statement of csf.program.body) {
     if (statement.type !== 'ExportNamedDeclaration' || statement.exportKind === 'type') {
       continue;
     }
@@ -179,7 +179,7 @@ const factoryMember = (node: Node | null | undefined): 'story' | 'extend' | unde
 };
 
 const isFactoryMeta = (csf: CsfFile, name: string, seen = new Set<string>()): boolean => {
-  const init = variableInit(csf._editor.scopes.program.bindings.get(name));
+  const init = variableInit(csf.editor.scopes.program.bindings.get(name));
   if (seen.has(name) || !csf._metaFactoryCall || !init) {
     return false;
   }
@@ -203,7 +203,7 @@ const isFactoryStory = (csf: CsfFile, node: Node, seen = new Set<string>()): boo
     return false;
   }
   seen.add(receiver);
-  const initializer = variableInit(csf._editor.scopes.program.bindings.get(receiver));
+  const initializer = variableInit(csf.editor.scopes.program.bindings.get(receiver));
   return initializer ? isFactoryStory(csf, unwrapExpression(initializer), seen) : false;
 };
 
@@ -212,7 +212,7 @@ const factoryMetaConfigurationIsSafe = (csf: CsfFile): boolean => {
   if (argument?.type !== 'Identifier') {
     return true;
   }
-  const binding = csf._editor.scopes.program.bindings.get(argument.name);
+  const binding = csf.editor.scopes.program.bindings.get(argument.name);
   if (
     !binding?.constant ||
     binding.node.type !== 'VariableDeclarator' ||
@@ -241,7 +241,7 @@ const discoverMeta = (csf: CsfFile, report: ReportDiagnostic): Discovered[] => {
   }
   if (csf._metaNode && !csf._metaNodeIsSynthetic) {
     const binding = csf._metaVariableName
-      ? csf._editor.scopes.program.bindings.get(csf._metaVariableName)
+      ? csf.editor.scopes.program.bindings.get(csf._metaVariableName)
       : undefined;
     if (binding && !binding.constant) {
       report({
@@ -253,7 +253,7 @@ const discoverMeta = (csf: CsfFile, report: ReportDiagnostic): Discovered[] => {
       });
       return [];
     }
-    return [{ target: { kind: 'meta' }, root: literalRoot(csf._editor, csf._metaNode) }];
+    return [{ target: { kind: 'meta' }, root: literalRoot(csf.editor, csf._metaNode) }];
   }
   if (csf._metaIsFactory && csf._metaFactoryCall) {
     report({
@@ -287,7 +287,7 @@ const NON_SHARING_PARENTS = new Set([
 // that could share the story, such as an alias or a call that receives it, is a `shared` one: it
 // only matters for a story whose assignments are edited, as it could add them to another story.
 const assignmentsOf = (csf: CsfFile, binding: StoryBinding) => {
-  const editor = csf._editor;
+  const editor = csf.editor;
   const parentOf = (node: Node) => editor.parentOf(node);
   const assignments: Assignment[] = [];
   let shared: Rejection | undefined;
@@ -383,11 +383,11 @@ const storyRoot = (
   object: E.ObjectExpression | undefined,
   assignments: Assignment[]
 ): ObjectRoot => {
-  const editor = csf._editor;
+  const editor = csf.editor;
   const literal = object && literalRoot(editor, object);
   const byProperty = new Map(assignments.map((assignment) => [assignment.property, assignment]));
   const own = (members: readonly Property[]) => members.filter((member) => !byProperty.has(member));
-  const declaration = csf._program.body.find(
+  const declaration = csf.program.body.find(
     (statement) =>
       statement.start <= binding.declaration.start && binding.declaration.end <= statement.end
   )!;
@@ -508,7 +508,7 @@ const discoverStories = (
         node.arguments.length === 1 &&
         argumentNode?.type === 'ObjectExpression'
       ) {
-        return [{ target: storyTarget(binding), root: literalRoot(csf._editor, argumentNode) }];
+        return [{ target: storyTarget(binding), root: literalRoot(csf.editor, argumentNode) }];
       }
       report({
         code: 'unsupported-initializer',
@@ -529,7 +529,7 @@ const discoverStories = (
       return reject(write);
     }
     if (assignments.length === 0 && object) {
-      return [{ target: storyTarget(binding), root: literalRoot(csf._editor, object) }];
+      return [{ target: storyTarget(binding), root: literalRoot(csf.editor, object) }];
     }
     if (assignments.length === 0 && !isAnnotatable(node)) {
       return reject({
@@ -579,7 +579,7 @@ export const discoverCsfObjects = (
 ): readonly CsfObject[] =>
   discover(csf, options, report).map(({ target }) => {
     const host: CsfObjectHost = {
-      editor: csf._editor,
+      editor: csf.editor,
       root: () =>
         // Edits re-parse the file, so the object is found again by its target.
         discover(csf, options, () => {}).find((candidate) => sameTarget(candidate.target, target))
diff --git a/code/core/src/csf-tools/README.md b/code/core/src/csf-tools/README.md
index 03d4a526dd9b..59031b0d093a 100644
--- a/code/core/src/csf-tools/README.md
+++ b/code/core/src/csf-tools/README.md
@@ -48,6 +48,8 @@ Unproven shapes include story or meta bindings that are reassigned or aliased, a
 A story whose initializer is not an object literal, a function or a bound template, such as `export const A = base` or `makeStory()`, is reported as `unsupported-initializer`. A story is also left untouched when it is written to other than by a top-level `Story.name = value`, such as `Story.args.label = 'x'`, `Story.parameters ||= {}` or `Story[name] = {}`. A story whose assignments are edited is left untouched when other code could see them: an alias, a spread, or a call or array that receives the story; calling or rendering the story is fine. Such a story without an object literal holds a function or a bound template; any other value could be shared with other stories.
 `set` can still add a field missing from an object with a spread or a computed key: the field is appended after them, so it overrides any value they provide. A missing parent it creates there carries the spreads' member forward at every level it creates: `set(['args', 'a'], 1)` on `{ ...Base }` writes `args: { ...Base.args, a: 1 }`, and two levels deep `parameters: { ...Base.parameters, docs: { ...Base.parameters?.docs, x: 1 } }`. Of several spreads the last one with the member replaces the others, so they are read after `??`: `args: { ...(Two.args ?? One.args), a: 1 }`. `appendValueToArray` and `appendNodeToArray` create a missing array the same way, as `addons: [...(shared.addons ?? []), 'x']`. The spread's own member is read with `.`, as a story spreading a value that is not an object is broken already, and a member below it with `?.`, as it may be missing. For a spread of a local constant object literal the members are known: a member it has is read with `.`, and one it lacks is left out. A type assertion on the spread is kept. Only a spread of an identifier or a member chain such as `...stories.Base` is carried, as reading it again cannot change behaviour; after a spread of anything else, such as a call, or after a computed key, creating a parent or an array is refused. Changing or removing a field that a later spread or computed key could override is refused as well.
 
+For edits that no path addresses, `CsfFile.editor` and `ConfigFile.editor` are the file's `SourceEditor`, and `program` its current parse; `CsfFile.appendStatement(code)` adds a statement that `formatCsf` prints. A commit parses and indexes the file again. The underscored `_editor`, `_program` and `_appendStatement` are deprecated aliases.
+
 `CsfFile.changed` is true once any mutation has been applied, which is the signal for whether the file needs to be written back.
 
 Each mutation is applied on its own, and a refused one leaves the file as it was, also when its edit would leave a file the CSF indexer rejects (`invalid-csf`). To apply several as one, run them in `transaction(fn)` on `CsfFile` or `ConfigFile`: when `fn` throws, returns `false`, or any mutation in it returns `{ ok: false }`, every edit made in it is rolled back, and `changed` with it. Mutations inside return their results as usual, and the diagnostics of refused ones stay on `mutationDiagnostics`. `transaction` returns whether the edits were kept. `fn` runs synchronously; one that returns a promise throws. A transaction inside another rolls back on its own, and with the outer one.
diff --git a/code/core/src/csf-tools/corpus.test.ts b/code/core/src/csf-tools/corpus.test.ts
index 3e44eb4a2918..c95ada262384 100644
--- a/code/core/src/csf-tools/corpus.test.ts
+++ b/code/core/src/csf-tools/corpus.test.ts
@@ -28,7 +28,7 @@ const summarize = (file: string, code: string) => {
     return { error: true };
   }
   const bindings: Record<string, { constant: boolean; uses: number }> = {};
-  for (const [name, binding] of csf._editor.scopes.program.bindings) {
+  for (const [name, binding] of csf.editor.scopes.program.bindings) {
     bindings[name] = { constant: binding.constant, uses: binding.references.length };
   }
   return {
diff --git a/code/core/src/csf-tools/enrichCsf.ts b/code/core/src/csf-tools/enrichCsf.ts
index a0807213bd0e..7df1d7147746 100644
--- a/code/core/src/csf-tools/enrichCsf.ts
+++ b/code/core/src/csf-tools/enrichCsf.ts
@@ -26,7 +26,7 @@ export const enrichCsfStory = (
   const source = !options?.disableSource && extractSource(storyExport, csfSource._code);
   const description =
     !options?.disableDescription &&
-    extractDescription(csfSource._storyStatements[key], csfSource._editor);
+    extractDescription(csfSource._storyStatements[key], csfSource.editor);
   // in csf 1/2/3 use Story.parameters; CSF factories use Story.input.parameters
   const originalParameters = csfSource._metaIsFactory
     ? `${key}.input.parameters`
@@ -50,7 +50,7 @@ export const enrichCsfStory = (
 
   if (extraDocsParameters.length > 0) {
     appendStatement(
-      csf._editor,
+      csf.editor,
       `${originalParameters} = { ...${originalParameters}, docs: { ...${optionalDocs}, ${extraDocsParameters.join(', ')} } };`
     );
   }
@@ -91,13 +91,13 @@ const addComponentDescription = (
 
 export const enrichCsfMeta = (csf: CsfFile, csfSource: CsfFile, options?: EnrichCsfOptions) => {
   const description =
-    !options?.disableDescription && extractDescription(csfSource._metaStatement, csfSource._editor);
+    !options?.disableDescription && extractDescription(csfSource._metaStatement, csfSource.editor);
   // docs: { description: { component: %%description%% } },
   if (description) {
     const metaNode = csf._metaNode;
     if (metaNode && !csf._metaNodeIsSynthetic) {
       addComponentDescription(
-        csf._editor,
+        csf.editor,
         metaNode,
         ['parameters', 'docs', 'description'],
         JSON.stringify(description)
diff --git a/code/core/src/csf-tools/estree/editor.test-d.ts b/code/core/src/csf-tools/estree/editor.test-d.ts
new file mode 100644
index 000000000000..9e4051ebd589
--- /dev/null
+++ b/code/core/src/csf-tools/estree/editor.test-d.ts
@@ -0,0 +1,13 @@
+import { it } from 'vitest';
+
+import { SourceEditor } from './editor.ts';
+
+it('keeps the parse, the pending batch and the running transaction of an editor private', () => {
+  const editor = new SourceEditor('export default {};');
+  // @ts-expect-error: private to SourceEditor
+  void editor._module;
+  // @ts-expect-error: private to SourceEditor
+  void editor._batch;
+  // @ts-expect-error: private to SourceEditor
+  void editor._transaction;
+});
diff --git a/code/core/src/csf-tools/estree/editor.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
index ac756bae805c..47dbdfcd6a86 100644
--- a/code/core/src/csf-tools/estree/editor.test.ts
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -161,8 +161,8 @@ describe('commit', () => {
 
   it('derives the story exports of a CsfFile again', () => {
     const csf = parse('export default {};\nexport const A = {};\n');
-    appendStatement(csf._editor, 'export const B = {};');
-    csf._editor.commit();
+    appendStatement(csf.editor, 'export const B = {};');
+    csf.editor.commit();
     expect(Object.keys(csf._stories)).toEqual(['A', 'B']);
   });
 });
@@ -1094,8 +1094,8 @@ describe('appendStatement', () => {
 
   it('sets an appended statement apart once a later commit makes it span lines', () => {
     const csf = parse('export default {};\nexport const A = {};\n');
-    appendStatement(csf._editor, 'export const B = {};');
-    csf._editor.commit();
+    appendStatement(csf.editor, 'export const B = {};');
+    csf.editor.commit();
     const story = csf
       .objects({ meta: false })
       .find(({ target }) => 'exportName' in target && target.exportName === 'B')!;
@@ -1121,8 +1121,8 @@ describe('appendStatement', () => {
 
   it('sets an appended statement apart once a later commit makes the one before it span lines', () => {
     const csf = parse('export default {};\nexport const A = {};\n');
-    appendStatement(csf._editor, 'export const B = {};');
-    csf._editor.commit();
+    appendStatement(csf.editor, 'export const B = {};');
+    csf.editor.commit();
     const [story] = csf.objects({ meta: false });
     story.set(['play'], parseExpression('async () => {\n  await x();\n}'));
     expect(printCsf(csf).code).toBe(dedent`
@@ -1140,7 +1140,7 @@ describe('appendStatement', () => {
 
   it('sets a pending appended statement apart in the commit that makes the one before it span lines', () => {
     const csf = parse('export default {};\nexport const A = {}; // A\n');
-    csf._appendStatement('export const B = {};');
+    csf.appendStatement('export const B = {};');
     const [story] = csf.objects({ meta: false });
     story.set(['play'], parseExpression('async () => {\n  await x();\n}'));
     expect(printCsf(csf).code).toBe(dedent`
@@ -1159,7 +1159,7 @@ describe('appendStatement', () => {
   it('forgets a statement appended in a transaction that rolls back', () => {
     const csf = parse('export default {};\nexport const A = {};\nexport const B = {};\n');
     csf.transaction(() => {
-      csf._appendStatement('export const B = {};');
+      csf.appendStatement('export const B = {};');
       return false;
     });
     const [first, story] = csf.objects({ meta: false });
@@ -1424,7 +1424,7 @@ describe('line endings', () => {
     const csf = parse(['export default {', '  title: "A",', '};', ''].join(eol));
     const [meta] = csf.objects({ stories: false });
     meta.set(['parameters', 'layout'], 'centered');
-    return csf._editor.toString();
+    return csf.editor.toString();
   };
   const expected = [
     'export default {',
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index f0e14a2ba739..7c47ae2d2b0c 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -23,8 +23,7 @@ import {
 } from './ast.ts';
 import { type ScopeInfo, analyzeScopes } from './scope.ts';
 
-// Maps in a chain are matched by source name, so every map of an editor uses the same one. A
-// private member would make the class nominal and break assignability between `src` and `dist`.
+// Maps in a chain are matched by source name, so every map of an editor uses the same one.
 const mapSource = (editor: { fileName: string | undefined }) => editor.fileName ?? 'source';
 
 /** A map whose `sourcesContent` may be unknown for sources an input map did not carry. */
@@ -87,14 +86,14 @@ export type InputSourceMap =
  * text too.
  */
 export class SourceEditor {
-  _module: ParsedModule;
+  private _module: ParsedModule;
 
   _scopes: ScopeInfo | undefined;
 
   _parents: Map<Node, Node | null> | undefined;
 
   // The pending edits, with what they wrote that later edits of the same batch build on.
-  _batch: Batch;
+  private _batch: Batch;
 
   // The edits each earlier commit applied, oldest first. Their maps are only generated when one
   // is requested, so the output still maps to the code the editor was created with.
@@ -111,7 +110,7 @@ export class SourceEditor {
 
   // The transaction running, if any: whether a mutation in it was refused, so it rolls back, and
   // how to undo state kept outside the editor, such as a `changed` flag.
-  _transaction: { refused: boolean; rollbacks: (() => void)[] } | undefined;
+  private _transaction: { refused: boolean; rollbacks: (() => void)[] } | undefined;
 
   // Marks a mutation as refused, so the transaction it runs in rolls back.
   _refuse() {
@@ -120,6 +119,11 @@ export class SourceEditor {
     }
   }
 
+  // Undoes state kept outside the editor when the transaction running, if any, rolls back.
+  _onRollback(rollback: () => void) {
+    this._transaction?.rollbacks.push(rollback);
+  }
+
   // What `appendStatement` wrote without a blank line before it: statements of this parse, and
   // texts of pending edits. Each commit finds them in the code it parses, and sets one apart once
   // it or the statement before it spans lines.
@@ -632,7 +636,7 @@ export interface List {
 }
 
 // A list indexes the code of the parse it was read from, so it goes stale with its nodes.
-const listOf = (editor: SourceEditor, list: List) => derivedFrom(list, editor._module);
+const listOf = (editor: SourceEditor, list: List) => derivedFrom(list, editor['_module']);
 
 /** The `{ … }` of an import or export with at least one named specifier. */
 export const specifierList = (
@@ -1102,7 +1106,7 @@ const appendAfter = (editor: SourceEditor, list: List, previous: Appended, texts
  */
 export const appendToList = (editor: SourceEditor, list: List, texts: string[]) => {
   editor.assertCurrent(list);
-  const { lists } = editor._batch;
+  const { lists } = editor['_batch'];
   const key = `${list.open}:${list.close}`;
   const previous = lists.get(key);
   lists.set(
@@ -1318,7 +1322,8 @@ const endsStatement = (text: string) => {
  * shares that line moves below the inserted statements.
  */
 export const insertStatementAfter = (editor: SourceEditor, statement: Span, text: string) => {
-  const { code, edits, _batch: batch } = editor;
+  const { code, edits } = editor;
+  const batch = editor['_batch'];
   // The new text follows the text inserted after the statement earlier in the batch, if any.
   const before = batch.lastInsertedAfter.get(statement) ?? editor.source(statement);
   batch.lastInsertedAfter.set(statement, text);
@@ -1406,7 +1411,7 @@ const isRemoved = (editor: SourceEditor, span: Span) => {
 // `remove`, split around the statements inserted inside the range, as removing a range clears what
 // other edits wrote inside it.
 const removeKeeping = (editor: SourceEditor, start: number, end: number) => {
-  const inside = [...editor._batch.insertedAt]
+  const inside = [...editor['_batch'].insertedAt]
     .filter((at) => start < at && at < end)
     .sort((a, b) => a - b);
   let from = start;
@@ -1430,7 +1435,7 @@ export const appendStatement = (editor: SourceEditor, text: string) => {
     return;
   }
   // The text inserted last may lead with the blank line that set it apart.
-  const before = editor._batch.lastInsertedAfter.get(last)?.trim() ?? editor.source(last);
+  const before = editor['_batch'].lastInsertedAfter.get(last)?.trim() ?? editor.source(last);
   const multiline = text.includes('\n') || before.includes('\n');
   if (!multiline) {
     editor._appendedWithoutBlankLine.push(text);
diff --git a/code/core/src/csf-tools/story-shape/import-statements.test.ts b/code/core/src/csf-tools/story-shape/import-statements.test.ts
index 19a2bb8d4254..75c837ac2bb3 100644
--- a/code/core/src/csf-tools/story-shape/import-statements.test.ts
+++ b/code/core/src/csf-tools/story-shape/import-statements.test.ts
@@ -11,7 +11,7 @@ import {
 import { collectImportBindings } from './imports.ts';
 
 const bindingsOf = (code: string) =>
-  collectImportBindings(loadCsf(code, { makeTitle: (title) => title ?? 'title' })._program);
+  collectImportBindings(loadCsf(code, { makeTitle: (title) => title ?? 'title' }).program);
 
 const resolve = (code: string, componentName: string) =>
   resolveComponentImport(componentName, bindingsOf(code));
diff --git a/code/core/src/csf-tools/story-shape/imports.test.ts b/code/core/src/csf-tools/story-shape/imports.test.ts
index c9fa086b93ef..717bcc730f73 100644
--- a/code/core/src/csf-tools/story-shape/imports.test.ts
+++ b/code/core/src/csf-tools/story-shape/imports.test.ts
@@ -6,7 +6,7 @@ import { loadCsf } from '../CsfFile.ts';
 import { collectImportBindings, importedName, isTypeSpecifier } from './imports.ts';
 
 const programPath = (code: string) => {
-  return loadCsf(code, { makeTitle: (title) => title ?? 'title' })._program;
+  return loadCsf(code, { makeTitle: (title) => title ?? 'title' }).program;
 };
 
 const importSpecifiers = (code: string) => {
diff --git a/code/core/src/csf-tools/story-shape/jsdoc.test.ts b/code/core/src/csf-tools/story-shape/jsdoc.test.ts
index c4a305ab37a0..8861114a1ff6 100644
--- a/code/core/src/csf-tools/story-shape/jsdoc.test.ts
+++ b/code/core/src/csf-tools/story-shape/jsdoc.test.ts
@@ -7,7 +7,7 @@ import { extractStoryJSDocInfo } from './jsdoc.ts';
 
 const storyStatement = (code: string) => {
   const csf = loadCsf(code, { makeTitle: (title) => title ?? 'title' }).parse();
-  return [csf._storyStatements['A'], csf._editor] as const;
+  return [csf._storyStatements['A'], csf.editor] as const;
 };
 
 describe('extractStoryJSDocInfo', () => {
diff --git a/code/core/src/csf-tools/story-shape/normalize-story.test.ts b/code/core/src/csf-tools/story-shape/normalize-story.test.ts
index 4f785094ebe2..11822e80eeb8 100644
--- a/code/core/src/csf-tools/story-shape/normalize-story.test.ts
+++ b/code/core/src/csf-tools/story-shape/normalize-story.test.ts
@@ -12,8 +12,8 @@ const parse = (code: string) => {
 
 const normalize = (code: string, exportName = 'A') => {
   const csf = parse(code);
-  csf._editor.parentOf(csf._program);
-  return normalizeStoryDeclaration(csf._storyExports[exportName], csf._editor);
+  csf.editor.parentOf(csf.program);
+  return normalizeStoryDeclaration(csf._storyExports[exportName], csf.editor);
 };
 
 const printedShape = (code: string) => {
diff --git a/code/core/src/csf-tools/story-shape/render.test.ts b/code/core/src/csf-tools/story-shape/render.test.ts
index 22786532205c..6cea9e7a9b54 100644
--- a/code/core/src/csf-tools/story-shape/render.test.ts
+++ b/code/core/src/csf-tools/story-shape/render.test.ts
@@ -13,12 +13,12 @@ import { normalizeStoryDeclaration } from './normalize-story.ts';
 const resolveStoryRender = (code: string) => {
   const source = `export default { title: 'T' };\n${dedent(code)}`;
   const csf = loadCsf(source, { makeTitle: (title) => title ?? 'title' }).parse();
-  editor = csf._editor;
-  const normalized = normalizeStoryDeclaration(csf._storyExports['A'], csf._editor);
+  editor = csf.editor;
+  const normalized = normalizeStoryDeclaration(csf._storyExports['A'], csf.editor);
 
   return resolveRenderFunction(
     normalized.type === 'config' ? normalized.node : undefined,
-    csf._editor
+    csf.editor
   );
 };
 
@@ -184,7 +184,7 @@ describe('resolveEffectiveRender', () => {
       ? code
       : `export default { title: 'T' };\n${code}`;
     const csf = loadCsf(dedent(source), { makeTitle: (title) => title ?? 'title' }).parse();
-    editor = csf._editor;
+    editor = csf.editor;
     const resolution = resolveEffectiveRender(csf, 'A');
     expect(printedBody(resolution)).toBe(expected);
   });
diff --git a/code/core/src/csf-tools/story-shape/render.ts b/code/core/src/csf-tools/story-shape/render.ts
index 401be1bd51df..62eb26f7465f 100644
--- a/code/core/src/csf-tools/story-shape/render.ts
+++ b/code/core/src/csf-tools/story-shape/render.ts
@@ -82,14 +82,14 @@ export function resolveEffectiveRender(
   exportName: string,
   references?: ReferenceContext
 ): RenderResolution {
-  const normalized = normalizeStoryDeclaration(csf._storyExports[exportName], csf._editor);
+  const normalized = normalizeStoryDeclaration(csf._storyExports[exportName], csf.editor);
   if (normalized.type === 'fn') {
     return { kind: 'resolved', node: normalized.node as RenderFunction };
   }
 
   const storyRender = readRender(
     normalized.type === 'config' ? (normalized.node as E.ObjectExpression) : undefined,
-    csf._editor,
+    csf.editor,
     references
   );
   if (storyRender.kind === 'invalid') {
@@ -99,7 +99,7 @@ export function resolveEffectiveRender(
     return storyRender;
   }
 
-  const metaRender = readRender(metaObject(csf), csf._editor, references);
+  const metaRender = readRender(metaObject(csf), csf.editor, references);
   return metaRender.kind === 'invalid' ? { kind: 'unresolved' } : metaRender;
 }
 
diff --git a/code/core/src/csf-tools/story-shape/resolve-story-args.ts b/code/core/src/csf-tools/story-shape/resolve-story-args.ts
index b22800bc624f..d819c2d260fc 100644
--- a/code/core/src/csf-tools/story-shape/resolve-story-args.ts
+++ b/code/core/src/csf-tools/story-shape/resolve-story-args.ts
@@ -46,7 +46,7 @@ export function createStoryArgsResolver(
   references?: StoryReferences
 ): StoryArgsResolver {
   const ctx: ReferenceContext = {
-    editor: csf._editor,
+    editor: csf.editor,
     filePath: csf._options.fileName ?? '',
     ...references,
   };
diff --git a/code/core/src/csf-tools/story-shape/utils.test.ts b/code/core/src/csf-tools/story-shape/utils.test.ts
index 99c7fabdf7fc..f2db5e86e606 100644
--- a/code/core/src/csf-tools/story-shape/utils.test.ts
+++ b/code/core/src/csf-tools/story-shape/utils.test.ts
@@ -22,7 +22,7 @@ import {
 
 const parse = (code: string) => {
   const csf = loadCsf(code, { makeTitle: (title) => title ?? 'title' }).parse();
-  csf._editor.parentOf(csf._program);
+  csf.editor.parentOf(csf.program);
   return csf;
 };
 
@@ -30,7 +30,7 @@ const printed = (node: Node) => textOf(node);
 
 const renderFunction = (code: string): Node => {
   const csf = parse(code);
-  const found = resolveIdentifierInit(csf._program, 'render');
+  const found = resolveIdentifierInit(csf.program, 'render');
   if (!found) {
     throw new Error('Expected a render function');
   }
@@ -220,7 +220,7 @@ describe('resolveIdentifierInit', () => {
       `export default { title: 'Button' };\n${declaration}\nexport const A = Template.bind({});`
     );
 
-    const resolved = resolveIdentifierInit(csf._program, 'Template');
+    const resolved = resolveIdentifierInit(csf.program, 'Template');
 
     expect(resolved?.type).toBe('FunctionDeclaration');
     expect(printed(resolved!)).toBe('function Template(args) {\n  return args;\n}');
@@ -233,7 +233,7 @@ describe('resolveIdentifierInit', () => {
       export const A = Template.bind({});
     `);
 
-    expect(printed(resolveIdentifierInit(csf._program, 'Template')!)).toBe('(args) => args');
+    expect(printed(resolveIdentifierInit(csf.program, 'Template')!)).toBe('(args) => args');
   });
 
   it('returns null for unknown identifiers', () => {
@@ -242,7 +242,7 @@ describe('resolveIdentifierInit', () => {
       export const A = Template.bind({});
     `);
 
-    expect(resolveIdentifierInit(csf._program, 'Template')).toBeNull();
+    expect(resolveIdentifierInit(csf.program, 'Template')).toBeNull();
   });
 });
 
diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.ts b/code/core/src/csf-tools/vitest-plugin/transformer.ts
index bf5eae972dc2..63de37cadd22 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.ts
@@ -137,7 +137,7 @@ export async function vitestTransform({
     },
   }).parse();
 
-  const editor = parsed._editor;
+  const editor = parsed.editor;
   const metaExportName = parsed._metaVariableName!;
   const metaNode = parsed._metaNode;
 
diff --git a/code/frameworks/angular-vite/src/docgen/story-docs-build.ts b/code/frameworks/angular-vite/src/docgen/story-docs-build.ts
index ec1424771fe4..aa85aacfe2a7 100644
--- a/code/frameworks/angular-vite/src/docgen/story-docs-build.ts
+++ b/code/frameworks/angular-vite/src/docgen/story-docs-build.ts
@@ -91,7 +91,7 @@ export const buildStoryDocsPayload = async (
   };
 
   const componentName = componentNameOf(componentNode);
-  const importBindings = collectImportBindings(csf._program);
+  const importBindings = collectImportBindings(csf.program);
   const deps: StoryDocDeps = {
     csf,
     resolveStoryArgs: createStoryArgsResolver(csf, references),
@@ -172,7 +172,7 @@ const buildStoryDoc = async (
   try {
     const { description, summary } = extractStoryJSDocInfo(
       csf._storyStatements[exportName],
-      csf._editor
+      csf.editor
     );
     const rendered = await renderedSnippet(storyShape(exportName, deps), deps);
 
diff --git a/code/frameworks/angular-vite/src/docgen/story-docs-markup.ts b/code/frameworks/angular-vite/src/docgen/story-docs-markup.ts
index 2953109955cd..134c6095b32a 100644
--- a/code/frameworks/angular-vite/src/docgen/story-docs-markup.ts
+++ b/code/frameworks/angular-vite/src/docgen/story-docs-markup.ts
@@ -348,7 +348,7 @@ const isImportedArgsToTemplate = (call: E.CallExpression, shape: StoryShape): bo
   if (call.callee.type !== 'Identifier') {
     return false;
   }
-  const binding = shape.csf._editor.scopes.bindingOf(call.callee);
+  const binding = shape.csf.editor.scopes.bindingOf(call.callee);
   const specifier = binding?.node;
   const declaration = binding?.declaration;
   if (specifier?.type !== 'ImportSpecifier' || declaration?.type !== 'ImportDeclaration') {
@@ -641,7 +641,7 @@ const declaredValue = (shape: StoryShape, node: Node | undefined): Node | undefi
   if (node?.type !== 'Identifier') {
     return node;
   }
-  const binding = shape.csf._editor.scopes.program.bindings.get(node.name);
+  const binding = shape.csf.editor.scopes.program.bindings.get(node.name);
   // A reassigned binding's value at render time is not its initializer.
   if (!binding?.constant) {
     return node;
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/angular-to-angular-vite.ts b/code/lib/cli-storybook/src/automigrate/fixes/angular-to-angular-vite.ts
index bc2abd052e29..eff1f42d353d 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/angular-to-angular-vite.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/angular-to-angular-vite.ts
@@ -211,7 +211,7 @@ const rewriteWorkspaceJson = (files: FixFiles, paths: string[]) =>
 const addZoneJsImport: FixTransform = {
   filter: { kind: ['preview'] },
   editConfig: (preview, { id }) => {
-    const hasZoneJsImport = preview._program.body.some(
+    const hasZoneJsImport = preview.program.body.some(
       (node) =>
         node.type === 'ImportDeclaration' &&
         (node.source.value === 'zone.js' || node.source.value.startsWith('zone.js/'))
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/angular-vite-remove-compodoc.ts b/code/lib/cli-storybook/src/automigrate/fixes/angular-vite-remove-compodoc.ts
index 05dab861c726..19cfaa2f277f 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/angular-vite-remove-compodoc.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/angular-vite-remove-compodoc.ts
@@ -278,7 +278,7 @@ export function compodocTransforms(): FixTransform[] {
     {
       filter: { kind: ['preview'], code: /setCompodocJson|documentation\.json/ },
       editConfig: (preview, { id }) => {
-        if (wiresCompodoc(preview._program)) {
+        if (wiresCompodoc(preview.program)) {
           removePreviewWiring(preview, id);
         }
       },
@@ -428,7 +428,7 @@ const removePreviewWiring = (preview: ConfigFile, previewConfigPath: string): vo
   if (!result.removed) {
     manualRemovalHint(
       previewConfigPath,
-      countReferences(preview._editor, SET_COMPODOC_JSON) > 0
+      countReferences(preview.editor, SET_COMPODOC_JSON) > 0
         ? result.reason
         : `no ${SET_COMPODOC_JSON} call is visible here, only a documentation.json import`
     );
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/csf-next-mocked-args.ts b/code/lib/cli-storybook/src/automigrate/fixes/csf-next-mocked-args.ts
index 73aeba26c228..68823f9da35f 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/csf-next-mocked-args.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/csf-next-mocked-args.ts
@@ -28,7 +28,7 @@ export const csfNextMockedArgs: Fix = {
       filter: { kind: ['story'], code: /mock|withImplementation/i },
       editCsf: (csf) => {
         if (csf._metaIsFactory) {
-          wrapArgsMocks(csf._editor);
+          wrapArgsMocks(csf.editor);
         }
       },
     },
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/web-components-runtime-manifest.ts b/code/lib/cli-storybook/src/automigrate/fixes/web-components-runtime-manifest.ts
index e21b7a23cd54..65ca93796c87 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/web-components-runtime-manifest.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/web-components-runtime-manifest.ts
@@ -291,7 +291,7 @@ const findManifestImports = (
 };
 
 const removeDefaultImport = (preview: ConfigFile, name: string): void => {
-  const editor = preview._editor;
+  const editor = preview.editor;
   const statementsToDrop = new Set<Node>();
   for (const node of editor.program.body) {
     if (node.type !== 'ImportDeclaration') {
@@ -307,7 +307,7 @@ const removeDefaultImport = (preview: ConfigFile, name: string): void => {
     }
   }
   removeStatements(editor, statementsToDrop);
-  preview._editor.commit();
+  preview.editor.commit();
 };
 
 const removePreviewWiring = (
@@ -316,7 +316,7 @@ const removePreviewWiring = (
   { setterNames, manifestFiles }: WebComponentsRuntimeManifestOptions
 ): void => {
   const manifestImports = findManifestImports(
-    preview._program,
+    preview.program,
     dirname(previewConfigPath),
     manifestFiles
   );
@@ -334,7 +334,7 @@ const removePreviewWiring = (
     removedAnySetter = true;
     logger.debug(`Removed the ${setterName} wiring from ${previewConfigPath}`);
     for (const name of result.keptArguments) {
-      const specifier = findDefaultJsonImportSpecifier(preview._program, name);
+      const specifier = findDefaultJsonImportSpecifier(preview.program, name);
       if (specifier) {
         keptImports.set(name, specifier);
       }
@@ -345,7 +345,7 @@ const removePreviewWiring = (
   }
 
   for (const [name, specifier] of keptImports) {
-    const editor = preview._editor;
+    const editor = preview.editor;
     // A setter call left in place already got the manual-removal hint.
     const readers = topLevelReaders(editor, name).filter(
       (node) => !SETTER_NAMES.some((setterName) => isTopLevelCall(node, setterName))
diff --git a/code/lib/cli-storybook/src/automigrate/helpers/preview-call.ts b/code/lib/cli-storybook/src/automigrate/helpers/preview-call.ts
index 84329bd6a0c3..8ab7c845c10c 100644
--- a/code/lib/cli-storybook/src/automigrate/helpers/preview-call.ts
+++ b/code/lib/cli-storybook/src/automigrate/helpers/preview-call.ts
@@ -78,7 +78,7 @@ export const removeTopLevelCall = (
   preview: ConfigFile,
   { callee, calleeSources }: { callee: string; calleeSources: ReadonlySet<string> }
 ): RemoveTopLevelCallResult => {
-  const editor = preview._editor;
+  const editor = preview.editor;
   const callsToDrop = topLevelCalls(editor.program, callee);
   if (callsToDrop.length === 0) {
     return { removed: false, reason: `${callee} is not called at the top level` };
@@ -118,6 +118,6 @@ export const removeTopLevelCall = (
     }
   }
   removeStatements(editor, statementsToDrop);
-  preview._editor.commit();
+  preview.editor.commit();
   return { removed: true, keptArguments };
 };
diff --git a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts
index 3851af7bb24a..7e1b5474a7c9 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts
@@ -38,14 +38,14 @@ export async function configToCsfFactory(
   }
 
   const methodName = configType === 'main' ? 'defineMain' : 'definePreview';
-  const editor = config._editor;
+  const editor = config.editor;
   const exportDecls = config._exportDecls;
 
   const defineConfigProps = getConfigProperties(editor, exportDecls, { configType });
   const hasNamedExports = defineConfigProps.length > 0;
 
   // Early return if the code is already transformed (default export is already defineMain/definePreview)
-  const isAlreadyTransformed = config._program.body.some((node) => {
+  const isAlreadyTransformed = config.program.body.some((node) => {
     if (node.type !== 'ExportDefaultDeclaration') {
       return false;
     }
@@ -60,7 +60,7 @@ export async function configToCsfFactory(
   // Check whether the required framework import (e.g. defineMain from '@storybook/react-vite/node') is already present
   const expectedImportSource = frameworkPackage + (configType === 'main' ? '/node' : '');
   const findFrameworkImport = () =>
-    config._program.body.find(
+    config.program.body.find(
       (node): node is E.ImportDeclaration =>
         node.type === 'ImportDeclaration' &&
         node.importKind !== 'type' &&
@@ -85,7 +85,7 @@ export async function configToCsfFactory(
   }
 
   const findObjectDeclaration = (declarationName: string) =>
-    config._program.body.find(
+    config.program.body.find(
       (n): n is E.VariableDeclaration =>
         n.type === 'VariableDeclaration' &&
         n.declarations.some(
@@ -103,7 +103,7 @@ export async function configToCsfFactory(
       return;
     }
     const removed = new Set<Node>();
-    for (const node of config._program.body) {
+    for (const node of config.program.body) {
       if (node.type !== 'ExportDefaultDeclaration') {
         continue;
       }
@@ -144,7 +144,7 @@ export async function configToCsfFactory(
     // when merging named exports with default exports, add the named exports first in the list
     prependToList(editor, objectList(editor, config._exportsObject), defineConfigProps);
     removeExportDeclarations(editor, exportDecls);
-    config._editor.commit();
+    config.editor.commit();
     wrapDefaultExport(false);
   } else if (config._exportsObject) {
     /**
@@ -181,7 +181,7 @@ export async function configToCsfFactory(
      */
     appendStatement(editor, `export default ${methodName}({});`);
   }
-  config._editor.commit();
+  config.editor.commit();
 
   // Check whether @storybook/framework import already exists
   const existingImport = findFrameworkImport();
@@ -199,7 +199,7 @@ export async function configToCsfFactory(
       `import { ${methodName} } from ${printString(expectedImportSource, editor.quote)};`
     );
   }
-  config._editor.commit();
+  config.editor.commit();
 
   // Remove type imports – now inferred – from @storybook/* packages
   const disallowList = ['StorybookConfig', 'Preview'];
diff --git a/code/lib/cli-storybook/src/codemod/helpers/remove-unused-types.test.ts b/code/lib/cli-storybook/src/codemod/helpers/remove-unused-types.test.ts
index 767446ebf315..20940a021c1c 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/remove-unused-types.test.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/remove-unused-types.test.ts
@@ -17,7 +17,7 @@ const unescape = (str: string) => str.replace(/\r\n/g, '\n');
 describe('removeUnusedTypes', () => {
   const getTransformed = (source: string) => {
     const csf = loadCsf(source, { makeTitle: () => 'FIXME' }).parse();
-    removeUnusedTypes(csf._editor);
+    removeUnusedTypes(csf.editor);
     return printCsf(csf).code;
   };
 
diff --git a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
index 13749d4a569e..f1abe2d579fe 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
@@ -109,7 +109,7 @@ export async function storyToCsfFactory(
 
   const metaVariableName = csf._metaVariableName ?? 'meta';
 
-  const editor = csf._editor;
+  const editor = csf.editor;
   const { program, scopes } = editor;
 
   // Check if a root-level constant named 'preview' exists
diff --git a/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.test.ts b/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.test.ts
index d45b653500bb..d4382bceefef 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.test.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/wrap-args-mocks.test.ts
@@ -13,7 +13,7 @@ expect.addSnapshotSerializer({
 
 const transform = (source: string) => {
   const csf = loadCsf(source, { makeTitle: () => 'FIXME' }).parse();
-  wrapArgsMocks(csf._editor);
+  wrapArgsMocks(csf.editor);
   return printCsf(csf).code;
 };
 
diff --git a/code/lib/codemod/src/transforms/csf-2-to-3.ts b/code/lib/codemod/src/transforms/csf-2-to-3.ts
index d81dd5950a5c..e4df29fa5a11 100644
--- a/code/lib/codemod/src/transforms/csf-2-to-3.ts
+++ b/code/lib/codemod/src/transforms/csf-2-to-3.ts
@@ -148,7 +148,7 @@ export default async function transform(info: TransformFile) {
     return info.source;
   }
 
-  const editor = csf._editor;
+  const editor = csf.editor;
   const importHelper = new StorybookImportHelper(editor);
   // Read before the commit below, after which the stories no longer bind their templates.
   const templates = Object.keys(csf._templates);
diff --git a/code/lib/codemod/src/transforms/find-implicit-spies.ts b/code/lib/codemod/src/transforms/find-implicit-spies.ts
index 4b678242f3ab..251d5e1c181a 100644
--- a/code/lib/codemod/src/transforms/find-implicit-spies.ts
+++ b/code/lib/codemod/src/transforms/find-implicit-spies.ts
@@ -69,7 +69,7 @@ function findAnnotations(program: E.Program, storyName: string, annotationName:
 export default async function transform(info: TransformFile) {
   const csf = loadCsf(info.source, { makeTitle: (title) => title, fileName: info.path });
   csf.parse();
-  const editor = csf._editor;
+  const editor = csf.editor;
 
   const metaKeys = [
     ...getObjectExpressionKeys(csf._metaAnnotations.args),
diff --git a/code/renderers/react/src/componentManifest/buildReactComponentDocgen.ts b/code/renderers/react/src/componentManifest/buildReactComponentDocgen.ts
index afbaabf3a50e..5086172c3e6c 100644
--- a/code/renderers/react/src/componentManifest/buildReactComponentDocgen.ts
+++ b/code/renderers/react/src/componentManifest/buildReactComponentDocgen.ts
@@ -358,13 +358,13 @@ export function buildComponentDocgenFromResolved({
         name: error.name,
         message:
           (csf._metaStatement
-            ? storyShapeError(error.message, csf._metaStatement, csf._editor).message
+            ? storyShapeError(error.message, csf._metaStatement, csf.editor).message
             : error.message) + `\n\n${entry.importPath}:\n${storyFile}`,
       },
     };
   }
 
-  const metaJsDoc = extractDescription(csf._metaStatement, csf._editor) || undefined;
+  const metaJsDoc = extractDescription(csf._metaStatement, csf.editor) || undefined;
   const { description, summary, jsDocTags } = extractComponentDescription(
     metaJsDoc,
     docgenDescription,
diff --git a/code/renderers/react/src/componentManifest/generateCodeSnippet.ts b/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
index b1a5006dfdc7..f70ff73c9acb 100644
--- a/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
+++ b/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
@@ -82,7 +82,7 @@ function importedBoundStory(
     return undefined;
   }
   const local = declaration.init.callee.object.name;
-  const binding = collectImportBindings(csf._program).get(local);
+  const binding = collectImportBindings(csf.program).get(local);
   if (!binding) {
     return undefined;
   }
@@ -109,12 +109,12 @@ function buildSnippet(
   merged: Args,
   resolver: StoryArgsResolver
 ): string {
-  const editor = csf._editor;
+  const editor = csf.editor;
   const storyDeclaration = csf._storyExports[storyName];
 
   if (!storyDeclaration) {
     const message = 'Expected story to be a function or variable declaration';
-    const statement = csf._program.body.find(
+    const statement = csf.program.body.find(
       (node) =>
         node.type === 'ExportNamedDeclaration' &&
         node.specifiers.some(
diff --git a/code/renderers/react/src/componentManifest/getComponentImports.ts b/code/renderers/react/src/componentManifest/getComponentImports.ts
index 5f5488202bfd..8c98a0a8da5d 100644
--- a/code/renderers/react/src/componentManifest/getComponentImports.ts
+++ b/code/renderers/react/src/componentManifest/getComponentImports.ts
@@ -78,11 +78,11 @@ export const getComponents = async ({
   const componentSet = new Set<string>();
   /** Minimum JSX nesting depth per component name (1 = outermost JSX element). */
   const componentDepth = new Map<string, number>();
-  const localToImport = collectImportBindings(csf._program);
+  const localToImport = collectImportBindings(csf.program);
 
   // Gather components from all JSX opening elements, tracking how many JSX elements enclose each.
   const jsxDepth = new Map<ESTreeNode, number>();
-  walk(csf._program, (node, parent) => {
+  walk(csf.program, (node, parent) => {
     const depth = (parent ? (jsxDepth.get(parent) ?? 0) : 0) + (node.type === 'JSXElement' ? 1 : 0);
     jsxDepth.set(node, depth);
     if (node.type !== 'JSXOpeningElement') {
@@ -128,7 +128,7 @@ export const getComponents = async ({
 
   // Filter out locally defined components (those whose base identifier has a local, non-import binding)
   const isLocallyDefinedWithoutImport = (base: string): boolean => {
-    const binding = csf._editor.scopes.program.bindings.get(base);
+    const binding = csf.editor.scopes.program.bindings.get(base);
 
     if (!binding) {
       return false; // missing binding -> keep (will become null import)
diff --git a/code/renderers/react/src/componentManifest/resolveComponents.ts b/code/renderers/react/src/componentManifest/resolveComponents.ts
index dcad52a57d59..78c917126f9a 100644
--- a/code/renderers/react/src/componentManifest/resolveComponents.ts
+++ b/code/renderers/react/src/componentManifest/resolveComponents.ts
@@ -175,7 +175,7 @@ export function extractStorySnippets(
       try {
         const { description, summary } = extractStoryJSDocInfo(
           csf._storyStatements[storyExport],
-          csf._editor
+          csf.editor
         );
         const snippet = getCodeSnippet(csf, storyExport, componentName, resolver);
         imports.push(...snippet.imports);
diff --git a/code/renderers/react/src/enrichCsf.ts b/code/renderers/react/src/enrichCsf.ts
index 2c21a418b321..4738f24fbaaa 100644
--- a/code/renderers/react/src/enrichCsf.ts
+++ b/code/renderers/react/src/enrichCsf.ts
@@ -58,7 +58,7 @@ export const enrichCsf: PresetPropertyFn<'experimental_enrichCsf'> = async (inpu
       //   }
       // };
       const parameters = `${key}${csf._metaIsFactory ? '.input' : ''}.parameters`;
-      csf._appendStatement(
+      csf.appendStatement(
         `${parameters} = { ...${parameters}, docs: { ...${parameters}?.docs, source: { code: ${JSON.stringify(snippet)}, ...${parameters}?.docs?.source } } };`
       );
     });
diff --git a/code/renderers/vue3/src/docgen/component-docgen/build-docgen.ts b/code/renderers/vue3/src/docgen/component-docgen/build-docgen.ts
index bcb54689c7c2..f71a335df94b 100644
--- a/code/renderers/vue3/src/docgen/component-docgen/build-docgen.ts
+++ b/code/renderers/vue3/src/docgen/component-docgen/build-docgen.ts
@@ -148,7 +148,7 @@ export async function buildDocgenPayload(
         name: error.name,
         message:
           (csf._metaStatement
-            ? storyShapeError(error.message, csf._metaStatement, csf._editor).message
+            ? storyShapeError(error.message, csf._metaStatement, csf.editor).message
             : error.message) + `\n\n${input.entry.importPath}:\n${storyFile}`,
       },
     };
@@ -175,7 +175,7 @@ export async function buildDocgenPayload(
     };
   }
 
-  const metaJsDoc = extractDescription(csf._metaStatement, csf._editor) || undefined;
+  const metaJsDoc = extractDescription(csf._metaStatement, csf.editor) || undefined;
   const { description, summary, jsDocTags } = extractComponentDescription(
     metaJsDoc,
     componentMeta.description,
diff --git a/code/renderers/vue3/src/docgen/story-docs/build-story-docs.ts b/code/renderers/vue3/src/docgen/story-docs/build-story-docs.ts
index 2cab02bda1d1..ba41c170336c 100644
--- a/code/renderers/vue3/src/docgen/story-docs/build-story-docs.ts
+++ b/code/renderers/vue3/src/docgen/story-docs/build-story-docs.ts
@@ -155,11 +155,11 @@ export async function buildStoryDocsPayload(
     // Docgen is optional here: without it the payload is still built, just without snippets.
   }
   const componentName = resolveMetaComponentIdentifier(meta);
-  const importBindings = collectImportBindings(csf._program);
+  const importBindings = collectImportBindings(csf.program);
   const importStatement = createImportStatement(
     componentName,
     importBindings,
-    jsDocTagsForNode(meta, csf._editor),
+    jsDocTagsForNode(meta, csf.editor),
     docgenPayload
   );
   const docgenArgInfo =
@@ -267,7 +267,7 @@ function extractStories(csf: ParsedCsf, options: StoryDocsContext): ExtractStori
     Object.entries(csf._stories).map(([storyExport, story]): [string, StoryDoc] => {
       const { description, summary } = extractStoryJSDocInfo(
         csf._storyStatements[storyExport],
-        csf._editor
+        csf.editor
       );
       const storyDoc: StoryDoc = {
         id: story.id,
@@ -310,7 +310,7 @@ function enrichStoryDoc(
 
   let normalized;
   try {
-    normalized = normalizeStoryDeclaration(csf._storyExports[storyExport], csf._editor);
+    normalized = normalizeStoryDeclaration(csf._storyExports[storyExport], csf.editor);
   } catch {
     return plain;
   }
diff --git a/code/renderers/vue3/src/docgen/story-docs/print-h/print-h.test.ts b/code/renderers/vue3/src/docgen/story-docs/print-h/print-h.test.ts
index 1c05ad8d5e6f..772608143c35 100644
--- a/code/renderers/vue3/src/docgen/story-docs/print-h/print-h.test.ts
+++ b/code/renderers/vue3/src/docgen/story-docs/print-h/print-h.test.ts
@@ -127,15 +127,15 @@ ${storySource}
 `,
     { makeTitle: () => 'Example/MyButton' }
   ).parse();
-  csf._editor.parentOf(csf._program);
-  const normalized = normalizeStoryDeclaration(csf._storyExports.Primary, csf._editor);
+  csf.editor.parentOf(csf.program);
+  const normalized = normalizeStoryDeclaration(csf._storyExports.Primary, csf.editor);
 
   if (normalized.type !== 'config') {
     throw new Error('Expected a config story');
   }
 
   const meta = metaObject(csf);
-  const references: ReferenceContext = { editor: csf._editor, filePath: 'entry.ts' };
+  const references: ReferenceContext = { editor: csf.editor, filePath: 'entry.ts' };
   const metaMembers = meta ? resolveObjectMembers(meta, references) : undefined;
   const classified = classifyArgs(
     {
@@ -148,15 +148,15 @@ ${storySource}
     docgen
   );
   // Mirrors resolveEffectiveRender in build-story-docs: story render wins, meta is the fallback.
-  const storyRender = resolveRenderFunction(normalized.node, csf._editor);
+  const storyRender = resolveRenderFunction(normalized.node, csf.editor);
   const renderResolution =
-    storyRender.kind !== 'missing' ? storyRender : resolveRenderFunction(meta, csf._editor);
+    storyRender.kind !== 'missing' ? storyRender : resolveRenderFunction(meta, csf.editor);
 
   if (renderResolution.kind !== 'resolved') {
     return {
       args: classified.args,
       unsetArgs: classified.unset,
-      importBindings: collectImportBindings(csf._program),
+      importBindings: collectImportBindings(csf.program),
     };
   }
 
@@ -166,7 +166,7 @@ ${storySource}
     unsetArgs: classified.unset,
     argsParam: parameter?.type === 'Identifier' ? parameter.name : undefined,
     expression: returnedExpression(renderResolution.node),
-    importBindings: collectImportBindings(csf._program),
+    importBindings: collectImportBindings(csf.program),
   };
 }
 
diff --git a/code/renderers/web-components/src/docgen/component-docgen/build-docgen.ts b/code/renderers/web-components/src/docgen/component-docgen/build-docgen.ts
index 510fc354594d..8d5f3dcc269e 100644
--- a/code/renderers/web-components/src/docgen/component-docgen/build-docgen.ts
+++ b/code/renderers/web-components/src/docgen/component-docgen/build-docgen.ts
@@ -85,7 +85,7 @@ export async function buildDocgenPayload(
   }
 
   const { description, summary, jsDocTags } = extractComponentDescription(
-    extractDescription(csf._metaStatement, csf._editor) || undefined,
+    extractDescription(csf._metaStatement, csf.editor) || undefined,
     found.declaration.description,
     declarationTags(found.declaration)
   );
diff --git a/code/renderers/web-components/src/docgen/component-docgen/resolve-component/resolve-component.ts b/code/renderers/web-components/src/docgen/component-docgen/resolve-component/resolve-component.ts
index 1243f2a0bc19..2e6665ed1f9d 100644
--- a/code/renderers/web-components/src/docgen/component-docgen/resolve-component/resolve-component.ts
+++ b/code/renderers/web-components/src/docgen/component-docgen/resolve-component/resolve-component.ts
@@ -40,7 +40,7 @@ function tagFromNode(csf: CsfFile, node: ESTreeNode): WebComponentsComponentReso
       return { tag };
     }
   }
-  return { reason: 'component-not-a-tag', expression: csf._editor.source(node) };
+  return { reason: 'component-not-a-tag', expression: csf.editor.source(node) };
 }
 
 /**
@@ -57,7 +57,7 @@ export function resolveStoryComponent(csf: CsfFile): WebComponentsComponentResol
   if (!csf._metaNode) {
     return { reason: 'no-meta-component' };
   }
-  const ctx: ReferenceContext = { editor: csf._editor, filePath: csf._options.fileName ?? '' };
+  const ctx: ReferenceContext = { editor: csf.editor, filePath: csf._options.fileName ?? '' };
   const members = resolveObjectMembers(csf._metaNode, ctx);
   return (
     componentIn(csf, members, csf._metaNode, ctx, new Set()) ?? { reason: 'no-meta-component' }
diff --git a/code/renderers/web-components/src/docgen/story-docs/build-story-docs.ts b/code/renderers/web-components/src/docgen/story-docs/build-story-docs.ts
index 7e898944ac08..0cdcf2e11e82 100644
--- a/code/renderers/web-components/src/docgen/story-docs/build-story-docs.ts
+++ b/code/renderers/web-components/src/docgen/story-docs/build-story-docs.ts
@@ -154,7 +154,7 @@ const baseStoryDoc = (
 ): StoryDoc => {
   const { description, summary } = extractStoryJSDocInfo(
     csf._storyStatements[exportName],
-    csf._editor
+    csf.editor
   );
   return {
     id: story.id,
diff --git a/code/renderers/web-components/src/docgen/story-docs/template-scope.ts b/code/renderers/web-components/src/docgen/story-docs/template-scope.ts
index 4378bfac159f..01945855fb0b 100644
--- a/code/renderers/web-components/src/docgen/story-docs/template-scope.ts
+++ b/code/renderers/web-components/src/docgen/story-docs/template-scope.ts
@@ -44,7 +44,7 @@ export function resolveHtmlTemplate(
   renderFunction: RenderFunction,
   csf: CsfFile
 ): HtmlTemplate | undefined {
-  const bindings = collectImportBindings(csf._program);
+  const bindings = collectImportBindings(csf.program);
   const returned = returnedTemplateExpression(renderFunction, bindings);
   return returned
     ? templateFromExpression(unwrapExpression(returned.node), bindings, returned.scope)
diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts
index 676d86ce71ee..2edc0c930ab5 100644
--- a/scripts/tasks/sandbox-parts.ts
+++ b/scripts/tasks/sandbox-parts.ts
@@ -118,7 +118,7 @@ const updateObjectExpression = (
   value: string,
   existing: E.ObjectExpression
 ) => {
-  const editor = config._editor;
+  const editor = config.editor;
   const [first, ...rest] = path;
   const existingField = existing.properties.find((p) => staticKey(p) === first) as
     | E.ObjectProperty
@@ -172,7 +172,7 @@ function setPluginParam(
     paramValue: unknown;
   }
 ) {
-  const call = findPluginCall(pluginName, config._program);
+  const call = findPluginCall(pluginName, config.program);
   if (!call) {
     throw new Error(`Could not find a call to the "${pluginName}" plugin in this file.`);
   }
@@ -190,10 +190,10 @@ function setPluginParam(
   const value = textOf(valueNode);
 
   if (paramPos === call.arguments.length) {
-    appendToList(config._editor, argumentList(config._editor, call), [
+    appendToList(config.editor, argumentList(config.editor, call), [
       makeObjectSource(paramPath, value),
     ]);
-    config._editor.commit();
+    config.editor.commit();
     return;
   }
 
@@ -205,7 +205,7 @@ function setPluginParam(
   }
 
   updateObjectExpression(config, paramPath, value, param);
-  config._editor.commit();
+  config.editor.commit();
 }
 
 const logger = console;
@@ -1053,8 +1053,8 @@ export const extendPreview: Task['run'] = async ({ key, template, sandboxDir })
     "sb.mock(import('uuid'));",
   ].join('\n');
 
-  insertAfterImports(previewConfig._editor, mockStatements);
-  previewConfig._editor.commit();
+  insertAfterImports(previewConfig.editor, mockStatements);
+  previewConfig.editor.commit();
 
   await writeConfig(previewConfig);
 };

From 0b6b962a4655b5dba72a650a2306acfefbebd4a5 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 17:29:52 +0200
Subject: [PATCH 311/326] test(csf-tools): pin the scope analyser's TS node
 types to oxc's visitorKeys

The analyser classifies every `TS*` node as runtime code or type and
throws for one it does not know. A test now compares both lists with
the `visitorKeys` of the oxc-parser it runs on, so a new node type on an
oxc bump fails CI instead of indexing.

The unknown-node check also covers nodes reached only through type
traversal: type aliases, `: Type` annotations, whose references are not
counted, and type arguments.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/scope.test.ts | 29 +++++++++++++++++++-
 code/core/src/csf-tools/estree/scope.ts      | 23 ++++++++++++----
 2 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/code/core/src/csf-tools/estree/scope.test.ts b/code/core/src/csf-tools/estree/scope.test.ts
index 3017e1a41f3f..a32f44c8cfb0 100644
--- a/code/core/src/csf-tools/estree/scope.test.ts
+++ b/code/core/src/csf-tools/estree/scope.test.ts
@@ -1,7 +1,8 @@
+import { visitorKeys } from 'oxc-parser';
 import { describe, expect, it } from 'vitest';
 
 import { type E, parseModule } from './ast.ts';
-import { analyzeScopes, generateUid } from './scope.ts';
+import { TS_EXPRESSIONS, TS_TYPES, analyzeScopes, generateUid } from './scope.ts';
 
 const programBindings = (code: string) => {
   const { program } = parseModule(code, 'file.tsx');
@@ -121,6 +122,32 @@ describe('analyzeScopes', () => {
     expect(() => analyzeScopes(program)).toThrow('TSNewThing');
   });
 
+  it('classifies every TS node type of the oxc parser it runs on', () => {
+    const unclassified = Object.keys(visitorKeys).filter(
+      (type) => type.startsWith('TS') && !TS_EXPRESSIONS.has(type) && !TS_TYPES.has(type)
+    );
+    // `parseModule` replaces a parenthesized type with the type inside it.
+    expect(unclassified).toEqual(['TSParenthesizedType']);
+  });
+
+  it.each([
+    ['a type alias', 'type T = typeof x;', (statement: any) => statement.typeAnnotation],
+    [
+      'an annotation',
+      'let a: typeof x;',
+      (statement: any) => statement.declarations[0].id.typeAnnotation.typeAnnotation,
+    ],
+    [
+      'a type argument',
+      'f<typeof x>();',
+      (statement: any) => statement.expression.typeArguments.params[0],
+    ],
+  ])('refuses a TS node type it does not know inside %s', (_where, code, typeNode) => {
+    const { program } = parseModule(`const x = 1; ${code}`, 'file.ts');
+    typeNode(program.body[1]).type = 'TSFutureRuntimeNode';
+    expect(() => analyzeScopes(program)).toThrow('TSFutureRuntimeNode');
+  });
+
   it('counts overload signatures as references to the implementation', () => {
     expect(programBindings('function f(): void; function f(a?: unknown) {} f();')).toEqual({
       f: { constant: true, references: 2 },
diff --git a/code/core/src/csf-tools/estree/scope.ts b/code/core/src/csf-tools/estree/scope.ts
index 91cce48906c4..a35954f7a323 100644
--- a/code/core/src/csf-tools/estree/scope.ts
+++ b/code/core/src/csf-tools/estree/scope.ts
@@ -94,7 +94,7 @@ const BLOCK_SCOPE_TYPES = new Set([
 ]);
 
 // TS nodes that hold runtime code and are visited like any other expression or declaration.
-const TS_EXPRESSIONS = new Set([
+export const TS_EXPRESSIONS = new Set([
   'TSModuleDeclaration',
   'TSModuleBlock',
   'TSAsExpression',
@@ -115,7 +115,7 @@ const TS_EXPRESSIONS = new Set([
 
 // TS nodes that only describe types. A `TS*` node in neither set is an error rather than a guess:
 // treating a renamed runtime node as a type would silently drop references.
-const TS_TYPES = new Set([
+export const TS_TYPES = new Set([
   'TSAnyKeyword',
   'TSArrayType',
   'TSBigIntKeyword',
@@ -175,6 +175,20 @@ const TS_TYPES = new Set([
   'TSVoidKeyword',
 ]);
 
+const assertKnown = (node: Node) => {
+  if (node.type.startsWith('TS') && !TS_EXPRESSIONS.has(node.type) && !TS_TYPES.has(node.type)) {
+    throw new Error(`Scope analysis does not know the ${node.type} node type`);
+  }
+};
+
+// A `: Type` annotation counts no references, but a node in it may still be unknown.
+const assertKnownWithin = (node: Node) => {
+  for (const child of childEntries(node)) {
+    assertKnown(child.node);
+    assertKnownWithin(child.node);
+  }
+};
+
 const isCompatTag = (name: string) => /^[a-z]/.test(name) || name.includes('-');
 
 // Identifiers a binding pattern declares, plus the expressions nested in it (defaults, keys,
@@ -440,8 +454,10 @@ export const analyzeScopes = (program: E.Program): ScopeInfo => {
   // Babel counts the names a type refers to (`satisfies Meta<typeof Button>`) as references,
   // except inside `: Type` annotations.
   const visitType = (node: Node, scope: Scope): void => {
+    assertKnown(node);
     switch (node.type) {
       case 'TSTypeAnnotation':
+        assertKnownWithin(node);
         return;
       case 'TSTypeReference':
         reference(node.typeName, scope);
@@ -496,9 +512,6 @@ export const analyzeScopes = (program: E.Program): ScopeInfo => {
 
   const visitNode = (node: Node, scope: Scope): void => {
     if (node.type.startsWith('TS') && !TS_EXPRESSIONS.has(node.type)) {
-      if (!TS_TYPES.has(node.type)) {
-        throw new Error(`Scope analysis does not know the ${node.type} node type`);
-      }
       visitType(node, scope);
       return;
     }

From 24811776f25f117927302a7978ecc181dabdbb0a Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 17:30:59 +0200
Subject: [PATCH 312/326] docs(csf-tools): list the community packages that
 need a Storybook 11 release

MIGRATION names the packages that read `storybook/internal/babel` or
Babel-shaped `csf-tools` fields and stop loading until they publish a
release. `ConfigFile.target` no longer mentions an annotation target,
which story fields replaced.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 MIGRATION.md                          | 13 +++++++++++++
 code/core/src/csf-tools/ConfigFile.ts |  2 +-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 72d9b3eaefd4..64531c9803a9 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1383,6 +1383,19 @@ Storybook no longer bundles Babel or recast to read and write story and config f
 - Story files read string-literal keys and ignore computed identifier keys. `export default { 'title': 'X' }` now gives story ids under `X`, where Babel used the automatic title, and `export default { [title]: 'X' }` no longer sets the title.
 - On StackBlitz WebContainers, which have no native `oxc-parser` binding, `oxc-parser` downloads `@oxc-parser/binding-wasm32-wasi` itself with `pnpm`. On any other host without a native binding, Storybook fails with a "Cannot find native binding" error whose cause names the missing packages; install `@oxc-parser/binding-wasm32-wasi` in the project at the exact version of `oxc-parser`.
 
+#### Community packages that need a release
+
+These packages read `storybook/internal/babel` or Babel-shaped `csf-tools` fields such as `_ast`, so they stop loading on Storybook 11 until they publish a release for it. No release with the fix is known yet; upgrade each once it ships:
+
+- `storybook-solidjs-vite`
+- `msw-storybook-addon`, for its migration CLI
+- `storybook-addon-test-codegen`
+- `@storybook/experimental-devtools`
+- `storybook-addon-metadata`
+- `storybook-detox-test-runner`
+- `@parcel/transformer-storybook`, used by `storybook-builder-parcel`
+- `storybook-builder-rsbuild`, which passes the removed `babelParser` to Storybook's mocking utilities
+
 #### Changes for tooling that imports Storybook's internal entry points
 
 - `storybook/internal/babel` is removed. Import Babel from your own `@babel/*` dependencies if you still need it.
diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index 94f18ae7d055..216cc6cd400e 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -184,7 +184,7 @@ const isTypeOnly = (declaration: E.ImportDeclaration, specifier: ImportSpecifier
 
 export class ConfigFile implements CsfObject {
   /**
-   * Identify the config, meta, story, annotation, or call argument this editor represents.
+   * Identify the config, meta, story, or call argument this editor represents.
    *
    * @example
    * ```ts

From 4ba490e28d85b75bef4987774b94df2eefcf56aa Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 17:34:05 +0200
Subject: [PATCH 313/326] fix(csf-tools)!: refuse a missing parent that more
 than one spread may provide

A parent created after several spreads carried their member as
`...(Two.args ?? One.args)`, which reads `One.args` when `Two` has its
own `args: undefined`, where the spread result has none. Creating the
parent, or an array, is now refused with `spread-field` when more than
one spread may provide the member. A local object literal known to have
it still settles which one does, and one known to lack it is skipped.

The README states that a carried member is read again, so a getter or a
reassigned binding can give another value.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/ConfigFile.test.ts |  11 +-
 code/core/src/csf-tools/CsfObject.test.ts  |  24 ++++-
 code/core/src/csf-tools/CsfObject.ts       |  16 ++-
 code/core/src/csf-tools/ObjectMembers.ts   | 114 ++++++++++-----------
 code/core/src/csf-tools/README.md          |   2 +-
 5 files changed, 91 insertions(+), 76 deletions(-)

diff --git a/code/core/src/csf-tools/ConfigFile.test.ts b/code/core/src/csf-tools/ConfigFile.test.ts
index 397e233461d3..6a3da3337c75 100644
--- a/code/core/src/csf-tools/ConfigFile.test.ts
+++ b/code/core/src/csf-tools/ConfigFile.test.ts
@@ -811,12 +811,6 @@ describe('ConfigFile', () => {
         ['addons'],
         "export default { ...shared, addons: [...(shared.addons ?? []), 'x'] };",
       ],
-      [
-        'several imports, the last one first',
-        "import a from './a';\nimport b from './b';\nexport default { ...a, ...b };",
-        ['addons'],
-        "export default { ...a, ...b, addons: [...(b.addons ?? a.addons ?? []), 'x'] };",
-      ],
       [
         'an import, through a missing parent',
         "import shared from './shared';\nexport default { ...shared };",
@@ -841,6 +835,11 @@ describe('ConfigFile', () => {
 
     it.each([
       ['a spread of a call', 'export default { ...getShared() };', 'spread-field'],
+      [
+        'spreads of two imports, either of which may provide it',
+        "import a from './a';\nimport b from './b';\nexport default { ...a, ...b };",
+        'spread-field',
+      ],
       ['a computed key, which may name it', 'export default { [key]: [] };', 'dynamic-key'],
     ])('rejects creating an array after %s', (_case, source, code) => {
       const config = loadConfig(source).parse();
diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index 6bfd23331246..61af772fb5be 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -789,10 +789,10 @@ describe('CsfObject', () => {
       "export const A = { ...Base, parameters: { ...Base.parameters, 'my-addon': { ...Base.parameters?.['my-addon'], a: 'x' } } };",
     ],
     [
-      'several spreads, of which the last with the field replaces the others',
-      "import { One, Two } from './stories';\nexport const A = { ...One, title: 'A', ...Two };",
+      'several spreads, of which the last is a local object known to have the field',
+      "import { One } from './stories';\nconst Two = { args: {} };\nexport const A = { ...One, ...Two };",
       ['args', 'a'],
-      "export const A = { ...One, title: 'A', ...Two, args: { ...(Two.args ?? One.args), a: 'x' } };",
+      "export const A = { ...One, ...Two, args: { ...Two.args, a: 'x' } };",
     ],
     [
       'a spread of a member chain',
@@ -824,6 +824,24 @@ describe('CsfObject', () => {
     }
   );
 
+  it.each([
+    ['two imports', "import { One, Two } from './stories';\nexport const A = { ...One, ...Two };"],
+    [
+      'a local object with the field, then an import',
+      "import { Two } from './stories';\nconst One = { args: { stale: 1 } };\nexport const A = { ...One, ...Two };",
+    ],
+  ])('refuses a missing parent after %s, either of which may provide it', (_case, code) => {
+    const source = `export default { title: 'X' };\n${code}`;
+    const csf = parse(source);
+    const [story] = csf.objects({ meta: false });
+
+    expect(story.set(['args', 'a'], 'x')).toMatchObject({
+      ok: false,
+      diagnostic: { code: 'spread-field', path: ['args', 'a'] },
+    });
+    expect(printCsf(csf).code).toBe(source);
+  });
+
   it.each([
     ['an assignment', 'const Base = { render: () => null };\nBase.args = { x: 1 };'],
     [
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index c5cc0795e22f..bf6fe860c95e 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -378,7 +378,11 @@ class Editor implements CsfObjectEditor {
       }
     }
     if (inspected.missing !== undefined && inspected.missing < path.length - 1) {
-      const carried = carriedSpreads(this.editor, inspected.parent.properties);
+      const carried = carriedSpreads(
+        this.editor,
+        inspected.parent.properties,
+        path[inspected.missing]
+      );
       if (carried.ok === false) {
         return this.failure(carried.code, path, carried.node);
       }
@@ -417,7 +421,11 @@ class Editor implements CsfObjectEditor {
     if (refused) {
       return refused;
     }
-    const carried = carriedSpreads(this.editor, inspected.parent.properties);
+    const carried = carriedSpreads(
+      this.editor,
+      inspected.parent.properties,
+      path[inspected.missing!]
+    );
     if (carried.ok === false) {
       return this.failure(carried.code, path, carried.node);
     }
@@ -816,7 +824,7 @@ class Editor implements CsfObjectEditor {
         throw invalidated();
       }
       if (!lookup.property) {
-        const carried = carriedSpreads(this.editor, parent.properties);
+        const carried = carriedSpreads(this.editor, parent.properties, name);
         if (carried.ok === false) {
           throw invalidated();
         }
@@ -828,7 +836,7 @@ class Editor implements CsfObjectEditor {
         const block = (members: string[]) =>
           multiline ? printMembers(members, indent) : `{ ${members.join(', ')} }`;
         const forward = (depth: number, into: 'object' | 'array' = 'object') => {
-          const spread = carriedSpread(carried.spreads, missing.slice(0, depth + 1), quote, into);
+          const spread = carriedSpread(carried.spread, missing.slice(0, depth + 1), quote, into);
           return spread ? [spread] : [];
         };
         const last = missing.length - 1;
diff --git a/code/core/src/csf-tools/ObjectMembers.ts b/code/core/src/csf-tools/ObjectMembers.ts
index 09cd951910e1..fd849509f664 100644
--- a/code/core/src/csf-tools/ObjectMembers.ts
+++ b/code/core/src/csf-tools/ObjectMembers.ts
@@ -65,9 +65,9 @@ export const lookupProperty = (
   return { ok: true, property: matches[0] };
 };
 
-// A spread a parent created after it carries forward, with the object literal of the local
-// constant it spreads, whose own members are known.
-type CarriedSpread = { source: string; literal: E.ObjectExpression | undefined };
+// The spread a parent created after it carries forward, read at the parent's key, and whether
+// that member is known to be an object literal.
+type CarriedSpread = { source: string; object: boolean };
 
 // A reference reads the same value when it is read again.
 const isReference = (node: Node): boolean =>
@@ -131,13 +131,32 @@ const onlyRead = (editor: SourceEditor, binding: Binding) =>
     }
   });
 
+// What an object literal is known to hold at `key`: no member, a value that may be an object
+// literal, or unknown.
+const literalMember = (literal: E.ObjectExpression, key: string) => {
+  const lookup = lookupProperty(literal.properties, key);
+  if (!lookup.ok || lookup.property?.method) {
+    return { kind: 'unknown' as const };
+  }
+  if (!lookup.property) {
+    return { kind: 'missing' as const };
+  }
+  const value = unwrapExpression(lookup.property.value);
+  return { kind: 'value' as const, object: value.type === 'ObjectExpression' };
+};
+
+// The spread among `properties` whose member `key` a new parent at `key` carries forward: the last
+// one that may have it, skipping a local literal known to lack it. When two may have it, which one
+// does depends on own `undefined` members, so that is refused.
 export const carriedSpreads = (
   editor: SourceEditor,
-  properties: readonly E.ObjectPropertyKind[]
+  properties: readonly E.ObjectPropertyKind[],
+  key: string
 ):
-  | { ok: true; spreads: CarriedSpread[] }
+  | { ok: true; spread: CarriedSpread | undefined }
   | { ok: false; code: CsfMutationDiagnosticCode; node: Node } => {
-  const spreads: CarriedSpread[] = [];
+  // The spreads that may provide `key`, since the last one known to.
+  let candidates: { spread: CarriedSpread; node: Node }[] = [];
   for (const member of properties) {
     if (member.type !== 'SpreadElement') {
       if (staticKey(member) === undefined) {
@@ -155,73 +174,44 @@ export const carriedSpreads = (
       binding?.constant && binding.node.type === 'VariableDeclarator' && onlyRead(editor, binding)
         ? unwrapExpression(binding.node.init)
         : undefined;
+    const known = init?.type === 'ObjectExpression' ? literalMember(init, key) : undefined;
+    if (known?.kind === 'missing') {
+      continue;
+    }
     // A type assertion stays, so the carried member has the type the spread was given.
     const source = editor.source(member.argument);
-    spreads.push({
-      source: reference === member.argument ? source : `(${source})`,
-      literal: init?.type === 'ObjectExpression' ? init : undefined,
-    });
+    const candidate = {
+      spread: {
+        source: reference === member.argument ? source : `(${source})`,
+        object: known?.kind === 'value' && known.object,
+      },
+      node: member,
+    };
+    candidates = known?.kind === 'value' ? [candidate] : [...candidates, candidate];
   }
-  return { ok: true, spreads };
-};
-
-// What an object literal is known to hold at `key`: no member, a value that may be an object
-// literal, or unknown.
-const literalMember = (literal: E.ObjectExpression, key: string) => {
-  const lookup = lookupProperty(literal.properties, key);
-  if (!lookup.ok || lookup.property?.method) {
-    return { kind: 'unknown' as const };
-  }
-  if (!lookup.property) {
-    return { kind: 'missing' as const };
+  if (candidates.length > 1) {
+    return { ok: false, code: 'spread-field', node: candidates.at(-1)!.node };
   }
-  const value = unwrapExpression(lookup.property.value);
-  return { kind: 'value' as const, object: value.type === 'ObjectExpression' };
+  return { ok: true, spread: candidates[0]?.spread };
 };
 
-// The spread that writes the member at `keys` of `spreads` into a new object or array, or
-// `undefined` when none can have it. The last spread that may have the first key wins, earlier ones
-// follow after `??` in case it lacks it; a local literal known to have it ends that list, and one
-// known to lack it is skipped. A member below a spread's own is read with `?.`, unless it is read
-// from an object literal: only the literal's own members are known, as a copy of it shares the
-// objects it holds, through which code can change them.
+// The spread that writes the member at `keys` of `spread`, the one `carriedSpreads` chose for the
+// first key, into a new object or array. A member below the spread's own is read with `?.`, unless
+// it is read from an object literal: only the literal's own members are known, as a copy of it
+// shares the objects it holds, through which code can change them.
 export const carriedSpread = (
-  spreads: readonly CarriedSpread[],
+  spread: CarriedSpread | undefined,
   keys: readonly string[],
   quote: string,
   into: 'object' | 'array'
 ) => {
-  const spreadOf = (expression: string, alternatives = false) =>
-    into === 'array'
-      ? `...(${expression} ?? [])`
-      : `...${alternatives ? `(${expression})` : expression}`;
-  const [first, ...rest] = keys;
-  const candidates: { expression: string; object: boolean }[] = [];
-  for (const spread of [...spreads].reverse()) {
-    const member = spread.literal ? literalMember(spread.literal, first) : undefined;
-    if (member?.kind === 'missing') {
-      continue;
-    }
-    candidates.push({
-      expression: `${spread.source}${printMemberAccess(first, quote)}`,
-      object: member?.kind === 'value' && member.object,
-    });
-    if (member?.kind === 'value') {
-      break;
-    }
-  }
-  if (candidates.length === 0) {
+  if (!spread) {
     return undefined;
   }
-  if (candidates.length > 1) {
-    const either = candidates.map(({ expression }) => expression).join(' ?? ');
-    return rest.length === 0
-      ? spreadOf(either, true)
-      : spreadOf(`(${either})${rest.map((key) => printMemberAccess(key, quote, true)).join('')}`);
-  }
-  const [{ expression, object }] = candidates;
-  return spreadOf(
-    expression +
-      rest.map((key, index) => printMemberAccess(key, quote, index > 0 || !object)).join('')
-  );
+  const [first, ...rest] = keys;
+  const expression =
+    spread.source +
+    printMemberAccess(first, quote) +
+    rest.map((key, index) => printMemberAccess(key, quote, index > 0 || !spread.object)).join('');
+  return into === 'array' ? `...(${expression} ?? [])` : `...${expression}`;
 };
diff --git a/code/core/src/csf-tools/README.md b/code/core/src/csf-tools/README.md
index 59031b0d093a..9689e569a201 100644
--- a/code/core/src/csf-tools/README.md
+++ b/code/core/src/csf-tools/README.md
@@ -46,7 +46,7 @@ A story's top-level `Story.name = value` assignments (CSF2 annotations such as `
 Discovery and mutation are conservative: an object or a path whose shape cannot be proven is left untouched, and the reason is reported on `CsfFile.mutationDiagnostics` as a `CsfMutationDiagnostic`.
 Unproven shapes include story or meta bindings that are reassigned or aliased, a CSF factory configuration that is not an object literal owned by that single factory call, and target paths shadowed by a spread, a duplicate field, or a computed key.
 A story whose initializer is not an object literal, a function or a bound template, such as `export const A = base` or `makeStory()`, is reported as `unsupported-initializer`. A story is also left untouched when it is written to other than by a top-level `Story.name = value`, such as `Story.args.label = 'x'`, `Story.parameters ||= {}` or `Story[name] = {}`. A story whose assignments are edited is left untouched when other code could see them: an alias, a spread, or a call or array that receives the story; calling or rendering the story is fine. Such a story without an object literal holds a function or a bound template; any other value could be shared with other stories.
-`set` can still add a field missing from an object with a spread or a computed key: the field is appended after them, so it overrides any value they provide. A missing parent it creates there carries the spreads' member forward at every level it creates: `set(['args', 'a'], 1)` on `{ ...Base }` writes `args: { ...Base.args, a: 1 }`, and two levels deep `parameters: { ...Base.parameters, docs: { ...Base.parameters?.docs, x: 1 } }`. Of several spreads the last one with the member replaces the others, so they are read after `??`: `args: { ...(Two.args ?? One.args), a: 1 }`. `appendValueToArray` and `appendNodeToArray` create a missing array the same way, as `addons: [...(shared.addons ?? []), 'x']`. The spread's own member is read with `.`, as a story spreading a value that is not an object is broken already, and a member below it with `?.`, as it may be missing. For a spread of a local constant object literal the members are known: a member it has is read with `.`, and one it lacks is left out. A type assertion on the spread is kept. Only a spread of an identifier or a member chain such as `...stories.Base` is carried, as reading it again cannot change behaviour; after a spread of anything else, such as a call, or after a computed key, creating a parent or an array is refused. Changing or removing a field that a later spread or computed key could override is refused as well.
+`set` can still add a field missing from an object with a spread or a computed key: the field is appended after them, so it overrides any value they provide. A missing parent it creates there carries the spreads' member forward at every level it creates: `set(['args', 'a'], 1)` on `{ ...Base }` writes `args: { ...Base.args, a: 1 }`, and two levels deep `parameters: { ...Base.parameters, docs: { ...Base.parameters?.docs, x: 1 } }`. When more than one spread may provide the member, which one does depends on whether a later one has it as its own `undefined`, so creating the parent is refused (`spread-field`); a spread of a local object literal known to have the member settles it, and one known to lack it is skipped. `appendValueToArray` and `appendNodeToArray` create a missing array the same way, as `addons: [...(shared.addons ?? []), 'x']`. The spread's own member is read with `.`, as a story spreading a value that is not an object is broken already, and a member below it with `?.`, as it may be missing. For a spread of a local constant object literal the members are known: a member it has is read with `.`, and one it lacks is left out. A type assertion on the spread is kept. Only a spread of an identifier or a member chain such as `...stories.Base` is carried. The carried member is read again where the parent is created, so a getter or a binding reassigned in between can give another value than the spread did; after a spread of anything else, such as a call, or after a computed key, creating a parent or an array is refused. Changing or removing a field that a later spread or computed key could override is refused as well.
 
 For edits that no path addresses, `CsfFile.editor` and `ConfigFile.editor` are the file's `SourceEditor`, and `program` its current parse; `CsfFile.appendStatement(code)` adds a statement that `formatCsf` prints. A commit parses and indexes the file again. The underscored `_editor`, `_program` and `_appendStatement` are deprecated aliases.
 

From 520a9a0079a8f403817e10eb7358a6c53dbbff1a Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 17:36:40 +0200
Subject: [PATCH 314/326] fix(csf-tools)!: freeze the expressions get, inspect
 and transform give
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`set` prints an expression from the source it was parsed from, so a
change to a node's fields was dropped while the edit reported success.
The nodes these reads give are now deeply frozen, so such a change
throws. MIGRATION and the README say to pass a plain value or
`parseExpression(text)` instead.

Freezing adds about 5 µs to a `get` of a story's args or render
function.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 MIGRATION.md                              |  2 +-
 code/core/src/csf-tools/CsfObject.test.ts | 20 +++++++++++++++-----
 code/core/src/csf-tools/CsfObject.ts      | 16 +++++++++++++---
 code/core/src/csf-tools/README.md         |  1 +
 4 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 64531c9803a9..f41a1addd862 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1401,7 +1401,7 @@ These packages read `storybook/internal/babel` or Babel-shaped `csf-tools` field
 - `storybook/internal/babel` is removed. Import Babel from your own `@babel/*` dependencies if you still need it.
 - `getBabelDependencies` is removed from `storybook/internal/cli`.
 - The nodes exposed by `storybook/internal/csf-tools` are ESTree (OXC) nodes instead of Babel nodes, for example `Literal` instead of `StringLiteral` and `Property` instead of `ObjectProperty`/`ObjectMethod`. `CsfFile._ast` and the `NodePath` fields are removed; use `CsfFile.program` and `CsfFile.editor`. `ConfigFile._ast` is removed as well; use `ConfigFile.program` and `ConfigFile.editor`. Both `editor`s are a `SourceEditor`: call `editor.commit()` to apply pending edits, after which the file parses the result again. `_program` and `_editor` remain as deprecated aliases in Storybook 11. The editing functions and `source()` throw for nodes of another parse, such as nodes from before a commit; offsets passed to `editor.edits` are not checked.
-- `CsfObject#get` returns an ESTree expression, and `set`/`transform` accept expressions from `get()` or `parseExpression(code)`. Use `textOf(node)` to read an expression's source, and `placeableTextOf(node)` to build new code around it.
+- `CsfObject#get` returns an ESTree expression, and `set`/`transform` accept expressions from `get()` or `parseExpression(code)`. Use `textOf(node)` to read an expression's source, and `placeableTextOf(node)` to build new code around it. The expressions `get`, `inspect` and `transform` give are frozen snapshots: where a Babel node could be changed in place before passing it to `set`, assigning to an ESTree node's fields throws, as `set` prints a node from its source. Pass a plain value or `parseExpression(text)` instead.
 - An `experimental_enrichCsf` function receives the new `CsfFile`. Add code with `csf.appendStatement(code)` instead of pushing Babel nodes onto `csf._ast`; `_appendStatement` remains as a deprecated alias.
 - `babelParse` is removed; use `parseModule(code, fileName)` from `storybook/internal/csf-tools`, which returns the ESTree `program` and `comments`. `babelParseFile` is removed as well; read CSF with `loadCsf(code, options)` or `readCsf(fileName, options)`.
 - Parsing normalizes line endings to `\n`. Node offsets from `parseModule`, `CsfFile.program` and `ConfigFile.program` index the normalized `code`/`_code`, not the string you passed in; lines and columns are unchanged.
diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index 61af772fb5be..482481bb4b13 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -561,15 +561,25 @@ describe('CsfObject', () => {
     });
   });
 
-  it('does not expose mutable AST nodes through get or set', () => {
-    const csf = parse(`export default { title: 'Original' };`);
+  it('does not expose mutable AST nodes through get, inspect or set', () => {
+    const csf = parse(`export default { title: 'Original', args: { size: { value: 'small' } } };`);
     const [meta] = csf.objects({ meta: true, stories: false });
-    const value = meta.get(['title']);
+    const value = meta.get(['title']) as ESTree.StringLiteral;
+    const inspected = meta.inspect(['args']);
     const replacement = parseExpression('"Replacement"');
 
-    if (value?.type === 'Literal') {
+    expect(() => {
       value.value = 'Mutated';
-    }
+    }).toThrow(TypeError);
+    expect(inspected.kind === 'value' && Object.isFrozen(inspected.node)).toBe(true);
+    expect(
+      inspected.kind === 'value' &&
+        Object.isFrozen((inspected.node as ESTree.ObjectExpression).properties[0])
+    ).toBe(true);
+    meta.transform(['title'], (current) => {
+      expect(Object.isFrozen(current)).toBe(true);
+      return undefined;
+    });
     expect(meta.set(['title'], replacement)).toEqual({ ok: true, changed: true });
     (replacement as { value: unknown }).value = 'Mutated replacement';
 
diff --git a/code/core/src/csf-tools/CsfObject.ts b/code/core/src/csf-tools/CsfObject.ts
index bf6fe860c95e..804b8192a846 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -262,6 +262,16 @@ type MarkChanged = () => void;
 
 const unsafePath = (path: readonly string[]) => path.includes('__proto__');
 
+// `set` prints a node from its source, so a change to its fields would be lost: it throws instead.
+const readOnly = <T extends object>(node: T): T => {
+  for (const value of Object.values(node)) {
+    if (typeof value === 'object' && value !== null && !Object.isFrozen(value)) {
+      readOnly(value);
+    }
+  }
+  return Object.freeze(node);
+};
+
 class Editor implements CsfObjectEditor {
   #changed = false;
 
@@ -307,7 +317,7 @@ class Editor implements CsfObjectEditor {
 
   get(path: readonly string[]): CsfExpression | undefined {
     const property = this.getProperty(path);
-    return property && parseExpression(valueSource(this.editor, property));
+    return property && readOnly(parseExpression(valueSource(this.editor, property)));
   }
 
   // Unlike `get`, which reads the object itself as missing, `inspect` reports it.
@@ -321,7 +331,7 @@ class Editor implements CsfObjectEditor {
     }
     const found = this.find(path);
     return found.kind === 'property'
-      ? { kind: 'value', node: parseExpression(valueSource(this.editor, found.property)) }
+      ? { kind: 'value', node: readOnly(parseExpression(valueSource(this.editor, found.property))) }
       : found;
   }
 
@@ -455,7 +465,7 @@ class Editor implements CsfObjectEditor {
     if (!property) {
       return { ok: true, changed: false };
     }
-    const value = parseExpression(valueSource(this.editor, property));
+    const value = readOnly(parseExpression(valueSource(this.editor, property)));
     const derived = derive(value);
     if (!derived || derived === value) {
       return { ok: true, changed: false };
diff --git a/code/core/src/csf-tools/README.md b/code/core/src/csf-tools/README.md
index 9689e569a201..251ed32b83d2 100644
--- a/code/core/src/csf-tools/README.md
+++ b/code/core/src/csf-tools/README.md
@@ -34,6 +34,7 @@ if (size.kind === 'value') {
 
 Use `inspect` when a missing field and an unreadable one call for different edits, such as an automigration that reports a file it cannot read instead of skipping it.
 
+The expressions `get`, `inspect` and `transform` give are frozen snapshots: `set` prints an expression from its source, so a change to its fields would be lost, and making one throws. To write another value, pass a plain value or `parseExpression(text)`.
 `set` accepts an expression from `get` or `parseExpression`, or plain strings, numbers, booleans, `null`, `undefined`, and nested arrays or objects of those values and expressions. An object whose `type` names an AST node is rejected with a diagnostic unless it came from `get` or `parseExpression`. Plain values are printed into the source, so later changes to the input do not affect the file.
 An expression from `get` is indented as if its line had no indent, and `set` and `transform` indent a value's lines like the line of the field it is written to, so a value copied between fields keeps its layout. A field that spans lines, added to an object written on one line, puts every field of that object on a line of its own; a one-line field leaves the object on its line. Objects around it, and an object a field is grouped into, keep their layout.
 Successful removals and moves recursively remove empty source parents, stopping at the editor's root object or an empty parent that shadows an earlier spread or computed key. Removing a field that could reveal an earlier spread value produces a diagnostic. Moves clean up after inserting the destination, so shared ancestors remain intact. Unrelated empty objects are preserved.

From 541d225549f62d2efb88e14469cc250999557fe1 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 17:39:22 +0200
Subject: [PATCH 315/326] fix(web-components): keep the lines of a template
 listener handler in snippets
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A handler bound in a template, such as `@click=${(event) => { … }}`,
was printed on one line with its comments kept, so a line comment
swallowed the rest of the snippet's script. It is printed with its own
lines now, re-indented for the script, like a handler passed as an arg;
the one-line text stays for the warning that names it.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../src/docgen/story-docs/build-story-docs.ts | 15 ++------
 .../src/docgen/story-docs/template-holes.ts   | 24 +++++++++++--
 .../docgen/story-docs/template-print.test.ts  | 35 +++++++++++++++++++
 3 files changed, 59 insertions(+), 15 deletions(-)

diff --git a/code/renderers/web-components/src/docgen/story-docs/build-story-docs.ts b/code/renderers/web-components/src/docgen/story-docs/build-story-docs.ts
index 0cdcf2e11e82..7b49a9aff005 100644
--- a/code/renderers/web-components/src/docgen/story-docs/build-story-docs.ts
+++ b/code/renderers/web-components/src/docgen/story-docs/build-story-docs.ts
@@ -8,12 +8,10 @@ import type {
 } from 'storybook/internal/csf-tools';
 import {
   authoredSource,
-  textOf,
   createStoryArgsResolver,
   createStoryReferenceResolver,
   extractStoryJSDocInfo,
   noSnippetWarning,
-  reindent,
   resolveEffectiveRender,
   oneLineTextOf,
   unwrapExpression,
@@ -33,6 +31,7 @@ import { evaluateArgValue, isFunctionNode } from './arg-values.ts';
 import { classifyArg, type ArgBinding } from './classify-args.ts';
 import type { ElementSnippet } from './print-element.ts';
 import { printElementSnippet } from './print-element.ts';
+import { handlerText } from './template-holes.ts';
 import { printHtmlTemplate } from './template-print.ts';
 import { resolveHtmlTemplate } from './template-scope.ts';
 
@@ -436,16 +435,8 @@ const hasSnippetContent = (snippet: ElementSnippet): boolean =>
   snippet.slots.length > 0 ||
   snippet.styleRules.length > 0;
 
-// The handler runs inside the snippet's `<script>`, so it keeps its lines and comments, re-indented
-// from the story file to the snippet.
-const listenerHandler = (node: Node): string => {
-  if (!isFunctionNode(unwrapExpression(node))) {
-    return '() => {}';
-  }
-  const code = textOf(node);
-  const closingIndent = /^[ \t]*/.exec(code.slice(code.lastIndexOf('\n') + 1))![0];
-  return reindent(code, closingIndent, '    ');
-};
+const listenerHandler = (node: Node): string =>
+  isFunctionNode(unwrapExpression(node)) ? handlerText(node) : '() => {}';
 
 const incompleteList = (names: string[], suffix: string): string | undefined =>
   names.length === 0
diff --git a/code/renderers/web-components/src/docgen/story-docs/template-holes.ts b/code/renderers/web-components/src/docgen/story-docs/template-holes.ts
index b3d4c2ba7fa3..3c9e65700bc2 100644
--- a/code/renderers/web-components/src/docgen/story-docs/template-holes.ts
+++ b/code/renderers/web-components/src/docgen/story-docs/template-holes.ts
@@ -1,5 +1,11 @@
 import type { ESTree as E, ESTreeNode as Node, ImportBinding } from 'storybook/internal/csf-tools';
-import { oneLineTextOf, unwrapExpression, walk } from 'storybook/internal/csf-tools';
+import {
+  oneLineTextOf,
+  reindent,
+  textOf,
+  unwrapExpression,
+  walk,
+} from 'storybook/internal/csf-tools';
 
 import { FAILED, evaluateArgValue, isFunctionNode, primitiveLiteralValue } from './arg-values.ts';
 import type { AliasValue, HtmlTemplate, TemplateScope } from './template-scope.ts';
@@ -9,6 +15,14 @@ import {
   templateFromExpression,
 } from './template-scope.ts';
 
+// A handler runs inside the snippet's `<script>`, so it keeps its lines and comments, re-indented
+// from the story file to the snippet.
+export const handlerText = (node: Node): string => {
+  const code = textOf(node);
+  const closingIndent = /^[ \t]*/.exec(code.slice(code.lastIndexOf('\n') + 1))![0];
+  return reindent(code, closingIndent, '    ');
+};
+
 export type HoleValue =
   | { kind: 'empty'; arg?: string }
   | { handler: string; kind: 'function'; arg?: string; source?: string }
@@ -49,7 +63,11 @@ export const resolveHoleValue = (expression: E.Expression, context: HoleContext)
     return { kind: 'value', value: literalValue(unwrapped) };
   }
   if (isFunctionNode(unwrapped)) {
-    return { handler: oneLineTextOf(expression), kind: 'function' };
+    return {
+      handler: handlerText(expression),
+      kind: 'function',
+      source: oneLineTextOf(expression),
+    };
   }
   const nested = templateFromExpression(unwrapped, context.bindings, context.scope);
   if (nested) {
@@ -123,7 +141,7 @@ const resolveArg = (arg: string, node: Node | undefined): HoleValue => {
   const value = evaluateArgValue(node);
   switch (value.kind) {
     case 'function':
-      return { handler: oneLineTextOf(node), kind: 'function', arg };
+      return { handler: handlerText(node), kind: 'function', arg, source: oneLineTextOf(node) };
     case 'unset':
       return { kind: 'value', arg, value: undefined };
     case 'unresolved':
diff --git a/code/renderers/web-components/src/docgen/story-docs/template-print.test.ts b/code/renderers/web-components/src/docgen/story-docs/template-print.test.ts
index 758f5ccfd69e..aa4b384f8dff 100644
--- a/code/renderers/web-components/src/docgen/story-docs/template-print.test.ts
+++ b/code/renderers/web-components/src/docgen/story-docs/template-print.test.ts
@@ -127,6 +127,41 @@ describe('html template story snippets', () => {
     const host = document.currentScript.previousElementSibling;
     host.addEventListener('shape-change', (event) => event.preventDefault());
   }
+</script>`,
+        unresolved: [],
+      },
+    },
+    {
+      name: 'inline template listener handler with a line comment',
+      source: `
+        import { html } from 'lit';
+        export default { component: 'template-element' };
+        export const Primary = {
+          render: () => html\`<template-element @shape-change=\${(event) => {
+            // stop the browser action
+            event.preventDefault();
+          }}></template-element>\`,
+        };
+      `,
+      expected: {
+        listeners: [
+          {
+            event: 'shape-change',
+            handler:
+              '(event) => {\n      // stop the browser action\n      event.preventDefault();\n    }',
+          },
+        ],
+        properties: [],
+        referenced: [],
+        snippet: `<template-element></template-element>
+<script>
+  {
+    const host = document.currentScript.previousElementSibling;
+    host.addEventListener('shape-change', (event) => {
+      // stop the browser action
+      event.preventDefault();
+    });
+  }
 </script>`,
         unresolved: [],
       },

From 4cd02fe8510c7c0e384008da5ed1524362b595b3 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 17:41:19 +0200
Subject: [PATCH 316/326] fix(csf-tools): keep generated names clear of enum,
 namespace and ambient names

Enums, namespaces and `declare function`s bind no name in the scope
analysis, so `generateUid` could return their name: a story file with
`enum _meta {}` got a `const _meta` next to it from the Vitest
transform, which does not parse. Their names are now reserved.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/estree/scope.test.ts | 10 ++++++++++
 code/core/src/csf-tools/estree/scope.ts      | 16 ++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/code/core/src/csf-tools/estree/scope.test.ts b/code/core/src/csf-tools/estree/scope.test.ts
index a32f44c8cfb0..e20ca5f85475 100644
--- a/code/core/src/csf-tools/estree/scope.test.ts
+++ b/code/core/src/csf-tools/estree/scope.test.ts
@@ -167,6 +167,16 @@ describe('analyzeScopes', () => {
     expect(programBindings('enum E { A } declare global { var X: number }')).toEqual({});
   });
 
+  it.each([
+    'enum _meta { A }',
+    'namespace _meta { export const x = 1; }',
+    'namespace _meta.inner { export const x = 1; }',
+    'declare function _meta(): void;',
+  ])('generates a name that does not collide with %s', (code) => {
+    const info = analyzeScopes(parseModule(code, 'file.ts').program);
+    expect(generateUid(info, 'meta')).toBe('_meta2');
+  });
+
   it('generates Babel-style unique names', () => {
     const info = analyzeScopes(parseModule('const _meta = 1; const _meta2 = 2;').program);
     expect(generateUid(info, 'meta')).toBe('_meta3');
diff --git a/code/core/src/csf-tools/estree/scope.ts b/code/core/src/csf-tools/estree/scope.ts
index a35954f7a323..f79d17e723a4 100644
--- a/code/core/src/csf-tools/estree/scope.ts
+++ b/code/core/src/csf-tools/estree/scope.ts
@@ -456,6 +456,9 @@ export const analyzeScopes = (program: E.Program): ScopeInfo => {
   const visitType = (node: Node, scope: Scope): void => {
     assertKnown(node);
     switch (node.type) {
+      case 'TSDeclareFunction':
+        reserveName(node.id);
+        break;
       case 'TSTypeAnnotation':
         assertKnownWithin(node);
         return;
@@ -498,6 +501,17 @@ export const analyzeScopes = (program: E.Program): ScopeInfo => {
     }
   };
 
+  // Enums, namespaces and ambient functions bind no name in the analysis, but a generated name
+  // must not collide with theirs. `namespace A.B {}` declares `A`.
+  const reserveName = (id: Node | null | undefined) => {
+    while (id?.type === 'TSQualifiedName') {
+      id = id.left;
+    }
+    if (id?.type === 'Identifier') {
+      names.add(id.name);
+    }
+  };
+
   let loopDepth = 0;
 
   const visit = (node: Node, scope: Scope): void => {
@@ -701,9 +715,11 @@ export const analyzeScopes = (program: E.Program): ScopeInfo => {
         }
         return;
       case 'TSEnumDeclaration':
+        reserveName(node.id);
         visit(node.body, current);
         return;
       case 'TSModuleDeclaration':
+        reserveName(node.id);
         if (node.body) {
           visit(node.body, current);
         }

From a08e03e55c07afe3f238580019dc15d3ff11302c Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 17:42:55 +0200
Subject: [PATCH 317/326] fix(csf-tools): keep a trailing hole when an arg's
 array spreads are written out

An array arg rebuilt to write out its spreads joined its elements with
commas, so `[{ ...Base },,]` became `[{ a: 1 }, ]`, one element
shorter. A hole at the end now gets the comma that keeps it.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../story-shape/resolve-arg-value.test.ts     | 15 +++++++++++++
 .../story-shape/resolve-arg-value.ts          | 22 +++++++++----------
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/code/core/src/csf-tools/story-shape/resolve-arg-value.test.ts b/code/core/src/csf-tools/story-shape/resolve-arg-value.test.ts
index 98875330216f..dfa8c6a7a289 100644
--- a/code/core/src/csf-tools/story-shape/resolve-arg-value.test.ts
+++ b/code/core/src/csf-tools/story-shape/resolve-arg-value.test.ts
@@ -33,6 +33,21 @@ const valueOf = (code: string, expression: string) => {
 };
 
 describe('resolveArgValue', () => {
+  it.each([
+    { expression: '[{ ...Base },,]', node: '[{ a: 1 }, ,]' },
+    { expression: '[, { ...Base }]', node: '[, { a: 1 }]' },
+    { expression: '[{ ...Base }, , 1]', node: '[{ a: 1 }, , 1]' },
+  ])('keeps the holes of $expression when it writes out a spread', ({ expression, node }) => {
+    const base = 'const Base = { a: 1 };';
+    const { node: text } = valueOf(base, expression);
+    const original = new Function(`${base} return ${expression}`)() as unknown[];
+    const written = new Function(`return ${text}`)() as unknown[];
+
+    expect(text).toBe(node);
+    expect(written).toHaveLength(original.length);
+    expect(Object.keys(written)).toEqual(Object.keys(original));
+  });
+
   it('reads a local const through to the value it was declared with', () => {
     expect(valueOf(`const LOCAL_LABEL = 'local';`, 'LOCAL_LABEL')).toEqual({
       node: "'local'",
diff --git a/code/core/src/csf-tools/story-shape/resolve-arg-value.ts b/code/core/src/csf-tools/story-shape/resolve-arg-value.ts
index 63a5d476f75c..4a742d58c6c1 100644
--- a/code/core/src/csf-tools/story-shape/resolve-arg-value.ts
+++ b/code/core/src/csf-tools/story-shape/resolve-arg-value.ts
@@ -97,17 +97,17 @@ const inlineSpreads = (node: Node, ctx: ReferenceContext, unresolved: string[]):
   }
 
   if (node.type === 'ArrayExpression') {
-    return rebuilt(
-      `[${node.elements
-        .map((element) =>
-          element === null
-            ? ''
-            : detachedTextOf(
-                element.type === 'SpreadElement' ? element : inlineSpreads(element, ctx, unresolved)
-              )
-        )
-        .join(', ')}]`
-    );
+    const items = node.elements
+      .map((element) =>
+        element === null
+          ? ''
+          : detachedTextOf(
+              element.type === 'SpreadElement' ? element : inlineSpreads(element, ctx, unresolved)
+            )
+      )
+      .join(', ');
+    // A trailing comma ends the last element, so a hole there takes one more.
+    return rebuilt(`[${items}${node.elements.at(-1) === null ? ',' : ''}]`);
   }
 
   if (node.type !== 'ObjectExpression') {

From 3fed9d70c370a4634c0fa26cf39ffc9396e470dd Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 17:43:31 +0200
Subject: [PATCH 318/326] docs(csf-tools): document the new extractSource and
 extractDescription arguments

`extractSource` takes the file's normalized code and `extractDescription`
the file's `SourceEditor`; the old one-argument calls throw. MIGRATION
shows both calls before and after.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 MIGRATION.md | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/MIGRATION.md b/MIGRATION.md
index f41a1addd862..3d687bc28cb5 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1403,6 +1403,18 @@ These packages read `storybook/internal/babel` or Babel-shaped `csf-tools` field
 - The nodes exposed by `storybook/internal/csf-tools` are ESTree (OXC) nodes instead of Babel nodes, for example `Literal` instead of `StringLiteral` and `Property` instead of `ObjectProperty`/`ObjectMethod`. `CsfFile._ast` and the `NodePath` fields are removed; use `CsfFile.program` and `CsfFile.editor`. `ConfigFile._ast` is removed as well; use `ConfigFile.program` and `ConfigFile.editor`. Both `editor`s are a `SourceEditor`: call `editor.commit()` to apply pending edits, after which the file parses the result again. `_program` and `_editor` remain as deprecated aliases in Storybook 11. The editing functions and `source()` throw for nodes of another parse, such as nodes from before a commit; offsets passed to `editor.edits` are not checked.
 - `CsfObject#get` returns an ESTree expression, and `set`/`transform` accept expressions from `get()` or `parseExpression(code)`. Use `textOf(node)` to read an expression's source, and `placeableTextOf(node)` to build new code around it. The expressions `get`, `inspect` and `transform` give are frozen snapshots: where a Babel node could be changed in place before passing it to `set`, assigning to an ESTree node's fields throws, as `set` prints a node from its source. Pass a plain value or `parseExpression(text)` instead.
 - An `experimental_enrichCsf` function receives the new `CsfFile`. Add code with `csf.appendStatement(code)` instead of pushing Babel nodes onto `csf._ast`; `_appendStatement` remains as a deprecated alias.
+- `extractSource(node)` is `extractSource(node, code)`, and returns the story's source as written instead of a Babel reprint. Pass the file's `editor.code`, the normalized code its node offsets index. `extractDescription(node)` is `extractDescription(node, editor)`: ESTree nodes carry no `leadingComments`, so it reads the comments before the node from the file's `editor`.
+
+  ```ts
+  // Storybook 10
+  extractSource(csf.getStoryExport('Primary'));
+  extractDescription(csf._storyStatements.Primary);
+
+  // Storybook 11
+  extractSource(csf.getStoryExport('Primary'), csf.editor.code);
+  extractDescription(csf._storyStatements.Primary, csf.editor);
+  ```
+
 - `babelParse` is removed; use `parseModule(code, fileName)` from `storybook/internal/csf-tools`, which returns the ESTree `program` and `comments`. `babelParseFile` is removed as well; read CSF with `loadCsf(code, options)` or `readCsf(fileName, options)`.
 - Parsing normalizes line endings to `\n`. Node offsets from `parseModule`, `CsfFile.program` and `ConfigFile.program` index the normalized `code`/`_code`, not the string you passed in; lines and columns are unchanged.
 - `getHeaderComments(statement)` is removed. The editor keeps a file's header comments in place: `prependStatement` inserts below them, also in a file without statements, and `appendStatement` separates a multi-line statement from its neighbour with a blank line.

From d64ce99e34994508dd90c420fe47b2c3291e38d3 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 18:43:40 +0200
Subject: [PATCH 319/326] fix(csf-tools): keep SourceEditor's internals
 assignable across src and dist

`bc4cbe8` made `_module`, `_batch` and `_transaction` on `SourceEditor`
private. A private member makes the class nominal, so the declarations
in `src` and in `dist` are no longer assignable to each other. CI type
checks against the declaration files a production compile writes, and
there `scripts/tasks/sandbox-parts.ts`, `resolve-meta-component.ts`,
`update-args-in-csf-file.ts`, `duplicate-story-with-new-name.ts` and
`enrichCsf.ts` failed. A local check passed only because `code/core/dist`
had no `.d.ts`, so TypeScript resolved the sources instead.

The three members are plain again, with the comment that says why, and
`editor.test-d.ts`, which pinned them as private, is gone. `@internal`
would not do: core strips internal members from its declarations, so
`dist` would lack them and still not accept `src`.

Verified with the declaration files present, as CI has them:
`yarn nx run core:compile -c production` (60 `.d.ts` in
`code/core/dist`), then `cd scripts && yarn check` and
`yarn nx run core:check --exclude-task-dependencies`. With the private
members both fail (1 error in scripts at `sandbox-parts.ts:892`, 8 in
core); with this commit both pass.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../src/csf-tools/estree/editor.test-d.ts     | 13 ------------
 code/core/src/csf-tools/estree/editor.ts      | 21 +++++++++++--------
 2 files changed, 12 insertions(+), 22 deletions(-)
 delete mode 100644 code/core/src/csf-tools/estree/editor.test-d.ts

diff --git a/code/core/src/csf-tools/estree/editor.test-d.ts b/code/core/src/csf-tools/estree/editor.test-d.ts
deleted file mode 100644
index 9e4051ebd589..000000000000
--- a/code/core/src/csf-tools/estree/editor.test-d.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { it } from 'vitest';
-
-import { SourceEditor } from './editor.ts';
-
-it('keeps the parse, the pending batch and the running transaction of an editor private', () => {
-  const editor = new SourceEditor('export default {};');
-  // @ts-expect-error: private to SourceEditor
-  void editor._module;
-  // @ts-expect-error: private to SourceEditor
-  void editor._batch;
-  // @ts-expect-error: private to SourceEditor
-  void editor._transaction;
-});
diff --git a/code/core/src/csf-tools/estree/editor.ts b/code/core/src/csf-tools/estree/editor.ts
index 7c47ae2d2b0c..d909094d9fda 100644
--- a/code/core/src/csf-tools/estree/editor.ts
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -23,7 +23,8 @@ import {
 } from './ast.ts';
 import { type ScopeInfo, analyzeScopes } from './scope.ts';
 
-// Maps in a chain are matched by source name, so every map of an editor uses the same one.
+// Maps in a chain are matched by source name, so every map of an editor uses the same one. A
+// private member would make the class nominal and break assignability between `src` and `dist`.
 const mapSource = (editor: { fileName: string | undefined }) => editor.fileName ?? 'source';
 
 /** A map whose `sourcesContent` may be unknown for sources an input map did not carry. */
@@ -86,14 +87,16 @@ export type InputSourceMap =
  * text too.
  */
 export class SourceEditor {
-  private _module: ParsedModule;
+  // The underscored members are not API, and none is `private`: a private member would make the
+  // class nominal and break assignability between `src` and `dist`.
+  _module: ParsedModule;
 
   _scopes: ScopeInfo | undefined;
 
   _parents: Map<Node, Node | null> | undefined;
 
   // The pending edits, with what they wrote that later edits of the same batch build on.
-  private _batch: Batch;
+  _batch: Batch;
 
   // The edits each earlier commit applied, oldest first. Their maps are only generated when one
   // is requested, so the output still maps to the code the editor was created with.
@@ -110,7 +113,7 @@ export class SourceEditor {
 
   // The transaction running, if any: whether a mutation in it was refused, so it rolls back, and
   // how to undo state kept outside the editor, such as a `changed` flag.
-  private _transaction: { refused: boolean; rollbacks: (() => void)[] } | undefined;
+  _transaction: { refused: boolean; rollbacks: (() => void)[] } | undefined;
 
   // Marks a mutation as refused, so the transaction it runs in rolls back.
   _refuse() {
@@ -636,7 +639,7 @@ export interface List {
 }
 
 // A list indexes the code of the parse it was read from, so it goes stale with its nodes.
-const listOf = (editor: SourceEditor, list: List) => derivedFrom(list, editor['_module']);
+const listOf = (editor: SourceEditor, list: List) => derivedFrom(list, editor._module);
 
 /** The `{ … }` of an import or export with at least one named specifier. */
 export const specifierList = (
@@ -1106,7 +1109,7 @@ const appendAfter = (editor: SourceEditor, list: List, previous: Appended, texts
  */
 export const appendToList = (editor: SourceEditor, list: List, texts: string[]) => {
   editor.assertCurrent(list);
-  const { lists } = editor['_batch'];
+  const { lists } = editor._batch;
   const key = `${list.open}:${list.close}`;
   const previous = lists.get(key);
   lists.set(
@@ -1323,7 +1326,7 @@ const endsStatement = (text: string) => {
  */
 export const insertStatementAfter = (editor: SourceEditor, statement: Span, text: string) => {
   const { code, edits } = editor;
-  const batch = editor['_batch'];
+  const batch = editor._batch;
   // The new text follows the text inserted after the statement earlier in the batch, if any.
   const before = batch.lastInsertedAfter.get(statement) ?? editor.source(statement);
   batch.lastInsertedAfter.set(statement, text);
@@ -1411,7 +1414,7 @@ const isRemoved = (editor: SourceEditor, span: Span) => {
 // `remove`, split around the statements inserted inside the range, as removing a range clears what
 // other edits wrote inside it.
 const removeKeeping = (editor: SourceEditor, start: number, end: number) => {
-  const inside = [...editor['_batch'].insertedAt]
+  const inside = [...editor._batch.insertedAt]
     .filter((at) => start < at && at < end)
     .sort((a, b) => a - b);
   let from = start;
@@ -1435,7 +1438,7 @@ export const appendStatement = (editor: SourceEditor, text: string) => {
     return;
   }
   // The text inserted last may lead with the blank line that set it apart.
-  const before = editor['_batch'].lastInsertedAfter.get(last)?.trim() ?? editor.source(last);
+  const before = editor._batch.lastInsertedAfter.get(last)?.trim() ?? editor.source(last);
   const multiline = text.includes('\n') || before.includes('\n');
   if (!multiline) {
     editor._appendedWithoutBlankLine.push(text);

From e17762a3913c960a6555b1c2f69620b9e58fea45 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 18:45:49 +0200
Subject: [PATCH 320/326] fix(cli): migrate argtypes-default-value for a file
 with an alias story

Since `c8fe98d`, discovery reports a story whose initializer is not a
story object, function or bound template as `unsupported-initializer`.
That is right for `= base` or `= make()`, which `argtypes-default-value`
used to skip silently, but it also failed a file with
`export const Secondary = Primary`, which the fix migrated before: the
alias shares `Primary`'s object, so stripping `Primary` covers it.

`everyCsfObject(csf)` in `edit-parsed-file.ts` discovers the meta and
stories like `csf.objects()`, for an edit that applies alike to all of
them, and marks the discovery diagnostic of a `const` story that names
an edited story (through `as`/`satisfies`, and through other aliases) as
covered, so `editParsedFile` does not fail the file for it. Every other
diagnostic still fails it, such as one for a story declared as `base`.

`argtypes-default-value` is the only automigration that discovers
stories: `component-subtitle` reads the meta only, and `docgen-server`
and `tag-filter-api` edit the main config, so none of them can meet the
diagnostic.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../cli-storybook/src/automigrate/README.md   |  1 +
 .../fixes/argtypes-default-value.test.ts      | 35 +++++++++
 .../fixes/argtypes-default-value.ts           |  4 +-
 .../automigrate/helpers/edit-parsed-file.ts   | 72 +++++++++++++++++--
 4 files changed, 104 insertions(+), 8 deletions(-)

diff --git a/code/lib/cli-storybook/src/automigrate/README.md b/code/lib/cli-storybook/src/automigrate/README.md
index c40c104b1034..1d9e0e9ed4e5 100644
--- a/code/lib/cli-storybook/src/automigrate/README.md
+++ b/code/lib/cli-storybook/src/automigrate/README.md
@@ -47,6 +47,7 @@ transform: () => [
   Edits only see script files: MDX, Svelte, and Vue stories reach `handler` hooks only.
   Consecutive edits share one parse, and the runner prints the file after each edit.
   `handler(code, { id, kind })` receives the output of the fixes before it and returns new code, or `null` to leave the file unchanged; use it for text edits such as renaming an import.
+- An edit that applies alike to the meta and every story discovers them with `everyCsfObject(csf)` from `helpers/edit-parsed-file.ts` instead of `csf.objects()`: a story declared as another story, such as `export const Secondary = Primary`, shares that story's object, so its diagnostic does not skip the file.
 - A hook that throws, an edit that leaves mutation diagnostics, or a file that cannot be read or parsed skips that file for that fix only: the fix still migrates its other files, and later fixes see the file as the last successful hook left it.
   The runner writes every skipped file and the reason to `automigrations-summary.md` in the project root and points the user to it at the end of the run.
 - A fix fails when its hooks fail on the main config, and then leaves the other files alone; otherwise it succeeds and reports the files it skipped.
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/argtypes-default-value.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/argtypes-default-value.test.ts
index 471345f07817..767ac4359228 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/argtypes-default-value.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/argtypes-default-value.test.ts
@@ -140,6 +140,41 @@ describe('argtypes-default-value', () => {
     expect(result.story).not.toContain('defaultValue');
   });
 
+  it('migrates a story declared as another story through the story it names', async () => {
+    const result = await migrate({
+      story: [
+        'export default { title: "Example" };',
+        "export const Primary = { argTypes: { label: { defaultValue: 'A', control: 'text' } } };",
+        'export const Secondary = Primary;',
+        'export const Tertiary = Secondary as typeof Primary;',
+      ].join('\n'),
+    });
+
+    expect(result.failures).toEqual([]);
+    expect(result.story).toContain("control: 'text'");
+    expect(result.story).not.toContain('defaultValue');
+    expect(result.story).toContain('export const Secondary = Primary;');
+  });
+
+  it('fails a story declared as a value it cannot edit', async () => {
+    const story = [
+      'export default { title: "Example" };',
+      "const base = { argTypes: { label: { defaultValue: 'A' } } };",
+      "export const Primary = { argTypes: { label: { defaultValue: 'B' } } };",
+      'export const Secondary = base;',
+    ].join('\n');
+    const result = await migrate({ story });
+
+    expect(result.failures).toEqual([
+      {
+        file: storyPath,
+        kind: 'story',
+        message: expect.stringContaining('Secondary'),
+      },
+    ]);
+    expect(result.story).toBe(story);
+  });
+
   it('leaves a spread inside the arg unchanged when the editor cannot remove it', async () => {
     const story =
       "import { shared } from './shared';\nexport default { argTypes: { label: { ...shared, defaultValue: 'A' } } };";
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/argtypes-default-value.ts b/code/lib/cli-storybook/src/automigrate/fixes/argtypes-default-value.ts
index 1c0b32566854..2cacfeb10630 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/argtypes-default-value.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/argtypes-default-value.ts
@@ -2,7 +2,7 @@ import type { CsfObject, ESTree as E } from 'storybook/internal/csf-tools';
 
 import picocolors from 'picocolors';
 
-import { readForEdit } from '../helpers/edit-parsed-file.ts';
+import { everyCsfObject, readForEdit } from '../helpers/edit-parsed-file.ts';
 import type { Fix } from '../types.ts';
 
 const argName = (property: E.ObjectProperty): string | undefined => {
@@ -44,7 +44,7 @@ export const argtypesDefaultValue: Fix = {
       filter: { kind: ['preview', 'story'], code: 'defaultValue' },
       editConfig: strip,
       editCsf: (csf) => {
-        csf.objects().forEach(strip);
+        everyCsfObject(csf).forEach(strip);
       },
     },
   ],
diff --git a/code/lib/cli-storybook/src/automigrate/helpers/edit-parsed-file.ts b/code/lib/cli-storybook/src/automigrate/helpers/edit-parsed-file.ts
index 53e8a4fd29f0..e6befdea0075 100644
--- a/code/lib/cli-storybook/src/automigrate/helpers/edit-parsed-file.ts
+++ b/code/lib/cli-storybook/src/automigrate/helpers/edit-parsed-file.ts
@@ -1,13 +1,18 @@
 import { HandledError } from 'storybook/internal/common';
-import type {
-  ConfigFile,
-  CsfMutationDiagnostic,
-  CsfObject,
-  ESTree as E,
+import {
+  type ConfigFile,
+  type CsfFile,
+  type CsfMutationDiagnostic,
+  type CsfObject,
+  type ESTree as E,
+  unwrapExpression,
 } from 'storybook/internal/csf-tools';
 
 type ParsedFile = { mutationDiagnostics: ConfigFile['mutationDiagnostics'] };
 
+// Diagnostics an edit has shown it does not need to act on, so they do not fail the file.
+const covered = new WeakSet<CsfMutationDiagnostic>();
+
 const describeDiagnostic = ({ message, loc }: CsfMutationDiagnostic) =>
   loc ? `line ${loc.start.line}: ${message}` : message;
 
@@ -18,7 +23,9 @@ export const editParsedFile = async <File extends ParsedFile>(
 ) => {
   const diagnosticsBefore = file.mutationDiagnostics.length;
   await edit(file);
-  const diagnostics = file.mutationDiagnostics.slice(diagnosticsBefore);
+  const diagnostics = file.mutationDiagnostics
+    .slice(diagnosticsBefore)
+    .filter((diagnostic) => !covered.has(diagnostic));
   if (diagnostics.length > 0) {
     throw new HandledError([...new Set(diagnostics.map(describeDiagnostic))].join('; '));
   }
@@ -38,3 +45,56 @@ export const readForEdit = (
   }
   return found.kind === 'value' ? found.node : undefined;
 };
+
+// The initializer of a top-level `const`, whose binding nothing can reassign.
+const constInitializer = (csf: CsfFile, name: string) => {
+  for (const statement of csf.program.body) {
+    const declaration =
+      statement.type === 'ExportNamedDeclaration' ? statement.declaration : statement;
+    if (declaration?.type !== 'VariableDeclaration' || declaration.kind !== 'const') {
+      continue;
+    }
+    for (const declarator of declaration.declarations) {
+      if (declarator.id.type === 'Identifier' && declarator.id.name === name) {
+        return declarator.init ? unwrapExpression(declarator.init) : undefined;
+      }
+    }
+  }
+  return undefined;
+};
+
+/**
+ * Discover the meta and stories, as `csf.objects()` does, for an edit that applies alike to every
+ * object it returns. A story declared as another story, such as `export const Secondary = Primary`,
+ * shares that story's object, so editing that story covers it: discovery reports it as an
+ * `unsupported-initializer`, which does not fail the file.
+ */
+export const everyCsfObject = (csf: CsfFile): readonly CsfObject[] => {
+  const diagnosticsBefore = csf.mutationDiagnostics.length;
+  const objects = csf.objects();
+  const edited = new Set(
+    objects.flatMap(({ target }) => (target.kind === 'story' ? [target.localName] : []))
+  );
+  const aliases = csf.mutationDiagnostics.slice(diagnosticsBefore).flatMap((diagnostic) => {
+    const { code, path, target } = diagnostic;
+    if (code !== 'unsupported-initializer' || path.length > 0 || target.kind !== 'story') {
+      return [];
+    }
+    const init = constInitializer(csf, target.localName);
+    return init?.type === 'Identifier'
+      ? [{ diagnostic, name: target.localName, of: init.name }]
+      : [];
+  });
+  // An alias of an alias is covered once the story it names is.
+  for (let found = true; found;) {
+    found = false;
+    for (const { diagnostic, name, of } of aliases) {
+      if (!covered.has(diagnostic) && edited.has(of)) {
+        covered.add(diagnostic);
+        edited.add(name);
+        found = true;
+      }
+    }
+  }
+  return objects;
+};

From 3852188442182f5e38a090cf1ca7e788b0b7c9e8 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 18:47:09 +0200
Subject: [PATCH 321/326] fix(csf-tools): reset changed when a transaction
 rolls back

Only `CsfFile#transaction` and `ConfigFile#transaction` restored the
file's `changed` flag on rollback, so a transaction started on the now
public `csf.editor` that rolled back left `csf.changed` true while the
code was as before.

The file now registers the reset through `editor._onRollback` when it
first sets the flag, as `CsfObject` does for its own `changed`. Any
transaction running, on the file or on its editor, resets it, and the
file's `transaction` methods no longer need their own rollback.
`ConfigFile` sets the flag through `_markChanged` for its array helpers
and call arguments too.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 code/core/src/csf-tools/ConfigFile.ts     | 24 ++++++++++------
 code/core/src/csf-tools/CsfFile.ts        | 15 ++++++----
 code/core/src/csf-tools/CsfObject.test.ts | 35 +++++++++++++++++++++++
 3 files changed, 60 insertions(+), 14 deletions(-)

diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index 216cc6cd400e..b1c049a54419 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -411,10 +411,18 @@ export class ConfigFile implements CsfObject {
    * ```
    */
   transaction(fn: () => boolean | void): boolean {
-    const changed = this._changed;
-    return this.editor.transaction(fn, () => {
-      this._changed = changed;
-    });
+    return this.editor.transaction(fn);
+  }
+
+  // The transaction running, if any, resets the flag when it rolls back, also when it was started
+  // on `editor` directly.
+  _markChanged() {
+    if (!this._changed) {
+      this._changed = true;
+      this.editor._onRollback(() => {
+        this._changed = false;
+      });
+    }
   }
 
   _mutate(operation: (object: CsfObjectEditor) => CsfMutationResult): CsfMutationResult {
@@ -423,7 +431,7 @@ export class ConfigFile implements CsfObject {
       'mutate',
       (diagnostic) => this._mutationDiagnostics.push(diagnostic),
       () => {
-        this._changed = true;
+        this._markChanged();
       }
     );
     if (editor.ok === true) {
@@ -803,7 +811,7 @@ export class ConfigFile implements CsfObject {
     }
     appendToList(this.editor, arrayList(this.editor, current), [source]);
     this.editor.commit();
-    this._changed = true;
+    this._markChanged();
     return { ok: true, changed: true };
   }
 
@@ -834,7 +842,7 @@ export class ConfigFile implements CsfObject {
     }
     removeFromList(this.editor, arrayList(this.editor, current), [element]);
     this.editor.commit();
-    this._changed = true;
+    this._markChanged();
     return { ok: true, changed: true };
   }
 
@@ -898,7 +906,7 @@ export class ConfigFile implements CsfObject {
         },
       };
       return createCsfObject(target, host, report, () => {
-        this._changed = true;
+        this._markChanged();
       });
     });
   }
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index 3a1d13b370b6..2648955e4e51 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -457,7 +457,14 @@ export class CsfFile {
       options,
       (diagnostic) => state.diagnostics.push(diagnostic),
       () => {
-        state.changed = true;
+        // The transaction running, if any, resets the flag when it rolls back, also when it was
+        // started on `editor` directly.
+        if (!state.changed) {
+          state.changed = true;
+          this.editor._onRollback(() => {
+            state.changed = false;
+          });
+        }
       }
     );
   }
@@ -478,11 +485,7 @@ export class CsfFile {
    * ```
    */
   transaction(fn: () => boolean | void): boolean {
-    const state = mutationStates.get(this)!;
-    const { changed } = state;
-    return this.editor.transaction(fn, () => {
-      state.changed = changed;
-    });
+    return this.editor.transaction(fn);
   }
 
   /**
diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index 482481bb4b13..930376b45e03 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -1649,6 +1649,26 @@ export const A = {
       expect(kept).toBe(false);
       expect(printCsf(csf).code).toBe(source);
       expect(story.changed).toBe(false);
+      expect(csf.changed).toBe(false);
+    });
+
+    it('resets changed when a transaction started on the editor rolls back', () => {
+      const csf = parse(source);
+      const [meta, story] = csf.objects();
+
+      const kept = csf.editor.transaction(() => {
+        meta.set(['parameters', 'a'], 1);
+        return false;
+      });
+
+      expect(kept).toBe(false);
+      expect(printCsf(csf).code).toBe(source);
+      expect(meta.changed).toBe(false);
+      expect(csf.changed).toBe(false);
+
+      story.remove(['parameters', 'msw']);
+      expect(csf.editor.transaction(() => (meta.set(['parameters', 'a'], 1), false))).toBe(false);
+      expect(csf.changed).toBe(true);
     });
 
     it('rolls back what a function returning a promise did before throwing', () => {
@@ -1688,6 +1708,21 @@ export const A = {
       expect(config.changed).toBe(false);
       expect(config.getValue(['parameters'])).toEqual({ layout: 'centered' });
     });
+
+    it('resets the config changed when a transaction started on the editor rolls back', () => {
+      const code = "export default { layout: 'centered', tags: ['a'] };";
+      const config = loadConfig(code).parse();
+
+      const kept = config.editor.transaction(() => {
+        config.remove(['layout']);
+        config.appendValueToArray(['tags'], 'b');
+        return false;
+      });
+
+      expect(kept).toBe(false);
+      expect(printConfig(config).code).toBe(code);
+      expect(config.changed).toBe(false);
+    });
   });
 });
 

From fc98e3b309a4fb59a7f18c6c0bccfc570994a5ab Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Oct 2026 18:47:13 +0200
Subject: [PATCH 322/326] docs(csf-tools): feature detection and the
 removeField row

MIGRATION tells addons that support Storybook 10 and 11 to detect the
new API with `typeof csfTools.parseModule === 'function'` on
`storybook/internal/csf-tools`, as the ports already do. The
`removeField` row says that `remove` also deletes a parent it leaves
empty: `export const core = { builder: 'webpack4' }` loses the export
instead of becoming `export const core = {}`.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 MIGRATION.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 3d687bc28cb5..1dfdae800372 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1398,6 +1398,8 @@ These packages read `storybook/internal/babel` or Babel-shaped `csf-tools` field
 
 #### Changes for tooling that imports Storybook's internal entry points
 
+An addon that supports both Storybook 10 and 11 can detect the new API with `typeof csfTools.parseModule === 'function'`, where `csfTools` is `import * as csfTools from 'storybook/internal/csf-tools'`.
+
 - `storybook/internal/babel` is removed. Import Babel from your own `@babel/*` dependencies if you still need it.
 - `getBabelDependencies` is removed from `storybook/internal/cli`.
 - The nodes exposed by `storybook/internal/csf-tools` are ESTree (OXC) nodes instead of Babel nodes, for example `Literal` instead of `StringLiteral` and `Property` instead of `ObjectProperty`/`ObjectMethod`. `CsfFile._ast` and the `NodePath` fields are removed; use `CsfFile.program` and `CsfFile.editor`. `ConfigFile._ast` is removed as well; use `ConfigFile.program` and `ConfigFile.editor`. Both `editor`s are a `SourceEditor`: call `editor.commit()` to apply pending edits, after which the file parses the result again. `_program` and `_editor` remain as deprecated aliases in Storybook 11. The editing functions and `source()` throw for nodes of another parse, such as nodes from before a commit; offsets passed to `editor.edits` are not checked.
@@ -1448,7 +1450,7 @@ If your custom migration tooling imports `ConfigFile` from `storybook/internal/c
 | ------------------------------------ | ------------------------ |
 | `getFieldValue`, `getSafeFieldValue` | `getValue`               |
 | `setFieldNode`, `setFieldValue`      | `set`                    |
-| `removeField`                        | `remove`                 |
+| `removeField`                        | `remove`, which also removes a parent it leaves empty: `export const core = { builder: 'webpack4' }` loses the export instead of becoming `export const core = {}` |
 | `findNamedImportMethodCalls`         | `callArguments`          |
 | `FindNamedImportMethodCallsOptions`  | `CallArgumentsOptions`   |
 

From 9925717870155a2af204d346e60c0e445e631752 Mon Sep 17 00:00:00 2001
From: Kyle Gach <kg@chromatic.com>
Date: Tue, 20 Oct 2026 19:29:23 -0600
Subject: [PATCH 323/326] Add CSF Next snippets, prose tweaks

---
 .../web-components-story-snippet-args.md      | 44 ++++++++++++-
 .../web-components-story-snippet-listeners.md | 38 ++++++++++-
 .../web-components-story-snippet-template.md  | 64 ++++++++++++++++---
 .../frameworks/web-components-vite.mdx        | 16 ++---
 4 files changed, 140 insertions(+), 22 deletions(-)

diff --git a/docs/_snippets/web-components-story-snippet-args.md b/docs/_snippets/web-components-story-snippet-args.md
index dc2d8ca7f1eb..d8f5f379de21 100644
--- a/docs/_snippets/web-components-story-snippet-args.md
+++ b/docs/_snippets/web-components-story-snippet-args.md
@@ -1,4 +1,44 @@
-```js filename="lit-slots-and-css.stories.js" renderer="web-components" language="js"
+```js filename="lit-slots-and-css.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import './lit-slots-and-css';
+
+const meta = preview.meta({
+  component: 'lit-slots-and-css',
+});
+
+export const Basic = meta.story({
+  args: {
+    heading: 'Hello',
+    'default-slot': 'Body <b>text</b>',
+    'actions-slot': '<button>Confirm</button>',
+    'panel-part': 'color: rebeccapurple;',
+    '--slot-panel-color': 'teal',
+  },
+});
+```
+
+```ts filename="lit-slots-and-css.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import './lit-slots-and-css';
+
+const meta = preview.meta({
+  component: 'lit-slots-and-css',
+});
+
+export const Basic = meta.story({
+  args: {
+    heading: 'Hello',
+    'default-slot': 'Body <b>text</b>',
+    'actions-slot': '<button>Confirm</button>',
+    'panel-part': 'color: rebeccapurple;',
+    '--slot-panel-color': 'teal',
+  },
+});
+```
+
+```js filename="lit-slots-and-css.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import './lit-slots-and-css';
 
 export default {
@@ -16,7 +56,7 @@ export const Basic = {
 };
 ```
 
-```ts filename="lit-slots-and-css.stories.ts" renderer="web-components" language="ts"
+```ts filename="lit-slots-and-css.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 import './lit-slots-and-css';
diff --git a/docs/_snippets/web-components-story-snippet-listeners.md b/docs/_snippets/web-components-story-snippet-listeners.md
index 84db8e0ad49c..de170a5716cc 100644
--- a/docs/_snippets/web-components-story-snippet-listeners.md
+++ b/docs/_snippets/web-components-story-snippet-listeners.md
@@ -1,4 +1,38 @@
-```js filename="lit-events.stories.js" renderer="web-components" language="js"
+```js filename="lit-events.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import './lit-events';
+
+const meta = preview.meta({
+  component: 'lit-events',
+});
+
+export const WithListener = meta.story({
+  args: {
+    value: 'changed',
+    'my-change-event': () => {},
+  },
+});
+```
+
+```ts filename="lit-events.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import './lit-events';
+
+const meta = preview.meta({
+  component: 'lit-events',
+});
+
+export const WithListener = meta.story({
+  args: {
+    value: 'changed',
+    'my-change-event': () => {},
+  },
+});
+```
+
+```js filename="lit-events.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import './lit-events';
 
 export default {
@@ -13,7 +47,7 @@ export const WithListener = {
 };
 ```
 
-```ts filename="lit-events.stories.ts" renderer="web-components" language="ts"
+```ts filename="lit-events.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 import './lit-events';
diff --git a/docs/_snippets/web-components-story-snippet-template.md b/docs/_snippets/web-components-story-snippet-template.md
index 2fd6e798c18f..3dcaae3092ef 100644
--- a/docs/_snippets/web-components-story-snippet-template.md
+++ b/docs/_snippets/web-components-story-snippet-template.md
@@ -1,4 +1,48 @@
-```js filename="lit-slots-and-css.stories.js" renderer="web-components" language="js"
+```js filename="lit-slots-and-css.stories.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { html } from 'lit';
+
+import './lit-slots-and-css';
+
+const meta = preview.meta({
+  component: 'lit-slots-and-css',
+});
+
+export const CustomMarkup = meta.story({
+  render: (args) =>
+    html`<lit-slots-and-css heading=${args.heading}>
+      <p>Default slot content</p>
+      <button slot="actions">Confirm</button>
+    </lit-slots-and-css>`,
+  args: {
+    heading: 'Hello',
+  },
+});
+```
+
+```ts filename="lit-slots-and-css.stories.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { html } from 'lit';
+
+import './lit-slots-and-css';
+
+const meta = preview.meta({
+  component: 'lit-slots-and-css',
+});
+
+export const CustomMarkup = meta.story({
+  render: (args) =>
+    html`<lit-slots-and-css heading=${args.heading}>
+      <p>Default slot content</p>
+      <button slot="actions">Confirm</button>
+    </lit-slots-and-css>`,
+  args: {
+    heading: 'Hello',
+  },
+});
+```
+
+```js filename="lit-slots-and-css.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"
 import { html } from 'lit';
 
 import './lit-slots-and-css';
@@ -9,17 +53,17 @@ export default {
 
 export const CustomMarkup = {
   render: (args) =>
-    html`<lit-slots-and-css heading=${args.heading}
-      ><p>Default slot content</p>
-      <button slot="actions">Confirm</button></lit-slots-and-css
-    >`,
+    html`<lit-slots-and-css heading=${args.heading}>
+      <p>Default slot content</p>
+      <button slot="actions">Confirm</button>
+    </lit-slots-and-css>`,
   args: {
     heading: 'Hello',
   },
 };
 ```
 
-```ts filename="lit-slots-and-css.stories.ts" renderer="web-components" language="ts"
+```ts filename="lit-slots-and-css.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"
 import { html } from 'lit';
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
@@ -34,10 +78,10 @@ type Story = StoryObj<typeof meta>;
 
 export const CustomMarkup: Story = {
   render: (args) =>
-    html`<lit-slots-and-css heading=${args.heading}
-      ><p>Default slot content</p>
-      <button slot="actions">Confirm</button></lit-slots-and-css
-    >`,
+    html`<lit-slots-and-css heading=${args.heading}>
+      <p>Default slot content</p>
+      <button slot="actions">Confirm</button>
+    </lit-slots-and-css>`,
   args: {
     heading: 'Hello',
   },
diff --git a/docs/get-started/frameworks/web-components-vite.mdx b/docs/get-started/frameworks/web-components-vite.mdx
index 5975dbc5ddc2..fbe5a5d2c782 100644
--- a/docs/get-started/frameworks/web-components-vite.mdx
+++ b/docs/get-started/frameworks/web-components-vite.mdx
@@ -46,12 +46,16 @@ Storybook for Web components with Vite needs no extra configuration. It reads yo
 
 ### Writing stories
 
-In your story file, set `component` to the element's tag name and import the module that defines the element. Storybook then finds the element's attributes, properties, events, slots, CSS custom properties, CSS parts, and CSS states. It uses them to create controls and [automatic documentation](../../writing-docs/autodocs.mdx), and it shows your JSDoc comments as descriptions.
+In your story file, set the `component` property to the element's tag name and import the module that defines the element. Storybook then finds the element's attributes, properties, events, slots, CSS custom properties, CSS parts, and CSS states. It uses them to create [controls](../../essentials/controls.mdx) and automatic documentation, and it shows your JSDoc comments as descriptions.
 
 By default, Storybook renders the element from the story's args:
 
 <CodeSnippets path="web-components-story-snippet-args.md" />
 
+To listen to an event, set its arg to a function:
+
+<CodeSnippets path="web-components-story-snippet-listeners.md" />
+
 Each arg key tells Storybook which part of the element to set. Keys for events, slots, CSS parts, and CSS states end in a suffix, so they do not conflict with attribute names:
 
 | Element API         | Arg key                                               | Example                                      | Result                                                          |
@@ -69,17 +73,13 @@ To write the markup yourself, add a `render` function that returns a Lit `html`
 
 <CodeSnippets path="web-components-story-snippet-template.md" />
 
-To listen to an event, set its arg to a function:
-
-<CodeSnippets path="web-components-story-snippet-listeners.md" />
-
-Storybook finds your elements by following the imports in your story files and preview file. If it cannot find or read an element, the Controls table shows a message, and so does `npx storybook tools docs show`. The build does not fail.
+Storybook finds your elements by following the imports in your story files and preview file. If it cannot find or read an element, the Controls table shows a message, as will agents using the Storybook's [AI tools](../../ai/index.mdx). The build does not fail.
 
-A story file without `component` gets no automatic controls. The `Button`, `Header`, and `Page` example stories that Storybook adds to a new project work this way: they render through a template function, and the Code panel shows the story's source code.
+A story file with no `component` defined gets no automatic controls. The `Button`, `Header`, and `Page` example stories that Storybook adds to a new project work this way: they render through a template function, and the Code panel shows the story's source code.
 
 ### Code snippets
 
-Autodocs and the Code panel show HTML that Storybook generates from your story. For a story that uses args, the snippet is one element with its attributes and slot content, plus a `<style>` block when needed. For example, the `Basic` story above becomes:
+[Autodocs](../../writing-docs/autodocs.mdx) and the [Code panel](../../writing-docs/code-panel.mdx) show HTML that Storybook generates from your story. For a story that uses args, the snippet is one element with its attributes and slot content, plus a `<style>` block when needed. For example, the `Basic` story above becomes:
 
 ```html
 <style>

From de7da9b8be38f349da2f33fa667045950344d8f2 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 21 Oct 2026 09:25:41 +0200
Subject: [PATCH 324/326] docs(agents): list Chromatic project IDs for the UI
 and sandboxes

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .agents/guidelines/chromatic-projects.md | 40 ++++++++++++++++++++++++
 AGENTS.md                                |  1 +
 2 files changed, 41 insertions(+)
 create mode 100644 .agents/guidelines/chromatic-projects.md

diff --git a/.agents/guidelines/chromatic-projects.md b/.agents/guidelines/chromatic-projects.md
new file mode 100644
index 000000000000..bf36d6dfb44a
--- /dev/null
+++ b/.agents/guidelines/chromatic-projects.md
@@ -0,0 +1,40 @@
+# Chromatic Projects
+
+Pass the project ID as `projectId` to the Chromatic tools. Sandbox projects are listed by template key, which is the name in the `<template> (chromatic)` CI job.
+
+| Project                                  | Project ID                         |
+| ---------------------------------------- | ---------------------------------- |
+| internal Storybook UI (`code/`)          | `Project:635781f3500dd2c49e189caf` |
+| `react-vite/default-ts`                  | `Project:630511d655df72125520f051` |
+| `react-vite/default-js`                  | `Project:6305104a03ce824473a88c65` |
+| `react-vite/prerelease-ts`               | `Project:6637a367fa5b4eaa26d92d25` |
+| `react-webpack/18-ts`                    | `Project:633c394125f29c2cbb5a4cac` |
+| `react-webpack/prerelease-ts`            | `Project:6637a3aad047d2bb1b3cbfe9` |
+| `react-native-web-vite/expo-ts`          | `Project:6739a507de968e78c90c81af` |
+| `nextjs/default-ts`                      | `Project:634ff0d0ec053b270775979d` |
+| `nextjs/15-ts`                           | `Project:68fa3e766deb52421c1acf27` |
+| `nextjs/prerelease`                      | `Project:6527cbbdfc5de6c10b0bbe2b` |
+| `nextjs-vite/default-ts`                 | `Project:66b1e47012f95c6f90c8882e` |
+| `nextjs-vite/15-ts`                      | `Project:68fa3c0353a6ab43d601462f` |
+| `tanstack-react-router/default-ts`       | `Project:69f08674491608f953c605b2` |
+| `tanstack-react-start/default-ts`        | `Project:69f0872a77e679e347550cfe` |
+| `angular-cli/default-ts`                 | `Project:6322ce6af69825592bbb28fc` |
+| `angular-vite/default-ts`                | `Project:6a021028c2f37c1d2f640723` |
+| `angular-vite/21-ts`                     | `Project:6a39460ac63cf417c1a079ff` |
+| `vue3-vite/default-ts`                   | `Project:630513346a8e284ae244d415` |
+| `vue3-vite/default-js`                   | `Project:630513046a8e284ae244cab4` |
+| `vue3-vite/prerelease-ts`                | `Project:6acf97c724e2b86a56912992` |
+| `svelte-vite/default-ts`                 | `Project:630873996e4e3557791c069c` |
+| `svelte-vite/default-js`                 | `Project:6308736456ad2046275c0ae7` |
+| `svelte-kit/skeleton-ts`                 | `Project:634ff6954afef8aae1c1b29b` |
+| `lit-vite/default-ts`                    | `Project:638db5bf49adfdfe8cf545e0` |
+| `lit-vite/default-js`                    | `Project:638db567ed97c3fb3e21cc22` |
+| `preact-vite/default-ts`                 | `Project:63b588a512565bfaace15e7c` |
+| `preact-vite/default-js`                 | `Project:63b5884a12565bfaace14c83` |
+| `html-vite/default-ts`                   | `Project:63dd39a158cf6fc05199b4bb` |
+| `html-vite/default-js`                   | `Project:63dd397461b9918f7bdd988e` |
+| `internal/react18-webpack-babel`         | `Project:659810cb7e778e400627527a` |
+| `bench/react-vite-default-ts-test-build` | `Project:6544b941802d9ff884a3f74d` |
+| `bench/react-webpack-18-ts-test-build`   | `Project:6544b98f47ff41fd955b43cb` |
+
+When you add or remove a template that runs the `chromatic` task, update this table in the same PR.
diff --git a/AGENTS.md b/AGENTS.md
index 2a49742edf5d..2222c425ccd7 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -31,6 +31,7 @@ Both start long-running dev servers.
 | open or update a PR                                       | [Pull requests](.agents/guidelines/pull-requests.md)                                                            |
 | touch `code/core` internals, presets, open services, or the tools CLI | [Architecture](.agents/guidelines/architecture.md)                                                  |
 | do sandbox, E2E, or CI-parity work                        | [NX and `yarn task`](.agents/guidelines/nx-and-yarn-task.md) and [Sandboxes](.agents/guidelines/sandboxes.md)   |
+| call a Chromatic tool or debug a Chromatic build          | [Chromatic projects](.agents/guidelines/chromatic-projects.md)                                                  |
 | add or change an automigration                            | [`code/lib/cli-storybook/src/automigrate/README.md`](code/lib/cli-storybook/src/automigrate/README.md)          |
 
 Contributor skills live in `.agents/skills/`; `.claude/skills/` references them.

From 34a580b0c61bab826e3113a8bc5386cefa1e1ab3 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 21 Oct 2026 09:31:06 +0200
Subject: [PATCH 325/326] docs(agents): map CI job display names to template
 keys

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .agents/guidelines/chromatic-projects.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.agents/guidelines/chromatic-projects.md b/.agents/guidelines/chromatic-projects.md
index bf36d6dfb44a..1bfe00054db5 100644
--- a/.agents/guidelines/chromatic-projects.md
+++ b/.agents/guidelines/chromatic-projects.md
@@ -1,6 +1,6 @@
 # Chromatic Projects
 
-Pass the project ID as `projectId` to the Chromatic tools. Sandbox projects are listed by template key, which is the name in the `<template> (chromatic)` CI job.
+Pass the project ID as `projectId` to the Chromatic tools. Sandbox projects are listed by template key. CI job names use the template's display name instead, and `code/lib/cli-storybook/src/sandbox-templates.ts` maps each display name to its key.
 
 | Project                                  | Project ID                         |
 | ---------------------------------------- | ---------------------------------- |

From 26a1af742a6c6de33beb56c741546e21c0803fd2 Mon Sep 17 00:00:00 2001
From: storybook-bot <32066757+storybook-bot@users.noreply.github.com>
Date: Wed, 21 Oct 2026 11:49:42 +0000
Subject: [PATCH 326/326] Write changelog for 11.0.0-alpha.8 [skip ci]

---
 CHANGELOG.prerelease.md | 23 +++++++++++++++++++++++
 code/package.json       |  3 ++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
index b6f064e50c71..77badc5bab3e 100644
--- a/CHANGELOG.prerelease.md
+++ b/CHANGELOG.prerelease.md
@@ -1,3 +1,26 @@
+## 11.0.0-alpha.8
+
+- Addon-Docs: Prevent source transform from being applied twice on docs pages - [#36061](https://github.com/storybookjs/storybook/pull/36061), thanks @webdevsamran!
+- Angular: Read Component Metadata From Ivy Declarations - [#36780](https://github.com/storybookjs/storybook/pull/36780), thanks @dvmhmdsd!
+- Builder Vite: Report silent vite config discovery misses with a named warning - [#36788](https://github.com/storybookjs/storybook/pull/36788), thanks @obvious-autobuild!
+- CSF: Run csf-tools on OXC instead of Babel - [#36613](https://github.com/storybookjs/storybook/pull/36613), thanks @EastonShin!
+- Core: Exempt chromatic from release-age gates alongside the Chromatic addon - [#36910](https://github.com/storybookjs/storybook/pull/36910), thanks @valentinpalkovic!
+- Core: Skip TypeScript loader hook registration under Jest - [#36790](https://github.com/storybookjs/storybook/pull/36790), thanks @obvious-autobuild!
+- Manager: Improve UI stability on onboarding checklist - [#36341](https://github.com/storybookjs/storybook/pull/36341), thanks @Sidnioulz!
+- Manager: Type index titles by their contents - [#36659](https://github.com/storybookjs/storybook/pull/36659), thanks @valentinpalkovic!
+- PNPM: Preapprove esbuild postinstall when possible - [#36758](https://github.com/storybookjs/storybook/pull/36758), thanks @Sidnioulz!
+- React renderer: Prebundle react so Vitest browser mode can link React's default export - [#36824](https://github.com/storybookjs/storybook/pull/36824), thanks @obvious-autobuild!
+- React: Alias preview React from the renderer preset - [#36841](https://github.com/storybookjs/storybook/pull/36841), thanks @ndelangen!
+- Svelte: Accept preview.meta() in Svelte CSF files - [#36691](https://github.com/storybookjs/storybook/pull/36691), thanks @JReinhold!
+- Svelte: Add CSF factories with definePreview - [#36669](https://github.com/storybookjs/storybook/pull/36669), thanks @JReinhold!
+- Svelte: Migrate Svelte CSF files to CSF factories and run the Svelte sandboxes with them - [#36702](https://github.com/storybookjs/storybook/pull/36702), thanks @JReinhold!
+- Svelte: Remove deprecated parameters.component path - [#36813](https://github.com/storybookjs/storybook/pull/36813), thanks @ndelangen!
+- TanstackReact: Fix accross typo in path-utils comment - [#36634](https://github.com/storybookjs/storybook/pull/36634), thanks @obvious-autobuild!
+- WC: Keep properties named like an unrelated attribute - [#36862](https://github.com/storybookjs/storybook/pull/36862), thanks @huang-julien!
+- WC: Normalize multiline type text in WC arg type parsing - [#36805](https://github.com/storybookjs/storybook/pull/36805), thanks @huang-julien!
+- WC: Read WC meta.component through a spread of a local meta object - [#36812](https://github.com/storybookjs/storybook/pull/36812), thanks @huang-julien!
+- WC: Skip undefined and null args in the web components default render - [#36806](https://github.com/storybookjs/storybook/pull/36806), thanks @huang-julien!
+
 ## 11.0.0-alpha.7
 
 - Addon Themes: Declare the package as an ES module - [#36721](https://github.com/storybookjs/storybook/pull/36721), thanks @ump45nose!
diff --git a/code/package.json b/code/package.json
index 4910f0881ecb..bdfd75cfefec 100644
--- a/code/package.json
+++ b/code/package.json
@@ -191,5 +191,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "11.0.0-alpha.8"
 }